From 29bcc0ddca2f5bacabc51f3d121a3d28f952d2b9 Mon Sep 17 00:00:00 2001 From: Carter McBride <18412686+carterworks@users.noreply.github.com> Date: Fri, 23 Aug 2024 13:35:01 -0600 Subject: [PATCH] Add category colors --- src/pages/index.astro | 97 +++++++++++++++++++++++++++++++++++++++---- tailwind.config.js | 2 +- 2 files changed, 90 insertions(+), 9 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 4681306..c3aa4ab 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -14,12 +14,76 @@ const recentCount = feedItems.contents.filter((item) => const categories = Array.from( new Set(feedItems.contents.map((item) => item.category)), ).sort(); + +const accentColors = { + slate: { + bg: "bg-slate-200", + bl: "border-l-slate-200", + }, + stone: { + bg: "bg-stone-200", + bl: "border-l-stone-200", + }, + red: { + bg: "bg-red-200", + bl: "border-l-red-200", + }, + amber: { + bg: "bg-amber-200", + bl: "border-l-amber-200", + }, + lime: { + bg: "bg-lime-200", + bl: "border-l-lime-200", + }, + emerald: { + bg: "bg-emerald-200", + bl: "border-l-emerald-200", + }, + cyan: { + bg: "bg-cyan-200", + bl: "border-l-cyan-200", + }, + sky: { + bg: "bg-sky-200", + bl: "border-l-sky-200", + }, + indigo: { + bg: "bg-indigo-200", + bl: "border-l-indigo-200", + }, + fuchsia: { + bg: "bg-fuchsia-200", + bl: "border-l-fuchsia-200", + }, + pink: { + bg: "bg-pink-200", + bl: "border-l-pink-200", + }, + rose: { + bg: "bg-rose-200", + bl: "border-l-rose-200", + }, +}; + +const pickRandomAccentColor = () => { + const accentColorsKeys = Object.keys(accentColors); + const index = Math.floor(Math.random() * accentColorsKeys.length); + return accentColors[accentColorsKeys[index]]; +}; +const categoryColors = ["All", "Recent", ...categories].reduce( + (acc, category) => { + acc[category] = pickRandomAccentColor(); + return acc; + }, + {}, +); const categoriesSelectorCss = ["Recent", ...categories] .map( (c) => ` #category-picker:has(#${c}:checked) ~ main ul { > .${c}-item { - display: block; + display: flex; } > *:not(.${c}-item) { display: none; @@ -40,9 +104,14 @@ const categoriesSelectorCss = ["Recent", ...categories] - -
-

📰 Carter's RSS Feeds

+ +
+

Carter's RSS Feeds

+

{recentCount} recent item(s) | {feedItems.contents.length} item(s) | { feedItems.errors.length @@ -51,7 +120,7 @@ const categoriesSelectorCss = ["Recent", ...categories]