From 50823a020649d3473bbcd5955dac588f381fbe87 Mon Sep 17 00:00:00 2001
From: Carter McBride <18412686+carterworks@users.noreply.github.com>
Date: Fri, 23 Aug 2024 16:22:00 -0600
Subject: [PATCH] Fix categories names with spaces and symbols in them

---
 src/pages/index.astro | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8546b54..3acee0d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -89,11 +89,15 @@ const accentColors = {
 	},
 };
 
-const pickRandomAccentColor = () => {
+function makeCssClassName(str: string): string {
+	return str.toLowerCase().replace(/[^a-z0-9]/g, "-");
+}
+
+function pickRandomAccentColor() {
 	const accentColorsKeys = Object.keys(accentColors);
 	const index = Math.floor(Math.random() * accentColorsKeys.length);
 	return accentColors[accentColorsKeys[index]];
-};
+}
 
 const categoryColors = categories.reduce((acc, category) => {
 	acc[category] = pickRandomAccentColor();
@@ -104,11 +108,11 @@ const categoriesSelectorCss = categories
 	.filter((c) => c !== STATIC_CATEGORIES.All)
 	.map(
 		(c) => `
-#category-picker:has(#${c}:checked) ~ main ul {
-	> .${c}-item {
+#category-picker:has(#${makeCssClassName(c)}:checked) ~ main ul {
+	> .${makeCssClassName(c)}-item {
 		display: block;
 	}
-	> *:not(.${c}-item) {
+	> *:not(.${makeCssClassName(c)}-item) {
 		display: none;
 	}
 }`,
@@ -165,14 +169,14 @@ const categoriesSelectorCss = categories
 					<div>
 						<input
 							type="radio"
-							id={category}
+							id={makeCssClassName(category)}
 							name="category"
 							class="hidden peer"
 							checked={category === STATIC_CATEGORIES.Recent}
 						/>
 						<label
 							class="cursor-pointer transition-all opacity-25 peer-checked:opacity-100 hover:opacity-100 flex flex-row gap-2 items-center"
-							for={category}
+							for={makeCssClassName(category)}
 						>
 							<div
 								class:list={[
@@ -193,7 +197,7 @@ const categoriesSelectorCss = categories
 					feedItems.contents.map((item) => (
 						<li
 							class:list={[
-								`${item.category}-item`,
+								`${makeCssClassName(item.category)}-item`,
 								{
 									[`${STATIC_CATEGORIES.Recent}-item`]: isRecent(
 										item.pubIsoDate,