Add OG img generation

[oscarvz]

Add OG image generation

Implements automatic Open Graph image generation for all documentation pages using astro-og-canvas, matching the implementation from the blog.

Changes

• Added dynamic OG image endpoint at src/pages/og/[...route].ts that generates images for all docs
• Created custom Head component to inject OG and Twitter Card meta tags
• Added brand assets (og-bg.png, fp-logo.png) for consistent Fiberplane branding
• Updated astro.config.ts to externalize canvaskit-wasm for Cloudflare Workers compatibility

Also removed a color override that resulted in a jarring difference in border colors. 🎨

Result

Generates 28 OG images (1200×630) with Geist Sans typography for social media previews.

---

Summary by CodeRabbit

• New Features

  • Documentation pages now generate Open Graph and Twitter card images and include corresponding meta tags for richer sharing previews.

• Chores

  • Updated site configuration and build settings; added runtime packages to support image generation and adjusted ignore rules.

• Style

  • Minor CSS theme tweak for light theme color token.

[coderabbitai]

Walkthrough

Adds Open Graph image generation: new OG route that renders images from docs metadata, a Head component injecting og:image/twitter:image, Astro config updates (site, Head integration, vite SSR externalization), two new dependencies, and a .gitignore entry for .wrangler/. Also removes one CSS variable in light theme.

Changes

Cohort / File(s)	Summary
Gitignore \.gitignore	Added .wrangler/ ignore entry under a wrangler section.
Build & Dependencies package.json, astro.config.ts	Added astro-og-canvas and canvaskit-wasm dependencies; set site: "https://docs.fiberplane.com"; registered Head component for Starlight; added vite.ssr.external entry to externalize canvaskit-wasm.
OG Image feature src/components/Head.astro, src/pages/og/[...route].ts	New Head.astro injecting og:image and twitter:image meta tags (computes route from Starlight entry, falls back to index); new dynamic route src/pages/og/[...route].ts that builds pages map from getCollection("docs") and exports getStaticPaths and GET via OGImageRoute to produce PNG OG images with custom fonts, layout, and assets.
Styling src/styles/custom.css	Removed the --sl-color-hairline declaration from the :root[data-theme='light'] block.

Sequence Diagram(s)

sequenceDiagram
    participant Browser
    participant DocsPage as "Docs Page"
    participant HeadComp as "Head Component"
    participant OGRoute as "/og/* handler"
    participant OGGen as "OG Image Generator"

    Browser->>DocsPage: GET /docs/... (render)
    DocsPage->>HeadComp: render head (Starlight entry)
    HeadComp->>HeadComp: compute route -> `/og/{route}.png`
    HeadComp->>Browser: emit meta tags (og:image, twitter:image)

    Note over Browser,OGRoute: Social preview or crawler requests OG image
    Browser->>OGRoute: GET /og/{route}.png
    OGRoute->>OGRoute: fetch docs collection, map route -> metadata
    OGRoute->>OGGen: generate PNG (title, desc, fonts, logo, bg)
    OGGen->>Browser: return image/png

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

• Pay extra attention to:
  • src/pages/og/[...route].ts: route normalization, getCollection("docs") usage, and correctness of exported getStaticPaths/GET.
  • src/components/Head.astro: access to Astro.locals.starlightRoute.entry and fallback logic.
  • astro.config.ts: integrations components mapping and vite.ssr.external format for canvaskit-wasm.
  • Dependency compatibility for astro-og-canvas and canvaskit-wasm.

Poem

🐰 I nibble routes and stitch them bright,
PNG petals in the morning light.
A Head, a path, a painted frame,
Docs now pop with shareable name.
Hoppity code — og images take flight! 🎨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding Open Graph image generation for documentation pages, which is the primary focus of all modifications across config, components, and new endpoints.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch og-img

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2ca6d2b and a731f14.

📒 Files selected for processing (1)

• src/components/Head.astro (1 hunks)

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 85215b1 and 2ca6d2b.

⛔ Files ignored due to path filters (3)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
• src/assets/fp-logo.png is excluded by !**/*.png
• src/assets/og-bg.png is excluded by !**/*.png

📒 Files selected for processing (6)

• .gitignore (1 hunks)
• astro.config.ts (3 hunks)
• package.json (1 hunks)
• src/components/Head.astro (1 hunks)
• src/pages/og/[...route].ts (1 hunks)
• src/styles/custom.css (0 hunks)

💤 Files with no reviewable changes (1)

• src/styles/custom.css

🔇 Additional comments (1)

.gitignore (1)

26-28: LGTM!

Adding .wrangler/ to the ignore list is appropriate and necessary for Cloudflare Workers tooling. The placement and formatting align with existing patterns in the file.