Refresh and unify generated content covers

[bo-iliev]

Summary

• replace fragmented cover generation with one adaptive SVG renderer across posts, guides, exercises, news, Advent, quizzes, games, checklists, interviews, comparisons, flashcards, and tools
• add atomic SVG/PNG generation, selective preview generation, and a no-write pixel-boundary validator
• include one real longest-title preview asset per content type plus the previously missing Cloud Cost Allocation Tags quiz cover
• retain the existing quiz CLI while routing it through the shared renderer

Safety

• existing PNG covers are preserved by default; mass regeneration requires an explicit --force
• empty or implausibly long titles fail before any existing cover is replaced
• coming-soon games are excluded

Validation

• validate:images: 964/964 covers rendered and pixel-checked
• targeted Vitest: 58/58 passed
• changed-file ESLint: passed
• focused TypeScript check: passed
• production Next.js build: passed (1,393 static pages)

Preview

This PR intentionally updates representative real covers across every content type so the Cloudflare Pages preview can be reviewed before a full cover migration.

[cloudflare-workers-and-pages]

Deploying devops-daily with    Cloudflare Pages

Latest commit:	68ba5f8
Status:	✅  Deploy successful!
Preview URL:	https://b42682bd.devops-daily.pages.dev
Branch Preview URL:	https://codex-refresh-og-covers.devops-daily.pages.dev

View logs

[bo-iliev]

Visual approval checkpoint: current vs proposed covers

Before regenerating the full image library, here are representative side-by-side comparisons.

• Left: current production image
• Right: proposed image from the immutable Cloudflare preview for commit c0d3673
• The routes and image paths stay the same; this checkpoint is for approving the visual treatment and adaptive title layout.
• No full-library regeneration has been done yet. Once the design is approved, we can regenerate and verify every existing cover in a separate, deliberate step.

Long post title

Current production	Proposed

Comparison page

Current production	Proposed

Interview page with a long title

Current production	Proposed

Checklist page

Current production	Proposed

Game page

Current production	Proposed

The renderer has already validated 964/964 active content items, including the longest real titles, without title overflow. That technical validation does not replace visual approval.

Reviewer request: please confirm whether this direction is approved, or note any typography, spacing, color, or hierarchy changes you would like. We will wait for that approval before updating all existing images.

[bo-iliev]

Full cover migration complete ✅

The approved design has now been applied to every active content cover in this repository.

Content type	Regenerated covers
Posts	536
Guides	20
Exercises	20
News	42
Advent	25
Quizzes	44
Games	54
Checklists	24
Interviews	110
Comparisons	53
Flashcards	27
Tools	9
Total	964

Cleanup

• Removed the unused templates/svg directory and all 10 legacy SVG templates.
• Pruned 53 tracked intermediate SVGs that are no longer served or referenced.
• Retained and regenerated the 14 SVG covers that existing content explicitly references, so those URLs remain valid.
• Added pnpm regenerate:content-covers as the explicit, reproducible full-migration command.

Verification

• 964/964 covers passed adaptive-title and rendered pixel-boundary validation.
• All 964 changed files were verified as valid 1200×630 PNGs.
• A normal generation run skips 964/964, confirming future builds remain idempotent.
• 63 targeted image-generation tests passed.
• The production build generated 1,393/1,393 static pages successfully.
• GitHub Tests, Test Build, and Cloudflare Pages are all green.
• One deployed cover from each of the 12 types was byte-compared with the committed asset; all returned HTTP 200 and matched exactly.

Updated preview

• Immutable preview for f8505ae
• Branch preview

The earlier old-vs-new comparison comment remains available above; these preview URLs now contain the complete regenerated library rather than only the representative samples.

[bo-iliev]

Guides card display follow-up ✅

The guide covers were being placed in a fixed h-48 container with object-cover, which cropped the 1200×630 artwork on wider one-column cards.

This is now fixed in both the main Guides grid and the Latest Guides section:

• Covers preserve their native 40:21 aspect ratio, keeping the badge, title, motif, and footer visible.
• Hover scaling was reduced so it does not noticeably crop the edges.
• Long descriptions are clamped and metadata stays aligned at the bottom of the card.
• The first Guides image is prioritized as the page LCP asset.
• Desktop and 390px mobile layouts were visually checked.

Open the updated Guides page on the immutable preview

Tests, production build, and Cloudflare Pages are all green for commit be3c8ef.

[bo-iliev]

News card display follow-up ✅

The News cards had a 1200×630 cover rendered inside a padded, stretched gray panel. At desktop size, the actual cover was only 277×145 inside a 309×204 media cell, which created the visible letterboxing.

This is now fixed:

• The cover is edge-to-edge with no gray padding.
• Desktop cards use a balanced 40/60 image-content split with minimal safe-area cropping.
• Tablet and mobile cards stack vertically and preserve the exact 40:21 cover ratio.
• Hover scaling remains subtle, and the first cover is prioritized for loading.
• The change is presentation-only; the 42 generated News assets were not modified.

Open the updated News page on the immutable preview

Desktop and 390px mobile layouts were visually checked. Tests, production build, and Cloudflare Pages are all green for commit d51bd4d.

[bo-iliev]

Guide category badge follow-up ✅

The category badges were stretching across the full card because the refreshed card body uses a flex-column layout. They now opt out of flex stretching and retain their compact chip width, matching the old presentation.

• Security: ~71px wide
• Infrastructure as Code: ~152px wide
• Verified at desktop and 390px mobile widths
• Presentation-only; no generated cover assets changed

Open the updated Guides page on the immutable preview

Tests, production build, and Cloudflare Pages are all green for commit 68ba5f8.