Cookbook renovation (#26885)

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-07 22:04:54 -07:00
parent 6365d6faee
commit d1777d1f6d
16 changed files with 6692 additions and 1693 deletions
@@ -0,0 +1,76 @@
+# Vendor card logo (new brand only)
+
+A new vendor/brand in the cookbook landing grid needs a card logo at
+`docs_new/cards/logos/<org-slug>.png`. **Ask the user for the brand's logo, then generate
+the conforming PNG** — never invent, copy, or hallucinate one, and never ship a
+non-conforming file. Reference: PR #27400 (added `tencent.png` + `poolside.png`).
+
+If the org already has a card/logo, do nothing here — only update the `<Card href>`.
+
+## Spec (match the existing logos exactly)
+
+| Property | Value |
+|---|---|
+| Path | `docs_new/cards/logos/<org-slug>.png` — lowercase, matches the `img=` in the `<Card>` |
+| Canvas | **940 × 525** px |
+| Mode | **RGBA**, fully **transparent** background |
+| Content | **Icon-only** — the brand glyph/mark (the "swirl"), **no wordmark text** |
+| Placement | centered; glyph ≈ 0.33 × width and ≈ 0.50 × height of the canvas |
+
+Why icon-only + transparent: cards render on both light and dark backgrounds, so a baked-in
+(usually black) wordmark vanishes on dark. `deepseek.png` / `ernie.png` are 940×525 RGBA
+exemplars — eyeball your output against them.
+
+## 1. Get the source
+
+Ask the user for the brand logo (SVG preferred → crisp + already transparent; else a high-res
+transparent PNG, or a link to the official press/brand asset). Prefer an **icon-only** source;
+if they only have a full lockup, ask them to crop the glyph, or crop it yourself.
+
+If the user **pasted** an image inline, it may not be on disk — recover the base64 `image`
+block from the session transcript (`~/.claude/projects/<slug>/*.jsonl`) and decode it to a file.
+
+## 2. Generate (Pillow)
+
+There's no system Pillow — use a venv:
+
+```bash
+python3 -m venv /tmp/logo-venv && /tmp/logo-venv/bin/pip install -q Pillow
+```
+
+```python
+from PIL import Image
+src = Image.open("SOURCE").convert("RGBA")        # icon-only, already transparent
+W, H = 940, 525
+target_h = round(H * 0.50)                         # glyph ≈ half the canvas height
+scale = target_h / src.height
+glyph = src.resize((round(src.width * scale), target_h), Image.LANCZOS)
+canvas = Image.new("RGBA", (W, H), (0, 0, 0, 0))   # transparent
+canvas.paste(glyph, ((W - glyph.width) // 2, (H - glyph.height) // 2), glyph)
+canvas.save("docs_new/cards/logos/<org-slug>.png")
+```
+
+Notes:
+- **Wordmark present?** Crop to the glyph first (or ask the user for an icon-only asset). Don't
+  ship text in the logo.
+- **Solid background?** Don't auto-strip it (risky) — ask the user for a transparent source.
+- **SVG source?** Rasterize at high res first (`cairosvg` / `rsvg-convert`), then run the above.
+- If the glyph is much wider than tall, cap by width instead (≈ 0.33 × W) so it doesn't overflow.
+
+## 3. Verify
+
+```bash
+sips -g pixelWidth -g pixelHeight -g hasAlpha docs_new/cards/logos/<org-slug>.png
+# → pixelWidth: 940   pixelHeight: 525   hasAlpha: yes
+```
+
+## 4. Wire + track + validate
+
+```bash
+# Card in the landing grid (keep card order aligned with the docs.json nav order):
+#   <Card title="<NavGroup>" mode="card"
+#         href="/cookbook/<category>/<Vendor>/<Model>"
+#         img="/cards/logos/<org-slug>.png" />
+git add -f docs_new/cards/logos/<org-slug>.png      # root .gitignore ignores *.png repo-wide
+cd docs_new && mint validate && mint broken-links    # confirms the card href + img resolve
+```