From 598c8e123e8995de5fbcf90118421d3a2e4382dd Mon Sep 17 00:00:00 2001
From: brklntmhwk_w <to.be.wanryu@gmail.com>
Date: Tue, 2 Apr 2024 14:14:40 +0900
Subject: [PATCH] Generalized Pager more so it can be used in taxonomy contexts
 too

---
 .npmrc                                        |   1 -
 src/components/BaseHead.astro                 |   3 +-
 src/components/BlogList.astro                 | 105 ++++++++++++++++++
 src/components/Footer.astro                   |   2 +-
 src/components/Navigation.astro               |   9 +-
 src/components/Pager.astro                    |  94 +++++++++-------
 src/content/blog/aaa.md                       |   6 +-
 src/content/blog/bbb.md                       |   6 +-
 src/content/blog/ccc.md                       |   6 +-
 src/content/blog/ddd.md                       |   6 +-
 src/content/blog/eee.md                       |   6 +-
 src/content/blog/fff.md                       |   6 +-
 src/content/blog/first-post.md                |   2 +-
 src/content/blog/ggg.md                       |   6 +-
 src/content/blog/hhh.md                       |   4 +-
 src/content/blog/iii.md                       |   8 +-
 src/content/blog/markdown-style-guide.md      |   2 +-
 src/content/blog/second-post.md               |   2 +-
 src/content/blog/third-post.md                |   6 +-
 src/content/blog/using-mdx.mdx                |   2 +-
 src/content/config.ts                         |   8 ++
 src/content/meta/site-data.yml                |   6 +
 src/layouts/AboutLayout.astro                 |   6 +-
 src/layouts/BaseLayout.astro                  |  34 ++++++
 src/layouts/BlogLayout.astro                  |  77 ++++++++++---
 src/pages/blog/[...page].astro                |  84 ++------------
 .../categories/[category]/[...page].astro     |  51 +++++++++
 src/pages/blog/categories/index.astro         |  36 ++++++
 src/pages/blog/tags/[tag]/[...page].astro     |  49 ++++++++
 src/pages/blog/tags/index.astro               |  36 ++++++
 src/styles/global.css                         |  41 ++-----
 31 files changed, 496 insertions(+), 214 deletions(-)
 delete mode 100644 .npmrc
 create mode 100644 src/components/BlogList.astro
 create mode 100644 src/pages/blog/categories/[category]/[...page].astro
 create mode 100644 src/pages/blog/categories/index.astro
 create mode 100644 src/pages/blog/tags/[tag]/[...page].astro
 create mode 100644 src/pages/blog/tags/index.astro

diff --git a/.npmrc b/.npmrc
deleted file mode 100644
index 6c59086d..00000000
--- a/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-enable-pre-post-scripts=true
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index fe833704..20542a1e 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -18,6 +18,7 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="sitemap" href="/sitemap-index.xml" />
 <meta name="generator" content={Astro.generator} />
 
 <!-- Font preloads -->
@@ -40,7 +41,7 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props
 <link rel="canonical" href={canonicalURL} />
 
 <!-- Primary Meta Tags -->
-<title>{title}</title>
+<title data-pagefind-meta="title">{title}</title>
 <meta name="title" content={title} />
 <meta name="description" content={description} />
 
