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-root process.cwd() environments. Exports alt, size, and contentType per Next.js convention.
  • apps/sim/app/page.tsx (modified): Removes the static images array from both the openGraph and twitter metadata blocks, correctly relying on Next.js's convention-based file to auto-populate those tags.
  • Unused bold font: SeasonSans-Bold.woff is loaded from disk on every request, but no text element uses fontWeight: 700 — every text node uses fontWeight: 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.woff is 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
Loading

Last reviewed commit: "feat: add dynamicall..."