Managing Content

Content Manager (CMS)

When to use this skill

• When the user needs a "Blog", "Portfolio", "E-commerce Product List", or "Team Page".
• When the user asks to "connect Sanity/Strapi".
• When content needs to be editable by non-developers.

Workflow

1. Selection: Choose the CMS logic.
   • Sanity.io: (Cloud) Real-time, multi-user, hosted. Best for teams/rich-text heavy sites.
   • Keystatic: (Local) Git-based. Free, simple, no-hosting. Best for solo devs.
   • Custom Firebase: (DIY) Build your own Admin Panel on Firestore. Best if you want 100% UI control and already use Firebase Auth.
2. Modeling: Define the content structure.
   • Keystatic: keystatic.config.ts.
   • Sanity: sanity/schemaTypes.
   • Firebase: Define TypeScript Interfaces models (e.g., interface Post { ... }).
3. Integration:
   • Firebase: Use getDocs(collection(db, "posts")).

Instructions

1. The Local Route (Keystatic)

Perfect for "Hardcoded but Editable".

1. Setup: Install @keystatic/core and @keystatic/next.
2. Config: Create keystatic.config.ts.

   export default config({
     storage: { kind: 'local' },
     collections: {
       posts: collection({
         label: 'Posts',
         slugField: 'title',
         schema: {
           title: fields.slug({ name: { label: 'Title' } }),
           content: fields.document({ label: 'Content' }),
         },
         path: 'content/posts/*',
       }),
     },
   });
   

2. The Cloud Route (Sanity)

Always separate schemas into small files in sanity/schemaTypes/.

3. The DIY Route (Firebase)

Use the managing-databases skill to build the Admin Dashboard.

• Auth: Restrict /admin to your uid.
• Storage: Use Firebase Storage for image uploads.
• Rich Text: You must install a library like Tiptap or Quill manually.

// post.ts
export default {
  name: 'post',
  type: 'document',
  fields: [
    { name: 'title', type: 'string' },
    { name: 'image', type: 'image' }
  ]
}

2. The Fetching Layer

Create a lib/sanity.ts or services/cms.ts.

• Type Safety: Use tools like sanity-typegen to ensure TypeScript knows your schema.
• Caching: Use fetch(url, { next: { revalidate: 60 } }) for ISR.

3. Rich Text Rendering

Never dump raw HTML. Use PortableText (Sanity) or ReactMarkdown to render safe, styled content.

Self-Correction Checklist

• "Did I add the API keys to .env?" -> Never hardcode tokens.
• "Is the dataset public or private?" -> specific read settings.