feat(og): add support for shortcuts og images

[ComputelessComputer]

No description provided.

[netlify]

✅ Deploy Preview for hyprnote-storybook ready!

Name	Link
🔨 Latest commit	9ad6883
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote-storybook/deploys/6930edb3fb9ad700081df1ee
😎 Deploy Preview	https://deploy-preview-2106--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 ready!

Name	Link
🔨 Latest commit	9ad6883
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/6930edb31751b300081d3835
😎 Deploy Preview	https://deploy-preview-2106--hyprnote.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.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR extends the OG image generation system to support a new "shortcuts" content type with a dedicated schema and rendering template. Existing template rendering is refactored to use a shared generic renderer, and gallery pages now derive the correct ogType (templates or shortcuts) for accurate image generation.

Changes

Cohort / File(s)	Summary
OG image generation enhancements apps/web/netlify/edge-functions/og.tsx	Added shortcutsSchema to the discriminated OGSchema union. Introduced renderShortcutsTemplate() and renderGenericTemplate() as a shared template renderer. Refactored renderTemplatesTemplate() and added renderDocsTemplate() wrapper to use the generic renderer. Updated main handler flow to dispatch shortcuts rendering and include shortcuts in custom font conditions.
Gallery route updates apps/web/src/routes/_view/gallery/$type.$slug.tsx	Updated OG image URL generation to derive ogType dynamically ("templates" for templates, "shortcuts" for shortcuts) instead of using a static "gallery" value.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Schema validation and discriminated union handling for new shortcuts type
• Generic template abstraction correctness and consistency across render paths
• Handler dispatch flow for the new shortcuts variant
• Proper ogType derivation logic in gallery route

Possibly related PRs

• add changelog template for dynamic OG images #1776: Directly related; both PRs modify the OGSchema discriminated union to add new variants with corresponding render paths in the og.tsx edge function.
• feat(og): add cache headers for generated images #2086: Related; both modify the og.tsx image-generation flow (this PR adds shortcuts schema/dispatch; the other adds cache headers to ImageResponse).
• feat(web): add unified /gallery route and /shortcuts SEO route #1982: Related; both modify the gallery route's og:image derivation and add shortcuts content type handling.

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 assess whether a description relates to the changeset.	Add a pull request description explaining the feature, its purpose, and any relevant context for reviewers.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(og): add support for shortcuts og images' clearly and specifically describes the main change - adding OG image support for shortcuts content type.

✨ 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 feat/add-og-image-shortcuts

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

apps/web/src/routes/_view/gallery/$type.$slug.tsx (1)

43-44: Dynamic ogType mapping is correct; consider reusing existing singular→plural mapping

Mapping "template" | "shortcut" to "templates" | "shortcuts" here aligns with the OG edge handler’s expected type values and the new shortcuts schema, and the use of encodeURIComponent on all text fields is appropriate.

If you want to reduce duplication, you could optionally derive ogType from a shared helper (or reuse the contentDir logic used in RightSidebar) so singular/plural mappings stay in sync across the file when new gallery types are added.

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

239-255: Generic OG template renderer refactor is clean and behavior‑preserving

The new renderGenericTemplate plus renderDocsTemplate/renderTemplatesTemplate wrappers nicely deduplicate the common layout while preserving the existing docs/templates behavior (header text, category source, title, optional description).

If you want a tiny follow‑up cleanup, needsCustomFonts could be simplified to something like params.type !== "meeting" now that all other branches use this generic layout or other custom‑font templates, but this is purely optional.

Also applies to: 257-273

📜 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 879c88c and 9ad6883.

📒 Files selected for processing (2)

• apps/web/netlify/edge-functions/og.tsx (5 hunks)
• apps/web/src/routes/_view/gallery/$type.$slug.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/src/routes/_view/gallery/$type.$slug.tsx
• 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

🔇 Additional comments (1)

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

19-24: Shortcuts OG schema, parsing, rendering, and handler wiring look consistent

• shortcutsSchema correctly mirrors templatesSchema (title, category, optional description) with type: "shortcuts".
• OGSchema includes the shortcuts variant in the discriminated union, so TypeScript narrowing in the handler remains sound.
• parseSearchParams’s type === "shortcuts" branch reads the same fields as templates and validates them via OGSchema.safeParse, giving the same failure mode (400) for invalid or missing params.
• renderShortcutsTemplate is a thin wrapper over the generic layout with a clear header label (Hyprnote / Shortcuts), which keeps styling aligned with templates/docs.
• Handler dispatch and needsCustomFonts both now include "shortcuts", so shortcuts use the same font pipeline and rendering path as the other text-heavy types.

No blocking issues here; this end‑to‑end wiring for shortcuts looks solid.

Also applies to: 46-46, 100-107, 275-282, 310-311, 316-316