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

Show all feed items as a list

Browse source
This commit is contained in:
Carter McBride 2024-08-23 10:55:46 -06:00
parent def05390bf
commit 935535a498
2 changed files with 41 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/pages/index.astro
View file

@ -5,7 +5,9 @@ const feedItems = await getAllFeedItems();
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 categoriesSelectorCss = categories.map((c => ` const categoriesSelectorCss = categories
.map(
(c) => `
#category-picker:has(#${c}:checked) ~ main ul { #category-picker:has(#${c}:checked) ~ main ul {
> .${c}-item { > .${c}-item {
display: block; display: block;
@ -13,11 +15,13 @@ const categoriesSelectorCss = categories.map((c => `
> *:not(.${c}-item) { > *:not(.${c}-item) {
display: none; display: none;
} }
}`)).join("\n") }`,
)
.join("\n");
--- ---
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="h-full overflow-auto">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -25,36 +29,53 @@ const categoriesSelectorCss = categories.map((c => `
<title>Carter's RSS Feeds</title> <title>Carter's RSS Feeds</title>
<link rel="icon" href="/news-emoji.svg" sizes="any" type="image/svg+xml" /> <link rel="icon" href="/news-emoji.svg" sizes="any" type="image/svg+xml" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<style client:load set:html={categoriesSelectorCss}> <style set:html={categoriesSelectorCss}></style>
</style>
</head> </head>
<body class="font-system text-base m-4"> <body class="font-system text-base md:grid grid-cols-12 auto-rows-min p-4">
<header> <header class="col-span-12 row-span-1 h-fit">
<h1 class="text-2xl">📰 Carter's RSS Feeds</h1> <h1 class="text-2xl">📰 Carter's RSS Feeds</h1>
<p> <p>
{feedItems.contents.length} item(s) | {feedItems.errors.length} error(s) {feedItems.contents.length} item(s) | {feedItems.errors.length} error(s)
</p> </p>
</header> </header>
<nav id="category-picker"> <nav
<input type="radio" id="all" name="category" checked /> id="category-picker"
<label for="all">All</label> class="flex flex-row md:flex-col gap-2 md:gap-1 col-span-2 sticky top-4 row-span-1"
>
{ {
categories.map((category) => ( ["All", ...categories.sort()].map((category) => (
<> <div>
<input type="radio" id={category} name="category" /> <input
<label for={category}>{category}</label> type="radio"
</> id={category}
name="category"
class="hidden peer"
checked={category === "All"}
/>
<label
class="cursor-pointer transition-all peer-checked:underline opacity-25 peer-checked:opacity-100 hover:opacity-100"
for={category}
>
{category}
</label>
</div>
)) ))
} }
</nav> </nav>
<main> <main class="col-span-10 row-span-11">
<ul> <ul class="flex flex-col gap-2">
{ {
feedItems.contents.map((item) => ( feedItems.contents.map((item) => (
<li class={`${item.category}-item`}> <li class={`${item.category}-item`}>
<a href={item.link}> <a href={item.link} class="">
<span set:html={item.title} /> | {item.feedName} |{" "} <div set:html={item.title} class="underline" />
{item.category} | {new Date(item.pubIsoDate).toDateString()} <div class="no-underline text-sm">
{[
new Date(item.pubIsoDate).toDateString(),
item.feedName,
item.category,
].join(" | ")}
</div>
</a> </a>
</li> </li>
)) ))

11
tailwind.config.js
View file

@ -211,15 +211,4 @@ export default {
}, },
}, },
}, },
plugins: [
plugin(({ addBase }) => {
addBase({
a: {
textDecoration: "underline",
transition: "color 0.2s",
cursor: "pointer",
},
});
}),
],
}; };