feat: download snippet generation

[ovflowd]

This PR attempts to introduce a system for dynamic download snippet generation. With the increasing number of different version managers, package managers, and installation methods for Node.js, we want to ease maintainability, translation, and viewing how the snippet would look with syntax highlighting.

This API allows these files to be loaded on demand, and then Shiki and MDX transpile them on the client side. This requires having Shiki and the MDX compiler present on the client side (which they already are).

This change introduces the ability to test the snippets in a sandboxed environment and, in the future, have every CodeBox be loaded on the client-side dynamically (including Learn codeboxes) on-demand without requiring them to be built during build time.

The trade-off is that the client side needs to fetch these snippets, but this request is prefetched and cached.

This introduces the API route, data generators and providers + replaces the usage of the old getDownloadSnippet with the new mechanism.

This PR also...

• It makes Shiki compilation a fully synchronous process, removing the need for some asynchronous pieces and top-level awaits and being more client-side friendly. It also reduces ticks as multiple MDX compilation processes will not need to resolve Promises/ticks
• Reduces usage of useDetectOS and optimizes it to use synchronous OS detection and reduce layout shift and state change as much as possible, keeping the initial state as clean as possible
• Update the ReleaseCodeBox so that it can render the CodeBox in a fully synchronous way which is React-friendly and kills the CodeBox loading state / being empty/shifting values
• Updates the Select component in such a way that it removes the flashing/initial state being empty for a while
• Multiple minor bundle optimization and initial rendering improvements related to Downloads pages and overall App
• Fixes Vercel Environment variables and errors on first builds (consuming wrong sources during self-consumption process)
• Fixes Avatar rendering and placement / optimizing the rendering

[vercel]

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

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Dec 24, 2024 7:00pm

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	84.47% (631/747)	65.24% (184/282)	83.91% (120/143)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
137	0 💤	0 ❌	0 🔥	5.05s ⏱️

[MattIPv4]

Note that this (at the time being) prevents the generation of the CodeBox for static exports since the combination of language+node version+installation method would blow the generation away.

This concerns me -- I would think we would absolutely want to prioritise these snippets being in the HTML sent over the wire initially as they're rather crucial content, and likely content that bots etc. would want to index/scrape too.

miss click