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

Add article counts

Browse source
This commit is contained in:
Carter McBride 2024-08-23 14:06:22 -06:00
parent c3854d38e3
commit 3846c513ec
1 changed files with 28 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/pages/index.astro
View file

@ -11,9 +11,24 @@ const feedItems = await getAllFeedItems();
const recentCount = feedItems.contents.filter((item) => const recentCount = feedItems.contents.filter((item) =>
isRecent(item.pubIsoDate), isRecent(item.pubIsoDate),
).length; ).length;
const categories = Array.from( const categories = [
"All",
"Recent",
...Array.from(
new Set(feedItems.contents.map((item) => item.category)), new Set(feedItems.contents.map((item) => item.category)),
).sort(); ).sort(),
];
const categoryCounts = categories.reduce((acc, category) => {
if (category === "All") {
acc[category] = feedItems.contents.length;
return acc;
}
acc[category] = feedItems.contents.filter(
(item) => item.category === category,
).length;
return acc;
}, {});
const accentColors = { const accentColors = {
slate: { slate: {
@ -71,14 +86,12 @@ const pickRandomAccentColor = () => {
const index = Math.floor(Math.random() * accentColorsKeys.length); const index = Math.floor(Math.random() * accentColorsKeys.length);
return accentColors[accentColorsKeys[index]]; return accentColors[accentColorsKeys[index]];
}; };
const categoryColors = ["All", "Recent", ...categories].reduce( const categoryColors = categories.reduce((acc, category) => {
(acc, category) => {
acc[category] = pickRandomAccentColor(); acc[category] = pickRandomAccentColor();
return acc; return acc;
}, }, {});
{}, const categoriesSelectorCss = categories
); .filter((c) => c !== "All")
const categoriesSelectorCss = ["Recent", ...categories]
.map( .map(
(c) => ` (c) => `
#category-picker:has(#${c}:checked) ~ main ul { #category-picker:has(#${c}:checked) ~ main ul {
@ -123,7 +136,7 @@ const categoriesSelectorCss = ["Recent", ...categories]
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" 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) => ( categories.map((category) => (
<div> <div>
<input <input
type="radio" type="radio"
@ -133,7 +146,7 @@ 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 flex flex-row gap-2 items-center" class="cursor-pointer transition-all pr-4 opacity-25 peer-checked:opacity-100 hover:opacity-100 flex flex-row gap-2 items-center"
for={category} for={category}
> >
<div <div
@ -142,7 +155,8 @@ const categoriesSelectorCss = ["Recent", ...categories]
categoryColors[category].bg, categoryColors[category].bg,
]} ]}
/> />
<span>{category}</span> <span class="peer-checked:underline">{category}</span>
<span class="ml-auto">{categoryCounts[category]}</span>
</label> </label>
</div> </div>
)) ))