Open graph dynamic image generation

[bmuenzenmeyer]

Description

I've started dynamic open graph image generation.

This is still heavily WIP, and I need help landing it.

• route location correct? I tried adding route.tsx elsewhere but couldn't figure it out. Vercel examples are way simpler than our structure.
• how to add the OG images dyanmically into page metadata, I imagine via https://github.com/nodejs/nodejs.org/blob/main/next.dynamic.mjs#L192
• align on decisions within.

This process uses documentation found within https://vercel.com/docs/functions/og-image-generation#getting-started and multiple techniques from https://vercel.com/docs/functions/og-image-generation/og-image-examples combined.

Validation

http://localhost:3000/en/next-data/og?title=Announcing%20the%20new%20Node.js%20website&type=announcement

there are IMAGES! 😄

Related Issues

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run npx turbo lint to ensure the code follows the style guide. And run npx turbo lint:fix to fix the style errors if necessary.
• I have run npx turbo format to ensure the code follows the style guide.
• I have run npx turbo test to check if all tests are passing.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 1, 2024 3:43pm

[bmuenzenmeyer]

self-review

[bmuenzenmeyer]

this now adds the following to every page

here's a comparison of post Preview and the og image

this isn't exact. I tried using bg-neutral-950 as the tw base and it broke. I might play with it, but welcome any TW-fu

do we want to constrict this to only blog posts? right now it's on every page

even regular pages

[bmuenzenmeyer]

okay - this is good enough that I'd love a more thorough poke at it

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟠 77	🟢 98	🟠 83	🟢 91	🔗
/en/about	🟢 100	🟢 91	🟠 83	🟠 83	🔗
/en/about/previous-releases	🟢 100	🟢 96	🟠 83	🟢 92	🔗
/en/download	🟢 99	🟢 97	🟠 83	🟢 91	🔗
/en/blog	🟢 97	🟢 96	🟠 83	🟢 92	🔗

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	80.18% (437/545)	79.09% (140/177)	73.07% (76/104)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
88	0 💤	0 ❌	0 🔥	4.426s ⏱️

[ovflowd]

FYI, this branch needs to be rebased

[bmuenzenmeyer]

@ovflowd i need guidance on if any of this is still feasible with static export

see https://github.com/nodejs/nodejs.org/actions/runs/8111322926/job/22170364122?pr=6357#step:10:34 - next wants me to statically generate every param - i suppose we have the blog data so it's possible???, but really starts to fight the framework for something that should be dynamic

[ovflowd]

@ovflowd i need guidance on if any of this is still feasible with static export

see nodejs/nodejs.org/actions/runs/8111322926/job/22170364122?pr=6357#step:10:34 - next wants me to statically generate every param - i suppose we have the blog data so it's possible???, but really starts to fight the framework for something that should be dynamic

No, generateStaticParams only means if you want to generate something statically. You don't need to provide any route. Let me make amends to this PR so that it works with the intended approach.

[sentry-io]

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

• ‼️ TypeError: Cannot read properties of undefined (reading 'replace') hexToRGBA(util/hexToRGBA) View Issue

_{Did you find this useful? React with a 👍 or 👎}

[ovflowd]

@bmuenzenmeyer can you make a hotfix?

[bmuenzenmeyer]

hotfixed via 604b4b4