Restructure URL paths (#136)

just-be-dev · claude · github-actions[bot] · web-flow · commit 17dd13051087 · 2025-12-23T12:21:24.000-05:00
* 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)

* Extract repeated getStaticPaths pattern into Code.getStaticPaths() helper

Add Code.getStaticPaths() static method to reduce duplication across route files.
Previously each route file had ~9 lines of boilerplate to map collection entries
to params/props. Now it's just 3 lines using the helper.

Updated files:
- src/utils/code.ts: Added Code.getStaticPaths() helper method
- src/pages/talks/[code]/[slug].astro: Use helper
- src/pages/blog/[code]/[slug].astro: Use helper
- src/pages/projects/[code]/[slug].astro: Use helper
- src/pages/research/[code]/[slug].astro: Use helper

Co-authored-by: Justin Bennett &lt;just-be-dev@users.noreply.github.com&gt;

---------

Co-authored-by: Claude &lt;noreply@anthropic.com&gt;
Co-authored-by: claude[bot] &lt;41898282+claude[bot]@users.noreply.github.com&gt;
Co-authored-by: Justin Bennett &lt;just-be-dev@users.noreply.github.com&gt;
diff --git a/src/components/LatestPosts.astro b/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>
diff --git a/src/middleware.ts b/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());
   }
 
diff --git a/src/pages/blog/[code]/[slug].astro b/src/pages/blog/[code]/[slug].astro
@@ -9,10 +9,7 @@ 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 Code.getStaticPaths(posts);
 }
 
 type Props = Awaited<ReturnType<typeof getStaticPaths>>[number]["props"];
diff --git a/src/pages/blog/index.astro b/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>
diff --git a/src/pages/projects/[code]/[slug].astro b/src/pages/projects/[code]/[slug].astro
@@ -9,10 +9,7 @@ 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 Code.getStaticPaths(projects);
 }
 
 type Props = Awaited<ReturnType<typeof getStaticPaths>>[number]["props"];
diff --git a/src/pages/projects/index.astro b/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>
diff --git a/src/pages/research/[code]/[slug].astro b/src/pages/research/[code]/[slug].astro
@@ -2,13 +2,11 @@
 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 Code.getStaticPaths(research);
 }
 
 type Props = Awaited<ReturnType<typeof getStaticPaths>>[number]["props"];
diff --git a/src/pages/rss.xml.js b/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),
     })),
   });
 }
diff --git a/src/pages/talks/[code]/[slug].astro b/src/pages/talks/[code]/[slug].astro
@@ -8,10 +8,7 @@ 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 Code.getStaticPaths(talks);
 }
 
 type Props = Awaited<ReturnType<typeof getStaticPaths>>[number]["props"];
diff --git a/src/pages/talks/index.astro b/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>
diff --git a/src/utils/code.ts b/src/utils/code.ts
@@ -92,6 +92,33 @@ export class Code {
     return Code.fromCode(code);
   }
 
+  /**
+   * Parse an ID string into its code and slug components
+   * @param id - ID string (e.g., "b24f9--the-values-i-build-by")
+   * @returns Object with code (e.g., "b24f9") and slug (e.g., "the-values-i-build-by")
+   */
+  static parseId(id: string): { code: string; slug: string } {
+    const separatorIndex = id.indexOf("--");
+    if (separatorIndex === -1) {
+      throw new Error(`ID does not contain '--' separator: ${id}`);
+    }
+    return {
+      code: id.slice(0, separatorIndex),
+      slug: id.slice(separatorIndex + 2),
+    };
+  }
+
+  /**
+   * Build a URL path for a content entry
+   * @param collection - The collection name (e.g., "blog", "projects")
+   * @param id - The entry ID (e.g., "b24f9--the-values-i-build-by")
+   * @returns URL path (e.g., "/blog/b24f9/the-values-i-build-by/")
+   */
+  static buildUrl(collection: string, id: string): string {
+    const { code, slug } = Code.parseId(id);
+    return `/${collection}/${code}/${slug}/`;
+  }
+
   /**
    * Convert the code to a Date object
    */
@@ -127,6 +154,21 @@ export class Code {
   valueOf(): string {
     return this.toString();
   }
+
+  /**
+   * Helper to generate getStaticPaths for Astro routes
+   * @param collection - The collection to get entries from
+   * @returns Array of path objects with code/slug params and entry props
+   */
+  static async getStaticPaths<T>(collection: Awaited<ReturnType<typeof import("astro:content").getCollection<any>>>) {
+    return collection.map((entry) => {
+      const { code, slug } = Code.parseId(entry.id);
+      return {
+        params: { code, slug },
+        props: entry,
+      };
+    });
+  }
 }
 
 // Usage examples:
