feat: write real meta descriptions and shorten the homepage title

[limonte]

Closes #254 — the remaining, non-mechanical half. (#266 did the Open Graph tags.)

Problem

meta description was a copy of <title>, so recipe pages described themselves in 1–4 words:

<title>Colored Toasts</title>
<meta name="description" content="Colored Toasts" />

Google discards descriptions that thin and writes its own snippet from page text — and there is no page text, since the site is CSR (#253). The homepage had the opposite problem: a 118-character title, truncated at ~60 in results, duplicated verbatim as its description.

Changes

partials/head.html — description is now its own param, feeding meta description, og:description and twitter:description.

tools/generate-recipe-html.mjs — a description per recipe. I wrote each from the recipe's actual source rather than from its title, so they name the real technique:

Recipe	Description
Colored Toasts	Create colored SweetAlert2 toast notifications with Swal.mixin(), iconColor and a timer progress bar.
Draw Attention	Make a SweetAlert2 popup shake instead of closing when the backdrop is clicked, using allowOutsideClick and animate.css.
Blurred Backdrop	Blur the page behind a SweetAlert2 popup with a CSS filter applied while swal2-shown is active.
Crop User Image	Let users crop an image inside a SweetAlert2 popup with Cropper.js, updating a live preview as they drag.

(The full set is in the diff.) Reading the sources changed some of these — the blurred-backdrop recipe uses a plain filter on the page content, not backdrop-filter, which is what I'd have written from the name alone.

Recipe titles get a " - SweetAlert2" suffix, skipped where the title already says SweetAlert2, so there's no "SweetAlert2 + React - SweetAlert2". Breadcrumb names deliberately keep the unsuffixed title.

index.html — title cut 118 → 58 chars; the full tagline moves into the description, where 139 chars fits comfortably.

404.html — its own description.

Verification

Programmatic check across all 23 pages:

• 0 pages where description still equals title
• descriptions 66–139 chars — all inside the useful window, none thin
• titles 19–65 chars — none truncated
• no unreplaced {=$...} placeholders
• breadcrumb JSON-LD still carries the unsuffixed name ('Colored Toasts'), confirming the suffix didn't leak into structured data
• bun run lint and bun run build pass

The one thing to look at

The homepage title change is a judgment call, not a mechanical fix. It goes from:

SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes

to:

SweetAlert2 - beautiful, accessible JavaScript popup boxes

It keeps the brand first and the terms people search for, and stops the tail being cut off mid-phrase. But the homepage title is a ranking-relevant asset, so if you'd rather keep the original wording, that's a one-line revert and the rest of the PR stands on its own.

🤖 Generated with Claude Code