feat: add post pages

astro.config.ts

@@ -1,12 +1,13 @@
 import cloudflare from "@astrojs/cloudflare";
+import mdx from "@astrojs/mdx";
 import solidJs from "@astrojs/solid-js";
 import tailwind from "@astrojs/tailwind";
 import icon from "astro-icon";
 import { defineConfig } from "astro/config";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [solidJs(), tailwind(), icon()],
+  integrations: [mdx(), solidJs(), tailwind(), icon()],
   output: "hybrid",
   adapter: cloudflare(),
 });

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@astrojs/cloudflare": "^11.0.4",
+    "@astrojs/mdx": "^3.1.9",
     "@astrojs/solid-js": "^4.4.0",
     "astro": "^4.13.2",
     "astro-icon": "^1.1.0",
@@ -27,6 +28,7 @@
     "@astrojs/check": "^0.9.2",
     "@astrojs/tailwind": "^5.1.0",
     "@biomejs/biome": "^1.8.3",
+    "@tailwindcss/typography": "^0.5.15",
     "typescript": "^5.5.4"
   },
   "packageManager": "[email protected]"

src/components/toc.astro

@@ -0,0 +1,71 @@
+---
+import type { MarkdownHeading } from "astro";
+
+type Props = {
+  headings: MarkdownHeading[];
+  // The depth of the headings to display.
+  depth: number;
+  class?: string;
+};
+
+const props = Astro.props;
+
+type TocHeading = MarkdownHeading & {
+  subHeadings: MarkdownHeading[];
+};
+
+/**
+  Format headings into a nested structure. Note it works correctly only for depth 2 and 3.
+*/
+function formatHeadings({
+  headings,
+  depth,
+}: { headings: MarkdownHeading[]; depth: number }): TocHeading[] | undefined {
+  const toc: TocHeading[] = [];
+  for (const heading of headings) {
+    if (depth < heading.depth) return;
+
+    if (heading.depth === 2) {
+      toc.push({ ...heading, subHeadings: [] });
+      return;
+    }
+
+    toc[toc.length - 1].subHeadings.push(heading);
+  }
+  return toc;
+}
+
+const headings = formatHeadings({
+  headings: props.headings,
+  depth: props.depth,
+});
+---
+
+<aside class:list={["font-nunito", props.class]}>
+  <ul class="w-56 list-none">
+    {
+      headings?.map((heading) => (
+        <li>
+          <a
+            href={`#${heading.slug}`}
+            class="w-full text-sm text-gray-300 no-underline hover:text-indigo-500"
+          >
+            {heading.text}
+          </a>
+          {heading.subHeadings.length > 0 ? (
+            <ul class="flex list-none flex-col space-y-1">
+              {heading.subHeadings.map((subHeading: MarkdownHeading) => (
+                <a
+                  href={`#${subHeading.slug}`}
+                  class="w-full pl-6 text-sm text-gray-300 no-underline hover:text-indigo-500"
+                >
+                  {subHeading.text}
+                </a>
+              ))}
+            </ul>
+          ) : null}
+        </li>
+      ))
+    }
+  </ul>
+</aside>

src/components/topbar.astro

@@ -37,6 +37,22 @@ const { pathname } = Astro.url;
           <span>Home</span>
         </a>
       </li>
+      <li>
+        <a
+          href="/posts"
+          rel="prefetch"
+          class:list={[
+            "flex items-center space-x-2 bg-gray-900 px-4 py-1.5 border",
+            "2xl:text-lg",
+            "hover:text-indigo-500 hover:border-indigo-500",
+            { "border-transparent": !pathname.startsWith("/posts") },
+            { "text-indigo-500 border-indigo-500": pathname.startsWith("/posts") },
+          ]}
+        >
+          <span class="h-2 w-2 bg-indigo-500"></span>
+          <span>Posts</span>
+        </a>
+      </li>
       <li>
         <a
           href="/uses"
@@ -73,6 +89,13 @@ const { pathname } = Astro.url;
             <span class:list={["text-2xl", { "text-amber-500": pathname === "/" }]}>Home</span>
           </a>
         </li>
+        <li>
+          <a href="/posts" class="flex h-16 items-center justify-center space-x-4">
+            <span class:list={["text-2xl", { "text-indigo-500": pathname.startsWith("/posts") }]}
+              >Posts</span
+            >
+          </a>
+        </li>
         <li>
           <a href="/uses" class="flex h-16 items-center justify-center space-x-4">
             <span class:list={["text-2xl", { "text-orange-500": pathname.startsWith("/uses") }]}

src/content/config.ts

@@ -0,0 +1,18 @@
+// @ts-expect-error - Ignore missing types when the project has not been built e.g. CI environment
+import { defineCollection, z } from "astro:content";
+
+const posts = defineCollection({
+  type: "content",
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    author: z.literal("Roushou"),
+    date: z.date(),
+    draft: z.boolean(),
+    tags: z.array(z.string()),
+  }),
+});
+
+export const collections = {
+  posts,
+};