feat: new home page, blog engine, blog layouts and routing engine (#6215)

Co-authored-by: Caner Akdas <[e-mail]>

.github/workflows/build.yml

···
           node-version-file: '.nvmrc'
           cache: 'npm'
 
-      - name: Install NPM packages
-        # We want to avoid NPM from running the Audit Step and Funding messages on a CI environment
+      - name: Install npm packages
+        # We want to avoid npm from running the Audit Step and Funding messages on a CI environment
         # We also use `npm i` instead of `npm ci` so that the node_modules/.cache folder doesn't get deleted
         # We also use `--omit=dev` to avoid installing devDependencies as we don't need them during the build step
         run: npm i --no-audit --no-fund --userconfig=/dev/null --omit=dev

.github/workflows/lint-and-tests.yml

···
           node-version-file: '.nvmrc'
           cache: 'npm'
 
-      - name: Install NPM packages
-        # We want to avoid NPM from running the Audit Step and Funding messages on a CI environment
+      - name: Install npm packages
+        # We want to avoid npm from running the Audit Step and Funding messages on a CI environment
         # We also use `npm i` instead of `npm ci` so that the node_modules/.cache folder doesn't get deleted
         run: npm i --no-audit --no-fund --ignore-scripts --userconfig=/dev/null
 
···
           node-version-file: '.nvmrc'
           cache: 'npm'
 
-      - name: Install NPM packages
-        # We want to avoid NPM from running the Audit Step and Funding messages on a CI environment
+      - name: Install npm packages
+        # We want to avoid npm from running the Audit Step and Funding messages on a CI environment
         # We also use `npm i` instead of `npm ci` so that the node_modules/.cache folder doesn't get deleted
         run: npm i --no-audit --no-fund --userconfig=/dev/null
 

.github/workflows/translations-pr.yml

···
           node-version-file: '.nvmrc'
           cache: 'npm'
 
-      - name: Install NPM packages
-        # We want to avoid NPM from running the Audit Step and Funding messages on a CI environment
+      - name: Install npm packages
+        # We want to avoid npm from running the Audit Step and Funding messages on a CI environment
         # We also use `npm i` instead of `npm ci` so that the node_modules/.cache folder doesn't get deleted
         run: npm i --no-audit --no-fund --ignore-scripts --userconfig=/dev/null
 

DEPENDENCY_PINNING.md

···
 ## Dependency Pinning
 
-Based on the initial discussions from [this discussion thread](https://github.com/nodejs/nodejs.org/discussions/5491), we've decided to use a more strict strategy for handling NPM dependencies within the Node.js Website.
+Based on the initial discussions from [this discussion thread](https://github.com/nodejs/nodejs.org/discussions/5491), we've decided to use a more strict strategy for handling npm dependencies within the Node.js Website.
 
 The intent here is to prevent the build process, or the website itself, from breaking due to changes in dependencies. As some dependencies do not respect semantic versioning, this is a real concern. Pinning dependencies also ensures that we stay fixed on a specific dependency version. For security updates, Dependabot is still configured to give us security alerts when specific dependencies got security advisories.
 

app/[locale]/[[...path]]/page.tsx

···
 import { MDXRenderer } from '@/components/mdxRenderer';
 import WithLayout from '@/components/withLayout';
 import { ENABLE_STATIC_EXPORT, VERCEL_REVALIDATE } from '@/next.constants.mjs';
-import { DEFAULT_VIEWPORT } from '@/next.dynamic.constants.mjs';
+import { PAGE_VIEWPORT, DYNAMIC_ROUTES } from '@/next.dynamic.constants.mjs';
 import { dynamicRouter } from '@/next.dynamic.mjs';
 import { availableLocaleCodes, defaultLocale } from '@/next.locales.mjs';
 import { MatterProvider } from '@/providers/matterProvider';
···
 
 // This is the default Viewport Metadata
 // @see https://nextjs.org/docs/app/api-reference/functions/generate-viewport#generateviewport-function
-export const generateViewport = async () => ({ ...DEFAULT_VIEWPORT });
+export const generateViewport = async () => ({ ...PAGE_VIEWPORT });
 
 // This generates each page's HTML Metadata
 // @see https://nextjs.org/docs/app/api-reference/functions/generate-metadata
···
 
   const pathname = dynamicRouter.getPathname(path);
 
-  // Retrieves and rewriting rule if the pathname matches any rule
-  const [, rewriteRule] = dynamicRouter.getRouteRewrite(pathname);
+  return dynamicRouter.getPageMetadata(locale, pathname);
+};
 
-  return dynamicRouter.getPageMetadata(
-    locale,
-    rewriteRule ? rewriteRule(pathname) : pathname
+// Gets all mapped routes to the Next.js Routing Engine by Locale
+const mapRoutesForLocale = async (locale: string) => {
+  const routesForLanguage = await dynamicRouter.getRoutesByLanguage(locale);
+
+  return routesForLanguage.map(pathname =>
+    dynamicRouter.mapPathToRoute(locale, pathname)
   );
 };
 
···
 export const generateStaticParams = async () => {
   const paths: Array<DynamicStaticPaths> = [];
 
-  // We don't need to compute all possible paths on regular builds
-  // as we benefit from Next.js's ISR (Incremental Static Regeneration)
-  if (!ENABLE_STATIC_EXPORT) {
-    return [];
-  }
-
-  for (const locale of availableLocaleCodes) {
-    const routesForLanguage = await dynamicRouter.getRoutesByLanguage(locale);
-
-    const mappedRoutesWithLocale = routesForLanguage.map(pathname =>
-      dynamicRouter.mapPathToRoute(locale, pathname)
+  // If static exports are enabled we need to compute all available routes
+  // And then append them to Next.js's Route Engine
+  if (ENABLE_STATIC_EXPORT) {
+    const allAvailableRoutes = await Promise.all(
+      availableLocaleCodes.map(mapRoutesForLocale)
     );
 
-    paths.push(...mappedRoutesWithLocale);
+    paths.push(...allAvailableRoutes.flat());
   }
 
   return paths.sort();
···
   // Configures the current Locale to be the given Locale of the Request
   unstable_setRequestLocale(locale);
 
+  // Gets the current full pathname for a given path
   const pathname = dynamicRouter.getPathname(path);
 
-  if (dynamicRouter.shouldIgnoreRoute(pathname)) {
-    return notFound();
-  }
+  // @todo: once removed the legacy layouts remove the any casting
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const staticGeneratedLayout = DYNAMIC_ROUTES.get(pathname) as any;
 
-  // Retrieves and rewriting rule if the pathname matches any rule
-  const [, rewriteRule] = dynamicRouter.getRouteRewrite(pathname);
+  // If the current patname is a statically generated route
+  // it means it does not have a Markdown file nor exists under the filesystem
+  // but it is a valid route with an assigned layout that should be rendered
+  if (staticGeneratedLayout !== undefined) {
+    // Decorate the Locale and current Pathname to Sentry
+    setTags({ pathname, locale });
+
+    // Metadata and shared Context to be available through the lifecycle of the page
+    const sharedContext = { pathname: `/${pathname}` };
+
+    // Defines a shared Server Context for the Client-Side
+    // That is shared for all pages under the dynamic router
+    setClientContext(sharedContext);
+
+    // The Matter Provider allows Client-Side injection of the data
+    // to a shared React Client Provider even though the page is rendered
+    // within a server-side context
+    return (
+      <MatterProvider {...sharedContext}>
+        <WithLayout layout={staticGeneratedLayout} />
+      </MatterProvider>
+    );
+  }
 
   // We retrieve the source of the Markdown file by doing an educated guess
   // of what possible files could be the source of the page, since the extension
   // context is lost from `getStaticProps` as a limitation of Next.js itself
   const { source, filename } = await dynamicRouter.getMarkdownFile(
     locale,
-    rewriteRule ? rewriteRule(pathname) : pathname
+    pathname
   );
 
   // Decorate the Locale and current Pathname to Sentry

app/[locale]/feed/[feed]/route.ts

···
 // @see https://nextjs.org/docs/app/building-your-application/routing/router-handlers
 export const GET = async (_: Request, { params }: StaticParams) => {
   // Generate the Feed for the given feed type (blog, releases, etc)
-  const websiteFeed = await provideWebsiteFeeds(params.feed);
+  const websiteFeed = provideWebsiteFeeds(params.feed);
 
   return new NextResponse(websiteFeed, {
     headers: { 'Content-Type': 'application/xml' },

app/[locale]/next-data/blog-data/[category]/[page]/route.ts

···
+import {
+  provideBlogCategories,
+  provideBlogPosts,
+  providePaginatedBlogPosts,
+} from '@/next-data/providers/blogData';
+import { VERCEL_REVALIDATE } from '@/next.constants.mjs';
+import { defaultLocale } from '@/next.locales.mjs';
+
+type StaticParams = {
+  params: { locale: string; category: string; page: string };
+};
+
+// This is the Route Handler for the `GET` method which handles the request
+// for providing Blog Posts for Blog Categories and Pagination Metadata
+// @see https://nextjs.org/docs/app/building-your-application/routing/router-handlers
+export const GET = async (_: Request, { params }: StaticParams) => {
+  const requestedPage = Number(params.page);
+
+  const data =
+    requestedPage >= 1
+      ? // This allows us to blindly get all blog posts from a given category
+        // if the page number is 0 or something smaller than 1
+        providePaginatedBlogPosts(params.category, requestedPage)
+      : provideBlogPosts(params.category);
+
+  return Response.json(data, { status: data.posts.length ? 200 : 404 });
+};
+
+// This function generates the static paths that come from the dynamic segments
+// `[locale]/next-data/blog-data/[category]` and returns an array of all available static paths
+// This is used for ISR static validation and generation
+export const generateStaticParams = async () => {
+  // This metadata is the original list of all available categories and all available years
+  // within the Node.js Website Blog Posts (2011, 2012...)
+  const categories = provideBlogCategories();
+
+  const mappedCategories = categories.map(category => {
+    // gets the current pagination meta for a given category
+    const { pagination } = provideBlogPosts(category);
+
+    // creates a sequential array containing each page number
+    const pages = [...Array(pagination.pages).keys()].map((_, key) => key + 1);
+
+    // maps the data into valid Next.js Route Engine routes with all required params
+    // notice that we add an extra 0 in the beginning in case we want a non-paginated route
+    return [0, ...pages].map(page => ({
+      locale: defaultLocale.code,
+      page: String(page),
+      category,
+    }));
+  });
+
+  return mappedCategories.flat();
+};
+
+// Enforces that only the paths from `generateStaticParams` are allowed, giving 404 on the contrary
+// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams
+export const dynamicParams = false;
+
+// Enforces that this route is cached and static as much as possible
+// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
+export const dynamic = 'force-static';
+
+// Ensures that this endpoint is invalidated and re-executed every X minutes
+// so that when new deployments happen, the data is refreshed
+// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate
+export const revalidate = VERCEL_REVALIDATE;

app/[locale]/next-data/blog-data/[category]/route.ts

···
-import provideBlogData from '@/next-data/providers/blogData';
-import { VERCEL_REVALIDATE } from '@/next.constants.mjs';
-import { defaultLocale } from '@/next.locales.mjs';
-
-// We only support fetching these pages from the /en/ locale code
-const locale = defaultLocale.code;
-
-type StaticParams = { params: { category: string; locale: string } };
-
-// This is the Route Handler for the `GET` method which handles the request
-// for providing Blog Posts, Pagination for every supported Blog Category
-// this includes the `year-XXXX` categories for yearly archives (pagination)
-// @see https://nextjs.org/docs/app/building-your-application/routing/router-handlers
-export const GET = async (_: Request, { params }: StaticParams) => {
-  const data = await provideBlogData(params.category);
-
-  return Response.json(data, { status: data.posts.length ? 200 : 404 });
-};
-
-// This function generates the static paths that come from the dynamic segments
-// `[locale]/next-data/blog-data/[category]` and returns an array of all available static paths
-// This is used for ISR static validation and generation
-export const generateStaticParams = async () => {
-  // This metadata is the original list of all available categories and all available years
-  // within the Node.js Website Blog Posts (2011, 2012...)
-  const { meta } = await provideBlogData();
-
-  return [
-    ...meta.categories.map(category => ({ category, locale })),
-    ...meta.pagination.map(year => ({ category: `year-${year}`, locale })),
-  ];
-};
-
-// Forces that only the paths from `generateStaticParams` are allowed, giving 404 on the contrary
-// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams
-export const dynamicParams = true;
-
-// Enforces that this route is cached and static as much as possible
-// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
-export const dynamic = 'force-static';
-
-// Ensures that this endpoint is invalidated and re-executed every X minutes
-// so that when new deployments happen, the data is refreshed
-// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate
-export const revalidate = VERCEL_REVALIDATE;

app/[locale]/next-data/release-data/route.ts

···
 // for generating static data related to the Node.js Release Data
 // @see https://nextjs.org/docs/app/building-your-application/routing/router-handlers
 export const GET = async () => {
-  const releaseData = await provideReleaseData();
+  const releaseData = provideReleaseData();
 
   return Response.json(releaseData);
 };

client-context.ts

···
 
 import type { ClientSharedServerContext } from '@/types';
 
+import { assignClientContext } from './util/assignClientContext';
+
 // This allows us to have Server-Side Context's of the shared "contextual" data
 // which includes the frontmatter, the current pathname from the dynamic segments
 // and the current headings of the current markdown context
 export const getClientContext = cache(() => {
-  const serverSharedContext: ClientSharedServerContext = {
-    frontmatter: {},
-    pathname: '',
-    headings: [],
-    readingTime: { text: '', minutes: 0, time: 0, words: 0 },
-    filename: '',
-  };
+  const serverSharedContext = assignClientContext({});
 
   return serverSharedContext;
 });
 
 // This is used by the dynamic router to define on the request
 // the current set of information we use (shared)
-export const setClientContext = (data: ClientSharedServerContext) => {
-  getClientContext().frontmatter = data.frontmatter;
-  getClientContext().pathname = data.pathname;
-  getClientContext().headings = data.headings;
-  getClientContext().readingTime = data.readingTime;
-  getClientContext().filename = data.filename;
+export const setClientContext = (data: Partial<ClientSharedServerContext>) => {
+  const _data = assignClientContext(data);
+
+  getClientContext().frontmatter = _data.frontmatter;
+  getClientContext().pathname = _data.pathname;
+  getClientContext().headings = _data.headings;
+  getClientContext().readingTime = _data.readingTime;
+  getClientContext().filename = _data.filename;
 };

components/Common/AvatarGroup/Avatar/index.module.css

···
 .avatar {
   @apply flex
-    h-8
-    w-8
+    size-8
     items-center
     justify-center
     rounded-full
···
 
 .avatarRoot {
   @apply -ml-2
-    h-8
-    w-8
+    size-8
     flex-shrink-0
     first:ml-0;
 }

components/Common/AvatarGroup/Avatar/index.tsx

···
 
 const Avatar: FC<AvatarProps> = ({ src, alt }) => (
   <RadixAvatar.Root className={styles.avatarRoot}>
-    <RadixAvatar.Image src={src} alt={alt} className={styles.avatar} />
+    <RadixAvatar.Image
+      loading="lazy"
+      src={src}
+      alt={alt}
+      className={styles.avatar}
+    />
     <RadixAvatar.Fallback delayMs={500} className={styles.avatar}>
       {alt}
     </RadixAvatar.Fallback>

components/Common/AvatarGroup/index.tsx

···
+'use client';
+
 import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
 import { useState, useMemo } from 'react';

components/Common/Badge/index.module.css

···
     font-medium;
 
   .icon {
-    @apply h-4
-      w-4;
+    @apply size-4;
   }
 
   .badge {

components/Common/Banner/index.module.css

···
   }
 
   svg {
-    @apply h-4
-      w-4
+    @apply size-4
       text-white/50;
   }
 }

components/Common/BlogPostCard/__tests__/index.test.mjs

···
   description = 'Blog post description',
   authors = [],
   date = new Date(),
+  slug = '',
 }) {
   render(
     <BlogPostCard
       title={title}
-      type={type}
+      category={type}
       description={description}
       authors={authors}
       date={date}
+      slug={slug}
     />
   );
 
···
     it('Renders the title prop correctly', () => {
       const { title } = renderBlogPostCard({});
 
-      // Title from Preview component
-      expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
-        title
-      );
+      expect(screen.getAllByText(title).length).toBe(2);
 
-      // The second title should be hidden for screen-readers
-      // to prevent them from reading it twice
-      expect(screen.getAllByText(title)[1]).toHaveAttribute(
+      // title from preview should be ignored as the one from Links
+      // and blog card/post are what matter
+      expect(screen.getAllByText(title)[0]).toHaveAttribute(
         'aria-hidden',
         'true'
       );
···
     });
 
     it.each([
-      { label: 'components.common.card.vulnerability', type: 'vulnerability' },
-      { label: 'components.common.card.announcement', type: 'announcement' },
-      { label: 'components.common.card.release', type: 'release' },
+      { label: 'layouts.blog.categories.vulnerability', type: 'vulnerability' },
+      { label: 'layouts.blog.categories.announcements', type: 'announcements' },
+      { label: 'layouts.blog.categories.release', type: 'release' },
     ])(
       'Renders "%label" text when passing it the type "%type"',
       ({ label, type }) => {

components/Common/BlogPostCard/index.module.css

···
 .container {
-  @apply max-w-full
-    bg-white
-    dark:bg-neutral-950;
-}
-
-.preview {
-  @apply mb-6
-    max-w-full
-    rounded
-    p-4;
+  @apply max-w-full;
 }
 
 .subtitle {
   @apply mb-2
+    mt-6
+    inline-block
     text-xs
     font-semibold
     text-green-600
···
 
 .title {
   @apply mb-2
+    block
     text-xl
     font-semibold
     text-neutral-900

components/Common/BlogPostCard/index.stories.tsx

···
 export const Default: Story = {
   args: {
     title: 'Node.js March 17th Infrastructure Incident Post-mortem',
-    type: 'vulnerability',
+    category: 'vulnerability',
     description:
       'Starting on March 15th and going through to March 17th (with much of the issue being mitigated on the 16th), users were receiving intermittent 404 responses when trying to download Node.js from nodejs.org, or even accessing parts of the website.',
     authors: [
···
         src: 'https://avatars.githubusercontent.com/u/',
       },
     ],
+    slug: '/blog/vulnerability/something',
     date: new Date('17 October 2023'),
   },
   decorators: [

components/Common/BlogPostCard/index.tsx

···
 import { useTranslations } from 'next-intl';
-import { useMemo } from 'react';
-import type { ComponentProps, FC } from 'react';
+import type { FC } from 'react';
 
 import AvatarGroup from '@/components/Common/AvatarGroup';
 import Preview from '@/components/Common/Preview';
 import { Time } from '@/components/Common/Time';
+import Link from '@/components/Link';
+import { mapBlogCategoryToPreviewType } from '@/util/blogUtils';
 
 import styles from './index.module.css';
 
-type Author = {
-  fullName: string;
-  src: string;
-};
+// @todo: this should probably be a global type?
+type Author = { fullName: string; src: string };
 
 type BlogPostCardProps = {
-  title: ComponentProps<typeof Preview>['title'];
-  type: Required<ComponentProps<typeof Preview>>['type'];
-  description: string;
+  title: string;
+  category: string;
+  description?: string;
   authors: Array<Author>;
   date: Date;
+  slug: string;
 };
 
 const BlogPostCard: FC<BlogPostCardProps> = ({
   title,
-  type,
+  slug,
+  category,
   description,
   authors,
   date,
 }) => {
   const t = useTranslations();
 
-  const avatars = useMemo(
-    () =>
-      authors.map(({ fullName, src }) => ({
-        alt: fullName,
-        src,
-        toString: () => fullName,
-      })),
-    [authors]
-  );
+  const avatars = authors.map(({ fullName, src }) => ({ alt: fullName, src }));
+
+  const type = mapBlogCategoryToPreviewType(category);
 
   return (
     <article className={styles.container}>
-      <Preview
-        title={title}
-        type={type}
-        height="auto"
-        className={styles.preview}
-      />
-      <p className={styles.subtitle}>{t(`components.common.card.${type}`)}</p>
-      <p aria-hidden="true" className={styles.title}>
+      <Link href={slug} aria-label={title}>
+        <Preview title={title} type={type} />
+      </Link>
+
+      <Link href={`/blog/${category}`} className={styles.subtitle}>
+        {t(`layouts.blog.categories.${category}`)}
+      </Link>
+
+      <Link href={slug} className={styles.title}>
         {title}
-      </p>
-      <p className={styles.description}>{description}</p>
+      </Link>
+
+      {description && <p className={styles.description}>{description}</p>}
+
       <footer className={styles.footer}>
         <AvatarGroup avatars={avatars} />
+
         <div className={styles.author}>
-          <p>{avatars.join(', ')}</p>
+          <p>{avatars.map(avatar => avatar.alt).join(', ')}</p>
 
           <Time
             date={date}

components/Common/Breadcrumbs/BreadcrumbHomeLink/index.module.css

···
 .icon {
-  @apply h-4
-    w-4;
+  @apply size-4;
 }

components/Common/Breadcrumbs/BreadcrumbItem/index.module.css

···
   }
 
   .separator {
-    @apply h-4
-      w-4
+    @apply size-4
       flex-shrink-0
       flex-grow
       text-neutral-600

components/Common/Button/index.module.css

···
 
     &::before {
       @apply absolute
+        left-0
         right-0
         top-0
         -z-10
+        mx-auto
         h-full
         w-full
         bg-gradient-glow-backdrop
···
     &::after {
       @apply absolute
         -top-px
+        left-0
         right-0
+        mx-auto
         h-px
         w-2/5
         bg-gradient-to-r

components/Common/CodeBox/index.module.css

···
 }
 
 .icon {
-  @apply h-4
-    w-4;
+  @apply size-4;
 }

components/Common/CodeTabs/index.module.css

···
-.root > [role='tabpanel'] > :first-child {
-  @apply rounded-t-none;
-}
+.root {
+  > [role='tabpanel'] > :first-child {
+    @apply rounded-t-none;
+  }
 
-.header {
-  @apply flex
-    rounded-t
-    border-x
-    border-t
-    border-neutral-900
-    bg-neutral-950
-    px-4
-    pt-3
-    xs:px-2;
+  > div:nth-of-type(1) {
+    @apply flex
+      rounded-t
+      border-x
+      border-t
+      border-neutral-900
+      bg-neutral-950
+      px-4
+      pt-3
+      xs:px-2;
 
-  & [role='tablist'] > button {
-    @apply border-b
-      border-b-transparent
-      px-1
-      text-neutral-200;
+    > button {
+      @apply border-b
+        border-b-transparent
+        px-1
+        text-neutral-200;
 
-    &[aria-selected='true'] {
-      @apply border-b-green-400
-        text-green-400;
+      &[data-state='active'] {
+        @apply border-b-green-400
+          text-green-400;
+      }
     }
-  }
 
-  .link {
-    @apply hidden
-      items-center
-      gap-2
-      text-center
-      text-neutral-200
-      lg:flex;
+    .link {
+      @apply hidden
+        items-center
+        gap-2
+        text-center
+        text-neutral-200
+        lg:flex;
 
-    & > .icon {
-      @apply h-4
-        w-4
-        text-neutral-300;
-    }
+      & > .icon {
+        @apply size-4
+          text-neutral-300;
+      }
 
-    &:is(:link, :visited) {
-      &:hover {
-        @apply text-neutral-400;
+      &:is(:link, :visited) {
+        &:hover {
+          @apply text-neutral-400;
 
-        & > .icon {
-          @apply text-neutral-600;
+          & > .icon {
+            @apply text-neutral-600;
+          }
         }
       }
     }

components/Common/CodeTabs/index.tsx

···
 
 import styles from './index.module.css';
 
-export type CodeTabsExternaLink = {
+type CodeTabsProps = Pick<
+  ComponentProps<typeof Tabs>,
+  'tabs' | 'defaultValue'
+> & {
   linkUrl?: string;
   linkText?: string;
 };
 
-type CodeTabsProps = Pick<
-  ComponentProps<typeof Tabs>,
-  'tabs' | 'onValueChange' | 'defaultValue'
-> &
-  CodeTabsExternaLink;
-
 const CodeTabs: FC<PropsWithChildren<CodeTabsProps>> = ({
   children,
   linkUrl,
···
   <Tabs
     {...props}
     className={styles.root}
-    headerClassName={styles.header}
     addons={
       linkUrl &&
       linkText && (

components/Common/CrossLink/index.module.css

···
     }
 
     .icon {
-      @apply h-4
-        w-4
+      @apply size-4
         text-neutral-600
         dark:text-neutral-400;
     }

components/Common/LinkTabs/index.module.css

···
+.tabsList {
+  @apply mb-6
+    mt-10
+    flex
+    gap-2
+    border-b
+    border-b-neutral-200
+    font-open-sans
+    xs:hidden
+    dark:border-b-neutral-800;
+
+  .tabsTrigger {
+    @apply border-b-2
+      border-b-transparent
+      px-1
+      pb-[11px]
+      text-sm
+      font-semibold
+      text-neutral-800
+      dark:text-neutral-200;
+
+    &[data-state='active'] {
+      @apply border-b-green-600
+        text-green-600
+        dark:border-b-green-400
+        dark:text-green-400;
+    }
+  }
+}
+
+.tabsSelect > div {
+  @apply my-6
+    hidden
+    w-full
+    xs:flex;
+}

components/Common/LinkTabs/index.tsx

···
+import type { FC, PropsWithChildren } from 'react';
+
+import Link from '@/components/Link';
+import WithRouterSelect from '@/components/withRouterSelect';
+
+import styles from './index.module.css';
+
+type LinkTab = { key: string; label: string; link: string };
+
+type LinkTabsProps = {
+  label?: string;
+  tabs: Array<LinkTab>;
+  activeTab: string;
+};
+
+const LinkTabs: FC<PropsWithChildren<LinkTabsProps>> = ({
+  tabs,
+  label,
+  activeTab,
+  children,
+}) => (
+  <>
+    <div className={styles.tabsList}>
+      {tabs.map(tab => (
+        <Link
+          key={tab.key}
+          href={tab.link}
+          className={styles.tabsTrigger}
+          data-state={tab.key === activeTab ? 'active' : 'inactive'}
+        >
+          {tab.label}
+        </Link>
+      ))}
+    </div>
+
+    <div className={styles.tabsSelect}>
+      <WithRouterSelect
+        label={label}
+        defaultValue={tabs.find(tab => tab.key === activeTab)?.link}
+        values={tabs.map(tab => ({ label: tab.label, value: tab.link }))}
+      />
+    </div>
+
+    {children}
+  </>
+);
+
+export default LinkTabs;

components/Common/Pagination/PaginationListItem/index.module.css

···
 .listItem:link,
 .listItem:active {
   @apply flex
-    h-10
-    w-10
+    size-10
     items-center
     justify-center
     rounded
···
 
   &:hover {
     @apply bg-neutral-100
-      dark:bg-neutral-900;
+      text-neutral-800
+      dark:bg-neutral-900
+      dark:text-neutral-200;
   }
 }

components/Common/Pagination/index.module.css

···
   @apply flex
     list-none
     justify-center
-    gap-0.5
+    gap-1
     [grid-area:pages];
 }

components/Common/Pagination/index.tsx

···
         disabled={currentPage === 1}
         kind="secondary"
         className={styles.previousButton}
+        href={pages[currentPage - 2]?.url}
       >
         <ArrowLeftIcon className={styles.arrowIcon} />
         <span>{t('components.common.pagination.prev')}</span>
       </Button>
+
       <ol className={styles.list}>{parsedPages}</ol>
+
       <Button
         aria-label={t('components.common.pagination.nextAriaLabel')}
         disabled={currentPage === pages.length}
         kind="secondary"
         className={styles.nextButton}
+        href={pages[currentPage]?.url}
       >
         <span>{t('components.common.pagination.next')}</span>
         <ArrowRightIcon className={styles.arrowIcon} />

components/Common/Preview/index.module.css

···
 .root {
   @apply relative
     flex
+    aspect-[1.90/1]
     items-center
+    rounded
+    border
+    border-neutral-900
     bg-neutral-950
     bg-[url('/static/images/patterns/hexagon-grid.svg')]
     bg-contain
-    bg-center;
+    bg-center
+    @container/preview;
 
   &::after {
     @apply absolute
···
       w-1/3
       rounded-full
       bg-gradient-radial
-      blur-3xl
-      content-[''];
+      blur-2xl
+      content-['']
+      @md/preview:blur-3xl;
 
-    &.announcement {
+    &.announcements {
       @apply from-green-700/90;
     }
 
···
     }
   }
 
-  & > .container {
+  .container {
     @apply z-10
       mx-auto
       flex
+      w-2/3
       max-w-xl
       flex-col
-      gap-12
+      gap-4
       text-center
-      text-3xl
+      text-xs
       font-semibold
-      text-white;
+      text-white
+      @sm/preview:text-base
+      @md/preview:gap-6
+      @md/preview:text-lg
+      @lg/preview:gap-8
+      @lg/preview:text-xl
+      @xl/preview:gap-12
+      @xl/preview:text-2xl
+      @2xl/preview:text-3xl;
 
-    & > .logo {
-      @apply mx-auto;
+    .logo {
+      @apply mx-auto
+        size-6
+        @md/preview:size-14
+        @lg/preview:size-16
+        @xl/preview:size-20;
     }
   }
 }

components/Common/Preview/index.stories.tsx

···
 type Story = StoryObj<typeof Preview>;
 type Meta = MetaObj<typeof Preview>;
 
-export const Default: Story = {
-  args: {
-    title:
-      'Changing the End-of-Life Date for Node.js 16 to September 11th, 2023',
-  },
-};
-
 export const Announcement: Story = {
   args: {
-    type: 'announcement',
+    type: 'announcements',
     title:
       'Changing the End-of-Life Date for Node.js 16 to September 11th, 2023',
   },
···
   args: {
     title:
       'Changing the End-of-Life Date for Node.js 16 to September 11th, 2023',
-    width: 600,
-    height: 315,
   },
+  decorators: [
+    Story => (
+      <div className="w-[600px]">
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export default { component: Preview } as Meta;

components/Common/Preview/index.tsx

···
 import classNames from 'classnames';
-import type { CSSProperties, ComponentProps, FC, ReactNode } from 'react';
+import type { FC } from 'react';
 
 import JsIconWhite from '@/components/Icons/Logos/JsIconWhite';
+import type { BlogPreviewType } from '@/types';
 
 import styles from './index.module.css';
 
 type PreviewProps = {
-  type?: 'announcement' | 'release' | 'vulnerability';
-  title: ReactNode;
-  height?: CSSProperties['height'];
-  width?: CSSProperties['width'];
-} & Omit<ComponentProps<'div'>, 'children'>;
+  title: string;
+  type?: BlogPreviewType;
+};
 
-const Preview: FC<PreviewProps> = ({
-  type = 'announcement',
-  title,
-  height = 630,
-  width = 1200,
-  ...props
-}) => (
-  <div
-    {...props}
-    style={{ width, height, ...props.style }}
-    className={classNames(styles.root, styles[type], props.className)}
-  >
-    <div className={styles.container}>
-      <JsIconWhite className={styles.logo} width={71} height={80} />
-      <h2>{title}</h2>
+const Preview: FC<PreviewProps> = ({ type = 'announcements', title }) => (
+  <div className={classNames(styles.root, styles[type])}>
+    <div className={styles.container} aria-hidden={true}>
+      <JsIconWhite className={styles.logo} />
+      {title}
     </div>
   </div>
 );

components/Common/ProgressionSidebar/index.stories.tsx

···
             link: '/the-v8-javascript-engine',
           },
           {
-            label: 'An introduction to the NPM package manager',
+            label: 'An introduction to the npm package manager',
             link: '/an-introduction-to-the-npm-package-manager',
           },
         ],

components/Common/ProgressionSidebar/index.tsx

···
+import { useTranslations } from 'next-intl';
 import type { ComponentProps, FC } from 'react';
 
 import ProgressionSidebarGroup from '@/components/Common/ProgressionSidebar/ProgressionSidebarGroup';
-import WithSidebarSelect from '@/components/withSidebarSelect';
+import WithRouterSelect from '@/components/withRouterSelect';
+import { useClientContext } from '@/hooks/react-server';
 
 import styles from './index.module.css';
 
···
   groups: Array<ComponentProps<typeof ProgressionSidebarGroup>>;
 };
 
-const ProgressionSidebar: FC<ProgressionSidebarProps> = ({ groups }) => (
-  <nav className={styles.wrapper}>
-    {groups.map(({ groupName, items }) => (
-      <ProgressionSidebarGroup
-        key={groupName.toString()}
-        groupName={groupName}
-        items={items}
+const ProgressionSidebar: FC<ProgressionSidebarProps> = ({ groups }) => {
+  const t = useTranslations();
+  const { pathname } = useClientContext();
+
+  const selectItems = groups.map(({ items, groupName }) => ({
+    label: groupName,
+    items: items.map(({ label, link }) => ({ value: link, label })),
+  }));
+
+  const currentItem = selectItems
+    .map(item => item.items)
+    .flat()
+    .find(item => pathname === item.value);
+
+  return (
+    <nav className={styles.wrapper}>
+      {groups.map(({ groupName, items }) => (
+        <ProgressionSidebarGroup
+          key={groupName.toString()}
+          groupName={groupName}
+          items={items}
+        />
+      ))}
+
+      <WithRouterSelect
+        label={t('components.common.sidebar.title')}
+        values={selectItems}
+        defaultValue={currentItem?.value}
       />
-    ))}
-
-    <WithSidebarSelect groups={groups} />
-  </nav>
-);
+    </nav>
+  );
+};
 
 export default ProgressionSidebar;

components/Common/Select/index.module.css

···
   }
 
   .icon {
-    @apply h-4
-      w-4;
+    @apply size-4;
   }
 
   .text {

components/Common/Select/index.stories.tsx

···
           },
           {
             value: 'section-6',
-            label: 'An introduction to the NPM package manager',
+            label: 'An introduction to the npm package manager',
           },
           {
             value: 'section-7',

components/Common/Tabs/index.module.css

···
       text-sm
       font-semibold
       text-neutral-800
-      data-[state=active]:border-b-green-600
-      data-[state=active]:text-green-600
-      dark:text-neutral-200
-      dark:data-[state=active]:border-b-green-400
-      dark:data-[state=active]:text-green-400;
+      dark:text-neutral-200;
+
+    &[data-state='active'] {
+      @apply border-b-green-600
+        text-green-600
+        dark:border-b-green-400
+        dark:text-green-400;
+    }
   }
-}
 
-.tabsWithAddons {
-  @apply flex
-    justify-between;
-
-  & > .addons {
-    @apply border-b-2
+  .addons {
+    @apply ml-auto
+      border-b-2
       border-b-transparent
       px-1
       pb-[11px]

components/Common/Tabs/index.tsx

···
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import classNames from 'classnames';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 
 import styles from './index.module.css';
 
-type Tab = {
-  key: string;
-  label: string;
-};
+type Tab = { key: string; label: string };
 
-type TabsProps = {
+type TabsProps = TabsPrimitive.TabsProps & {
   tabs: Array<Tab>;
   addons?: ReactNode;
-  headerClassName?: string;
-} & TabsPrimitive.TabsProps;
+};
 
 const Tabs: FC<PropsWithChildren<TabsProps>> = ({
   tabs,
   addons,
-  headerClassName,
   children,
   ...props
 }) => (
   <TabsPrimitive.Root {...props}>
-    <div
-      className={classNames(headerClassName, {
-        [styles.tabsWithAddons]: addons != null,
-      })}
-    >
-      <TabsPrimitive.List className={classNames(styles.tabsList)}>
-        {tabs.map(tab => (
-          <TabsPrimitive.Trigger
-            key={tab.key}
-            value={tab.key}
-            className={styles.tabsTrigger}
-          >
-            {tab.label}
-          </TabsPrimitive.Trigger>
-        ))}
-      </TabsPrimitive.List>
+    <TabsPrimitive.List className={styles.tabsList}>
+      {tabs.map(tab => (
+        <TabsPrimitive.Trigger
+          key={tab.key}
+          value={tab.key}
+          className={styles.tabsTrigger}
+        >
+          {tab.label}
+        </TabsPrimitive.Trigger>
+      ))}
 
       {addons && <div className={styles.addons}>{addons}</div>}
-    </div>
+    </TabsPrimitive.List>
 
     {children}
   </TabsPrimitive.Root>

components/Common/ThemeToggle/index.module.css

···
 .themeToggle {
-  @apply h-9
-    w-9
+  @apply size-9
     rounded-md
     p-2
     text-neutral-700

components/Containers/MetaBar/index.module.css

···
     flex-col
     items-start
     gap-8
+    overflow-y-auto
     border-l
     border-l-neutral-200
     px-4
···
       @apply font-semibold
         text-neutral-900
         underline
+        xs:inline-block
+        xs:py-1
         dark:text-white;
 
       &:hover {
···
     }
 
     svg {
-      @apply h-4
-        w-4
+      @apply size-4
         text-neutral-600
         dark:text-neutral-400;
     }

components/Containers/MetaBar/index.tsx

···
   return (
     <div className={styles.wrapper}>
       <dl>
-        {Object.entries(items).map(([key, value]) => (
-          <Fragment key={key}>
-            <dt>{t(key)}</dt>
-            <dd>{value}</dd>
-          </Fragment>
-        ))}
+        {Object.entries(items)
+          .filter(([, value]) => !!value)
+          .map(([key, value]) => (
+            <Fragment key={key}>
+              <dt>{t(key)}</dt>
+              <dd>{value}</dd>
+            </Fragment>
+          ))}
 
         {heading.length > 0 && (
           <>

components/Containers/NavBar/NavItem/index.module.css

···
   }
 
   .icon {
-    @apply h-3
-      w-3
+    @apply size-3
       text-neutral-500
       dark:text-neutral-200;
   }

components/Containers/NavBar/index.module.css

···
 }
 
 .navInteractionIcon {
-  @apply h-6
-    w-6;
+  @apply size-6;
 }
 
 .sidebarItemTogglerLabel {
···
 }
 
 .ghIconWrapper {
-  @apply h-9
-    w-9
+  @apply size-9
     rounded-md
     p-2;
 

components/Containers/Sidebar/index.tsx

···
+import { useTranslations } from 'next-intl';
 import type { ComponentProps, FC } from 'react';
 
 import SidebarGroup from '@/components/Containers/Sidebar/SidebarGroup';
-import WithSidebarSelect from '@/components/withSidebarSelect';
+import WithRouterSelect from '@/components/withRouterSelect';
+import { useClientContext } from '@/hooks/react-server';
 
 import styles from './index.module.css';
 
···
   groups: Array<ComponentProps<typeof SidebarGroup>>;
 };
 
-const SideBar: FC<SidebarProps> = ({ groups }) => (
-  <aside className={styles.wrapper}>
-    {groups.map(({ groupName, items }) => (
-      <SidebarGroup
-        key={groupName.toString()}
-        groupName={groupName}
-        items={items}
-      />
-    ))}
+const SideBar: FC<SidebarProps> = ({ groups }) => {
+  const t = useTranslations();
+  const { pathname } = useClientContext();
+
+  const selectItems = groups.map(({ items, groupName }) => ({
+    label: groupName,
+    items: items.map(({ label, link }) => ({ value: link, label })),
+  }));
+
+  const currentItem = selectItems
+    .map(item => item.items)
+    .flat()
+    .find(item => pathname === item.value);
+
+  return (
+    <aside className={styles.wrapper}>
+      {groups.map(({ groupName, items }) => (
+        <SidebarGroup
+          key={groupName.toString()}
+          groupName={groupName}
+          items={items}
+        />
+      ))}
 
-    <WithSidebarSelect groups={groups} />
-  </aside>
-);
+      {selectItems.length > 0 && (
+        <WithRouterSelect
+          label={t('components.common.sidebar.title')}
+          values={selectItems}
+          defaultValue={currentItem?.value}
+        />
+      )}
+    </aside>
+  );
+};
 
 export default SideBar;

components/Downloads/ChangelogModal/index.module.css

···
       right-3
       top-3
       block
-      h-6
-      w-6
+      size-6
       cursor-pointer
       sm:hidden;
   }
···
     }
 
     svg {
-      @apply h-3
-        w-3
+      @apply size-3
         text-neutral-600;
     }
   }

components/Downloads/DownloadButton/index.tsx

···
   children,
 }) => {
   const { os, bitness } = useDetectOS();
+  const downloadLink = downloadUrlByOS(versionWithPrefix, os, bitness);
 
   return (
     <>
       <Button
         kind="special"
-        href={downloadUrlByOS(versionWithPrefix, os, bitness)}
+        href={downloadLink}
         className={classNames(styles.downloadButton, 'hidden dark:flex')}
       >
         {children}
···
 
       <Button
         kind="primary"
-        href={downloadUrlByOS(versionWithPrefix, os, bitness)}
+        href={downloadLink}
         className={classNames(styles.downloadButton, 'flex dark:hidden')}
       >
         {children}

components/Downloads/DownloadLink.tsx

···
+'use client';
+
+import type { FC, PropsWithChildren } from 'react';
+
+import { useDetectOS } from '@/hooks';
+import type { NodeRelease } from '@/types';
+import { downloadUrlByOS } from '@/util/downloadUrlByOS';
+
+type DownloadLinkProps = { release: NodeRelease };
+
+const DownloadLink: FC<PropsWithChildren<DownloadLinkProps>> = ({
+  release: { versionWithPrefix },
+  children,
+}) => {
+  const { os, bitness } = useDetectOS();
+  const downloadLink = downloadUrlByOS(versionWithPrefix, os, bitness);
+
+  return <a href={downloadLink}>{children}</a>;
+};
+
+export default DownloadLink;

components/MDX/CodeTabs/index.tsx

···
 'use client';
 
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import type { FC, ReactElement } from 'react';
+import type { ComponentProps, FC, ReactElement } from 'react';
 
-import type { CodeTabsExternaLink } from '@/components/Common/CodeTabs';
 import CodeTabs from '@/components/Common/CodeTabs';
 
-type MDXCodeTabsProps = {
+type MDXCodeTabsProps = Pick<
+  ComponentProps<typeof CodeTabs>,
+  'linkText' | 'linkUrl'
+> & {
   children: Array<ReactElement>;
   languages: string;
   displayNames?: string;
   defaultTab?: string;
-} & CodeTabsExternaLink;
+};
 
 const MDXCodeTabs: FC<MDXCodeTabsProps> = ({
   languages: rawLanguages,

components/Pagination.tsx

···
 import type { FC } from 'react';
 
 import Link from '@/components/Link';
+import type { BlogPagination } from '@/types';
 
-type PaginationProps = { prev?: number | null; next?: number | null };
+type PaginationProps = BlogPagination & { category: string };
 
-const Pagination: FC<PaginationProps> = ({ next, prev }) => {
+const Pagination: FC<PaginationProps> = ({ category, next, prev }) => {
   const t = useTranslations();
 
   return (
     <nav aria-label="pagination" className="pagination">
-      {next && (
-        <Link href={`/blog/year-${next}`}>
-          &lt; {t('components.pagination.next')}
+      {prev && (
+        <Link href={`/blog/${category}/page/${prev}`}>
+          &lt; {t('components.pagination.previous')}
         </Link>
       )}
 
-      {prev && (
-        <Link href={`/blog/year-${prev}`}>
-          {t('components.pagination.previous')} &gt;
+      {prev && next && ' | '}
+
+      {next && (
+        <Link href={`/blog/${category}/page/${next}`}>
+          {t('components.pagination.next')} &gt;
         </Link>
       )}
     </nav>

components/__design__/text.stories.tsx

···
 export const InlineCode: StoryObj = {
   render: () => (
     <main>
-      This is an example of <code>inline code block</code>
+      <p>
+        This is an example of <code>inline code block</code>
+      </p>
     </main>
   ),
 };

components/withBlogCategories.tsx

···
+import { useTranslations } from 'next-intl';
+import type { ComponentProps, FC } from 'react';
+
+import BlogPostCard from '@/components/Common/BlogPostCard';
+import LinkTabs from '@/components/Common/LinkTabs';
+import Pagination from '@/components/Common/Pagination';
+import type { BlogPostsRSC } from '@/types';
+import { mapAuthorToCardAuthors } from '@/util/blogUtils';
+
+type WithBlogCategoriesProps = {
+  categories: ComponentProps<typeof LinkTabs>['tabs'];
+  blogData: BlogPostsRSC & { category: string; page: number };
+};
+
+const mapPaginationPages = (category: string, pages: number) =>
+  [...Array(pages).keys()].map(page => ({
+    url: `/blog/${category}/page/${page + 1}`,
+  }));
+
+const WithBlogCategories: FC<WithBlogCategoriesProps> = ({
+  categories,
+  blogData,
+}) => {
+  const t = useTranslations();
+
+  return (
+    <>
+      <LinkTabs
+        label={t('layouts.blog.selectCategory')}
+        tabs={categories}
+        activeTab={blogData.category}
+      >
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(theme(spacing.96),1fr))] [grid-gap:theme(spacing.12)_theme(spacing.8)]">
+          {blogData.posts.map(post => (
+            <BlogPostCard
+              key={post.slug}
+              title={post.title}
+              category={post.categories[0]}
+              authors={mapAuthorToCardAuthors(post.author)}
+              date={post.date}
+              slug={post.slug}
+            />
+          ))}
+        </div>
+      </LinkTabs>
+
+      <div className="mt-4 border-t border-t-neutral-200 pt-5 md:mt-8 dark:border-t-neutral-900">
+        <Pagination
+          currentPage={blogData.page}
+          pages={mapPaginationPages(
+            blogData.category,
+            blogData.pagination.pages
+          )}
+        />
+      </div>
+    </>
+  );
+};
+
+export default WithBlogCategories;

components/withBlogCrossLinks.tsx

···
+import type { FC } from 'react';
+
+import { getClientContext } from '@/client-context';
+import CrossLink from '@/components/Common/CrossLink';
+import getBlogData from '@/next-data/blogData';
+
+const WithBlogCrossLinks: FC = async () => {
+  const { pathname } = getClientContext();
+
+  // Extracts from the static URL the components used for the Blog Post slug
+  const [, , category, postname] = pathname.split('/');
+
+  const { posts } = await getBlogData(category);
+
+  const currentItem = posts.findIndex(
+    ({ slug }) => slug === `/blog/${category}/${postname}`
+  );
+
+  const [previousCrossLink, nextCrossLink] = [
+    posts[currentItem - 1],
+    posts[currentItem + 1],
+  ];
+
+  return (
+    <div className="mt-4 grid w-full grid-cols-2 gap-4 xs:grid-cols-1">
+      {(previousCrossLink && (
+        <CrossLink
+          type="previous"
+          text={previousCrossLink.title}
+          link={previousCrossLink.slug}
+        />
+      )) || <div />}
+
+      {nextCrossLink && (
+        <CrossLink
+          type="next"
+          text={nextCrossLink.title}
+          link={nextCrossLink.slug}
+        />
+      )}
+    </div>
+  );
+};
+
+export default WithBlogCrossLinks;

components/withCrossLinks.tsx components/withSidebarCrossLinks.tsx

···
 import { useClientContext, useSiteNavigation } from '@/hooks/server';
 import type { NavigationKeys } from '@/types';
 
-type WithCrossLinksProps = {
-  navKey: NavigationKeys;
-};
+type WithCrossLinksProps = { navKey: NavigationKeys };
 
-const WithCrossLinks: FC<WithCrossLinksProps> = ({ navKey }) => {
+const WithSidebarCrossLinks: FC<WithCrossLinksProps> = ({ navKey }) => {
   const { getSideNavigation } = useSiteNavigation();
   const { pathname } = useClientContext();
 
···
   );
 };
 
-export default WithCrossLinks;
+export default WithSidebarCrossLinks;

components/withLayout.tsx

···
 import LegacyIndexLayout from '@/layouts/IndexLayout';
 import LegacyLearnLayout from '@/layouts/LearnLayout';
 import AboutLayout from '@/layouts/New/About';
+import BlogLayout from '@/layouts/New/Blog';
 import DefaultLayout from '@/layouts/New/Default';
 import DocsLayout from '@/layouts/New/Docs';
 import HomeLayout from '@/layouts/New/Home';
 import LearnLayout from '@/layouts/New/Learn';
+import PostLayout from '@/layouts/New/Post';
 import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
 import type { Layouts, LegacyLayouts } from '@/types';
 
···
   'home.hbs': HomeLayout,
   'learn.hbs': LearnLayout,
   'page.hbs': DefaultLayout,
+  'blog-post.hbs': PostLayout,
+  'blog-category.hbs': BlogLayout,
 } satisfies Record<Layouts, FC>;
 
 type WithLayout<L = Layouts | LegacyLayouts> = PropsWithChildren<{ layout: L }>;

components/withMetaBar.tsx

···
 import { useClientContext } from '@/hooks/server';
 import { getGitHubEditPageUrl } from '@/util/gitHubUtils';
 
+const DATE_FORMAT = {
+  month: 'short',
+  day: '2-digit',
+  year: 'numeric',
+} as const;
+
 const WithMetaBar: FC = () => {
   const { headings, readingTime, frontmatter, filename } = useClientContext();
   const formatter = useFormatter();
 
-  const lastUpdated = formatter.dateTime(frontmatter.date ?? new Date(), {
-    month: 'short',
-    day: '2-digit',
-    year: 'numeric',
-  });
+  const lastUpdated = frontmatter.date
+    ? formatter.dateTime(new Date(frontmatter.date), DATE_FORMAT)
+    : undefined;
 
   return (
     <MetaBar

components/withRouterSelect.tsx

···
+'use client';
+
+import type { ComponentProps, FC } from 'react';
+
+import Select from '@/components/Common/Select';
+import { useRouter } from '@/navigation.mjs';
+
+type WithSidebarSelectProps = Pick<
+  ComponentProps<typeof Select>,
+  'values' | 'defaultValue' | 'label'
+>;
+
+const WithRouterSelect: FC<WithSidebarSelectProps> = ({
+  values,
+  label,
+  defaultValue,
+}) => {
+  const { push } = useRouter();
+
+  return (
+    <Select
+      label={label}
+      values={values}
+      defaultValue={defaultValue}
+      onChange={value => push(value)}
+    />
+  );
+};
+
+export default WithRouterSelect;

components/withSidebarSelect.tsx

···
-'use client';
-
-import { useTranslations } from 'next-intl';
-import type { FC } from 'react';
-
-import Select from '@/components/Common/Select';
-import { useClientContext } from '@/hooks';
-import { useRouter } from '@/navigation.mjs';
-import type { FormattedMessage } from '@/types';
-
-type SelectItem = {
-  label: FormattedMessage;
-  link: string;
-};
-
-type WithSidebarSelectProps = {
-  groups: Array<{ groupName: FormattedMessage; items: Array<SelectItem> }>;
-};
-
-const WithSidebarSelect: FC<WithSidebarSelectProps> = ({ groups }) => {
-  const t = useTranslations();
-
-  const { pathname } = useClientContext();
-  const { push } = useRouter();
-
-  const selectItems = groups.map(({ items, groupName }) => ({
-    label: groupName,
-    items: items.map(({ label, link }) => ({ value: link, label })),
-  }));
-
-  const currentItem = selectItems
-    .map(item => item.items)
-    .flat()
-    .find(item => pathname === item.value);
-
-  return (
-    <Select
-      label={t('components.common.sidebar.title')}
-      values={selectItems}
-      defaultValue={currentItem?.value}
-      onChange={value => push(value)}
-    />
-  );
-};
-
-export default WithSidebarSelect;

i18n/locales/en.json

···
             "howMuchJavascriptDoYouNeedToKnowToUseNodejs": "How much JavaScript do you need to know to use Node.js?",
             "differencesBetweenNodejsAndTheBrowser": "Differences between Node.js and the Browser",
             "theV8JavascriptEngine": "The V8 JavaScript Engine",
-            "anIntroductionToTheNpmPackageManager": "An introduction to the NPM package manager",
+            "anIntroductionToTheNpmPackageManager": "An introduction to the npm package manager",
             "ecmascript2015Es6AndBeyond": "ECMAScript 2015 (ES6) and beyond",
             "nodejsTheDifferenceBetweenDevelopmentAndProduction": "Node.js, the difference between development and production",
             "nodejsWithTypescript": "Node.js with TypeScript",
···
       "docs": "Docs"
     },
     "pagination": {
-      "next": "Newer | ",
-      "previous": "Older"
+      "next": "Next",
+      "previous": "Previous"
     },
     "common": {
       "breadcrumbs": {
···
       },
       "languageDropdown": {
         "label": "Choose Language"
-      },
-      "card": {
-        "announcement": "Announcements",
-        "release": "Releases",
-        "vulnerability": "Vulnerabilities"
       }
     },
     "metabar": {
···
       }
     },
     "blogIndex": {
-      "currentYear": "Blog from {year}"
+      "categoryName": "{category, select, all {Blog} other {{category} Blog Posts}}"
+    },
+    "blog": {
+      "title": "Blog",
+      "subtitle": "The latest Node.js news, case studies, tutorials, and resources.",
+      "selectCategory": "Categories",
+      "categories": {
+        "all": "Everything",
+        "announcements": "Announcements",
+        "release": "Releases",
+        "vulnerability": "Vulnerabilities",
+        "advisory-board": "Advisory Board",
+        "community": "Community",
+        "feature": "Feature",
+        "module": "Module",
+        "npm": "npm",
+        "uncategorized": "Uncategorized",
+        "video": "Video",
+        "weekly-updates": "Weekly Updates",
+        "wg": "Working Groups"
+      }
     }
   },
   "pages": {

layouts/BlogCategoryLayout.tsx

···
-import { notFound } from 'next/navigation';
 import { getTranslations } from 'next-intl/server';
 import type { FC } from 'react';
 
···
 import getBlogData from '@/next-data/blogData';
 
 const getCategoryData = async (pathname: string) => {
-  // We split the pathname to retrieve the blog category from it since the
-  // URL is usually /blog/{category} the second path piece is usually the
-  // category name, which usually year-YYYY
-  const [, _pathname, category] = pathname.split('/');
-  if (_pathname === 'blog' && category && category.length) {
-    const data = await getBlogData(category);
-    return { ...data, category };
-  }
+  // pathname format can either be: /en/blog/{category}
+  // or /en/blog/{category}/page/{page}
+  // hence we attempt to interpolate the full /en/blog/{categoy}/page/{page}
+  // and in case of course no page argument is provided we define it to 1
+  // note that malformed routes can't happen as they are all statically generated
+  const [, , category = 'all', , page = 1] = pathname.split('/');
 
-  // If the pathname does not match to a blog page,
-  //   which should not happen (as this hook should only be used in blog pages),
-  // or, if there is no category in the URL,
-  //   which happens when we're on the blog overview page (index),
-  // then we attempt to get the posts for the current year
-  // @TODO: Year-based pagination is deprecated and going away soon
-  let year = `year-${new Date().getFullYear()}`;
-  let data = await getBlogData(year);
-
-  // If there are no posts in the current year,
-  //   and there is at least one year in the pagination array,
-  // we'll get the posts for the most recent year
-  if (!data.posts.length && data.meta.pagination.length) {
-    year = `year-${Math.max(...data.meta.pagination)}`;
-    data = await getBlogData(year);
-  }
+  const { posts, pagination } = await getBlogData(category, Number(page));
 
-  return { ...data, category: year };
+  return { posts, category, pagination };
 };
 
 // This is a React Async Server Component
 // Note that Hooks cannot be used in a RSC async component
 // Async Components do not get re-rendered at all.
 const BlogCategoryLayout: FC = async () => {
-  const { frontmatter, pathname } = getClientContext();
+  const { pathname } = getClientContext();
 
   const t = await getTranslations();
 
   const { posts, pagination, category } = await getCategoryData(pathname);
 
-  // This only applies if current category is a year category
-  const year = category.replace('year-', '');
-  const title = category.startsWith('year-')
-    ? t('layouts.blogIndex.currentYear', { year })
-    : frontmatter.title;
-
-  // This ensures that whenever we're running on dynamic generation (SSG)
-  // that invalid categories or categories/pages without posts will redirect to the 404 page
-  // however, the blog overview page (index) will always be generated, even if there are no posts
-  if (posts.length === 0 && pathname !== '/blog') {
-    return notFound();
-  }
-
   return (
     <div className="container" dir="auto">
-      <h2>{title}</h2>
+      <h2 style={{ textTransform: 'capitalize' }}>
+        {t('layouts.blogIndex.categoryName', {
+          category: category.replace('year-', ''),
+        })}
+      </h2>
 
       <ul className="blog-index">
         {posts.map(({ slug, date, title }) => (
           <li key={slug}>
-            <Time date={date} format={{ month: 'short', day: '2-digit' }} />
+            <Time
+              date={date}
+              format={{ year: 'numeric', month: 'short', day: '2-digit' }}
+            />
             <Link href={slug}>{title}</Link>
           </li>
         ))}
       </ul>
 
-      <Pagination {...pagination} />
+      <Pagination category={category} {...pagination} />
     </div>
   );
 };

layouts/New/Blog.tsx

···
+import { getTranslations } from 'next-intl/server';
+import type { FC } from 'react';
+
+import { getClientContext } from '@/client-context';
+import WithBlogCategories from '@/components/withBlogCategories';
+import WithFooter from '@/components/withFooter';
+import WithNavBar from '@/components/withNavBar';
+import getBlogData from '@/next-data/blogData';
+
+import styles from './layouts.module.css';
+
+const getBlogCategory = async (pathname: string) => {
+  // pathname format can either be: /en/blog/{category}
+  // or /en/blog/{category}/page/{page}
+  // hence we attempt to interpolate the full /en/blog/{categoy}/page/{page}
+  // and in case of course no page argument is provided we define it to 1
+  // note that malformed routes can't happen as they are all statically generated
+  const [, , category = 'all', , page = 1] = pathname.split('/');
+
+  const { posts, pagination } = await getBlogData(category, Number(page));
+
+  return { category, posts, pagination, page: Number(page) };
+};
+
+const BlogLayout: FC = async () => {
+  const { pathname } = getClientContext();
+  const t = await getTranslations();
+
+  const mapCategoriesToTabs = (categories: Array<string>) =>
+    categories.map(category => ({
+      key: category,
+      label: t(`layouts.blog.categories.${category}`),
+      link: `/blog/${category}`,
+    }));
+
+  const blogData = await getBlogCategory(pathname);
+
+  return (
+    <>
+      <WithNavBar />
+
+      <div className={styles.blogLayout}>
+        <main>
+          <h1>{t('layouts.blog.title')}</h1>
+
+          <p>{t('layouts.blog.subtitle')}</p>
+
+          <WithBlogCategories
+            blogData={blogData}
+            categories={mapCategoriesToTabs([
+              'all',
+              'announcements',
+              'release',
+              'vulnerability',
+            ])}
+          />
+        </main>
+      </div>
+
+      <WithFooter />
+    </>
+  );
+};
+
+export default BlogLayout;

layouts/New/Content.tsx

···
+import type { FC, PropsWithChildren } from 'react';
+
+import styles from './layouts.module.css';
+
+const ContentLayout: FC<PropsWithChildren> = ({ children }) => (
+  <div className={styles.contentLayout}>{children}</div>
+);
+
+export default ContentLayout;

layouts/New/Docs.tsx

···
 import WithFooter from '@/components/withFooter';
 import WithMetaBar from '@/components/withMetaBar';
 import WithNavBar from '@/components/withNavBar';
-import WithSideBar from '@/components/withSidebar';
-import ArticleLayout from '@/layouts/New/Article';
+import ContentLayout from '@/layouts/New/Content';
 
 // @deprecated: This Layout is Temporary. The `en/docs` route should eventually be removed
 // and all "guides" moved to the Learn section.
···
   <>
     <WithNavBar />
 
-    <ArticleLayout>
-      <WithSideBar navKeys={[]} />
-
-      <main>{children}</main>
+    <ContentLayout>
+      <div>
+        <main>{children}</main>
+      </div>
 
       <WithMetaBar />
-    </ArticleLayout>
+    </ContentLayout>
 
     <WithFooter />
   </>

layouts/New/Home.tsx

···
   <>
     <WithNavBar />
 
-    <main className={styles.homeLayout}>
-      <div className={styles.hexagonBackdrop} />
+    <div className={styles.homeLayout}>
+      <div className="glowingBackdrop" />
 
-      {children}
-    </main>
+      <main>{children}</main>
+    </div>
 
     <WithFooter />
   </>

layouts/New/Learn.tsx

···
 import type { FC, PropsWithChildren } from 'react';
 
 import WithBreadcrumbs from '@/components/withBreadcrumbs';
-import WithCrossLinks from '@/components/withCrossLinks';
 import WithMetaBar from '@/components/withMetaBar';
 import WithNavBar from '@/components/withNavBar';
 import WithProgressionSidebar from '@/components/withProgressionSidebar';
+import WithSidebarCrossLinks from '@/components/withSidebarCrossLinks';
 import ArticleLayout from '@/layouts/New/Article';
 
 const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
···
       <main>
         {children}
 
-        <WithCrossLinks navKey="learn" />
+        <WithSidebarCrossLinks navKey="learn" />
       </main>
 
       <WithMetaBar />

layouts/New/Post.tsx

···
+import type { FC, PropsWithChildren } from 'react';
+
+import AvatarGroup from '@/components/Common/AvatarGroup';
+import Preview from '@/components/Common/Preview';
+import WithBlogCrossLinks from '@/components/withBlogCrossLinks';
+import WithFooter from '@/components/withFooter';
+import WithMetaBar from '@/components/withMetaBar';
+import WithNavBar from '@/components/withNavBar';
+import { useClientContext } from '@/hooks/react-server';
+import ContentLayout from '@/layouts/New/Content';
+import {
+  mapAuthorToCardAuthors,
+  mapBlogCategoryToPreviewType,
+} from '@/util/blogUtils';
+
+import styles from './layouts.module.css';
+
+const PostLayout: FC<PropsWithChildren> = ({ children }) => {
+  const { frontmatter } = useClientContext();
+
+  const authors = mapAuthorToCardAuthors(frontmatter.author);
+  const type = mapBlogCategoryToPreviewType(frontmatter.category);
+
+  return (
+    <>
+      <WithNavBar />
+
+      <ContentLayout>
+        <div className={styles.postLayout}>
+          <main>
+            <h1>{frontmatter.title}</h1>
+
+            <section>
+              <AvatarGroup
+                avatars={authors.map(author => ({
+                  alt: author.fullName,
+                  src: author.src,
+                }))}
+              />
+
+              <p>{authors.map(author => author.fullName).join(', ')}</p>
+            </section>
+
+            <Preview title={frontmatter.title!} type={type} />
+
+            {children}
+
+            <WithBlogCrossLinks />
+          </main>
+        </div>
+
+        <WithMetaBar />
+      </ContentLayout>
+
+      <WithFooter />
+    </>
+  );
+};
+
+export default PostLayout;

layouts/New/layouts.module.css

···
 .baseLayout {
   @apply grid
-    h-screen
-    w-screen
+    size-full
     grid-cols-[1fr]
     grid-rows-[auto_1fr_auto];
 }
···
   }
 
   > *:nth-child(2) {
-    @apply flex
-      w-full
-      flex-col
-      items-start
-      gap-6
-      self-stretch
-      overflow-y-auto
+    @apply overflow-y-auto
       overflow-x-hidden
       bg-gradient-subtle
       p-12
···
 }
 
 .homeLayout {
-  @apply mx-auto
-    flex
+  @apply flex
     w-full
-    flex-col
     items-center
-    gap-8
-    self-stretch
+    justify-center
     px-4
     py-14
-    md:w-auto
-    md:flex-row
-    md:gap-14
     md:px-14
-    md:py-0
-    lg:gap-28
     lg:px-28;
 
-  .hexagonBackdrop {
-    @apply absolute
-      left-0
-      -z-10
-      h-full
-      w-full
-      bg-[url('/static/images/patterns/hexagon-grid.svg')]
-      bg-center
-      bg-no-repeat
-      opacity-50
-      md:opacity-100;
+  main {
+    @apply items-center
+      justify-center
+      gap-8
+      md:flex-row
+      md:gap-14
+      xl:gap-28
+      2xl:gap-32;
 
-    &::after {
-      @apply absolute
-      inset-0
-      m-auto
-      aspect-square
-      w-[300px]
-      rounded-full
-      bg-green-300
-      blur-[120px]
-      content-['']
-      dark:bg-green-700;
-    }
-  }
+    section {
+      &:nth-of-type(1) {
+        @apply flex
+          max-w-[500px]
+          flex-[1_0]
+          flex-col
+          gap-8;
 
-  section {
-    &:nth-of-type(1) {
-      @apply flex
-        max-w-md
-        flex-[1_0_0]
-        flex-col
-        items-start
-        gap-8;
+        > div {
+          @apply flex
+            max-w-[400px]
+            flex-col
+            gap-4;
 
-      h1 {
-        @apply bg-gradient-subtle-gray
-          bg-clip-text
-          text-4xl
-          -tracking-[0.045rem]
-          [-webkit-text-fill-color:transparent]
-          md:text-5xl
-          md:-tracking-[0.06rem]
-          dark:bg-gradient-subtle-white;
-      }
+          p {
+            @apply text-base
+              md:text-lg;
+          }
 
-      p {
-        @apply max-w-[400px]
-          text-base
-          text-neutral-900
-          md:text-lg
-          dark:text-white;
+          small {
+            @apply text-center
+              text-sm
+              text-neutral-800
+              xs:text-xs
+              dark:text-neutral-400;
+          }
+        }
       }
 
-      > div {
-        &:nth-of-type(1) {
-          @apply flex
-            flex-col
-            gap-4;
+      &:nth-of-type(2) {
+        @apply flex
+          max-w-md
+          flex-[1_1]
+          flex-col
+          items-center
+          gap-4
+          md:max-w-2xl
+          lg:max-w-3xl;
+
+        > div {
+          @apply w-fit;
+
+          div[data-state='active'] a {
+            @apply border-none
+              bg-neutral-900
+              px-3
+              py-1.5
+              text-sm
+              font-medium;
+
+            &:hover {
+              @apply bg-neutral-800;
+            }
+          }
         }
 
-        &:nth-of-type(2) {
-          @apply flex
-            w-full
-            flex-col
-            gap-2
-            xl:flex-row;
+        > p {
+          @apply text-center
+            text-sm
+            text-neutral-800
+            dark:text-neutral-200;
         }
       }
     }
+  }
+}
 
-    &:nth-of-type(2) {
+.blogLayout {
+  @apply flex
+    w-full
+    justify-center
+    bg-gradient-subtle
+    xs:bg-none
+    dark:bg-gradient-subtle-dark
+    xs:dark:bg-none;
+
+  main {
+    @apply max-w-8xl
+      gap-4
+      px-4
+      py-12
+      md:px-14
+      lg:px-28;
+
+    p {
+      @apply text-lg
+        font-medium
+        text-neutral-800
+        dark:text-neutral-200;
+    }
+  }
+}
+
+.contentLayout {
+  @apply grid
+    w-full
+    max-w-8xl
+    grid-rows-[1fr]
+    sm:grid-cols-[1fr_theme(spacing.52)]
+    xl:grid-cols-[1fr_theme(spacing.80)]
+    xs:m-0
+    xs:block;
+
+  > *:nth-child(1) {
+    @apply flex
+      w-full
+      justify-center
+      bg-gradient-subtle
+      px-4
+      py-14
+      md:px-14
+      lg:px-28
+      xs:bg-none
+      xs:pb-4
+      dark:bg-gradient-subtle-dark
+      xs:dark:bg-none;
+
+    main {
+      @apply max-w-[660px]
+        gap-4;
+    }
+  }
+}
+
+.postLayout {
+  main {
+    > section {
       @apply flex
-        max-w-md
-        flex-col
-        content-center
+        flex-row
         items-center
-        gap-4
-        md:max-w-2xl;
+        gap-4;
+    }
 
-      p {
-        @apply text-center
-          text-sm
-          text-neutral-800
-          dark:text-neutral-200;
-      }
+    > div:nth-of-type(1) {
+      @apply mb-4
+        mt-2;
     }
   }
 }

next-data/blogData.ts

···
   NEXT_DATA_URL,
   VERCEL_ENV,
 } from '@/next.constants.mjs';
-import type { BlogDataRSC } from '@/types';
+import type { BlogPostsRSC } from '@/types';
 
-const getBlogData = (category: string): Promise<BlogDataRSC> => {
+const getBlogData = (cat: string, page?: number): Promise<BlogPostsRSC> => {
   // When we're using Static Exports the Next.js Server is not running (during build-time)
   // hence the self-ingestion APIs will not be available. In this case we want to load
   // the data directly within the current thread, which will anyways be loaded only once
   // We use lazy-imports to prevent `provideBlogData` from executing on import
   if (ENABLE_STATIC_EXPORT || (!IS_DEVELOPMENT && !VERCEL_ENV)) {
     return import('@/next-data/providers/blogData').then(
-      ({ default: provideBlogData }) => provideBlogData(category)
+      ({ provideBlogPosts, providePaginatedBlogPosts }) =>
+        page ? providePaginatedBlogPosts(cat, page) : provideBlogPosts(cat)
     );
   }
 
+  const fetchURL = page
+    ? // Provides a conditional fetch URL based on the given function parameters
+      `${NEXT_DATA_URL}blog-data/${cat}/${page}`
+    : `${NEXT_DATA_URL}blog-data/${cat}/0`;
+
   // When we're on RSC with Server capabilities we prefer using Next.js Data Fetching
   // as this will load cached data from the server instead of generating data on the fly
   // this is extremely useful for ISR and SSG as it will not generate this data on every request
-  return fetch(`${NEXT_DATA_URL}blog-data/${category}`).then(r => r.json());
+  return fetch(fetchURL).then(r => r.json());
 };
 
 export default getBlogData;

next-data/generators/blogData.mjs

···
 const blogPath = join(process.cwd(), 'pages/en/blog');
 
 /**
- * This contains the metadata of all available blog categories and
- * available pagination entries (years)
- *
- * @type {{ pagination: Set<number>; categories: Set<string>}}
+ * This contains the metadata of all available blog categories
  */
-const blogMetadata = { pagination: new Set(), categories: new Set() };
+const blogCategories = new Set(['all']);
 
 /**
  * This method parses the source (raw) Markdown content into Frontmatter
···
     category = 'uncategorized',
   } = graymatter(source).data;
 
-  // we add the year to the pagination set
-  blogMetadata.pagination.add(new Date(date).getUTCFullYear());
+  // We also use publishing years as categories for the blog
+  const publishYear = new Date(date).getUTCFullYear();
+
+  // Provides a full list of categories for the Blog Post which consists of
+  // all = (all blog posts), publish year and the actual blog category
+  const categories = [category, `year-${publishYear}`, 'all'];
+
+  // we add the year to the categories set
+  blogCategories.add(`year-${publishYear}`);
 
   // we add the category to the categories set
-  blogMetadata.categories.add(category);
+  blogCategories.add(category);
 
   // this is the url used for the blog post it based on the category and filename
   const slug = `/blog/${category}/${basename(filename, extname(filename))}`;
 
-  return { title, author, date: new Date(date), category, slug };
+  return { title, author, date: new Date(date), categories, slug };
 };
 
 /**
···
  * @return {Promise<import('../../types').BlogData>}
  */
 const generateBlogData = async () => {
-  // we retrieve all the filenames of all blog posts
+  // We retrieve the full pathnames of all Blog Posts to read each file individually
   const filenames = await getMarkdownFiles(process.cwd(), 'pages/en/blog', [
     '**/index.md',
-    '**/pagination.md',
   ]);
 
   return new Promise(resolve => {
-    const blogPosts = [];
+    const posts = [];
     const rawFrontmatter = [];
 
     filenames.forEach(filename => {
···
       // This allows us to only read the frontmatter part of each file
       // and optimise the read-process as we have thousands of markdown files
       _readLine.on('close', () => {
-        const frontmatter = getFrontMatter(
-          filename,
-          rawFrontmatter[filename][1]
-        );
-
-        blogPosts.push(frontmatter);
+        posts.push(getFrontMatter(filename, rawFrontmatter[filename][1]));
 
-        // Once we finish reading all fles
-        if (blogPosts.length === filenames.length) {
-          resolve({
-            pagination: [...blogMetadata.pagination].sort(),
-            categories: [...blogMetadata.categories].sort(),
-            posts: blogPosts.sort((a, b) => b.date - a.date),
-          });
+        if (posts.length === filenames.length) {
+          resolve({ categories: [...blogCategories], posts });
         }
       });
     });

next-data/generators/websiteFeeds.mjs

···
  * This method generates RSS website feeds based on the current website configuration
  * and the current blog data that is available
  *
- * @param {Promise<import('../../types').BlogDataRSC>} blogData
+ * @param {import('../../types').BlogPostsRSC} blogData
  */
-const generateWebsiteFeeds = blogData => {
-  return blogData.then(({ posts }) => {
-    /**
-     * This generates all the Website RSS Feeds that are used for the website
-     *
-     * @type {[string, Feed][]}
-     */
-    const websiteFeeds = siteConfig.rssFeeds.map(
-      ({ category, title, description, file }) => {
-        const feed = new Feed({
-          id: file,
-          title: title,
-          language: 'en',
-          link: `${canonicalUrl}/feed/${file}`,
-          description: description,
-        });
+const generateWebsiteFeeds = ({ posts }) => {
+  /**
+   * This generates all the Website RSS Feeds that are used for the website
+   *
+   * @type {[string, Feed][]}
+   */
+  const websiteFeeds = siteConfig.rssFeeds.map(
+    ({ category, title, description, file }) => {
+      const feed = new Feed({
+        id: file,
+        title: title,
+        language: 'en',
+        link: `${canonicalUrl}/feed/${file}`,
+        description: description,
+      });
 
-        const blogFeedEntries = posts
-          .filter(post => !category || post.category === category)
-          .map(post => ({
-            id: post.slug,
-            title: post.title,
-            author: post.author,
-            date: new Date(post.date),
-            link: `${canonicalUrl}${post.slug}`,
-          }));
+      const blogFeedEntries = posts
+        .filter(post => post.categories.includes(category))
+        .map(post => ({
+          id: post.slug,
+          title: post.title,
+          author: post.author,
+          date: new Date(post.date),
+          link: `${canonicalUrl}${post.slug}`,
+        }));
 
-        blogFeedEntries.forEach(entry => feed.addItem(entry));
+      blogFeedEntries.forEach(entry => feed.addItem(entry));
 
-        return [file, feed];
-      }
-    );
+      return [file, feed];
+    }
+  );
 
-    return new Map(websiteFeeds);
-  });
+  return new Map(websiteFeeds);
 };
 
 export default generateWebsiteFeeds;

next-data/providers/blogData.ts

···
 import { cache } from 'react';
 
 import generateBlogData from '@/next-data/generators/blogData.mjs';
-import type { BlogDataRSC } from '@/types';
+import { BLOG_POSTS_PER_PAGE } from '@/next.constants.mjs';
+import type { BlogPostsRSC } from '@/types';
 
-const blogData = generateBlogData();
+const { categories, posts } = await generateBlogData();
 
-const provideBlogData = cache(
-  async (category?: string): Promise<BlogDataRSC> => {
-    return blogData.then(({ posts, categories, pagination }) => {
-      const meta = { categories, pagination };
+export const provideBlogCategories = cache(() => categories);
 
-      if (category && categories.includes(category)) {
-        return {
-          posts: posts.filter(post => post.category === category),
-          pagination: { next: null, prev: null },
-          meta,
-        };
-      }
+export const provideBlogPosts = cache((category: string): BlogPostsRSC => {
+  const categoryPosts = posts
+    .filter(post => post.categories.includes(category))
+    .sort((a, b) => b.date.getTime() - a.date.getTime());
 
-      if (category && category.startsWith('year-')) {
-        const paramYear = Number(category.replace('year-', ''));
+  // Total amount of possible pages given the amount of blog posts
+  const total = categoryPosts.length / BLOG_POSTS_PER_PAGE;
 
-        const isEqualYear = (date: string) =>
-          new Date(date).getFullYear() === paramYear;
+  return {
+    posts: categoryPosts,
+    pagination: {
+      prev: null,
+      next: null,
+      // In case the division results on a remainder we need
+      // to have an extra page containing the remainder entries
+      pages: Math.floor(total % 1 === 0 ? total : total + 1),
+      total: categoryPosts.length,
+    },
+  };
+});
 
-        return {
-          posts: posts.filter(({ date }) => isEqualYear(date)),
-          pagination: {
-            next: pagination.includes(paramYear + 1) ? paramYear + 1 : null,
-            prev: pagination.includes(paramYear - 1) ? paramYear - 1 : null,
-          },
-          meta,
-        };
-      }
+export const providePaginatedBlogPosts = cache(
+  (category: string, page: number): BlogPostsRSC => {
+    const { posts, pagination } = provideBlogPosts(category);
+
+    // This autocorrects if invalid numbers are given to only allow
+    // actual valid numbers to be provided
+    const actualPage = page < 1 ? 1 : page;
 
-      if (category && !categories.includes(category)) {
-        return { posts: [], pagination: { next: null, prev: null }, meta };
-      }
+    // If the page is within the allowed range then we calculate
+    // the pagination of Blog Posts for a given current page "page"
+    if (actualPage <= pagination.pages) {
+      return {
+        posts: posts.slice(
+          BLOG_POSTS_PER_PAGE * (actualPage - 1),
+          BLOG_POSTS_PER_PAGE * actualPage
+        ),
+        pagination: {
+          prev: actualPage > 1 ? actualPage - 1 : null,
+          next: actualPage < pagination.pages ? actualPage + 1 : null,
+          pages: pagination.pages,
+          total: posts.length,
+        },
+      };
+    }
 
-      return { posts, pagination: { next: null, prev: null }, meta };
-    });
+    return {
+      posts: [],
+      pagination: {
+        prev: pagination.total,
+        next: null,
+        pages: pagination.pages,
+        total: posts.length,
+      },
+    };
   }
 );
-
-export default provideBlogData;

next-data/providers/releaseData.ts

···
 
 import generateReleaseData from '@/next-data/generators/releaseData.mjs';
 
-const releaseData = generateReleaseData();
+const releaseData = await generateReleaseData();
 
-const provideReleaseData = cache(async () => releaseData);
+const provideReleaseData = cache(() => releaseData);
 
 export default provideReleaseData;

next-data/providers/websiteFeeds.ts

···
 import { cache } from 'react';
 
 import generateWebsiteFeeds from '@/next-data/generators/websiteFeeds.mjs';
-import provideBlogData from '@/next-data/providers/blogData';
+import { provideBlogPosts } from '@/next-data/providers/blogData';
 
-const websiteFeeds = generateWebsiteFeeds(provideBlogData());
+const websiteFeeds = await generateWebsiteFeeds(provideBlogPosts('all'));
 
-const provideWebsiteFeeds = cache(async (feed: string) => {
-  return websiteFeeds.then(feeds => {
-    if (feed.includes('.xml') && feeds.has(feed)) {
-      return feeds.get(feed)?.rss2();
-    }
+const provideWebsiteFeeds = cache((feed: string) => {
+  if (feed.includes('.xml') && websiteFeeds.has(feed)) {
+    return websiteFeeds.get(feed)?.rss2();
+  }
 
-    return undefined;
-  });
+  return undefined;
 });
 
 export default provideWebsiteFeeds;

next.config.mjs

···
   BASE_PATH,
   ENABLE_STATIC_EXPORT,
   ENABLE_WEBSITE_REDESIGN,
+} from './next.constants.mjs';
+import { redirects, rewrites } from './next.rewrites.mjs';
+import {
   SENTRY_DSN,
   SENTRY_ENABLE,
   SENTRY_EXTENSIONS,
   SENTRY_TUNNEL,
-} from './next.constants.mjs';
-import { redirects, rewrites } from './next.rewrites.mjs';
+} from './sentry.constants.mjs';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {

next.constants.mjs

···
 'use strict';
 
 /**
- * This is used for the current Legacy Website Blog Pagination Generation
- *
- * @deperecated remove with website redesign
- */
-export const CURRENT_YEAR = new Date().getFullYear();
-
-/**
  * This is used to verify if the current Website is running on a Development Environment
  */
 export const IS_DEVELOPMENT = process.env.NODE_ENV === 'development';
···
  */
 export const MD_EXTENSION_REGEX = /((\/)?(index))?\.mdx?$/i;
 
+/**
+ * This defines how many blog posts each pagination page should have
+ *
+ * @todo: update the value when moving to website redesign
+ */
+export const BLOG_POSTS_PER_PAGE = ENABLE_WEBSITE_REDESIGN ? 6 : 20;
+
+/**
+ * The `localStorage` key to store the theme choice of `next-themes`
+ *
+ * This is what allows us to store user preference for theming
+ */
+export const THEME_STORAGE_KEY = 'theme';
+
 /***
  * This is a list of all external links that are used on website sitemap.
  * @see https://github.com/nodejs/nodejs.org/issues/5813 for more context
···
   'https://trademark-list.openjsf.org/',
   'https://www.linuxfoundation.org/cookies',
 ];
-
-/**
- * The `localStorage` key to store the theme choice of `next-themes`
- *
- * This is what allows us to store user preference for theming
- */
-export const THEME_STORAGE_KEY = 'theme';
-
-/**
- * This is the Sentry DSN for the Node.js Website Project
- */
-export const SENTRY_DSN =
-  'https://[e-mail]/4506191307735040';
-
-/**
- * This states if Sentry should be enabled and bundled within our App
- *
- * We enable sentry by default if we're om development mode or deployed
- * on Vercel (either production or preview branches)
- */
-export const SENTRY_ENABLE = IS_DEVELOPMENT || !!VERCEL_ENV;
-
-/**
- * This configures the sampling rate for Sentry
- *
- * We always want to capture 100% on Vercel Preview Branches
- * and not when it's on Production Mode (nodejs.org)
- */
-export const SENTRY_CAPTURE_RATE =
-  SENTRY_ENABLE && VERCEL_ENV && BASE_URL !== 'https://nodejs.org' ? 1.0 : 0.01;
-
-/**
- * Provides the Route for Sentry's Server-Side Tunnel
- *
- * This is a `@sentry/nextjs` specific feature
- */
-export const SENTRY_TUNNEL = (components = '') =>
-  SENTRY_ENABLE ? `/monitoring${components}` : undefined;
-
-/**
- * This configures which Sentry features to tree-shake/remove from the Sentry bundle
- *
- * @see https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/
- */
-export const SENTRY_EXTENSIONS = {
-  __SENTRY_DEBUG__: false,
-  __SENTRY_TRACING__: false,
-  __RRWEB_EXCLUDE_IFRAME__: true,
-  __RRWEB_EXCLUDE_SHADOW_DOM__: true,
-  __SENTRY_EXCLUDE_REPLAY_WORKER__: true,
-};

next.dynamic.constants.mjs

···
 'use strict';
 
-import { BASE_PATH, BASE_URL, CURRENT_YEAR } from './next.constants.mjs';
+import {
+  provideBlogCategories,
+  provideBlogPosts,
+} from './next-data/providers/blogData';
+import { BASE_PATH, BASE_URL } from './next.constants.mjs';
 import { siteConfig } from './next.json.mjs';
 import { defaultLocale } from './next.locales.mjs';
 
···
  *
  * @type {((route: import('./types').RouteSegment) => boolean)[]} A list of Ignored Routes by Regular Expressions
  */
-export const STATIC_ROUTES_IGNORES = [
-  // Ignore the 404 route on Static Generation
+export const IGNORED_ROUTES = [
+  // This is used to ignore the 404 route for the static generation (/404)
   ({ pathname }) => pathname === '404',
-  // This is used to ignore is used to ignore all blog routes except for the English language
+  // This is used to ignore all blog routes except for the English language
   ({ locale, pathname }) =>
     locale !== defaultLocale.code && /^blog\//.test(pathname),
-  // This is used to ignore the blog/pagination meta route
-  // @deprecated remove with website redesign
-  ({ pathname }) => /^blog\/pagination/.test(pathname),
-];
-
-/**
- * This is a list of all dynamic routes or pages from the Website that we do not
- * want to allow to be dynamically access by our Dynamic Route Engine
- *
- * @type {RegExp[]} A list of Ignored Routes by Regular Expressions
- * @deprecated remove with website redesign
- */
-export const DYNAMIC_ROUTES_IGNORES = [
-  // This is used to ignore the blog/pagination route
-  /^blog\/pagination/,
-];
-
-/**
- * This is a list of all static routes that we want to rewrite their pathnames
- * into something else. This is useful when you want to have the current pathname in the route
- * but replace the actual Markdown file that is being loaded by the Dynamic Route to something else
- *
- * @type {[RegexExp, (pathname: string) => string][]}
- * @deprecated remove with website redesign
- */
-export const DYNAMIC_ROUTES_REWRITES = [
-  [/^blog\/year-/, () => 'blog/pagination'],
 ];
 
 /**
- * This is a constant that should be used during runtime by (`getStaticPaths`) on `pages/[...path].tsx`
- *
- * This function is used to provide an extra set of routes that are not provided by `next.dynamic.mjs`
- * static route discovery. This can happen when we have dynamic routes that **must** be provided
- * within the static export (static build) of the website. This constant usually would be used along
- * with a matching pathname on `DYNAMIC_ROUTES_REWRITES`.
+ * This constant is used to create static routes on-the-fly that do not have a file-system
+ * counterpart route. This is useful for providing routes with matching Layout Names
+ * but that do not have Markdown content and a matching file for the route
  *
- * @type {string[]} A list of all the Dynamic Routes that are generated by the Website
- * @deprecated remove with website redesign
+ * @type {Map<string, import('./types').Layouts>} A Map of pathname and Layout Name
  */
-export const DYNAMIC_GENERATED_ROUTES = [
-  ...Array.from(
-    // Statically generate a List of Years from Current Year
-    // til 2011 which is the oldest year with blog posts
-    { length: CURRENT_YEAR - 2011 },
-    (_, i) => CURRENT_YEAR - i
-  ).map(year => `blog/year-${year}`),
-];
+export const DYNAMIC_ROUTES = new Map([
+  // Provides Routes for all Blog Categories
+  ...provideBlogCategories().map(c => [`blog/${c}`, 'blog-category.hbs']),
+  // Provides Routes for all Blog Categories w/ Pagination
+  ...provideBlogCategories()
+    // retrieves the amount of pages for each blog category
+    .map(c => [c, provideBlogPosts(c).pagination.pages])
+    // creates a numeric array for each page and define a pathname for
+    // each page for a category (i.e. blog/all/page/1)
+    .map(([c, t]) => [...Array(t).keys()].map(p => `blog/${c}/page/${p + 1}`))
+    // creates a tuple of each pathname and layout for the route
+    .map(paths => paths.map(path => [path, 'blog-category.hbs']))
+    // flattens the array since we have a .map inside another .map
+    .flat(),
+]);
 
 /**
  * This is the default Next.js Page Metadata for all pages
  *
  * @type {import('next').Metadata}
  */
-export const DEFAULT_METADATA = {
+export const PAGE_METADATA = {
   metadataBase: new URL(`${BASE_URL}${BASE_PATH}`),
   title: siteConfig.title,
   description: siteConfig.description,
···
  *
  * @return {import('next').Viewport}
  */
-export const DEFAULT_VIEWPORT = {
+export const PAGE_VIEWPORT = {
   themeColor: siteConfig.accentColor,
   width: 'device-width',
   initialScale: 1,

next.dynamic.mjs

···
 import { cache } from 'react';
 import { VFile } from 'vfile';
 
+import { BASE_URL, BASE_PATH, IS_DEVELOPMENT } from './next.constants.mjs';
 import {
-  MD_EXTENSION_REGEX,
-  BASE_URL,
-  BASE_PATH,
-  IS_DEVELOPMENT,
-} from './next.constants.mjs';
-import {
-  DYNAMIC_ROUTES_IGNORES,
-  DYNAMIC_ROUTES_REWRITES,
-  STATIC_ROUTES_IGNORES,
-  DYNAMIC_GENERATED_ROUTES,
-  DEFAULT_METADATA,
+  IGNORED_ROUTES,
+  DYNAMIC_ROUTES,
+  PAGE_METADATA,
 } from './next.dynamic.constants.mjs';
 import { getMarkdownFiles } from './next.helpers.mjs';
 import { siteConfig } from './next.json.mjs';
···
 // This is a small utility that allows us to quickly separate locale from the remaning pathname
 const getPathname = (path = []) => path.join('/');
 
-// This tests if the current pathname matches any expression that belongs
-// to the list of ignored routes and if it does we return `true` to indicate that
-const shouldIgnoreRoute = pathname =>
-  pathname.length > 0 && DYNAMIC_ROUTES_IGNORES.some(e => e.test(pathname));
-
-// This tests if the current pathname matches any sort of rewrite rule
-// and if it does we return a the replacement expression for the pathname
-const getRouteRewrite = pathname =>
-  (pathname.length > 0 &&
-    DYNAMIC_ROUTES_REWRITES.find(([e]) => e.test(pathname))) ||
-  [];
-
 // This maps a pathname into an actual route object that can be used
 // we use a platform-specific separator to split the pathname
 // since we're using filepaths here and not URL paths
···
   );
 
   websitePages.forEach(filename => {
-    let pathname = filename.replace(MD_EXTENSION_REGEX, '');
+    // This Regular Expression is used to remove the `index.md(x)` suffix
+    // of a name and to remove the `.md(x)` extensions of a filename.
+    let pathname = filename.replace(/((\/)?(index))?\.mdx?$/i, '');
 
     if (pathname.length > 1 && pathname.endsWith(sep)) {
       pathname = pathname.substring(0, pathname.length - 1);
···
    */
   const getRoutesByLanguage = async (locale = defaultLocale.code) => {
     const shouldIgnoreStaticRoute = pathname =>
-      STATIC_ROUTES_IGNORES.every(e => !e({ pathname, locale }));
+      IGNORED_ROUTES.every(e => !e({ pathname, locale }));
 
     return [...pathnameToFilename.keys()]
       .filter(shouldIgnoreStaticRoute)
-      .concat(DYNAMIC_GENERATED_ROUTES);
+      .concat([...DYNAMIC_ROUTES.keys()]);
   };
 
   /**
···
    * @returns {import('next').Metadata}
    */
   const _getPageMetadata = async (locale = defaultLocale.code, path = '') => {
-    const pageMetadata = { ...DEFAULT_METADATA };
+    const pageMetadata = { ...PAGE_METADATA };
 
     const { source = '' } = await getMarkdownFile(locale, path);
 
     const { data } = matter(source);
 
     pageMetadata.title = data.title
-      ? `${data.title} | ${siteConfig.title}`
+      ? `${siteConfig.title} — ${data.title}`
       : siteConfig.title;
 
     pageMetadata.twitter.title = pageMetadata.title;
···
 
   return {
     mapPathToRoute,
-    shouldIgnoreRoute,
     getPathname,
-    getRouteRewrite,
     getRoutesByLanguage,
     getMDXContent,
     getMarkdownFile,

next.mdx.compiler.mjs

···
  * @returns {Promise<{
  *   MDXContent: import('mdx/types').MDXContent;
  *   headings: import('@vcarl/remark-headings').Heading[];
- *   frontmatter: Record<string, any>, readingTime: import('reading-time').ReadTimeResults
+ *   frontmatter: Record<string, any>;
+ *   readingTime: import('reading-time').ReadTimeResults;
  * }>}
  */
 export async function compileMDX(source, fileExtension) {

next.mdx.shiki.mjs

···
  * @return {boolean} - True when it is a valid code element, false otherwise.
  */
 function isCodeBlock(node) {
-  return node?.tagName === 'pre' && node?.children[0].tagName === 'code';
-}
-
-/**
- * Retrieves a list indicating the starting, and ending indexes of sequential
- * code elements.
- *
- * @param {Node} tree - The current MDX resolved content.
- *
- * @return {{start: number, end: number}[]} - The list containing every range of
- * sequential code elements.
- */
-function getCodeTabsRange(tree) {
-  const rangeMap = {};
-  let start = null;
-
-  visit(tree, 'element', (node, index, parent) => {
-    // Adding 2 since there is one text node between every element
-    const next = index + 2;
-
-    if (isCodeBlock(node) && isCodeBlock(parent?.children[next])) {
-      start ??= index;
-      rangeMap[start] = next;
-
-      // Prevent visiting the code block children
-      return SKIP;
-    }
-
-    // End of sequential code elements, reset the start for the next range
-    start = null;
-  });
-
-  return Object.entries(rangeMap).map(([start, end]) => ({
-    start: Number(start),
-    end: Number(end),
-  }));
+  return Boolean(
+    node?.tagName === 'pre' && node?.children[0].tagName === 'code'
+  );
 }
 
 export default function rehypeShikiji() {
   return async function (tree) {
-    // Retrieve all sequential code boxes to transform
-    const ranges = getCodeTabsRange(tree);
-
-    if (ranges.length > 0) {
-      // Make a mutable clone without reference
-      const children = [...tree.children];
-
-      for (const range of ranges) {
-        // Simple tree containing the sequential code boxes among text nodes
-        const slicedTree = {
-          type: 'root',
-          children: tree.children.slice(range.start, range.end + 1),
-        };
-
-        const languages = [];
-        const displayNames = [];
-        const codeTabsChildren = [];
+    visit(tree, 'element', (_, index, parent) => {
+      const languages = [];
+      const displayNames = [];
+      const codeTabsChildren = [];
 
-        let defaultTab = '0';
+      let defaultTab = '0';
+      let currentIndex = index;
 
-        visit(slicedTree, 'element', node => {
-          const codeElement = node.children[0];
+      while (isCodeBlock(parent?.children[currentIndex])) {
+        const codeElement = parent?.children[currentIndex].children[0];
 
-          const displayName = getMetaParameter(
-            codeElement.data?.meta,
-            'displayName'
-          );
+        const displayName = getMetaParameter(
+          codeElement.data?.meta,
+          'displayName'
+        );
 
-          // We should get the language name from the class name
-          if (codeElement.properties.className?.length) {
-            const className = codeElement.properties.className.join(' ');
-            const matches = className.match(/language-(?<language>.*)/);
+        // We should get the language name from the class name
+        if (codeElement.properties.className?.length) {
+          const className = codeElement.properties.className.join(' ');
+          const matches = className.match(/language-(?<language>.*)/);
 
-            languages.push(matches?.groups.language ?? 'text');
-          }
+          languages.push(matches?.groups.language ?? 'text');
+        }
 
-          // Map the display names of each variant for the CodeTab
-          displayNames.push(displayName?.replaceAll('|', '') ?? '');
-          codeTabsChildren.push(node);
+        // Map the display names of each variant for the CodeTab
+        displayNames.push(displayName?.replaceAll('|', '') ?? '');
 
-          // If `active="true"` is provided in a CodeBox
-          // then the default selected entry of the CodeTabs will be the desired entry
-          const specificActive = getMetaParameter(
-            codeElement.data?.meta,
-            'active'
-          );
+        codeTabsChildren.push(parent?.children[currentIndex]);
 
-          if (specificActive === 'true') {
-            defaultTab = String(codeTabsChildren.length - 1);
-          }
+        // If `active="true"` is provided in a CodeBox
+        // then the default selected entry of the CodeTabs will be the desired entry
+        const specificActive = getMetaParameter(
+          codeElement.data?.meta,
+          'active'
+        );
 
-          // Prevent visiting the code block children
-          return SKIP;
-        });
+        if (specificActive === 'true') {
+          defaultTab = String(codeTabsChildren.length - 1);
+        }
 
-        // Each iteration reduces the `children` length, so it needs to be
-        // accounted in the following operations
-        const lengthOffset = tree.children.length - children.length;
-        const compensatedRange = {
-          start: range.start - lengthOffset,
-          end: range.end - lengthOffset,
-        };
+        const nextNode = parent?.children[currentIndex + 1];
 
-        const deleteCount = compensatedRange.end - compensatedRange.start + 1;
+        // If the CodeBoxes are on the root tree the next Element will be
+        // an empty text element so we should skip it
+        currentIndex += nextNode && nextNode?.type === 'text' ? 2 : 1;
+      }
 
-        // Replace the sequential code boxes with a code tabs element
-        children.splice(compensatedRange.start, deleteCount, {
+      if (codeTabsChildren.length >= 2) {
+        const codeTabElement = {
           type: 'element',
           tagName: 'CodeTabs',
           children: codeTabsChildren,
···
             displayNames: displayNames.join('|'),
             defaultTab,
           },
-        });
-      }
+        };
 
-      // Update the tree with the transformed children
-      Object.assign(tree, { children: children });
-    }
+        // This removes all the original Code Elements and adds a new CodeTab Element
+        // at the original start of the first Code Element
+        parent.children.splice(index, currentIndex, codeTabElement);
+
+        // Prevent visiting the code block children and for the next N Elements
+        // since all of them belong to this CodeTabs Element
+        return [SKIP, currentIndex];
+      }
+    });
 
     visit(tree, 'element', (node, index, parent) => {
       // We only want to process <pre>...</pre> elements

next.mdx.use.mjs

···
 import Blockquote from './components/Common/Blockquote';
 import Button from './components/Common/Button';
 import DownloadButton from './components/Downloads/DownloadButton';
+import DownloadLink from './components/Downloads/DownloadLink';
 import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable';
 import HomeDownloadButton from './components/Home/HomeDownloadButton';
 import Link from './components/Link';
···
   CodeTabs: MDXCodeTabs,
   // Renders a Download Button
   DownloadButton: DownloadButton,
+  // Renders a Download Link
+  DownloadLink: DownloadLink,
   // Renders a Button Component for `button` tags
   Button: Button,
 };
···
     ? Blockquote
     : ({ children }) => <div className="highlight-box">{children}</div>,
   // Renders a CodeBox Component for `pre` tags
-  pre: ({ children, ...props }) => (
-    <MDXCodeBox {...props}>{children}</MDXCodeBox>
-  ),
+  pre: MDXCodeBox,
 };

package-lock.json

···
         "@radix-ui/react-toast": "^1.1.5",
         "@savvywombat/tailwindcss-grid-areas": "~3.1.0",
         "@sentry/nextjs": "~7.86.0",
+        "@tailwindcss/container-queries": "~0.1.1",
         "@types/node": "20.10.6",
         "@vcarl/remark-headings": "~0.1.0",
         "@vercel/analytics": "~1.1.1",
···
       "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.5.tgz",
       "integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==",
       "dev": true
+    },
+    "node_modules/@tailwindcss/container-queries": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz",
+      "integrity": "sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==",
+      "peerDependencies": {
+        "tailwindcss": ">=3.2.0"
+      }
     },
     "node_modules/@testing-library/dom": {
       "version": "9.3.3",

package.json

···
     "@radix-ui/react-toast": "^1.1.5",
     "@savvywombat/tailwindcss-grid-areas": "~3.1.0",
     "@sentry/nextjs": "~7.86.0",
+    "@tailwindcss/container-queries": "~0.1.1",
     "@types/node": "20.10.6",
     "@vcarl/remark-headings": "~0.1.0",
     "@vercel/analytics": "~1.1.1",
···
     "stylelint-order": "6.0.4",
     "stylelint-selector-bem-pattern": "3.0.1",
     "user-agent-data-types": "0.4.2"
-  },
-  "overrides": {
-    "stylelint-selector-bem-pattern": {
-      "stylelint": "16.1.0"
-    }
   }
 }

pages/en/blog/advisory-board/index.md

···
----
-title: Advisory Board
-layout: blog-category.hbs
----

pages/en/blog/announcements/index.md

···
----
-title: Announcements
-layout: blog-category.hbs
----

pages/en/blog/community/index.md

···
----
-title: Community
-layout: blog-category.hbs
----

pages/en/blog/feature/index.md

···
----
-title: Features
-layout: blog-category.hbs
----

pages/en/blog/module/index.md

···
----
-title: Modules
-layout: blog-category.hbs
----

pages/en/blog/nodejs-road-ahead.md

···
----
-date: '2014-01-16T23:00:00.000Z'
-title: Node.js and the Road Ahead
-layout: blog-post.hbs
-author: Timothy J Fontaine
----
-
-As the new project lead for Node.js I am excited for our future, and want to
-give you an update on where we are.
-
-One of Node's major goals is to provide a small core, one that provides the
-right amount of surface area for consumers to achieve and innovate, without
-Node itself getting in the way. That ethos is alive and well, we're going to
-continue to provide a small, simple, and stable set of APIs that facilitate the
-amazing uses the community finds for Node. We're going to keep providing
-backward compatible APIs, so code you write today will continue to work on
-future versions of Node. And of course, performance tuning and bug fixing will
-always be an important part of every release cycle.
-
-The release of Node v0.12 is imminent, and a lot of significant work has gone
-into this release. There's streams3, a better keep alive agent for http, the vm
-module is now based on contextify, and significant performance work done in
-core features (Buffers, TLS, streams). We have a few APIs that are still being
-ironed out before we can feature freeze and branch (execSync, AsyncListeners,
-user definable instrumentation). We are definitely in the home stretch.
-
-But Node is far from done. In the short term there will be new releases of v8
-that we'll need to track, as well as integrating the new ABI stable C module
-interface. There are interesting language features that we can use to extend
-Node APIs (extend not replace). We need to write more tooling, we need to
-expose more interfaces to further enable innovation. We can explore
-functionality to embed Node in your existing project.
-
-The list can go on and on. Yet, Node is larger than the software itself. Node
-is also the community, the businesses, the ecosystems, and their related
-events. With that in mind there are things we can work to improve.
-
-The core team will be improving its procedures such that we can quickly and
-efficiently communicate with you. We want to provide high quality and timely
-responses to issues, describe our development roadmap, as well as provide our
-progress during each release cycle. We know you're interested in our plans for
-Node, and it's important we're able to provide that information. Communication
-should be bidirectional: we want to continue to receive feedback about how
-you're using Node, and what your pain points are.
-
-After the release of v0.12 we will facilitate the community to contribute and
-curate content for nodejs.org. Allowing the community to continue to invest in
-Node will ensure nodejs.org is an excellent starting point and the primary
-resource for tutorials, documentation, and materials regarding Node. We have an
-awesome and engaged community, and they're paramount to our success.
-
-I'm excited for Node's future, to see new and interesting use cases, and to
-continue to help businesses scale and innovate with Node. We have a lot we can
-accomplish together, and I look forward to seeing those results.

pages/en/blog/npm/index.md

···
----
-title: NPM
-layout: blog-category.hbs
----

pages/en/blog/pagination.md

···
----
-title: Blog from
-layout: blog-category.hbs
-author: The Node.js Project
----

pages/en/blog/release/index.md

···
----
-title: Releases
-layout: blog-category.hbs
----

pages/en/blog/release/v0.6.3.md

···
 
 2011.11.25, Version 0.6.3 (stable)
 
-- #2083 Land NPM in Node. It is included in packages/installers and installed on `make install`.
+- #2083 Land npm in Node. It is included in packages/installers and installed on `make install`.
 - #2076 Add logos to windows installer.
 - #1711 Correctly handle http requests without headers. (Ben Noordhuis, Felix Geisendörfer)
 - TLS: expose more openssl SSL context options and constants. (Ben Noordhuis)

pages/en/blog/uncategorized/index.md

···
----
-title: Uncategorized
-layout: blog-category.hbs
----

pages/en/blog/video/index.md

···
----
-title: Videos
-layout: blog-category.hbs
----

pages/en/blog/vulnerability/index.md

···
----
-title: Vulnerabilities
-layout: blog-category.hbs
----

pages/en/blog/weekly-updates/index.md

···
----
-title: Weekly Updates
-layout: blog-category.hbs
----

pages/en/blog/weekly-updates/weekly-update.2015-04-17.md

···
 ## Community Updates
 
 - Difference between io.js and The Node Foundation [iojs/io.js#1416](https://github.com/nodejs/node/issues/1416).
-- NPM launches private modules and npm inc [raises](http://techcrunch.com/2015/04/14/popular-javascript-package-manager-npm-raises-8m-launches-private-modules/).
+- npm launches private modules and npm inc [raises](http://techcrunch.com/2015/04/14/popular-javascript-package-manager-npm-raises-8m-launches-private-modules/).
 - Thoughts of Node.js Foundation on [Medium](https://medium.com/@programmer/thoughts-on-node-foundation-abcf86c72786).
 - io.js v1.8.0 crypto performance on [io.js wiki](https://github.com/nodejs/node/wiki/Crypto-Performance-Notes-for-OpenSSL-1.0.2a-on-iojs-v1.8.0).
 - io.js mention on [Oracle's blog](https://blogs.oracle.com/java-platform-group/entry/node_js_and_io_js).

pages/en/blog/weekly-updates/weekly-update.2015-04-24.md

···
 
 - Fedor Indutny opened discussion about removing TLS `newSession` and `resumeSession` event. [iojs/io.js#1462](https://github.com/nodejs/node/issues/1462)
 - Proposal to change the C HTTP parser JS HTTP parser [here](https://github.com/nodejs/node/pull/1457)
-- NPM founder talks about io.js at [InfoWorld](http://www.infoworld.com/article/2910594/node-js/npm-founder-foresees-merger-node-js-io-js.html)
+- npm founder talks about io.js at [InfoWorld](http://www.infoworld.com/article/2910594/node-js/npm-founder-foresees-merger-node-js-io-js.html)
 - Proposal to add mikeal, mscdex, shigeki as new TC members. [iojs/io.js#1483](https://github.com/nodejs/node/issues/1483#issuecomment-95128140)
 
 ## Upcoming Events

pages/en/download/package-manager.md

···
 ---
-layout: page.hbs
+layout: docs.hbs
 title: Installing Node.js via package manager
 ---
 

pages/en/learn/getting-started/an-introduction-to-the-npm-package-manager.md

···
 ---
-title: An introduction to the NPM package manager
+title: An introduction to the npm package manager
 layout: learn.hbs
 authors: flaviocopes, MylesBorins, LaRuaNa, jgb-solutions, amiller-gh, ahmadawais
 ---
 
-# An introduction to the NPM package manager
+# An introduction to the npm package manager
 
 ## Introduction to npm
 

pages/en/new-design/.gitkeep

···
-!.gitignore

pages/en/new-design/index.mdx

···
 ---
+title: Run JavaScript Everywhere
 layout: home.hbs
 ---
 
···
   <WithBadge section="index" />
 
   <div>
-    # Run JavaScript Everywhere
+    <h1 className="special">Run JavaScript Everywhere</h1>
 
-    Node.js is a free, open-sourced, cross-platform JavaScript run-time
+    Node.js is a free, open-source, cross-platform JavaScript runtime
     environment that lets developers write command line tools and server-side
     scripts outside of a browser.
 
   </div>
+
   <div>
     <WithNodeRelease status={['Active LTS', 'Maintenance LTS']}>
       {({ release }) => (
-        <DownloadButton release={release}>Download Node.js (LTS)</DownloadButton>
+        <>
+          <DownloadButton release={release}>Download Node.js (LTS)</DownloadButton>
+          <small>
+            Downloads Node.js <b>{release.versionWithPrefix}</b> with long-term support.
+            Node.js can also be installed via <a href="/download/package-manager">package managers</a>.
+          </small>
+        </>
+      )}
+    </WithNodeRelease>
+    <WithNodeRelease status="Current">
+      {({ release }) => (
+        <small>
+          Want new features sooner?
+          Get <b>Node.js <DownloadLink release={release}>{release.versionWithPrefix}</DownloadLink></b> instead.
+        </small>
       )}
     </WithNodeRelease>
-
-    <Button kind="secondary" href="/learn">Get Started</Button>
-
   </div>
 </section>
 
 <section>
-  <CodeTabs
-    languages="bash|bash"
-    displayNames="macOS / Linux (nvm)|Windows (Chocolatey)"
-    linkUrl="/download/package-manager"
-    linkText="More Options"
-  >
-    ```bash
-    # Install Node Version Manager (NVM)
-    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
+  <div>
+    ```js displayName="Create an HTTP Server"
+    import { createServer } from 'node:http';
+
+    const server = createServer((req, res) => {
+      res.writeHead(200, { 'Content-Type': 'text/plain' });
+      res.end('Hello World!\n');
+    });
 
-    # Install Node.js
-    nvm install --lts
+    // starts a simple http server locally on port 3000
+    server.listen(3000, '127.0.0.1', () => {
+      console.log('Listening on 127.0.0.1:3000');
+    });
+    ```
 
-    # Check that Node is installed
-    node -v
+    ```js displayName="Write Tests"
+    import assert from 'node:assert';
+    import test from 'node:test';
 
-    # Check your NPM version
-    npm -v
+    test('that 1 is equal 1', () => {
+      assert.strictEqual(1, 1);
+    });
+
+    test('that throws as 1 is not equal 2', () => {
+      // throws an exception because 1!=2
+      assert.strictEqual(1, 2);
+    });
     ```
 
-    ```bash
-    # Install Chocolatey
-    iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
+    ```js displayName="Read and Hash a File"
+    import { createHash } from 'node:crypto';
+    import { readFile } from 'node:fs/promises';
+
+    const hasher = createHash('sha1');
+    const fileContent = await readFile('./package.json');
+
+    hasher.setEncoding('hex');
+    hasher.write(fileContent);
+    hasher.end();
+
+    const fileHash = hasher.read();
+    ```
+
+    ```js displayName="Read Streams"
+    import { createReadStream, createWriteStream } from 'node:fs';
+
+    const res = await fetch('https://nodejs.org/dist/index.json');
+    const json = await res.json(); // yields a json object
+
+    const readableStream = createReadStream('./package.json');
+    const writableStream = createWriteStream('./package2.json');
 
-    # Install Node.js
-    choco install nodejs-lts
+    readableStream.setEncoding('utf8');
 
-    # Check that Node is installed
-    node -v
+    readableStream.on('data', chunk => writableStream.write(chunk));
+    ```
 
-    # Check your NPM version
-    npm -v
+    ```js displayName="Work with Workers"
+    // file containing main thread (main.mjs)
+    import { Worker } from 'node:worker_threads';
+
+    const w = new Worker('./worker.mjs', { workerData: 'hello!' });
+    w.on('message', data => console.log('processed data:', data));
+
+    // file containing worker (worker.mjs)
+    import { parentPort, workerData } from 'node:worker_threads';
+
+    // do some complex computational workload
+    parentPort.postMessage(btoa(workerData));
     ```
 
-  </CodeTabs>
-  Copy and paste this snippet to install Node.js LTS via a Package Manager
+  </div>
+  Learn more what Node.js is able to offer with our [Learning materials](/learn).
 </section>

providers/matterProvider.tsx

···
 'use client';
 
-import type { Heading } from '@vcarl/remark-headings';
 import { createContext } from 'react';
 import type { FC, PropsWithChildren } from 'react';
-import type { ReadTimeResults } from 'reading-time';
 
-import type { LegacyFrontMatter } from '@/types';
+import type { ClientSharedServerContext } from '@/types';
+import { assignClientContext } from '@/util/assignClientContext';
 
-type MatterContext = {
-  frontmatter: LegacyFrontMatter;
-  pathname: string;
-  headings: Array<Heading>;
-  readingTime: ReadTimeResults;
-  filename: string;
-};
+export const MatterContext = createContext<ClientSharedServerContext>(
+  assignClientContext({})
+);
 
-export const MatterContext = createContext<MatterContext>({
-  frontmatter: {},
-  pathname: '',
-  headings: [],
-  readingTime: { text: '', minutes: 0, time: 0, words: 0 },
-  filename: '',
-});
-
-type MatterProviderProps = PropsWithChildren<MatterContext>;
+type MatterProviderProps = PropsWithChildren<
+  Partial<ClientSharedServerContext>
+>;
 
 export const MatterProvider: FC<MatterProviderProps> = ({
   children,
   ...data
-}) => <MatterContext.Provider value={data}>{children}</MatterContext.Provider>;
+}) => (
+  <MatterContext.Provider value={assignClientContext(data)}>
+    {children}
+  </MatterContext.Provider>
+);

sentry.client.config.ts

···
   SENTRY_ENABLE,
   SENTRY_CAPTURE_RATE,
   SENTRY_TUNNEL,
-} from '@/next.constants.mjs';
+} from '@/sentry.constants.mjs';
 
 // This creates a custom Sentry Client with minimal integrations
 export const sentryClient = new BrowserClient({

sentry.constants.mjs

···
+import { BASE_URL, IS_DEVELOPMENT, VERCEL_ENV } from './next.constants.mjs';
+
+/**
+ * This is the Sentry DSN for the Node.js Website Project
+ */
+export const SENTRY_DSN =
+  'https://[e-mail]/4506191307735040';
+
+/**
+ * This states if Sentry should be enabled and bundled within our App
+ *
+ * We enable sentry by default if we're om development mode or deployed
+ * on Vercel (either production or preview branches)
+ */
+export const SENTRY_ENABLE = IS_DEVELOPMENT || !!VERCEL_ENV;
+
+/**
+ * This configures the sampling rate for Sentry
+ *
+ * We always want to capture 100% on Vercel Preview Branches
+ * and not when it's on Production Mode (nodejs.org)
+ */
+export const SENTRY_CAPTURE_RATE =
+  SENTRY_ENABLE && VERCEL_ENV && BASE_URL !== 'https://nodejs.org' ? 1.0 : 0.01;
+
+/**
+ * Provides the Route for Sentry's Server-Side Tunnel
+ *
+ * This is a `@sentry/nextjs` specific feature
+ */
+export const SENTRY_TUNNEL = (components = '') =>
+  SENTRY_ENABLE ? `/monitoring${components}` : undefined;
+
+/**
+ * This configures which Sentry features to tree-shake/remove from the Sentry bundle
+ *
+ * @see https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/
+ */
+export const SENTRY_EXTENSIONS = {
+  __SENTRY_DEBUG__: false,
+  __SENTRY_TRACING__: false,
+  __RRWEB_EXCLUDE_IFRAME__: true,
+  __RRWEB_EXCLUDE_SHADOW_DOM__: true,
+  __SENTRY_EXCLUDE_REPLAY_WORKER__: true,
+};

sentry.edge.config.ts

···
   SENTRY_CAPTURE_RATE,
   SENTRY_DSN,
   SENTRY_ENABLE,
-} from '@/next.constants.mjs';
+} from '@/sentry.constants.mjs';
 
 init({
   // Only run Sentry on Vercel Environment

sentry.server.config.ts

···
   SENTRY_CAPTURE_RATE,
   SENTRY_DSN,
   SENTRY_ENABLE,
-} from '@/next.constants.mjs';
+} from '@/sentry.constants.mjs';
 
 init({
   // Only run Sentry on Vercel Environment

site.json

···
   "rssFeeds": [
     {
       "title": "Node.js Blog",
-      "file": "blog.xml"
+      "file": "blog.xml",
+      "category": "all"
     },
     {
       "title": "Node.js Blog: Releases",

styles/new/effects.css

···
+h1.special {
+  @apply bg-gradient-subtle-gray
+    bg-clip-text
+    text-4xl
+    leading-[3rem]
+    -tracking-[0.045rem]
+    [-webkit-text-fill-color:transparent]
+    md:text-5xl
+    md:leading-[4rem]
+    md:-tracking-[0.06rem]
+    dark:bg-gradient-subtle-white;
+}
+
+div.glowingBackdrop {
+  @apply absolute
+    left-0
+    -z-10
+    size-full
+    bg-[url('/static/images/patterns/hexagon-grid.svg')]
+    bg-center
+    bg-no-repeat
+    opacity-50
+    md:opacity-100;
+
+  &::after {
+    @apply absolute
+      inset-0
+      m-auto
+      aspect-square
+      w-[300px]
+      rounded-full
+      bg-green-300
+      blur-[120px]
+      content-['']
+      dark:bg-green-700;
+  }
+}

styles/new/index.css

···
 @import 'tailwindcss/utilities';
 @import './base.css';
 @import './markdown.css';
+@import './effects.css';

styles/new/markdown.css

···
 main {
+  @apply flex
+    w-full
+    flex-col
+    gap-6;
+
   hr {
     @apply w-full
       border-t
···
       dark:text-white;
   }
 
+  p {
+    @apply text-neutral-900
+      dark:text-white;
+  }
+
   a {
     @apply text-green-600
+      xs:underline
       dark:text-green-400;
 
     &:hover {
       @apply text-green-900
         dark:text-green-300;
+    }
+
+    &:has(code) {
+      @apply xs:decoration-neutral-800
+        dark:xs:decoration-neutral-200;
     }
   }
 

tailwind.config.ts

···
       'ibm-plex-mono': ['var(--font-ibm-plex-mono)'],
     },
     extend: {
-      screens: { xs: { max: '670px' } },
+      screens: { xs: { max: '670px', min: '0px' } },
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-subtle':
···
         'gradient-subtle-white':
           'linear-gradient(180deg, theme(colors.white) 0%, theme(colors.white / 80%) 100%)',
         'gradient-glow-backdrop':
-          'radial-gradient(8em circle at calc(100% - 40px) 10px, theme(colors.green.500), transparent 30%)',
+          'radial-gradient(8em circle at calc(50%) 10px, theme(colors.green.500), transparent 30%)',
       },
       boxShadow: {
         xs: '0px 1px 2px 0px theme(colors.shadow / 5%)',
···
     },
   },
   darkMode: ['class', '[data-theme="dark"]'],
-  plugins: [require('@savvywombat/tailwindcss-grid-areas')],
+  plugins: [
+    require('@savvywombat/tailwindcss-grid-areas'),
+    require('@tailwindcss/container-queries'),
+  ],
 } satisfies Config;

types/blog.ts

···
+export type BlogPreviewType = 'announcements' | 'release' | 'vulnerability';
+
 export interface BlogPost {
   title: string;
   author: string;
-  date: string;
-  category: string;
+  date: Date;
+  categories: Array<string>;
   slug: string;
 }
 
 export interface BlogData {
   posts: Array<BlogPost>;
-  pagination: Array<number>;
   categories: Array<string>;
 }
 
-export interface BlogDataRSC {
+export interface BlogPagination {
+  next: number | null;
+  prev: number | null;
+  pages: number;
+  total: number;
+}
+
+export interface BlogPostsRSC {
   posts: Array<BlogPost>;
-  pagination: {
-    next: number | null;
-    prev: number | null;
-  };
-  meta: {
-    categories: Array<string>;
-    pagination: Array<number>;
-  };
+  pagination: BlogPagination;
 }

types/features.ts

···
 export interface RSSFeed {
   file: string;
   title: string;
+  blogCategory: string;
   description?: string;
-  blogCategory?: string;
 }
 
 interface WithRange {

types/layouts.ts

···
   | 'docs.hbs'
   | 'home.hbs'
   | 'learn.hbs'
-  | 'page.hbs';
+  | 'page.hbs'
+  | 'blog-category.hbs'
+  | 'blog-post.hbs';
 
 // @TODO: These are legacy layouts that are going to be replaced with the `nodejs/nodejs.dev` Layouts in the future
 export type LegacyLayouts =

util/assignClientContext.ts

···
+import type { ClientSharedServerContext } from '@/types';
+
+export const assignClientContext = <T extends ClientSharedServerContext>(
+  props: Partial<T>
+) =>
+  ({
+    frontmatter: props.frontmatter ?? {},
+    pathname: props.pathname ?? '',
+    headings: props.headings ?? [],
+    readingTime: props.readingTime ?? {
+      text: '',
+      minutes: 0,
+      time: 0,
+      words: 0,
+    },
+    filename: props.filename ?? '',
+  }) as T;

util/blogUtils.ts

···
+import type { BlogPreviewType } from '@/types';
+
+export const mapBlogCategoryToPreviewType = (type: string): BlogPreviewType => {
+  switch (type) {
+    case 'announcements':
+    case 'release':
+    case 'vulnerability':
+      return type;
+    default:
+      return 'announcements';
+  }
+};
+
+// @todo: we should check about the future of GitHub avatars
+// and mapping them to the respective users
+// @see https://github.com/nodejs/nodejs.dev/blob/main/src/data/blog/authors.yaml
+export const mapAuthorToCardAuthors = (author: string) => {
+  const authors = author.split(/, | and |;| by /i);
+
+  return authors.map(fullName => ({
+    fullName,
+    src: `https://ui-avatars.com/api/?name=${fullName}`,
+  }));
+};