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:

---
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

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.