css/site.css

@@ -30,7 +30,7 @@ body.custom-background { background-color: #ffffff; }
 
 .speech-filters {
   display: grid;
-  grid-template-columns: minmax(240px, 2fr) repeat(2, minmax(150px, 1fr)) auto;
+  grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(150px, 1fr)) auto;
   gap: 12px;
   align-items: end;
   margin: 0 0 18px;
@@ -100,16 +100,18 @@ body.custom-background { background-color: #ffffff; }
 }
 
 .speech-result p {
-  margin: 0;
+  margin: 0 0 10px;
 }
 
-.speech-result-meta {
+.speech-result-meta,
+.speech-result-categories {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 }
 
-.speech-result-meta span {
+.speech-result-meta span,
+.speech-result-categories span {
   display: inline-flex;
   align-items: center;
   min-height: 22px;

src/pages/speeches/index.astro

@@ -5,11 +5,12 @@ import { getSpeechArchive, uniqueSorted } from "../../lib/speeches";
 const speeches = getSpeechArchive();
 const years = uniqueSorted(speeches.map((speech) => speech.year), "desc");
 const speakers = uniqueSorted(speeches.map((speech) => speech.speaker));
+const categories = uniqueSorted(speeches.flatMap((speech) => speech.categories.length ? speech.categories : [speech.category]));
 ---
 
 <SiteLayout
   title="Speeches Archive &#8211; FFWPU Ireland"
-  description="Search the FFWPU Ireland archive of speeches by Rev. Sun Myung Moon and Dr. Hak Ja Han Moon by year, speaker, and text."
+  description="Search the FFWPU Ireland archive of speeches by Rev. Sun Myung Moon and Dr. Hak Ja Han Moon by year, speaker, category, and text."
   bodyClass="page-template page-template-templates page-template-template-onecolumn page-template-templatestemplate-onecolumn-php page custom-background tribe-no-js metaslider-plugin parabola-image-three caption-light meta-light parabola_triagles parabola-menu-left"
   pathname="/speeches/"
   canonical="/speeches/"
@@ -46,6 +47,14 @@ const speakers = uniqueSorted(speeches.map((speech) => speech.speaker));
                   </select>
                 </div>
 
+                <div class="speech-filter">
+                  <label for="speech-category">Category</label>
+                  <select id="speech-category" name="category">
+                    <option value="">All categories</option>
+                    {categories.map((category) => <option value={category}>{category}</option>)}
+                  </select>
+                </div>
+
                 <button class="speech-reset" type="reset">Reset filters</button>
               </form>
 
@@ -65,6 +74,9 @@ const speakers = uniqueSorted(speeches.map((speech) => speech.speaker));
                         <a href={speech.url}>{speech.title}</a>
                       </h2>
                       <p>{speech.excerpt}</p>
+                      <div class="speech-result-categories">
+                        {(speech.categories.length ? speech.categories : [speech.category]).map((category) => <span>{category}</span>)}
+                      </div>
                     </article>
                   ))
                 }
@@ -86,8 +98,9 @@ const speakers = uniqueSorted(speeches.map((speech) => speech.speaker));
       const searchInput = document.getElementById("speech-search");
       const yearSelect = document.getElementById("speech-year");
       const speakerSelect = document.getElementById("speech-speaker");
+      const categorySelect = document.getElementById("speech-category");
 
-      if (!form || !results || !count || !searchInput || !yearSelect || !speakerSelect) {
+      if (!form || !results || !count || !searchInput || !yearSelect || !speakerSelect || !categorySelect) {
         return;
       }
 
@@ -107,6 +120,7 @@ const speakers = uniqueSorted(speeches.map((speech) => speech.speaker));
           q: searchInput.value.trim(),
           year: yearSelect.value,
           speaker: speakerSelect.value,
+          category: categorySelect.value,
         };
       }
 
@@ -127,6 +141,7 @@ const speakers = uniqueSorted(speeches.map((speech) => speech.speaker));
         searchInput.value = params.get("q") || "";
         yearSelect.value = params.get("year") || "";
         speakerSelect.value = params.get("speaker") || "";
+        categorySelect.value = params.get("category") || "";
       }
 
       function matchesSpeech(speech, filters) {
@@ -136,6 +151,9 @@ const speakers = uniqueSorted(speeches.map((speech) => speech.speaker));
         if (filters.speaker && speech.speaker !== filters.speaker) {
           return false;
         }
+        if (filters.category && !speech.categories.includes(filters.category) && speech.category !== filters.category) {
+          return false;
+        }
         if (!filters.q) {
           return true;
         }
@@ -170,7 +188,11 @@ const speakers = uniqueSorted(speeches.map((speech) => speech.speaker));
         const excerpt = document.createElement("p");
         excerpt.textContent = speech.excerpt;
 
-        article.append(meta, title, excerpt);
+        const categories = document.createElement("div");
+        categories.className = "speech-result-categories";
+        appendMeta(categories, speech.categories.length ? speech.categories : [speech.category]);
+
+        article.append(meta, title, excerpt, categories);
         return article;
       }