feat: new home page, blog engine, blog layouts and routing engine

[ovflowd]

Description

This PR introduces several changes on the next-data pieces of the Node.js Website, including:

• Refactor on Promise-chains of next-data Providers
• Refactor of Blog Data Generators, Providers and Fetch methods
• Introduced new Pagination System for the Blog
  • The old Pagination System (years) became dedicated categories, so that they're still accessible on the web
• Refactored how we allow dynamic URLs to be generated (DYNAMIC_ROUTES)
• Cleanup on Blog-related code
• Cleanup on constants (including Sentry constants, which are now separated to a dedicated file)
• Introduced the Base Blog Category Layout
• Fixed a few components (such as Preview, and Blog Cards)
  • Preview component content now resizes by the usage of Container Queries
• Introduced the Blog Post Layout and Content Layout
• Made adjustments on some Components and styles for some Layouts
• Redesigned the Home Page based on feedback from the TSC

Screenshots

Branch Preview

https://nodejs-org-git-feat-new-blog-pagination-system-openjs.vercel.app

Validation

Blog Pages should work as expected, Pagination should work as expected, with the caveats that pages are now different routes.

[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	Jan 14, 2024 3:04pm

[github-actions]

Lighthouse Results

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

[bmuenzenmeyer]

looking good so far - only had time for a quick pass

[canerakdas]

According to the Lighthouse report, there were two minor problems with the blog detail page in mobile resolution, I updated them;

• Links must be distinguishable without relying on color [MDX Anchors]
  • https://dequeuniversity.com/rules/axe/4.8/link-in-text-block
• Tap targets are not sized appropriately [Metabar Anchors]
  • https://developer.chrome.com/docs/lighthouse/seo/tap-targets/

Apart from these two situations, the only thing that caught my attention during my checks is that the blog post layout is not centered. We can center this layout, but the background gradient is cut when it exceeds the maximum content width. So I'm not sure about this solution 🤔

[bmuenzenmeyer]

Let's keep this moving - momentum is building!

[bmuenzenmeyer]

A tiny design nit is that the Copy to Clipboard button is very prominent in the smaller coding snippets, which I find distracting from the content. This should be a de-emphasized control in my opinion.

Compare to the homepage which uses a de-emphasized version

[shanpriyan]

Just few nits. LGTM 🚀

[shanpriyan]

A tiny design nit is that the Copy to Clipboard button is very prominent in the smaller coding snippets, which I find distracting from the content. This should be a de-emphasized control in my opinion.

Compare to the homepage which uses a de-emphasized version

Can we can just use the copy icon and remove the Copy to clipboard text ? 🤔

[AugustinMauroy]

LGTM !

[ovflowd]

A tiny design nit is that the Copy to Clipboard button is very prominent in the smaller coding snippets, which I find distracting from the content. This should be a de-emphasized control in my opinion.

Compare to the homepage which uses a de-emphasized version

Is the ask here to have it using the Home Page colors?

[ovflowd]

Anyhow, @bmuenzenmeyer feel free to open an issue or PR regarding the Copy to Clipboard button as it is unrelated to this PR. It already became convoluted enough 😅