From 651fe07bdf53ae03c35216abc47d1e2c8b2c285c Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.o.hurrington@gmail.com>
Date: Wed, 28 Jan 2026 23:48:13 +0100
Subject: [PATCH 01/16] feat: barebones implementation of Blog Posts UI (WIP)

---
 app/components/AppHeader.vue       | 24 ++++++++++++
 app/components/BlogPost.server.vue | 27 +++++++++++++
 app/pages/blog/[...path].vue       | 62 ++++++++++++++++++++++++++++++
 app/pages/blog/index.vue           | 45 ++++++++++++++++++++++
 i18n/locales/en.json               |  5 +++
 i18n/locales/fr-FR.json            |  5 +++
 i18n/locales/it-IT.json            |  5 +++
 nuxt.config.ts                     |  1 +
 8 files changed, 174 insertions(+)
 create mode 100644 app/components/BlogPost.server.vue
 create mode 100644 app/pages/blog/[...path].vue
 create mode 100644 app/pages/blog/index.vue

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index ae779a39..7d663532 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -26,6 +26,15 @@ onKeyStroke(',', e => {
   e.preventDefault()
   router.push('/settings')
 })
+onKeyStroke('.', e => {
+  const target = e.target as HTMLElement
+  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+    return
+  }
+
+  e.preventDefault()
+  router.push('/blog')
+})
 </script>
 
 <template>
@@ -69,6 +78,21 @@ onKeyStroke(',', e => {
           <li v-if="isConnected && npmUser" class="flex items-center">
             <HeaderOrgsDropdown :username="npmUser" />
           </li>
+          <li class="flex items-center">
+            <NuxtLink
+              to="/blog"
+              class="link-subtle font-mono text-sm inline-flex items-center gap-2"
+              aria-keyshortcuts="."
+            >
+              {{ $t('nav.blog') }}
+              <kbd
+                class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
+                aria-hidden="true"
+              >
+                .
+              </kbd>
+            </NuxtLink>
+          </li>
         </ul>
       </div>
 
diff --git a/app/components/BlogPost.server.vue b/app/components/BlogPost.server.vue
new file mode 100644
index 00000000..e43b4275
--- /dev/null
+++ b/app/components/BlogPost.server.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const props = defineProps<{ title: string; htmlContent: string; date: string }>()
+</script>
+<template>
+  <main class="container">
+    <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-2">
+      {{ title }}
+    </h1>
+    <!-- <time class="text-sm text-gray-500 dark:text-gray-400"> -->
+
+    <DateTime
+      :datetime="date"
+      year="numeric"
+      month="short"
+      day="numeric"
+      class="text-xs text-fg-subtle"
+    />
+
+    <div class="" v-html="htmlContent" />
+  </main>
+</template>
+
+<style>
+.container {
+  background: var(--bg-blue);
+}
+</style>
diff --git a/app/pages/blog/[...path].vue b/app/pages/blog/[...path].vue
new file mode 100644
index 00000000..685d097c
--- /dev/null
+++ b/app/pages/blog/[...path].vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const route = useRoute('blog-post')
+const router = useRouter()
+
+interface Post {
+  title: string
+  date: string
+  body: string
+}
+
+const fakePosts: Record<string, Post> = {
+  'hello-world': {
+    title: 'Hello World',
+    date: 'Jan 28, 2026',
+    body: '<p>This is the first post.</p>',
+  },
+  'server-components': {
+    title: 'Server Components',
+    date: 'Jan 29, 2026',
+    body: '<p>Zero JS is great.</p>',
+  },
+}
+
+const slug = computed<string>(() => {
+  const pathParam = route.params.path
+  return Array.isArray(pathParam) ? pathParam.join('/') : pathParam
+})
+
+const post = computed(() => {
+  const s = slug.value
+  return s ? fakePosts[s] : null
+})
+
+definePageMeta({
+  name: 'blog-post',
+  // alias: ['/:path(.*)*'],
+})
+
+useSeoMeta({
+  title: () => $t('blog.post.title'),
+
+  // description: () => `Blog Article ${post.value}@${post.value}`,
+})
+</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">
+      <BlogPost :title="post.title" :date="post.date" :html-content="post.body" />
+    </article>
+
+    <article v-else>
+      <h1>Post Not Found</h1>
+      <p>We couldn't find a post at /blog/{{ slug }}</p>
+    </article>
+  </main>
+</template>
diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue
new file mode 100644
index 00000000..46c6d4cf
--- /dev/null
+++ b/app/pages/blog/index.vue
@@ -0,0 +1,45 @@
+<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' },
+]
+
+definePageMeta({
+  name: 'blog',
+  // alias: ['/:path(.*)*'],
+})
+
+useSeoMeta({
+  title: () => $t('blog.title'),
+  description: () => $t('blog.description'),
+})
+</script>
+
+<template>
+  <main class="container py-8 sm:py-12 w-full">
+    <header class="mb-8 pb-8 border-b border-border">
+      <div class="">I AM A MIGHTY HEADER</div>
+    </header>
+
+    <article class="flex flex-col gap-6">
+      <div v-for="post in posts" :key="post.slug" class="p-4 border border-border rounded-lg">
+        <h2 class="text-xl font-semibold">
+          <NuxtLink :to="`/blog/${post.slug}`" class="text-primary hover:underline">
+            {{ post.title }}
+          </NuxtLink>
+        </h2>
+        <p class="text-muted-foreground">{{ post.excerpt }}</p>
+      </div>
+    </article>
+  </main>
+</template>
+
+<style>
+.container {
+  background: var(--bg-red);
+}
+</style>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index e0ba7476..7fa73a59 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -41,10 +41,15 @@
   "nav": {
     "main_navigation": "Main",
     "popular_packages": "Popular packages",
+    "blog": "blog",
     "search": "search",
     "settings": "settings",
     "back": "back"
   },
+  "blog": {
+    "title": "Blog",
+    "description": "Insights and updates from the npmx community"
+  },
   "settings": {
     "title": "settings",
     "tagline": "customize your npmx experience",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index bdaef15d..8ca53740 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -41,10 +41,15 @@
   "nav": {
     "main_navigation": "Barre de navigation",
     "popular_packages": "Paquets populaires",
+    "blog": "blog",
     "search": "recherche",
     "settings": "paramètres",
     "back": "Retour"
   },
+  "blog": {
+    "title": "Blog",
+    "description": "Perspectives et actualités de la communauté npmx"
+  },
   "settings": {
     "title": "paramètres",
     "tagline": "personnalisez votre expérience npmx",
diff --git a/i18n/locales/it-IT.json b/i18n/locales/it-IT.json
index 8461105d..51fd8ff1 100644
--- a/i18n/locales/it-IT.json
+++ b/i18n/locales/it-IT.json
@@ -41,10 +41,15 @@
   "nav": {
     "main_navigation": "Principale",
     "popular_packages": "Pacchetti popolari",
+    "blog": "blog",
     "search": "cerca",
     "settings": "impostazioni",
     "back": "Indietro"
   },
+  "blog": {
+    "title": "Blog",
+    "description": "Approfondimenti e aggiornamenti dalla comunità npmx"
+  },
   "settings": {
     "title": "impostazioni",
     "tagline": "personalizza la tua esperienza npmx",
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 9e1bda7f..3abf9705 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -88,6 +88,7 @@ export default defineNuxtConfig({
     '/about': { prerender: true },
     '/settings': { prerender: true },
     // proxy for insights
+    '/blog/**': { isr: true, prerender: true },
     '/_v/script.js': { proxy: 'https://npmx.dev/_vercel/insights/script.js' },
     '/_v/view': { proxy: 'https://npmx.dev/_vercel/insights/view' },
     '/_v/event': { proxy: 'https://npmx.dev/_vercel/insights/event' },

From c5fcd2b57ad958d522671ee901f0bf10694d7b87 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Wed, 28 Jan 2026 19:50:02 -0500
Subject: [PATCH 02/16] feat: generate blog posts content via markdown

---
 app/pages/blog/[...path].vue      | 62 -------------------------------
 app/pages/blog/[slug].vue         | 41 ++++++++++++++++++++
 app/pages/blog/index.vue          | 11 ++----
 content.config.ts                 | 12 ++++++
 content/blog/first-post.md        | 12 ++++++
 content/blog/server-components.md | 12 ++++++
 nuxt.config.ts                    |  1 +
 package.json                      |  2 +
 pnpm-lock.yaml                    | 30 +++++++++++----
 shared/schemas/blog.ts            | 22 +++++++++++
 10 files changed, 128 insertions(+), 77 deletions(-)
 delete mode 100644 app/pages/blog/[...path].vue
 create mode 100644 app/pages/blog/[slug].vue
 create mode 100644 content.config.ts
 create mode 100644 content/blog/first-post.md
 create mode 100644 content/blog/server-components.md
 create mode 100644 shared/schemas/blog.ts

diff --git a/app/pages/blog/[...path].vue b/app/pages/blog/[...path].vue
deleted file mode 100644
index 685d097c..00000000
--- a/app/pages/blog/[...path].vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script setup lang="ts">
-const route = useRoute('blog-post')
-const router = useRouter()
-
-interface Post {
-  title: string
-  date: string
-  body: string
-}
-
-const fakePosts: Record<string, Post> = {
-  'hello-world': {
-    title: 'Hello World',
-    date: 'Jan 28, 2026',
-    body: '<p>This is the first post.</p>',
-  },
-  'server-components': {
-    title: 'Server Components',
-    date: 'Jan 29, 2026',
-    body: '<p>Zero JS is great.</p>',
-  },
-}
-
-const slug = computed<string>(() => {
-  const pathParam = route.params.path
-  return Array.isArray(pathParam) ? pathParam.join('/') : pathParam
-})
-
-const post = computed(() => {
-  const s = slug.value
-  return s ? fakePosts[s] : null
-})
-
-definePageMeta({
-  name: 'blog-post',
-  // alias: ['/:path(.*)*'],
-})
-
-useSeoMeta({
-  title: () => $t('blog.post.title'),
-
-  // description: () => `Blog Article ${post.value}@${post.value}`,
-})
-</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">
-      <BlogPost :title="post.title" :date="post.date" :html-content="post.body" />
-    </article>
-
-    <article v-else>
-      <h1>Post Not Found</h1>
-      <p>We couldn't find a post at /blog/{{ slug }}</p>
-    </article>
-  </main>
-</template>
diff --git a/app/pages/blog/[slug].vue b/app/pages/blog/[slug].vue
new file mode 100644
index 00000000..e4738b54
--- /dev/null
+++ b/app/pages/blog/[slug].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>
diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue
index 46c6d4cf..e4d65b55 100644
--- a/app/pages/blog/index.vue
+++ b/app/pages/blog/index.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',
diff --git a/content.config.ts b/content.config.ts
new file mode 100644
index 00000000..41baba0e
--- /dev/null
+++ b/content.config.ts
@@ -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,
+    }),
+  },
+})
diff --git a/content/blog/first-post.md b/content/blog/first-post.md
new file mode 100644
index 00000000..f65c97fc
--- /dev/null
+++ b/content/blog/first-post.md
@@ -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.
diff --git a/content/blog/server-components.md b/content/blog/server-components.md
new file mode 100644
index 00000000..422cd1b2
--- /dev/null
+++ b/content/blog/server-components.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.
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3abf9705..32474532 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -34,6 +34,7 @@ export default defineNuxtConfig({
     '@vueuse/nuxt',
     '@nuxtjs/i18n',
     '@nuxtjs/color-mode',
+    '@nuxt/content',
   ],
 
   colorMode: {
diff --git a/package.json b/package.json
index 84597047..34b39b2e 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@nuxt/scripts": "0.13.2",
     "@nuxtjs/color-mode": "4.0.0",
     "@nuxtjs/html-validator": "2.1.0",
+    "@nuxt/content": "3.11.0",
     "@nuxtjs/i18n": "10.2.1",
     "@shikijs/langs": "3.21.0",
     "@shikijs/themes": "3.21.0",
@@ -77,6 +78,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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ab85b8cb..d5ae2f76 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
       '@nuxt/a11y':
         specifier: 1.0.0-alpha.1
         version: 1.0.0-alpha.1(magicast@0.5.1)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))
+      '@nuxt/content':
+        specifier: 3.11.0
+        version: 3.11.0(@valibot/to-json-schema@1.5.0(valibot@1.2.0(typescript@5.9.3)))(better-sqlite3@12.6.2)(magicast@0.5.1)(valibot@1.2.0(typescript@5.9.3))
       '@nuxt/fonts':
         specifier: 0.13.0
         version: 0.13.0(db0@0.3.4(better-sqlite3@12.6.2))(ioredis@5.9.2)(magicast@0.5.1)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))
