section-blog

Blog Section

Adds professional blog system to existing websites with listing pages, post templates, and author boxes. Requires existing site with src/index.css theme variables.

---

Integration Workflow

Copy this checklist and track progress:

Blog Integration:
- [ ] Step 1: Read index.css and AGENTS.md
- [ ] Step 2: Assess content needs
- [ ] Step 3: Create blog pages

Step 1: Read Site Design

Read src/index.css and AGENTS.md to extract:

• Brand colors and typography from @theme {} block
• Custom CSS variables from @layer base {}
• Existing navigation structure

Step 2: Assess Content Needs

Why no professional-copywriter for blog posts? Blog content is the user's own voice — case studies, release notes, opinion pieces. Generated marketing copy would flatten that voice and force the user to rewrite from scratch. A neutral placeholder is faster to replace than polished prose pointing in the wrong direction.

No articles exist:

• Create 1 placeholder post with generic text
• Do NOT invoke professional-copywriter (see note above)
• Tell user: "Created a sample post. Replace with your content."

Existing articles provided:

• Format according to design language

User wants new post:

• Ask for: Title, slug, date, author, authorEmail
• Optional: authorBio, category, featured image, description
• Use generic placeholder text if no content provided
• Do NOT invoke professional-copywriter (see note above)

Step 3: Create Blog Pages

Generate pages matching site's design using Astro content collections:

Required files:

• src/content.config.ts - Add blog collection (preserve existing collections)
• src/content/blog/*.md - Blog post markdown files (NO layout frontmatter)
• src/pages/blog/index.astro - Blog listing (uses getCollection())
• src/pages/blog/[...slug].astro - Dynamic post pages with layout, author box, and content styling

Update navigation with Blog link at appropriate position.

---