Restructure URLs to use separate code and slug segments

Change URL format from `/blog/b24f9--the-values-i-build-by/` to
`/blog/b24f9/the-values-i-build-by/` for cleaner, more semantic URLs.

- Add Code.parseId() and Code.buildUrl() utility functions
- Restructure routes from [slug].astro to [code]/[slug].astro
- Update all index pages and components to generate new URL format
- Update middleware to handle new URL structure and redirects
- Add support for talks in middleware (was missing)

Author: claude

src/components/LatestPosts.astro

@@ -24,7 +24,7 @@ const latestPosts = (await getCollection("blog", ({ data }) => !data.draft))
         return (
           <li class="contents before:content-none">
             <a
-              href={`/blog/${post.id}/`}
+              href={Code.buildUrl("blog", post.id)}
               class="bg-0 hocus:invert group col-span-3 -mx-[1ch] grid grid-cols-subgrid outline-none"
             >
               <code class="text-fg-2 group-hocus:text-accent">{post.code.toString()}</code>

src/middleware.ts

@@ -1,12 +1,13 @@
 import { defineMiddleware } from "astro:middleware";
 import { getCollection } from "astro:content";
+import { Code } from "@/utils/code";
 
 export const onRequest = defineMiddleware(async (context, next) => {
   const url = new URL(context.request.url);
 
-  // Handle /blog/*, /projects/*, and /research/* paths
-  const match = url.pathname.match(/^\/(blog|projects|research)\//);
-  const matchedType = match?.[1] as "blog" | "projects" | "research" | undefined;
+  // Handle /blog/*, /projects/*, /research/*, and /talks/* paths
+  const match = url.pathname.match(/^\/(blog|projects|research|talks)\//);
+  const matchedType = match?.[1] as "blog" | "projects" | "research" | "talks" | undefined;
 
   if (!matchedType) {
     return next();
@@ -17,19 +18,28 @@ export const onRequest = defineMiddleware(async (context, next) => {
     return next();
   }
 
-  const slug = parts[1];
+  // Extract the code from the URL (first segment after collection name)
+  const urlCode = parts[1];
+
+  // Find the entry by matching the code (first 5 characters of the ID)
   const entry = (
     await getCollection(matchedType, ({ id }) => {
-      return slug.slice(0, 5).toLowerCase() === id.slice(0, 5).toLowerCase();
+      return urlCode.slice(0, 5).toLowerCase() === id.slice(0, 5).toLowerCase();
     })
   ).at(0);
 
   if (entry) {
-    // We're going to the right page, continue
-    if (context.props.id === entry.id) return next();
-    // Redirect to the full ID
+    const { code, slug } = Code.parseId(entry.id);
+    const correctPath = `/${matchedType}/${code}/${slug}/`;
+
+    // Check if we're already on the correct path
+    if (url.pathname === correctPath) {
+      return next();
+    }
+
+    // Redirect to the correct URL format
     const newUrl = new URL(url);
-    newUrl.pathname = `/${matchedType}/${entry.id}/`;
+    newUrl.pathname = correctPath;
     return context.redirect(newUrl.toString());
   }
 

src/pages/blog/[slug].astro src/pages/blog/[code]/[slug].astrosrc/pages/blog/[slug].astro renamed to src/pages/blog/[code]/[slug].astro

@@ -9,10 +9,13 @@ import { Code } from "@/utils/code";
 
 export async function getStaticPaths() {
   const posts = await getCollection("blog");
-  return posts.map((post) => ({
-    params: { slug: post.id },
-    props: post,
-  }));
+  return posts.map((post) => {
+    const { code, slug } = Code.parseId(post.id);
+    return {
+      params: { code, slug },
+      props: post,
+    };
+  });
 }
 
 type Props = Awaited<ReturnType<typeof getStaticPaths>>[number]["props"];

src/pages/blog/index.astro

@@ -63,7 +63,7 @@ const sortedTags = Array.from(tagCounts.entries())
         return (
           <li class="contents before:content-none">
             <a
-              href={`/blog/${post.id}/`}
+              href={Code.buildUrl("blog", post.id)}
               class="bg-0 hocus:invert group col-span-3 -mx-[1ch] grid grid-cols-subgrid px-[1ch] outline-none"
             >
               <code class="text-fg-2 group-hocus:text-accent">{post.code.toString()}</code>

src/pages/projects/[slug].astro src/pages/projects/[code]/[slug].astrosrc/pages/projects/[slug].astro renamed to src/pages/projects/[code]/[slug].astro

@@ -9,10 +9,13 @@ import { Code } from "@/utils/code";
 
 export async function getStaticPaths() {
   const projects = await getCollection("projects");
-  return projects.map((project) => ({
-    params: { slug: project.id },
-    props: project,
-  }));
+  return projects.map((project) => {
+    const { code, slug } = Code.parseId(project.id);
+    return {
+      params: { code, slug },
+      props: project,
+    };
+  });
 }
 
 type Props = Awaited<ReturnType<typeof getStaticPaths>>[number]["props"];

src/pages/projects/index.astro

@@ -19,7 +19,7 @@ const projects = (await getCollection("projects"))
       projects.map((project) => (
         <li class="contents before:content-none">
           <a
-            href={`/projects/${project.id}/`}
+            href={Code.buildUrl("projects", project.id)}
             class="bg-0 hocus:invert group col-span-3 -mx-[1ch] grid grid-cols-subgrid px-[1ch] outline-none"
           >
             <code class="text-fg-2 group-hocus:text-accent">{project.code.toString()}</code>

src/pages/research/[slug].astro src/pages/research/[code]/[slug].astrosrc/pages/research/[slug].astro renamed to src/pages/research/[code]/[slug].astro

@@ -2,13 +2,17 @@
 import { getCollection, render } from "astro:content";
 import FormattedDate from "@/components/FormattedDate.astro";
 import Layout from "@/layouts/Layout.astro";
+import { Code } from "@/utils/code";
 
 export async function getStaticPaths() {
   const research = await getCollection("research");
-  return research.map((item) => ({
-    params: { slug: item.id },
-    props: item,
-  }));
+  return research.map((item) => {
+    const { code, slug } = Code.parseId(item.id);
+    return {
+      params: { code, slug },
+      props: item,
+    };
+  });
 }
 
 type Props = Awaited<ReturnType<typeof getStaticPaths>>[number]["props"];

src/pages/rss.xml.js

@@ -1,6 +1,7 @@
 import { getCollection } from "astro:content";
 import rss from "@astrojs/rss";
 import { SITE_DESCRIPTION, SITE_TITLE } from "@/consts";
+import { Code } from "@/utils/code";
 
 export async function GET(context) {
   const posts = await getCollection("blog", ({ data }) => !data.draft);
@@ -13,7 +14,7 @@ export async function GET(context) {
       title: post.data.title,
       pubDate: post.data.date,
       description: post.data.description,
-      link: `/blog/${post.id}/`,
+      link: Code.buildUrl("blog", post.id),
     })),
   });
 }

src/pages/talks/[slug].astro src/pages/talks/[code]/[slug].astrosrc/pages/talks/[slug].astro renamed to src/pages/talks/[code]/[slug].astro

@@ -8,10 +8,13 @@ import { Code } from "@/utils/code";
 
 export async function getStaticPaths() {
   const talks = await getCollection("talks");
-  return talks.map((talk) => ({
-    params: { slug: talk.id },
-    props: talk,
-  }));
+  return talks.map((talk) => {
+    const { code, slug } = Code.parseId(talk.id);
+    return {
+      params: { code, slug },
+      props: talk,
+    };
+  });
 }
 
 type Props = Awaited<ReturnType<typeof getStaticPaths>>[number]["props"];

src/pages/talks/index.astro

@@ -20,7 +20,7 @@ const talks = (await getCollection("talks"))
         return (
           <li class="contents before:content-none">
             <a
-              href={`/talks/${talk.id}/`}
+              href={Code.buildUrl("talks", talk.id)}
               class="bg-0 hocus:invert group col-span-3 -mx-[1ch] grid grid-cols-subgrid px-[1ch] outline-none"
             >
               <code class="text-fg-2 group-hocus:text-accent">{talk.code.toString()}</code>