Adds post tags

src/pages/blog/index.astro

@@ -1,85 +1,5 @@
 ---
-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';
-
-function publishedOnly(p: CollectionEntry<'blog'>): p is (CollectionEntry<'blog'> & { data: { pubDate: Date }}) {
-  return p.data.pubDate !== undefined;
-}
-
-const posts = (await getCollection('blog', publishedOnly))
-  .sort(
-    (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
-  );
+import BlogList from '../../layouts/BlogList.astro';
 ---
 
-<RootLayout>
-<style>
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    align-items: stretch;
-
-    li {
-      /* Required since flex won't render list-elements correctly. */
-      display: block;
-    }
-
-    a {
-      text-decoration: none;
-
-      .title, .description {
-        color: var(--color-light-text);
-      }
-      .date {
-        color: var(--color-gray);
-      }
-      .entry {
-        padding: 0.5em;
-      }
-      p {
-        margin: 0;
-      }
-    }
-
-    a:hover .title {
-      color: var(--color-accent);
-    }
-  }
-  </style>
-  <section>
-    <ul>
-      {
-        posts.map((post) => (
-          <li>
-            <a href={`/blog/${post.id}/`}>
-              <NotchedBox fillNotches="left">
-                <div class="entry">
-                  {post.data.heroImage && (
-                    <Image width={720} height={360} src={post.data.heroImage} alt="" />
-                  )}
-                  <h4 class="title">{post.data.title}</h4>
-                  <p class="date">
-                    <FormattedDate date={post.data.pubDate} />
-                  </p>
-                  { post.data.description && 
-                    <p class="description">
-                      {post.data.description}
-                    </p>
-                  }
-                </div>
-              </NotchedBox>
-            </a>
-          </li>
-        ))
-      }
-    </ul>
-  </section>
-</RootLayout>
+<BlogList/>

src/pages/blog/tag/[...tag].astro

@@ -0,0 +1,20 @@
+---
+import { type CollectionEntry, getCollection } from 'astro:content';
+import BlogList from '../../../layouts/BlogList.astro';
+
+export async function getStaticPaths() {
+	const posts = await getCollection('blog');
+
+  const tags = posts.flatMap(p => p.data.tags);
+
+	return tags.map((tag) => ({
+		params: { tag: tag },
+    props: { tag: tag },
+	}));
+}
+type Props = { tag: string }
+
+const tag = Astro.props.tag;
+---
+
+<BlogList selectedTag={tag} />