feat: generate blog posts content via markdown

Author: jonathanyeong

app/pages/blog/[...path].vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const route = useRoute()
+const { data: post } = await useAsyncData(route.path, () => {
+  return queryCollection('blog').path(route.path).first()
+})
+
+definePageMeta({
+  name: `blog-post`,
+  // alias: ['/:path(.*)*'],
+})
+
+useSeoMeta({
+  title: () => post.value?.title || 'Blog', // TODO: How does i18n deal with dynamic values? $t('blog.post.title'),
+  description: () => (post.value?.description ? `Blog Article ${post.value?.description}` : ''),
+})
+</script>
+
+<template>
+  <main class="container py-8 sm:py-12 w-full">
+    <!-- Header -->
+    <header class="mb-8 pb-8 border-b border-border">
+      <div class="">I AM A WEAK HEADER</div>
+    </header>
+
+    <article v-if="post">
+      <ContentRenderer v-if="post" :value="post" />
+    </article>
+
+    <article v-else>
+      <h1>Post Not Found</h1>
+      <p>We couldn't find a post at /blog/{{ route.path }}</p>
+    </article>
+  </main>
+</template>
+
+<!-- TODO: styles -->
+<style>
+h1 {
+  @apply text-4xl font-bold text-gray-900 dark:text-white mb-2;
+}
+</style>

app/pages/blog/[slug].vue

@@ -1,12 +1,7 @@
 <script setup lang="ts">
-const route = useRoute('blog')
-const router = useRouter()
-
-// 1. Define your list of posts (This would eventually come from useAsyncData)
-const posts = [
-  { slug: 'hello-world', title: 'Hello World', excerpt: 'My first post' },
-  { slug: 'server-components', title: 'Server Components', excerpt: 'Zero JS' },
-]
+const { data: posts } = await useAsyncData('blog-posts', () =>
+  queryCollection('blog').where('draft', '<>', true).order('date', 'DESC').all(),
+)
 
 definePageMeta({
   name: 'blog',

app/pages/blog/index.vue

@@ -0,0 +1,12 @@
+import { defineContentConfig, defineCollection } from '@nuxt/content'
+import { BlogPostSchema } from './shared/schemas/blog'
+
+export default defineContentConfig({
+  collections: {
+    blog: defineCollection({
+      type: 'page',
+      source: 'blog/**/*.md',
+      schema: BlogPostSchema,
+    }),
+  },
+})

content.config.ts

@@ -0,0 +1,12 @@
+---
+title: 'Hello World'
+date: '2026-01-28'
+slug: 'first-post'
+description: 'My first post on the blog'
+excerpt: 'My first post'
+draft: false
+---
+
+# My First Page
+
+Here is some content.

content/blog/first-post.md

@@ -0,0 +1,12 @@
+---
+title: 'Server Components'
+date: '2026-01-28'
+slug: 'server-components'
+description: 'My first post on the blog'
+excerpt: 'Zero JS'
+draft: false
+---
+
+# Server components
+
+Here is some server component razzle dazzle.

content/blog/server-components.md

@@ -32,6 +32,7 @@ export default defineNuxtConfig({
     '@vueuse/nuxt',
     '@nuxtjs/i18n',
     '@nuxtjs/color-mode',
+    '@nuxt/content',
   ],
 
   colorMode: {

nuxt.config.ts

@@ -13,6 +13,7 @@
     "build:lunaria": "node --experimental-transform-types ./lunaria/lunaria.ts",
     "dev": "nuxt dev",
     "dev:docs": "pnpm run --filter npmx-docs dev --port=3001",
+    "dev:blog": "pnpm run --filter npmx-blog dev --port=3002",
     "lint": "vite lint && vite fmt --check",
     "lint:fix": "vite lint --fix && vite fmt",
     "generate": "nuxt generate",
@@ -28,11 +29,13 @@
     "test:unit": "vite test --project unit"
   },
   "dependencies": {
+    "@atproto/lex": "^0.0.13",
     "@deno/doc": "jsr:^0.189.1",
     "@iconify-json/simple-icons": "^1.2.67",
     "@iconify-json/vscode-icons": "^1.2.40",
     "@lunariajs/core": "https://pkg.pr.new/lunariajs/lunaria/@lunariajs/core@f07e1a3",
     "@nuxt/a11y": "1.0.0-alpha.1",
+    "@nuxt/content": "3.11.0",
     "@nuxt/fonts": "^0.13.0",
     "@nuxt/scripts": "^0.13.2",
     "@nuxtjs/color-mode": "^4.0.0",
@@ -69,6 +72,7 @@
     "@types/validate-npm-package-name": "4.0.2",
     "@unocss/nuxt": "66.6.0",
     "@unocss/preset-wind4": "66.6.0",
+    "@valibot/to-json-schema": "^1.5.0",
     "@vite-pwa/assets-generator": "1.0.2",
     "@vite-pwa/nuxt": "1.1.0",
     "@vitest/browser-playwright": "^4.0.18",