gablaxy/bubo-rss
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add category colors

Browse source
This commit is contained in:
Carter McBride 2024-08-23 13:35:01 -06:00
parent b57665720f
commit 29bcc0ddca
2 changed files with 90 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
src/pages/index.astro
View file

@ -14,12 +14,76 @@ const recentCount = feedItems.contents.filter((item) =>
const categories = Array.from( const categories = Array.from(
new Set(feedItems.contents.map((item) => item.category)), new Set(feedItems.contents.map((item) => item.category)),
).sort(); ).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] const categoriesSelectorCss = ["Recent", ...categories]
.map( .map(
(c) => ` (c) => `
#category-picker:has(#${c}:checked) ~ main ul { #category-picker:has(#${c}:checked) ~ main ul {
> .${c}-item { > .${c}-item {
display: block; display: flex;
} }
> *:not(.${c}-item) { > *:not(.${c}-item) {
display: none; display: none;
@ -40,9 +104,14 @@ const categoriesSelectorCss = ["Recent", ...categories]
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<style set:html={categoriesSelectorCss}></style> <style set:html={categoriesSelectorCss}></style>
</head> </head>
<body class="font-system text-base md:grid grid-cols-12 auto-rows-min p-4"> <body
<header class="col-span-12 row-span-1 h-fit"> class="font-system text-base md:grid grid-cols-12 auto-rows-min p-4 bg-orange-50 text-stone-700 font-semibold"
<h1 class="text-2xl">📰 Carter's RSS Feeds</h1> >
<header
class="col-span-12 row-span-1 h-fit mb-4 flex flex-row gap-8 items-center"
>
<h1 class="">Carter's RSS Feeds</h1>
<hr class="flex-grow h-px border-0 border-b-2 border-b-stone-500" />
<p> <p>
{recentCount} recent item(s) | {feedItems.contents.length} item(s) | { {recentCount} recent item(s) | {feedItems.contents.length} item(s) | {
feedItems.errors.length feedItems.errors.length
@ -51,7 +120,7 @@ const categoriesSelectorCss = ["Recent", ...categories]
</header> </header>
<nav <nav
id="category-picker" id="category-picker"
class="flex flex-row md:flex-col gap-2 md:gap-1 col-span-2 sticky top-4 row-span-1" class="flex flex-row mb-2 md:flex-col gap-2 md:gap-1 col-span-2 md:sticky md:top-4 row-span-1"
> >
{ {
["All", "Recent", ...categories.sort()].map((category) => ( ["All", "Recent", ...categories.sort()].map((category) => (
@ -64,10 +133,16 @@ const categoriesSelectorCss = ["Recent", ...categories]
checked={category === "All"} checked={category === "All"}
/> />
<label <label
class="cursor-pointer transition-all peer-checked:underline opacity-25 peer-checked:opacity-100 hover:opacity-100" class="cursor-pointer transition-all peer-checked:underline opacity-25 peer-checked:opacity-100 hover:opacity-100 flex flex-row gap-2 items-center"
for={category} for={category}
> >
{category} <div
class:list={[
"w-4 h-4 rounded-full",
categoryColors[category].bg,
]}
/>
<span>{category}</span>
</label> </label>
</div> </div>
)) ))
@ -83,11 +158,17 @@ const categoriesSelectorCss = ["Recent", ...categories]
{ {
"Recent-item": isRecent(item.pubIsoDate), "Recent-item": isRecent(item.pubIsoDate),
}, },
"bg-orange-100",
"py-1 px-2",
"rounded-xl",
"flex flex-row gap-4 items-center",
"border-l-8",
categoryColors[item.category].bl,
]} ]}
> >
<a href={item.link} class=""> <a href={item.link} class="">
<div set:html={item.title} class="underline" /> <div set:html={item.title} class="underline" />
<div class="no-underline text-sm"> <div class="no-underline text-sm font-normal">
{[ {[
new Date(item.pubIsoDate).toDateString(), new Date(item.pubIsoDate).toDateString(),
item.feedName, item.feedName,

2
tailwind.config.js
View file

@ -208,7 +208,7 @@ export default {
"'Segoe UI Symbol'", "'Segoe UI Symbol'",
"'Noto Color Emoji'", "'Noto Color Emoji'",
], ],
}, }
}, },
}, },
}; };