Create and use BlogSubpage layout component

src/layouts/BlogSubpage.astro

@@ -0,0 +1,39 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import NavLink from '../components/NavLink.astro';
+
+export interface Props {
+  title: string;
+  description: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<BaseLayout title={title} description={description}>
+  <section>
+    <h2>My blog</h2>
+    <nav class="cmr2-text" aria-label="">
+      <NavLink href="/blog">recent posts</NavLink>
+      <NavLink href="/blog/categories">categories</NavLink>
+      <NavLink href="/blog/tags">tags</NavLink>
+      <NavLink href="/blog/archive">archive</NavLink>
+      <NavLink href="/rss.xml" target="_blank">rss feed</NavLink>
+    </nav>
+    <slot />
+  </section>
+</BaseLayout>
+
+<style>
+  nav {
+    margin-bottom: 2rem;
+  }
+
+  section {
+    text-align: center;
+  }
+
+  section > h2 {
+    margin-bottom: 0.5em;
+  }
+</style>

src/pages/blog/categories/[category].astro

@@ -0,0 +1,25 @@
+---
+import type { CollectionEntry } from 'astro:content';
+
+import BlogSubpage from '../../../layouts/BlogSubpage.astro';
+import PostList from '../../../components/PostList.astro';
+import frontMatterConfig from '../../../../frontmatter.json';
+
+export function getStaticPaths() {
+  const categories = frontMatterConfig['frontMatter.taxonomy.categories'];
+  return categories.map((category) => ({ params: { category } }));
+}
+
+const { category } = Astro.params;
+
+const filterFn = (entry: CollectionEntry<'blog'>) =>
+  entry.data.categories.includes(category as string);
+---
+
+<BlogSubpage
+  title={`"${category}" posts`}
+  description={`"blog posts from "${category}" category`}
+>
+  <h3><em>{category}</em> posts</h3>
+  <PostList filterFn={filterFn} />
+</BlogSubpage>

src/pages/blog/categories/index.astro

@@ -0,0 +1,20 @@
+---
+import BlogSubpage from '../../../layouts/BlogSubpage.astro';
+import frontMatterConfig from '../../../../frontmatter.json';
+
+const categories = frontMatterConfig['frontMatter.taxonomy.categories'];
+---
+
+<BlogSubpage title="tags" description="all categories of maciej's blog posts">
+  <ul>
+    {
+      categories.sort().map((category) => (
+        <li>
+          <a href={`/blog/categories/${encodeURIComponent(category)}`}>
+            {category}
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+</BlogSubpage>

src/pages/blog/index.astro

@@ -1,31 +1,11 @@
 ---
-import BaseLayout from '../../layouts/BaseLayout.astro';
+import BlogSubpage from '../../layouts/BlogSubpage.astro';
 import PostList from '../../components/PostList.astro';
-import NavLink from '../../components/NavLink.astro';
 ---
 
-<BaseLayout
+<BlogSubpage
   title="blog"
   description="blog about the making of maciej's projects and more"
 >
-  <section>
-    <h2>My blog</h2>
-    <nav class="cmr2-text" aria-label="">
-      <NavLink href="/blog">recent posts</NavLink>
-      <NavLink href="/blog/categories">categories</NavLink>
-      <NavLink href="/blog/tags">tags</NavLink>
-      <NavLink href="/blog/archive">archive</NavLink>
-    </nav>
-    <PostList />
-  </section>
-</BaseLayout>
-
-<style>
-  section {
-    text-align: center;
-  }
-
-  section > h2 {
-    margin-bottom: 0.5em;
-  }
-</style>
+  <PostList />
+</BlogSubpage>

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

@@ -0,0 +1,25 @@
+---
+import type { CollectionEntry } from 'astro:content';
+
+import BlogSubpage from '../../../layouts/BlogSubpage.astro';
+import PostList from '../../../components/PostList.astro';
+import frontMatterConfig from '../../../../frontmatter.json';
+
+export function getStaticPaths() {
+  const tags = frontMatterConfig['frontMatter.taxonomy.tags'];
+  return tags.map((tag) => ({ params: { tag } }));
+}
+
+const { tag } = Astro.params;
+
+const filterFn = (entry: CollectionEntry<'blog'>) =>
+  entry.data.tags.includes(tag as string);
+---
+
+<BlogSubpage
+  title={`posts tagged "${tag}"`}
+  description={`maciej's blog posts tagged "${tag}"`}
+>
+  <h3>Posts tagged <em>{tag}</em></h3>
+  <PostList filterFn={filterFn} />
+</BlogSubpage>

src/pages/blog/tags/index.astro

@@ -0,0 +1,31 @@
+---
+import BlogSubpage from '../../../layouts/BlogSubpage.astro';
+import frontMatterConfig from '../../../../frontmatter.json';
+
+const tags = frontMatterConfig['frontMatter.taxonomy.tags'];
+---
+
+<BlogSubpage title="tags" description="all tags of maciej's blog posts">
+  <ul id="tags">
+    {
+      tags.sort().map((tag) => (
+        <li>
+          <a href={`/blog/tags/${tag}`}>{tag}</a>
+        </li>
+      ))
+    }
+  </ul>
+</BlogSubpage>
+
+<style>
+  #tags {
+    margin-top: 0.25rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem 1rem;
+  }
+
+  #tags > li::before {
+    content: '';
+  }
+</style>