# 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

```bash
# 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).