@@ -150,6 +153,9 @@ importers:
       '@unocss/preset-wind4':
         specifier: 66.6.0
         version: 66.6.0
+      '@valibot/to-json-schema':
+        specifier: ^1.5.0
+        version: 1.5.0(valibot@1.2.0(typescript@5.9.3))
       '@vite-pwa/assets-generator':
         specifier: 1.0.2
         version: 1.0.2
@@ -264,7 +270,7 @@ importers:
         version: 12.6.2
       docus:
         specifier: 5.4.4
-        version: 5.4.4(29b67e4ea82958d3bb639aa676be121d)
+        version: 5.4.4(ec964c5fe48ae1161e7f2464bd5d4112)
       nuxt:
         specifier: 4.3.0
         version: 4.3.0(@parcel/watcher@2.5.6)(@types/node@24.10.9)(@vue/compiler-sfc@3.5.27)(better-sqlite3@12.6.2)(cac@6.7.14)(db0@0.3.4(better-sqlite3@12.6.2))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(magicast@0.5.1)(optionator@0.9.4)(oxlint@1.42.0(oxlint-tsgolint@0.11.3))(rolldown@1.0.0-rc.1)(rollup@4.57.0)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@3.2.4(typescript@5.9.3))(yaml@2.8.2)
@@ -3998,6 +4004,11 @@ packages:
     peerDependencies:
       webpack: ^4 || ^5
 
+  '@valibot/to-json-schema@1.5.0':
+    resolution: {integrity: sha512-GE7DmSr1C2UCWPiV0upRH6mv0cCPsqYGs819fb6srCS1tWhyXrkGGe+zxUiwzn/L1BOfADH4sNjY/YHCuP8phQ==}
+    peerDependencies:
+      valibot: ^1.2.0
+
   '@vercel/nft@1.3.0':
     resolution: {integrity: sha512-i4EYGkCsIjzu4vorDUbqglZc5eFtQI2syHb++9ZUDm6TU4edVywGpVnYDein35x9sevONOn9/UabfQXuNXtuzQ==}
     engines: {node: '>=20'}
@@ -11028,7 +11039,7 @@ snapshots:
       - magicast
       - supports-color
 
-  '@nuxt/content@3.11.0(better-sqlite3@12.6.2)(magicast@0.5.1)(valibot@1.2.0(typescript@5.9.3))':
+  '@nuxt/content@3.11.0(@valibot/to-json-schema@1.5.0(valibot@1.2.0(typescript@5.9.3)))(better-sqlite3@12.6.2)(magicast@0.5.1)(valibot@1.2.0(typescript@5.9.3))':
     dependencies:
       '@nuxt/kit': 4.3.0(magicast@0.5.1)
       '@nuxtjs/mdc': 0.20.0(magicast@0.5.1)
@@ -11079,6 +11090,7 @@ snapshots:
       zod: 3.25.76
       zod-to-json-schema: 3.25.1(zod@3.25.76)
     optionalDependencies:
+      '@valibot/to-json-schema': 1.5.0(valibot@1.2.0(typescript@5.9.3))
       better-sqlite3: 12.6.2
       valibot: 1.2.0(typescript@5.9.3)
     transitivePeerDependencies:
@@ -11567,7 +11579,7 @@ snapshots:
       - magicast
       - typescript
 
-  '@nuxt/ui@4.4.0(@nuxt/content@3.11.0(better-sqlite3@12.6.2)(magicast@0.5.1)(valibot@1.2.0(typescript@5.9.3)))(@tiptap/extensions@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.29))(yjs@13.6.29))(db0@0.3.4(better-sqlite3@12.6.2))(embla-carousel@8.6.0)(ioredis@5.9.2)(magicast@0.5.1)(tailwindcss@4.1.18)(typescript@5.9.3)(valibot@1.2.0(typescript@5.9.3))(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))(yjs@13.6.29)(zod@4.3.6)':
+  '@nuxt/ui@4.4.0(@nuxt/content@3.11.0(@valibot/to-json-schema@1.5.0(valibot@1.2.0(typescript@5.9.3)))(better-sqlite3@12.6.2)(magicast@0.5.1)(valibot@1.2.0(typescript@5.9.3)))(@tiptap/extensions@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.29))(yjs@13.6.29))(db0@0.3.4(better-sqlite3@12.6.2))(embla-carousel@8.6.0)(ioredis@5.9.2)(magicast@0.5.1)(tailwindcss@4.1.18)(typescript@5.9.3)(valibot@1.2.0(typescript@5.9.3))(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))(yjs@13.6.29)(zod@4.3.6)':
     dependencies:
       '@floating-ui/dom': 1.7.5
       '@iconify/vue': 5.0.0(vue@3.5.27(typescript@5.9.3))
@@ -11636,7 +11648,7 @@ snapshots:
       vaul-vue: 0.4.1(reka-ui@2.7.0(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))
       vue-component-type-helpers: 3.2.4
     optionalDependencies:
-      '@nuxt/content': 3.11.0(better-sqlite3@12.6.2)(magicast@0.5.1)(valibot@1.2.0(typescript@5.9.3))
+      '@nuxt/content': 3.11.0(@valibot/to-json-schema@1.5.0(valibot@1.2.0(typescript@5.9.3)))(better-sqlite3@12.6.2)(magicast@0.5.1)(valibot@1.2.0(typescript@5.9.3))
       valibot: 1.2.0(typescript@5.9.3)
       vue-router: 4.6.4(vue@3.5.27(typescript@5.9.3))
       zod: 4.3.6
@@ -13452,6 +13464,10 @@ snapshots:
       webpack: 5.104.1(esbuild@0.27.2)
       webpack-sources: 3.3.3
 
+  '@valibot/to-json-schema@1.5.0(valibot@1.2.0(typescript@5.9.3))':
+    dependencies:
+      valibot: 1.2.0(typescript@5.9.3)
+
   '@vercel/nft@1.3.0(rollup@4.57.0)':
     dependencies:
       '@mapbox/node-pre-gyp': 2.0.3
@@ -14690,15 +14706,15 @@ snapshots:
 
   diff@8.0.3: {}
 
-  docus@5.4.4(29b67e4ea82958d3bb639aa676be121d):
+  docus@5.4.4(ec964c5fe48ae1161e7f2464bd5d4112):
     dependencies:
       '@iconify-json/lucide': 1.2.87
       '@iconify-json/simple-icons': 1.2.68
       '@iconify-json/vscode-icons': 1.2.40
-      '@nuxt/content': 3.11.0(better-sqlite3@12.6.2)(magicast@0.5.1)(valibot@1.2.0(typescript@5.9.3))
+      '@nuxt/content': 3.11.0(@valibot/to-json-schema@1.5.0(valibot@1.2.0(typescript@5.9.3)))(better-sqlite3@12.6.2)(magicast@0.5.1)(valibot@1.2.0(typescript@5.9.3))
       '@nuxt/image': 2.0.0(db0@0.3.4(better-sqlite3@12.6.2))(ioredis@5.9.2)(magicast@0.5.1)
       '@nuxt/kit': 4.3.0(magicast@0.5.1)
-      '@nuxt/ui': 4.4.0(@nuxt/content@3.11.0(better-sqlite3@12.6.2)(magicast@0.5.1)(valibot@1.2.0(typescript@5.9.3)))(@tiptap/extensions@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.29))(yjs@13.6.29))(db0@0.3.4(better-sqlite3@12.6.2))(embla-carousel@8.6.0)(ioredis@5.9.2)(magicast@0.5.1)(tailwindcss@4.1.18)(typescript@5.9.3)(valibot@1.2.0(typescript@5.9.3))(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))(yjs@13.6.29)(zod@4.3.6)
+      '@nuxt/ui': 4.4.0(@nuxt/content@3.11.0(@valibot/to-json-schema@1.5.0(valibot@1.2.0(typescript@5.9.3)))(better-sqlite3@12.6.2)(magicast@0.5.1)(valibot@1.2.0(typescript@5.9.3)))(@tiptap/extensions@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.29))(yjs@13.6.29))(db0@0.3.4(better-sqlite3@12.6.2))(embla-carousel@8.6.0)(ioredis@5.9.2)(magicast@0.5.1)(tailwindcss@4.1.18)(typescript@5.9.3)(valibot@1.2.0(typescript@5.9.3))(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))(yjs@13.6.29)(zod@4.3.6)
       '@nuxtjs/i18n': 10.2.1(@vue/compiler-dom@3.5.27)(db0@0.3.4(better-sqlite3@12.6.2))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(magicast@0.5.1)(rollup@4.57.0)(vue@3.5.27(typescript@5.9.3))
       '@nuxtjs/mcp-toolkit': 0.6.2(hono@4.11.7)(magicast@0.5.1)(zod@4.3.6)
       '@nuxtjs/mdc': 0.20.0(magicast@0.5.1)
diff --git a/shared/schemas/blog.ts b/shared/schemas/blog.ts
new file mode 100644
index 00000000..bfbe137d
--- /dev/null
+++ b/shared/schemas/blog.ts
@@ -0,0 +1,22 @@
+import { object, string, boolean, array, optional } from 'valibot'
+import type { InferOutput } from 'valibot'
+
+/**
+ * Schema for blog post frontmatter
+ * Uses simple Valibot primitives (required by Nuxt Content's JSON Schema conversion)
+ */
+export const BlogPostSchema = object({
+  title: string(),
+  date: string(),
+  description: string(),
+  slug: string(),
+  excerpt: optional(string()),
+  author: optional(string()),
+  tags: optional(array(string())),
+  draft: optional(boolean()),
+})
+
+/**
+ * Inferred type for blog post frontmatter
+ */
+export type BlogPostFrontmatter = InferOutput<typeof BlogPostSchema>

From 0878f1663d4f7178191b9bed8b838b5741bb0559 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Wed, 28 Jan 2026 20:07:37 -0500
Subject: [PATCH 03/16] feat: generate lexicons on postinstall & log out
 marshalling to standard site

---
 modules/standard-site-sync.ts | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 modules/standard-site-sync.ts

diff --git a/modules/standard-site-sync.ts b/modules/standard-site-sync.ts
new file mode 100644
index 00000000..48531db7
--- /dev/null
+++ b/modules/standard-site-sync.ts
@@ -0,0 +1,32 @@
+import { defineNuxtModule, useNuxt } from 'nuxt/kit'
+import * as site from '../shared/types/lexicons/site'
+
+const PUBLICATION_SITE = 'https://npmx.dev'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'standard-site-sync',
+  },
+  setup() {
+    const nuxt = useNuxt()
+    if (nuxt.options._prepare) {
+      return
+    }
+    nuxt.hook('content:file:afterParse', ctx => {
+      const { content } = ctx
+
+      // Marshal content into site.standard.document using generated $build
+      const document = site.standard.document.$build({
+        site: PUBLICATION_SITE,
+        path: content.path as string,
+        title: content.title as string,
+        description: (content.excerpt || content.description) as string | undefined,
+        tags: content.tags as string[] | undefined,
+        publishedAt: new Date(content.date as string).toISOString(),
+      })
+
+      // Mock PDS push
+      console.log('[standard-site-sync] Would push:', JSON.stringify(document, null, 2))
+    })
+  },
+})

