chore(site): add auto-generated og image

[NathanFlurry]

No description provided.

[railway-app]

🚅 Deployed to the rivet-pr-3900 environment in rivet-frontend

Service	Status	Web	Updated (UTC)
frontend-inspector	😴 Sleeping (View Logs)	Web	Jan 14, 2026 at 10:34 pm
website	😴 Sleeping (View Logs)	Web	Jan 14, 2026 at 10:33 pm
frontend-cloud	😴 Sleeping (View Logs)	Web	Jan 14, 2026 at 10:32 pm

[NathanFlurry]

• chore(site): add auto-generated og image #3900 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[claude]

PR Review: Auto-generated OG Images

This PR adds auto-generated Open Graph (OG) images for all content sections using the astro-og-canvas library. Overall, this is a solid implementation with good code organization. Here are my findings:

✅ Strengths

1. Good Code Organization: The shared OG configuration is properly extracted into og-config.ts, promoting DRY principles
2. Comprehensive Coverage: OG images are generated for all major content sections (docs, blog, changelog, guides, learn)
3. Consistent Styling: All OG images share a consistent brand aesthetic with the dark gradient theme
4. Smart Fallbacks: Existing custom images are preserved (e.g., blog posts with custom images use those instead)
5. Proper Integration: OG images are correctly wired into the layout components and page metadata

🔍 Code Quality Observations

Minor Issues

1. Redundant assignment in og-config.ts:9:

   title: title,  // Can be simplified to just: title,

   Modern JavaScript allows shorthand property names when the key matches the variable name.

2. Unused function: The getSectionLabel() function in og-config.ts:38-47 is defined but never used in any of the OG route files. Consider removing it or adding a comment explaining its intended future use.

3. Inconsistent description handling:

   • In docs/[...slug].ts:13, empty string is used as fallback: entry.data.description || ''
   • In guides/[...slug].ts:13, a default string is used: entry.data.description || 'Rivet Guide'
   • Consider standardizing this behavior across all routes

4. Type safety consideration: The pages objects built in each route file could benefit from explicit typing to catch potential issues at compile time.

🎯 Best Practices

Positive patterns:

• ✅ Proper use of Promise.all() for parallel async operations
• ✅ Consistent slug normalization (handling index files)
• ✅ Good separation of concerns between config and route files

Suggestions:

• Consider adding JSDoc comments to the exported functions in og-config.ts to document the expected format and usage
• The logo path ./public/icons/android-chrome-512x512.png is relative - ensure this works correctly during build time

🔒 Security & Performance

• ✅ No security concerns identified
• ✅ Static generation approach is optimal for performance
• ✅ No user input is directly used in image generation (all from trusted content collections)

📝 Documentation

The PR description is empty. Consider adding:

• What problem this solves (improved social media sharing)
• Example of what the generated OG images look like (screenshot)
• Any configuration options available
• How to test locally

🧪 Testing Recommendations

To verify the implementation:

1. Build the site and check that OG images are generated at expected paths
2. Test with social media preview tools (Twitter Card Validator, Facebook Debugger)
3. Verify fallback behavior when custom images exist vs. auto-generated
4. Check that index routes (empty slug) work correctly

📦 Dependencies

The PR adds:

• astro-og-canvas@^0.10.0
• canvaskit-wasm@^0.40.0

These are standard, well-maintained packages appropriate for the use case. The canvaskit-wasm package adds ~2.5MB but this is reasonable for server-side image generation.

✨ Verdict

Approved - This is a well-implemented feature that will improve the social media presence of the Rivet documentation. The code quality is good with only minor nitpicks that don't block merging. Consider addressing the unused function and standardizing description fallbacks in a follow-up if desired.

Nice work! 🎉

[pkg-pr-new]

More templates

• actor-actions
• example-ai-agent
• example-ai-and-user-generated-actors-freestyle
• chat-room
• example-cloudflare-workers
• example-cloudflare-workers-hono
• example-cloudflare-workers-inline-client
• cross-actor-actions
• example-cursors
• example-cursors-raw-websocket
• custom-serverless
• example-sqlite
• example-elysia
• example-experimental-durable-streams-ai-agent
• hello-world
• example-hono
• hono-react
• example-kitchen-sink
• multi-region
• native-websockets
• next-js
• example-raw-fetch-handler
• example-raw-websocket-handler
• example-raw-websocket-handler-proxy
• example-react
• scheduling
• state
• example-stream
• example-trpc

@rivetkit/cloudflare-workers

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/cloudflare-workers@3900

@rivetkit/db

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/db@3900

@rivetkit/framework-base

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/framework-base@3900

@rivetkit/next-js

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/next-js@3900

@rivetkit/react

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/react@3900

rivetkit

pnpm add https://pkg.pr.new/rivet-dev/rivet/rivetkit@3900

@rivetkit/sql-loader

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sql-loader@3900

@rivetkit/virtual-websocket

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/virtual-websocket@3900

@rivetkit/engine-runner

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner@3900

@rivetkit/engine-runner-protocol

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner-protocol@3900

commit: 926aa8d