feat(web): add dynamic og image generation for blog articles

[ComputelessComputer]

No description provided.

[netlify]

✅ Deploy Preview for hyprnote ready!

Name	Link
🔨 Latest commit	bd995a8
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/692f989b4f6fc400080716b4
😎 Deploy Preview	https://deploy-preview-2084--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.

[netlify]

✅ Deploy Preview for hyprnote-storybook ready!

Name	Link
🔨 Latest commit	bd995a8
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote-storybook/deploys/692f989b9ff9d200084a0879
😎 Deploy Preview	https://deploy-preview-2084--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.

[coderabbitai]

📝 Walkthrough

Walkthrough

The change modifies article card rendering in the blog view to compute per-article ogImage values derived from article.coverImage or constructed from metadata (type, title, author, date). This replaces prior conditional rendering of article.coverImage with consistent image rendering using the computed ogImage.

Changes

Cohort / File(s)	Change Summary
Article image rendering apps/web/src/routes/_view/index.tsx	Modified BlogSection to compute per-article ogImage inside the mapping loop; now derives from article.coverImage or constructs a URL with article metadata. Replaced conditional rendering block with consistent image element using computed ogImage.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12-15 minutes

• Review the ogImage construction logic when article.coverImage is absent to ensure correct URL format and parameter passing
• Verify that the conditional rendering replacement maintains feature parity and doesn't break edge cases (e.g., missing metadata fields)

Possibly related PRs

• landing #1627 — Adds coverImage front-matter to multiple articles, providing the source data that this PR depends on for ogImage derivation
• cleanup #1618 — Previously modified article coverImage handling by making it required and removing runtime derivation; understand the context of this change to ensure consistency

Suggested reviewers

• yujonglee

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, so the description check cannot verify relevance to the changeset.	Add a pull request description explaining the motivation and implementation details of the dynamic og image generation feature.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: implementing dynamic Open Graph image generation for blog articles, which matches the primary modification of computing ogImage per article.

✨ 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/dynamic-og-image-generation

---

_{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/index.tsx (2)

1947-1953: Add a fallback chain for alt to avoid missing alt text.

Right now alt={article.display_title} can end up undefined if display_title isn’t set, which isn’t great for accessibility on a non‑decorative image.

You can mirror the heading fallback:

-                  <img
-                    src={ogImage}
-                    alt={article.display_title}
+                  <img
+                    src={ogImage}
+                    alt={article.display_title || article.meta_title || article.title}
                     className="w-full h-full object-cover group-hover:scale-105 transition-all duration-500"
                   />

---

1935-1937: Extract the OG base URL to a constant to reduce duplication.

The OG URL fallback is well-encoded and guards optional fields correctly. However, the "https://hyprnote.com/og" base URL is hard-coded across multiple files (index.tsx, blog/$slug.tsx, templates, gallery, docs, shortcuts, changelog). Extract this to a shared constant so it can be updated in one place without code changes.

📜 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 f4c37ad and bd995a8.

📒 Files selected for processing (1)

• apps/web/src/routes/_view/index.tsx (2 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/index.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