diff --git a/src/components/BlogList.astro b/src/components/BlogList.astro
new file mode 100644
index 00000000..fa5d71d3
--- /dev/null
+++ b/src/components/BlogList.astro
@@ -0,0 +1,105 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import FormattedDate from '@/components/FormattedDate.astro'
+import Svg from '@/components/Svg/index.astro'
+
+type Props = {
+  entries: CollectionEntry<'blog'>[]
+  kind: 'blog' | 'taxonomy'
+}
+
+const { entries, kind } = Astro.props
+---
+
+{
+  entries.length !== 0 ? (
+    <ul class="entry-list">
+      {entries.map((entry) => (
+        <li>
+          <article>
+            <section class="date">
+              <div>
+                <Svg iconName="publish" width={20} height={20} />
+                <FormattedDate date={entry.data.publishedAt} />
+              </div>
+              {entry.data.modifiedAt && (
+                <div>
+                  <Svg iconName="update" width={20} height={20} />
+                  <FormattedDate date={entry.data.modifiedAt} />
+                </div>
+              )}
+            </section>
+            <a class="blog-title" href={`/blog/${entry.slug}`}>
+              {entry.data.title}
+            </a>
+            <span>{entry.data.description}</span>
+            {kind === 'blog' && (
+              <section class="taxonomies">
+                <a href={`/blog/categories/${entry.data.category}`}>
+                  {entry.data.category}
+                </a>
+                <ul class="tag-list">
+                  {entry.data.tags?.map((tag) => (
+                    <li>
+                      <a href={`/blog/tags/${tag}`}>#{tag}</a>
+                    </li>
+                  ))}
+                </ul>
+              </section>
+            )}
+          </article>
+        </li>
+      ))}
+    </ul>
+  ) : (
+    <p>Woops! No entry found..</p>
+  )
+}
+<style>
+  a.blog-title {
+    font-size: 2rem;
+    font-weight: bolder;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+      text-underline-offset: 7px;
+    }
+  }
+  ul.entry-list {
+    display: grid;
+    row-gap: 1.25rem;
+    padding: 0;
+  }
+  ul.entry-list > li {
+    list-style: none;
+    /* border: 1px solid black; */
+  }
+  ul.entry-list article {
+    display: grid;
+    row-gap: 5px;
+  }
+  ul.tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 10px;
+    padding: 0;
+  }
+  ul.tag-list > li {
+    list-style: none;
+  }
+  section.date {
+    display: flex;
+    column-gap: 10px;
+  }
+  section.date > div {
+    display: flex;
+    align-items: center;
+    column-gap: 5px;
+  }
+  section.taxonomies {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    text-transform: capitalize;
+  }
+</style>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 524dd3b7..82491671 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,7 +2,7 @@
 const today = new Date()
 ---
 
-<footer>
+<footer data-pagefind-ignore="all">
   &copy; {today.getFullYear()} Your name here. All rights reserved.
   <div class="social-links">
     <a href="https://m.webtoo.ls/@astro" target="_blank">
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index fc6432f5..d927f72e 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -1,14 +1,11 @@
 ---
-// import { getEntry } from 'astro:content'
-import NavLink from './NavLink.astro'
+import NavLink from '@/components/NavLink.astro'
 import Svg from '@/components/Svg/index.astro'
 import Search from '@/components/Search.astro'
 import Hamburger from '@/components/Hamburger.astro'
-
-// const meta = await getEntry('meta', 'site-data')
 ---
 
-<nav>
+<nav data-pagefind-ignore="all">
   <a class="blog-title" href="/"
     ><Svg iconName="site-logo" width={32} height={32} /></a
   >
@@ -101,7 +98,7 @@ import Hamburger from '@/components/Hamburger.astro'
       align-items: start;
       position: sticky;
       /* top: 0; */
-      padding: 1.25rem 1.75rem;
+      padding: 1.75rem 1.75rem;
       margin: 0;
       width: 18rem;
       height: 100vh;
diff --git a/src/components/Pager.astro b/src/components/Pager.astro
index bdba058a..02e25d46 100644
--- a/src/components/Pager.astro
+++ b/src/components/Pager.astro
@@ -7,6 +7,8 @@ import { DEFAULT_PAGINATION_WIDTH } from '@/lib/consts'
 type Props = {
   page?: Page<CollectionEntry<'blog'>>
 }
