Adds post tags

2026-03-11 18:29:14 -07:00
1 parent 0a9f425591
commit 3a33325d3a
@@ -0,0 +1,140 @@
+---
+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';
+
+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 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;
+---
+
+<RootLayout>
+<style>
+  ul.tags {
+    list-style: none;
+    margin: 0;
+    margin-bottom: 1em;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: baseline;
+
+    li {
+      padding: 1px 16px
+      .container {
+        background-color: var(--color-gray);
+      }
+    }
+  }
+
+  ul.posts {
+    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 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>
+        )
+      }
+    </ul>
+  </section>
+  <section>
+    <ul class="posts">
+      {
+        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>