feat: open graph redesign

[tomaszantas]

This PR redesigns the OG image from dark (black background, white wordmark) to a light beige theme with per-line yellow highlight strips on the title.

How to test

1. Run pnpm run dev
2. Open in the web browser:

http://localhost:3333/api/og?title=Langfuse-Open+Source+Engineering+LLM+Platform&description=Debug%20AI%20Applications%20and%20Agents%20in%20minutes.%20Spot%20issues%20before%20your%20users%20do.%20Collaborate%20with%20your%20team%20to%20continuously%20improve%20on%20cost,%20latency%20and%20quality.%20Any%20model,%20any%20framework.%20Based%20on%20OpenTelemetry.

Disclaimer: Experimental PR review

Greptile Summary

This PR replaces the dark OG image design with a light-beige theme: per-line yellow highlight strips for the title (rendered via a custom wrapWords splitter), an inline-base64 background PNG, and a simplified footer. The font-size ladder and chunked toDataUrl implementation are well-reasoned for the Edge runtime.

• The section query parameter is no longer read by the route handler, but lib/og-url.ts and its callers (lib/mdx-page.ts, app/faq/[[...slug]]/page.tsx) still append it to every OG URL — the section label silently disappears for all those pages without any cleanup of the dead interface.

Confidence Score: 4/5

Safe to merge after addressing the dead section parameter in the OG URL helper and its callers

One P1 finding: the section interface in lib/og-url.ts and its callers was not cleaned up, leaving a dead parameter that silently drops OG section labels. All other findings are P2.

lib/og-url.ts and app/faq/[[...slug]]/page.tsx still reference the removed section parameter

Important Files Changed

Filename	Overview
app/api/og/route.tsx	Redesigns OG image to light-beige theme with per-line yellow title highlights; removes section param rendering but callers in lib/og-url.ts still append it silently
public/og-bg.png	New background PNG for OG image; used as absolute-positioned base layer with graceful fallback if missing

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[GET /api/og] --> B[Fetch resources in parallel]
    B --> B1[og-bg.png — nullable]
    B --> B2[GeistMono-Medium.ttf]
    B --> B3[Inter-Medium.ttf]
    B1 & B2 & B3 --> C[Parse query params]
    C --> D{title length?}
    D -->|>80 chars| E[fontSize = 42]
    D -->|>40 chars| F[fontSize = 58]
    D -->|>28 chars| G[fontSize = 72]
    D -->|≤28 chars| H[fontSize = 90]
    E & F & G & H --> I[wrapWords → titleLines array]
    I --> J[Render ImageResponse]
    J --> J1{ogBgData?}
    J1 -->|yes| K[Render bg img via toDataUrl]
    J1 -->|no| L[BG_COLOR fallback only]
    K & L --> M[Render title lines with yellow highlights]
    M --> N[Render description]
    N --> O[Render footer]
    O --> P[Return 1200×630 PNG]

Loading

Prompt To Fix All With AI

This is a comment left during a code review.
Path: app/api/og/route.tsx
Line: 53

Comment:
**`section` parameter silently dropped — callers still pass it**

The route no longer reads `searchParams.get("section")`, but `lib/og-url.ts` line 36 still appends `section` to every OG URL, and both `lib/mdx-page.ts` (line 67, passes `sectionTitle` for every MDX page) and `app/faq/[[...slug]]/page.tsx` (line 59, passes `"FAQ"`) continue to use it. The section label that these pages expected to appear in the OG image now silently disappears. If this removal is intentional, the `section` parameter should be cleaned out of `buildOgImageUrl`, `lib/mdx-page.ts`, and `app/faq/[[...slug]]/page.tsx` so the dead interface doesn't mislead future maintainers.

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: app/api/og/route.tsx
Line: 127-157

Comment:
**Title box can overflow without clipping**

The title row div has a fixed `height: TITLE_BOX_H` (200 px) but no `overflow: hidden`. For titles above the 80-char threshold (`fontSize = 42`), `charsPerLine ≈ 39`; a 200-char title produces ~6 lines × ~40 px ≈ 270 px, overflowing into the description area. Adding `overflow: "hidden"` to the title row prevents the content from bleeding down.

```suggestion
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: TITLE_BOX_H,
                padding: "10px 32px",
                overflow: "hidden",
              }}
            >
```

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "clean up" | Re-trigger Greptile}

Greptile also left 1 inline comment on this PR.

[vercel]

@tomaszantas is attempting to deploy a commit to the langfuse Team on Vercel.

A member of the Team first needs to authorize it.

[claude]

Claude Code Review

This pull request is from a fork — automated review is disabled. A repository maintainer can comment @claude review to run a one-time review.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
langfuse-docs	Ready	Preview, Comment	Apr 27, 2026 3:11pm

[felixkrrr]

@claude pls review

[felixkrrr]

@claude pls review