Article Content Migration — MDX to Convex ContentResource

// scripts/seed-articles.ts
import { ConvexHttpClient } from "convex/browser"
import { api } from "../convex/_generated/api"
import fs from "fs"
import path from "path"
import matter from "gray-matter"
 
const client = new ConvexHttpClient(process.env.CONVEX_URL!)
 
const contentDir = path.join(process.cwd(), "apps/web/content")
const files = fs.readdirSync(contentDir).filter(f => f.endsWith(".mdx"))
 
for (const file of files) {
  const raw = fs.readFileSync(path.join(contentDir, file), "utf-8")
  const { data: meta, content } = matter(raw)
  const slug = file.replace(/\.mdx$/, "")
 
  await client.mutation(api.content.upsert, {
    resourceId: `article:${slug}`,
    type: "article",
    fields: {
      slug,
      title: meta.title,
      description: meta.description,
      content,           // raw MDX body (no frontmatter)
      image: meta.image || null,
      tags: meta.tags || [],
      type: meta.type || "post",
      date: meta.date,
      updated: meta.updated || null,
      draft: meta.draft || false,
    },
  })
  console.log(`Seeded: ${slug}`)
}

// apps/web/lib/posts.ts (new)
import { fetchQuery } from "convex/nextjs"
import { api } from "../../convex/_generated/api"
 
export async function getPost(slug: string): Promise<Post | null> {
  const resource = await fetchQuery(api.content.getByResourceId, {
    resourceId: `article:${slug}`,
  })
  if (!resource || resource.type !== "article") return null
 
  return {
    meta: {
      slug: resource.fields.slug,
      title: resource.fields.title,
      description: resource.fields.description,
      date: resource.fields.date,
      updated: resource.fields.updated,
      type: resource.fields.type,
      tags: resource.fields.tags,
      image: resource.fields.image,
      draft: resource.fields.draft,
    },
    content: resource.fields.content,
  }
}
 
export async function getAllPosts(): Promise<PostMeta[]> {
  const resources = await fetchQuery(api.content.listByType, {
    type: "article",
  })
  return resources
    .filter(r => !r.fields.draft)
    .sort((a, b) => new Date(b.fields.date).getTime() - new Date(a.fields.date).getTime())
    .map(r => r.fields as PostMeta)
}

// app/[slug]/page.tsx
import { Suspense } from "react"
 
export default async function ArticlePage({ params }) {
  const { slug } = await params
 
  return (
    <article>
      {/* CACHED: article content */}
      <Suspense fallback={<ArticleSkeleton />}>
        <CachedArticle slug={slug} />
      </Suspense>
 
      {/* DYNAMIC: feedback status (Convex subscription, client island) */}
      <Suspense fallback={null}>
        <FeedbackStatusIsland slug={slug} />
      </Suspense>
 
      {/* STATIC: feedback form */}
      <FeedbackForm slug={slug} />
    </article>
  )
}
 
async function CachedArticle({ slug }: { slug: string }) {
  'use cache'
  cacheLife('max')
  cacheTag(`article:${slug}`)
 
  const post = await getPost(slug)
  if (!post) notFound()
 
  return <MDXRenderer source={post.content} />
}

// components/mdx-renderer.tsx
import { compileMDX } from 'next-mdx-remote/rsc'
import { components } from './mdx-components'
 
export async function MDXRenderer({ source }: { source: string }) {
  const { content } = await compileMDX({
    source,
    components,
    options: {
      parseFrontmatter: false, // already parsed
    },
  })
  return content
}

// app/api/revalidate/route.ts
import { revalidateTag } from 'next/cache'
import { headers } from 'next/headers'
 
export async function POST(req: Request) {
  const h = await headers()
  const secret = h.get('x-revalidation-secret')
  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'unauthorized' }, { status: 401 })
  }
 
  const { tag } = await req.json()
  revalidateTag(tag)
  return Response.json({ revalidated: true, tag })
}

export async function generateStaticParams() {
  // At build time, Convex HTTP client fetches all article slugs
  const client = new ConvexHttpClient(process.env.CONVEX_URL!)
  const articles = await client.query(api.content.listSlugs, { type: "article" })
  return articles.map(slug => ({ slug }))
}