From 3adb682245a53bd5414f53c980151b1dc25e938b Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 4 Sep 2023 12:33:53 +0100
Subject: [PATCH] tag fixes

---
 src/components/Toc/Toc.astro           |  2 -
 src/components/layouts/Post/Meta.astro |  2 +-
 src/pages/index.astro                  |  2 +-
 src/pages/tags/[tag].astro             | 51 ++++++++++++++++++++------
 4 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/src/components/Toc/Toc.astro b/src/components/Toc/Toc.astro
index c80a1426..9859acae 100644
--- a/src/components/Toc/Toc.astro
+++ b/src/components/Toc/Toc.astro
@@ -8,8 +8,6 @@ type Props = {
 const { tableOfContents } = Astro.props
 ---
 
-<style></style>
-
 <nav
   aria-label="Table of Contents"
   class={styles.toc}
diff --git a/src/components/layouts/Post/Meta.astro b/src/components/layouts/Post/Meta.astro
index 6fcdb078..3f9b2208 100644
--- a/src/components/layouts/Post/Meta.astro
+++ b/src/components/layouts/Post/Meta.astro
@@ -36,7 +36,7 @@ const { date, updated, author, tags } = data
     tags && (
       <div class={styles.tags}>
         {tags.map((tag) => (
-          <Tag name={tag} url={`/tags/${slugify(tag)}/`} />
+          <Tag name={slugify(tag)} url={`/tags/${slugify(tag)}/`} />
         ))}
       </div>
     )
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2e8214a3..74aa1a81 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -72,7 +72,7 @@ const photos = (await loadAndFormatCollection(
     <div class="articles articlesLast">
       {
         articles
-          .slice(2, 8)
+          .slice(2, 11)
           .map((article) => <PostTeaser post={article} hideDate />)
       }
     </div>
diff --git a/src/pages/tags/[tag].astro b/src/pages/tags/[tag].astro
index 9594139d..826b5f4e 100644
--- a/src/pages/tags/[tag].astro
+++ b/src/pages/tags/[tag].astro
@@ -3,6 +3,7 @@ import type { CollectionEntry } from 'astro:content'
 import { loadAndFormatCollection } from '@lib/astro'
 import LayoutBase from '@components/layouts/Base/index.astro'
 import PostTeaser from '@components/PostTeaser.astro'
+import slugify, { slugifyAll } from '@lib/slugify'
 
 type Props = {
   posts: CollectionEntry<'articles' | 'links'>[]
@@ -13,15 +14,22 @@ export async function getStaticPaths() {
   const links = await loadAndFormatCollection('links')
   // const photos = await loadAndFormatCollection('photos')
   const allPosts = [...articles, ...links]
+  const allUniqueTags = slugifyAll([
+    ...new Set(
+      allPosts
+        // only map posts which have tags defined
+        .filter((post) => post.data.tags)
+        .map((post) => post.data.tags)
+        .flat()
+    )
+  ] as string[])
 
-  const uniqueTags = [...new Set(allPosts.map((post) => post.data.tags).flat())]
-
-  return uniqueTags.map((tag) => {
+  return allUniqueTags.map((tag) => {
     const filteredPosts = allPosts.filter((post) =>
-      post.data.tags?.includes(tag || '')
+      post.data.tags?.includes(slugify(tag) || '')
     )
     return {
-      params: { tag },
+      params: { tag: slugify(tag) },
       props: { posts: filteredPosts }
     }
   })
@@ -31,12 +39,31 @@ const { tag } = Astro.params
 const { posts } = Astro.props
 ---
 
-<LayoutBase title={tag} pageTitle={`Posts tagged with ${tag}`}>
-  <ul>
-    {
-      posts.map((post) => (
-        <PostTeaser url={`/posts/${post.slug}`} title={post.data.title} />
-      ))
+<style>
+  .posts {
+    display: grid;
+    gap: calc(var(--spacer) * 2);
+  }
+
+  @media (min-width: 40rem) {
+    .posts {
+      grid-template-columns: repeat(2, 1fr);
     }
-  </ul>
+  }
+
+  .posts h1 {
+    font-size: var(--font-size-h4);
+  }
+</style>
+
+<LayoutBase title={tag} pageTitle={`Posts tagged with ${tag}`}>
+  <div class="posts">
+    {posts.map((post) => <PostTeaser post={post} />)}
+  </div>
+
+  <!-- <Pagination
+    currentPage={page.currentPage}
+    numPages={page.lastPage}
+    slug="/archive"
+  /> -->
 </LayoutBase>