feat: publish draft posts (with badge + noindex) (#1829)

Author: danielroe

app/components/BlogPostListCard.vue

@@ -16,6 +16,8 @@ defineProps<{
   path: string
   /** For keyboard nav scaffold */
   index: number
+  /** Whether this post is an unpublished draft */
+  draft?: boolean
 }>()
 </script>
 
@@ -30,7 +32,15 @@ defineProps<{
     >
       <!-- Text Content -->
       <div class="flex-1 min-w-0 text-start gap-2">
-        <span class="text-xs text-fg-muted font-mono">{{ published }}</span>
+        <div class="flex items-center gap-2">
+          <span class="text-xs text-fg-muted font-mono">{{ published }}</span>
+          <span
+            v-if="draft"
+            class="text-xs px-1.5 py-0.5 rounded badge-orange font-sans font-medium"
+          >
+            {{ $t('blog.draft_badge') }}
+          </span>
+        </div>
         <h2
           class="font-mono text-xl font-medium text-fg group-hover:text-primary transition-colors hover:underline"
         >

app/components/global/BlogPostWrapper.vue

@@ -11,6 +11,7 @@ useSeoMeta({
   ogTitle: props.frontmatter.title,
   ogDescription: props.frontmatter.description || props.frontmatter.excerpt,
   ogType: 'article',
+  ...(props.frontmatter.draft ? { robots: 'noindex, nofollow' } : {}),
 })
 
 defineOgImageComponent('BlogPost', {
@@ -28,6 +29,17 @@ const blueskyPostUri = computed(() => blueskyLink.value?.postUri ?? null)
 
 <template>
   <main class="container w-full py-8">
+    <div
+      v-if="frontmatter.draft"
+      class="max-w-prose mx-auto mb-8 px-4 py-3 rounded-md border border-badge-orange/30 bg-badge-orange/5"
+    >
+      <div class="flex items-center gap-2 text-badge-orange">
+        <span class="i-lucide:file-edit w-4 h-4 shrink-0" aria-hidden="true" />
+        <span class="text-sm font-medium">
+          {{ $t('blog.draft_banner') }}
+        </span>
+      </div>
+    </div>
     <div v-if="frontmatter.authors" class="mb-12 max-w-prose mx-auto">
       <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <AuthorList :authors="frontmatter.authors" variant="expanded" />

app/pages/blog/index.vue

@@ -41,6 +41,7 @@ useSeoMeta({
             :topics="Array.isArray(post.tags) ? post.tags : placeHolder"
             :published="post.date"
             :index="idx"
+            :draft="post.draft"
           />
           <hr v-if="idx < posts.length - 1" class="border-border-subtle" />
         </template>

i18n/locales/en.json

@@ -85,6 +85,8 @@
     "author": {
       "view_profile": "View {name}'s profile on Bluesky"
     },
+    "draft_badge": "Draft",
+    "draft_banner": "This is an unpublished draft. It may be incomplete or contain inaccuracies.",
     "atproto": {
       "view_on_bluesky": "View on Bluesky",
       "reply_on_bluesky": "Reply on Bluesky",

i18n/schema.json

@@ -259,6 +259,12 @@
           },
           "additionalProperties": false
         },
+        "draft_badge": {
+          "type": "string"
+        },
+        "draft_banner": {
+          "type": "string"
+        },
         "atproto": {
           "type": "object",
           "properties": {

modules/blog.ts

@@ -12,7 +12,7 @@ import { isProduction } from '../config/env'
 
 /**
  * Scans the blog directory for .md files and extracts validated frontmatter.
- * Returns only non-draft posts sorted by date descending.
+ * Returns all posts (including drafts) sorted by date descending.
  */
 function loadBlogPosts(blogDir: string): BlogPostFrontmatter[] {
   const files: string[] = globSync(join(blogDir, '*.md'))
@@ -35,8 +35,6 @@ function loadBlogPosts(blogDir: string): BlogPostFrontmatter[] {
     const result = safeParse(BlogPostSchema, frontmatter)
     if (!result.success) continue
 
-    if (result.output.draft) continue
-
     posts.push(result.output)
   }
 
@@ -78,13 +76,13 @@ export default defineNuxtModule({
       }),
     )
 
-    // Expose frontmatter for published posts to avoid bundling the full content
-    // of all posts in `/blog` page.
+    // Expose frontmatter for the `/blog` listing page.
+    const showDrafts = nuxt.options.dev || !isProduction
     addTemplate({
       filename: 'blog/posts.ts',
       write: true,
       getContents: () => {
-        const posts = loadBlogPosts(blogDir)
+        const posts = loadBlogPosts(blogDir).filter(p => showDrafts || !p.draft)
         return [
           `import type { BlogPostFrontmatter } from '#shared/schemas/blog'`,
           ``,
@@ -95,25 +93,15 @@ export default defineNuxtModule({
 
     nuxt.options.alias['#blog/posts'] = join(nuxt.options.buildDir, 'blog/posts')
 
-    // In production, remove page routes for draft posts
-    if (!nuxt.options.dev && isProduction) {
-      const publishedPosts = loadBlogPosts(blogDir)
-      const publishedSlugs = new Set(publishedPosts.map(p => p.slug))
-
-      nuxt.hook('pages:extend', pages => {
-        // Walk the pages tree and remove draft blog post pages
-        for (let i = pages.length - 1; i >= 0; i--) {
-          const page = pages[i]!
-          // Blog post pages are at /blog/<slug> — the file is blog/<slug>.md
-          if (page.file?.endsWith('.md') && page.file?.includes('/blog/')) {
-            // Extract the slug from the filename
-            const filename = page.file.split('/').pop()?.replace('.md', '')
-            if (filename && filename !== 'index' && !publishedSlugs.has(filename)) {
-              pages.splice(i, 1)
-            }
-          }
+    // Add X-Robots-Tag header for draft posts to prevent indexing
+    const posts = loadBlogPosts(blogDir)
+    for (const post of posts) {
+      if (post.draft) {
+        nuxt.options.routeRules ||= {}
+        nuxt.options.routeRules[`/blog/${post.slug}`] = {
+          headers: { 'X-Robots-Tag': 'noindex, nofollow' },
         }
-      })
+      }
     }
   },
 })