feat: introduced changelog modal on downloads

[ovflowd]

Description

This PR introduces the support of ChangelogModals within the Download's page of the redesigned Node.js Website

Note that this PR might increase the client bundle size 🤔 we should probably check how much of an increase it is.

Validation

The "changelog button" should open a changelog with the correctly rendered MDX data.

[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 25, 2024 7:20pm

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟠 78	🟢 90	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 91	🟢 100	🟢 91	🔗
/en/about/previous-releases	🟢 99	🟢 90	🟢 100	🟢 92	🔗
/en/download	🟢 99	🟠 89	🟢 100	🟠 82	🔗
/en/blog	🟢 100	🟢 90	🟢 100	🟢 92	🔗

[ovflowd]

Note that this version of the ChangelogModal does not include the avatars of all contributors that made a release happen. We still need to hook this into some internal utility for getting the names of all release authors.

I remember @richardlau or @targos mentioning this, but I might be remembering this incorrectly 🤔

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	79.29% (452/570)	76.19% (144/189)	69.91% (79/113)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
90	0 💤	0 ❌	0 🔥	4.652s ⏱️

[mikeesto]

On mobile there's a "X" in the top right to close the modal. I think it would be good to keep it for wider viewports too?

[ovflowd]

I compared the page source sizes for the two versions:

With changelog modal; Source size: 193.85 KB

Beta without changelog modal; Source size: 86.65 KB

In addition, when I check with @next/bundle-analyzer, the gzipped dimensions are as follows;

Server feat/changelog-modal;

Server `main`; Due to the nature of our page structure, it is not clear exactly what these parts affect. There seems to be an increase only on `../app/[locale]/[[...path]]/page.js`.

Client feat/changelog-modal;

Client `main`; I'm not sure exactly how we can reduce the size here, but I'll check it out as well (if it's possible) 👀

If you can investigate that'd be great! It is indeed a big bundle increase, mostly (I assume) because it is also bundling the Shiki WASM and Languages and Theme on the client-side 🤔

Can you check what's the bundle difference if we removed Shiki from the ChangelogModal?

[targos]

Something feels weird with how the page seems to disappear entirely with no UI element to close the modal.

[ovflowd]

@canerakdas I believe we need to reduce blur and add a close button. Also the changelog should only open after finishing fetching the data (IMO)

[canerakdas]

I think it looks better/accessible now, you can check it in the Vercel preview 👀 cc @ovflowd

Before:

After:

Before/Dark:

After/Dark:

[ovflowd]

Awesome! Would it also bee too much to ask you to check into what Richard mentioned (changelog-maker pulls the information out of the git commits.) for getting the full list of GitHub usernames for the "AvatarGroup" on the modal?

[ovflowd]

I believe we can merge this as it is; But we need reviews cc @bmuenzenmeyer @nodejs/nodejs-website

[bmuenzenmeyer]

small accessibility bug to fix

node-focus-bug.mov

[canerakdas]

Ah, I completely missed this, I solved it by wrapping it with a button. If we think we may encounter such situations more often, it seems like we can use Radix primitive slot

[bmuenzenmeyer]

🤝