# Blog Image Pipeline — Proposal

**Author:** Daedalus 🎨  
**Date:** 2026-04-20  
**Status:** Draft — Awaiting Director Approval

---

## Visual Direction for "The Night I Broke DNS"

### Option A: Network Topology Diagram (Recommended)

**Concept:** Clean, minimalist diagram showing the failure chain  
**Style:** Line art, Emerald Toffee palette, subtle depth

```
[Router] → [Beelink: Pi-hole ❌] → [Dead DNS]
     ↓
[Fallback: Quad9 ✓] — (not configured)
```

**Visual elements:**
- Router as simple box with Wi-Fi waves
- Beelink as small server icon with Pi-hole logo
- Red X on the failed path
- Dotted line showing the missing fallback
- Morning scene silhouette (coffee cup, dog bowl) at bottom for the "7 AM" context

**Format:** SVG (scalable, tiny filesize)  
**Dimensions:** 1200×630 (Open Graph standard)  
**Color:** Midnight Teal background, Warm Toffee lines, Burnished Copper for the failure indicator

---

### Option B: Hero Illustration — The Morning After

**Concept:** Stylized scene of the living room, 7:45 AM  
**Style:** Flat illustration, warm amber tones against dark charcoal

**Elements:**
- Silhouette figure in slippers holding coffee
- Phone showing "No Internet"
- Dog with empty bowl looking judgmental
- Background: router with blinking red light, Beelink with one sad LED

**Format:** PNG with transparency for dark mode compatibility  
**Dimensions:** 1200×630  
**Vibe:** Relatable chaos, not too polished — "this actually happened"

---

### Option C: Code + Chaos Split

**Concept:** Left side: the `docker restart` command. Right side: the consequences  
**Style:** Terminal aesthetic meets domestic scene

**Elements:**
- Terminal window with the actual commands from the article
- Speech bubble: "The internet isn't working."
- Small icons: phone, tablet, dog bowl, thermostat

**Format:** SVG or PNG  
**Dimensions:** 1200×630

---

## Recommendation

**Go with Option A (Network Topology).**

Why:
- Immediately communicates the technical lesson
- Reusable style for future Home Lab posts — becomes a series signature
- SVG means zero performance cost, infinite scalability
- Can be generated programmatically (diagram-as-code)
- Fits the "functional luxury" aesthetic — information-dense, beautiful, no fluff

---

## Image Pipeline Architecture

### Sprint 1 — Manual (Current)

For the DNS post, I generate the SVG manually. Socrates adds it to the post's `images/` folder, builder copies it to `dist/`.

**Workflow:**
1. Daedalus designs SVG → commits to `blog/posts/{slug}/images/`
2. Markdown references: `![DNS failure diagram](images/dns-topology.svg)`
3. Socrates' `builder.py` copies images to `dist/blog/{slug}/images/`
4. Static generation includes the image in the HTML

### Sprint 2 — Semi-Automated

**Tooling:** Python script using `diagrams` library or `graphviz` for topology generation

**Input:** YAML frontmatter field:
```yaml
---
hero_image: topology
hero_config:
  type: network_failure
  nodes:
    - name: router
      icon: wifi-router
    - name: pihole
      icon: server
      status: failed
    - name: fallback
      icon: dns
      status: missing
---
```

**Output:** SVG auto-generated at build time, styled with blog design tokens

### Sprint 3 — AI-Assisted (Future)

**Tooling:** Local Stable Diffusion on Gaming PC or API call to image generation service

**Input:** Article excerpt + style prompt from content strategy

**Output:** Unique hero illustration per post, cached and versioned

**Sovereign constraint:** Prefer local generation (Gaming PC 3080 Ti) or skip AI images entirely. No third-party image APIs that leak content.

---

## File Structure (Sprint 1)

```
data/blog/posts/the-night-i-broke-dns/
├── index.md              # Article source
├── images/
│   ├── hero.svg          # Network topology (Daedalus creates)
│   └── hero.png          # Fallback raster (optional)
└── metadata.yaml         # Post metadata (if not in frontmatter)
```

Builder copies `images/` to `dist/blog/the-night-i-broke-dns/images/`.

---

## Design System for Future Images

### Home Lab Series

**Signature element:** Topology diagrams showing before/during/after states  
**Color coding:**
- Green (Verdant Green): Working path
- Red (Burnished Copper): Failed path
- Gold (Golden Amber): The fix/workaround
- Dotted lines: Missing/redundant paths

**Style:** Clean lines, slight isometric tilt for depth, no gradients (stays sharp at all sizes)

### OpenClaw Series

**Signature element:** Workflow diagrams — agent interactions, data flow  
**Style:** Flowchart aesthetic, rounded corners, emoji-style icons for agents

### AI News Series

**Signature element:** Abstract data viz — model comparison charts, trend lines  
**Style:** Minimalist charts, Emerald Toffee palette, no stock photos

---

## Technical Specs

| Property | Value |
|----------|-------|
| Hero dimensions | 1200×630 (Open Graph) |
| Inline diagrams | 800×variable (max-width: 100%) |
| Formats | SVG preferred, PNG fallback for complex illustrations |
| Color space | sRGB, designed for dark mode |
| Accessibility | All images get `alt` text from frontmatter; decorative SVGs get `role="img"` + `aria-label` |

---

## Next Steps

1. **Matt approves** Option A topology style
2. **Daedalus generates** the DNS post hero SVG
3. **Socrates wires** image copying into `builder.py`
4. **Test** the full pipeline with the DNS post
5. **Document** the YAML frontmatter spec for Sprint 2 automation

---

_The goal: every Home Lab post gets a signature topology diagram. Every OpenClaw post gets a workflow visualization. Consistent style, zero performance cost, infinite scalability._