Reorganize blog post structure for clarity

astro.config.mjs

@@ -1,14 +1,21 @@
 import { defineConfig } from "astro/config";
 import prefetch from "@astrojs/prefetch";
+import sitemap from "@astrojs/sitemap";
 import tailwindcss from "@tailwindcss/vite";
 
 // https://astro.build/config
 export default defineConfig({
+  site: "https://t3.gg",
+  image: {
+    // Apply responsive image defaults to Markdown content.
+    layout: "constrained",
+    domains: ["t3.gg", "img.youtube.com"],
+  },
   vite: {
     plugins: [tailwindcss()],
   },
   plugins: [],
-  integrations: [prefetch()],
+  integrations: [prefetch(), sitemap()],
   redirects: {
     "/links": "/",
     "/faq": "/",

package.json

@@ -22,6 +22,8 @@
   },
   "dependencies": {
     "@astrojs/prefetch": "^0.4.1",
+    "@astrojs/rss": "^4.0.15",
+    "@astrojs/sitemap": "^3.7.0",
     "date-fns": "^4.1.0"
   }
 }

src/components/BlogImage.astro

@@ -0,0 +1,49 @@
+---
+import { Picture } from "astro:assets";
+import type { ImageMetadata } from "astro";
+
+interface Props {
+  src: ImageMetadata | string;
+  alt: string;
+  class?: string;
+  sizes?: string;
+  widths?: number[];
+  priority?: boolean;
+}
+
+const {
+  src,
+  alt,
+  class: className,
+  sizes = "(min-width: 768px) 768px, 100vw",
+  widths = [480, 768, 1024, 1280, 1600],
+  priority = false,
+} = Astro.props;
+
+const isLocalImage = typeof src !== "string";
+const loading = priority ? "eager" : "lazy";
+---
+
+{
+  isLocalImage ? (
+    <Picture
+      src={src}
+      alt={alt}
+      sizes={sizes}
+      widths={widths}
+      formats={["avif", "webp"]}
+      loading={loading}
+      decoding="async"
+      class={className}
+    />
+  ) : (
+    <img
+      src={src}
+      alt={alt}
+      loading={loading}
+      decoding="async"
+      class={className}
+    />
+  )
+}
+

src/components/BlogPostHeader.astro

@@ -1,19 +1,38 @@
 ---
+import type { CollectionEntry } from "astro:content";
+import { format } from "date-fns";
+import BlogImage from "./BlogImage.astro";
+
 export interface Props {
-  post: { title: string; date: string };
+  post: CollectionEntry<"posts">;
 }
 
-import { parseISO, format } from "date-fns";
-
 const { post } = Astro.props;
 
-const date = parseISO(post.date);
+const date = post.data.date;
 const formatted = format(date, "LLLL d, yyyy");
+const coverImage = post.data.cover ?? post.data.imageURL;
+const coverAlt = post.data.coverAlt ?? post.data.title;
 ---
 
 <header class="not-prose mb-12 border-b border-white/10 pb-8">
   <h1 class="mb-3 text-2xl font-medium tracking-tight text-text">
-    {post.title}
+    {post.data.title}
   </h1>
   <time datetime={date.toString()} class="text-sm text-muted">{formatted}</time>
+  {post.data.archived ? (
+    <div class="mt-4 rounded-lg border border-amber-300/20 bg-amber-300/5 px-4 py-3 text-sm text-amber-100/90">
+      This post was archived manually by Theo. It is probably out of date or something.
+    </div>
+  ) : null}
+  {coverImage ? (
+    <figure class="mt-8">
+      <BlogImage
+        src={coverImage}
+        alt={coverAlt}
+        priority={true}
+        class="w-full rounded-xl border border-white/10"
+      />
+    </figure>
+  ) : null}
 </header>

src/components/BlogPostPreview.astro

@@ -1,15 +1,15 @@
 ---
+import type { CollectionEntry } from "astro:content";
+import { format } from "date-fns";
+
 export interface Props {
-  post: any;
+  post: CollectionEntry<"posts">;
 }
 
-import { getSlugFromPath } from "../utils/get-slug-from-path";
-import { parseISO, format } from "date-fns";
-
 const { post } = Astro.props;
-const url = "/blog/post/" + getSlugFromPath(post.file);
+const url = `/blog/post/${post.id}`;
 
-const date = parseISO(post.frontmatter.date);
+const date = post.data.date;
 const formattedDate = format(date, "MMM d, yyyy");
 ---
 
@@ -18,7 +18,7 @@ const formattedDate = format(date, "MMM d, yyyy");
   class="group relative flex items-baseline justify-between gap-4 py-3"
 >
   <span class="text-subtle transition-colors duration-200 group-hover:text-text">
-    {post.frontmatter.title}
+    {post.data.title}
   </span>
   <span class="shrink-0 text-sm text-muted">{formattedDate}</span>
   <span

src/content.config.ts

@@ -0,0 +1,45 @@
+import { defineCollection, z } from "astro:content";
+import { glob } from "astro/loaders";
+
+const posts = defineCollection({
+  loader: glob({
+    base: "./src/content/posts",
+    pattern: "**/index.md",
+    generateId: ({ entry, data }) => {
+      // Prefer an explicit, canonical slug so folders can move freely
+      // without breaking old links.
+      const explicitSlug =
+        typeof data.slug === "string" && data.slug.trim().length > 0
+          ? data.slug.trim()
+          : undefined;
+      if (explicitSlug) return explicitSlug;
+
+      // Fall back to the entry path (minus the index file).
+      return entry.replace(/\/index\.md$/, "");
+    },
+  }),
+  schema: ({ image }) =>
+    z.object({
+      title: z.string(),
+      description: z.string().optional(),
+      date: z.coerce.date(),
+      updated: z.coerce.date().optional(),
+      tags: z.array(z.string()).optional(),
+      // Canonical slug used for stable URLs.
+      slug: z.string().optional(),
+      // Optional legacy slugs that should redirect to the canonical slug.
+      slugAliases: z.array(z.string()).optional(),
+      draft: z.boolean().default(false),
+      hidden: z.boolean().default(false),
+      archived: z.boolean().default(false),
+      readMore: z.boolean().optional(),
+      cover: image().optional(),
+      coverAlt: z.string().optional(),
+      imageURL: z.string().url().optional(),
+      canonicalUrl: z.string().url().optional(),
+    }),
+});
+
+export const collections = {
+  posts,
+};

src/content/posts/README.md

@@ -0,0 +1,37 @@
+# Blog Post Organization
+
+This folder is organized for editing ergonomics without breaking links.
+
+## Structure
+
+- Active posts: `src/content/posts/active/<year>/<slug>/index.md`
+- Archived posts: `src/content/posts/archive/<year>/<slug>/index.md`
+
+## Canonical Slug (Important)
+
+Each post should include a `slug` field in frontmatter:
+
+```md
+---
+title: "My Post"
+slug: "my-post"
+date: "2026-02-02"
+---
+```
+
+The `slug` is the canonical URL segment used at `/blog/post/<slug>`.
+Because the slug is explicit, you can move posts between folders freely
+without breaking old links.
+
+## Optional Aliases
+
+If you ever rename a slug, you can keep old URLs working:
+
+```md
+slug: "new-slug"
+slugAliases:
+  - "old-slug"
+```
+
+Aliases will redirect to the canonical slug.
+

src/content/posts/airpods-max.md → src/content/posts/active/2020/airpods-max/index.md

@@ -1,12 +1,14 @@
 ---
 title: "AirPods Max Review"
+slug: "airpods-max"
 date: "2020-12-22"
 description: "An Audiophile who happens to love Apple comes to terms with this terrible product"
-imageURL: "https://t3.gg/images/airpods-max/miles.jpg"
+cover: ./images/miles.jpg
+coverAlt: "Cat wearing AirPods Max"
 readMore: true
 ---
 
-![Cat wearing airpods max](https://t3.gg/images/airpods-max/miles.jpg)
+![Cat wearing airpods max](./images/miles.jpg)
 
 #### No Magic Here
 

src/content/posts/welcome.md → src/content/posts/active/2020/welcome/index.md

@@ -1,6 +1,10 @@
 ---
 title: "Hello World"
+slug: "welcome"
 date: "2020-12-21"
+description: "Kicking off the blog and the stack behind it."
+cover: ./images/lighthouse-scores.png
+coverAlt: "Lighthouse performance scores"
 ---
 
 This is long, long overdue.
@@ -11,7 +15,7 @@ This blog is also built on things I'm nerdy about. My personal site was previous
 
 tl;dr on the tech - [Next.js](https://nextjs.org/) rewrite deployed on [Netlify](https://netlify.com)
 
-It's nothing too fancy. Still pumped about the [lighthouse score tho](/images/lighthouse-scores.png)
+It's nothing too fancy. Still pumped about the [lighthouse score tho](./images/lighthouse-scores.png)
 
 I'll likely write more on the tech itself in the future - but for now, know I'm loving this stack and highly recommend it.
 

src/content/posts/quitting.md → src/content/posts/active/2021/quitting/index.md

@@ -1,5 +1,6 @@
 ---
 title: "Quitting Your Dream Job (Twice)"
+slug: "quitting"
 date: "2021-09-02"
 description: "Quitting is never easy. Building things can be. I'm leaving TTFM Labs to start a company."
 readMore: true