feat(og): add cache headers for generated images

[ComputelessComputer]

this pr is made to fix the following issue.

local dev

prod

the og endpoint seems to return the same image even though they're different.

[netlify]

✅ Deploy Preview for hyprnote-storybook ready!

Name	Link
🔨 Latest commit	6a7ad6a
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote-storybook/deploys/692fa01109bd020008253451
😎 Deploy Preview	https://deploy-preview-2086--hyprnote-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for hyprnote canceled.

Name	Link
🔨 Latest commit	6a7ad6a
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/692fa301d4bb5f51ebedd530

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR modifies the Netlify OG image edge function to add caching headers. Instead of directly returning the ImageResponse, the response is stored in a variable, three Netlify-specific caching headers are added (Netlify-CDN-Cache-Control, Cache-Control, and Netlify-Vary), then returned.

Changes

Cohort / File(s)	Change Summary
OG Image Response Caching apps/web/netlify/edge-functions/og.tsx	Refactors ImageResponse return to intermediate variable; adds Netlify-CDN-Cache-Control (public, s-maxage=31536000), Cache-Control (public, max-age=31536000, immutable), and Netlify-Vary (query) headers for long-term CDN caching.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Straightforward header addition with no logic changes
• Single file modification focused on response customization
• Existing font loading logic remains untouched

Possibly related PRs

• OG image with netlify function #1700: Introduces the OG image edge function that this PR augments with caching headers.
• Simplified changelog OG image generation #1858: Modifies ImageResponse handling and response flow in the same edge function file.
• add changelog template for dynamic OG images #1776: Updates ImageResponse construction and return patterns in the same edge function, including font handling.

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	No description was provided, making it impossible to assess whether it relates to the changeset.	Add a description explaining the purpose of the cache headers and their expected impact on performance and CDN behavior.
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.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding cache headers to the OG image generation function for improved performance.

✨ 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 c-branch-20

---

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

[ComputelessComputer]

@yujonglee need to purge cache in netlify for og images

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

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

319-323: Header mutation pattern looks good; double‑check cache TTL trade‑offs

Using an intermediate ImageResponse and setting Netlify-CDN-Cache-Control, Cache-Control, and Netlify-Vary on it is a clean way to honor config.cache = "manual" and get CDN/browser + query-based caching in place. The semantics look correct.

One thing to confirm: max-age/s-maxage=31536000 with immutable effectively treats each URL (including query) as frozen for a year. If blog/docs/changelog content can change while keeping the same OG URL, you may want a shorter TTL or a versioned query parameter to avoid very stale previews.

📜 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 b3f3a1a and 6a7ad6a.

📒 Files selected for processing (1)

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

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props, just inline them instead.
Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
If there are many classNames with conditional logic, use cn (import from @hypr/utils). It is similar to clsx. Always pass an array and split by logical grouping.
Use motion/react instead of framer-motion.

Files:

• apps/web/netlify/edge-functions/og.tsx

⏰ 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). (5)

• GitHub Check: Redirect rules - hyprnote
• GitHub Check: Header rules - hyprnote
• GitHub Check: Pages changed - hyprnote
• GitHub Check: ci
• GitHub Check: fmt