Indieweb draft, creates per-tag RSS feeds.

src/layouts/BlogList.astro

@@ -1,31 +1,19 @@
 ---
 import NotchedBox from '../components/NotchedBox.astro';
 import RootLayout from '../layouts/RootLayout.astro';
-import { getCollection, type CollectionEntry } from 'astro:content';
 import FormattedDate from '../components/FormattedDate.astro';
 import { Image } from 'astro:assets';
+import { getPublishedPosts, getAllTags } from '../lib/blog';
 
-interface Params {
+export interface Params {
   selectedTag?: string | undefined;
 }
 
 const { selectedTag } = Astro.props;
 
-function publishedOnly(p: CollectionEntry<'blog'>): p is (CollectionEntry<'blog'> & { data: { pubDate: Date }}) {
-  return p.data.pubDate !== undefined;
-}
+const tags = await getAllTags();
 
-const allPosts = (await getCollection('blog', publishedOnly))
-  .sort(
-    (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
-  );
-
-const tags = allPosts.flatMap(p => p.data.tags);
-
-const posts =
-  selectedTag
-    ? allPosts.filter(p => p.data.tags.includes(selectedTag))
-    : allPosts;
+const posts = await getPublishedPosts( selectedTag );
 ---
 
 <RootLayout>
@@ -37,14 +25,16 @@ const posts =
     padding: 0;
     display: flex;
     flex-direction: row;
-    gap: 8px;
+    gap: 16px;
     align-items: baseline;
 
-    li {
-      padding: 1px 16px
-      .container {
-        background-color: var(--color-gray);
-      }
+    li a {
+      color: var(--color-gray);
+      text-decoration: none;
+    }
+
+    li.selected-tag a {
+      color: var(--color-gold);
     }
   }
 
@@ -89,22 +79,13 @@ const posts =
     <ul class="tags">
       {
         tags.map(tag =>
-        <li>
-          {
-        tag === selectedTag
-        ? <a href="/blog">
-            <NotchedBox color="gray" fillNotches={"left"}>
-              {tag}
-            
-            </NotchedBox>
-          </a>
-        : <a href={`/blog/tag/${tag}`}>
-            <NotchedBox color="gray" fillNotches={"none"}>
-              {tag}
-            </NotchedBox>
-          </a>
-          }
-        </li>
+          <li class={ tag === selectedTag ? "selected-tag" : "" }>
+            <a href={`/blog/tag/${tag}`}>
+              <NotchedBox color={ tag === selectedTag ? "gold" : "gray" } fillNotches={ tag === selectedTag ? "right" : "none"}>
+                {tag}
+              </NotchedBox>
+            </a>
+          </li>
         )
       }
     </ul>