feat: add newly designed og for the landing by adithyaakrishna · Pull Request #3652 · simstudioai/sim
Greptile Summary
This PR adds a dynamically generated Open Graph image for the landing page using Next.js's opengraph-image.tsx convention, replacing the previously static image reference in the page metadata. The new file renders a branded 1200×630 image using next/og (ImageResponse) with the Season Sans custom font, decorative colored blocks, the Sim logo SVG, and feature pill badges.
Key changes:
apps/sim/app/opengraph-image.tsx(new): Generates the OG image dynamically with a dual-path font loader that handles both monorepo-root and app-rootprocess.cwd()environments. Exportsalt,size, andcontentTypeper Next.js convention.apps/sim/app/page.tsx(modified): Removes the staticimagesarray from both theopenGraphandtwittermetadata blocks, correctly relying on Next.js's convention-based file to auto-populate those tags.- Unused bold font:
SeasonSans-Bold.woffis loaded from disk on every request, but no text element usesfontWeight: 700— every text node usesfontWeight: 500. This should either be removed or leveraged.
Confidence Score: 3/5
- Safe to merge with one minor fix — the unused bold font load should be removed to avoid a wasteful file read on every OG image request.
- The overall approach is correct and follows Next.js conventions. The main concern is that
SeasonSans-Bold.woffis loaded on every request but never actually used in any rendered text element, which is a small but unnecessary inefficiency. No security, type-safety, or correctness issues beyond this. - apps/sim/app/opengraph-image.tsx — unused bold font load and minor inconsistency in array reversal style.
Important Files Changed
| Filename | Overview |
|---|---|
| apps/sim/app/opengraph-image.tsx | New OG image generation file using next/og. Contains an unused bold font load (fontBold loaded but fontWeight 700 never applied to any text element), and a minor inconsistency in how COLORS are reversed. |
| apps/sim/app/page.tsx | Static OG and Twitter image entries removed from metadata; Next.js will now auto-populate these from the opengraph-image.tsx convention file. Clean change with no issues. |
Sequence Diagram
sequenceDiagram
participant Client as Browser / Social Platform
participant Next as Next.js Edge Runtime
participant FS as File System (fonts)
participant Satori as next/og (Satori)
Client->>Next: GET /opengraph-image
Next->>FS: fs.access(primary font dir)
alt Primary path exists
FS-->>Next: OK
else Fallback
FS-->>Next: ENOENT
Note over Next: Switch to fallback font dir
end
Next->>FS: readFile(SeasonSans-Medium.woff)
Next->>FS: readFile(SeasonSans-Bold.woff)
FS-->>Next: fontMedium, fontBold buffers
Next->>Satori: ImageResponse(JSX, { fonts })
Satori-->>Next: PNG (1200×630)
Next-->>Client: image/png response
Last reviewed commit: "feat: add dynamicall..."