📄 blog-phase4-dev-preview.md 2,190 bytes Apr 21, 2026 📋 Raw

Blog Phase 4 — Dev Preview Ready

Date: 2026-04-21
Status: ✅ Dev server running, API spec documented for Socrates


What's Live

Dev server running on port 8080 with mock data:

URL What
http://localhost:8080/ Public blog index
http://localhost:8080/article/the-night-i-broke-dns/ Article page
http://localhost:8080/admin/ Admin dashboard
http://localhost:8080/admin/posts Post list (filterable)
http://localhost:8080/admin/posts/new New post editor
http://localhost:8080/admin/posts/the-night-i-broke-dns/edit Existing post editor
http://localhost:8080/admin/images Image browser

Files Created/Updated

For Socrates (API Contract)

📄 shared/api-specs/blog-admin-api.md
- 10 admin API endpoints specified
- Request/response shapes documented
- HTMX conventions defined
- Mock data examples included

Dev Server

📄 blog/dev_server.py
- FastAPI server with Jinja2 rendering
- Mock data for all 3 posts (1 draft, 2 published)
- All admin API endpoints mocked
- Auto-save endpoints return toast confirmations


Admin UI Features

Dashboard:
- Stats grid (total, published, drafts, images)
- Quick actions (New Post, Rebuild, Deploy)
- Recent activity feed

Post List:
- Filter by status (published/draft)
- Filter by category
- Search by title
- HTMX-powered row updates

Editor:
- Split-pane: metadata left, editor+preview right
- Auto-save on 3s debounce
- Client-side markdown preview (markdown-it)
- Tab key inserts 2 spaces
- Mobile: preview hidden behind toggle

Image Manager:
- Grid view of available images
- Copy-path buttons for easy insertion


Next Steps

  1. Socrates implements the 10 API endpoints from the spec
  2. Integration testing with real backend
  3. Matt approval on UX flow
  4. Deploy to production via CF Pages

Running the Preview

# On titanium-butler
python3 /home/hoffmann_admin/.openclaw/workspace-daedalus/blog/dev_server.py

# Or background it
nohup python3 dev_server.py > blog-dev.log 2>&1 &

Access via browser or curl. Server auto-reloads on file changes (if you edit templates).