feat(blog): Implement tag support

Author: niclimcy

app/lib/mdx-server.ts

@@ -13,6 +13,7 @@ const frontMatterSchema = z.object({
   author: z.string(),
   heroImage: z.string().optional(),
   heroImageAlt: z.string().optional(),
+  tags: z.array(z.string()).default([]),
 });
 
 export type FrontMatter = z.infer<typeof frontMatterSchema>;

app/routes/blog/$slug.tsx

@@ -3,6 +3,7 @@ import { Calendar, UserPen } from "lucide-react";
 import { getMDXComponent } from "mdx-bundler/client";
 import { useMemo } from "react";
 import { useLoaderData } from "react-router";
+import { Badge } from "~/components/ui/badge";
 import { Separator } from "~/components/ui/separator";
 import formatDate from "~/lib/format-date";
 import { getPostBySlug } from "~/lib/mdx-server";
@@ -57,6 +58,15 @@ export default function Post() {
                 <span>{frontmatter.author}</span>
               </div>
             </div>
+            {frontmatter.tags.length > 0 && (
+              <div className="mb-2 flex flex-wrap gap-1">
+                {frontmatter.tags.map((tag) => (
+                  <Badge key={tag} variant="outline">
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            )}
             <Separator />
             {frontmatter.heroImage && (
               <figure>

app/routes/blog/home.tsx

@@ -1,6 +1,7 @@
 import { Calendar, UserPen } from "lucide-react";
 import { useLoaderData } from "react-router";
 import { Link } from "react-router";
+import { Badge } from "~/components/ui/badge";
 import formatDate from "~/lib/format-date";
 import { getPosts } from "~/lib/mdx-server";
 
@@ -68,6 +69,15 @@ export default function Home() {
                   <span>{frontmatter.author}</span>
                 </div>
               </div>
+              {frontmatter.tags.length > 0 && (
+                <div className="mt-2 flex flex-wrap gap-1">
+                  {frontmatter.tags.map((tag) => (
+                    <Badge key={tag} variant="outline">
+                      {tag}
+                    </Badge>
+                  ))}
+                </div>
+              )}
             </div>
           </Link>
         ))}

posts/hello.mdx

@@ -5,6 +5,7 @@ published: 2026-04-09
 author: (niclimcy) Nicholas Lim
 heroImage: /posts/hello-hero.webp
 heroImageAlt: "Artemis II Launch, Image Credit: NASA/Bill Ingalls"
+tags: ["feature", "breaking-change", "api", "wasmtime"]
 ---
 
 ```ts