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

Add filter for recent items

Browse source
This commit is contained in:
Carter McBride 2024-08-23 11:02:41 -06:00
parent 935535a498
commit b57665720f
1 changed files with 22 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/pages/index.astro
View file

@ -1,11 +1,20 @@
--- ---
import getAllFeedItems from "../services/feeds"; import getAllFeedItems from "../services/feeds";
function isRecent(date: number): boolean {
const now = Date.now();
const sixHours = 6 * 60 * 60 * 1000;
return now - date < sixHours;
}
const feedItems = await getAllFeedItems(); const feedItems = await getAllFeedItems();
const recentCount = feedItems.contents.filter((item) =>
isRecent(item.pubIsoDate),
).length;
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 const categoriesSelectorCss = ["Recent", ...categories]
.map( .map(
(c) => ` (c) => `
#category-picker:has(#${c}:checked) ~ main ul { #category-picker:has(#${c}:checked) ~ main ul {
@ -35,7 +44,9 @@ const categoriesSelectorCss = categories
<header class="col-span-12 row-span-1 h-fit"> <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) {recentCount} recent item(s) | {feedItems.contents.length} item(s) | {
feedItems.errors.length
} error(s)
</p> </p>
</header> </header>
<nav <nav
@ -43,7 +54,7 @@ const categoriesSelectorCss = categories
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 md:flex-col gap-2 md:gap-1 col-span-2 sticky top-4 row-span-1"
> >
{ {
["All", ...categories.sort()].map((category) => ( ["All", "Recent", ...categories.sort()].map((category) => (
<div> <div>
<input <input
type="radio" type="radio"
@ -66,7 +77,14 @@ const categoriesSelectorCss = categories
<ul class="flex flex-col gap-2"> <ul class="flex flex-col gap-2">
{ {
feedItems.contents.map((item) => ( feedItems.contents.map((item) => (
<li class={`${item.category}-item`}> <li
class:list={[
`${item.category}-item`,
{
"Recent-item": isRecent(item.pubIsoDate),
},
]}
>
<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">