@@ -321,4 +363,41 @@ if (import.meta.vitest) {
       expect(Code.fromCode("B2392").getDateCode()).toBe("2392");
     });
   });
+
+  describe("Code.parseId()", () => {
+    it("should parse ID into code and slug", () => {
+      const result = Code.parseId("b24f9--the-values-i-build-by");
+      expect(result.code).toBe("b24f9");
+      expect(result.slug).toBe("the-values-i-build-by");
+    });
+
+    it("should handle IDs with multiple dashes in slug", () => {
+      const result = Code.parseId("b2392--my-really-long-blog-post-title");
+      expect(result.code).toBe("b2392");
+      expect(result.slug).toBe("my-really-long-blog-post-title");
+    });
+
+    it("should reject IDs without separator", () => {
+      expect(() => Code.parseId("b2392noseparator")).toThrow(
+        "ID does not contain '--' separator"
+      );
+    });
+  });
+
+  describe("Code.buildUrl()", () => {
+    it("should build URL path for blog", () => {
+      const url = Code.buildUrl("blog", "b24f9--the-values-i-build-by");
+      expect(url).toBe("/blog/b24f9/the-values-i-build-by/");
+    });
+
+    it("should build URL path for projects", () => {
+      const url = Code.buildUrl("projects", "p1e73--devtools-fm");
+      expect(url).toBe("/projects/p1e73/devtools-fm/");
+    });
+
+    it("should build URL path for research", () => {
+      const url = Code.buildUrl("research", "r24e5--parsing-techniques");
+      expect(url).toBe("/research/r24e5/parsing-techniques/");
+    });
+  });
 }

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ const latestPosts = (await getCollection("blog", ({ data }) => !data.draft))`
`24`	`24`	`return (`
`25`	`25`	`<li class="contents before:content-none">`
`26`	`26`	`<a`
`27`		- href={`/blog/${post.id}/`}
	`27`	`+ href={Code.buildUrl("blog", post.id)}`
`28`	`28`	`class="bg-0 hocus:invert group col-span-3 -mx-[1ch] grid grid-cols-subgrid outline-none"`
`29`	`29`	`>`
`30`	`30`	`<code class="text-fg-2 group-hocus:text-accent">{post.code.toString()}</code>`
Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ const sortedTags = Array.from(tagCounts.entries())`
`63`	`63`	`return (`
`64`	`64`	`<li class="contents before:content-none">`
`65`	`65`	`<a`
`66`		- href={`/blog/${post.id}/`}
	`66`	`+ href={Code.buildUrl("blog", post.id)}`
`67`	`67`	`class="bg-0 hocus:invert group col-span-3 -mx-[1ch] grid grid-cols-subgrid px-[1ch] outline-none"`
`68`	`68`	`>`
`69`	`69`	`<code class="text-fg-2 group-hocus:text-accent">{post.code.toString()}</code>`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ const projects = (await getCollection("projects"))`
`19`	`19`	`projects.map((project) => (`
`20`	`20`	`<li class="contents before:content-none">`
`21`	`21`	`<a`
`22`		- href={`/projects/${project.id}/`}
	`22`	`+ href={Code.buildUrl("projects", project.id)}`
`23`	`23`	`class="bg-0 hocus:invert group col-span-3 -mx-[1ch] grid grid-cols-subgrid px-[1ch] outline-none"`
`24`	`24`	`>`
`25`	`25`	`<code class="text-fg-2 group-hocus:text-accent">{project.code.toString()}</code>`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ const talks = (await getCollection("talks"))`
`20`	`20`	`return (`
`21`	`21`	`<li class="contents before:content-none">`
`22`	`22`	`<a`
`23`		- href={`/talks/${talk.id}/`}
	`23`	`+ href={Code.buildUrl("talks", talk.id)}`
`24`	`24`	`class="bg-0 hocus:invert group col-span-3 -mx-[1ch] grid grid-cols-subgrid px-[1ch] outline-none"`
`25`	`25`	`>`
`26`	`26`	`<code class="text-fg-2 group-hocus:text-accent">{talk.code.toString()}</code>`