Merge pull request #134 from DenisValeev/codex/onboard-new-dad-jokes-and-categorize

Surface joke categories and add new dad jokes

Author: DenisValeev

apps/jokes/all-jokes-compact.html

@@ -19,6 +19,8 @@
       --table-stripe: rgba(15, 23, 42, 0.03);
       --table-border: rgba(15, 23, 42, 0.1);
       --badge-bg: rgba(74, 99, 255, 0.14);
+      --category-pill-bg: rgba(74, 99, 255, 0.14);
+      --category-pill-text: rgba(31, 50, 143, 0.92);
       background-color: var(--bg-color);
       color: var(--text-primary);
     }
@@ -36,6 +38,8 @@
         --table-stripe: rgba(255, 255, 255, 0.04);
         --table-border: rgba(148, 163, 209, 0.12);
         --badge-bg: rgba(105, 128, 255, 0.16);
+        --category-pill-bg: rgba(105, 128, 255, 0.18);
+        --category-pill-text: rgba(225, 232, 255, 0.92);
       }
 
       .filter input[type="search"] {
@@ -143,6 +147,26 @@
       color: inherit;
     }
 
+    .category-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .category-pill {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 10px;
+      border-radius: 999px;
+      font-size: 0.8rem;
+      font-weight: 600;
+      background: var(--category-pill-bg);
+      color: var(--category-pill-text);
+    }
+
     .filter {
       display: flex;
       flex-direction: column;
@@ -284,17 +308,19 @@ <h1>All Jokes (Compact)</h1>
             <th scope="col">#</th>
             <th scope="col">Joke</th>
             <th scope="col">Punchline</th>
+            <th scope="col">Categories</th>
           </tr>
         </thead>
         <tbody>
           <tr>
-            <td colspan="3">Loading jokes…</td>
+            <td colspan="4">Loading jokes…</td>
           </tr>
         </tbody>
       </table>
     </div>
   </main>
   <script src="jokes.js" defer></script>
+  <script src="joke-categories.js" defer></script>
   <script src="render-all.js" defer></script>
 </body>
 </html>

apps/jokes/all-jokes.html

@@ -52,6 +52,11 @@
         border-color: rgba(241, 245, 255, 0.35);
         color: inherit;
       }
+
+      .category-pill {
+        background: rgba(148, 163, 209, 0.24);
+        color: rgba(241, 245, 255, 0.9);
+      }
     }
 
     main {
@@ -109,6 +114,26 @@
       font-weight: 600;
     }
 
+    .category-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin: 12px 0 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .category-pill {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 10px;
+      border-radius: 999px;
+      font-size: 0.85rem;
+      font-weight: 600;
+      background: rgba(48, 86, 211, 0.12);
+      color: rgba(48, 56, 140, 0.92);
+    }
+
     .filter {
       margin-top: 1.5rem;
       display: flex;
@@ -180,7 +205,7 @@
       </a>
     </nav>
     <h1>All Jokes</h1>
-    <p>Every joke from the dataset in one place. Use the filter to zero in on a favourite.</p>
+    <p>Every joke from the dataset in one place—complete with quick-hit categories. Use the filter to zero in on a favourite or explore a topic.</p>
     <p class="count">Showing <span data-count>0</span> of <span data-total>0</span> jokes</p>
     <form class="filter" data-filter-form>
       <label for="joke-filter">Filter jokes</label>
@@ -196,6 +221,7 @@ <h1>All Jokes</h1>
     </table>
   </main>
   <script src="jokes.js" defer></script>
+  <script src="joke-categories.js" defer></script>
   <script src="render-all.js" defer></script>
 </body>
 </html>

apps/jokes/app.js

@@ -4,6 +4,7 @@
   const prevButton = document.getElementById('prev-button');
   const nextButton = document.getElementById('next-button');
   const revealButton = document.getElementById('reveal-button');
+  const categoryList = document.getElementById('joke-categories');
 
   if (!setupEl || !punchlineEl || !prevButton || !nextButton || !revealButton) {
     return;
@@ -17,6 +18,35 @@
   let index = 0;
   let punchlineVisible = false;
 
+  const categorize =
+    window.jokeCategoryHelper && typeof window.jokeCategoryHelper.categorize === 'function'
+      ? window.jokeCategoryHelper.categorize
+      : null;
+
+  const fallbackCategory =
+    window.jokeCategoryHelper && typeof window.jokeCategoryHelper.fallback === 'string'
+      ? window.jokeCategoryHelper.fallback
+      : 'Classic Dad';
+
+  function renderCategories(values) {
+    if (!categoryList) {
+      return;
+    }
+
+    categoryList.textContent = '';
+
+    const items = Array.isArray(values) && values.length ? values : [fallbackCategory];
+
+    items.forEach((label) => {
+      const pill = document.createElement('li');
+      pill.className = 'category-pill';
+      pill.textContent = label;
+      categoryList.appendChild(pill);
+    });
+
+    categoryList.hidden = false;
+  }
+
   function shuffle(array) {
     const copy = array.slice();
     for (let i = copy.length - 1; i > 0; i -= 1) {
@@ -51,19 +81,27 @@
       revealButton.hidden = true;
       prevButton.disabled = true;
       nextButton.disabled = true;
+      if (categoryList) {
+        categoryList.textContent = '';
+        categoryList.hidden = true;
+      }
       return;
     }
 
     ensureDeck();
     const current = deck[index];
     const hasPunchline = typeof current.punchline === 'string' && current.punchline.trim().length > 0;
     const punchlineText = hasPunchline ? current.punchline : '💩';
+    const categories = categorize
+      ? categorize(current.joke, current.punchline)
+      : [fallbackCategory];
 
     setupEl.textContent = current.joke;
     punchlineEl.textContent = punchlineText;
     revealButton.hidden = false;
 
     setPunchlineVisible(false);
+    renderCategories(categories);
 
     const buttonsDisabled = deck.length <= 1;
     prevButton.disabled = buttonsDisabled;

apps/jokes/index.html

@@ -75,6 +75,34 @@
       gap: 20px;
     }
 
+    .category-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .category-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 12px;
+      border-radius: 999px;
+      font-size: 0.85rem;
+      font-weight: 600;
+      background: rgba(48, 86, 211, 0.12);
+      color: var(--accent);
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .category-pill {
+        background: rgba(112, 132, 255, 0.18);
+        color: #b8c1ff;
+      }
+    }
+
     .home-nav {
       display: flex;
       justify-content: flex-start;
@@ -219,6 +247,7 @@
     </nav>
     <article class="card" aria-live="polite">
       <div class="card__content">
+        <ul id="joke-categories" class="category-list" aria-label="Joke categories" hidden></ul>
         <p id="joke-setup">Loading joke…</p>
         <p id="joke-punchline" aria-hidden="true"></p>
       </div>
@@ -234,6 +263,7 @@
     </div>
   </main>
   <script src="jokes.js" defer></script>
+  <script src="joke-categories.js" defer></script>
   <script src="app.js" defer></script>
 </body>
 </html>