2026-04-20 — Blog Frontend: Decisions + Templates

Decisions (Socrates' 5 questions)

1. Post pages → Full HTML — SEO-primary, static at edge
2. Category/tag archives → Card grid — 2-col desktop, 1-col mobile
3. Admin UI → Functional-minimal first — Socrates builds plumbing, I skin later
4. Images (MVP) → Simple <img> — <picture>/srcset deferred to Sprint 2
5. RSS → Full content, RSS 2.0 — Matches content strategy

Templates Built

• base.html.j2 — Shared layout (header, nav, search, footer, JSON-LD)
• blog_index.html.j2 — Post listing with featured hero + card grid
• blog_article.html.j2 — Full article page with structured data
• blog_category.html.j2 — Category archive (grid layout)
• blog_tag.html.j2 — Tag archive (grid layout)
• feed.xml.j2 — RSS 2.0 full-content feed
• sitemap.xml.j2 — SEO sitemap

Stylesheet

• blog.css — 827 lines, extends dashboard tokens with blog-specific additions
• Blog typography (17px body, hero, cards)
• Category pills (homelab/orange, openclaw/indigo, ai-news/cyan)
• Sticky header with mobile hamburger + search overlay
• Client-side Fuse.js search (loaded on demand)
• Article body styles (prose-like reading experience)
• Responsive breakpoints (mobile-first → tablet → desktop)
• Print styles
• Full WCAG 2.1 AA compliance (focus rings, contrast, semantic HTML)

Docs Updated

• blog-frontend-design.md — Status → Approved, added decisions table, updated tech stack + file structure
• blog-backend-architecture.md — Replaced questions with resolved decisions
• blog-implementation-roadmap.md — Status → Approved, added decisions table

Next Steps for Socrates

• Wire these Jinja2 templates into builder.py
• Build the static generation pipeline
• Create the posts.json index for Fuse.js search
• RSS 2.0 feed generation from feed.xml.j2