+
+const currentPath = Astro.url.pathname
 const { page } = Astro.props
 
 const paginator = (
@@ -33,47 +35,61 @@ const paginator = (
 
 {
   page !== undefined && (
-    <nav>
-      {page.url.prev ? (
-        <div>
-          <a href={page.url.prev}>
-            <Svg iconName="left-arrow" width={22} height={22} />
-          </a>
-        </div>
-      ) : (
-        <Svg iconName="left-arrow" width={22} height={22} />
-      )}
-      <section class="page-nums">
-        {paginator(page.currentPage, page.lastPage).map((pg) => {
-          if (pg === page.currentPage) {
-            return <li>{pg}</li>
-          } else {
-            if (pg === 1) {
-              return (
-                <li>
-                  <a href="/blog">{pg}</a>
-                </li>
-              )
+    <>
+      <nav data-pagefind-ignore="all">
+        {page.url.prev ? (
+          <div>
+            <a href={page.url.prev}>
+              <Svg iconName="left-arrow" width={22} height={22} />
+            </a>
+          </div>
+        ) : (
+          <Svg iconName="left-arrow" width={22} height={22} />
+        )}
+        <section class="page-nums">
+          {paginator(page.currentPage, page.lastPage).map((pg) => {
+            if (pg === page.currentPage) {
+              return <li>{pg}</li>
             } else {
-              return (
-                <li>
-                  <a href={`/blog/${pg}`}>{pg}</a>
-                </li>
-              )
+              if (pg === 1) {
+                return (
+                  <li>
+                    <a
+                      href={`/${currentPath.split('/').slice(1, -1).join('/')}`}
+                    >
+                      {pg}
+                    </a>
+                  </li>
+                )
+              } else {
+                return (
+                  <li>
+                    {page.currentPage === 1 ? (
+                      <a href={`${currentPath}/${pg}`}>{pg}</a>
+                    ) : (
+                      <a
+                        href={`/${currentPath.split('/').slice(1, -1).join('/')}/${pg}`}
+                      >
+                        {pg}
+                      </a>
+                    )}
+                  </li>
+                )
+              }
             }
-          }
-        })}
-      </section>
-      {page.url.next ? (
-        <div>
-          <a href={page.url.next}>
-            <Svg iconName="right-arrow" width={22} height={22} />
-          </a>
-        </div>
-      ) : (
-        <Svg iconName="right-arrow" width={22} height={22} />
-      )}
-    </nav>
+          })}
+        </section>
+        {page.url.next ? (
+          <div>
+            <a href={page.url.next}>
+              <Svg iconName="right-arrow" width={22} height={22} />
+            </a>
+          </div>
+        ) : (
+          <Svg iconName="right-arrow" width={22} height={22} />
+        )}
+      </nav>
+    </>
   )
 }
 
diff --git a/src/content/blog/aaa.md b/src/content/blog/aaa.md
index e0e4f44b..6fb4419b 100644
--- a/src/content/blog/aaa.md
+++ b/src/content/blog/aaa.md
@@ -4,11 +4,11 @@ description: Lorem ipsum dolor sit amet
 publishedAt: Jul 08 2022
 heroImage: /blog-placeholder-2.jpg
 category:
-  - Trip
+  - trip
 draft: true
-categories:
-  - Trip
 type: blog
+tags:
+  - tag1
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
diff --git a/src/content/blog/bbb.md b/src/content/blog/bbb.md
index a50ee021..2a3b79b6 100644
--- a/src/content/blog/bbb.md
+++ b/src/content/blog/bbb.md
@@ -4,11 +4,11 @@ description: Lorem ipsum dolor sit amet
 publishedAt: Jul 08 2022
 heroImage: /blog-placeholder-2.jpg
 category:
-  - Trip
+  - trip
 draft: true
-categories:
-  - Trip
 type: blog
+tags:
+  - tag1
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
diff --git a/src/content/blog/ccc.md b/src/content/blog/ccc.md
index 30610729..376c37c9 100644
--- a/src/content/blog/ccc.md
+++ b/src/content/blog/ccc.md
@@ -4,11 +4,11 @@ description: Lorem ipsum dolor sit amet
 publishedAt: Jul 08 2022
 heroImage: /blog-placeholder-2.jpg
 category:
-  - Trip
+  - trip
 draft: true
-categories:
-  - Trip
 type: blog
+tags:
+  - tag1
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
diff --git a/src/content/blog/ddd.md b/src/content/blog/ddd.md
index 93077fc2..93d7fdcf 100644
--- a/src/content/blog/ddd.md
+++ b/src/content/blog/ddd.md
@@ -4,11 +4,11 @@ description: Lorem ipsum dolor sit amet
 publishedAt: Jul 08 2022
 heroImage: /blog-placeholder-2.jpg
 category:
-  - Trip
+  - trip
 draft: true
-categories:
-  - Trip
 type: blog
+tags:
+  - tag1
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
diff --git a/src/content/blog/eee.md b/src/content/blog/eee.md
index 8ebb31f4..3557a0ff 100644
--- a/src/content/blog/eee.md
+++ b/src/content/blog/eee.md
@@ -4,11 +4,11 @@ description: Lorem ipsum dolor sit amet
 publishedAt: Jul 08 2022
 heroImage: /blog-placeholder-2.jpg
 category:
-  - Trip
+  - trip
 draft: true
-categories:
-  - Trip
 type: blog
+tags:
+  - tag1
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
diff --git a/src/content/blog/fff.md b/src/content/blog/fff.md
index 8ebb31f4..6855d3e1 100644
--- a/src/content/blog/fff.md
+++ b/src/content/blog/fff.md
@@ -1,13 +1,11 @@
 ---
-title: Thirdddddddd post
+title: Thirddddddddc post
 description: Lorem ipsum dolor sit amet
 publishedAt: Jul 08 2022
 heroImage: /blog-placeholder-2.jpg
 category:
-  - Trip
+  - trip
 draft: true
-categories:
-  - Trip
 type: blog
 ---
 
diff --git a/src/content/blog/first-post.md b/src/content/blog/first-post.md
index 4d0a79be..20d0e640 100644
--- a/src/content/blog/first-post.md
+++ b/src/content/blog/first-post.md
@@ -4,7 +4,7 @@ description: Lorem ipsum dolor sit amet
 publishedAt: Jul 08 2022
 heroImage: /blog-placeholder-3.jpg
 category:
-  - Experiment
+  - experiment
 type: blog
 draft: true
 ---
diff --git a/src/content/blog/ggg.md b/src/content/blog/ggg.md
index 8ebb31f4..a4435a3d 100644
--- a/src/content/blog/ggg.md
+++ b/src/content/blog/ggg.md
@@ -1,13 +1,11 @@
 ---
-title: Thirdddddddd post
+title: Thirdddddddaaad post
 description: Lorem ipsum dolor sit amet
 publishedAt: Jul 08 2022
 heroImage: /blog-placeholder-2.jpg
 category:
-  - Trip
+  - trip
 draft: true
-categories:
-  - Trip
 type: blog
 ---
 
diff --git a/src/content/blog/hhh.md b/src/content/blog/hhh.md
index 8ebb31f4..6da2e86b 100644
--- a/src/content/blog/hhh.md
+++ b/src/content/blog/hhh.md
@@ -4,10 +4,8 @@ description: Lorem ipsum dolor sit amet
 publishedAt: Jul 08 2022
 heroImage: /blog-placeholder-2.jpg
 category:
-  - Trip
+  - trip
 draft: true
-categories:
-  - Trip
 type: blog
 ---
 
diff --git a/src/content/blog/iii.md b/src/content/blog/iii.md
index 8ebb31f4..66c0838b 100644
--- a/src/content/blog/iii.md
+++ b/src/content/blog/iii.md
@@ -1,14 +1,14 @@
 ---
-title: Thirdddddddd post
+title: Thirddddsdfadddd post
 description: Lorem ipsum dolor sit amet
 publishedAt: Jul 08 2022
 heroImage: /blog-placeholder-2.jpg
 category:
-  - Trip
+  - trip
 draft: true
-categories:
-  - Trip
 type: blog
+tags:
+  - tag1
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
diff --git a/src/content/blog/markdown-style-guide.md b/src/content/blog/markdown-style-guide.md
index 9bbd8a17..b9c51514 100644
--- a/src/content/blog/markdown-style-guide.md
+++ b/src/content/blog/markdown-style-guide.md
@@ -4,7 +4,7 @@ description: Here is a sample of some basic Markdown syntax that can be used whe
 publishedAt: Jul 08 2022
 heroImage: /blog-placeholder-1.jpg
 category:
-  - Others
+  - others
 type: blog
 draft: true
 ---
diff --git a/src/content/blog/second-post.md b/src/content/blog/second-post.md
index 4747bdb1..7458a3f6 100644
--- a/src/content/blog/second-post.md
+++ b/src/content/blog/second-post.md
@@ -4,7 +4,7 @@ description: Lorem ipsum dolor sit amet
 publishedAt: Jul 08 2022
 heroImage: /blog-placeholder-4.jpg
 category:
-  - Experiment
+  - experiment
 type: blog
 ---
 
diff --git a/src/content/blog/third-post.md b/src/content/blog/third-post.md
index 2ebcc2f7..2e07c44e 100644
--- a/src/content/blog/third-post.md
+++ b/src/content/blog/third-post.md
@@ -4,11 +4,11 @@ description: Lorem ipsum dolor sit amet
 publishedAt: Jul 08 2022
 heroImage: /blog-placeholder-2.jpg
 category:
-  - Trip
+  - trip
 draft: true
-categories:
-  - Trip
 type: blog
+tags:
+  - tag1
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
diff --git a/src/content/blog/using-mdx.mdx b/src/content/blog/using-mdx.mdx
index 0219c5a6..99272376 100644
--- a/src/content/blog/using-mdx.mdx
+++ b/src/content/blog/using-mdx.mdx
@@ -8,7 +8,7 @@ tags:
   - aaa
   - bbb
 category:
-  - Trip
+  - trip
 draft: true
 type: blog
 ---
diff --git a/src/content/config.ts b/src/content/config.ts
index 763d9845..a8b5469a 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -32,6 +32,14 @@ const meta = defineCollection({
     blog: z.object({
       title: z.string(),
       description: z.string(),
+      categories: z.object({
+        title: z.string(),
+        description: z.string().optional(),
+      }),
+      tags: z.object({
+        title: z.string(),
+        description: z.string().optional(),
+      }),
     }),
     about: z.object({
       title: z.string(),
diff --git a/src/content/meta/site-data.yml b/src/content/meta/site-data.yml
index fa9a7027..a1a3fbc3 100644
--- a/src/content/meta/site-data.yml
+++ b/src/content/meta/site-data.yml
@@ -4,6 +4,12 @@ site:
 blog:
   title: My Astro Blog
   description: My personal blog
+  categories:
+    title: Categories
+    description: Blog categories
+  tags:
+    title: Tags
+    description: Blog tags
 about:
   title: About Me
   description: Who am I?
diff --git a/src/layouts/AboutLayout.astro b/src/layouts/AboutLayout.astro
index d8744e42..7508ffbc 100644
--- a/src/layouts/AboutLayout.astro
+++ b/src/layouts/AboutLayout.astro
@@ -28,7 +28,7 @@ const meta = await getEntry('meta', 'site-data')
       </div>
     </section>
     <hr />
-    <article>
+    <article class="about-content">
       <slot />
     </article>
   </main>
@@ -37,6 +37,7 @@ const meta = await getEntry('meta', 'site-data')
   section.profile-section {
     padding: 2.25rem 0;
     display: flex;
+    flex-wrap: wrap;
     gap: 1.5rem;
     justify-content: center;
   }
@@ -59,4 +60,7 @@ const meta = await getEntry('meta', 'site-data')
   }
   p.short-intro {
   }
+  article.about-content {
+    padding: 1.25rem;
+  }
 </style>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index ca4891dd..649378e7 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -24,5 +24,39 @@ const { title, description } = Astro.props
       <slot />
       <Footer />
     </div>
+    <style>
+      .base-wrapper {
+        width: 100%;
+        display: grid;
+        padding-top: 3.75rem;
+        grid-template-rows: auto 1fr;
+        grid-template-areas:
+          'main'
+          'footer';
+      }
+      @media (min-width: 1024px) {
+        main {
+          /* width: 100%; */
+          grid-area: main;
+          padding: 2.5em 2em;
+          overflow-y: auto;
+        }
+
+        .base-wrapper {
+          width: 100%;
+          min-height: 100vh;
+          padding-top: 0;
+          margin: 0;
+          display: grid;
+          grid-template-columns: 18rem 1fr;
+          grid-template-rows: 1fr auto;
+          /* grid-auto-columns: 18rem minmax(50rem, auto); */
+          grid-auto-rows: minmax(100px, auto);
+          grid-template-areas:
+            'navigation main'
+            'navigation footer';
+        }
+      }
+    </style>
   </body>
 </html>
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
index 886c81f6..bcaaa83f 100644
--- a/src/layouts/BlogLayout.astro
+++ b/src/layouts/BlogLayout.astro
@@ -5,32 +5,73 @@ import FormattedDate from '../components/FormattedDate.astro'
 
 type Props = CollectionEntry<'blog'>['data']
 
-const { title, description, publishedAt, modifiedAt, heroImage } = Astro.props
+const {
+  title,
+  description,
+  category,
+  tags,
+  publishedAt,
+  modifiedAt,
+  heroImage,
+} = Astro.props
 ---
 
 <BaseLayout title={title} description={description ?? ''}>
   <main>
     <article>
-      <div class="hero-image">
-        {heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
-      </div>
-      <div class="prose">
-        <div class="title">
-          <div class="date">
-            <FormattedDate date={publishedAt} />
-            {
-              modifiedAt && (
-                <div class="last-updated-on">
-                  Last updated on <FormattedDate date={modifiedAt} />
-                </div>
-              )
-            }
-          </div>
-          <h1>{title}</h1>
-          <hr />
+      <section class="blog-metadata">
+        <div class="hero-image">
+          {
+            heroImage && (
+              <img width={1020} height={510} src={heroImage} alt="" />
+            )
+          }
         </div>
+        <div class="date">
+          <FormattedDate date={publishedAt} />
+          {
+            modifiedAt && (
+              <div class="last-updated-on">
+                Last updated on <FormattedDate date={modifiedAt} />
+              </div>
+            )
+          }
+        </div>
+        <h1>{title}</h1>
+        <section class="taxonomies">
+          <a href={`/blog/categories/${category[0]}`}>{category[0]}</a>
+          {
+            tags && (
+              <ul>
+                {tags.map((tag) => (
+                  <li>
+                    <a href={`/blog/tags/${tag}`}>{tag}</a>
+                  </li>
+                ))}
+              </ul>
+            )
+          }
+        </section>
+      </section>
+      <hr />
+      <div class="prose">
         <slot />
       </div>
     </article>
   </main>
 </BaseLayout>
+<style>
+  article {
+    display: grid;
+  }
+  hr {
+    width: 100%;
+  }
+  section.taxonomies {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+    text-transform: capitalize;
+  }
+</style>
diff --git a/src/pages/blog/[...page].astro b/src/pages/blog/[...page].astro
index 71c5ed16..9f688242 100644
--- a/src/pages/blog/[...page].astro
+++ b/src/pages/blog/[...page].astro
@@ -1,10 +1,9 @@
 ---
 import type { InferGetStaticPropsType, GetStaticPaths } from 'astro'
 import { getCollection, getEntry } from 'astro:content'
+import BlogList from '@/components/BlogList.astro'
 import BaseLayout from '@/layouts/BaseLayout.astro'
-import FormattedDate from '@/components/FormattedDate.astro'
 import Pager from '@/components/Pager.astro'
-import Svg from '@/components/Svg/index.astro'
 import { LIMIT_PER_PAGE } from '@/lib/consts'
 
 export const getStaticPaths = (async ({ paginate }) => {
@@ -28,43 +27,11 @@ const { page } = Astro.props
   <main>
     <section>
       <h1>Blog</h1>
-      {
-        page.data.length === 0 ? (
-          <p>Woops! No entry found..</p>
-        ) : (
-          <ul class="entry-list">
-            {page.data.map((entry) => (
-              <li>
-                <article>
-                  <section class="date">
-                    <div>
-                      <Svg iconName="publish" width={20} height={20} />
-                      <FormattedDate date={entry.data.publishedAt} />
-                    </div>
-                    {entry.data.modifiedAt && (
-                      <div>
-                        <Svg iconName="update" width={20} height={20} />
-                        <FormattedDate date={entry.data.modifiedAt} />
-                      </div>
-                    )}
-                  </section>
-                  <a class="blog-title" href={`/blog/${entry.slug}`}>
-                    {entry.data.title}
-                  </a>
-                  <span>{entry.data.description}</span>
-                  <ul class="tag-list">
-                    {entry.data.tags?.map((tag) => (
-                      <li>
-                        <a href="/">#{tag}</a>
-                      </li>
-                    ))}
-                  </ul>
-                </article>
-              </li>
-            ))}
-          </ul>
-        )
-      }
+      <div class="taxonomy-links">
+        <a href="/blog/categories">Categories</a>
+        <a href="/blog/tags">Tags</a>
+      </div>
+      <BlogList entries={page.data} kind="blog" />
     </section>
     <Pager page={page} />
   </main>
@@ -75,44 +42,9 @@ const { page } = Astro.props
     flex-direction: column;
     justify-content: space-between;
   }
-  a.blog-title {
-    font-size: 2rem;
-    font-weight: bolder;
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
-      text-underline-offset: 7px;
-    }
-  }
-  ul.entry-list {
-    display: grid;
-    row-gap: 1.25rem;
-    padding: 0;
-  }
-  ul.entry-list > li {
-    list-style: none;
-    /* border: 1px solid black; */
-  }
-  ul.entry-list article {
-    display: grid;
-    row-gap: 5px;
-  }
-  ul.tag-list {
+  .taxonomy-links {
     display: flex;
     flex-wrap: wrap;
-    column-gap: 10px;
-    padding: 0;
-  }
-  ul.tag-list > li {
-    list-style: none;
-  }
-  section.date {
-    display: flex;
-    column-gap: 10px;
-  }
-  section.date > div {
-    display: flex;
-    align-items: center;
-    column-gap: 5px;
+    gap: 1.5rem;
   }
 </style>
diff --git a/src/pages/blog/categories/[category]/[...page].astro b/src/pages/blog/categories/[category]/[...page].astro
new file mode 100644
index 00000000..351a0d8d
--- /dev/null
+++ b/src/pages/blog/categories/[category]/[...page].astro
@@ -0,0 +1,51 @@
+---
+import type { InferGetStaticPropsType, GetStaticPaths } from 'astro'
+import { getCollection, getEntry } from 'astro:content'
+import BaseLayout from '@/layouts/BaseLayout.astro'
+import BlogList from '@/components/BlogList.astro'
+import Pager from '@/components/Pager.astro'
+import { LIMIT_PER_PAGE } from '@/lib/consts'
+
+export const getStaticPaths = (async ({ paginate }) => {
+  const entries = (await getCollection('blog')).sort(
+    (a, b) => a.data.publishedAt.valueOf() - b.data.publishedAt.valueOf()
+  )
+  const categories = [
+    ...new Set(entries.flatMap((entry) => entry.data.category)),
+  ]
+
+  return categories.flatMap((category) => {
+    const displayEntries = entries.filter(
+      (entry) => entry.data.category[0] === category
+    )
+
+    return paginate(displayEntries, {
+      pageSize: LIMIT_PER_PAGE,
+      params: { category },
+    })
+  })
+}) satisfies GetStaticPaths
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>
+
+const meta = await getEntry('meta', 'site-data')
+const { page } = Astro.props
+const { category } = Astro.params
+---
+
+<BaseLayout
+  title={`${meta.data.blog.title} - Category: ${category}`}
+  description={meta.data.blog.description}
+  ><main>
+    <section>
+      <h1>{category}</h1>
+      <BlogList entries={page.data} kind="taxonomy" />
+    </section>
+    <Pager page={page} />
+  </main>
+</BaseLayout>
+<style>
+  h1 {
+    text-transform: capitalize;
+  }
+</style>
diff --git a/src/pages/blog/categories/index.astro b/src/pages/blog/categories/index.astro
new file mode 100644
index 00000000..9f2f511d
--- /dev/null
+++ b/src/pages/blog/categories/index.astro
@@ -0,0 +1,36 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro'
+import { getCollection, getEntry } from 'astro:content'
+
+const entries = await getCollection('blog')
+const categories = [...new Set(entries.flatMap((entry) => entry.data.category))]
+const meta = await getEntry('meta', 'site-data')
+---
+
+<BaseLayout
+  title={meta.data.blog.categories.title}
+  description={meta.data.blog.categories.description ?? ''}
+>
+  <main>
+    <h1>Categories</h1>
+    <ul>
+      {
+        categories.flatMap((category) => (
+          <li>
+            <a href={`/blog/categories/${category}`}>{category}</a>
+          </li>
+        ))
+      }
+    </ul>
+  </main>
+</BaseLayout>
+<style>
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.25rem;
+  }
+  li {
+    text-transform: capitalize;
+  }
+</style>
diff --git a/src/pages/blog/tags/[tag]/[...page].astro b/src/pages/blog/tags/[tag]/[...page].astro
new file mode 100644
index 00000000..99b512cd
--- /dev/null
+++ b/src/pages/blog/tags/[tag]/[...page].astro
@@ -0,0 +1,49 @@
+---
+import type { InferGetStaticPropsType, GetStaticPaths } from 'astro'
+import { getCollection, getEntry } from 'astro:content'
+import BaseLayout from '@/layouts/BaseLayout.astro'
+import BlogList from '@/components/BlogList.astro'
+import Pager from '@/components/Pager.astro'
+import { LIMIT_PER_PAGE } from '@/lib/consts'
+
+export const getStaticPaths = (async ({ paginate }) => {
+  const entries = (await getCollection('blog')).sort(
+    (a, b) => a.data.publishedAt.valueOf() - b.data.publishedAt.valueOf()
+  )
+  const tags = [...new Set(entries.flatMap((entry) => entry.data.tags ?? []))]
+
+  return tags.flatMap((tag) => {
+    const displayEntries = entries.filter((entry) =>
+      entry.data.tags?.includes(tag)
+    )
+
+    return paginate(displayEntries, {
+      pageSize: LIMIT_PER_PAGE,
+      params: { tag },
+    })
+  })
+}) satisfies GetStaticPaths
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>
+
+const meta = await getEntry('meta', 'site-data')
+const { page } = Astro.props
+const { tag } = Astro.params
+---
+
+<BaseLayout
+  title={`${meta.data.blog.title} - Tag: ${tag}`}
+  description={meta.data.blog.description}
+  ><main>
+    <section>
+      <h1>{tag}</h1>
+      <BlogList entries={page.data} kind="taxonomy" />
+    </section>
+    <Pager page={page} />
+  </main>
+</BaseLayout>
+<style>
+  h1 {
+    text-transform: capitalize;
+  }
+</style>
diff --git a/src/pages/blog/tags/index.astro b/src/pages/blog/tags/index.astro
new file mode 100644
index 00000000..26771b89
--- /dev/null
+++ b/src/pages/blog/tags/index.astro
@@ -0,0 +1,36 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro'
+import { getCollection, getEntry } from 'astro:content'
+
+const entries = await getCollection('blog')
+const tags = [...new Set(entries.flatMap((entry) => entry.data.tags ?? []))]
+const meta = await getEntry('meta', 'site-data')
+---
+
+<BaseLayout
+  title={meta.data.blog.tags.title}
+  description={meta.data.blog.tags.description ?? ''}
+>
+  <main>
+    <h1>Tags</h1>
+    <ul>
+      {
+        tags.flatMap((tag) => (
+          <li>
+            <a href={`/blog/tags/${tag}`}>{tag}</a>
+          </li>
+        ))
+      }
+    </ul>
+  </main>
+</BaseLayout>
+<style>
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.25rem;
+  }
+  li {
+    text-transform: capitalize;
+  }
+</style>
diff --git a/src/styles/global.css b/src/styles/global.css
index 72b3dde3..934ea773 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -85,6 +85,7 @@ b {
 }
 a {
   color: var(--accent);
+  text-decoration: none;
 }
 a:hover {
   color: var(--accent);
@@ -95,6 +96,12 @@ p {
 .prose p {
   margin-bottom: 2em;
 }
+ul {
+  padding: 0;
+}
+li {
+  list-style: none;
+}
 textarea {
   width: 100%;
   font-size: 16px;
@@ -141,41 +148,7 @@ hr {
     padding: 1em;
   }
 } */
-.base-wrapper {
-  width: 100%;
-  display: grid;
-  padding-top: 3.75rem;
-  /* margin-top: 2.75rem; */
-  grid-template-rows: auto 1fr;
-  /* grid-template-rows: 4.5rem auto 1fr; */
-  grid-template-areas:
-    /* 'navigation' */
-    'main'
-    'footer';
-}
-@media (min-width: 1024px) {
-  main {
-    /* width: 100%; */
-    grid-area: main;
-    padding: 2.5em 2em;
-    overflow-y: auto;
-  }
 
-  .base-wrapper {
-    width: 100%;
-    min-height: 100vh;
-    padding-top: 0;
-    margin: 0;
-    display: grid;
-    grid-template-columns: 18rem 1fr;
-    grid-template-rows: 1fr auto;
-    /* grid-auto-columns: 18rem minmax(50rem, auto); */
-    grid-auto-rows: minmax(100px, auto);
-    grid-template-areas:
-      'navigation main'
-      'navigation footer';
-  }
-}
 .sr-only {
   border: 0;
   padding: 0;