diff --git a/css/site.css b/css/site.css index c75d99cb..9b1369c3 100644 --- a/css/site.css +++ b/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; diff --git a/src/pages/speeches/index.astro b/src/pages/speeches/index.astro index d37f001b..0165085b 100644 --- a/src/pages/speeches/index.astro +++ b/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])); --- speech.speaker)); +
+ + +
+ @@ -65,6 +74,9 @@ const speakers = uniqueSorted(speeches.map((speech) => speech.speaker)); {speech.title}

{speech.excerpt}

+
+ {(speech.categories.length ? speech.categories : [speech.category]).map((category) => {category})} +
)) } @@ -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; }