From 9d077fde085a5947e865ea2656522c45a3b0b086 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Wed, 28 Jan 2026 20:11:00 -0500
Subject: [PATCH 04/16] fix: clean up comments

---
 modules/standard-site-sync.ts | 3 +--
 shared/schemas/blog.ts        | 4 ----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/modules/standard-site-sync.ts b/modules/standard-site-sync.ts
index 48531db7..a10c04a7 100644
--- a/modules/standard-site-sync.ts
+++ b/modules/standard-site-sync.ts
@@ -15,7 +15,6 @@ export default defineNuxtModule({
     nuxt.hook('content:file:afterParse', ctx => {
       const { content } = ctx
 
-      // Marshal content into site.standard.document using generated $build
       const document = site.standard.document.$build({
         site: PUBLICATION_SITE,
         path: content.path as string,
@@ -25,7 +24,7 @@ export default defineNuxtModule({
         publishedAt: new Date(content.date as string).toISOString(),
       })
 
-      // Mock PDS push
+      // TODO: Mock PDS push
       console.log('[standard-site-sync] Would push:', JSON.stringify(document, null, 2))
     })
   },
diff --git a/shared/schemas/blog.ts b/shared/schemas/blog.ts
index bfbe137d..dd2698eb 100644
--- a/shared/schemas/blog.ts
+++ b/shared/schemas/blog.ts
@@ -1,10 +1,6 @@
 import { object, string, boolean, array, optional } from 'valibot'
 import type { InferOutput } from 'valibot'
 
-/**
- * Schema for blog post frontmatter
- * Uses simple Valibot primitives (required by Nuxt Content's JSON Schema conversion)
- */
 export const BlogPostSchema = object({
   title: string(),
   date: string(),

From 81868e0304bad2ba15fd0511428fd747d19521e3 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Wed, 28 Jan 2026 20:27:33 -0500
Subject: [PATCH 05/16] fix: fix linting in markdown files

---
 content/blog/server-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/blog/server-components.md b/content/blog/server-components.md
index 422cd1b2..2971c61d 100644
--- a/content/blog/server-components.md
+++ b/content/blog/server-components.md
@@ -9,4 +9,4 @@ draft: false
 
 # Server components
 
-Here is some server component razzle dazzle.
+Here is some server component razzle dazzle. Hello there!

From 1b253b297a28fff29c213023ea11b211b5d3cdf1 Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.o.hurrington@gmail.com>
Date: Fri, 30 Jan 2026 02:21:05 +0100
Subject: [PATCH 06/16] feat: implemented BlogPostListCard component for the
 list page

---
 TODOs.md                            |  29 +++++++
 app/components/BlogPost.server.vue  |   1 -
 app/components/BlogPostListCard.vue |  81 ++++++++++++++++++++
 app/pages/blog/index.vue            | 114 +++++++++++++++++++++++++---
 content/blog/atproto.md             |  14 ++++
 content/blog/first-post.md          |   4 +-
 content/blog/nuxt.md                |  14 ++++
 content/blog/open-source.md         |  14 ++++
 content/blog/package-registries.md  |  14 ++++
 shared/schemas/blog.ts              |   2 +-
 shared/types/blog-post.ts           |   7 ++
 11 files changed, 282 insertions(+), 12 deletions(-)
 create mode 100644 TODOs.md
 create mode 100644 app/components/BlogPostListCard.vue
 create mode 100644 content/blog/atproto.md
 create mode 100644 content/blog/nuxt.md
 create mode 100644 content/blog/open-source.md
 create mode 100644 content/blog/package-registries.md
 create mode 100644 shared/types/blog-post.ts

diff --git a/TODOs.md b/TODOs.md
new file mode 100644
index 00000000..c3fb4876
--- /dev/null
+++ b/TODOs.md
@@ -0,0 +1,29 @@
+# TODOs
+
+<!-- TODO: A todo within the TODOs!!! This is a temporary file to track work since there are so many of us mucking about on this! REMOVE BEFORE FINALIZING THE PR!!!! -->
+
+---
+
+## Current
+
+- Blog list UI - fix posts width
+- Blog post UI
+- OAuth
+- Standard site push - Mock PDS push for now
+- anthony's alternative markdown solution for now and Nuxt content integration for later
+- automatic pulls or pushes from an action runner
+- constellation - bsky API
+- records walkers
+- bsky posts stuff - Bluesky comments
+- How does i18n deal with dynamic values? $t('blog.post.title'),
+- TBD
+
+---
+
+## Completed
+
+- [x] Lexicons
+- [x] x
+- [x] x
+
+---
diff --git a/app/components/BlogPost.server.vue b/app/components/BlogPost.server.vue
index e43b4275..5b9e9c69 100644
--- a/app/components/BlogPost.server.vue
+++ b/app/components/BlogPost.server.vue
@@ -6,7 +6,6 @@ const props = defineProps<{ title: string; htmlContent: string; date: string }>(
     <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-2">
       {{ title }}
     </h1>
-    <!-- <time class="text-sm text-gray-500 dark:text-gray-400"> -->
 
     <DateTime
       :datetime="date"
diff --git a/app/components/BlogPostListCard.vue b/app/components/BlogPostListCard.vue
new file mode 100644
index 00000000..ba352ac2
--- /dev/null
+++ b/app/components/BlogPostListCard.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+defineProps<{
+  /** First and last name - Potentially Multiple? i.e. co-authors */
+  author: string
+  /** Blog Title */
+  title: string
+  /** Tags such as OpenSource, Architecture, Community, etc. */
+  topics: string[]
+  /** Brief line from the text. */
+  excerpt: string
+  /** The datetime value (ISO string or Date) */
+  published: string
+  /** Path/Slug of the post */
+  path: string
+  /** For keyboard nav scaffold */
+  index: number
+}>()
+
+const emit = defineEmits<{
+  focus: [index: number]
+}>()
+</script>
+
+<template>
+  <!-- TODO: Width is currently being constrained -->
+  <article
+    class="group card-interactive relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
+  >
+    <NuxtLink
+      :to="`/blog/${path}`"
+      :data-suggestion-index="index"
+      class="flex items-center gap-4 focus-visible:outline-none after:content-[''] after:absolute after:inset-0"
+      @focus="index != null && emit('focus', index)"
+      @mouseenter="index != null && emit('focus', index)"
+    >
+      <!-- Avatar placeholder -->
+      <div
+        class="w-10 h-10 shrink-0 flex items-center justify-center border border-border rounded-full bg-bg-muted"
+        aria-hidden="true"
+      >
+        <span class="text-lg text-fg-subtle font-mono">
+          {{
+            author
+              .split(' ')
+              .map(n => n[0])
+              .join('')
+              .toUpperCase()
+          }}
+        </span>
+      </div>
+
+      <!-- Text Content -->
+      <div class="flex-1 min-w-0 text-left">
+        <h2
+          class="font-mono text-base font-medium text-fg group-hover:text-primary transition-colors hover:underline"
+        >
+          {{ title }}
+        </h2>
+
+        <div class="flex items-center gap-2 text-xs text-fg-muted font-mono">
+          <span>{{ author }}</span>
+          <span>•</span>
+          <span>{{ published }}</span>
+        </div>
+
+        <p v-if="excerpt" class="text-sm text-muted-foreground mt-2 line-clamp-2 no-underline">
+          {{ excerpt }}
+        </p>
+      </div>
+
+      <span
+        class="i-carbon-arrow-right w-4 h-4 text-fg-subtle group-hover:text-fg transition-colors shrink-0"
+        aria-hidden="true"
+      />
+    </NuxtLink>
+  </article>
+</template>
+<!-- :class="{
+  'bg-bg-muted border-border-hover': selected,
+  'border-accent/30 bg-accent/5': isExactMatch,
+}" -->
diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue
index e4d65b55..162b5cbc 100644
--- a/app/pages/blog/index.vue
+++ b/app/pages/blog/index.vue
@@ -3,6 +3,90 @@ const { data: posts } = await useAsyncData('blog-posts', () =>
   queryCollection('blog').where('draft', '<>', true).order('date', 'DESC').all(),
 )
 
+const placeHolder = ['atproto', 'atproto']
+
+// TODO: This should be extracted into a reusable form so search and blog post can both use it
+// function scrollToSelectedItem() {
+//   const pkgIndex = toPackageIndex(unifiedSelectedIndex.value)
+//   if (pkgIndex !== null) {
+//     packageListRef.value?.scrollToIndex(pkgIndex)
+//   }
+// }
+
+// function focusSelectedItem() {
+//   const suggIdx = toSuggestionIndex(unifiedSelectedIndex.value)
+//   const pkgIdx = toPackageIndex(unifiedSelectedIndex.value)
+
+//   nextTick(() => {
+//     if (suggIdx !== null) {
+//       const el = document.querySelector<HTMLElement>(`[data-suggestion-index="${suggIdx}"]`)
+//       el?.focus()
+//     } else if (pkgIdx !== null) {
+//       scrollToSelectedItem()
+//       nextTick(() => {
+//         const el = document.querySelector<HTMLElement>(`[data-result-index="${pkgIdx}"]`)
+//         el?.focus()
+//       })
+//     }
+//   })
+// }
+
+// function handleResultsKeydown(e: KeyboardEvent) {
+//   if (totalSelectableCount.value <= 0) return
+
+//   const isFromInput = (e.target as HTMLElement).tagName === 'INPUT'
+
+//   if (e.key === 'ArrowDown') {
+//     e.preventDefault()
+//     userHasNavigated.value = true
+//     unifiedSelectedIndex.value = clampUnifiedIndex(unifiedSelectedIndex.value + 1)
+//     if (isFromInput) {
+//       scrollToSelectedItem()
+//     } else {
+//       focusSelectedItem()
+//     }
+//     return
+//   }
+
+//   if (e.key === 'ArrowUp') {
+//     e.preventDefault()
+//     userHasNavigated.value = true
+//     unifiedSelectedIndex.value = clampUnifiedIndex(unifiedSelectedIndex.value - 1)
+//     if (isFromInput) {
+//       scrollToSelectedItem()
+//     } else {
+//       focusSelectedItem()
+//     }
+//     return
+//   }
+
+//   if (e.key === 'Enter') {
+//     if (!resultsMatchQuery.value) return
+
+//     const suggIdx = toSuggestionIndex(unifiedSelectedIndex.value)
+//     const pkgIdx = toPackageIndex(unifiedSelectedIndex.value)
+
+//     if (suggIdx !== null) {
+//       const el = document.querySelector<HTMLElement>(`[data-suggestion-index="${suggIdx}"]`)
+//       if (el) {
+//         e.preventDefault()
+//         el.click()
+//       }
+//     } else if (pkgIdx !== null) {
+//       const el = document.querySelector<HTMLElement>(`[data-result-index="${pkgIdx}"]`)
+//       if (el) {
+//         e.preventDefault()
+//         el.click()
+//       }
+//     }
+//   }
+// }
+
+// function handleBlogPostSelect(index: number) {
+//   // Convert suggestion index to unified index
+//   unifiedSelectedIndex.value = -(suggestionCount.value - index)
+// }
+
 definePageMeta({
   name: 'blog',
   // alias: ['/:path(.*)*'],
@@ -16,18 +100,30 @@ useSeoMeta({
 
 <template>
   <main class="container py-8 sm:py-12 w-full">
-    <header class="mb-8 pb-8 border-b border-border">
-      <div class="">I AM A MIGHTY HEADER</div>
+    <header class="mb-8 pb-8 border-b border-border flex place-content-center text-3xl">
+      <div class="">blog...</div>
     </header>
 
     <article class="flex flex-col gap-6">
-      <div v-for="post in posts" :key="post.slug" class="p-4 border border-border rounded-lg">
-        <h2 class="text-xl font-semibold">
-          <NuxtLink :to="`/blog/${post.slug}`" class="text-primary hover:underline">
-            {{ post.title }}
-          </NuxtLink>
-        </h2>
-        <p class="text-muted-foreground">{{ post.excerpt }}</p>
+      <div v-if="posts && posts.length > 0" class="max-w-3xl mx-auto mb-6 space-y-3">
+        <BlogPostListCard
+          v-for="(post, idx) in posts"
+          :key="`${post.author}-${post.title}`"
+          :author="post.author || 'Roe'"
+          :title="post.title"
+          :path="post.slug"
+          :excerpt="post.excerpt || post.description || 'No Excerpt Available'"
+          :topics="Array.isArray(post.tags) ? post.tags : placeHolder"
+          :published="post.date"
+          :index="idx"
+          @focus="i => console.log('Hovered:', i)"
+        />
+        <!-- :selected="toSuggestionIndex(unifiedSelectedIndex) === idx" -->
+        <!-- :is-exact-match="
+                (exactMatchType === 'org' && suggestion.type === 'org') ||
+                (exactMatchType === 'user' && suggestion.type === 'user')
+              " -->
+        <!-- @focus="handleBlogPostSelect" -->
       </div>
     </article>
   </main>
diff --git a/content/blog/atproto.md b/content/blog/atproto.md
new file mode 100644
index 00000000..ae7bf002
--- /dev/null
+++ b/content/blog/atproto.md
@@ -0,0 +1,14 @@
+---
+author: 'Daniel Roe'
+title: 'ATProto'
+tags: ['OpenSource', 'Nuxt']
+excerpt: 'ATProto is very cool'
+date: '2026-01-28'
+slug: 'atproto'
+description: 'ATProto Adjacency Agenda'
+draft: false
+---
+
+# Atmosphere Apps
+
+All the cool kids are doing Software Decentralization.
diff --git a/content/blog/first-post.md b/content/blog/first-post.md
index f65c97fc..48e7e868 100644
--- a/content/blog/first-post.md
+++ b/content/blog/first-post.md
@@ -1,9 +1,11 @@
 ---
+author: 'Daniel Roe'
 title: 'Hello World'
+tags: ['OpenSource', 'Nuxt']
+excerpt: 'My first post'
 date: '2026-01-28'
 slug: 'first-post'
 description: 'My first post on the blog'
-excerpt: 'My first post'
 draft: false
 ---
 
diff --git a/content/blog/nuxt.md b/content/blog/nuxt.md
new file mode 100644
index 00000000..e3502b59
--- /dev/null
+++ b/content/blog/nuxt.md
@@ -0,0 +1,14 @@
+---
+author: 'Daniel Roe'
+title: 'Nuxted'
+tags: ['OpenSource', 'Nuxt']
+excerpt: 'Nuxting'
+date: '2026-01-28'
+slug: 'nuxt'
+description: 'Nuxter'
+draft: false
+---
+
+# Nuxt
+
+What a great meta-framework!!
diff --git a/content/blog/open-source.md b/content/blog/open-source.md
new file mode 100644
index 00000000..68f174d8
--- /dev/null
+++ b/content/blog/open-source.md
@@ -0,0 +1,14 @@
+---
+author: 'Daniel Roe'
+title: 'OSS'
+tags: ['OpenSource', 'Nuxt']
+excerpt: 'OSS Things'
+date: '2026-01-28'
+slug: 'open-source'
+description: 'Talking about Open Source Software'
+draft: false
+---
+
+# OSS
+
+This is about Open Source Software.
diff --git a/content/blog/package-registries.md b/content/blog/package-registries.md
new file mode 100644
index 00000000..30951179
--- /dev/null
+++ b/content/blog/package-registries.md
@@ -0,0 +1,14 @@
+---
+author: 'Daniel Roe'
+title: 'Package Registries'
+tags: ['OpenSource', 'Nuxt']
+excerpt: 'Package Registries need fixing'
+date: '2026-01-28'
+slug: 'package-registries'
+description: 'Package Registries Reimagined'
+draft: false
+---
+
+# Package Registries
+
+Shortest explanation: Production grade JavaScript is weird.
diff --git a/shared/schemas/blog.ts b/shared/schemas/blog.ts
index dd2698eb..56f1738c 100644
--- a/shared/schemas/blog.ts
+++ b/shared/schemas/blog.ts
@@ -2,12 +2,12 @@ import { object, string, boolean, array, optional } from 'valibot'
 import type { InferOutput } from 'valibot'
 
 export const BlogPostSchema = object({
+  author: string(),
   title: string(),
   date: string(),
   description: string(),
   slug: string(),
   excerpt: optional(string()),
-  author: optional(string()),
   tags: optional(array(string())),
   draft: optional(boolean()),
 })
diff --git a/shared/types/blog-post.ts b/shared/types/blog-post.ts
new file mode 100644
index 00000000..55289c4d
--- /dev/null
+++ b/shared/types/blog-post.ts
@@ -0,0 +1,7 @@
+export interface BlogPost {
+  author: string // Potentially Multiple?
+  title: string
+  topics: string[]
+  content: string // MarkDown File
+  published: string // DateTime
+}

From 6ec856850c2e10542d32720f620ad241a6c49d99 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Fri, 30 Jan 2026 00:07:29 -0500
Subject: [PATCH 07/16] feat: add unocss typography plugin for prose styling

---
 TODOs.md                   |   4 +-
 app/pages/blog/[slug].vue  |   2 +-
 content/blog/first-post.md | 304 ++++++++++++++++++++++++++++++++++++-
 uno.config.ts              |   2 +
 4 files changed, 307 insertions(+), 5 deletions(-)

diff --git a/TODOs.md b/TODOs.md
index c3fb4876..9a7a803b 100644
--- a/TODOs.md
+++ b/TODOs.md
@@ -7,7 +7,7 @@
 ## Current
 
 - Blog list UI - fix posts width
-- Blog post UI
+- Blog post UI - (Started - needs more polish)
 - OAuth
 - Standard site push - Mock PDS push for now
 - anthony's alternative markdown solution for now and Nuxt content integration for later
@@ -23,7 +23,7 @@
 ## Completed
 
 - [x] Lexicons
-- [x] x
+- [x] Prose-styling using unocss typography
 - [x] x
 
 ---
diff --git a/app/pages/blog/[slug].vue b/app/pages/blog/[slug].vue
index e4738b54..01a02d0e 100644
--- a/app/pages/blog/[slug].vue
+++ b/app/pages/blog/[slug].vue
@@ -22,7 +22,7 @@ useSeoMeta({
       <div class="">I AM A WEAK HEADER</div>
     </header>
 
-    <article v-if="post">
+    <article v-if="post" class="mx-auto text-base prose dark:prose-invert text-lg">
       <ContentRenderer v-if="post" :value="post" />
     </article>
 
diff --git a/content/blog/first-post.md b/content/blog/first-post.md
index 48e7e868..8b5ca548 100644
--- a/content/blog/first-post.md
+++ b/content/blog/first-post.md
@@ -9,6 +9,306 @@ description: 'My first post on the blog'
 draft: false
 ---
 
-# My First Page
+# Markdown: Syntax
 
-Here is some content.
+- [Overview](#overview)
+  - [Philosophy](#philosophy)
+- [Block Elements](#block-elements)
+  - [Paragraphs and Line Breaks](#paragraphs-and-line-breaks)
+  - [Headers](#headers)
+  - [Blockquotes](#blockquotes)
+  - [Lists](#lists)
+  - [Code Blocks](#code-blocks)
+- [Span Elements](#span-elements)
+  - [Links](#links)
+  - [Emphasis](#emphasis)
+  - [Code](#code)
+
+**Note:** This document is itself written using Markdown; you
+can [see the source for it by adding '.text' to the URL](/projects/markdown/syntax.text).
+
+---
+
+## Overview
+
+### Philosophy
+
+Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
+
+Readability, however, is emphasized above all else. A Markdown-formatted
+document should be publishable as-is, as plain text, without looking
+like it's been marked up with tags or formatting instructions. While
+Markdown's syntax has been influenced by several existing text-to-HTML
+filters -- including [Setext](http://docutils.sourceforge.net/mirror/setext.html), [atx](http://www.aaronsw.com/2002/atx/), [Textile](http://textism.com/tools/textile/), [reStructuredText](http://docutils.sourceforge.net/rst.html),
+[Grutatext](http://www.triptico.com/software/grutatxt.html), and [EtText](http://ettext.taint.org/doc/) -- the single biggest source of
+inspiration for Markdown's syntax is the format of plain text email.
+
+## Block Elements
+
+### Paragraphs and Line Breaks
+
+A paragraph is simply one or more consecutive lines of text, separated
+by one or more blank lines. (A blank line is any line that looks like a
+blank line -- a line containing nothing but spaces or tabs is considered
+blank.) Normal paragraphs should not be indented with spaces or tabs.
+
+The implication of the "one or more consecutive lines of text" rule is
+that Markdown supports "hard-wrapped" text paragraphs. This differs
+significantly from most other text-to-HTML formatters (including Movable
+Type's "Convert Line Breaks" option) which translate every line break
+character in a paragraph into a `<br />` tag.
+
+When you _do_ want to insert a `<br />` break tag using Markdown, you
+end a line with two or more spaces, then type return.
+
+### Headers
+
+Markdown supports two styles of headers, [Setext] [1] and [atx] [2].
+
+Optionally, you may "close" atx-style headers. This is purely
+cosmetic -- you can use this if you think it looks better. The
+closing hashes don't even need to match the number of hashes
+used to open the header. (The number of opening hashes
+determines the header level.)
+
+### Blockquotes
+
+Markdown uses email-style `>` characters for blockquoting. If you're
+familiar with quoting passages of text in an email message, then you
+know how to create a blockquote in Markdown. It looks best if you hard
+wrap the text and put a `>` before every line:
+
+> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
+> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
+> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
+>
+> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
+> id sem consectetuer libero luctus adipiscing.
+
+Markdown allows you to be lazy and only put the `>` before the first
+line of a hard-wrapped paragraph:
+
+> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
+> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
+> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
+
+> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
+> id sem consectetuer libero luctus adipiscing.
+
+Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by
+adding additional levels of `>`:
+
+> This is the first level of quoting.
+>
+> > This is nested blockquote.
+>
+> Back to the first level.
+
+Blockquotes can contain other Markdown elements, including headers, lists,
+and code blocks:
+
+> ## This is a header.
+>
+> 1.  This is the first list item.
+> 2.  This is the second list item.
+>
+> Here's some example code:
+>
+>     return shell_exec("echo $input | $markdown_script");
+
+Any decent text editor should make email-style quoting easy. For
+example, with BBEdit, you can make a selection and choose Increase
+Quote Level from the Text menu.
+
+### Lists
+
+Markdown supports ordered (numbered) and unordered (bulleted) lists.
+
+Unordered lists use asterisks, pluses, and hyphens -- interchangably
+-- as list markers:
+
+- Red
+- Green
+- Blue
+
+is equivalent to:
+
+- Red
+- Green
+- Blue
+
+and:
+
+- Red
+- Green
+- Blue
+
+Ordered lists use numbers followed by periods:
+
+1.  Bird
+2.  McHale
+3.  Parish
+
+It's important to note that the actual numbers you use to mark the
+list have no effect on the HTML output Markdown produces. The HTML
+Markdown produces from the above list is:
+
+If you instead wrote the list in Markdown like this:
+
+1.  Bird
+1.  McHale
+1.  Parish
+
+or even:
+
+3. Bird
+1. McHale
+1. Parish
+
+you'd get the exact same HTML output. The point is, if you want to,
+you can use ordinal numbers in your ordered Markdown lists, so that
+the numbers in your source match the numbers in your published HTML.
+But if you want to be lazy, you don't have to.
+
+To make lists look nice, you can wrap items with hanging indents:
+
+- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+  Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
+  viverra nec, fringilla in, laoreet vitae, risus.
+- Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
+  Suspendisse id sem consectetuer libero luctus adipiscing.
+
+But if you want to be lazy, you don't have to:
+
+- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+  Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
+  viverra nec, fringilla in, laoreet vitae, risus.
+- Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
+  Suspendisse id sem consectetuer libero luctus adipiscing.
+
+List items may consist of multiple paragraphs. Each subsequent
+paragraph in a list item must be indented by either 4 spaces
+or one tab:
+
+1.  This is a list item with two paragraphs. Lorem ipsum dolor
+    sit amet, consectetuer adipiscing elit. Aliquam hendrerit
+    mi posuere lectus.
+
+    Vestibulum enim wisi, viverra nec, fringilla in, laoreet
+    vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
+    sit amet velit.
+
+2.  Suspendisse id sem consectetuer libero luctus adipiscing.
+
+It looks nice if you indent every line of the subsequent
+paragraphs, but here again, Markdown will allow you to be
+lazy:
+
+- This is a list item with two paragraphs.
+
+      This is the second paragraph in the list item. You're
+
+  only required to indent the first line. Lorem ipsum dolor
+  sit amet, consectetuer adipiscing elit.
+
+- Another item in the same list.
+
+To put a blockquote within a list item, the blockquote's `>`
+delimiters need to be indented:
+
+- A list item with a blockquote:
+
+  > This is a blockquote
+  > inside a list item.
+
+To put a code block within a list item, the code block needs
+to be indented _twice_ -- 8 spaces or two tabs:
+
+- A list item with a code block:
+
+      <code goes here>
+
+### Code Blocks
+
+Pre-formatted code blocks are used for writing about programming or
+markup source code. Rather than forming normal paragraphs, the lines
+of a code block are interpreted literally. Markdown wraps a code block
+in both `<pre>` and `<code>` tags.
+
+To produce a code block in Markdown, simply indent every line of the
+block by at least 4 spaces or 1 tab.
+
+This is a normal paragraph:
+
+    This is a code block.
+
+Here is an example of AppleScript:
+
+    tell application "Foo"
+        beep
+    end tell
+
+A code block continues until it reaches a line that is not indented
+(or the end of the article).
+
+Within a code block, ampersands (`&`) and angle brackets (`<` and `>`)
+are automatically converted into HTML entities. This makes it very
+easy to include example HTML source code using Markdown -- just paste
+it and indent it, and Markdown will handle the hassle of encoding the
+ampersands and angle brackets. For example, this:
+
+    <div class="footer">
+        &copy; 2004 Foo Corporation
+    </div>
+
+Regular Markdown syntax is not processed within code blocks. E.g.,
+asterisks are just literal asterisks within a code block. This means
+it's also easy to use Markdown to write about Markdown's own syntax.
+
+```
+tell application "Foo"
+    beep
+end tell
+```
+
+## Span Elements
+
+### Links
+
+Markdown supports two style of links: _inline_ and _reference_.
+
+In both styles, the link text is delimited by [square brackets].
+
+To create an inline link, use a set of regular parentheses immediately
+after the link text's closing square bracket. Inside the parentheses,
+put the URL where you want the link to point, along with an _optional_
+title for the link, surrounded in quotes. For example:
+
+This is [an example](http://example.com/) inline link.
+
+[This link](http://example.net/) has no title attribute.
+
+### Emphasis
+
+Markdown treats asterisks (`*`) and underscores (`_`) as indicators of
+emphasis. Text wrapped with one `*` or `_` will be wrapped with an
+HTML `<em>` tag; double `*`'s or `_`'s will be wrapped with an HTML
+`<strong>` tag. E.g., this input:
+
+_single asterisks_
+
+_single underscores_
+
+**double asterisks**
+
+**double underscores**
+
+### Code
+
+To indicate a span of code, wrap it with backtick quotes (`` ` ``).
+Unlike a pre-formatted code block, a code span indicates code within a
+normal paragraph. For example:
+
+Use the `printf()` function.
+
+![bagel image](https://plus.unsplash.com/premium_photo-1769376812336-847642b315a2?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
diff --git a/uno.config.ts b/uno.config.ts
index 036dceb7..7586b1f5 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -1,6 +1,7 @@
 import {
   defineConfig,
   presetIcons,
+  presetTypography,
   presetWind4,
   transformerDirectives,
   transformerVariantGroup,
@@ -23,6 +24,7 @@ export default defineConfig({
         custom: customIcons,
       },
     }),
+    presetTypography(),
   ],
   transformers: [transformerDirectives(), transformerVariantGroup()],
   theme: {

From 79e933e6b1048fe151bfaa4895b794e298ca620b Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Fri, 30 Jan 2026 00:10:13 -0500
Subject: [PATCH 08/16] fix: remove uneeded h1 style

---
 app/pages/blog/[slug].vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/app/pages/blog/[slug].vue b/app/pages/blog/[slug].vue
index 01a02d0e..595bdbdc 100644
--- a/app/pages/blog/[slug].vue
+++ b/app/pages/blog/[slug].vue
@@ -32,10 +32,3 @@ useSeoMeta({
     </article>
   </main>
 </template>
-
-<!-- TODO: styles -->
-<style>
-h1 {
-  @apply text-4xl font-bold text-gray-900 dark:text-white mb-2;
-}
-</style>

From 012472e9d77a9322781565efca7a454b20e48e17 Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.o.hurrington@gmail.com>
Date: Fri, 30 Jan 2026 13:53:29 +0100
Subject: [PATCH 09/16] chore: Updated TODOs and added Docs page

---
 TODOs.md                                      | 18 +++++++++++---
 .../4. atmosphere-apps/.navigation.yml        |  2 ++
 .../1.atprotocol-architecture.md              | 24 +++++++++++++++++++
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 docs/content/4. atmosphere-apps/.navigation.yml
 create mode 100644 docs/content/4. atmosphere-apps/1.atprotocol-architecture.md

diff --git a/TODOs.md b/TODOs.md
index 9a7a803b..1b1d8391 100644
--- a/TODOs.md
+++ b/TODOs.md
@@ -4,23 +4,35 @@
 
 ---
 
-## Current
+## In Flight
 
 - Blog list UI - fix posts width
 - Blog post UI - (Started - needs more polish)
 - OAuth
 - Standard site push - Mock PDS push for now
 - anthony's alternative markdown solution for now and Nuxt content integration for later
-- automatic pulls or pushes from an action runner
 - constellation - bsky API
+- Docs Run them locally with `pnpm dev:docs`.
+
+---
+
+## On Deck
+
+- automatic pulls or pushes from an action runner
 - records walkers
 - bsky posts stuff - Bluesky comments
 - How does i18n deal with dynamic values? $t('blog.post.title'),
+- blog publishing for https://bsky.app/profile/npmx.dev - cli/actions pipeline
+- site.standard.publication lexicon - decales it's a blog on atproto can be manual setup
+- site.standard.document - publishes everytime there's a new blog entry.
+  - Proposed: the pipeline takes login pds, handle, and app_password as secrets. Checks to see if one has already been published for that blog post. If so does not push it. If it hasn't then it creates the atproto record when deploying/building by logging in. check if an article has been created by parsing the createdate of the blog post to a TID, do a getRecord. if it's there dont publish the new one. If it isnt send it up. I wrote about tid concept here
+    https://marvins-guide.leaflet.pub/3mckm76mfws2h
+  - Proposed: nuxt module with a build hook. e.g. in standard-site-sync.ts we use a hook that triggers after the file is parsed and create the site.standard.document or not if it already exists.
 - TBD
 
 ---
 
-## Completed
+## Landed
 
 - [x] Lexicons
 - [x] Prose-styling using unocss typography
diff --git a/docs/content/4. atmosphere-apps/.navigation.yml b/docs/content/4. atmosphere-apps/.navigation.yml
new file mode 100644
index 00000000..474fd58b
--- /dev/null
+++ b/docs/content/4. atmosphere-apps/.navigation.yml	
@@ -0,0 +1,2 @@
+title: Atmosphere Apps
+icon: i-lucide-cloudy
diff --git a/docs/content/4. atmosphere-apps/1.atprotocol-architecture.md b/docs/content/4. atmosphere-apps/1.atprotocol-architecture.md
new file mode 100644
index 00000000..41c0d39e
--- /dev/null
+++ b/docs/content/4. atmosphere-apps/1.atprotocol-architecture.md	
@@ -0,0 +1,24 @@
+---
+title: ATProtocol Architecture
+description: How npmx.dev exists in the Atmosphere
+navigation:
+  icon: i-lucide-construction
+---
+
+<!-- TODO: This is just the beginning file so we can start collecting the details as we go.Please feel free to update and revise as you see fit. Run them locally with `pnpm dev:docs`. -->
+
+## Overview
+
+_npmx.dev_ site architecture as it pertains to the ATProtocol ecosystem, the [Atmosphere](https://atproto.com/).
+
+---
+
+## Components
+
+These are the components that allow for _npmx.dev_ to exist as an app on the Atmosphere:
+
+1. **Domain** - _npmx.dev_ site
+2. **OAuth** - Required for interacting with the Atmosphere
+3. **Constellation** - Atmosphere API
+
+---

From c1b4ffc07e4f2c2f5ca4bac3aab90988897c3792 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Fri, 30 Jan 2026 08:54:46 -0500
Subject: [PATCH 10/16] fix: can't find lexicon types when running pnpm install

I think nuxt prepare will try to compile standard-site-sync and since the
lexicon types don't exist yet it will fail. We should generate the types
first, and then run prepare.
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 34b39b2e..72a9c7fc 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "generate": "nuxt generate",
     "npmx-connector": "pnpm --filter npmx-connector dev",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare && simple-git-hooks && pnpm generate:lexicons",
+    "postinstall": "pnpm generate:lexicons && nuxt prepare && simple-git-hooks",
     "generate:lexicons": "lex build --lexicons lexicons --out shared/types/lexicons --clear",
     "test": "vite test",
     "test:browser": "playwright test",

From 6fc3a8f5a938121c2be74879587f8d504580d697 Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.o.hurrington@gmail.com>
Date: Fri, 30 Jan 2026 14:58:42 +0100
Subject: [PATCH 11/16] fix: resolved styling issues

---
 app/components/BlogPostListCard.vue |  1 -
 app/pages/blog/[slug].vue           |  7 ++-
 app/pages/blog/index.vue            | 96 ++++++++++++++---------------
 3 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/app/components/BlogPostListCard.vue b/app/components/BlogPostListCard.vue
index ba352ac2..49c4d595 100644
--- a/app/components/BlogPostListCard.vue
+++ b/app/components/BlogPostListCard.vue
@@ -22,7 +22,6 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <!-- TODO: Width is currently being constrained -->
   <article
     class="group card-interactive relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50"
   >
diff --git a/app/pages/blog/[slug].vue b/app/pages/blog/[slug].vue
index 595bdbdc..9c49d499 100644
--- a/app/pages/blog/[slug].vue
+++ b/app/pages/blog/[slug].vue
@@ -19,7 +19,12 @@ useSeoMeta({
   <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>
+      <h2
+        v-if="post"
+        class="font-mono text-base font-medium text-fg group-hover:text-primary transition-colors hover:underline"
+      >
+        {{ post.title }}
+      </h2>
     </header>
 
     <article v-if="post" class="mx-auto text-base prose dark:prose-invert text-lg">
diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue
index 162b5cbc..a2c951da 100644
--- a/app/pages/blog/index.vue
+++ b/app/pages/blog/index.vue
@@ -3,8 +3,52 @@ const { data: posts } = await useAsyncData('blog-posts', () =>
   queryCollection('blog').where('draft', '<>', true).order('date', 'DESC').all(),
 )
 
-const placeHolder = ['atproto', 'atproto']
+const placeHolder = ['atproto', 'nuxt']
 
+definePageMeta({
+  name: 'blog',
+  // alias: ['/:path(.*)*'],
+})
+
+useSeoMeta({
+  title: () => $t('blog.title'),
+  description: () => $t('blog.description'),
+})
+</script>
+
+<template>
+  <main class="container py-8 sm:py-12 w-full">
+    <header class="mb-8 pb-8 border-b border-border flex place-content-center text-3xl">
+      <div class="">blog...</div>
+    </header>
+
+    <article v-if="posts && posts.length > 0" class="mx-30 space-y-4">
+      <BlogPostListCard
+        v-for="(post, idx) in posts"
+        :key="`${post.author}-${post.title}`"
+        :author="post.author || 'Roe'"
+        :title="post.title"
+        :path="post.slug"
+        :excerpt="post.excerpt || post.description || 'No Excerpt Available'"
+        :topics="Array.isArray(post.tags) ? post.tags : placeHolder"
+        :published="post.date"
+        :index="idx"
+        @focus="i => console.log('Hovered:', i)"
+      />
+      <!-- :selected="toSuggestionIndex(unifiedSelectedIndex) === idx" -->
+      <!-- :is-exact-match="
+                (exactMatchType === 'org' && suggestion.type === 'org') ||
+                (exactMatchType === 'user' && suggestion.type === 'user')
+              " -->
+      <!-- @focus="handleBlogPostSelect" -->
+      <!-- </div> -->
+    </article>
+
+    <article v-else class="text-center py-20 text-fg-subtle">No posts found.</article>
+  </main>
+</template>
+
+<!--
 // TODO: This should be extracted into a reusable form so search and blog post can both use it
 // function scrollToSelectedItem() {
 //   const pkgIndex = toPackageIndex(unifiedSelectedIndex.value)
@@ -85,52 +129,4 @@ const placeHolder = ['atproto', 'atproto']
 // function handleBlogPostSelect(index: number) {
 //   // Convert suggestion index to unified index
 //   unifiedSelectedIndex.value = -(suggestionCount.value - index)
-// }
-
-definePageMeta({
-  name: 'blog',
-  // alias: ['/:path(.*)*'],
-})
-
-useSeoMeta({
-  title: () => $t('blog.title'),
-  description: () => $t('blog.description'),
-})
-</script>
-
-<template>
-  <main class="container py-8 sm:py-12 w-full">
-    <header class="mb-8 pb-8 border-b border-border flex place-content-center text-3xl">
-      <div class="">blog...</div>
-    </header>
-
-    <article class="flex flex-col gap-6">
-      <div v-if="posts && posts.length > 0" class="max-w-3xl mx-auto mb-6 space-y-3">
-        <BlogPostListCard
-          v-for="(post, idx) in posts"
-          :key="`${post.author}-${post.title}`"
-          :author="post.author || 'Roe'"
-          :title="post.title"
-          :path="post.slug"
-          :excerpt="post.excerpt || post.description || 'No Excerpt Available'"
-          :topics="Array.isArray(post.tags) ? post.tags : placeHolder"
-          :published="post.date"
-          :index="idx"
-          @focus="i => console.log('Hovered:', i)"
-        />
-        <!-- :selected="toSuggestionIndex(unifiedSelectedIndex) === idx" -->
-        <!-- :is-exact-match="
-                (exactMatchType === 'org' && suggestion.type === 'org') ||
-                (exactMatchType === 'user' && suggestion.type === 'user')
-              " -->
-        <!-- @focus="handleBlogPostSelect" -->
-      </div>
-    </article>
-  </main>
-</template>
-
-<style>
-.container {
-  background: var(--bg-red);
-}
-</style>
+// } -->

From 7e87ee17d83d8e4e1afe76d0d7cfe757fd35f280 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Fri, 30 Jan 2026 11:09:53 -0500
Subject: [PATCH 12/16] feat: switch from nuxt/content to unplug-vue-markdown

---
 app/components/BlogPostWrapper.vue            |  22 +++
 app/pages/blog/[slug].vue                     |  39 -----
 {content => app/pages}/blog/atproto.md        |   0
 {content => app/pages}/blog/first-post.md     |   0
 app/pages/blog/index.vue                      |  16 +-
 {content => app/pages}/blog/nuxt.md           |   0
 {content => app/pages}/blog/open-source.md    |   0
 .../pages}/blog/package-registries.md         |   0
 .../pages}/blog/server-components.md          |   1 +
 app/plugins/blog-wrapper.ts                   |   5 +
 content.config.ts                             |  12 --
 nuxt.config.ts                                |  23 ++-
 package.json                                  |  11 +-
 pnpm-lock.yaml                                | 151 +++++++++++++++++-
 shared/schemas/blog.ts                        |  24 +--
 15 files changed, 225 insertions(+), 79 deletions(-)
 create mode 100644 app/components/BlogPostWrapper.vue
 delete mode 100644 app/pages/blog/[slug].vue
 rename {content => app/pages}/blog/atproto.md (100%)
 rename {content => app/pages}/blog/first-post.md (100%)
 rename {content => app/pages}/blog/nuxt.md (100%)
 rename {content => app/pages}/blog/open-source.md (100%)
 rename {content => app/pages}/blog/package-registries.md (100%)
 rename {content => app/pages}/blog/server-components.md (91%)
 create mode 100644 app/plugins/blog-wrapper.ts
 delete mode 100644 content.config.ts

diff --git a/app/components/BlogPostWrapper.vue b/app/components/BlogPostWrapper.vue
new file mode 100644
index 00000000..1ae4a57b
--- /dev/null
+++ b/app/components/BlogPostWrapper.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { BlogPostFrontmatter } from '#shared/schemas/blog'
+
+const props = defineProps<{
+  frontmatter?: BlogPostFrontmatter
+}>()
+
+useSeoMeta({
+  title: props.frontmatter?.title,
+  description: props.frontmatter?.description || props.frontmatter?.excerpt,
+  ogTitle: props.frontmatter?.title,
+  ogDescription: props.frontmatter?.description || props.frontmatter?.excerpt,
+  ogType: 'article',
+})
+</script>
+<template>
+  <main class="container w-full">
+    <article class="prose dark:prose-invert mx-auto">
+      <slot />
+    </article>
+  </main>
+</template>
diff --git a/app/pages/blog/[slug].vue b/app/pages/blog/[slug].vue
deleted file mode 100644
index 9c49d499..00000000
--- a/app/pages/blog/[slug].vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<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">
-      <h2
-        v-if="post"
-        class="font-mono text-base font-medium text-fg group-hover:text-primary transition-colors hover:underline"
-      >
-        {{ post.title }}
-      </h2>
-    </header>
-
-    <article v-if="post" class="mx-auto text-base prose dark:prose-invert text-lg">
-      <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>
diff --git a/content/blog/atproto.md b/app/pages/blog/atproto.md
similarity index 100%
rename from content/blog/atproto.md
rename to app/pages/blog/atproto.md
diff --git a/content/blog/first-post.md b/app/pages/blog/first-post.md
similarity index 100%
rename from content/blog/first-post.md
rename to app/pages/blog/first-post.md
diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue
index a2c951da..1abace29 100644
--- a/app/pages/blog/index.vue
+++ b/app/pages/blog/index.vue
@@ -1,7 +1,17 @@
 <script setup lang="ts">
-const { data: posts } = await useAsyncData('blog-posts', () =>
-  queryCollection('blog').where('draft', '<>', true).order('date', 'DESC').all(),
-)
+import type { BlogPostFrontmatter } from '#shared/schemas/blog'
+
+const blogModules = import.meta.glob<BlogPostFrontmatter>('./*.md', { eager: true })
+
+const posts: BlogPostFrontmatter[] = []
+
+for (const [path, module] of Object.entries(blogModules)) {
+  if (module.draft) continue
+
+  posts.push({ ...module })
+}
+
+posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
 
 const placeHolder = ['atproto', 'nuxt']
 
diff --git a/content/blog/nuxt.md b/app/pages/blog/nuxt.md
similarity index 100%
rename from content/blog/nuxt.md
rename to app/pages/blog/nuxt.md
diff --git a/content/blog/open-source.md b/app/pages/blog/open-source.md
similarity index 100%
rename from content/blog/open-source.md
rename to app/pages/blog/open-source.md
diff --git a/content/blog/package-registries.md b/app/pages/blog/package-registries.md
similarity index 100%
rename from content/blog/package-registries.md
rename to app/pages/blog/package-registries.md
diff --git a/content/blog/server-components.md b/app/pages/blog/server-components.md
similarity index 91%
rename from content/blog/server-components.md
rename to app/pages/blog/server-components.md
index 2971c61d..42735217 100644
--- a/content/blog/server-components.md
+++ b/app/pages/blog/server-components.md
@@ -1,4 +1,5 @@
 ---
+author: 'Daniel Roe'
 title: 'Server Components'
 date: '2026-01-28'
 slug: 'server-components'
diff --git a/app/plugins/blog-wrapper.ts b/app/plugins/blog-wrapper.ts
new file mode 100644
index 00000000..fff0ff57
--- /dev/null
+++ b/app/plugins/blog-wrapper.ts
@@ -0,0 +1,5 @@
+import BlogPostWrapper from '~/components/BlogPostWrapper.vue'
+
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.vueApp.component('BlogPostWrapper', BlogPostWrapper)
+})
diff --git a/content.config.ts b/content.config.ts
deleted file mode 100644
index 41baba0e..00000000
--- a/content.config.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-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,
-    }),
-  },
-})
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 32474532..8e75bafa 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,6 +1,8 @@
 import { currentLocales } from './config/i18n'
+import Markdown from 'unplugin-vue-markdown/vite'
 
 export default defineNuxtConfig({
+  extensions: ['.md'],
   modules: [
     function (_, nuxt) {
       if (nuxt.options._prepare) {
@@ -34,7 +36,6 @@ export default defineNuxtConfig({
     '@vueuse/nuxt',
     '@nuxtjs/i18n',
     '@nuxtjs/color-mode',
-    '@nuxt/content',
   ],
 
   colorMode: {
@@ -178,6 +179,26 @@ export default defineNuxtConfig({
   },
 
   vite: {
+    vue: {
+      include: [/\.vue($|\?)/, /\.(md|markdown)($|\?)/],
+    },
+    plugins: [
+      Markdown({
+        include: [/\.(md|markdown)($|\?)/],
+        wrapperComponent: 'BlogPostWrapper',
+        async markdownItSetup(md) {
+          const shiki = await import('@shikijs/markdown-it')
+          md.use(
+            await shiki.default({
+              themes: {
+                dark: 'github-dark',
+                light: 'github-light',
+              },
+            }),
+          )
+        },
+      }),
+    ],
     optimizeDeps: {
       include: [
         '@vueuse/core',
diff --git a/package.json b/package.json
index 72a9c7fc..d73cd1bb 100644
--- a/package.json
+++ b/package.json
@@ -40,11 +40,10 @@
     "@intlify/shared": "11.2.8",
     "@lunariajs/core": "https://pkg.pr.new/lunariajs/lunaria/@lunariajs/core@f07e1a3",
     "@nuxt/a11y": "1.0.0-alpha.1",
-    "@nuxt/fonts": "0.13.0",
-    "@nuxt/scripts": "0.13.2",
-    "@nuxtjs/color-mode": "4.0.0",
-    "@nuxtjs/html-validator": "2.1.0",
-    "@nuxt/content": "3.11.0",
+    "@nuxt/fonts": "^0.13.0",
+    "@nuxt/scripts": "^0.13.2",
+    "@nuxtjs/color-mode": "^4.0.0",
+    "@nuxtjs/html-validator": "^2.1.0",
     "@nuxtjs/i18n": "10.2.1",
     "@shikijs/langs": "3.21.0",
     "@shikijs/themes": "3.21.0",
@@ -73,6 +72,7 @@
     "@npm/types": "2.1.0",
     "@nuxt/test-utils": "https://pkg.pr.new/@nuxt/test-utils@1499a48",
     "@playwright/test": "1.58.0",
+    "@shikijs/markdown-it": "^3.21.0",
     "@types/sanitize-html": "2.16.0",
     "@types/semver": "7.7.1",
     "@types/validate-npm-package-name": "4.0.2",
@@ -96,6 +96,7 @@
     "std-env": "3.10.0",
     "typescript": "5.9.3",
     "unocss": "66.6.0",
+    "unplugin-vue-markdown": "^29.2.0",
     "unplugin-vue-router": "0.19.2",
     "vite-plus": "0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab",
     "vitest": "npm:@voidzero-dev/vite-plus-test@0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d5ae2f76..88d42786 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,20 +44,17 @@ importers:
       '@nuxt/a11y':
         specifier: 1.0.0-alpha.1
         version: 1.0.0-alpha.1(magicast@0.5.1)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))
-      '@nuxt/content':
-        specifier: 3.11.0
-        version: 3.11.0(@valibot/to-json-schema@1.5.0(valibot@1.2.0(typescript@5.9.3)))(better-sqlite3@12.6.2)(magicast@0.5.1)(valibot@1.2.0(typescript@5.9.3))
       '@nuxt/fonts':
-        specifier: 0.13.0
+        specifier: ^0.13.0
         version: 0.13.0(db0@0.3.4(better-sqlite3@12.6.2))(ioredis@5.9.2)(magicast@0.5.1)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))
       '@nuxt/scripts':
-        specifier: 0.13.2
+        specifier: ^0.13.2
         version: 0.13.2(@unhead/vue@2.1.2(vue@3.5.27(typescript@5.9.3)))(db0@0.3.4(better-sqlite3@12.6.2))(ioredis@5.9.2)(magicast@0.5.1)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
       '@nuxtjs/color-mode':
-        specifier: 4.0.0
+        specifier: ^4.0.0
         version: 4.0.0(magicast@0.5.1)
       '@nuxtjs/html-validator':
-        specifier: 2.1.0
+        specifier: ^2.1.0
         version: 2.1.0(@voidzero-dev/vite-plus-test@0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab(@types/node@24.10.9)(esbuild@0.27.2)(happy-dom@20.4.0)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(magicast@0.5.1)
       '@nuxtjs/i18n':
         specifier: 10.2.1
@@ -138,6 +135,9 @@ importers:
       '@playwright/test':
         specifier: 1.58.0
         version: 1.58.0
+      '@shikijs/markdown-it':
+        specifier: ^3.21.0
+        version: 3.21.0(markdown-it-async@2.2.0)
       '@types/sanitize-html':
         specifier: 2.16.0
         version: 2.16.0
@@ -207,6 +207,9 @@ importers:
       unocss:
         specifier: 66.6.0
         version: 66.6.0(@unocss/webpack@66.6.0(webpack@5.104.1(esbuild@0.27.2)))(postcss@8.5.6)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))
+      unplugin-vue-markdown:
+        specifier: ^29.2.0
+        version: 29.2.0(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))
       unplugin-vue-router:
         specifier: 0.19.2
         version: 0.19.2(@vue/compiler-sfc@3.5.27)(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))
@@ -1716,6 +1719,18 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@mdit-vue/plugin-component@3.0.2':
+    resolution: {integrity: sha512-Fu53MajrZMOAjOIPGMTdTXgHLgGU9KwTqKtYc6WNYtFZNKw04euSfJ/zFg8eBY/2MlciVngkF7Gyc2IL7e8Bsw==}
+    engines: {node: '>=20.0.0'}
+
+  '@mdit-vue/plugin-frontmatter@3.0.2':
+    resolution: {integrity: sha512-QKKgIva31YtqHgSAz7S7hRcL7cHXiqdog4wxTfxeQCHo+9IP4Oi5/r1Y5E93nTPccpadDWzAwr3A0F+kAEnsVQ==}
+    engines: {node: '>=20.0.0'}
+
+  '@mdit-vue/types@3.0.2':
+    resolution: {integrity: sha512-00aAZ0F0NLik6I6Yba2emGbHLxv+QYrPH00qQ5dFKXlAo1Ll2RHDXwY7nN2WAfrx2pP+WrvSRFTGFCNGdzBDHw==}
+    engines: {node: '>=20.0.0'}
+
   '@miyaneee/rollup-plugin-json5@1.2.0':
     resolution: {integrity: sha512-JjTIaXZp9WzhUHpElrqPnl1AzBi/rvRs065F71+aTmlqvTMVkdbjZ8vfFl4nRlgJy+TPBw69ZK4pwFdmOAt4aA==}
     peerDependencies:
@@ -3392,6 +3407,14 @@ packages:
   '@shikijs/langs@3.21.0':
     resolution: {integrity: sha512-g6mn5m+Y6GBJ4wxmBYqalK9Sp0CFkUqfNzUy2pJglUginz6ZpWbaWjDB4fbQ/8SHzFjYbtU6Ddlp1pc+PPNDVA==}
 
+  '@shikijs/markdown-it@3.21.0':
+    resolution: {integrity: sha512-1QBlCtdauoOu4limpl9WCf0A1PRq0SofB47NkNNGuSx4V2J4cwxX9Ksfzk71qJSZbJ1g8jesu771gsfSs1+5qQ==}
+    peerDependencies:
+      markdown-it-async: ^2.2.0
+    peerDependenciesMeta:
+      markdown-it-async:
+        optional: true
+
   '@shikijs/themes@3.21.0':
     resolution: {integrity: sha512-BAE4cr9EDiZyYzwIHEk7JTBJ9CzlPuM4PchfcA5ao1dWXb25nv6hYsoDiBq2aZK9E3dlt3WB78uI96UESD+8Mw==}
 
@@ -4517,6 +4540,9 @@ packages:
     resolution: {integrity: sha512-ZcbTaIqJOfCc03QwD468Unz/5Ir8ATtvAHsK+FdXbDIbGfihqh9mrvdcYunQzqn4HrvWWaFyaxJhGZagaJJpPQ==}
     engines: {node: '>= 14'}
 
+  argparse@1.0.10:
+    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
+
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
@@ -5523,6 +5549,10 @@ packages:
   exsolve@1.0.8:
     resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
 
+  extend-shallow@2.0.1:
+    resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
+    engines: {node: '>=0.10.0'}
+
   extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
 
@@ -5821,6 +5851,10 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
+  gray-matter@4.0.3:
+    resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
+    engines: {node: '>=6.0'}
+
   gzip-size@6.0.0:
     resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
     engines: {node: '>=10'}
@@ -6129,6 +6163,10 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
 
+  is-extendable@0.1.1:
+    resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
+    engines: {node: '>=0.10.0'}
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -6359,6 +6397,10 @@ packages:
   js-tokens@9.0.1:
     resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
 
+  js-yaml@3.14.2:
+    resolution: {integrity: sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==}
+    hasBin: true
+
   js-yaml@4.1.1:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
@@ -6413,6 +6455,10 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  kind-of@6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+
   kleur@3.0.3:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
@@ -6709,6 +6755,9 @@ packages:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
+  markdown-it-async@2.2.0:
+    resolution: {integrity: sha512-sITME+kf799vMeO/ww/CjH6q+c05f6TLpn6VOmmWCGNqPJzSh+uFgZoMB9s0plNtW6afy63qglNAC3MhrhP/gg==}
+
   markdown-it@14.1.0:
     resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
     hasBin: true
@@ -8035,6 +8084,10 @@ packages:
   scule@1.3.0:
     resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
 
+  section-matter@1.0.0:
+    resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
+    engines: {node: '>=4'}
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -8222,6 +8275,9 @@ packages:
     resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
     engines: {node: '>= 10.x'}
 
+  sprintf-js@1.0.3:
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+
   srvx@0.10.1:
     resolution: {integrity: sha512-A//xtfak4eESMWWydSRFUVvCTQbSwivnGCEf8YGPe2eHU0+Z6znfUTCPF0a7oV3sObSOcrXHlL6Bs9vVctfXdg==}
     engines: {node: '>=20.16.0'}
@@ -8304,6 +8360,10 @@ packages:
     resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
     engines: {node: '>=12'}
 
+  strip-bom-string@1.0.0:
+    resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
+    engines: {node: '>=0.10.0'}
+
   strip-comments@2.0.1:
     resolution: {integrity: sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==}
     engines: {node: '>=10'}
@@ -8752,6 +8812,12 @@ packages:
       '@nuxt/kit':
         optional: true
 
+  unplugin-vue-markdown@29.2.0:
+    resolution: {integrity: sha512-/x2hFgQ6cWN1Kls+yK5mAI9YDmeTofftynVGgOy1llBlDX1ifaXsQBls/bpORaiwn7cxA7HkOo0wn/xKcrXBHA==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      vite: ^2.0.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0 || ^7.0.0
+
   unplugin-vue-router@0.16.2:
     resolution: {integrity: sha512-lE6ZjnHaXfS2vFI/PSEwdKcdOo5RwAbCKUnPBIN9YwLgSWas3x+qivzQvJa/uxhKzJldE6WK43aDKjGj9Rij9w==}
     peerDependencies:
@@ -10939,6 +11005,20 @@ snapshots:
       - encoding
       - supports-color
 
+  '@mdit-vue/plugin-component@3.0.2':
+    dependencies:
+      '@types/markdown-it': 14.1.2
+      markdown-it: 14.1.0
+
+  '@mdit-vue/plugin-frontmatter@3.0.2':
+    dependencies:
+      '@mdit-vue/types': 3.0.2
+      '@types/markdown-it': 14.1.2
+      gray-matter: 4.0.3
+      markdown-it: 14.1.0
+
+  '@mdit-vue/types@3.0.2': {}
+
   '@miyaneee/rollup-plugin-json5@1.2.0(rollup@4.57.0)':
     dependencies:
       '@rollup/pluginutils': 5.3.0(rollup@4.57.0)
@@ -12764,6 +12844,13 @@ snapshots:
     dependencies:
       '@shikijs/types': 3.21.0
 
+  '@shikijs/markdown-it@3.21.0(markdown-it-async@2.2.0)':
+    dependencies:
+      markdown-it: 14.1.0
+      shiki: 3.21.0
+    optionalDependencies:
+      markdown-it-async: 2.2.0
+
   '@shikijs/themes@3.21.0':
     dependencies:
       '@shikijs/types': 3.21.0
@@ -14062,6 +14149,10 @@ snapshots:
       - bare-abort-controller
       - react-native-b4a
 
+  argparse@1.0.10:
+    dependencies:
+      sprintf-js: 1.0.3
+
   argparse@2.0.1: {}
 
   aria-hidden@1.2.6:
@@ -15280,6 +15371,10 @@ snapshots:
 
   exsolve@1.0.8: {}
 
+  extend-shallow@2.0.1:
+    dependencies:
+      is-extendable: 0.1.1
+
   extend@3.0.2: {}
 
   fake-indexeddb@6.2.5: {}
@@ -15623,6 +15718,13 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
+  gray-matter@4.0.3:
+    dependencies:
+      js-yaml: 3.14.2
+      kind-of: 6.0.3
+      section-matter: 1.0.0
+      strip-bom-string: 1.0.0
+
   gzip-size@6.0.0:
     dependencies:
       duplexer: 0.1.2
@@ -16047,6 +16149,8 @@ snapshots:
 
   is-docker@3.0.0: {}
 
+  is-extendable@0.1.1: {}
+
   is-extglob@2.1.1: {}
 
   is-finalizationregistry@1.1.1:
@@ -16257,6 +16361,11 @@ snapshots:
 
   js-tokens@9.0.1: {}
 
+  js-yaml@3.14.2:
+    dependencies:
+      argparse: 1.0.10
+      esprima: 4.0.1
+
   js-yaml@4.1.1:
     dependencies:
       argparse: 2.0.1
@@ -16310,6 +16419,8 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
+  kind-of@6.0.3: {}
+
   kleur@3.0.3: {}
 
   kleur@4.1.5: {}
@@ -16593,6 +16704,11 @@ snapshots:
     dependencies:
       semver: 7.7.3
 
+  markdown-it-async@2.2.0:
+    dependencies:
+      '@types/markdown-it': 14.1.2
+      markdown-it: 14.1.0
+
   markdown-it@14.1.0:
     dependencies:
       argparse: 2.0.1
@@ -18618,6 +18734,11 @@ snapshots:
 
   scule@1.3.0: {}
 
+  section-matter@1.0.0:
+    dependencies:
+      extend-shallow: 2.0.1
+      kind-of: 6.0.3
+
   semver@6.3.1: {}
 
   semver@7.7.3: {}
@@ -18868,6 +18989,8 @@ snapshots:
 
   split2@4.2.0: {}
 
+  sprintf-js@1.0.3: {}
+
   srvx@0.10.1: {}
 
   standard-as-callback@2.1.0: {}
@@ -18983,6 +19106,8 @@ snapshots:
     dependencies:
       ansi-regex: 6.2.2
 
+  strip-bom-string@1.0.0: {}
+
   strip-comments@2.0.1: {}
 
   strip-final-newline@3.0.0: {}
@@ -19480,6 +19605,18 @@ snapshots:
     optionalDependencies:
       '@nuxt/kit': 4.3.0(magicast@0.5.1)
 
+  unplugin-vue-markdown@29.2.0(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2)):
+    dependencies:
+      '@mdit-vue/plugin-component': 3.0.2
+      '@mdit-vue/plugin-frontmatter': 3.0.2
+      '@mdit-vue/types': 3.0.2
+      '@types/markdown-it': 14.1.2
+      markdown-it: 14.1.0
+      markdown-it-async: 2.2.0
+      unplugin: 2.3.11
+      unplugin-utils: 0.3.1
+      vite: 7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2)
+
   unplugin-vue-router@0.16.2(@vue/compiler-sfc@3.5.27)(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3)):
     dependencies:
       '@babel/generator': 7.28.6
diff --git a/shared/schemas/blog.ts b/shared/schemas/blog.ts
index 56f1738c..7b8ca834 100644
--- a/shared/schemas/blog.ts
+++ b/shared/schemas/blog.ts
@@ -1,18 +1,18 @@
-import { object, string, boolean, array, optional } from 'valibot'
-import type { InferOutput } from 'valibot'
+import * as v from 'valibot'
 
-export const BlogPostSchema = object({
-  author: string(),
-  title: string(),
-  date: string(),
-  description: string(),
-  slug: string(),
-  excerpt: optional(string()),
-  tags: optional(array(string())),
-  draft: optional(boolean()),
+export const BlogPostSchema = v.object({
+  author: v.string(),
+  title: v.string(),
+  date: v.string(),
+  description: v.string(),
+  slug: v.string(),
+  excerpt: v.optional(v.string()),
+  tags: v.optional(v.array(v.string())),
+  draft: v.optional(v.boolean()),
 })
 
 /**
  * Inferred type for blog post frontmatter
  */
-export type BlogPostFrontmatter = InferOutput<typeof BlogPostSchema>
+/** @public */
+export type BlogPostFrontmatter = v.InferOutput<typeof BlogPostSchema>

From 9d3714abd2f17859d7e34bbf8764f43d3ffb2596 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Fri, 30 Jan 2026 18:48:26 +0000
Subject: [PATCH 13/16] [autofix.ci] apply automated fixes

---
 lunaria/files/en-US.json | 7 ++++++-
 lunaria/files/fr-FR.json | 5 +++++
 lunaria/files/it-IT.json | 5 +++++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 8a6cc33a..7fa73a59 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -41,10 +41,15 @@
   "nav": {
     "main_navigation": "Main",
     "popular_packages": "Popular packages",
+    "blog": "blog",
     "search": "search",
     "settings": "settings",
     "back": "back"
   },
+  "blog": {
+    "title": "Blog",
+    "description": "Insights and updates from the npmx community"
+  },
   "settings": {
     "title": "settings",
     "tagline": "customize your npmx experience",
@@ -329,7 +334,7 @@
       "size": "Size",
       "deps": "Deps",
       "updated": "Updated",
-      "install": "Install",
+      "get_started": "Get started",
       "readme": "Readme",
       "maintainers": "Maintainers",
       "keywords": "Keywords",
diff --git a/lunaria/files/fr-FR.json b/lunaria/files/fr-FR.json
index bdaef15d..8ca53740 100644
--- a/lunaria/files/fr-FR.json
+++ b/lunaria/files/fr-FR.json
@@ -41,10 +41,15 @@
   "nav": {
     "main_navigation": "Barre de navigation",
     "popular_packages": "Paquets populaires",
+    "blog": "blog",
     "search": "recherche",
     "settings": "paramètres",
     "back": "Retour"
   },
+  "blog": {
+    "title": "Blog",
+    "description": "Perspectives et actualités de la communauté npmx"
+  },
   "settings": {
     "title": "paramètres",
     "tagline": "personnalisez votre expérience npmx",
diff --git a/lunaria/files/it-IT.json b/lunaria/files/it-IT.json
index 8461105d..51fd8ff1 100644
--- a/lunaria/files/it-IT.json
+++ b/lunaria/files/it-IT.json
@@ -41,10 +41,15 @@
   "nav": {
     "main_navigation": "Principale",
     "popular_packages": "Pacchetti popolari",
+    "blog": "blog",
     "search": "cerca",
     "settings": "impostazioni",
     "back": "Indietro"
   },
+  "blog": {
+    "title": "Blog",
+    "description": "Approfondimenti e aggiornamenti dalla comunità npmx"
+  },
   "settings": {
     "title": "impostazioni",
     "tagline": "personalizza la tua esperienza npmx",

From 1f74b4bf090f918cbd0845c12306900ae4336028 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Fri, 30 Jan 2026 13:50:55 -0500
Subject: [PATCH 14/16] feat: move blog link from app header to footer

Also add some breathing room to the top of the blog post
---
 app/components/AppFooter.vue       |  6 ++++++
 app/components/AppHeader.vue       | 15 ---------------
 app/components/BlogPostWrapper.vue |  2 +-
 i18n/locales/en.json               |  2 +-
 4 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 0ab9f83d..05bd6479 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -12,6 +12,12 @@
           >
             {{ $t('footer.about') }}
           </NuxtLink>
+          <NuxtLink
+            to="/blog"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center"
+          >
+            {{ $t('footer.blog') }}
+          </NuxtLink>
           <a
             href="https://docs.npmx.dev"
             target="_blank"
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 7d663532..c44b2d8f 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -78,21 +78,6 @@ onKeyStroke('.', e => {
           <li v-if="isConnected && npmUser" class="flex items-center">
             <HeaderOrgsDropdown :username="npmUser" />
           </li>
-          <li class="flex items-center">
-            <NuxtLink
-              to="/blog"
-              class="link-subtle font-mono text-sm inline-flex items-center gap-2"
-              aria-keyshortcuts="."
-            >
-              {{ $t('nav.blog') }}
-              <kbd
-                class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
-                aria-hidden="true"
-              >
-                .
-              </kbd>
-            </NuxtLink>
-          </li>
         </ul>
       </div>
 
diff --git a/app/components/BlogPostWrapper.vue b/app/components/BlogPostWrapper.vue
index 1ae4a57b..9409e74d 100644
--- a/app/components/BlogPostWrapper.vue
+++ b/app/components/BlogPostWrapper.vue
@@ -14,7 +14,7 @@ useSeoMeta({
 })
 </script>
 <template>
-  <main class="container w-full">
+  <main class="container w-full py-8">
     <article class="prose dark:prose-invert mx-auto">
       <slot />
     </article>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 7fa73a59..b96e69a7 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -10,6 +10,7 @@
   "trademark_disclaimer": "npm is a registered trademark of npm, Inc. This site is not affiliated with npm, Inc.",
   "footer": {
     "about": "about",
+    "blog": "blog",
     "docs": "docs",
     "source": "source",
     "social": "social",
@@ -41,7 +42,6 @@
   "nav": {
     "main_navigation": "Main",
     "popular_packages": "Popular packages",
-    "blog": "blog",
     "search": "search",
     "settings": "settings",
     "back": "back"

From 030df0f4f922a3bf1fd30faad65980b966963b8e Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Fri, 30 Jan 2026 18:53:23 +0000
Subject: [PATCH 15/16] [autofix.ci] apply automated fixes

---
 lunaria/files/en-US.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 7fa73a59..b96e69a7 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -10,6 +10,7 @@
   "trademark_disclaimer": "npm is a registered trademark of npm, Inc. This site is not affiliated with npm, Inc.",
   "footer": {
     "about": "about",
+    "blog": "blog",
     "docs": "docs",
     "source": "source",
     "social": "social",
@@ -41,7 +42,6 @@
   "nav": {
     "main_navigation": "Main",
     "popular_packages": "Popular packages",
-    "blog": "blog",
     "search": "search",
     "settings": "settings",
     "back": "back"

From a4039c21e508570371d2b0f89f47b7ba88927972 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Fri, 30 Jan 2026 13:56:05 -0500
Subject: [PATCH 16/16] docs: update todos

---
 TODOs.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/TODOs.md b/TODOs.md
index 1b1d8391..69088622 100644
--- a/TODOs.md
+++ b/TODOs.md
@@ -10,7 +10,6 @@
 - Blog post UI - (Started - needs more polish)
 - OAuth
 - Standard site push - Mock PDS push for now
-- anthony's alternative markdown solution for now and Nuxt content integration for later
 - constellation - bsky API
 - Docs Run them locally with `pnpm dev:docs`.
 
@@ -28,6 +27,10 @@
   - Proposed: the pipeline takes login pds, handle, and app_password as secrets. Checks to see if one has already been published for that blog post. If so does not push it. If it hasn't then it creates the atproto record when deploying/building by logging in. check if an article has been created by parsing the createdate of the blog post to a TID, do a getRecord. if it's there dont publish the new one. If it isnt send it up. I wrote about tid concept here
     https://marvins-guide.leaflet.pub/3mckm76mfws2h
   - Proposed: nuxt module with a build hook. e.g. in standard-site-sync.ts we use a hook that triggers after the file is parsed and create the site.standard.document or not if it already exists.
+- Update styling for blog posts.
+- BlogWrapper Component or should it be a Blog Layout?
+- Organize markdown files in blog post folder?
+- I18n of blog posts.
 - TBD
 
 ---
@@ -36,6 +39,6 @@
 
 - [x] Lexicons
 - [x] Prose-styling using unocss typography
-- [x] x
+- [x] anthony's alternative markdown solution for now and Nuxt content integration for later
 
 ---