fix: css and navigation fixes. reorganize posts (#88)

* add additional tags to posts

* fix tags color and add prev and next post title

* fix: code color

* remove bio

* reorganize posts

Author: pijushbarik

src/components/Bio.astro

@@ -2,7 +2,20 @@ import { defineCollection, z } from "astro:content";
 import { glob } from "astro/loaders";
 
 const posts = defineCollection({
-	loader: glob({ pattern: "*.md", base: "./posts" }),
+	loader: glob({ pattern: "*.md", base: "./src/posts" }),
+	// schema: z.object({
+	// 	title: z.string(),
+	// 	slug: z.string(),
+	// 	publishDate: z.union([z.string(), z.date()]),
+	// 	description: z.string(),
+	// 	tags: z.array(z.string()),
+	// 	nextPost: z.string().optional(),
+	// 	prevPost: z.string().optional(),
+	// }),
+});
+
+const data = defineCollection({
+	loader: glob({pattern: "*.json", base: "./src/posts"}),
 	schema: z.object({
 		title: z.string(),
 		slug: z.string(),
@@ -14,4 +27,6 @@ const posts = defineCollection({
 	}),
 });
 
-export const collections = { posts };
+
+
+export const collections = { posts, data };

src/content.config.js

@@ -1,21 +1,51 @@
 ---
-import { getCollection, render } from "astro:content";
+import { getCollection, getEntry, render } from "astro:content";
 import readingTime from "reading-time";
 import BaseLayout from "../../layouts/BaseLayout.astro";
-import Bio from "../../components/Bio.astro";
 
 export async function getStaticPaths() {
-  const posts = await getCollection("posts");
-  return posts.map((p) => ({
-    params: { slug: p.data.slug },
-    props: { post: p },
-  }));
+  const data = await getCollection("data");
+
+  return await Promise.all(
+    data.map(async (d) => {
+      const post = await getEntry("posts", d.id);
+
+      return {
+        params: { slug: d.data.slug },
+        props: { post: post, data: d.data },
+      };
+    }),
+  );
 }
 
-const { post } = Astro.props;
-const { title, slug, description, publishDate } = post.data;
+async function getPostTitleFromId(id) {
+  try {
+    if (!id) return null;
+    const post = await getEntry("posts", id);
+    return post.data.title;
+  } catch (e) {
+    return null;
+  }
+}
+
+const { post, data } = Astro.props;
+const { title, slug, description, publishDate, tags, prevPost, nextPost } =
+  data;
+console.log({
+  title,
+  slug,
+  description,
+  publishDate,
+  tags,
+  prevPost,
+  nextPost,
+});
 const readingTimeEstimate = readingTime(post.body).text;
 const permalink = `${Astro.site.href}blog/${slug}`;
+
+const prevPostTitle = await getPostTitleFromId(prevPost);
+const nextPostTitle = await getPostTitleFromId(nextPost);
+
 const { Content } = await render(post);
 ---
 
@@ -35,20 +65,25 @@ const { Content } = await render(post);
       <Content />
     </article>
     <hr />
-    <Bio />
+
+    <div class="tags">
+      {tags.map((tag) => <span>{tag}</span>)}
+    </div>
 
     <div class="post-navigation">
       <div>
         {
-          post.data.prevPost && (
-            <a href={`/blog/${post.data.prevPost}`}>Previous post</a>
+          prevPost && (
+            <a href={`/blog/${prevPost}`}>
+              &larr; {prevPostTitle || "Previous"}
+            </a>
           )
         }
       </div>
       <div>
         {
-          post.data.nextPost && (
-            <a href={`/blog/${post.data.nextPost}`}>Next post</a>
+          nextPost && (
+            <a href={`/blog/${nextPost}`}>{nextPostTitle || "Next"} &rarr;</a>
           )
         }
       </div>
@@ -83,4 +118,17 @@ const { Content } = await render(post);
     justify-content: space-between;
     align-items: center;
   }
+
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .tags span {
+    padding: 2px 6px;
+    border-radius: 3px;
+    background-color: var(--tag-bg-color);
+    color: var(--tag-color);
+  }
 </style>

src/pages/blog/[slug].astro

@@ -6,7 +6,7 @@ const title = "Blog - Pijush Barik";
 const description = "Blog posts from Pijush";
 const permalink = `${Astro.site.href}blog`;
 
-let allPosts = await getCollection("posts");
+let allPosts = await getCollection("data");
 allPosts = allPosts.sort(
   (a, b) =>
     new Date(b.data.publishDate).valueOf() -
@@ -66,13 +66,16 @@ allPosts = allPosts.sort(
 
   .post-item-tags {
     display: flex;
-    gap: 14px;
+    flex-wrap: wrap;
+    gap: 8px;
   }
 
   .post-item-tags span {
+    font-size: 14px;
     padding: 2px 6px;
     border-radius: 3px;
-    background-color: rgba(81, 81, 81, 0.5);
+    background-color: var(--tag-bg-color);
+    color: var(--tag-color);
   }
 
   hr {

src/pages/blog/index.astro

@@ -0,0 +1,14 @@
+{
+    "title": "Homelab - getting started",
+    "slug": "homelab-0-getting-started",
+    "publishDate": "22 Nov 2025",
+    "description": "Getting started with my homelab setup journey and documentation. Setting up hardware, OS and Docker.",
+    "nextPost": "homelab-1-additional-configuration",
+    "tags": [
+        "homelab",
+        "selfhosted",
+        "linux",
+        "ubuntu-server",
+        "docker"
+    ]
+}

src/posts/homelab-0-getting-started.json

@@ -1,12 +1,3 @@
----
-title: Homelab - getting started
-slug: homelab-0-getting-started
-publishDate: 22 Nov 2025
-description: My homelab setup journey and documentation
-nextPost: "homelab-1-additional-configuration"
-tags: ["homelab"]
----
-
 ## How it all started
 
 #### Ad blocking
@@ -46,7 +37,7 @@ For storage, I replaced the old DVD drive with an old 1TB hard disk with a caddy
 First, I removed the LCD screen from the laptop and made it headless. For OS, I decided to go with Ubuntu Server 24.04.03 LTS.
 
 Here's how it looks as of now
-![Homelab server](../src/assets/blog/media/homelab-server.jpg)
+![Homelab server](../assets/blog/media/homelab-server.jpg)
 
 #### OS installation
 

posts/homelab-0-getting-started.md renamed to src/posts/homelab-0-getting-started.md

@@ -0,0 +1,15 @@
+{
+    "title": "Homelab - Additional configuration",
+    "slug": "homelab-1-additional-configuration",
+    "publishDate": "24 Nov 2025",
+    "description": "Additional system configuration to auto mount drives, move Docker volumes to different drive.",
+    "prevPost": "homelab-0-getting-started",
+    "nextPost": "homelab-2-install-pihole",
+    "tags": [
+        "homelab",
+        "selfhosted",
+        "linux",
+        "ubuntu-server",
+        "docker"
+    ]
+}

src/posts/homelab-1-additional-configuration.json

@@ -1,18 +1,8 @@
----
-title: Homelab - Additional configuration
-slug: homelab-1-additional-configuration
-publishDate: 24 Nov 2025
-description: My homelab setup journey and documentation
-prevPost: homelab-0-getting-started
-nextPost: homelab-2-install-pihole
-tags: ["homelab"]
----
-
 ## Assign a fixed IP
 
 Once the server is ready, we need to assign a fixed IP to the server, as the router assigns IP addresses dynamically to connected devices, and we do not want to have a dynamic IP address to the server. So, we tell the router to allocate a fixed IP to the server by adding an Address Reservation entry in the router's DHCP Server settings. This will map the MAC address of the server to a fixed IP. I have assigned 192.168.0.153.
 
-![DHCP address reservation](../src/assets/blog/media/dhcp-server-settings.png)
+![DHCP address reservation](../assets/blog/media/dhcp-server-settings.png)
 
 ## Move Docker Volume
 
@@ -75,7 +65,7 @@ By default, Linux does not automount external drives. We can run `mount` command
 
    This will show all drives, including the unmounted ones.
 
-   ![output of lsblk -f](../src/assets/blog/media/lsblk-f.png)
+   ![output of lsblk -f](../assets/blog/media/lsblk-f.png)
 2. Grab the UUID of the drive (A12B-8FFC) and make an entry to fstab. Open the fstab file
 
    ```sh

posts/homelab-1-additional-configuration.md renamed to src/posts/homelab-1-additional-configuration.md

@@ -0,0 +1,16 @@
+{
+    "title": "Homelab - Install Pi-hole",
+    "slug": "homelab-2-install-pihole",
+    "publishDate": "29 Nov 2025",
+    "description": "Installing and setup Pi-hole for network-wide ad-blocking.",
+    "prevPost": "homelab-1-additional-configuration",
+    "tags": [
+        "homelab",
+        "selfhosted",
+        "linux",
+        "ubuntu-server",
+        "docker",
+        "pi-hole",
+        "ad blocker"
+    ]
+}

src/posts/homelab-2-install-pihole.json

@@ -1,13 +1,4 @@
----
-title: Homelab - Install Pi-hole
-slug: homelab-2-install-pihole
-publishDate: 29 Nov 2025
-description: My homelab setup journey and documentation
-prevPost: homelab-1-additional-configuration
-tags: ["homelab"]
----
-
-![Pi-hole Dashboard](../src/assets/blog/media/pihole-dashboard.png)
+![Pi-hole Dashboard](../assets/blog/media/pihole-dashboard.png)
 
 ## Install Pi-hole
 
@@ -64,6 +55,6 @@ We will use Docker and Docker Compose to set up Pi-hole and other services.
 
 In the router admin page, we need to set the DNS endpoint to our Pi-hole server.
 
-![Pi-hole server as DNS](../src/assets/blog/media/pihole-server-as-dns.png)
+![Pi-hole server as DNS](../assets/blog/media/pihole-server-as-dns.png)
 
 After applying, all the DNS queries will be handled by our Pi-hole server.