OG image with netlify function

[yujonglee]

No description provided.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR introduces an Open Graph image generation feature using Netlify Edge Functions. Changes include VSCode configuration updates to enable Deno tooling, registration of a new edge function in Netlify config, a Deno configuration file for the edge functions directory, and a new edge function that generates OG images from query parameters.

Changes

Cohort / File(s)	Summary
VSCode Configuration .vscode/settings.json	Enabled Git ignore exclusions in explorer and search, added Deno tooling integration with edge function paths enabled
Netlify Infrastructure apps/web/netlify.toml	Registered new edge function "og" at path "/og"
Deno Configuration apps/web/netlify/edge-functions/deno.json	Created new Deno config with lock disabled and JSX support for React 18
Edge Function Implementation apps/web/netlify/edge-functions/og.tsx	New edge function handler that generates Open Graph images from query parameters (title, description) with styled output and manual cache strategy

Sequence Diagram

sequenceDiagram
    participant Client
    participant EdgeFunction as Edge Function: /og
    participant ImageResponse

    Client->>EdgeFunction: GET /og?title=...&description=...
    EdgeFunction->>EdgeFunction: Extract title & description<br/>from query params
    EdgeFunction->>ImageResponse: Render styled image with<br/>title, description, watermark
    ImageResponse->>EdgeFunction: Return generated image
    EdgeFunction->>Client: 200 OK<br/>(image/png)

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• og.tsx requires attention for JSX syntax correctness and ImageResponse API usage, though the logic is straightforward
• Verify that query parameter defaults ("Hyprnote") and styling match intended design
• Confirm Deno configuration and path setup align with Netlify edge function requirements

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Description check	❓ Inconclusive	No pull request description was provided by the author, making it impossible to evaluate whether the description relates to the changeset.	Add a description explaining the purpose of the OG image generation, how it works, and why this implementation was chosen.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'OG image with netlify function' clearly describes the main change: adding Open Graph image generation using a Netlify Edge Function, which matches the changeset.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch add-netlify-og-edge-function

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (1)

apps/web/netlify/edge-functions/og.tsx (1)

9-71: Consider adding error handling for ImageResponse.

The edge function lacks error handling if ImageResponse construction fails. While rare, runtime errors in production edge functions should be caught and handled gracefully.

Consider wrapping in try-catch:

export default function handler(req: Request): Response {
  try {
    const url = new URL(req.url);
    const title = url.searchParams.get("title") || "Hyprnote";
    const description = url.searchParams.get("description") || "AI Meeting Notes";

    return new ImageResponse(
      // ... JSX ...
    );
  } catch (error) {
    console.error("OG image generation failed:", error);
    return new Response("Internal Server Error", { status: 500 });
  }
}

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8f94f2b and d90f9b2.

📒 Files selected for processing (4)

• .vscode/settings.json (2 hunks)
• apps/web/netlify.toml (1 hunks)
• apps/web/netlify/edge-functions/deno.json (1 hunks)
• apps/web/netlify/edge-functions/og.tsx (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: fmt

🔇 Additional comments (3)

apps/web/netlify.toml (1)

9-11: LGTM! Edge function registration is correct.

The edge function configuration properly registers the OG image handler at /og, which matches the path exported in the edge function's config object.

.vscode/settings.json (1)

27-31: LGTM! Deno tooling properly configured.

The Deno settings are correctly scoped to the edge functions directory, enabling appropriate linting and language support for the new edge function development.

apps/web/netlify/edge-functions/og.tsx (1)

1-2: I need more specific information about the og_edge package. Let me search for the current version details:

No version update needed; og_edge@0.0.6 is currently the latest stable.

The og_edge package is at version 0.0.6, marked as the latest release, and no newer versions exist. While this is a pre-1.0 release, it remains the current stable version for Netlify Edge Functions OG image generation. The library appears inactive (last release 2 years ago), but this is the recommended version to use.