From 1afddfa4f2699389e736c6554d1945e19016516b Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Tue, 28 Nov 2023 22:53:41 +0100
Subject: [PATCH 01/26] refactor: updated components to be functional for
 website redesign

---
 components/Common/Breadcrumbs/index.tsx       |  5 +-
 components/Common/MetaBar/index.module.css    | 12 ++-
 components/Common/MetaBar/index.tsx           | 12 +--
 .../NavItem/index.module.css                  |  0
 .../NavItem/index.stories.tsx                 |  2 +-
 .../{Containers => Common}/NavItem/index.tsx  |  1 +
 components/Common/Select/index.module.css     |  6 +-
 components/Common/Select/index.stories.tsx    | 97 ++++++++++---------
 components/Common/Select/index.tsx            | 80 +++++++++------
 .../Sidebar/SidebarGroup/index.module.css     |  1 +
 .../Common/Sidebar/SidebarGroup/index.tsx     | 19 +---
 .../Sidebar/SidebarItem/index.module.css      | 16 ++-
 .../Common/Sidebar/SidebarItem/index.tsx      | 23 ++---
 components/Common/Sidebar/index.module.css    | 15 ++-
 components/Common/Sidebar/index.stories.tsx   | 78 ---------------
 components/Common/Sidebar/index.tsx           | 52 +++++++---
 components/Containers/Footer/index.tsx        |  2 +-
 .../index.module.css                          |  0
 .../index.stories.tsx                         | 20 ++--
 .../{NavigationBar => NavBar}/index.tsx       | 36 ++++---
 components/Downloads/DownloadList.tsx         |  8 +-
 components/SideNavigation.tsx                 | 14 +--
 components/TopNavigation.tsx                  |  8 +-
 components/withLayout.tsx                     | 63 +++++++-----
 24 files changed, 288 insertions(+), 282 deletions(-)
 rename components/{Containers => Common}/NavItem/index.module.css (100%)
 rename components/{Containers => Common}/NavItem/index.stories.tsx (92%)
 rename components/{Containers => Common}/NavItem/index.tsx (98%)
 rename components/Containers/{NavigationBar => NavBar}/index.module.css (100%)
 rename components/Containers/{NavigationBar => NavBar}/index.stories.tsx (64%)
 rename components/Containers/{NavigationBar => NavBar}/index.tsx (84%)

diff --git a/components/Common/Breadcrumbs/index.tsx b/components/Common/Breadcrumbs/index.tsx
index 512e89c279809..9e05c0b7e7d36 100644
--- a/components/Common/Breadcrumbs/index.tsx
+++ b/components/Common/Breadcrumbs/index.tsx
@@ -6,9 +6,10 @@ import BreadcrumbItem from '@/components/Common/Breadcrumbs/BreadcrumbItem';
 import BreadcrumbLink from '@/components/Common/Breadcrumbs/BreadcrumbLink';
 import BreadcrumbRoot from '@/components/Common/Breadcrumbs/BreadcrumbRoot';
 import BreadcrumbTruncatedItem from '@/components/Common/Breadcrumbs/BreadcrumbTruncatedItem';
+import type { FormattedMessage } from '@/types';
 
 type BreadcrumbLink = {
-  label: string;
+  label: FormattedMessage;
   href: LinkProps['href'];
 };
 
@@ -38,7 +39,7 @@ const Breadcrumbs: FC<BreadcrumbsProps> = ({
 
         return (
           <BreadcrumbItem
-            key={link.href.toString()}
+            key={link.label.toString()}
             hidden={hidden}
             hideSeparator={isLastItem}
             position={position + +!hideHome}
diff --git a/components/Common/MetaBar/index.module.css b/components/Common/MetaBar/index.module.css
index e0b794ba604cb..c22954f0fa408 100644
--- a/components/Common/MetaBar/index.module.css
+++ b/components/Common/MetaBar/index.module.css
@@ -1,13 +1,19 @@
 .wrapper {
   @apply flex
-    w-80
     flex-col
     items-start
     gap-8
     border-l
-    border-neutral-200
+    border-l-neutral-200
     p-6
-    dark:border-neutral-900;
+    dark:border-l-neutral-900
+    md:max-w-xs
+    xs:mt-8
+    xs:w-full
+    xs:border-l-0
+    xs:border-t
+    xs:border-t-neutral-200
+    xs:dark:border-t-neutral-900;
 
   dt {
     @apply mb-2
diff --git a/components/Common/MetaBar/index.tsx b/components/Common/MetaBar/index.tsx
index 96f1ed56c55fb..92ebae98c250f 100644
--- a/components/Common/MetaBar/index.tsx
+++ b/components/Common/MetaBar/index.tsx
@@ -11,7 +11,7 @@ type MetaBarProps = {
   items: Record<string, React.ReactNode>;
   headings?: {
     items: Heading[];
-    depth?: number;
+    minDepth?: number;
   };
 };
 
@@ -19,11 +19,11 @@ const MetaBar: FC<MetaBarProps> = ({ items, headings }) => {
   const t = useTranslations();
 
   // The default depth of headings to display in the table of contents.
-  const { depth = 2, items: headingItems = [] } = headings || {};
+  const { minDepth = 2, items: headingItems = [] } = headings || {};
 
   const heading = useMemo(
-    () => headingItems.filter(head => head.depth === depth),
-    [depth, headingItems]
+    () => headingItems.filter(({ depth }) => depth >= minDepth && depth <= 4),
+    [minDepth, headingItems]
   );
 
   return (
@@ -42,9 +42,7 @@ const MetaBar: FC<MetaBarProps> = ({ items, headings }) => {
               <ol>
                 {heading.map(head => (
                   <li key={head.value}>
-                    <Link href={`#${head?.data?.id || head.value}`}>
-                      {head.value}
-                    </Link>
+                    <Link href={`#${head?.data?.id}`}>{head.value}</Link>
                   </li>
                 ))}
               </ol>
diff --git a/components/Containers/NavItem/index.module.css b/components/Common/NavItem/index.module.css
similarity index 100%
rename from components/Containers/NavItem/index.module.css
rename to components/Common/NavItem/index.module.css
diff --git a/components/Containers/NavItem/index.stories.tsx b/components/Common/NavItem/index.stories.tsx
similarity index 92%
rename from components/Containers/NavItem/index.stories.tsx
rename to components/Common/NavItem/index.stories.tsx
index 1f96e8c98eb06..8166bbf1a8105 100644
--- a/components/Containers/NavItem/index.stories.tsx
+++ b/components/Common/NavItem/index.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import NavItem from '@/components/Containers/NavItem';
+import NavItem from '@/components/Common/NavItem';
 
 type Story = StoryObj<typeof NavItem>;
 type Meta = MetaObj<typeof NavItem>;
diff --git a/components/Containers/NavItem/index.tsx b/components/Common/NavItem/index.tsx
similarity index 98%
rename from components/Containers/NavItem/index.tsx
rename to components/Common/NavItem/index.tsx
index 2ac1685b8f266..406fdac184371 100644
--- a/components/Containers/NavItem/index.tsx
+++ b/components/Common/NavItem/index.tsx
@@ -31,6 +31,7 @@ const NavItem: FC<PropsWithChildren<NavItemProps>> = ({
       href={href}
       className={classNames(styles.navItem, styles[type], className)}
       activeClassName={styles.active}
+      allowSubPath
     >
       <span className={styles.label}>{children}</span>
       {showIcon && <ArrowUpRightIcon className={styles.icon} />}
diff --git a/components/Common/Select/index.module.css b/components/Common/Select/index.module.css
index 6239da78ee8b6..81c9e1d04a983 100644
--- a/components/Common/Select/index.module.css
+++ b/components/Common/Select/index.module.css
@@ -5,7 +5,10 @@
     gap-1.5;
 
   .label {
-    @apply text-sm
+    @apply block
+      w-full
+      pb-2
+      text-sm
       font-medium
       text-neutral-800
       dark:text-neutral-200;
@@ -13,6 +16,7 @@
 
   .trigger {
     @apply inline-flex
+      w-full
       min-w-[17rem]
       items-center
       justify-between
diff --git a/components/Common/Select/index.stories.tsx b/components/Common/Select/index.stories.tsx
index 379d4b5b65bbe..8cf26f8c2094b 100644
--- a/components/Common/Select/index.stories.tsx
+++ b/components/Common/Select/index.stories.tsx
@@ -27,40 +27,43 @@ export const DropdownLabel: Story = {
   args: {
     values: [
       {
-        value: 'section-1',
         label: 'Getting Started',
-      },
-      {
-        value: 'section-2',
-        label: 'How to install Node.js',
-      },
-      {
-        value: 'section-3',
-        label: 'How much JavaScript do you need to know to use Node.js?',
-      },
-      {
-        value: 'section-4',
-        label: 'Differences between Node.js and the Browser',
-      },
-      {
-        value: 'section-5',
-        label: 'The V8 JavaScript Engine',
-      },
-      {
-        value: 'section-6',
-        label: 'An introduction to the NPM package manager',
-      },
-      {
-        value: 'section-7',
-        label: 'ECMAScript 2015 (ES6) and beyond',
-      },
-      {
-        value: 'section-8',
-        label: 'Node.js, the difference between development and production',
+        items: [
+          {
+            value: 'section-1',
+            label: 'Getting Started',
+          },
+          {
+            value: 'section-2',
+            label: 'How to install Node.js',
+          },
+          {
+            value: 'section-3',
+            label: 'How much JavaScript do you need to know to use Node.js?',
+          },
+          {
+            value: 'section-4',
+            label: 'Differences between Node.js and the Browser',
+          },
+          {
+            value: 'section-5',
+            label: 'The V8 JavaScript Engine',
+          },
+          {
+            value: 'section-6',
+            label: 'An introduction to the NPM package manager',
+          },
+          {
+            value: 'section-7',
+            label: 'ECMAScript 2015 (ES6) and beyond',
+          },
+          {
+            value: 'section-8',
+            label: 'Node.js, the difference between development and production',
+          },
+        ],
       },
     ],
-    label: 'Getting Started',
-    dropdownLabel: 'Getting Started',
     placeholder: 'Select a guide',
   },
 };
@@ -69,22 +72,26 @@ export const InlineSelect: Story = {
   args: {
     values: [
       {
-        value: 'linux',
-        label: 'Linux',
-        iconImage: <Linux width={16} height={16} />,
-      },
-      {
-        value: 'macos',
-        label: 'MacOS',
-        iconImage: <Apple width={16} height={16} />,
-      },
-      {
-        value: 'windows',
-        label: 'Windows',
-        iconImage: <Microsoft width={16} height={16} />,
+        label: 'Platform',
+        items: [
+          {
+            value: 'linux',
+            label: 'Linux',
+            iconImage: <Linux width={16} height={16} />,
+          },
+          {
+            value: 'macos',
+            label: 'MacOS',
+            iconImage: <Apple width={16} height={16} />,
+          },
+          {
+            value: 'windows',
+            label: 'Windows',
+            iconImage: <Microsoft width={16} height={16} />,
+          },
+        ],
       },
     ],
-    dropdownLabel: 'Platform',
     defaultValue: 'macos',
     inline: true,
   },
diff --git a/components/Common/Select/index.tsx b/components/Common/Select/index.tsx
index a4399bc3ab1d0..92324d0808796 100644
--- a/components/Common/Select/index.tsx
+++ b/components/Common/Select/index.tsx
@@ -1,22 +1,36 @@
+'use client';
+
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import * as Primitive from '@radix-ui/react-select';
 import classNames from 'classnames';
 import { useId, useMemo } from 'react';
 import type { FC } from 'react';
 
+import type { FormattedMessage } from '@/types';
+
 import styles from './index.module.css';
 
 type SelectValue = {
-  label: string;
+  label: FormattedMessage;
   value: string;
   iconImage?: React.ReactNode;
 };
 
+type SelectGroup = {
+  label?: FormattedMessage;
+  items: SelectValue[];
+};
+
+const isStringArray = (values: unknown[]): values is string[] =>
+  Boolean(values[0] && typeof values[0] === 'string');
+
+const isValuesArray = (values: unknown[]): values is SelectValue[] =>
+  Boolean(values[0] && typeof values[0] === 'object' && 'value' in values[0]);
+
 type SelectProps = {
-  values: SelectValue[] | string[];
+  values: SelectGroup[] | SelectValue[] | string[];
   defaultValue?: string;
   placeholder?: string;
-  dropdownLabel?: string;
   label?: string;
   inline?: boolean;
   onChange?: (value: string) => void;
@@ -27,20 +41,23 @@ const Select: FC<SelectProps> = ({
   defaultValue,
   placeholder,
   label,
-  dropdownLabel,
   inline,
   onChange,
 }) => {
   const id = useId();
+
   const mappedValues = useMemo(() => {
-    const [firstItem] = values;
+    let mappedValues = values;
 
-    const items =
-      typeof firstItem === 'string'
-        ? values.map(value => ({ value, label: value }))
-        : values;
+    if (isStringArray(mappedValues)) {
+      mappedValues = mappedValues.map(value => ({ label: value, value }));
+    }
 
-    return items as SelectValue[];
+    if (isValuesArray(mappedValues)) {
+      return [{ items: mappedValues }];
+    }
+
+    return mappedValues;
   }, [values]);
 
   return (
@@ -53,7 +70,7 @@ const Select: FC<SelectProps> = ({
       <Primitive.Root defaultValue={defaultValue} onValueChange={onChange}>
         <Primitive.Trigger
           className={styles.trigger}
-          aria-label={label || dropdownLabel}
+          aria-label={label}
           id={id}
         >
           <Primitive.Value placeholder={placeholder} />
@@ -65,25 +82,30 @@ const Select: FC<SelectProps> = ({
             className={classNames(styles.dropdown, { [styles.inline]: inline })}
           >
             <Primitive.Viewport>
-              <Primitive.Group>
-                {dropdownLabel && (
-                  <Primitive.Label className={`${styles.item} ${styles.label}`}>
-                    {dropdownLabel}
-                  </Primitive.Label>
-                )}
-                {mappedValues.map(({ value, label, iconImage }) => (
-                  <Primitive.Item
-                    key={value}
-                    value={value}
-                    className={`${styles.item} ${styles.text}`}
-                  >
-                    <Primitive.ItemText>
-                      {iconImage}
+              {mappedValues.map(({ label, items }, key) => (
+                <Primitive.Group key={label?.toString() || key}>
+                  {label && (
+                    <Primitive.Label
+                      className={classNames(styles.item, styles.label)}
+                    >
                       {label}
-                    </Primitive.ItemText>
-                  </Primitive.Item>
-                ))}
-              </Primitive.Group>
+                    </Primitive.Label>
+                  )}
+
+                  {items.map(({ value, label, iconImage }) => (
+                    <Primitive.Item
+                      key={value}
+                      value={value}
+                      className={classNames(styles.item, styles.text)}
+                    >
+                      <Primitive.ItemText>
+                        {iconImage}
+                        {label}
+                      </Primitive.ItemText>
+                    </Primitive.Item>
+                  ))}
+                </Primitive.Group>
+              ))}
             </Primitive.Viewport>
           </Primitive.Content>
         </Primitive.Portal>
diff --git a/components/Common/Sidebar/SidebarGroup/index.module.css b/components/Common/Sidebar/SidebarGroup/index.module.css
index ef0cad9cb873a..4b351f01efccc 100644
--- a/components/Common/Sidebar/SidebarGroup/index.module.css
+++ b/components/Common/Sidebar/SidebarGroup/index.module.css
@@ -15,6 +15,7 @@
 
 .itemList {
   @apply m-0
+    mt-1
     flex
     flex-col
     items-start
diff --git a/components/Common/Sidebar/SidebarGroup/index.tsx b/components/Common/Sidebar/SidebarGroup/index.tsx
index a43669477a7c4..2c384493b5098 100644
--- a/components/Common/Sidebar/SidebarGroup/index.tsx
+++ b/components/Common/Sidebar/SidebarGroup/index.tsx
@@ -1,32 +1,21 @@
 import type { ComponentProps, FC } from 'react';
 
 import SidebarItem from '@/components/Common/Sidebar/SidebarItem';
+import type { FormattedMessage } from '@/types';
 
 import styles from './index.module.css';
 
 type SidebarGroupProps = {
-  groupName: string;
+  groupName: FormattedMessage;
   items: ComponentProps<typeof SidebarItem>[];
-  activeItem?: ComponentProps<typeof SidebarItem>;
 };
 
-const SidebarGroup: FC<SidebarGroupProps> = ({
-  groupName,
-  items,
-  activeItem,
-}) => (
+const SidebarGroup: FC<SidebarGroupProps> = ({ groupName, items }) => (
   <section className={styles.group}>
     <label className={styles.groupName}>{groupName}</label>
     <ul className={styles.itemList}>
       {items.map(({ title, url }) => (
-        <SidebarItem
-          key={title}
-          title={title}
-          url={url}
-          isActive={
-            activeItem?.title === title && activeItem.url === activeItem.url
-          }
-        />
+        <SidebarItem key={url} title={title} url={url} />
       ))}
     </ul>
   </section>
diff --git a/components/Common/Sidebar/SidebarItem/index.module.css b/components/Common/Sidebar/SidebarItem/index.module.css
index 5f076a9abc973..6cb415599d780 100644
--- a/components/Common/Sidebar/SidebarItem/index.module.css
+++ b/components/Common/Sidebar/SidebarItem/index.module.css
@@ -1,25 +1,21 @@
 .sideBarItem {
   @apply flex
     w-full
-    list-none;
+    list-none
+    text-neutral-800
+    dark:text-neutral-200;
 
   a {
     @apply w-full
       p-2
       text-sm
-      font-regular
-      text-neutral-800
-      dark:text-neutral-200;
+      font-regular;
   }
 }
 
 .active {
   @apply rounded
-    bg-green-600;
-
-  a,
-  a:hover {
-    @apply text-white
+    bg-green-600
+    text-white
     dark:text-white;
-  }
 }
diff --git a/components/Common/Sidebar/SidebarItem/index.tsx b/components/Common/Sidebar/SidebarItem/index.tsx
index fab6eee211b9e..3c9f9ef3b1d9f 100644
--- a/components/Common/Sidebar/SidebarItem/index.tsx
+++ b/components/Common/Sidebar/SidebarItem/index.tsx
@@ -1,27 +1,20 @@
-import classNames from 'classnames';
 import type { FC } from 'react';
 
-import Link from '@/components/Link';
+import ActiveLink from '@/components/Common/ActiveLink';
+import type { FormattedMessage } from '@/types';
 
 import styles from './index.module.css';
 
 type SidebarItemProps = {
-  title: string;
+  title: FormattedMessage;
   url: string;
-  isActive?: boolean;
 };
 
-const SidebarItem: FC<SidebarItemProps> = ({
-  url,
-  title,
-  isActive = false,
-}) => (
-  <li
-    className={classNames(styles.sideBarItem, {
-      [styles.active]: isActive,
-    })}
-  >
-    <Link href={url}>{title}</Link>
+const SidebarItem: FC<SidebarItemProps> = ({ url, title }) => (
+  <li className={styles.sideBarItem}>
+    <ActiveLink href={url} activeClassName={styles.active}>
+      {title}
+    </ActiveLink>
   </li>
 );
 
diff --git a/components/Common/Sidebar/index.module.css b/components/Common/Sidebar/index.module.css
index a282849847d98..88a4fa8e21c3d 100644
--- a/components/Common/Sidebar/index.module.css
+++ b/components/Common/Sidebar/index.module.css
@@ -11,5 +11,18 @@
     py-6
     dark:border-r-neutral-900
     dark:bg-neutral-950
-    md:max-w-xs;
+    md:max-w-xs
+    xs:w-full
+    xs:border-r-0;
+
+  > section {
+    @apply block
+      xs:hidden;
+  }
+
+  > div {
+    @apply hidden
+      w-full
+      xs:block;
+  }
 }
diff --git a/components/Common/Sidebar/index.stories.tsx b/components/Common/Sidebar/index.stories.tsx
index 59a5da132053a..d694f0da3c074 100644
--- a/components/Common/Sidebar/index.stories.tsx
+++ b/components/Common/Sidebar/index.stories.tsx
@@ -79,82 +79,4 @@ export const Default: Story = {
   },
 };
 
-export const ActiveItem: Story = {
-  args: {
-    groups: [
-      {
-        groupName: 'About Node.js',
-        items: [
-          {
-            url: '/item1',
-            title: 'About Node.js',
-          },
-          {
-            url: '/item2',
-            title: 'Project Governance',
-          },
-          {
-            url: '/item3',
-            title: 'Releases',
-          },
-          {
-            url: '/item4',
-            title: 'Branding',
-          },
-          {
-            url: '/item5',
-            title: 'Privacy Policy',
-          },
-          {
-            url: '/item6',
-            title: 'Security Reporting',
-          },
-        ],
-      },
-      {
-        groupName: 'Get Involved',
-        items: [
-          {
-            url: '/item7',
-            title: 'Get Involved',
-          },
-          {
-            url: '/item8',
-            title: 'Collab Summit',
-          },
-          {
-            url: '/item9',
-            title: 'Contribute',
-          },
-          {
-            url: '/item10',
-            title: 'Code of Conduct',
-          },
-        ],
-      },
-      {
-        groupName: 'Download',
-        items: [
-          {
-            url: '/item11',
-            title: 'Download',
-          },
-          {
-            url: '/item12',
-            title: 'Package Manager',
-          },
-          {
-            url: '/item13',
-            title: 'Previous Releases',
-          },
-        ],
-      },
-    ],
-    activeItem: {
-      url: '/item1',
-      title: 'About Node.js',
-    },
-  },
-};
-
 export default { component: Sidebar } as Meta;
diff --git a/components/Common/Sidebar/index.tsx b/components/Common/Sidebar/index.tsx
index f6538bf168925..0d5f3146cfa80 100644
--- a/components/Common/Sidebar/index.tsx
+++ b/components/Common/Sidebar/index.tsx
@@ -1,26 +1,52 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
 import type { ComponentProps, FC } from 'react';
 
+import Select from '@/components/Common/Select';
 import SidebarGroup from '@/components/Common/Sidebar/SidebarGroup';
-import type SidebarItem from '@/components/Common/Sidebar/SidebarItem';
+import { useClientContext } from '@/hooks';
+import { useRouter } from '@/navigation.mjs';
 
 import styles from './index.module.css';
 
 type SidebarProps = {
   groups: ComponentProps<typeof SidebarGroup>[];
-  activeItem?: ComponentProps<typeof SidebarItem>;
 };
 
-const SideBar: FC<SidebarProps> = ({ groups, activeItem }) => (
-  <aside className={styles.sideBar}>
-    {groups.map(({ groupName, items }) => (
-      <SidebarGroup
-        key={groupName}
-        groupName={groupName}
-        items={items}
-        activeItem={activeItem}
+const SideBar: FC<SidebarProps> = ({ groups }) => {
+  const t = useTranslations();
+  const { pathname } = useClientContext();
+  const { push } = useRouter();
+
+  const selectItems = groups.map(({ items, groupName }) => ({
+    label: groupName,
+    items: items.map(item => ({ value: item.url, label: item.title })),
+  }));
+
+  const currentItem = selectItems
+    .map(item => item.items)
+    .flat()
+    .find(item => pathname === item.value);
+
+  return (
+    <aside className={styles.sideBar}>
+      {groups.map(({ groupName, items }) => (
+        <SidebarGroup
+          key={groupName.toString()}
+          groupName={groupName}
+          items={items}
+        />
+      ))}
+
+      <Select
+        label={t('components.common.sidebar.title')}
+        values={selectItems}
+        defaultValue={currentItem?.value}
+        onChange={value => push(value)}
       />
-    ))}
-  </aside>
-);
+    </aside>
+  );
+};
 
 export default SideBar;
diff --git a/components/Containers/Footer/index.tsx b/components/Containers/Footer/index.tsx
index 1ae84e4d0196a..65313f6e43d84 100644
--- a/components/Containers/Footer/index.tsx
+++ b/components/Containers/Footer/index.tsx
@@ -1,7 +1,7 @@
 import { useTranslations } from 'next-intl';
 import type { FC, SVGProps } from 'react';
 
-import NavItem from '@/components/Containers/NavItem';
+import NavItem from '@/components/Common/NavItem';
 import GitHub from '@/components/Icons/Social/GitHub';
 import LinkedIn from '@/components/Icons/Social/LinkedIn';
 import Mastodon from '@/components/Icons/Social/Mastodon';
diff --git a/components/Containers/NavigationBar/index.module.css b/components/Containers/NavBar/index.module.css
similarity index 100%
rename from components/Containers/NavigationBar/index.module.css
rename to components/Containers/NavBar/index.module.css
diff --git a/components/Containers/NavigationBar/index.stories.tsx b/components/Containers/NavBar/index.stories.tsx
similarity index 64%
rename from components/Containers/NavigationBar/index.stories.tsx
rename to components/Containers/NavBar/index.stories.tsx
index 33f6be374c248..33a945323fb3b 100644
--- a/components/Containers/NavigationBar/index.stories.tsx
+++ b/components/Containers/NavBar/index.stories.tsx
@@ -1,36 +1,36 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import NavigationBar from './index';
+import NavBar from '@/components/Containers/NavBar';
 
-type Story = StoryObj<typeof NavigationBar>;
-type Meta = MetaObj<typeof NavigationBar>;
+type Story = StoryObj<typeof NavBar>;
+type Meta = MetaObj<typeof NavBar>;
 
 export const Default: Story = {
   args: {
     navItems: [
       {
         text: 'Learn',
-        href: '/',
+        link: '/',
       },
       {
         text: 'About',
-        href: '/about',
+        link: '/about',
       },
       {
         text: 'Docs',
-        href: '/docs',
+        link: '/docs',
       },
       {
         text: 'Download',
-        href: '/download',
+        link: '/download',
       },
       {
         text: 'Blog',
-        href: '/blog',
+        link: '/blog',
       },
       {
         text: 'Certification',
-        href: 'https://openjsf.org/certification',
+        link: 'https://openjsf.org/certification',
       },
     ],
     languages: {
@@ -45,4 +45,4 @@ export const Default: Story = {
   },
 };
 
-export default { component: NavigationBar } as Meta;
+export default { component: NavBar } as Meta;
diff --git a/components/Containers/NavigationBar/index.tsx b/components/Containers/NavBar/index.tsx
similarity index 84%
rename from components/Containers/NavigationBar/index.tsx
rename to components/Containers/NavBar/index.tsx
index b2e77f5a9b78f..7a45de8b208d3 100644
--- a/components/Containers/NavigationBar/index.tsx
+++ b/components/Containers/NavBar/index.tsx
@@ -7,33 +7,34 @@ import { useState } from 'react';
 import type { FC, ComponentProps } from 'react';
 
 import LanguageDropdown from '@/components/Common/LanguageDropDown';
+import NavItem from '@/components/Common/NavItem';
 import ThemeToggle from '@/components/Common/ThemeToggle';
-import NavItem from '@/components/Containers/NavItem';
 import NodejsDark from '@/components/Icons/Logos/NodejsDark';
 import NodejsLight from '@/components/Icons/Logos/NodejsLight';
 import GitHub from '@/components/Icons/Social/GitHub';
+import Link from '@/components/Link';
+import type { FormattedMessage } from '@/types';
 
 import style from './index.module.css';
 
-type NavItem = { text: string; href: string };
+const navInteractionIcons = {
+  show: <Hamburger className={style.navInteractionIcon} />,
+  close: <XMark className={style.navInteractionIcon} />,
+};
 
 type NavbarProps = {
-  navItems: NavItem[];
+  navItems: { text: FormattedMessage; link: string }[];
   languages: ComponentProps<typeof LanguageDropdown>;
   onThemeTogglerClick: () => void;
 };
 
-const navInteractionIcons = {
-  show: <Hamburger className={style.navInteractionIcon} />,
-  close: <XMark className={style.navInteractionIcon} />,
-};
-
-const NavigationBar: FC<NavbarProps> = ({
+const NavBar: FC<NavbarProps> = ({
   navItems,
   languages,
   onThemeTogglerClick,
 }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+
   return (
     <nav className={`${style.container}`}>
       <div className={style.nodeIconAndMobileItemsToggler}>
@@ -41,6 +42,7 @@ const NavigationBar: FC<NavbarProps> = ({
           <NodejsDark className={style.nodejsLogoDark} />
           <NodejsLight className={style.nodejsLogoLight} />
         </div>
+
         <Label.Root
           onClick={() => setIsMenuOpen(prev => !prev)}
           className={style.sidebarItemTogglerLabel}
@@ -49,32 +51,38 @@ const NavigationBar: FC<NavbarProps> = ({
           {navInteractionIcons[isMenuOpen ? 'close' : 'show']}
         </Label.Root>
       </div>
+
       <input className="peer hidden" id="sidebarItemToggler" type="checkbox" />
+
       <div className={`${style.main} peer-checked:flex`}>
         <div className={style.navItems}>
-          {navItems.map(({ text, href }) => (
-            <NavItem key={text} href={href}>
+          {navItems.map(({ text, link }) => (
+            <NavItem key={link} href={link}>
               {text}
             </NavItem>
           ))}
         </div>
+
         <div className={style.actionsWrapper}>
           <ThemeToggle onClick={onThemeTogglerClick} />
+
           <LanguageDropdown
+            onChange={languages.onChange}
             availableLanguages={languages.availableLanguages}
             currentLanguage={languages.currentLanguage}
           />
-          <a
+
+          <Link
             className={style.ghIconWrapper}
             href="https://github.com/nodejs/node"
             aria-label="Node.js Github"
           >
             <GitHub />
-          </a>
+          </Link>
         </div>
       </div>
     </nav>
   );
 };
 
-export default NavigationBar;
+export default NavBar;
diff --git a/components/Downloads/DownloadList.tsx b/components/Downloads/DownloadList.tsx
index 018c169d1e111..8d17791c04c9e 100644
--- a/components/Downloads/DownloadList.tsx
+++ b/components/Downloads/DownloadList.tsx
@@ -10,7 +10,7 @@ const DownloadList: FC<NodeRelease> = ({ versionWithPrefix }) => {
 
   const { getSideNavigation } = useSiteNavigation();
 
-  const [, ...downloadNavigation] = getSideNavigation('download', {
+  const [[, downloadNavigationItems]] = getSideNavigation(['download'], {
     shaSums: { nodeVersion: versionWithPrefix },
     allDownloads: { nodeVersion: versionWithPrefix },
   });
@@ -18,10 +18,10 @@ const DownloadList: FC<NodeRelease> = ({ versionWithPrefix }) => {
   return (
     <section>
       <ul>
-        {downloadNavigation.map((item, key) => (
+        {downloadNavigationItems.items.map(([key, { label, link }]) => (
           <li key={key}>
-            <Link href={item.link}>{item.text}</Link>
-            {item.key === 'shaSums' && (
+            <Link href={link}>{label}</Link>
+            {key === 'shaSums' && (
               <a href="https://github.com/nodejs/node#verifying-binaries">
                 {t('components.downloadList.links.shaSums.howToVerify')}
               </a>
diff --git a/components/SideNavigation.tsx b/components/SideNavigation.tsx
index c01e636525e80..71e3c7f55d0f5 100644
--- a/components/SideNavigation.tsx
+++ b/components/SideNavigation.tsx
@@ -16,20 +16,20 @@ const SideNavigation: FC<SideNavigationProps> = ({
 }) => {
   const { getSideNavigation } = useSiteNavigation();
 
-  const sideNavigationItems = getSideNavigation(navigationKey, context);
+  const [[, sideNavigationItems]] = getSideNavigation([navigationKey], context);
 
   return (
     <nav aria-label="secondary">
       <ul>
-        {sideNavigationItems.map(item => (
-          <li key={item.key}>
-            <ActiveLink href={item.link}>{item.text}</ActiveLink>
+        {sideNavigationItems.items!.map(([key, { link, label, items }]) => (
+          <li key={key}>
+            {link ? <ActiveLink href={link}>{label}</ActiveLink> : label}
 
-            {item.items.length > 0 && (
+            {items && items.length > 0 && (
               <ul>
-                {item.items.map(({ link, text, key }) => (
+                {items.map(([key, { link, label }]) => (
                   <li key={key}>
-                    <ActiveLink href={link}>{text}</ActiveLink>
+                    <ActiveLink href={link}>{label}</ActiveLink>
                   </li>
                 ))}
               </ul>
diff --git a/components/TopNavigation.tsx b/components/TopNavigation.tsx
index f89f78d1b3d05..a7c6aa73e6b96 100644
--- a/components/TopNavigation.tsx
+++ b/components/TopNavigation.tsx
@@ -9,10 +9,10 @@ const TopNavigation: FC = () => {
   return (
     <nav aria-label="primary">
       <ul className="list-divider-pipe">
-        {navigationItems.map(({ link, text }) => (
-          <li key={link}>
-            <ActiveLink href={link} allowSubPath>
-              {text}
+        {navigationItems.map(([key, { link, label }]) => (
+          <li key={key}>
+            <ActiveLink href={link!} allowSubPath>
+              {label}
             </ActiveLink>
           </li>
         ))}
diff --git a/components/withLayout.tsx b/components/withLayout.tsx
index dff7cdbfeb32a..42bdc6d156062 100644
--- a/components/withLayout.tsx
+++ b/components/withLayout.tsx
@@ -1,35 +1,54 @@
-import { useMemo, type FC, type PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 
-import AboutLayout from '@/layouts/AboutLayout';
-import BlogCategoryLayout from '@/layouts/BlogCategoryLayout';
-import BlogPostLayout from '@/layouts/BlogPostLayout';
-import ContributeLayout from '@/layouts/ContributeLayout';
-import DefaultLayout from '@/layouts/DefaultLayout';
-import DocsLayout from '@/layouts/DocsLayout';
-import DownloadLayout from '@/layouts/DownloadLayout';
-import IndexLayout from '@/layouts/IndexLayout';
-import LearnLayout from '@/layouts/LearnLayout';
+import LegacyAboutLayout from '@/layouts/AboutLayout';
+import LegacyBlogCategoryLayout from '@/layouts/BlogCategoryLayout';
+import LegacyBlogPostLayout from '@/layouts/BlogPostLayout';
+import LegacyContributeLayout from '@/layouts/ContributeLayout';
+import LegacyDefaultLayout from '@/layouts/DefaultLayout';
+import LegacyDocsLayout from '@/layouts/DocsLayout';
+import LegacyDownloadLayout from '@/layouts/DownloadLayout';
+import LegacyIndexLayout from '@/layouts/IndexLayout';
+import LegacyLearnLayout from '@/layouts/LearnLayout';
+import AboutLayout from '@/layouts/New/About';
+import DefaultLayout from '@/layouts/New/Default';
+import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
 import type { LegacyLayouts } from '@/types';
 
-const layoutComponents = {
-  'docs.hbs': DocsLayout,
+/** @deprecated these should be removed with the website redesin */
+const legacyLayouts = {
+  'docs.hbs': LegacyDocsLayout,
+  'about.hbs': LegacyAboutLayout,
+  'blog-category.hbs': LegacyBlogCategoryLayout,
+  'blog-post.hbs': LegacyBlogPostLayout,
+  'contribute.hbs': LegacyContributeLayout,
+  'download.hbs': LegacyDownloadLayout,
+  'index.hbs': LegacyIndexLayout,
+  'learn.hbs': LegacyLearnLayout,
+  'page.hbs': LegacyDefaultLayout,
+} satisfies Record<string, FC>;
+
+/** all the currently available layouts from website redesign */
+const redesignLayouts = {
+  'docs.hbs': DefaultLayout,
   'about.hbs': AboutLayout,
-  'blog-category.hbs': BlogCategoryLayout,
-  'blog-post.hbs': BlogPostLayout,
-  'contribute.hbs': ContributeLayout,
-  'download.hbs': DownloadLayout,
-  'index.hbs': IndexLayout,
-  'learn.hbs': LearnLayout,
+  'blog-category.hbs': DefaultLayout,
+  'blog-post.hbs': DefaultLayout,
+  'contribute.hbs': AboutLayout,
+  'download.hbs': DefaultLayout,
+  'index.hbs': DefaultLayout,
+  'learn.hbs': DefaultLayout,
   'page.hbs': DefaultLayout,
 } satisfies Record<string, FC>;
 
+/** @deprecated this should be removed once we sunset the legacy layouts */
+const availableLayouts = ENABLE_WEBSITE_REDESIGN
+  ? redesignLayouts
+  : legacyLayouts;
+
 type WithLayoutProps = PropsWithChildren<{ layout: LegacyLayouts }>;
 
 export const WithLayout: FC<WithLayoutProps> = ({ layout, children }) => {
-  const LayoutComponent = useMemo(
-    () => layoutComponents[layout] || DefaultLayout,
-    [layout]
-  );
+  const LayoutComponent = availableLayouts[layout];
 
   return <LayoutComponent>{children}</LayoutComponent>;
 };

From 45fbdd4fe2eab2f94045e41ee2ed4ff9aacb8381 Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Tue, 28 Nov 2023 22:54:06 +0100
Subject: [PATCH 02/26] chore: hooks separate generic hooks

---
 hooks/index.ts                           |  1 +
 hooks/react-client/index.ts              |  1 -
 hooks/react-client/useClientContext.ts   | 12 +++-
 hooks/react-client/useSiteNavigation.tsx |  7 ---
 hooks/react-generic/index.ts             |  1 +
 hooks/react-generic/useSiteNavigation.ts | 68 +++++++++++++++++++++
 hooks/react-server/index.ts              |  1 -
 hooks/react-server/useSiteNavigation.tsx | 75 ------------------------
 hooks/server.ts                          |  1 +
 9 files changed, 81 insertions(+), 86 deletions(-)
 delete mode 100644 hooks/react-client/useSiteNavigation.tsx
 create mode 100644 hooks/react-generic/index.ts
 create mode 100644 hooks/react-generic/useSiteNavigation.ts
 delete mode 100644 hooks/react-server/useSiteNavigation.tsx

diff --git a/hooks/index.ts b/hooks/index.ts
index dcf1fb432b101..08588a58f88b3 100644
--- a/hooks/index.ts
+++ b/hooks/index.ts
@@ -1 +1,2 @@
 export * from './react-client';
+export * from './react-generic';
diff --git a/hooks/react-client/index.ts b/hooks/react-client/index.ts
index d1f35f867e99f..a6cf9825ba2c2 100644
--- a/hooks/react-client/index.ts
+++ b/hooks/react-client/index.ts
@@ -3,4 +3,3 @@ export { default as useDetectOS } from './useDetectOS';
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as useNotification } from './useNotification';
 export { default as useClientContext } from './useClientContext';
-export { default as useSiteNavigation } from './useSiteNavigation';
diff --git a/hooks/react-client/useClientContext.ts b/hooks/react-client/useClientContext.ts
index 5cb203f0dc1f1..96e0f726a2b2e 100644
--- a/hooks/react-client/useClientContext.ts
+++ b/hooks/react-client/useClientContext.ts
@@ -7,10 +7,18 @@ import { MatterContext } from '@/providers/matterProvider';
 import type { ClientSharedServerContext } from '@/types';
 
 const useClientContext = (): ClientSharedServerContext => {
-  const { matter: frontmatter, headings } = useContext(MatterContext);
+  const { frontmatter, headings, readingTime, filename } =
+    useContext(MatterContext);
+
   const pathname = usePathname();
 
-  return { pathname: pathname || '', frontmatter, headings };
+  return {
+    pathname: pathname || '',
+    frontmatter,
+    headings,
+    readingTime,
+    filename,
+  };
 };
 
 export default useClientContext;
diff --git a/hooks/react-client/useSiteNavigation.tsx b/hooks/react-client/useSiteNavigation.tsx
deleted file mode 100644
index a525b0c3051a7..0000000000000
--- a/hooks/react-client/useSiteNavigation.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-'use client';
-
-const useSiteNavigation = () => {
-  throw new Error('Attempted to call useSiteNavigation from RCC');
-};
-
-export default useSiteNavigation;
diff --git a/hooks/react-generic/index.ts b/hooks/react-generic/index.ts
new file mode 100644
index 0000000000000..da2c195af02fb
--- /dev/null
+++ b/hooks/react-generic/index.ts
@@ -0,0 +1 @@
+export { default as useSiteNavigation } from './useSiteNavigation';
diff --git a/hooks/react-generic/useSiteNavigation.ts b/hooks/react-generic/useSiteNavigation.ts
new file mode 100644
index 0000000000000..6fdc41108b184
--- /dev/null
+++ b/hooks/react-generic/useSiteNavigation.ts
@@ -0,0 +1,68 @@
+import { useTranslations } from 'next-intl';
+import type { RichTranslationValues } from 'next-intl';
+
+import { siteNavigation } from '@/next.json.mjs';
+import type {
+  FormattedMessage,
+  NavigationEntry,
+  NavigationKeys,
+} from '@/types';
+
+type Context = Record<string, RichTranslationValues>;
+type Navigation = Record<string, NavigationEntry>;
+
+interface MappedNavigationEntry {
+  items: [string, MappedNavigationEntry][];
+  label: FormattedMessage;
+  link: string;
+}
+
+// Provides Context replacement for variables within the Link. This is also something that is not going
+// to happen in the future with `nodejs/nodejs.dev` codebase
+const replaceLinkWithContext = (
+  link: string,
+  context?: RichTranslationValues
+) =>
+  Object.entries(context || {}).reduce(
+    (finalLink, [find, replace]) =>
+      finalLink.replace(
+        `{${find}}`,
+        typeof replace === 'string' ? replace : ''
+      ),
+    link
+  );
+
+const useSiteNavigation = () => {
+  const t = useTranslations();
+
+  const mapNavigationEntries = (entries: Navigation, context: Context = {}) => {
+    const getFormattedMessage = (label: string, key: string) =>
+      t.rich(label, context[key] || {});
+
+    return Object.entries(entries).map(
+      ([key, { label, link, items }]): [string, MappedNavigationEntry] => [
+        key,
+        {
+          label: label ? getFormattedMessage(label, key) : '',
+          link: link ? replaceLinkWithContext(link, context[key]) : '',
+          items: items ? mapNavigationEntries(items, context) : [],
+        },
+      ]
+    );
+  };
+
+  const getSideNavigation = (keys: NavigationKeys[], context: Context = {}) => {
+    const navigationEntries: Navigation = keys.reduce(
+      (acc, key) => ({ ...acc, [key]: siteNavigation.sideNavigation[key] }),
+      {}
+    );
+
+    return mapNavigationEntries(navigationEntries, context);
+  };
+
+  const navigationItems = mapNavigationEntries(siteNavigation.topNavigation);
+
+  return { getSideNavigation, navigationItems };
+};
+
+export default useSiteNavigation;
diff --git a/hooks/react-server/index.ts b/hooks/react-server/index.ts
index d1f35f867e99f..a6cf9825ba2c2 100644
--- a/hooks/react-server/index.ts
+++ b/hooks/react-server/index.ts
@@ -3,4 +3,3 @@ export { default as useDetectOS } from './useDetectOS';
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as useNotification } from './useNotification';
 export { default as useClientContext } from './useClientContext';
-export { default as useSiteNavigation } from './useSiteNavigation';
diff --git a/hooks/react-server/useSiteNavigation.tsx b/hooks/react-server/useSiteNavigation.tsx
deleted file mode 100644
index 31990c49cd3a9..0000000000000
--- a/hooks/react-server/useSiteNavigation.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useTranslations } from 'next-intl';
-import type { RichTranslationValues } from 'next-intl';
-
-import { siteNavigation } from '@/next.json.mjs';
-import type {
-  MappedNavigationEntry,
-  NavigationEntry,
-  NavigationKeys,
-} from '@/types';
-
-type Context = Record<string, RichTranslationValues>;
-type Navigation = Record<string, NavigationEntry>;
-
-// Provides Context replacement for variables within the Link. This is also something that is not going
-// to happen in the future with `nodejs/nodejs.dev` codebase
-const replaceLinkWithContext = (
-  link: string,
-  context?: RichTranslationValues
-) =>
-  Object.entries(context || {}).reduce(
-    (finalLink, [find, replace]) =>
-      finalLink.replace(
-        `{${find}}`,
-        typeof replace === 'string' ? replace : ''
-      ),
-    link
-  );
-
-const useSiteNavigation = () => {
-  const t = useTranslations();
-
-  const mapNavigationEntries = (
-    entries: Navigation,
-    context: Context = {},
-    level = 0,
-    includeItems = true
-  ): MappedNavigationEntry[] => {
-    const getFormattedMessage = (translationId: string, key: string) =>
-      t.rich(translationId, context[key] || {});
-
-    return Object.entries(entries).map(
-      ([key, { translationId, link, items }]) => {
-        const mappedEntry: MappedNavigationEntry = {
-          text: getFormattedMessage(translationId, key),
-          link: replaceLinkWithContext(link, context[key]),
-          items: [],
-          level,
-          key,
-        };
-
-        if (includeItems && items) {
-          mappedEntry.items = mapNavigationEntries(items, context, level + 1);
-        }
-
-        return mappedEntry;
-      }
-    );
-  };
-
-  const getSideNavigation = (section: NavigationKeys, context?: Context) => {
-    const { items, translationId, link } = siteNavigation[section];
-
-    return mapNavigationEntries(
-      { [section]: { translationId, link }, ...items },
-      context
-    );
-  };
-
-  return {
-    getSideNavigation,
-    navigationItems: mapNavigationEntries(siteNavigation, {}, 0, false),
-  };
-};
-
-export default useSiteNavigation;
diff --git a/hooks/server.ts b/hooks/server.ts
index 812d94f584116..cd08e225ee0bf 100644
--- a/hooks/server.ts
+++ b/hooks/server.ts
@@ -1 +1,2 @@
 export * from './react-server';
+export * from './react-generic';

From 257757548fca71f087daae4eba0c6dc3cbba67f0 Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Tue, 28 Nov 2023 22:54:29 +0100
Subject: [PATCH 03/26] chore: updated storybook previews for redesign

---
 .storybook/constants.ts | 21 ---------------------
 .storybook/main.ts      |  2 +-
 .storybook/preview.tsx  |  1 +
 next.fonts.ts           | 29 +++++++++++++++++++++++++++++
 4 files changed, 31 insertions(+), 22 deletions(-)
 create mode 100644 next.fonts.ts

diff --git a/.storybook/constants.ts b/.storybook/constants.ts
index 71dc10f42560a..46ee4053fa87e 100644
--- a/.storybook/constants.ts
+++ b/.storybook/constants.ts
@@ -1,5 +1,3 @@
-import { Open_Sans, IBM_Plex_Mono } from 'next/font/google';
-
 // This defines "execution" modes that Chromatic will run on the each Storybook Story
 // This allows us to test each Story with different parameters
 // @see https://www.chromatic.com/blog/introducing-story-modes/
@@ -28,22 +26,3 @@ export const STORYBOOK_SIZES = {
   small: { name: 'Small', styles: { width: '414px', height: '896px' } },
   large: { name: 'Large', styles: { width: '1024px', height: '768px' } },
 };
-
-// This configures the Next.js Font for Open Sans
-// We then export a variable and class name to be used
-// within Tailwind (tailwind.config.ts) and Storybook (preview.js)
-export const OPEN_SANS_FONT = Open_Sans({
-  weight: ['300', '400', '600', '700'],
-  display: 'fallback',
-  subsets: ['latin'],
-  variable: '--font-open-sans',
-});
-
-// This configures the Next.js Font for IBM Plex Mono
-// We then export a variable and class name to be used
-// within Tailwind (tailwind.config.ts) and Storybook (preview.js)
-export const IBM_PLEX_MONO_FONT = IBM_Plex_Mono({
-  weight: ['600'],
-  subsets: ['latin'],
-  variable: '--font-ibm-plex-mono',
-});
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 8d3db12e56530..1da4e3118b92b 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -27,7 +27,7 @@ const config: StorybookConfig = {
     // This `<style>` is necessary to simulate what `next-themes` (ThemeProvider) does on real applications
     // `next-theme` automatically injects the color-scheme based on the system preference or the current applied theme
     // on Storybook we don't use `next-theme` as we want to simulate themes
-    '<style>:root { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; }</style>' +
+    '<style>:root { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } #storybook-root { width: 100%; height: 100%; }</style>' +
     // This adds the base styling for dark/light themes within Storybook. This is a Storybook-only style
     `<body class="${rootClasses}"></body>`,
   addons: [
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index dcc92a433159d..7988925b9793f 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -7,6 +7,7 @@ import type { Preview, ReactRenderer } from '@storybook/react';
 
 import englishLocale from '@/i18n/locales/en.json';
 
+import '../next.fonts';
 import '../styles/new/index.css';
 
 const preview: Preview = {
diff --git a/next.fonts.ts b/next.fonts.ts
new file mode 100644
index 0000000000000..0a3e50c7ba9b6
--- /dev/null
+++ b/next.fonts.ts
@@ -0,0 +1,29 @@
+import { Source_Sans_3, Open_Sans, IBM_Plex_Mono } from 'next/font/google';
+
+// This configures the Next.js Font for Source Sans
+// We then export a variable and class name to be used
+// within Tailwind (tailwind.config.ts) and Storybook (preview.js)
+export const SOURCE_SANS = Source_Sans_3({
+  weight: ['400', '600'],
+  display: 'fallback',
+  subsets: ['latin'],
+});
+
+// This configures the Next.js Font for Open Sans
+// We then export a variable and class name to be used
+// within Tailwind (tailwind.config.ts) and Storybook (preview.js)
+export const OPEN_SANS = Open_Sans({
+  weight: ['300', '400', '600', '700'],
+  display: 'fallback',
+  subsets: ['latin'],
+  variable: '--font-open-sans',
+});
+
+// This configures the Next.js Font for IBM Plex Mono
+// We then export a variable and class name to be used
+// within Tailwind (tailwind.config.ts) and Storybook (preview.js)
+export const IBM_PLEX_MONO = IBM_Plex_Mono({
+  weight: ['600'],
+  subsets: ['latin'],
+  variable: '--font-ibm-plex-mono',
+});

From 54bdaf0e4265863f0891620e53c42bfbd732657c Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Tue, 28 Nov 2023 22:54:43 +0100
Subject: [PATCH 04/26] chore: removed other languages as they will be
 translated on crowdin

---
 i18n/locales/ar.json    | 199 ----------------------------------------
 i18n/locales/de.json    | 199 ----------------------------------------
 i18n/locales/en.json    |  56 ++++++-----
 i18n/locales/es.json    | 199 ----------------------------------------
 i18n/locales/fr.json    | 199 ----------------------------------------
 i18n/locales/id.json    | 199 ----------------------------------------
 i18n/locales/it.json    | 199 ----------------------------------------
 i18n/locales/ja.json    | 199 ----------------------------------------
 i18n/locales/ka.json    | 199 ----------------------------------------
 i18n/locales/ko.json    | 199 ----------------------------------------
 i18n/locales/pt-br.json | 199 ----------------------------------------
 i18n/locales/ru.json    | 199 ----------------------------------------
 i18n/locales/tr.json    | 199 ----------------------------------------
 i18n/locales/uk.json    | 199 ----------------------------------------
 i18n/locales/zh-cn.json | 199 ----------------------------------------
 i18n/locales/zh-tw.json | 194 ---------------------------------------
 16 files changed, 35 insertions(+), 3001 deletions(-)
 delete mode 100644 i18n/locales/ar.json
 delete mode 100644 i18n/locales/de.json
 delete mode 100644 i18n/locales/es.json
 delete mode 100644 i18n/locales/fr.json
 delete mode 100644 i18n/locales/id.json
 delete mode 100644 i18n/locales/it.json
 delete mode 100644 i18n/locales/ja.json
 delete mode 100644 i18n/locales/ka.json
 delete mode 100644 i18n/locales/ko.json
 delete mode 100644 i18n/locales/pt-br.json
 delete mode 100644 i18n/locales/ru.json
 delete mode 100644 i18n/locales/tr.json
 delete mode 100644 i18n/locales/uk.json
 delete mode 100644 i18n/locales/zh-cn.json
 delete mode 100644 i18n/locales/zh-tw.json

diff --git a/i18n/locales/ar.json b/i18n/locales/ar.json
deleted file mode 100644
index 7b816f25da0c6..0000000000000
--- a/i18n/locales/ar.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "components": {
-    "footer": {
-      "scrollToTop": {
-        "button": "Scroll to top"
-      },
-      "links": {
-        "trademarkPolicy": "Trademark Policy",
-        "privacyPolicy": "Privacy Policy",
-        "codeOfConduct": "Code of Conduct",
-        "security": "Security Policy",
-        "openJS": "OpenJS Foundation"
-      }
-    },
-    "header": {
-      "links": {
-        "about": "About",
-        "download": "Download",
-        "docs": "Docs",
-        "getInvolved": "Get Involved",
-        "security": "Security",
-        "certification": "Certification",
-        "blog": "News",
-        "learn": {
-          "title": "Learn",
-          "gettingStarted": {
-            "title": "Getting Started",
-            "introductionToNodejs": "Introduction to Node.js",
-            "howToInstallNodejs": "How to install Node.js",
-            "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",
-            "ecmascript2015Es6AndBeyond": "ECMAScript 2015 (ES6) and beyond",
-            "nodejsTheDifferenceBetweenDevelopmentAndProduction": "Node.js, the difference between development and production",
-            "nodejsWithTypescript": "Node.js with TypeScript",
-            "nodejsWithWebassembly": "Node.js with WebAssembly"
-          },
-          "asynchronousWork": {
-            "title": "Asynchronous Work",
-            "asynchronousFlowControl": "Asynchronous flow control",
-            "overviewOfBlockingVsNonBlocking": "Overview of Blocking vs Non-Blocking",
-            "javascriptAsynchronousProgrammingAndCallbacks": "JavaScript Asynchronous Programming and Callbacks",
-            "discoverJavaScriptTimers": "Discover JavaScript Timers",
-            "understandingProcessnexttick": "Understanding process.nextTick()",
-            "understandingSetimmediate": "Understanding setImmediate()",
-            "theNodejsEventEmitter": "The Node.js Event emitter"
-          },
-          "manipulatingFiles": {
-            "title": "Manipulating Files",
-            "nodejsFileStats": "Node.js file stats",
-            "nodejsFilePaths": "Node.js File Paths",
-            "workingWithFileDescriptorsInNodejs": "Working with file descriptors in Node.js",
-            "readingFilesWithNodejs": "Reading files with Node.js",
-            "writingFilesWithNodejs": "Writing files with Node.js",
-            "workingWithFoldersInNodejs": "Working with folders in Node.js"
-          },
-          "commandLine": {
-            "title": "Command Line",
-            "runNodejsScriptsFromTheCommandLine": "Run Node.js scripts from the command line",
-            "howToReadEnvironmentVariablesFromNodejs": "How to read environment variables from Node.js",
-            "howToUseTheNodejsRepl": "How to use the Node.js REPL",
-            "outputToTheCommandLineUsingNodejs": "Output to the command line using Node.js",
-            "acceptInputFromTheCommandLineInNodejs": "Accept input from the command line in Node.js"
-          }
-        }
-      },
-      "buttons": {
-        "toggleLanguage": "Toggle Language",
-        "toggleTheme": "Toggle dark/light mode"
-      }
-    },
-    "navigation": {
-      "about": {
-        "links": {
-          "governance": "Project Governance",
-          "releases": "Previous Releases",
-          "security": "Security Reporting"
-        }
-      },
-      "docs": {
-        "links": {
-          "es6": "ES6 and beyond",
-          "apiLts": "{fullLtsNodeVersion} API <graySpan>LTS</graySpan>",
-          "apiCurrent": "{fullCurrentNodeVersion} API",
-          "guides": "Guides <graySpan>ARCHIVED</graySpan>",
-          "dependencies": "Dependencies"
-        }
-      },
-      "getInvolved": {
-        "links": {
-          "collabSummit": "Collab Summit",
-          "contribute": "Contribute",
-          "codeOfConduct": "Code of Conduct"
-        }
-      }
-    },
-    "downloadList": {
-      "links": {
-        "previousReleases": "Previous Releases",
-        "packageManager": "Installing Node.js via package manager",
-        "shaSums": {
-          "title": "Signed SHASUMS for release files",
-          "howToVerify": " (How to verify)"
-        },
-        "allDownloads": "All download options",
-        "nightlyReleases": "Nightly builds",
-        "unofficialBuilds": "Unofficial builds",
-        "buildingFromSource": "Building Node.js from source on supported platforms",
-        "installingOnLinux": "Installing Node.js via binary archive",
-        "installingOnWsl": "Install on Windows Subsystem for Linux (WSL)"
-      }
-    },
-    "downloadReleasesTable": {
-      "changelog": "Changelog",
-      "releases": "Releases",
-      "docs": "Docs"
-    },
-    "pagination": {
-      "next": "Newer | ",
-      "previous": "Older"
-    },
-    "common": {
-      "breadcrumbs": {
-        "navigateToHome": "Navigate to Home"
-      },
-      "crossLink": {
-        "previous": "Prev",
-        "next": "Next"
-      },
-      "codebox": {
-        "copied": "Copied to clipboard!"
-      },
-      "pagination": {
-        "prev": "Previous",
-        "prevAriaLabel": "Previous page",
-        "next": "Next",
-        "nextAriaLabel": "Next page",
-        "defaultLabel": "Pagination",
-        "pageLabel": "Go to page {pageNumber}"
-      },
-      "languageDropdown": {
-        "label": "Choose Language"
-      },
-      "card": {
-        "announcement": "Announcements",
-        "release": "Releases",
-        "vulnerability": "Vulnerabilities"
-      }
-    },
-    "metabar": {
-      "lastUpdated": "Last Updated",
-      "readingTime": "Reading Time",
-      "addedIn": "Added In",
-      "author": "Author",
-      "authors": "Authors",
-      "contribute": "Contribute",
-      "contributeText": "Edit this page",
-      "viewAs": "View as",
-      "tableOfContents": "Table of Contents"
-    },
-    "api": {
-      "jsonLink": {
-        "title": "View as JSON"
-      },
-      "sourceLink": "Source Code:"
-    },
-    "home": {
-      "homeDownloadButton": {
-        "download": "{version} {isLts, select, true {LTS} other {Current}}",
-        "tagline": "{isLts, select, true {Recommended For Most Users} other {Latest Features}}",
-        "changelog": "Changelog",
-        "otherDownloads": "Other Downloads",
-        "apiDocs": "API Docs"
-      }
-    },
-    "downloads": {
-      "changelogModal": {
-        "startContributing": "Start Contributing"
-      }
-    }
-  },
-  "layouts": {
-    "blogPost": {
-      "author": {
-        "byLine": "{author, select, null {} other {By {author}, }}"
-      }
-    },
-    "blogIndex": {
-      "currentYear": "News from {year}"
-    }
-  },
-  "pages": {
-    "404": {
-      "title": "404: Page could not be found",
-      "description": "ENOENT: no such file or directory"
-    }
-  }
-}
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
deleted file mode 100644
index 7b816f25da0c6..0000000000000
--- a/i18n/locales/de.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "components": {
-    "footer": {
-      "scrollToTop": {
-        "button": "Scroll to top"
-      },
-      "links": {
-        "trademarkPolicy": "Trademark Policy",
-        "privacyPolicy": "Privacy Policy",
-        "codeOfConduct": "Code of Conduct",
-        "security": "Security Policy",
-        "openJS": "OpenJS Foundation"
-      }
-    },
-    "header": {
-      "links": {
-        "about": "About",
-        "download": "Download",
-        "docs": "Docs",
-        "getInvolved": "Get Involved",
-        "security": "Security",
-        "certification": "Certification",
-        "blog": "News",
-        "learn": {
-          "title": "Learn",
-          "gettingStarted": {
-            "title": "Getting Started",
-            "introductionToNodejs": "Introduction to Node.js",
-            "howToInstallNodejs": "How to install Node.js",
-            "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",
-            "ecmascript2015Es6AndBeyond": "ECMAScript 2015 (ES6) and beyond",
-            "nodejsTheDifferenceBetweenDevelopmentAndProduction": "Node.js, the difference between development and production",
-            "nodejsWithTypescript": "Node.js with TypeScript",
-            "nodejsWithWebassembly": "Node.js with WebAssembly"
-          },
-          "asynchronousWork": {
-            "title": "Asynchronous Work",
-            "asynchronousFlowControl": "Asynchronous flow control",
-            "overviewOfBlockingVsNonBlocking": "Overview of Blocking vs Non-Blocking",
-            "javascriptAsynchronousProgrammingAndCallbacks": "JavaScript Asynchronous Programming and Callbacks",
-            "discoverJavaScriptTimers": "Discover JavaScript Timers",
-            "understandingProcessnexttick": "Understanding process.nextTick()",
-            "understandingSetimmediate": "Understanding setImmediate()",
-            "theNodejsEventEmitter": "The Node.js Event emitter"
-          },
-          "manipulatingFiles": {
-            "title": "Manipulating Files",
-            "nodejsFileStats": "Node.js file stats",
-            "nodejsFilePaths": "Node.js File Paths",
-            "workingWithFileDescriptorsInNodejs": "Working with file descriptors in Node.js",
-            "readingFilesWithNodejs": "Reading files with Node.js",
-            "writingFilesWithNodejs": "Writing files with Node.js",
-            "workingWithFoldersInNodejs": "Working with folders in Node.js"
-          },
-          "commandLine": {
-            "title": "Command Line",
-            "runNodejsScriptsFromTheCommandLine": "Run Node.js scripts from the command line",
-            "howToReadEnvironmentVariablesFromNodejs": "How to read environment variables from Node.js",
-            "howToUseTheNodejsRepl": "How to use the Node.js REPL",
-            "outputToTheCommandLineUsingNodejs": "Output to the command line using Node.js",
-            "acceptInputFromTheCommandLineInNodejs": "Accept input from the command line in Node.js"
-          }
-        }
-      },
-      "buttons": {
-        "toggleLanguage": "Toggle Language",
-        "toggleTheme": "Toggle dark/light mode"
-      }
-    },
-    "navigation": {
-      "about": {
-        "links": {
-          "governance": "Project Governance",
-          "releases": "Previous Releases",
-          "security": "Security Reporting"
-        }
-      },
-      "docs": {
-        "links": {
-          "es6": "ES6 and beyond",
-          "apiLts": "{fullLtsNodeVersion} API <graySpan>LTS</graySpan>",
-          "apiCurrent": "{fullCurrentNodeVersion} API",
-          "guides": "Guides <graySpan>ARCHIVED</graySpan>",
-          "dependencies": "Dependencies"
-        }
-      },
-      "getInvolved": {
-        "links": {
-          "collabSummit": "Collab Summit",
-          "contribute": "Contribute",
-          "codeOfConduct": "Code of Conduct"
-        }
-      }
-    },
-    "downloadList": {
-      "links": {
-        "previousReleases": "Previous Releases",
-        "packageManager": "Installing Node.js via package manager",
-        "shaSums": {
-          "title": "Signed SHASUMS for release files",
-          "howToVerify": " (How to verify)"
-        },
-        "allDownloads": "All download options",
-        "nightlyReleases": "Nightly builds",
-        "unofficialBuilds": "Unofficial builds",
-        "buildingFromSource": "Building Node.js from source on supported platforms",
-        "installingOnLinux": "Installing Node.js via binary archive",
-        "installingOnWsl": "Install on Windows Subsystem for Linux (WSL)"
-      }
-    },
-    "downloadReleasesTable": {
-      "changelog": "Changelog",
-      "releases": "Releases",
-      "docs": "Docs"
-    },
-    "pagination": {
-      "next": "Newer | ",
-      "previous": "Older"
-    },
-    "common": {
-      "breadcrumbs": {
-        "navigateToHome": "Navigate to Home"
-      },
-      "crossLink": {
-        "previous": "Prev",
-        "next": "Next"
-      },
-      "codebox": {
-        "copied": "Copied to clipboard!"
-      },
-      "pagination": {
-        "prev": "Previous",
-        "prevAriaLabel": "Previous page",
-        "next": "Next",
-        "nextAriaLabel": "Next page",
-        "defaultLabel": "Pagination",
-        "pageLabel": "Go to page {pageNumber}"
-      },
-      "languageDropdown": {
-        "label": "Choose Language"
-      },
-      "card": {
-        "announcement": "Announcements",
-        "release": "Releases",
-        "vulnerability": "Vulnerabilities"
-      }
-    },
-    "metabar": {
-      "lastUpdated": "Last Updated",
-      "readingTime": "Reading Time",
-      "addedIn": "Added In",
-      "author": "Author",
-      "authors": "Authors",
-      "contribute": "Contribute",
-      "contributeText": "Edit this page",
-      "viewAs": "View as",
-      "tableOfContents": "Table of Contents"
-    },
-    "api": {
-      "jsonLink": {
-        "title": "View as JSON"
-      },
-      "sourceLink": "Source Code:"
-    },
-    "home": {
-      "homeDownloadButton": {
-        "download": "{version} {isLts, select, true {LTS} other {Current}}",
-        "tagline": "{isLts, select, true {Recommended For Most Users} other {Latest Features}}",
-        "changelog": "Changelog",
-        "otherDownloads": "Other Downloads",
-        "apiDocs": "API Docs"
-      }
-    },
-    "downloads": {
-      "changelogModal": {
-        "startContributing": "Start Contributing"
-      }
-    }
-  },
-  "layouts": {
-    "blogPost": {
-      "author": {
-        "byLine": "{author, select, null {} other {By {author}, }}"
-      }
-    },
-    "blogIndex": {
-      "currentYear": "News from {year}"
-    }
-  },
-  "pages": {
-    "404": {
-      "title": "404: Page could not be found",
-      "description": "ENOENT: no such file or directory"
-    }
-  }
-}
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 7b816f25da0c6..9e91520e957f2 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -18,13 +18,21 @@
         "download": "Download",
         "docs": "Docs",
         "getInvolved": "Get Involved",
+        "learn": "Learn",
         "security": "Security",
         "certification": "Certification",
-        "blog": "News",
-        "learn": {
-          "title": "Learn",
-          "gettingStarted": {
-            "title": "Getting Started",
+        "blog": "News"
+      },
+      "buttons": {
+        "toggleLanguage": "Toggle Language",
+        "toggleTheme": "Toggle dark/light mode"
+      }
+    },
+    "navigation": {
+      "learn": {
+        "gettingStarted": {
+          "links": {
+            "gettingStarted": "Getting Started",
             "introductionToNodejs": "Introduction to Node.js",
             "howToInstallNodejs": "How to install Node.js",
             "howMuchJavascriptDoYouNeedToKnowToUseNodejs": "How much JavaScript do you need to know to use Node.js?",
@@ -35,9 +43,11 @@
             "nodejsTheDifferenceBetweenDevelopmentAndProduction": "Node.js, the difference between development and production",
             "nodejsWithTypescript": "Node.js with TypeScript",
             "nodejsWithWebassembly": "Node.js with WebAssembly"
-          },
-          "asynchronousWork": {
-            "title": "Asynchronous Work",
+          }
+        },
+        "asynchronousWork": {
+          "links": {
+            "asynchronousWork": "Asynchronous Work",
             "asynchronousFlowControl": "Asynchronous flow control",
             "overviewOfBlockingVsNonBlocking": "Overview of Blocking vs Non-Blocking",
             "javascriptAsynchronousProgrammingAndCallbacks": "JavaScript Asynchronous Programming and Callbacks",
@@ -45,18 +55,22 @@
             "understandingProcessnexttick": "Understanding process.nextTick()",
             "understandingSetimmediate": "Understanding setImmediate()",
             "theNodejsEventEmitter": "The Node.js Event emitter"
-          },
-          "manipulatingFiles": {
-            "title": "Manipulating Files",
+          }
+        },
+        "manipulatingFiles": {
+          "links": {
+            "manipulatingFiles": "Manipulating Files",
             "nodejsFileStats": "Node.js file stats",
             "nodejsFilePaths": "Node.js File Paths",
             "workingWithFileDescriptorsInNodejs": "Working with file descriptors in Node.js",
             "readingFilesWithNodejs": "Reading files with Node.js",
             "writingFilesWithNodejs": "Writing files with Node.js",
             "workingWithFoldersInNodejs": "Working with folders in Node.js"
-          },
-          "commandLine": {
-            "title": "Command Line",
+          }
+        },
+        "commandLine": {
+          "links": {
+            "commandLine": "Command Line",
             "runNodejsScriptsFromTheCommandLine": "Run Node.js scripts from the command line",
             "howToReadEnvironmentVariablesFromNodejs": "How to read environment variables from Node.js",
             "howToUseTheNodejsRepl": "How to use the Node.js REPL",
@@ -65,14 +79,9 @@
           }
         }
       },
-      "buttons": {
-        "toggleLanguage": "Toggle Language",
-        "toggleTheme": "Toggle dark/light mode"
-      }
-    },
-    "navigation": {
       "about": {
         "links": {
+          "about": "About Node.js",
           "governance": "Project Governance",
           "releases": "Previous Releases",
           "security": "Security Reporting"
@@ -80,15 +89,17 @@
       },
       "docs": {
         "links": {
+          "docs": "Docs",
           "es6": "ES6 and beyond",
           "apiLts": "{fullLtsNodeVersion} API <graySpan>LTS</graySpan>",
           "apiCurrent": "{fullCurrentNodeVersion} API",
-          "guides": "Guides <graySpan>ARCHIVED</graySpan>",
+          "guides": "Guides <graySpan>ARCHIVE</graySpan>",
           "dependencies": "Dependencies"
         }
       },
       "getInvolved": {
         "links": {
+          "getInvolved": "Get Involved",
           "collabSummit": "Collab Summit",
           "contribute": "Contribute",
           "codeOfConduct": "Code of Conduct"
@@ -139,6 +150,9 @@
         "defaultLabel": "Pagination",
         "pageLabel": "Go to page {pageNumber}"
       },
+      "sidebar": {
+        "title": "Change page"
+      },
       "languageDropdown": {
         "label": "Choose Language"
       },
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
deleted file mode 100644
index 7b816f25da0c6..0000000000000
--- a/i18n/locales/es.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "components": {
-    "footer": {
-      "scrollToTop": {
-        "button": "Scroll to top"
-      },
-      "links": {
-        "trademarkPolicy": "Trademark Policy",
-        "privacyPolicy": "Privacy Policy",
-        "codeOfConduct": "Code of Conduct",
-        "security": "Security Policy",
-        "openJS": "OpenJS Foundation"
-      }
-    },
-    "header": {
-      "links": {
-        "about": "About",
-        "download": "Download",
-        "docs": "Docs",
-        "getInvolved": "Get Involved",
-        "security": "Security",
-        "certification": "Certification",
-        "blog": "News",
-        "learn": {
-          "title": "Learn",
-          "gettingStarted": {
-            "title": "Getting Started",
-            "introductionToNodejs": "Introduction to Node.js",
-            "howToInstallNodejs": "How to install Node.js",
-            "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",
-            "ecmascript2015Es6AndBeyond": "ECMAScript 2015 (ES6) and beyond",
-            "nodejsTheDifferenceBetweenDevelopmentAndProduction": "Node.js, the difference between development and production",
-            "nodejsWithTypescript": "Node.js with TypeScript",
-            "nodejsWithWebassembly": "Node.js with WebAssembly"
-          },
-          "asynchronousWork": {
-            "title": "Asynchronous Work",
-            "asynchronousFlowControl": "Asynchronous flow control",
-            "overviewOfBlockingVsNonBlocking": "Overview of Blocking vs Non-Blocking",
-            "javascriptAsynchronousProgrammingAndCallbacks": "JavaScript Asynchronous Programming and Callbacks",
-            "discoverJavaScriptTimers": "Discover JavaScript Timers",
-            "understandingProcessnexttick": "Understanding process.nextTick()",
-            "understandingSetimmediate": "Understanding setImmediate()",
-            "theNodejsEventEmitter": "The Node.js Event emitter"
-          },
-          "manipulatingFiles": {
-            "title": "Manipulating Files",
-            "nodejsFileStats": "Node.js file stats",
-            "nodejsFilePaths": "Node.js File Paths",
-            "workingWithFileDescriptorsInNodejs": "Working with file descriptors in Node.js",
-            "readingFilesWithNodejs": "Reading files with Node.js",
-            "writingFilesWithNodejs": "Writing files with Node.js",
-            "workingWithFoldersInNodejs": "Working with folders in Node.js"
-          },
-          "commandLine": {
-            "title": "Command Line",
-            "runNodejsScriptsFromTheCommandLine": "Run Node.js scripts from the command line",
-            "howToReadEnvironmentVariablesFromNodejs": "How to read environment variables from Node.js",
-            "howToUseTheNodejsRepl": "How to use the Node.js REPL",
-            "outputToTheCommandLineUsingNodejs": "Output to the command line using Node.js",
-            "acceptInputFromTheCommandLineInNodejs": "Accept input from the command line in Node.js"
-          }
-        }
-      },
-      "buttons": {
-        "toggleLanguage": "Toggle Language",
-        "toggleTheme": "Toggle dark/light mode"
-      }
-    },
-    "navigation": {
-      "about": {
-        "links": {
-          "governance": "Project Governance",
-          "releases": "Previous Releases",
-          "security": "Security Reporting"
-        }
-      },
-      "docs": {
-        "links": {
-          "es6": "ES6 and beyond",
-          "apiLts": "{fullLtsNodeVersion} API <graySpan>LTS</graySpan>",
-          "apiCurrent": "{fullCurrentNodeVersion} API",
-          "guides": "Guides <graySpan>ARCHIVED</graySpan>",
-          "dependencies": "Dependencies"
-        }
-      },
-      "getInvolved": {
-        "links": {
-          "collabSummit": "Collab Summit",
-          "contribute": "Contribute",
-          "codeOfConduct": "Code of Conduct"
-        }
-      }
-    },
-    "downloadList": {
-      "links": {
-        "previousReleases": "Previous Releases",
-        "packageManager": "Installing Node.js via package manager",
-        "shaSums": {
-          "title": "Signed SHASUMS for release files",
-          "howToVerify": " (How to verify)"
-        },
-        "allDownloads": "All download options",
-        "nightlyReleases": "Nightly builds",
-        "unofficialBuilds": "Unofficial builds",
-        "buildingFromSource": "Building Node.js from source on supported platforms",
-        "installingOnLinux": "Installing Node.js via binary archive",
-        "installingOnWsl": "Install on Windows Subsystem for Linux (WSL)"
-      }
-    },
-    "downloadReleasesTable": {
-      "changelog": "Changelog",
-      "releases": "Releases",
-      "docs": "Docs"
-    },
-    "pagination": {
-      "next": "Newer | ",
-      "previous": "Older"
-    },
-    "common": {
-      "breadcrumbs": {
-        "navigateToHome": "Navigate to Home"
-      },
-      "crossLink": {
-        "previous": "Prev",
-        "next": "Next"
-      },
-      "codebox": {
-        "copied": "Copied to clipboard!"
-      },
-      "pagination": {
-        "prev": "Previous",
-        "prevAriaLabel": "Previous page",
-        "next": "Next",
-        "nextAriaLabel": "Next page",
-        "defaultLabel": "Pagination",
-        "pageLabel": "Go to page {pageNumber}"
-      },
-      "languageDropdown": {
-        "label": "Choose Language"
-      },
-      "card": {
-        "announcement": "Announcements",
-        "release": "Releases",
-        "vulnerability": "Vulnerabilities"
-      }
-    },
-    "metabar": {
-      "lastUpdated": "Last Updated",
-      "readingTime": "Reading Time",
-      "addedIn": "Added In",
-      "author": "Author",
-      "authors": "Authors",
-      "contribute": "Contribute",
-      "contributeText": "Edit this page",
-      "viewAs": "View as",
-      "tableOfContents": "Table of Contents"
-    },
-    "api": {
-      "jsonLink": {
-        "title": "View as JSON"
-      },
-      "sourceLink": "Source Code:"
-    },
-    "home": {
-      "homeDownloadButton": {
-        "download": "{version} {isLts, select, true {LTS} other {Current}}",
-        "tagline": "{isLts, select, true {Recommended For Most Users} other {Latest Features}}",
-        "changelog": "Changelog",
-        "otherDownloads": "Other Downloads",
-        "apiDocs": "API Docs"
-      }
-    },
-    "downloads": {
-      "changelogModal": {
-        "startContributing": "Start Contributing"
-      }
-    }
-  },
-  "layouts": {
-    "blogPost": {
-      "author": {
-        "byLine": "{author, select, null {} other {By {author}, }}"
-      }
-    },
-    "blogIndex": {
-      "currentYear": "News from {year}"
-    }
-  },
-  "pages": {
-    "404": {
-      "title": "404: Page could not be found",
-      "description": "ENOENT: no such file or directory"
-    }
-  }
-}
diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
deleted file mode 100644
index 7b816f25da0c6..0000000000000
--- a/i18n/locales/fr.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "components": {
-    "footer": {
-      "scrollToTop": {
-        "button": "Scroll to top"
-      },
-      "links": {
-        "trademarkPolicy": "Trademark Policy",
-        "privacyPolicy": "Privacy Policy",
-        "codeOfConduct": "Code of Conduct",
-        "security": "Security Policy",
-        "openJS": "OpenJS Foundation"
-      }
-    },
-    "header": {
-      "links": {
-        "about": "About",
-        "download": "Download",
-        "docs": "Docs",
-        "getInvolved": "Get Involved",
-        "security": "Security",
-        "certification": "Certification",
-        "blog": "News",
-        "learn": {
-          "title": "Learn",
-          "gettingStarted": {
-            "title": "Getting Started",
-            "introductionToNodejs": "Introduction to Node.js",
-            "howToInstallNodejs": "How to install Node.js",
-            "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",
-            "ecmascript2015Es6AndBeyond": "ECMAScript 2015 (ES6) and beyond",
-            "nodejsTheDifferenceBetweenDevelopmentAndProduction": "Node.js, the difference between development and production",
-            "nodejsWithTypescript": "Node.js with TypeScript",
-            "nodejsWithWebassembly": "Node.js with WebAssembly"
-          },
-          "asynchronousWork": {
-            "title": "Asynchronous Work",
-            "asynchronousFlowControl": "Asynchronous flow control",
-            "overviewOfBlockingVsNonBlocking": "Overview of Blocking vs Non-Blocking",
-            "javascriptAsynchronousProgrammingAndCallbacks": "JavaScript Asynchronous Programming and Callbacks",
-            "discoverJavaScriptTimers": "Discover JavaScript Timers",
-            "understandingProcessnexttick": "Understanding process.nextTick()",
-            "understandingSetimmediate": "Understanding setImmediate()",
-            "theNodejsEventEmitter": "The Node.js Event emitter"
-          },
-          "manipulatingFiles": {
-            "title": "Manipulating Files",
-            "nodejsFileStats": "Node.js file stats",
-            "nodejsFilePaths": "Node.js File Paths",
-            "workingWithFileDescriptorsInNodejs": "Working with file descriptors in Node.js",
-            "readingFilesWithNodejs": "Reading files with Node.js",
-            "writingFilesWithNodejs": "Writing files with Node.js",
-            "workingWithFoldersInNodejs": "Working with folders in Node.js"
-          },
-          "commandLine": {
-            "title": "Command Line",
-            "runNodejsScriptsFromTheCommandLine": "Run Node.js scripts from the command line",
-            "howToReadEnvironmentVariablesFromNodejs": "How to read environment variables from Node.js",
-            "howToUseTheNodejsRepl": "How to use the Node.js REPL",
-            "outputToTheCommandLineUsingNodejs": "Output to the command line using Node.js",
-            "acceptInputFromTheCommandLineInNodejs": "Accept input from the command line in Node.js"
-          }
-        }
-      },
-      "buttons": {
-        "toggleLanguage": "Toggle Language",
-        "toggleTheme": "Toggle dark/light mode"
-      }
-    },
-    "navigation": {
-      "about": {
-        "links": {
-          "governance": "Project Governance",
-          "releases": "Previous Releases",
-          "security": "Security Reporting"
-        }
-      },
-      "docs": {
-        "links": {
-          "es6": "ES6 and beyond",
-          "apiLts": "{fullLtsNodeVersion} API <graySpan>LTS</graySpan>",
-          "apiCurrent": "{fullCurrentNodeVersion} API",
-          "guides": "Guides <graySpan>ARCHIVED</graySpan>",
-          "dependencies": "Dependencies"
-        }
-      },
-      "getInvolved": {
-        "links": {
-          "collabSummit": "Collab Summit",
-          "contribute": "Contribute",
-          "codeOfConduct": "Code of Conduct"
-        }
-      }
-    },
-    "downloadList": {
-      "links": {
-        "previousReleases": "Previous Releases",
-        "packageManager": "Installing Node.js via package manager",
-        "shaSums": {
-          "title": "Signed SHASUMS for release files",
-          "howToVerify": " (How to verify)"
-        },
-        "allDownloads": "All download options",
-        "nightlyReleases": "Nightly builds",
-        "unofficialBuilds": "Unofficial builds",
-        "buildingFromSource": "Building Node.js from source on supported platforms",
-        "installingOnLinux": "Installing Node.js via binary archive",
-        "installingOnWsl": "Install on Windows Subsystem for Linux (WSL)"
-      }
-    },
-    "downloadReleasesTable": {
-      "changelog": "Changelog",
-      "releases": "Releases",
-      "docs": "Docs"
-    },
-    "pagination": {
-      "next": "Newer | ",
-      "previous": "Older"
-    },
-    "common": {
-      "breadcrumbs": {
-        "navigateToHome": "Navigate to Home"
-      },
-      "crossLink": {
-        "previous": "Prev",
-        "next": "Next"
-      },
-      "codebox": {
-        "copied": "Copied to clipboard!"
-      },
-      "pagination": {
-        "prev": "Previous",
-        "prevAriaLabel": "Previous page",
-        "next": "Next",
-        "nextAriaLabel": "Next page",
-        "defaultLabel": "Pagination",
-        "pageLabel": "Go to page {pageNumber}"
-      },
-      "languageDropdown": {
-        "label": "Choose Language"
-      },
-      "card": {
-        "announcement": "Announcements",
-        "release": "Releases",
-        "vulnerability": "Vulnerabilities"
-      }
-    },
-    "metabar": {
-      "lastUpdated": "Last Updated",
-      "readingTime": "Reading Time",
-      "addedIn": "Added In",
-      "author": "Author",
-      "authors": "Authors",
-      "contribute": "Contribute",
-      "contributeText": "Edit this page",
-      "viewAs": "View as",
-      "tableOfContents": "Table of Contents"
-    },
-    "api": {
-      "jsonLink": {
-        "title": "View as JSON"
-      },
-      "sourceLink": "Source Code:"
-    },
-    "home": {
-      "homeDownloadButton": {
-        "download": "{version} {isLts, select, true {LTS} other {Current}}",
-        "tagline": "{isLts, select, true {Recommended For Most Users} other {Latest Features}}",
-        "changelog": "Changelog",
-        "otherDownloads": "Other Downloads",
-        "apiDocs": "API Docs"
-      }
-    },
-    "downloads": {
-      "changelogModal": {
-        "startContributing": "Start Contributing"
-      }
-    }
-  },
-  "layouts": {
-    "blogPost": {
-      "author": {
-        "byLine": "{author, select, null {} other {By {author}, }}"
-      }
-    },
-    "blogIndex": {
-      "currentYear": "News from {year}"
-    }
-  },
-  "pages": {
-    "404": {
-      "title": "404: Page could not be found",
-      "description": "ENOENT: no such file or directory"
-    }
-  }
-}
diff --git a/i18n/locales/id.json b/i18n/locales/id.json
deleted file mode 100644
index 7b816f25da0c6..0000000000000
--- a/i18n/locales/id.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "components": {
-    "footer": {
-      "scrollToTop": {
-        "button": "Scroll to top"
-      },
-      "links": {
-        "trademarkPolicy": "Trademark Policy",
-        "privacyPolicy": "Privacy Policy",
-        "codeOfConduct": "Code of Conduct",
-        "security": "Security Policy",
-        "openJS": "OpenJS Foundation"
-      }
-    },
-    "header": {
-      "links": {
-        "about": "About",
-        "download": "Download",
-        "docs": "Docs",
-        "getInvolved": "Get Involved",
-        "security": "Security",
-        "certification": "Certification",
-        "blog": "News",
-        "learn": {
-          "title": "Learn",
-          "gettingStarted": {
-            "title": "Getting Started",
-            "introductionToNodejs": "Introduction to Node.js",
-            "howToInstallNodejs": "How to install Node.js",
-            "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",
-            "ecmascript2015Es6AndBeyond": "ECMAScript 2015 (ES6) and beyond",
-            "nodejsTheDifferenceBetweenDevelopmentAndProduction": "Node.js, the difference between development and production",
-            "nodejsWithTypescript": "Node.js with TypeScript",
-            "nodejsWithWebassembly": "Node.js with WebAssembly"
-          },
-          "asynchronousWork": {
-            "title": "Asynchronous Work",
-            "asynchronousFlowControl": "Asynchronous flow control",
-            "overviewOfBlockingVsNonBlocking": "Overview of Blocking vs Non-Blocking",
-            "javascriptAsynchronousProgrammingAndCallbacks": "JavaScript Asynchronous Programming and Callbacks",
-            "discoverJavaScriptTimers": "Discover JavaScript Timers",
-            "understandingProcessnexttick": "Understanding process.nextTick()",
-            "understandingSetimmediate": "Understanding setImmediate()",
-            "theNodejsEventEmitter": "The Node.js Event emitter"
-          },
-          "manipulatingFiles": {
-            "title": "Manipulating Files",
-            "nodejsFileStats": "Node.js file stats",
-            "nodejsFilePaths": "Node.js File Paths",
-            "workingWithFileDescriptorsInNodejs": "Working with file descriptors in Node.js",
-            "readingFilesWithNodejs": "Reading files with Node.js",
-            "writingFilesWithNodejs": "Writing files with Node.js",
-            "workingWithFoldersInNodejs": "Working with folders in Node.js"
-          },
-          "commandLine": {
-            "title": "Command Line",
-            "runNodejsScriptsFromTheCommandLine": "Run Node.js scripts from the command line",
-            "howToReadEnvironmentVariablesFromNodejs": "How to read environment variables from Node.js",
-            "howToUseTheNodejsRepl": "How to use the Node.js REPL",
-            "outputToTheCommandLineUsingNodejs": "Output to the command line using Node.js",
-            "acceptInputFromTheCommandLineInNodejs": "Accept input from the command line in Node.js"
-          }
-        }
-      },
-      "buttons": {
-        "toggleLanguage": "Toggle Language",
-        "toggleTheme": "Toggle dark/light mode"
-      }
-    },
-    "navigation": {
-      "about": {
-        "links": {
-          "governance": "Project Governance",
-          "releases": "Previous Releases",
-          "security": "Security Reporting"
-        }
-      },
-      "docs": {
-        "links": {
-          "es6": "ES6 and beyond",
-          "apiLts": "{fullLtsNodeVersion} API <graySpan>LTS</graySpan>",
-          "apiCurrent": "{fullCurrentNodeVersion} API",
-          "guides": "Guides <graySpan>ARCHIVED</graySpan>",
-          "dependencies": "Dependencies"
-        }
-      },
-      "getInvolved": {
-        "links": {
-          "collabSummit": "Collab Summit",
-          "contribute": "Contribute",
-          "codeOfConduct": "Code of Conduct"
-        }
-      }
-    },
-    "downloadList": {
-      "links": {
-        "previousReleases": "Previous Releases",
-        "packageManager": "Installing Node.js via package manager",
-        "shaSums": {
-          "title": "Signed SHASUMS for release files",
-          "howToVerify": " (How to verify)"
-        },
-        "allDownloads": "All download options",
-        "nightlyReleases": "Nightly builds",
-        "unofficialBuilds": "Unofficial builds",
-        "buildingFromSource": "Building Node.js from source on supported platforms",
-        "installingOnLinux": "Installing Node.js via binary archive",
-        "installingOnWsl": "Install on Windows Subsystem for Linux (WSL)"
-      }
-    },
-    "downloadReleasesTable": {
-      "changelog": "Changelog",
-      "releases": "Releases",
-      "docs": "Docs"
-    },
-    "pagination": {
-      "next": "Newer | ",
-      "previous": "Older"
-    },
-    "common": {
-      "breadcrumbs": {
-        "navigateToHome": "Navigate to Home"
-      },
-      "crossLink": {
-        "previous": "Prev",
-        "next": "Next"
-      },
-      "codebox": {
-        "copied": "Copied to clipboard!"
-      },
-      "pagination": {
-        "prev": "Previous",
-        "prevAriaLabel": "Previous page",
-        "next": "Next",
-        "nextAriaLabel": "Next page",
-        "defaultLabel": "Pagination",
-        "pageLabel": "Go to page {pageNumber}"
-      },
-      "languageDropdown": {
-        "label": "Choose Language"
-      },
-      "card": {
-        "announcement": "Announcements",
-        "release": "Releases",
-        "vulnerability": "Vulnerabilities"
-      }
-    },
-    "metabar": {
-      "lastUpdated": "Last Updated",
-      "readingTime": "Reading Time",
-      "addedIn": "Added In",
-      "author": "Author",
-      "authors": "Authors",
-      "contribute": "Contribute",
-      "contributeText": "Edit this page",
-      "viewAs": "View as",
-      "tableOfContents": "Table of Contents"
-    },
-    "api": {
-      "jsonLink": {
-        "title": "View as JSON"
-      },
-      "sourceLink": "Source Code:"
-    },
-    "home": {
-      "homeDownloadButton": {
-        "download": "{version} {isLts, select, true {LTS} other {Current}}",
-        "tagline": "{isLts, select, true {Recommended For Most Users} other {Latest Features}}",
-        "changelog": "Changelog",
-        "otherDownloads": "Other Downloads",
-        "apiDocs": "API Docs"
-      }
-    },
-    "downloads": {
-      "changelogModal": {
-        "startContributing": "Start Contributing"
-      }
-    }
-  },
-  "layouts": {
-    "blogPost": {
-      "author": {
-        "byLine": "{author, select, null {} other {By {author}, }}"
-      }
-    },
-    "blogIndex": {
-      "currentYear": "News from {year}"
-    }
-  },
-  "pages": {
-    "404": {
-      "title": "404: Page could not be found",
-      "description": "ENOENT: no such file or directory"
-    }
-  }
-}
diff --git a/i18n/locales/it.json b/i18n/locales/it.json
deleted file mode 100644
index 7b816f25da0c6..0000000000000
--- a/i18n/locales/it.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "components": {
-    "footer": {
-      "scrollToTop": {
-        "button": "Scroll to top"
-      },
-      "links": {
-        "trademarkPolicy": "Trademark Policy",
-        "privacyPolicy": "Privacy Policy",
-        "codeOfConduct": "Code of Conduct",
-        "security": "Security Policy",
-        "openJS": "OpenJS Foundation"
-      }
-    },
-    "header": {
-      "links": {
-        "about": "About",
-        "download": "Download",
-        "docs": "Docs",
-        "getInvolved": "Get Involved",
-        "security": "Security",
-        "certification": "Certification",
-        "blog": "News",
-        "learn": {
-          "title": "Learn",
-          "gettingStarted": {
-            "title": "Getting Started",
-            "introductionToNodejs": "Introduction to Node.js",
-            "howToInstallNodejs": "How to install Node.js",
-            "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",
-            "ecmascript2015Es6AndBeyond": "ECMAScript 2015 (ES6) and beyond",
-            "nodejsTheDifferenceBetweenDevelopmentAndProduction": "Node.js, the difference between development and production",
-            "nodejsWithTypescript": "Node.js with TypeScript",
-            "nodejsWithWebassembly": "Node.js with WebAssembly"
-          },
-          "asynchronousWork": {
-            "title": "Asynchronous Work",
-            "asynchronousFlowControl": "Asynchronous flow control",
-            "overviewOfBlockingVsNonBlocking": "Overview of Blocking vs Non-Blocking",
-            "javascriptAsynchronousProgrammingAndCallbacks": "JavaScript Asynchronous Programming and Callbacks",
-            "discoverJavaScriptTimers": "Discover JavaScript Timers",
-            "understandingProcessnexttick": "Understanding process.nextTick()",
-            "understandingSetimmediate": "Understanding setImmediate()",
-            "theNodejsEventEmitter": "The Node.js Event emitter"
-          },
-          "manipulatingFiles": {
-            "title": "Manipulating Files",
-            "nodejsFileStats": "Node.js file stats",
-            "nodejsFilePaths": "Node.js File Paths",
-            "workingWithFileDescriptorsInNodejs": "Working with file descriptors in Node.js",
-            "readingFilesWithNodejs": "Reading files with Node.js",
-            "writingFilesWithNodejs": "Writing files with Node.js",
-            "workingWithFoldersInNodejs": "Working with folders in Node.js"
-          },
-          "commandLine": {
-            "title": "Command Line",
-            "runNodejsScriptsFromTheCommandLine": "Run Node.js scripts from the command line",
-            "howToReadEnvironmentVariablesFromNodejs": "How to read environment variables from Node.js",
-            "howToUseTheNodejsRepl": "How to use the Node.js REPL",
-            "outputToTheCommandLineUsingNodejs": "Output to the command line using Node.js",
-            "acceptInputFromTheCommandLineInNodejs": "Accept input from the command line in Node.js"
-          }
-        }
-      },
-      "buttons": {
-        "toggleLanguage": "Toggle Language",
-        "toggleTheme": "Toggle dark/light mode"
-      }
-    },
-    "navigation": {
-      "about": {
-        "links": {
-          "governance": "Project Governance",
-          "releases": "Previous Releases",
-          "security": "Security Reporting"
-        }
-      },
-      "docs": {
-        "links": {
-          "es6": "ES6 and beyond",
-          "apiLts": "{fullLtsNodeVersion} API <graySpan>LTS</graySpan>",
-          "apiCurrent": "{fullCurrentNodeVersion} API",
-          "guides": "Guides <graySpan>ARCHIVED</graySpan>",
-          "dependencies": "Dependencies"
-        }
-      },
-      "getInvolved": {
-        "links": {
-          "collabSummit": "Collab Summit",
-          "contribute": "Contribute",
-          "codeOfConduct": "Code of Conduct"
-        }
-      }
-    },
-    "downloadList": {
-      "links": {
-        "previousReleases": "Previous Releases",
-        "packageManager": "Installing Node.js via package manager",
-        "shaSums": {
-          "title": "Signed SHASUMS for release files",
-          "howToVerify": " (How to verify)"
-        },
-        "allDownloads": "All download options",
-        "nightlyReleases": "Nightly builds",
-        "unofficialBuilds": "Unofficial builds",
-        "buildingFromSource": "Building Node.js from source on supported platforms",
-        "installingOnLinux": "Installing Node.js via binary archive",
-        "installingOnWsl": "Install on Windows Subsystem for Linux (WSL)"
-      }
-    },
-    "downloadReleasesTable": {
-      "changelog": "Changelog",
-      "releases": "Releases",
-      "docs": "Docs"
-    },
-    "pagination": {
-      "next": "Newer | ",
-      "previous": "Older"
-    },
-    "common": {
-      "breadcrumbs": {
-        "navigateToHome": "Navigate to Home"
-      },
-      "crossLink": {
-        "previous": "Prev",
-        "next": "Next"
-      },
-      "codebox": {
-        "copied": "Copied to clipboard!"
-      },
-      "pagination": {
-        "prev": "Previous",
-        "prevAriaLabel": "Previous page",
-        "next": "Next",
-        "nextAriaLabel": "Next page",
-        "defaultLabel": "Pagination",
-        "pageLabel": "Go to page {pageNumber}"
-      },
-      "languageDropdown": {
-        "label": "Choose Language"
-      },
-      "card": {
-        "announcement": "Announcements",
-        "release": "Releases",
-        "vulnerability": "Vulnerabilities"
-      }
-    },
-    "metabar": {
-      "lastUpdated": "Last Updated",
-      "readingTime": "Reading Time",
-      "addedIn": "Added In",
-      "author": "Author",
-      "authors": "Authors",
-      "contribute": "Contribute",
-      "contributeText": "Edit this page",
-      "viewAs": "View as",
-      "tableOfContents": "Table of Contents"
-    },
-    "api": {
-      "jsonLink": {
-        "title": "View as JSON"
-      },
-      "sourceLink": "Source Code:"
-    },
-    "home": {
-      "homeDownloadButton": {
-        "download": "{version} {isLts, select, true {LTS} other {Current}}",
-        "tagline": "{isLts, select, true {Recommended For Most Users} other {Latest Features}}",
-        "changelog": "Changelog",
-        "otherDownloads": "Other Downloads",
-        "apiDocs": "API Docs"
-      }
-    },
-    "downloads": {
-      "changelogModal": {
-        "startContributing": "Start Contributing"
-      }
-    }
-  },
-  "layouts": {
-    "blogPost": {
-      "author": {
-        "byLine": "{author, select, null {} other {By {author}, }}"
-      }
-    },
-    "blogIndex": {
-      "currentYear": "News from {year}"
-    }
-  },
-  "pages": {
-    "404": {
-      "title": "404: Page could not be found",
-      "description": "ENOENT: no such file or directory"
-    }
-  }
-}
diff --git a/i18n/locales/ja.json b/i18n/locales/ja.json
deleted file mode 100644
index 7b816f25da0c6..0000000000000
--- a/i18n/locales/ja.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "components": {
-    "footer": {
-      "scrollToTop": {
-        "button": "Scroll to top"
-      },
-      "links": {
-        "trademarkPolicy": "Trademark Policy",
-        "privacyPolicy": "Privacy Policy",
-        "codeOfConduct": "Code of Conduct",
-        "security": "Security Policy",
-        "openJS": "OpenJS Foundation"
-      }
-    },
-    "header": {
-      "links": {
-        "about": "About",
-        "download": "Download",
-        "docs": "Docs",
-        "getInvolved": "Get Involved",
-        "security": "Security",
-        "certification": "Certification",
-        "blog": "News",
-        "learn": {
-          "title": "Learn",
-          "gettingStarted": {
-            "title": "Getting Started",
-            "introductionToNodejs": "Introduction to Node.js",
-            "howToInstallNodejs": "How to install Node.js",
-            "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",
-            "ecmascript2015Es6AndBeyond": "ECMAScript 2015 (ES6) and beyond",
-            "nodejsTheDifferenceBetweenDevelopmentAndProduction": "Node.js, the difference between development and production",
-            "nodejsWithTypescript": "Node.js with TypeScript",
-            "nodejsWithWebassembly": "Node.js with WebAssembly"
-          },
-          "asynchronousWork": {
-            "title": "Asynchronous Work",
-            "asynchronousFlowControl": "Asynchronous flow control",
-            "overviewOfBlockingVsNonBlocking": "Overview of Blocking vs Non-Blocking",
-            "javascriptAsynchronousProgrammingAndCallbacks": "JavaScript Asynchronous Programming and Callbacks",
-            "discoverJavaScriptTimers": "Discover JavaScript Timers",
-            "understandingProcessnexttick": "Understanding process.nextTick()",
-            "understandingSetimmediate": "Understanding setImmediate()",
-            "theNodejsEventEmitter": "The Node.js Event emitter"
-          },
-          "manipulatingFiles": {
-            "title": "Manipulating Files",
-            "nodejsFileStats": "Node.js file stats",
-            "nodejsFilePaths": "Node.js File Paths",
-            "workingWithFileDescriptorsInNodejs": "Working with file descriptors in Node.js",
-            "readingFilesWithNodejs": "Reading files with Node.js",
-            "writingFilesWithNodejs": "Writing files with Node.js",
-            "workingWithFoldersInNodejs": "Working with folders in Node.js"
-          },
-          "commandLine": {
-            "title": "Command Line",
-            "runNodejsScriptsFromTheCommandLine": "Run Node.js scripts from the command line",
-            "howToReadEnvironmentVariablesFromNodejs": "How to read environment variables from Node.js",
-            "howToUseTheNodejsRepl": "How to use the Node.js REPL",
-            "outputToTheCommandLineUsingNodejs": "Output to the command line using Node.js",
-            "acceptInputFromTheCommandLineInNodejs": "Accept input from the command line in Node.js"
-          }
-        }
-      },
-      "buttons": {
-        "toggleLanguage": "Toggle Language",
-        "toggleTheme": "Toggle dark/light mode"
-      }
-    },
-    "navigation": {
-      "about": {
-        "links": {
-          "governance": "Project Governance",
-          "releases": "Previous Releases",
-          "security": "Security Reporting"
-        }
-      },
-      "docs": {
-        "links": {
-          "es6": "ES6 and beyond",
-          "apiLts": "{fullLtsNodeVersion} API <graySpan>LTS</graySpan>",
-          "apiCurrent": "{fullCurrentNodeVersion} API",
-          "guides": "Guides <graySpan>ARCHIVED</graySpan>",
-          "dependencies": "Dependencies"
-        }
-      },
-      "getInvolved": {
-        "links": {
-          "collabSummit": "Collab Summit",
-          "contribute": "Contribute",
-          "codeOfConduct": "Code of Conduct"
-        }
-      }
-    },
-    "downloadList": {
-      "links": {
-        "previousReleases": "Previous Releases",
-        "packageManager": "Installing Node.js via package manager",
-        "shaSums": {
-          "title": "Signed SHASUMS for release files",
-          "howToVerify": " (How to verify)"
-        },
-        "allDownloads": "All download options",
-        "nightlyReleases": "Nightly builds",
-        "unofficialBuilds": "Unofficial builds",
-        "buildingFromSource": "Building Node.js from source on supported platforms",
-        "installingOnLinux": "Installing Node.js via binary archive",
-        "installingOnWsl": "Install on Windows Subsystem for Linux (WSL)"
-      }
-    },
-    "downloadReleasesTable": {
-      "changelog": "Changelog",
-      "releases": "Releases",
-      "docs": "Docs"
-    },
-    "pagination": {
-      "next": "Newer | ",
-      "previous": "Older"
-    },
-    "common": {
-      "breadcrumbs": {
-        "navigateToHome": "Navigate to Home"
-      },
-      "crossLink": {
-        "previous": "Prev",
-        "next": "Next"
-      },
-      "codebox": {
-        "copied": "Copied to clipboard!"
-      },
-      "pagination": {
-        "prev": "Previous",
-        "prevAriaLabel": "Previous page",
-        "next": "Next",
-        "nextAriaLabel": "Next page",
-        "defaultLabel": "Pagination",
-        "pageLabel": "Go to page {pageNumber}"
-      },
-      "languageDropdown": {
-        "label": "Choose Language"
-      },
-      "card": {
-        "announcement": "Announcements",
-        "release": "Releases",
-        "vulnerability": "Vulnerabilities"
-      }
-    },
-    "metabar": {
-      "lastUpdated": "Last Updated",
-      "readingTime": "Reading Time",
-      "addedIn": "Added In",
-      "author": "Author",
-      "authors": "Authors",
-      "contribute": "Contribute",
-      "contributeText": "Edit this page",
-      "viewAs": "View as",
-      "tableOfContents": "Table of Contents"
-    },
-    "api": {
-      "jsonLink": {
-        "title": "View as JSON"
-      },
-      "sourceLink": "Source Code:"
-    },
-    "home": {
-      "homeDownloadButton": {
-        "download": "{version} {isLts, select, true {LTS} other {Current}}",
-        "tagline": "{isLts, select, true {Recommended For Most Users} other {Latest Features}}",
-        "changelog": "Changelog",
-        "otherDownloads": "Other Downloads",
-        "apiDocs": "API Docs"
-      }
-    },
-    "downloads": {
-      "changelogModal": {
-        "startContributing": "Start Contributing"
-      }
-    }
-  },
-  "layouts": {
-    "blogPost": {
-      "author": {
-        "byLine": "{author, select, null {} other {By {author}, }}"
-      }
-    },
-    "blogIndex": {
-      "currentYear": "News from {year}"
-    }
-  },
-  "pages": {
-    "404": {
-      "title": "404: Page could not be found",
-      "description": "ENOENT: no such file or directory"
-    }
-  }
-}
diff --git a/i18n/locales/ka.json b/i18n/locales/ka.json
deleted file mode 100644
index 7b816f25da0c6..0000000000000
--- a/i18n/locales/ka.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "components": {
-    "footer": {
-      "scrollToTop": {
-        "button": "Scroll to top"
-      },
-      "links": {
-        "trademarkPolicy": "Trademark Policy",
-        "privacyPolicy": "Privacy Policy",
-        "codeOfConduct": "Code of Conduct",
-        "security": "Security Policy",
-        "openJS": "OpenJS Foundation"
-      }
-    },
-    "header": {
-      "links": {
-        "about": "About",
-        "download": "Download",
-        "docs": "Docs",
-        "getInvolved": "Get Involved",
-        "security": "Security",
-        "certification": "Certification",
-        "blog": "News",
-        "learn": {
-          "title": "Learn",
-          "gettingStarted": {
-            "title": "Getting Started",
-            "introductionToNodejs": "Introduction to Node.js",
-            "howToInstallNodejs": "How to install Node.js",
-            "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",
-            "ecmascript2015Es6AndBeyond": "ECMAScript 2015 (ES6) and beyond",
-            "nodejsTheDifferenceBetweenDevelopmentAndProduction": "Node.js, the difference between development and production",
-            "nodejsWithTypescript": "Node.js with TypeScript",
-            "nodejsWithWebassembly": "Node.js with WebAssembly"
-          },
-          "asynchronousWork": {
-            "title": "Asynchronous Work",
-            "asynchronousFlowControl": "Asynchronous flow control",
-            "overviewOfBlockingVsNonBlocking": "Overview of Blocking vs Non-Blocking",
-            "javascriptAsynchronousProgrammingAndCallbacks": "JavaScript Asynchronous Programming and Callbacks",
-            "discoverJavaScriptTimers": "Discover JavaScript Timers",
-            "understandingProcessnexttick": "Understanding process.nextTick()",
-            "understandingSetimmediate": "Understanding setImmediate()",
-            "theNodejsEventEmitter": "The Node.js Event emitter"
-          },
-          "manipulatingFiles": {
-            "title": "Manipulating Files",
-            "nodejsFileStats": "Node.js file stats",
-            "nodejsFilePaths": "Node.js File Paths",
-            "workingWithFileDescriptorsInNodejs": "Working with file descriptors in Node.js",
-            "readingFilesWithNodejs": "Reading files with Node.js",
-            "writingFilesWithNodejs": "Writing files with Node.js",
-            "workingWithFoldersInNodejs": "Working with folders in Node.js"
-          },
-          "commandLine": {
-            "title": "Command Line",
-            "runNodejsScriptsFromTheCommandLine": "Run Node.js scripts from the command line",
-            "howToReadEnvironmentVariablesFromNodejs": "How to read environment variables from Node.js",
-            "howToUseTheNodejsRepl": "How to use the Node.js REPL",
-            "outputToTheCommandLineUsingNodejs": "Output to the command line using Node.js",
-            "acceptInputFromTheCommandLineInNodejs": "Accept input from the command line in Node.js"
-          }
-        }
-      },
-      "buttons": {
-        "toggleLanguage": "Toggle Language",
-        "toggleTheme": "Toggle dark/light mode"
-      }
-    },
-    "navigation": {
-      "about": {
-        "links": {
-          "governance": "Project Governance",
-          "releases": "Previous Releases",
-          "security": "Security Reporting"
-        }
-      },
-      "docs": {
-        "links": {
-          "es6": "ES6 and beyond",
-          "apiLts": "{fullLtsNodeVersion} API <graySpan>LTS</graySpan>",
-          "apiCurrent": "{fullCurrentNodeVersion} API",
-          "guides": "Guides <graySpan>ARCHIVED</graySpan>",
-          "dependencies": "Dependencies"
-        }
-      },
-      "getInvolved": {
-        "links": {
-          "collabSummit": "Collab Summit",
-          "contribute": "Contribute",
-          "codeOfConduct": "Code of Conduct"
-        }
-      }
-    },
-    "downloadList": {
-      "links": {
-        "previousReleases": "Previous Releases",
-        "packageManager": "Installing Node.js via package manager",
-        "shaSums": {
-          "title": "Signed SHASUMS for release files",
-          "howToVerify": " (How to verify)"
-        },
-        "allDownloads": "All download options",
-        "nightlyReleases": "Nightly builds",
-        "unofficialBuilds": "Unofficial builds",
-        "buildingFromSource": "Building Node.js from source on supported platforms",
-        "installingOnLinux": "Installing Node.js via binary archive",
-        "installingOnWsl": "Install on Windows Subsystem for Linux (WSL)"
-      }
-    },
-    "downloadReleasesTable": {
-      "changelog": "Changelog",
-      "releases": "Releases",
-      "docs": "Docs"
-    },
-    "pagination": {
-      "next": "Newer | ",
-      "previous": "Older"
-    },
-    "common": {
-      "breadcrumbs": {
-        "navigateToHome": "Navigate to Home"
-      },
-      "crossLink": {
-        "previous": "Prev",
-        "next": "Next"
-      },
-      "codebox": {
-        "copied": "Copied to clipboard!"
-      },
-      "pagination": {
-        "prev": "Previous",
-        "prevAriaLabel": "Previous page",
-        "next": "Next",
-        "nextAriaLabel": "Next page",
-        "defaultLabel": "Pagination",
-        "pageLabel": "Go to page {pageNumber}"
-      },
-      "languageDropdown": {
-        "label": "Choose Language"
-      },
-      "card": {
-        "announcement": "Announcements",
-        "release": "Releases",
-        "vulnerability": "Vulnerabilities"
-      }
-    },
-    "metabar": {
-      "lastUpdated": "Last Updated",
-      "readingTime": "Reading Time",
-      "addedIn": "Added In",
-      "author": "Author",
-      "authors": "Authors",
-      "contribute": "Contribute",
-      "contributeText": "Edit this page",
-      "viewAs": "View as",
-      "tableOfContents": "Table of Contents"
-    },
-    "api": {
-      "jsonLink": {
-        "title": "View as JSON"
-      },
-      "sourceLink": "Source Code:"
-    },
-    "home": {
-      "homeDownloadButton": {
-        "download": "{version} {isLts, select, true {LTS} other {Current}}",
-        "tagline": "{isLts, select, true {Recommended For Most Users} other {Latest Features}}",
-        "changelog": "Changelog",
-        "otherDownloads": "Other Downloads",
-        "apiDocs": "API Docs"
-      }
-    },
-    "downloads": {
-      "changelogModal": {
-        "startContributing": "Start Contributing"
-      }
-    }
-  },
-  "layouts": {
-    "blogPost": {
-      "author": {
-        "byLine": "{author, select, null {} other {By {author}, }}"
-      }
-    },
-    "blogIndex": {
-      "currentYear": "News from {year}"
-    }
-  },
-  "pages": {
-    "404": {
-      "title": "404: Page could not be found",
-      "description": "ENOENT: no such file or directory"
-    }
-  }
-}
diff --git a/i18n/locales/ko.json b/i18n/locales/ko.json
deleted file mode 100644
index 7b816f25da0c6..0000000000000
--- a/i18n/locales/ko.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "components": {
-    "footer": {
-      "scrollToTop": {
-        "button": "Scroll to top"
-      },
-      "links": {
-        "trademarkPolicy": "Trademark Policy",
-        "privacyPolicy": "Privacy Policy",
-        "codeOfConduct": "Code of Conduct",
-        "security": "Security Policy",
-        "openJS": "OpenJS Foundation"
-      }
-    },
-    "header": {
-      "links": {
-        "about": "About",
-        "download": "Download",
-        "docs": "Docs",
-        "getInvolved": "Get Involved",
-        "security": "Security",
-        "certification": "Certification",
-        "blog": "News",
-        "learn": {
-          "title": "Learn",
-          "gettingStarted": {
-            "title": "Getting Started",
-            "introductionToNodejs": "Introduction to Node.js",
-            "howToInstallNodejs": "How to install Node.js",
-            "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",
-            "ecmascript2015Es6AndBeyond": "ECMAScript 2015 (ES6) and beyond",
-            "nodejsTheDifferenceBetweenDevelopmentAndProduction": "Node.js, the difference between development and production",
-            "nodejsWithTypescript": "Node.js with TypeScript",
-            "nodejsWithWebassembly": "Node.js with WebAssembly"
-          },
-          "asynchronousWork": {
-            "title": "Asynchronous Work",
-            "asynchronousFlowControl": "Asynchronous flow control",
-            "overviewOfBlockingVsNonBlocking": "Overview of Blocking vs Non-Blocking",
-            "javascriptAsynchronousProgrammingAndCallbacks": "JavaScript Asynchronous Programming and Callbacks",
-            "discoverJavaScriptTimers": "Discover JavaScript Timers",
-            "understandingProcessnexttick": "Understanding process.nextTick()",
-            "understandingSetimmediate": "Understanding setImmediate()",
-            "theNodejsEventEmitter": "The Node.js Event emitter"
-          },
-          "manipulatingFiles": {
-            "title": "Manipulating Files",
-            "nodejsFileStats": "Node.js file stats",
-            "nodejsFilePaths": "Node.js File Paths",
-            "workingWithFileDescriptorsInNodejs": "Working with file descriptors in Node.js",
-            "readingFilesWithNodejs": "Reading files with Node.js",
-            "writingFilesWithNodejs": "Writing files with Node.js",
-            "workingWithFoldersInNodejs": "Working with folders in Node.js"
-          },
-          "commandLine": {
-            "title": "Command Line",
-            "runNodejsScriptsFromTheCommandLine": "Run Node.js scripts from the command line",
-            "howToReadEnvironmentVariablesFromNodejs": "How to read environment variables from Node.js",
-            "howToUseTheNodejsRepl": "How to use the Node.js REPL",
-            "outputToTheCommandLineUsingNodejs": "Output to the command line using Node.js",
-            "acceptInputFromTheCommandLineInNodejs": "Accept input from the command line in Node.js"
-          }
-        }
-      },
-      "buttons": {
-        "toggleLanguage": "Toggle Language",
-        "toggleTheme": "Toggle dark/light mode"
-      }
-    },
-    "navigation": {
-      "about": {
-        "links": {
-          "governance": "Project Governance",
-          "releases": "Previous Releases",
-          "security": "Security Reporting"
-        }
-      },
-      "docs": {
-        "links": {
-          "es6": "ES6 and beyond",
-          "apiLts": "{fullLtsNodeVersion} API <graySpan>LTS</graySpan>",
-          "apiCurrent": "{fullCurrentNodeVersion} API",
-          "guides": "Guides <graySpan>ARCHIVED</graySpan>",
-          "dependencies": "Dependencies"
-        }
-      },
-      "getInvolved": {
-        "links": {
-          "collabSummit": "Collab Summit",
-          "contribute": "Contribute",
-          "codeOfConduct": "Code of Conduct"
-        }
-      }
-    },
-    "downloadList": {
-      "links": {
-        "previousReleases": "Previous Releases",
-        "packageManager": "Installing Node.js via package manager",
-        "shaSums": {
-          "title": "Signed SHASUMS for release files",
-          "howToVerify": " (How to verify)"
-        },
-        "allDownloads": "All download options",
-        "nightlyReleases": "Nightly builds",
-        "unofficialBuilds": "Unofficial builds",
-        "buildingFromSource": "Building Node.js from source on supported platforms",
-        "installingOnLinux": "Installing Node.js via binary archive",
-        "installingOnWsl": "Install on Windows Subsystem for Linux (WSL)"
-      }
-    },
-    "downloadReleasesTable": {
-      "changelog": "Changelog",
-      "releases": "Releases",
-      "docs": "Docs"
-    },
-    "pagination": {
-      "next": "Newer | ",
-      "previous": "Older"
-    },
-    "common": {
-      "breadcrumbs": {
-        "navigateToHome": "Navigate to Home"
-      },
-      "crossLink": {
-        "previous": "Prev",
-        "next": "Next"
-      },
-      "codebox": {
-        "copied": "Copied to clipboard!"
-      },
-      "pagination": {
-        "prev": "Previous",
-        "prevAriaLabel": "Previous page",
-        "next": "Next",
-        "nextAriaLabel": "Next page",
-        "defaultLabel": "Pagination",
-        "pageLabel": "Go to page {pageNumber}"
-      },
-      "languageDropdown": {
-        "label": "Choose Language"
-      },
-      "card": {
-        "announcement": "Announcements",
-        "release": "Releases",
-        "vulnerability": "Vulnerabilities"
-      }
-    },
-    "metabar": {
-      "lastUpdated": "Last Updated",
-      "readingTime": "Reading Time",
-      "addedIn": "Added In",
-      "author": "Author",
-      "authors": "Authors",
-      "contribute": "Contribute",
-      "contributeText": "Edit this page",
-      "viewAs": "View as",
-      "tableOfContents": "Table of Contents"
-    },
-    "api": {
-      "jsonLink": {
-        "title": "View as JSON"
-      },
-      "sourceLink": "Source Code:"
-    },
-    "home": {
-      "homeDownloadButton": {
-        "download": "{version} {isLts, select, true {LTS} other {Current}}",
-        "tagline": "{isLts, select, true {Recommended For Most Users} other {Latest Features}}",
-        "changelog": "Changelog",
-        "otherDownloads": "Other Downloads",
-        "apiDocs": "API Docs"
-      }
-    },
-    "downloads": {
-      "changelogModal": {
-        "startContributing": "Start Contributing"
-      }
-    }
-  },
-  "layouts": {
-    "blogPost": {
-      "author": {
-        "byLine": "{author, select, null {} other {By {author}, }}"
-      }
-    },
-    "blogIndex": {
-      "currentYear": "News from {year}"
-    }
-  },
-  "pages": {
-    "404": {
-      "title": "404: Page could not be found",
-      "description": "ENOENT: no such file or directory"
-    }
-  }
-}
diff --git a/i18n/locales/pt-br.json b/i18n/locales/pt-br.json
deleted file mode 100644
index 7b816f25da0c6..0000000000000
--- a/i18n/locales/pt-br.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "components": {
-    "footer": {
-      "scrollToTop": {
-        "button": "Scroll to top"
-      },
-      "links": {
-        "trademarkPolicy": "Trademark Policy",
-        "privacyPolicy": "Privacy Policy",
-        "codeOfConduct": "Code of Conduct",
-        "security": "Security Policy",
-        "openJS": "OpenJS Foundation"
-      }
-    },
-    "header": {
-      "links": {
-        "about": "About",
-        "download": "Download",
-        "docs": "Docs",
-        "getInvolved": "Get Involved",
-        "security": "Security",
-        "certification": "Certification",
-        "blog": "News",
-        "learn": {
-          "title": "Learn",
-          "gettingStarted": {
-            "title": "Getting Started",
-            "introductionToNodejs": "Introduction to Node.js",
-            "howToInstallNodejs": "How to install Node.js",
-            "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",
-            "ecmascript2015Es6AndBeyond": "ECMAScript 2015 (ES6) and beyond",
-            "nodejsTheDifferenceBetweenDevelopmentAndProduction": "Node.js, the difference between development and production",
-            "nodejsWithTypescript": "Node.js with TypeScript",
-            "nodejsWithWebassembly": "Node.js with WebAssembly"
-          },
-          "asynchronousWork": {
-            "title": "Asynchronous Work",
-            "asynchronousFlowControl": "Asynchronous flow control",
-            "overviewOfBlockingVsNonBlocking": "Overview of Blocking vs Non-Blocking",
-            "javascriptAsynchronousProgrammingAndCallbacks": "JavaScript Asynchronous Programming and Callbacks",
-            "discoverJavaScriptTimers": "Discover JavaScript Timers",
-            "understandingProcessnexttick": "Understanding process.nextTick()",
-            "understandingSetimmediate": "Understanding setImmediate()",
-            "theNodejsEventEmitter": "The Node.js Event emitter"
-          },
-          "manipulatingFiles": {
-            "title": "Manipulating Files",
-            "nodejsFileStats": "Node.js file stats",
-            "nodejsFilePaths": "Node.js File Paths",
-            "workingWithFileDescriptorsInNodejs": "Working with file descriptors in Node.js",
-            "readingFilesWithNodejs": "Reading files with Node.js",
-            "writingFilesWithNodejs": "Writing files with Node.js",
-            "workingWithFoldersInNodejs": "Working with folders in Node.js"
-          },
-          "commandLine": {
-            "title": "Command Line",
-            "runNodejsScriptsFromTheCommandLine": "Run Node.js scripts from the command line",
-            "howToReadEnvironmentVariablesFromNodejs": "How to read environment variables from Node.js",
-            "howToUseTheNodejsRepl": "How to use the Node.js REPL",
-            "outputToTheCommandLineUsingNodejs": "Output to the command line using Node.js",
-            "acceptInputFromTheCommandLineInNodejs": "Accept input from the command line in Node.js"
-          }
-        }
-      },
-      "buttons": {
-        "toggleLanguage": "Toggle Language",
-        "toggleTheme": "Toggle dark/light mode"
-      }
-    },
-    "navigation": {
-      "about": {
-        "links": {
-          "governance": "Project Governance",
-          "releases": "Previous Releases",
-          "security": "Security Reporting"
-        }
-      },
-      "docs": {
-        "links": {
-          "es6": "ES6 and beyond",
-          "apiLts": "{fullLtsNodeVersion} API <graySpan>LTS</graySpan>",
-          "apiCurrent": "{fullCurrentNodeVersion} API",
-          "guides": "Guides <graySpan>ARCHIVED</graySpan>",
-          "dependencies": "Dependencies"
-        }
-      },
-      "getInvolved": {
-        "links": {
-          "collabSummit": "Collab Summit",
-          "contribute": "Contribute",
-          "codeOfConduct": "Code of Conduct"
-        }
-      }
-    },
-    "downloadList": {
-      "links": {
-        "previousReleases": "Previous Releases",
-        "packageManager": "Installing Node.js via package manager",
-        "shaSums": {
-          "title": "Signed SHASUMS for release files",
-          "howToVerify": " (How to verify)"
-        },
-        "allDownloads": "All download options",
-        "nightlyReleases": "Nightly builds",
-        "unofficialBuilds": "Unofficial builds",
-        "buildingFromSource": "Building Node.js from source on supported platforms",
-        "installingOnLinux": "Installing Node.js via binary archive",
-        "installingOnWsl": "Install on Windows Subsystem for Linux (WSL)"
-      }
-    },
-    "downloadReleasesTable": {
-      "changelog": "Changelog",
-      "releases": "Releases",
-      "docs": "Docs"
-    },
-    "pagination": {
-      "next": "Newer | ",
-      "previous": "Older"
-    },
-    "common": {
-      "breadcrumbs": {
-        "navigateToHome": "Navigate to Home"
-      },
-      "crossLink": {
-        "previous": "Prev",
-        "next": "Next"
-      },
-      "codebox": {
-        "copied": "Copied to clipboard!"
-      },
-      "pagination": {
-        "prev": "Previous",
-        "prevAriaLabel": "Previous page",
-        "next": "Next",
-        "nextAriaLabel": "Next page",
-        "defaultLabel": "Pagination",
-        "pageLabel": "Go to page {pageNumber}"
-      },
-      "languageDropdown": {
-        "label": "Choose Language"
-      },
-      "card": {
-        "announcement": "Announcements",
-        "release": "Releases",
-        "vulnerability": "Vulnerabilities"
-      }
-    },
-    "metabar": {
-      "lastUpdated": "Last Updated",
-      "readingTime": "Reading Time",
-      "addedIn": "Added In",
-      "author": "Author",
-      "authors": "Authors",
-      "contribute": "Contribute",
-      "contributeText": "Edit this page",
-      "viewAs": "View as",
-      "tableOfContents": "Table of Contents"
-    },
-    "api": {
-      "jsonLink": {
-        "title": "View as JSON"
-      },
-      "sourceLink": "Source Code:"
-    },
-    "home": {
-      "homeDownloadButton": {
-        "download": "{version} {isLts, select, true {LTS} other {Current}}",
-        "tagline": "{isLts, select, true {Recommended For Most Users} other {Latest Features}}",
-        "changelog": "Changelog",
-        "otherDownloads": "Other Downloads",
-        "apiDocs": "API Docs"
-      }
-    },
-    "downloads": {
-      "changelogModal": {
-        "startContributing": "Start Contributing"
-      }
-    }
-  },
-  "layouts": {
-    "blogPost": {
-      "author": {
-        "byLine": "{author, select, null {} other {By {author}, }}"
-      }
-    },
-    "blogIndex": {
-      "currentYear": "News from {year}"
-    }
-  },
-  "pages": {
-    "404": {
-      "title": "404: Page could not be found",
-      "description": "ENOENT: no such file or directory"
-    }
-  }
-}
diff --git a/i18n/locales/ru.json b/i18n/locales/ru.json
deleted file mode 100644
index 7b816f25da0c6..0000000000000
--- a/i18n/locales/ru.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "components": {
-    "footer": {
-      "scrollToTop": {
-        "button": "Scroll to top"
-      },
-      "links": {
-        "trademarkPolicy": "Trademark Policy",
-        "privacyPolicy": "Privacy Policy",
-        "codeOfConduct": "Code of Conduct",
-        "security": "Security Policy",
-        "openJS": "OpenJS Foundation"
-      }
-    },
-    "header": {
-      "links": {
-        "about": "About",
-        "download": "Download",
-        "docs": "Docs",
-        "getInvolved": "Get Involved",
-        "security": "Security",
-        "certification": "Certification",
-        "blog": "News",
-        "learn": {
-          "title": "Learn",
-          "gettingStarted": {
-            "title": "Getting Started",
-            "introductionToNodejs": "Introduction to Node.js",
-            "howToInstallNodejs": "How to install Node.js",
-            "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",
-            "ecmascript2015Es6AndBeyond": "ECMAScript 2015 (ES6) and beyond",
-            "nodejsTheDifferenceBetweenDevelopmentAndProduction": "Node.js, the difference between development and production",
-            "nodejsWithTypescript": "Node.js with TypeScript",
-            "nodejsWithWebassembly": "Node.js with WebAssembly"
-          },
-          "asynchronousWork": {
-            "title": "Asynchronous Work",
-            "asynchronousFlowControl": "Asynchronous flow control",
-            "overviewOfBlockingVsNonBlocking": "Overview of Blocking vs Non-Blocking",
-            "javascriptAsynchronousProgrammingAndCallbacks": "JavaScript Asynchronous Programming and Callbacks",
-            "discoverJavaScriptTimers": "Discover JavaScript Timers",
-            "understandingProcessnexttick": "Understanding process.nextTick()",
-            "understandingSetimmediate": "Understanding setImmediate()",
-            "theNodejsEventEmitter": "The Node.js Event emitter"
-          },
-          "manipulatingFiles": {
-            "title": "Manipulating Files",
-            "nodejsFileStats": "Node.js file stats",
-            "nodejsFilePaths": "Node.js File Paths",
-            "workingWithFileDescriptorsInNodejs": "Working with file descriptors in Node.js",
-            "readingFilesWithNodejs": "Reading files with Node.js",
-            "writingFilesWithNodejs": "Writing files with Node.js",
-            "workingWithFoldersInNodejs": "Working with folders in Node.js"
-          },
-          "commandLine": {
-            "title": "Command Line",
-            "runNodejsScriptsFromTheCommandLine": "Run Node.js scripts from the command line",
-            "howToReadEnvironmentVariablesFromNodejs": "How to read environment variables from Node.js",
-            "howToUseTheNodejsRepl": "How to use the Node.js REPL",
-            "outputToTheCommandLineUsingNodejs": "Output to the command line using Node.js",
-            "acceptInputFromTheCommandLineInNodejs": "Accept input from the command line in Node.js"
-          }
-        }
-      },
-      "buttons": {
-        "toggleLanguage": "Toggle Language",
-        "toggleTheme": "Toggle dark/light mode"
-      }
-    },
-    "navigation": {
-      "about": {
-        "links": {
-          "governance": "Project Governance",
-          "releases": "Previous Releases",
-          "security": "Security Reporting"
-        }
-      },
-      "docs": {
-        "links": {
-          "es6": "ES6 and beyond",
-          "apiLts": "{fullLtsNodeVersion} API <graySpan>LTS</graySpan>",
-          "apiCurrent": "{fullCurrentNodeVersion} API",
-          "guides": "Guides <graySpan>ARCHIVED</graySpan>",
-          "dependencies": "Dependencies"
-        }
-      },
-      "getInvolved": {
-        "links": {
-          "collabSummit": "Collab Summit",
-          "contribute": "Contribute",
-          "codeOfConduct": "Code of Conduct"
-        }
-      }
-    },
-    "downloadList": {
-      "links": {
-        "previousReleases": "Previous Releases",
-        "packageManager": "Installing Node.js via package manager",
-        "shaSums": {
-          "title": "Signed SHASUMS for release files",
-          "howToVerify": " (How to verify)"
-        },
-        "allDownloads": "All download options",
-        "nightlyReleases": "Nightly builds",
-        "unofficialBuilds": "Unofficial builds",
-        "buildingFromSource": "Building Node.js from source on supported platforms",
-        "installingOnLinux": "Installing Node.js via binary archive",
-        "installingOnWsl": "Install on Windows Subsystem for Linux (WSL)"
-      }
-    },
-    "downloadReleasesTable": {
-      "changelog": "Changelog",
-      "releases": "Releases",
-      "docs": "Docs"
-    },
-    "pagination": {
-      "next": "Newer | ",
-      "previous": "Older"
-    },
-    "common": {
-      "breadcrumbs": {
-        "navigateToHome": "Navigate to Home"
-      },
-      "crossLink": {
-        "previous": "Prev",
-        "next": "Next"
-      },
-      "codebox": {
-        "copied": "Copied to clipboard!"
-      },
-      "pagination": {
-        "prev": "Previous",
-        "prevAriaLabel": "Previous page",
-        "next": "Next",
-        "nextAriaLabel": "Next page",
-        "defaultLabel": "Pagination",
-        "pageLabel": "Go to page {pageNumber}"
-      },
-      "languageDropdown": {
-        "label": "Choose Language"
-      },
-      "card": {
-        "announcement": "Announcements",
-        "release": "Releases",
-        "vulnerability": "Vulnerabilities"
-      }
-    },
-    "metabar": {
-      "lastUpdated": "Last Updated",
-      "readingTime": "Reading Time",
-      "addedIn": "Added In",
-      "author": "Author",
-      "authors": "Authors",
-      "contribute": "Contribute",
-      "contributeText": "Edit this page",
-      "viewAs": "View as",
-      "tableOfContents": "Table of Contents"
-    },
-    "api": {
-      "jsonLink": {
-        "title": "View as JSON"
-      },
-      "sourceLink": "Source Code:"
-    },
-    "home": {
-      "homeDownloadButton": {
-        "download": "{version} {isLts, select, true {LTS} other {Current}}",
-        "tagline": "{isLts, select, true {Recommended For Most Users} other {Latest Features}}",
-        "changelog": "Changelog",
-        "otherDownloads": "Other Downloads",
-        "apiDocs": "API Docs"
-      }
-    },
-    "downloads": {
-      "changelogModal": {
-        "startContributing": "Start Contributing"
-      }
-    }
-  },
-  "layouts": {
-    "blogPost": {
-      "author": {
-        "byLine": "{author, select, null {} other {By {author}, }}"
-      }
-    },
-    "blogIndex": {
-      "currentYear": "News from {year}"
-    }
-  },
-  "pages": {
-    "404": {
-      "title": "404: Page could not be found",
-      "description": "ENOENT: no such file or directory"
-    }
-  }
-}
diff --git a/i18n/locales/tr.json b/i18n/locales/tr.json
deleted file mode 100644
index 7b816f25da0c6..0000000000000
--- a/i18n/locales/tr.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "components": {
-    "footer": {
-      "scrollToTop": {
-        "button": "Scroll to top"
-      },
-      "links": {
-        "trademarkPolicy": "Trademark Policy",
-        "privacyPolicy": "Privacy Policy",
-        "codeOfConduct": "Code of Conduct",
-        "security": "Security Policy",
-        "openJS": "OpenJS Foundation"
-      }
-    },
-    "header": {
-      "links": {
-        "about": "About",
-        "download": "Download",
-        "docs": "Docs",
-        "getInvolved": "Get Involved",
-        "security": "Security",
-        "certification": "Certification",
-        "blog": "News",
-        "learn": {
-          "title": "Learn",
-          "gettingStarted": {
-            "title": "Getting Started",
-            "introductionToNodejs": "Introduction to Node.js",
-            "howToInstallNodejs": "How to install Node.js",
-            "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",
-            "ecmascript2015Es6AndBeyond": "ECMAScript 2015 (ES6) and beyond",
-            "nodejsTheDifferenceBetweenDevelopmentAndProduction": "Node.js, the difference between development and production",
-            "nodejsWithTypescript": "Node.js with TypeScript",
-            "nodejsWithWebassembly": "Node.js with WebAssembly"
-          },
-          "asynchronousWork": {
-            "title": "Asynchronous Work",
-            "asynchronousFlowControl": "Asynchronous flow control",
-            "overviewOfBlockingVsNonBlocking": "Overview of Blocking vs Non-Blocking",
-            "javascriptAsynchronousProgrammingAndCallbacks": "JavaScript Asynchronous Programming and Callbacks",
-            "discoverJavaScriptTimers": "Discover JavaScript Timers",
-            "understandingProcessnexttick": "Understanding process.nextTick()",
-            "understandingSetimmediate": "Understanding setImmediate()",
-            "theNodejsEventEmitter": "The Node.js Event emitter"
-          },
-          "manipulatingFiles": {
-            "title": "Manipulating Files",
-            "nodejsFileStats": "Node.js file stats",
-            "nodejsFilePaths": "Node.js File Paths",
-            "workingWithFileDescriptorsInNodejs": "Working with file descriptors in Node.js",
-            "readingFilesWithNodejs": "Reading files with Node.js",
-            "writingFilesWithNodejs": "Writing files with Node.js",
-            "workingWithFoldersInNodejs": "Working with folders in Node.js"
-          },
-          "commandLine": {
-            "title": "Command Line",
-            "runNodejsScriptsFromTheCommandLine": "Run Node.js scripts from the command line",
-            "howToReadEnvironmentVariablesFromNodejs": "How to read environment variables from Node.js",
-            "howToUseTheNodejsRepl": "How to use the Node.js REPL",
-            "outputToTheCommandLineUsingNodejs": "Output to the command line using Node.js",
-            "acceptInputFromTheCommandLineInNodejs": "Accept input from the command line in Node.js"
-          }
-        }
-      },
-      "buttons": {
-        "toggleLanguage": "Toggle Language",
-        "toggleTheme": "Toggle dark/light mode"
-      }
-    },
-    "navigation": {
-      "about": {
-        "links": {
-          "governance": "Project Governance",
-          "releases": "Previous Releases",
-          "security": "Security Reporting"
-        }
-      },
-      "docs": {
-        "links": {
-          "es6": "ES6 and beyond",
-          "apiLts": "{fullLtsNodeVersion} API <graySpan>LTS</graySpan>",
-          "apiCurrent": "{fullCurrentNodeVersion} API",
-          "guides": "Guides <graySpan>ARCHIVED</graySpan>",
-          "dependencies": "Dependencies"
-        }
-      },
-      "getInvolved": {
-        "links": {
-          "collabSummit": "Collab Summit",
-          "contribute": "Contribute",
-          "codeOfConduct": "Code of Conduct"
-        }
-      }
-    },
-    "downloadList": {
-      "links": {
-        "previousReleases": "Previous Releases",
-        "packageManager": "Installing Node.js via package manager",
-        "shaSums": {
-          "title": "Signed SHASUMS for release files",
-          "howToVerify": " (How to verify)"
-        },
-        "allDownloads": "All download options",
-        "nightlyReleases": "Nightly builds",
-        "unofficialBuilds": "Unofficial builds",
-        "buildingFromSource": "Building Node.js from source on supported platforms",
-        "installingOnLinux": "Installing Node.js via binary archive",
-        "installingOnWsl": "Install on Windows Subsystem for Linux (WSL)"
-      }
-    },
-    "downloadReleasesTable": {
-      "changelog": "Changelog",
-      "releases": "Releases",
-      "docs": "Docs"
-    },
-    "pagination": {
-      "next": "Newer | ",
-      "previous": "Older"
-    },
-    "common": {
-      "breadcrumbs": {
-        "navigateToHome": "Navigate to Home"
-      },
-      "crossLink": {
-        "previous": "Prev",
-        "next": "Next"
-      },
-      "codebox": {
-        "copied": "Copied to clipboard!"
-      },
-      "pagination": {
-        "prev": "Previous",
-        "prevAriaLabel": "Previous page",
-        "next": "Next",
-        "nextAriaLabel": "Next page",
-        "defaultLabel": "Pagination",
-        "pageLabel": "Go to page {pageNumber}"
-      },
-      "languageDropdown": {
-        "label": "Choose Language"
-      },
-      "card": {
-        "announcement": "Announcements",
-        "release": "Releases",
-        "vulnerability": "Vulnerabilities"
-      }
-    },
-    "metabar": {
-      "lastUpdated": "Last Updated",
-      "readingTime": "Reading Time",
-      "addedIn": "Added In",
-      "author": "Author",
-      "authors": "Authors",
-      "contribute": "Contribute",
-      "contributeText": "Edit this page",
-      "viewAs": "View as",
-      "tableOfContents": "Table of Contents"
-    },
-    "api": {
-      "jsonLink": {
-        "title": "View as JSON"
-      },
-      "sourceLink": "Source Code:"
-    },
-    "home": {
-      "homeDownloadButton": {
-        "download": "{version} {isLts, select, true {LTS} other {Current}}",
-        "tagline": "{isLts, select, true {Recommended For Most Users} other {Latest Features}}",
-        "changelog": "Changelog",
-        "otherDownloads": "Other Downloads",
-        "apiDocs": "API Docs"
-      }
-    },
-    "downloads": {
-      "changelogModal": {
-        "startContributing": "Start Contributing"
-      }
-    }
-  },
-  "layouts": {
-    "blogPost": {
-      "author": {
-        "byLine": "{author, select, null {} other {By {author}, }}"
-      }
-    },
-    "blogIndex": {
-      "currentYear": "News from {year}"
-    }
-  },
-  "pages": {
-    "404": {
-      "title": "404: Page could not be found",
-      "description": "ENOENT: no such file or directory"
-    }
-  }
-}
diff --git a/i18n/locales/uk.json b/i18n/locales/uk.json
deleted file mode 100644
index 7b816f25da0c6..0000000000000
--- a/i18n/locales/uk.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "components": {
-    "footer": {
-      "scrollToTop": {
-        "button": "Scroll to top"
-      },
-      "links": {
-        "trademarkPolicy": "Trademark Policy",
-        "privacyPolicy": "Privacy Policy",
-        "codeOfConduct": "Code of Conduct",
-        "security": "Security Policy",
-        "openJS": "OpenJS Foundation"
-      }
-    },
-    "header": {
-      "links": {
-        "about": "About",
-        "download": "Download",
-        "docs": "Docs",
-        "getInvolved": "Get Involved",
-        "security": "Security",
-        "certification": "Certification",
-        "blog": "News",
-        "learn": {
-          "title": "Learn",
-          "gettingStarted": {
-            "title": "Getting Started",
-            "introductionToNodejs": "Introduction to Node.js",
-            "howToInstallNodejs": "How to install Node.js",
-            "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",
-            "ecmascript2015Es6AndBeyond": "ECMAScript 2015 (ES6) and beyond",
-            "nodejsTheDifferenceBetweenDevelopmentAndProduction": "Node.js, the difference between development and production",
-            "nodejsWithTypescript": "Node.js with TypeScript",
-            "nodejsWithWebassembly": "Node.js with WebAssembly"
-          },
-          "asynchronousWork": {
-            "title": "Asynchronous Work",
-            "asynchronousFlowControl": "Asynchronous flow control",
-            "overviewOfBlockingVsNonBlocking": "Overview of Blocking vs Non-Blocking",
-            "javascriptAsynchronousProgrammingAndCallbacks": "JavaScript Asynchronous Programming and Callbacks",
-            "discoverJavaScriptTimers": "Discover JavaScript Timers",
-            "understandingProcessnexttick": "Understanding process.nextTick()",
-            "understandingSetimmediate": "Understanding setImmediate()",
-            "theNodejsEventEmitter": "The Node.js Event emitter"
-          },
-          "manipulatingFiles": {
-            "title": "Manipulating Files",
-            "nodejsFileStats": "Node.js file stats",
-            "nodejsFilePaths": "Node.js File Paths",
-            "workingWithFileDescriptorsInNodejs": "Working with file descriptors in Node.js",
-            "readingFilesWithNodejs": "Reading files with Node.js",
-            "writingFilesWithNodejs": "Writing files with Node.js",
-            "workingWithFoldersInNodejs": "Working with folders in Node.js"
-          },
-          "commandLine": {
-            "title": "Command Line",
-            "runNodejsScriptsFromTheCommandLine": "Run Node.js scripts from the command line",
-            "howToReadEnvironmentVariablesFromNodejs": "How to read environment variables from Node.js",
-            "howToUseTheNodejsRepl": "How to use the Node.js REPL",
-            "outputToTheCommandLineUsingNodejs": "Output to the command line using Node.js",
-            "acceptInputFromTheCommandLineInNodejs": "Accept input from the command line in Node.js"
-          }
-        }
-      },
-      "buttons": {
-        "toggleLanguage": "Toggle Language",
-        "toggleTheme": "Toggle dark/light mode"
-      }
-    },
-    "navigation": {
-      "about": {
-        "links": {
-          "governance": "Project Governance",
-          "releases": "Previous Releases",
-          "security": "Security Reporting"
-        }
-      },
-      "docs": {
-        "links": {
-          "es6": "ES6 and beyond",
-          "apiLts": "{fullLtsNodeVersion} API <graySpan>LTS</graySpan>",
-          "apiCurrent": "{fullCurrentNodeVersion} API",
-          "guides": "Guides <graySpan>ARCHIVED</graySpan>",
-          "dependencies": "Dependencies"
-        }
-      },
-      "getInvolved": {
-        "links": {
-          "collabSummit": "Collab Summit",
-          "contribute": "Contribute",
-          "codeOfConduct": "Code of Conduct"
-        }
-      }
-    },
-    "downloadList": {
-      "links": {
-        "previousReleases": "Previous Releases",
-        "packageManager": "Installing Node.js via package manager",
-        "shaSums": {
-          "title": "Signed SHASUMS for release files",
-          "howToVerify": " (How to verify)"
-        },
-        "allDownloads": "All download options",
-        "nightlyReleases": "Nightly builds",
-        "unofficialBuilds": "Unofficial builds",
-        "buildingFromSource": "Building Node.js from source on supported platforms",
-        "installingOnLinux": "Installing Node.js via binary archive",
-        "installingOnWsl": "Install on Windows Subsystem for Linux (WSL)"
-      }
-    },
-    "downloadReleasesTable": {
-      "changelog": "Changelog",
-      "releases": "Releases",
-      "docs": "Docs"
-    },
-    "pagination": {
-      "next": "Newer | ",
-      "previous": "Older"
-    },
-    "common": {
-      "breadcrumbs": {
-        "navigateToHome": "Navigate to Home"
-      },
-      "crossLink": {
-        "previous": "Prev",
-        "next": "Next"
-      },
-      "codebox": {
-        "copied": "Copied to clipboard!"
-      },
-      "pagination": {
-        "prev": "Previous",
-        "prevAriaLabel": "Previous page",
-        "next": "Next",
-        "nextAriaLabel": "Next page",
-        "defaultLabel": "Pagination",
-        "pageLabel": "Go to page {pageNumber}"
-      },
-      "languageDropdown": {
-        "label": "Choose Language"
-      },
-      "card": {
-        "announcement": "Announcements",
-        "release": "Releases",
-        "vulnerability": "Vulnerabilities"
-      }
-    },
-    "metabar": {
-      "lastUpdated": "Last Updated",
-      "readingTime": "Reading Time",
-      "addedIn": "Added In",
-      "author": "Author",
-      "authors": "Authors",
-      "contribute": "Contribute",
-      "contributeText": "Edit this page",
-      "viewAs": "View as",
-      "tableOfContents": "Table of Contents"
-    },
-    "api": {
-      "jsonLink": {
-        "title": "View as JSON"
-      },
-      "sourceLink": "Source Code:"
-    },
-    "home": {
-      "homeDownloadButton": {
-        "download": "{version} {isLts, select, true {LTS} other {Current}}",
-        "tagline": "{isLts, select, true {Recommended For Most Users} other {Latest Features}}",
-        "changelog": "Changelog",
-        "otherDownloads": "Other Downloads",
-        "apiDocs": "API Docs"
-      }
-    },
-    "downloads": {
-      "changelogModal": {
-        "startContributing": "Start Contributing"
-      }
-    }
-  },
-  "layouts": {
-    "blogPost": {
-      "author": {
-        "byLine": "{author, select, null {} other {By {author}, }}"
-      }
-    },
-    "blogIndex": {
-      "currentYear": "News from {year}"
-    }
-  },
-  "pages": {
-    "404": {
-      "title": "404: Page could not be found",
-      "description": "ENOENT: no such file or directory"
-    }
-  }
-}
diff --git a/i18n/locales/zh-cn.json b/i18n/locales/zh-cn.json
deleted file mode 100644
index 7b816f25da0c6..0000000000000
--- a/i18n/locales/zh-cn.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "components": {
-    "footer": {
-      "scrollToTop": {
-        "button": "Scroll to top"
-      },
-      "links": {
-        "trademarkPolicy": "Trademark Policy",
-        "privacyPolicy": "Privacy Policy",
-        "codeOfConduct": "Code of Conduct",
-        "security": "Security Policy",
-        "openJS": "OpenJS Foundation"
-      }
-    },
-    "header": {
-      "links": {
-        "about": "About",
-        "download": "Download",
-        "docs": "Docs",
-        "getInvolved": "Get Involved",
-        "security": "Security",
-        "certification": "Certification",
-        "blog": "News",
-        "learn": {
-          "title": "Learn",
-          "gettingStarted": {
-            "title": "Getting Started",
-            "introductionToNodejs": "Introduction to Node.js",
-            "howToInstallNodejs": "How to install Node.js",
-            "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",
-            "ecmascript2015Es6AndBeyond": "ECMAScript 2015 (ES6) and beyond",
-            "nodejsTheDifferenceBetweenDevelopmentAndProduction": "Node.js, the difference between development and production",
-            "nodejsWithTypescript": "Node.js with TypeScript",
-            "nodejsWithWebassembly": "Node.js with WebAssembly"
-          },
-          "asynchronousWork": {
-            "title": "Asynchronous Work",
-            "asynchronousFlowControl": "Asynchronous flow control",
-            "overviewOfBlockingVsNonBlocking": "Overview of Blocking vs Non-Blocking",
-            "javascriptAsynchronousProgrammingAndCallbacks": "JavaScript Asynchronous Programming and Callbacks",
-            "discoverJavaScriptTimers": "Discover JavaScript Timers",
-            "understandingProcessnexttick": "Understanding process.nextTick()",
-            "understandingSetimmediate": "Understanding setImmediate()",
-            "theNodejsEventEmitter": "The Node.js Event emitter"
-          },
-          "manipulatingFiles": {
-            "title": "Manipulating Files",
-            "nodejsFileStats": "Node.js file stats",
-            "nodejsFilePaths": "Node.js File Paths",
-            "workingWithFileDescriptorsInNodejs": "Working with file descriptors in Node.js",
-            "readingFilesWithNodejs": "Reading files with Node.js",
-            "writingFilesWithNodejs": "Writing files with Node.js",
-            "workingWithFoldersInNodejs": "Working with folders in Node.js"
-          },
-          "commandLine": {
-            "title": "Command Line",
-            "runNodejsScriptsFromTheCommandLine": "Run Node.js scripts from the command line",
-            "howToReadEnvironmentVariablesFromNodejs": "How to read environment variables from Node.js",
-            "howToUseTheNodejsRepl": "How to use the Node.js REPL",
-            "outputToTheCommandLineUsingNodejs": "Output to the command line using Node.js",
-            "acceptInputFromTheCommandLineInNodejs": "Accept input from the command line in Node.js"
-          }
-        }
-      },
-      "buttons": {
-        "toggleLanguage": "Toggle Language",
-        "toggleTheme": "Toggle dark/light mode"
-      }
-    },
-    "navigation": {
-      "about": {
-        "links": {
-          "governance": "Project Governance",
-          "releases": "Previous Releases",
-          "security": "Security Reporting"
-        }
-      },
-      "docs": {
-        "links": {
-          "es6": "ES6 and beyond",
-          "apiLts": "{fullLtsNodeVersion} API <graySpan>LTS</graySpan>",
-          "apiCurrent": "{fullCurrentNodeVersion} API",
-          "guides": "Guides <graySpan>ARCHIVED</graySpan>",
-          "dependencies": "Dependencies"
-        }
-      },
-      "getInvolved": {
-        "links": {
-          "collabSummit": "Collab Summit",
-          "contribute": "Contribute",
-          "codeOfConduct": "Code of Conduct"
-        }
-      }
-    },
-    "downloadList": {
-      "links": {
-        "previousReleases": "Previous Releases",
-        "packageManager": "Installing Node.js via package manager",
-        "shaSums": {
-          "title": "Signed SHASUMS for release files",
-          "howToVerify": " (How to verify)"
-        },
-        "allDownloads": "All download options",
-        "nightlyReleases": "Nightly builds",
-        "unofficialBuilds": "Unofficial builds",
-        "buildingFromSource": "Building Node.js from source on supported platforms",
-        "installingOnLinux": "Installing Node.js via binary archive",
-        "installingOnWsl": "Install on Windows Subsystem for Linux (WSL)"
-      }
-    },
-    "downloadReleasesTable": {
-      "changelog": "Changelog",
-      "releases": "Releases",
-      "docs": "Docs"
-    },
-    "pagination": {
-      "next": "Newer | ",
-      "previous": "Older"
-    },
-    "common": {
-      "breadcrumbs": {
-        "navigateToHome": "Navigate to Home"
-      },
-      "crossLink": {
-        "previous": "Prev",
-        "next": "Next"
-      },
-      "codebox": {
-        "copied": "Copied to clipboard!"
-      },
-      "pagination": {
-        "prev": "Previous",
-        "prevAriaLabel": "Previous page",
-        "next": "Next",
-        "nextAriaLabel": "Next page",
-        "defaultLabel": "Pagination",
-        "pageLabel": "Go to page {pageNumber}"
-      },
-      "languageDropdown": {
-        "label": "Choose Language"
-      },
-      "card": {
-        "announcement": "Announcements",
-        "release": "Releases",
-        "vulnerability": "Vulnerabilities"
-      }
-    },
-    "metabar": {
-      "lastUpdated": "Last Updated",
-      "readingTime": "Reading Time",
-      "addedIn": "Added In",
-      "author": "Author",
-      "authors": "Authors",
-      "contribute": "Contribute",
-      "contributeText": "Edit this page",
-      "viewAs": "View as",
-      "tableOfContents": "Table of Contents"
-    },
-    "api": {
-      "jsonLink": {
-        "title": "View as JSON"
-      },
-      "sourceLink": "Source Code:"
-    },
-    "home": {
-      "homeDownloadButton": {
-        "download": "{version} {isLts, select, true {LTS} other {Current}}",
-        "tagline": "{isLts, select, true {Recommended For Most Users} other {Latest Features}}",
-        "changelog": "Changelog",
-        "otherDownloads": "Other Downloads",
-        "apiDocs": "API Docs"
-      }
-    },
-    "downloads": {
-      "changelogModal": {
-        "startContributing": "Start Contributing"
-      }
-    }
-  },
-  "layouts": {
-    "blogPost": {
-      "author": {
-        "byLine": "{author, select, null {} other {By {author}, }}"
-      }
-    },
-    "blogIndex": {
-      "currentYear": "News from {year}"
-    }
-  },
-  "pages": {
-    "404": {
-      "title": "404: Page could not be found",
-      "description": "ENOENT: no such file or directory"
-    }
-  }
-}
diff --git a/i18n/locales/zh-tw.json b/i18n/locales/zh-tw.json
deleted file mode 100644
index b11e5e9f0ed42..0000000000000
--- a/i18n/locales/zh-tw.json
+++ /dev/null
@@ -1,194 +0,0 @@
-{
-  "components": {
-    "footer": {
-      "scrollToTop": {
-        "button": "Scroll to top"
-      },
-      "links": {
-        "trademarkPolicy": "Trademark Policy",
-        "privacyPolicy": "Privacy Policy",
-        "codeOfConduct": "Code of Conduct",
-        "security": "Security Policy",
-        "openJS": "OpenJS Foundation"
-      }
-    },
-    "header": {
-      "links": {
-        "about": "About",
-        "download": "Download",
-        "docs": "Docs",
-        "getInvolved": "Get Involved",
-        "security": "Security",
-        "certification": "Certification",
-        "blog": "News",
-        "learn": {
-          "title": "Learn",
-          "gettingStarted": {
-            "title": "Getting Started",
-            "introductionToNodejs": "Introduction to Node.js",
-            "howToInstallNodejs": "How to install Node.js",
-            "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",
-            "ecmascript2015Es6AndBeyond": "ECMAScript 2015 (ES6) and beyond",
-            "nodejsTheDifferenceBetweenDevelopmentAndProduction": "Node.js, the difference between development and production",
-            "nodejsWithTypescript": "Node.js with TypeScript",
-            "nodejsWithWebassembly": "Node.js with WebAssembly"
-          },
-          "asynchronousWork": {
-            "title": "Asynchronous Work",
-            "asynchronousFlowControl": "Asynchronous flow control",
-            "overviewOfBlockingVsNonBlocking": "Overview of Blocking vs Non-Blocking",
-            "javascriptAsynchronousProgrammingAndCallbacks": "JavaScript Asynchronous Programming and Callbacks",
-            "discoverJavaScriptTimers": "Discover JavaScript Timers",
-            "understandingProcessnexttick": "Understanding process.nextTick()",
-            "understandingSetimmediate": "Understanding setImmediate()",
-            "theNodejsEventEmitter": "The Node.js Event emitter"
-          },
-          "manipulatingFiles": {
-            "title": "Manipulating Files",
-            "nodejsFileStats": "Node.js file stats",
-            "nodejsFilePaths": "Node.js File Paths",
-            "workingWithFileDescriptorsInNodejs": "Working with file descriptors in Node.js",
-            "readingFilesWithNodejs": "Reading files with Node.js",
-            "writingFilesWithNodejs": "Writing files with Node.js",
-            "workingWithFoldersInNodejs": "Working with folders in Node.js"
-          },
-          "commandLine": {
-            "title": "Command Line",
-            "runNodejsScriptsFromTheCommandLine": "Run Node.js scripts from the command line",
-            "howToReadEnvironmentVariablesFromNodejs": "How to read environment variables from Node.js",
-            "howToUseTheNodejsRepl": "How to use the Node.js REPL",
-            "outputToTheCommandLineUsingNodejs": "Output to the command line using Node.js",
-            "acceptInputFromTheCommandLineInNodejs": "Accept input from the command line in Node.js"
-          }
-        }
-      },
-      "buttons": {
-        "toggleLanguage": "Toggle Language",
-        "toggleTheme": "Toggle dark/light mode"
-      }
-    },
-    "navigation": {
-      "about": {
-        "links": {
-          "governance": "Project Governance",
-          "releases": "Previous Releases",
-          "security": "Security Reporting"
-        }
-      },
-      "docs": {
-        "links": {
-          "es6": "ES6 and beyond",
-          "apiLts": "{fullLtsNodeVersion} API <graySpan>LTS</graySpan>",
-          "apiCurrent": "{fullCurrentNodeVersion} API",
-          "guides": "Guides <graySpan>ARCHIVED</graySpan>",
-          "dependencies": "Dependencies"
-        }
-      },
-      "getInvolved": {
-        "links": {
-          "collabSummit": "Collab Summit",
-          "contribute": "Contribute",
-          "codeOfConduct": "Code of Conduct"
-        }
-      }
-    },
-    "downloadList": {
-      "links": {
-        "previousReleases": "Previous Releases",
-        "packageManager": "Installing Node.js via package manager",
-        "shaSums": {
-          "title": "Signed SHASUMS for release files",
-          "howToVerify": " (How to verify)"
-        },
-        "allDownloads": "All download options",
-        "nightlyReleases": "Nightly builds",
-        "unofficialBuilds": "Unofficial builds",
-        "buildingFromSource": "Building Node.js from source on supported platforms",
-        "installingOnLinux": "Installing Node.js via binary archive",
-        "installingOnWsl": "Install on Windows Subsystem for Linux (WSL)"
-      }
-    },
-    "downloadReleasesTable": {
-      "changelog": "Changelog",
-      "releases": "Releases",
-      "docs": "Docs"
-    },
-    "pagination": {
-      "next": "Newer | ",
-      "previous": "Older"
-    },
-    "common": {
-      "breadcrumbs": {
-        "navigateToHome": "Navigate to Home"
-      },
-      "crossLink": {
-        "previous": "Prev",
-        "next": "Next"
-      },
-      "codebox": {
-        "copied": "Copied to clipboard!"
-      },
-      "pagination": {
-        "prev": "Previous",
-        "prevAriaLabel": "Previous page",
-        "next": "Next",
-        "nextAriaLabel": "Next page",
-        "defaultLabel": "Pagination",
-        "pageLabel": "Go to page {pageNumber}"
-      },
-      "languageDropdown": {
-        "label": "Choose Language"
-      },
-      "card": {
-        "announcement": "Announcements",
-        "release": "Releases",
-        "vulnerability": "Vulnerabilities"
-      }
-    },
-    "metabar": {
-      "lastUpdated": "Last Updated",
-      "readingTime": "Reading Time",
-      "addedIn": "Added In",
-      "author": "Author",
-      "authors": "Authors",
-      "contribute": "Contribute",
-      "contributeText": "Edit this page",
-      "viewAs": "View as",
-      "tableOfContents": "Table of Contents"
-    },
-    "api": {
-      "jsonLink": {
-        "title": "View as JSON"
-      },
-      "sourceLink": "Source Code:"
-    },
-    "home": {
-      "homeDownloadButton": {
-        "download": "{version} {isLts, select, true {LTS} other {Current}}",
-        "tagline": "{isLts, select, true {Recommended For Most Users} other {Latest Features}}",
-        "changelog": "Changelog",
-        "otherDownloads": "Other Downloads",
-        "apiDocs": "API Docs"
-      }
-    }
-  },
-  "layouts": {
-    "blogPost": {
-      "author": {
-        "byLine": "{author, select, null {} other {By {author}, }}"
-      }
-    },
-    "blogIndex": {
-      "currentYear": "News from {year}"
-    }
-  },
-  "pages": {
-    "404": {
-      "title": "404: Page could not be found",
-      "description": "ENOENT: no such file or directory"
-    }
-  }
-}

From 3d378ad90d82b296ab0d60431a59d45c43603788 Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Tue, 28 Nov 2023 22:57:07 +0100
Subject: [PATCH 05/26] fix: updated base styles for redesign

---
 styles/new/base.css     | 15 +++++++++++++++
 styles/new/index.css    |  5 +----
 styles/new/markdown.css | 25 ++++++++++++++++++-------
 3 files changed, 34 insertions(+), 11 deletions(-)
 create mode 100644 styles/new/base.css

diff --git a/styles/new/base.css b/styles/new/base.css
new file mode 100644
index 0000000000000..8e47cdf2fa3fd
--- /dev/null
+++ b/styles/new/base.css
@@ -0,0 +1,15 @@
+* {
+  @apply subpixel-antialiased;
+}
+
+html,
+body {
+  @apply h-full
+    w-full
+    overflow-hidden
+    bg-white
+    font-open-sans
+    text-neutral-950
+    dark:bg-neutral-950
+    dark:text-white;
+}
diff --git a/styles/new/index.css b/styles/new/index.css
index 0cae44948cbf6..49bd1eb3c2368 100644
--- a/styles/new/index.css
+++ b/styles/new/index.css
@@ -10,8 +10,5 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 @import './mixins';
+@import './base.css';
 @import './markdown.css';
-
-* {
-  @apply subpixel-antialiased;
-}
diff --git a/styles/new/markdown.css b/styles/new/markdown.css
index 587c48ea38300..5585065ae3a0b 100644
--- a/styles/new/markdown.css
+++ b/styles/new/markdown.css
@@ -1,24 +1,30 @@
 .mdxContent {
-  h1 {
-    @apply text-4xl;
+  hr {
+    @apply w-full
+      border-t
+      border-t-neutral-200
+      bg-white
+      dark:border-t-neutral-900
+      dark:bg-neutral-950;
   }
 
-  h2 {
+  h1 {
     @apply text-3xl;
   }
 
-  h3 {
+  h2 {
     @apply text-2xl;
   }
 
-  h4 {
+  h3 {
     @apply text-xl;
   }
 
-  h5 {
+  h4 {
     @apply text-lg;
   }
 
+  h5,
   h6,
   strong {
     @apply text-base;
@@ -77,7 +83,8 @@
   }
 
   table {
-    @apply w-full
+    @apply mb-1
+      w-full
       border-separate
       border-spacing-0
       rounded
@@ -98,6 +105,10 @@
         text-neutral-900
         dark:border-neutral-800
         dark:text-white;
+
+      > a {
+        @apply pr-2;
+      }
     }
 
     th {

From 5a0ab03b421f3a8ea519c4e76f59fadd44430054 Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Tue, 28 Nov 2023 22:57:28 +0100
Subject: [PATCH 06/26] chore: updated types

---
 types/i18n.ts       |  7 +++++++
 types/navigation.ts | 15 +++++----------
 types/server.ts     |  3 +++
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/types/i18n.ts b/types/i18n.ts
index 6f8160ef2e792..53cf111715942 100644
--- a/types/i18n.ts
+++ b/types/i18n.ts
@@ -1,3 +1,5 @@
+import type { JSXElementConstructor, ReactElement, ReactNode } from 'react';
+
 export interface LocaleConfig {
   code: string;
   localName: string;
@@ -7,3 +9,8 @@ export interface LocaleConfig {
   hrefLang: string;
   enabled: boolean;
 }
+
+export type FormattedMessage =
+  | string
+  | ReactElement<HTMLElement, string | JSXElementConstructor<HTMLElement>>
+  | readonly ReactNode[];
diff --git a/types/navigation.ts b/types/navigation.ts
index c59a9f86d4217..9e9c6f2340c8d 100644
--- a/types/navigation.ts
+++ b/types/navigation.ts
@@ -1,5 +1,3 @@
-import type { useTranslations } from 'next-intl';
-
 export type NavigationKeys =
   | 'about'
   | 'download'
@@ -10,15 +8,12 @@ export type NavigationKeys =
   | 'blog';
 
 export interface NavigationEntry {
-  translationId: string;
-  link: string;
+  label?: string;
+  link?: string;
   items?: Record<string, NavigationEntry>;
 }
 
-export interface MappedNavigationEntry {
-  text: ReturnType<ReturnType<typeof useTranslations>['rich']>;
-  link: string;
-  key: string;
-  level: number;
-  items: MappedNavigationEntry[];
+export interface SiteNavigation {
+  topNavigation: Record<NavigationKeys, NavigationEntry>;
+  sideNavigation: Record<NavigationKeys, NavigationEntry>;
 }
diff --git a/types/server.ts b/types/server.ts
index 81cafef58188e..9b452480c53f9 100644
--- a/types/server.ts
+++ b/types/server.ts
@@ -1,4 +1,5 @@
 import type { Heading } from '@vcarl/remark-headings';
+import type { ReadTimeResults } from 'reading-time';
 
 import type { LegacyFrontMatter } from './frontmatter';
 
@@ -6,4 +7,6 @@ export interface ClientSharedServerContext {
   frontmatter: LegacyFrontMatter;
   headings: Heading[];
   pathname: string;
+  filename: string;
+  readingTime: ReadTimeResults;
 }

From f9f359cc22dcf698bec4a7b884b7c0f7238f2de6 Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Tue, 28 Nov 2023 23:02:09 +0100
Subject: [PATCH 07/26] feat: added new layouts (base, and article layout) and
 related "providers"

---
 layouts/New/About.tsx           | 25 +++++++++++++
 layouts/New/Article.tsx         |  9 +++++
 layouts/New/Base.tsx            |  9 +++++
 layouts/New/Default.tsx         | 16 +++++++++
 layouts/New/layouts.module.css  | 64 +++++++++++++++++++++++++++++++++
 layouts/New/withBreadcrumbs.tsx | 35 ++++++++++++++++++
 layouts/New/withFooter.tsx      |  7 ++++
 layouts/New/withMetaBar.tsx     | 37 +++++++++++++++++++
 layouts/New/withNavBar.tsx      | 39 ++++++++++++++++++++
 layouts/New/withSideBar.tsx     | 20 +++++++++++
 10 files changed, 261 insertions(+)
 create mode 100644 layouts/New/About.tsx
 create mode 100644 layouts/New/Article.tsx
 create mode 100644 layouts/New/Base.tsx
 create mode 100644 layouts/New/Default.tsx
 create mode 100644 layouts/New/layouts.module.css
 create mode 100644 layouts/New/withBreadcrumbs.tsx
 create mode 100644 layouts/New/withFooter.tsx
 create mode 100644 layouts/New/withMetaBar.tsx
 create mode 100644 layouts/New/withNavBar.tsx
 create mode 100644 layouts/New/withSideBar.tsx

diff --git a/layouts/New/About.tsx b/layouts/New/About.tsx
new file mode 100644
index 0000000000000..32687e0b9629d
--- /dev/null
+++ b/layouts/New/About.tsx
@@ -0,0 +1,25 @@
+import type { FC, PropsWithChildren } from 'react';
+
+import ArticleLayout from '@/layouts/New/Article';
+import WithBreadcrumbs from '@/layouts/New/withBreadcrumbs';
+import WithMetaBar from '@/layouts/New/withMetaBar';
+import WithNavBar from '@/layouts/New/withNavBar';
+import WithSideBar from '@/layouts/New/withSideBar';
+
+const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
+  <>
+    <WithNavBar />
+
+    <ArticleLayout>
+      <WithSideBar keys={['about', 'getInvolved']} />
+
+      {children}
+
+      <WithMetaBar />
+
+      <WithBreadcrumbs />
+    </ArticleLayout>
+  </>
+);
+
+export default AboutLayout;
diff --git a/layouts/New/Article.tsx b/layouts/New/Article.tsx
new file mode 100644
index 0000000000000..8acfc2d966df2
--- /dev/null
+++ b/layouts/New/Article.tsx
@@ -0,0 +1,9 @@
+import type { FC, PropsWithChildren } from 'react';
+
+import styles from './layouts.module.css';
+
+const ArticleLayout: FC<PropsWithChildren> = ({ children }) => (
+  <article className={styles.articleLayout}>{children}</article>
+);
+
+export default ArticleLayout;
diff --git a/layouts/New/Base.tsx b/layouts/New/Base.tsx
new file mode 100644
index 0000000000000..a6fe36e418a41
--- /dev/null
+++ b/layouts/New/Base.tsx
@@ -0,0 +1,9 @@
+import type { FC, PropsWithChildren } from 'react';
+
+import styles from './layouts.module.css';
+
+const BaseLayout: FC<PropsWithChildren> = ({ children }) => (
+  <div className={styles.baseLayout}>{children}</div>
+);
+
+export default BaseLayout;
diff --git a/layouts/New/Default.tsx b/layouts/New/Default.tsx
new file mode 100644
index 0000000000000..78cc4cdfec636
--- /dev/null
+++ b/layouts/New/Default.tsx
@@ -0,0 +1,16 @@
+import type { FC, PropsWithChildren } from 'react';
+
+import WithFooter from '@/layouts/New/withFooter';
+import WithNavBar from '@/layouts/New/withNavBar';
+
+const DefaultLayout: FC<PropsWithChildren> = ({ children }) => (
+  <>
+    <WithNavBar />
+
+    {children}
+
+    <WithFooter />
+  </>
+);
+
+export default DefaultLayout;
diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css
new file mode 100644
index 0000000000000..58c7e117090a6
--- /dev/null
+++ b/layouts/New/layouts.module.css
@@ -0,0 +1,64 @@
+.baseLayout {
+  @apply grid
+    h-screen
+    w-screen
+    grid-cols-[1fr]
+    grid-rows-[auto_1fr_auto];
+}
+
+.articleLayout {
+  @apply grid
+    min-h-full
+    min-w-full
+    grid-rows-[1fr]
+    overflow-hidden
+    grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
+    sm:grid-cols-[auto_1fr_auto]
+    xl:grid-cols-[320px_1fr_320px]
+    xs:block
+    xs:overflow-auto;
+
+  > *:nth-child(1) {
+    @apply grid-in-[sidebar];
+  }
+
+  > *:nth-child(2) {
+    @apply flex
+      w-full
+      flex-col
+      items-start
+      gap-8
+      self-stretch
+      overflow-y-auto
+      overflow-x-hidden
+      bg-gradient-subtle
+      px-12
+      py-12
+      grid-in-[main]
+      dark:bg-gradient-subtle-dark
+      xs:!bg-none
+      xs:px-4
+      xs:py-4;
+  }
+
+  > *:nth-child(3) {
+    @apply grid-in-[metabar];
+  }
+
+  > *:nth-child(4) {
+    @apply sticky
+      bottom-0
+      flex
+      w-full
+      flex-col
+      items-center
+      self-stretch
+      border-t
+      border-t-neutral-200
+      bg-white
+      py-4
+      grid-in-[footer]
+      dark:border-t-neutral-900
+      dark:bg-neutral-950;
+  }
+}
diff --git a/layouts/New/withBreadcrumbs.tsx b/layouts/New/withBreadcrumbs.tsx
new file mode 100644
index 0000000000000..91029a91520dd
--- /dev/null
+++ b/layouts/New/withBreadcrumbs.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import type { FC } from 'react';
+
+import Breadcrumbs from '@/components/Common/Breadcrumbs';
+import { useClientContext, useMediaQuery, useSiteNavigation } from '@/hooks';
+import type { NavigationKeys } from '@/types';
+
+const WithBreadcrumbs: FC = () => {
+  const { navigationItems, getSideNavigation } = useSiteNavigation();
+  const { pathname } = useClientContext();
+
+  const isMobileScreen = useMediaQuery('(max-width: 639px)');
+
+  const getBreadrumbs = () => {
+    const [navigationKey] =
+      navigationItems.find(([, item]) => pathname.includes(item.link)) || [];
+
+    if (navigationKey === undefined) {
+      return [];
+    }
+
+    return getSideNavigation([navigationKey as NavigationKeys])
+      .map(([, item]) => item.items)
+      .flat()
+      .filter(([, item]) => pathname.includes(item.link))
+      .map(([, item]) => ({ label: item.label, href: item.link }));
+  };
+
+  return (
+    <Breadcrumbs links={getBreadrumbs()} maxLength={isMobileScreen ? 2 : 4} />
+  );
+};
+
+export default WithBreadcrumbs;
diff --git a/layouts/New/withFooter.tsx b/layouts/New/withFooter.tsx
new file mode 100644
index 0000000000000..abdc64b295f53
--- /dev/null
+++ b/layouts/New/withFooter.tsx
@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+
+import Footer from '@/components/Containers/Footer';
+
+const WithFooter: FC = () => <Footer />;
+
+export default WithFooter;
diff --git a/layouts/New/withMetaBar.tsx b/layouts/New/withMetaBar.tsx
new file mode 100644
index 0000000000000..372c8727610d4
--- /dev/null
+++ b/layouts/New/withMetaBar.tsx
@@ -0,0 +1,37 @@
+import { useFormatter } from 'next-intl';
+import type { FC } from 'react';
+
+import MetaBar from '@/components/Common/MetaBar';
+import GitHub from '@/components/Icons/Social/GitHub';
+import Link from '@/components/Link';
+import { useClientContext } from '@/hooks/server';
+import { getGitHubEditPageUrl } from '@/util/gitHubUtils';
+
+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',
+  });
+
+  return (
+    <MetaBar
+      items={{
+        'components.metabar.lastUpdated': lastUpdated,
+        'components.metabar.readingTime': readingTime.text,
+        'components.metabar.contribute': (
+          <>
+            <GitHub className="fill-neutral-700 dark:fill-neutral-100" />
+            <Link href={getGitHubEditPageUrl(filename)}>Edit this page</Link>
+          </>
+        ),
+      }}
+      headings={{ items: headings }}
+    />
+  );
+};
+
+export default WithMetaBar;
diff --git a/layouts/New/withNavBar.tsx b/layouts/New/withNavBar.tsx
new file mode 100644
index 0000000000000..26387b1555358
--- /dev/null
+++ b/layouts/New/withNavBar.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { useLocale } from 'next-intl';
+import { useTheme } from 'next-themes';
+import type { FC } from 'react';
+
+import NavBar from '@/components/Containers/NavBar';
+import { useClientContext, useSiteNavigation } from '@/hooks';
+import { useRouter } from '@/navigation.mjs';
+import { availableLocales } from '@/next.locales.mjs';
+
+const WithNavBar: FC = () => {
+  const { navigationItems } = useSiteNavigation();
+  const { resolvedTheme, setTheme } = useTheme();
+  const { pathname } = useClientContext();
+  const { replace } = useRouter();
+
+  const locale = useLocale();
+
+  const toggleCurrnetTheme = () =>
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+
+  return (
+    <NavBar
+      onThemeTogglerClick={toggleCurrnetTheme}
+      languages={{
+        currentLanguage: locale,
+        availableLanguages: availableLocales,
+        onChange: locale => replace(pathname!, { locale: locale.code }),
+      }}
+      navItems={navigationItems.map(([, { label, link }]) => ({
+        link,
+        text: label,
+      }))}
+    />
+  );
+};
+
+export default WithNavBar;
diff --git a/layouts/New/withSideBar.tsx b/layouts/New/withSideBar.tsx
new file mode 100644
index 0000000000000..6aa0b4c895544
--- /dev/null
+++ b/layouts/New/withSideBar.tsx
@@ -0,0 +1,20 @@
+import type { FC } from 'react';
+
+import SideBar from '@/components/Common/Sidebar';
+import { useSiteNavigation } from '@/hooks/server';
+import type { NavigationKeys } from '@/types';
+
+const WithSideBar: FC<{ keys: NavigationKeys[] }> = ({ keys }) => {
+  const { getSideNavigation } = useSiteNavigation();
+
+  const mappedSidebarItems = getSideNavigation(keys).map(
+    ([, { label, items }]) => ({
+      groupName: label,
+      items: items.map(([, { label, link }]) => ({ title: label, url: link })),
+    })
+  );
+
+  return <SideBar groups={mappedSidebarItems} />;
+};
+
+export default WithSideBar;

From 095ee91d488834941c4c795bb795049e72c2bb7f Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Tue, 28 Nov 2023 23:03:00 +0100
Subject: [PATCH 08/26] feat: updated mdx engine and shared context and app
 layouts

---
 app/[locale]/[[...path]]/page.tsx | 18 +++++++++++++++---
 app/[locale]/layout.tsx           | 30 ++++++++++++++++++++----------
 client-context.ts                 |  4 ++++
 next.config.mjs                   | 25 +++++++++++++++++++++++++
 next.constants.mjs                | 13 +++++++++++--
 next.mdx.compiler.mjs             | 19 ++++++++++++++++---
 next.mdx.mjs                      |  3 ++-
 providers/matterProvider.tsx      | 25 +++++++++++++++++--------
 util/gitHubUtils.ts               | 11 +++++++++++
 9 files changed, 121 insertions(+), 27 deletions(-)

diff --git a/app/[locale]/[[...path]]/page.tsx b/app/[locale]/[[...path]]/page.tsx
index ef38907098b8c..dd2cd4068c33a 100644
--- a/app/[locale]/[[...path]]/page.tsx
+++ b/app/[locale]/[[...path]]/page.tsx
@@ -95,15 +95,27 @@ const getPage: FC<DynamicParams> = async ({ params }) => {
   if (source.length && filename.length) {
     // This parses the source Markdown content and returns a React Component and
     // relevant context from the Markdown File
-    const { MDXContent, frontmatter, headings } =
+    const { MDXContent, frontmatter, headings, readingTime } =
       await dynamicRouter.getMDXContent(source, filename);
 
+    // Metadata and shared Context to be available through the lifecycle of the page
+    const sharedContext = {
+      frontmatter,
+      headings,
+      pathname,
+      readingTime,
+      filename,
+    };
+
     // Defines a shared Server Context for the Client-Side
     // That is shared for all pages under the dynamic router
-    setClientContext({ frontmatter, headings, pathname });
+    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 matter={frontmatter} headings={headings}>
+      <MatterProvider {...sharedContext}>
         <WithLayout layout={frontmatter.layout}>
           <MDXRenderer Component={MDXContent} />
         </WithLayout>
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 61fdfd82e8b24..79edc0da1e014 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -1,33 +1,43 @@
 import { Analytics } from '@vercel/analytics/react';
-import { Source_Sans_3 } from 'next/font/google';
+import classNames from 'classnames';
 import { getLocale } from 'next-intl/server';
 import type { FC, PropsWithChildren } from 'react';
 
-import BaseLayout from '@/layouts/BaseLayout';
-import { VERCEL_ENV } from '@/next.constants.mjs';
+import LegacyBaseLayout from '@/layouts/BaseLayout';
+import NewBaseLayout from '@/layouts/New/Base';
+import { ENABLE_WEBSITE_REDESIGN, VERCEL_ENV } from '@/next.constants.mjs';
+import { IBM_PLEX_MONO, OPEN_SANS, SOURCE_SANS } from '@/next.fonts';
 import { availableLocalesMap, defaultLocale } from '@/next.locales.mjs';
 import { LocaleProvider } from '@/providers/localeProvider';
 import { ThemeProvider } from '@/providers/themeProvider';
 
-import '@/styles/old/index.css';
+// Uses a WebPack/TurboPack Alias for resolving Global Styles
+// @deprecated remove when website redesign is done
+// eslint-disable-next-line import/no-unresolved
+import 'globalStyles';
 
-const sourceSans = Source_Sans_3({
-  weight: ['400', '600'],
-  display: 'fallback',
-  subsets: ['latin'],
+// Defines the App Fonts based on being on Website Redesign or not
+// @deprecated remove when website redesign is done
+const fontClasses = classNames(IBM_PLEX_MONO.variable, {
+  [SOURCE_SANS.className]: !ENABLE_WEBSITE_REDESIGN,
+  [OPEN_SANS.variable]: ENABLE_WEBSITE_REDESIGN,
 });
 
+// Defines the Base Layout based on being on Website Redesign or not
+// @deprecated remove when website redesign is done
+const AppLayout = ENABLE_WEBSITE_REDESIGN ? NewBaseLayout : LegacyBaseLayout;
+
 const RootLayout: FC<PropsWithChildren> = async ({ children }) => {
   const locale = await getLocale();
 
   const { langDir, hrefLang } = availableLocalesMap[locale] || defaultLocale;
 
   return (
-    <html className={sourceSans.className} dir={langDir} lang={hrefLang}>
+    <html className={fontClasses} dir={langDir} lang={hrefLang}>
       <body suppressHydrationWarning>
         <LocaleProvider>
           <ThemeProvider>
-            <BaseLayout>{children}</BaseLayout>
+            <AppLayout>{children}</AppLayout>
           </ThemeProvider>
         </LocaleProvider>
 
diff --git a/client-context.ts b/client-context.ts
index 27750981b6d9a..3abe1d0082cb6 100644
--- a/client-context.ts
+++ b/client-context.ts
@@ -10,6 +10,8 @@ export const getClientContext = cache(() => {
     frontmatter: {},
     pathname: '',
     headings: [],
+    readingTime: { text: '', minutes: 0, time: 0, words: 0 },
+    filename: '',
   };
 
   return serverSharedContext;
@@ -21,4 +23,6 @@ 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;
 };
diff --git a/next.config.mjs b/next.config.mjs
index bbcd2d244b498..820e5b2893f28 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,11 +1,14 @@
 'use strict';
 
+import { resolve } from 'node:path';
+
 import { withSentryConfig } from '@sentry/nextjs';
 import withNextIntl from 'next-intl/plugin';
 
 import {
   BASE_PATH,
   ENABLE_STATIC_EXPORT,
+  ENABLE_WEBSITE_REDESIGN,
   SENTRY_DSN,
   SENTRY_ENABLE,
   SENTRY_EXTENSIONS,
@@ -60,9 +63,31 @@ const nextConfig = {
     // Tree-shakes modules from Sentry Bundle
     config.plugins.push(new webpack.DefinePlugin(SENTRY_EXTENSIONS));
 
+    // This allows us to customise our global styles on build-tim,e
+    // based on if we're running the Website Redesign or not
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      // @deprecated remove when website redesign is done
+      globalStyles$: resolve(
+        ENABLE_WEBSITE_REDESIGN
+          ? './styles/new/index.css'
+          : './styles/old/index.css'
+      ),
+    };
+
     return config;
   },
   experimental: {
+    turbo: {
+      resolveAlias: {
+        // This allows us to customise our global styles on build-tim,e
+        // based on if we're running the Website Redesign or not
+        // @deprecated remove when website redesign is done
+        globalStyles: ENABLE_WEBSITE_REDESIGN
+          ? './styles/new/index.css'
+          : './styles/old/index.css',
+      },
+    },
     // Some of our static pages from `getStaticProps` have a lot of data
     // since we pass the fully-compiled MDX page from `MDXRemote` through
     // a page's static props.
diff --git a/next.constants.mjs b/next.constants.mjs
index abf00f93c3de3..a84eed94e7f98 100644
--- a/next.constants.mjs
+++ b/next.constants.mjs
@@ -40,8 +40,17 @@ export const VERCEL_REVALIDATE = Number(
  * Note that this is a manual Environment Variable defined by us during `npm run deploy`
  */
 export const ENABLE_STATIC_EXPORT =
-  process.env.NEXT_STATIC_EXPORT === 'true' ||
-  process.env.NEXT_STATIC_EXPORT === true;
+  process.env.NEXT_PUBLIC_STATIC_EXPORT === 'true' ||
+  process.env.NEXT_PUBLIC_STATIC_EXPORT === true;
+
+/**
+ * This is used for enabling the New Website Redesign Layouts
+ *
+ * Note that this is a manual Environment Variable defined by us if necessary.
+ */
+export const ENABLE_WEBSITE_REDESIGN =
+  process.env.NEXT_PUBLIC_ENABLE_REDESIGN === 'true' ||
+  process.env.NEXT_PUBLIC_ENABLE_REDESIGN === true;
 
 /**
  * This is used for any place that requires the full canonical URL path for the Node.js Website (and its deployment), such as for example, the Node.js RSS Feed.
diff --git a/next.mdx.compiler.mjs b/next.mdx.compiler.mjs
index 71a96e94c26ff..8c4589437cf43 100644
--- a/next.mdx.compiler.mjs
+++ b/next.mdx.compiler.mjs
@@ -5,6 +5,7 @@ import * as jsxRuntime from 'react/jsx-runtime';
 import { matter } from 'vfile-matter';
 
 import { NEXT_REHYPE_PLUGINS, NEXT_REMARK_PLUGINS } from './next.mdx.mjs';
+import { createGitHubSlug } from './util/gitHubUtils';
 
 /**
  * This is our custom simple MDX Compiler that is used to compile Markdown and MDX
@@ -12,13 +13,19 @@ import { NEXT_REHYPE_PLUGINS, NEXT_REMARK_PLUGINS } from './next.mdx.mjs';
  *
  * @param {import('vfile').VFile} source
  * @param {'md' | 'mdx'} fileExtension
- * @returns {Promise<{ MDXContent: import('mdx/types').MDXContent; headings: import('@vcarl/remark-headings').Heading[]; frontmatter: Record<string, any>}>}
+ * @returns {Promise<{
+ *   MDXContent: import('mdx/types').MDXContent;
+ *   headings: import('@vcarl/remark-headings').Heading[];
+ *   frontmatter: Record<string, any>, readingTime: import('reading-time').ReadTimeResults
+ * }>}
  */
 export async function compileMDX(source, fileExtension) {
   // Parses the Frontmatter to the VFile and removes from the original source
   // cleaning the frontmatter to the source that is going to be parsed by the MDX Compiler
   matter(source, { strip: true });
 
+  const slugger = createGitHubSlug();
+
   // This is a minimal MDX Compiler that is lightweight and only parses the MDX
   const { default: MDXContent } = await evaluate(source, {
     rehypePlugins: NEXT_REHYPE_PLUGINS,
@@ -30,7 +37,13 @@ export async function compileMDX(source, fileExtension) {
 
   // Retrieve some parsed data from the VFile metadata
   // such as frontmatter and Markdown headings
-  const { headings, matter: frontmatter } = source.data;
+  const { headings, matter: frontmatter, readingTime } = source.data;
+
+  headings.forEach(heading => {
+    // we re-sluggify the links to match the GitHub slugger
+    // since some also do not come with sluggifed links
+    heading.data = { ...heading.data, id: slugger(heading.value) };
+  });
 
-  return { MDXContent, headings, frontmatter };
+  return { MDXContent, headings, frontmatter, readingTime };
 }
diff --git a/next.mdx.mjs b/next.mdx.mjs
index 8561a6e5b35ac..65aed35c58b3d 100644
--- a/next.mdx.mjs
+++ b/next.mdx.mjs
@@ -4,6 +4,7 @@ import remarkHeadings from '@vcarl/remark-headings';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
+import readingTime from 'remark-reading-time';
 
 import rehypeShikiji from './next.mdx.shiki.mjs';
 
@@ -26,4 +27,4 @@ export const NEXT_REHYPE_PLUGINS = [
  *
  * @type {import('unified').Plugin[]}
  */
-export const NEXT_REMARK_PLUGINS = [remarkGfm, remarkHeadings];
+export const NEXT_REMARK_PLUGINS = [remarkGfm, remarkHeadings, readingTime];
diff --git a/providers/matterProvider.tsx b/providers/matterProvider.tsx
index 25e413236448c..74d6a42791f07 100644
--- a/providers/matterProvider.tsx
+++ b/providers/matterProvider.tsx
@@ -3,27 +3,36 @@
 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';
 
-type MatterContext = { matter: LegacyFrontMatter; headings: Heading[] };
+type MatterContext = {
+  frontmatter: LegacyFrontMatter;
+  headings: Heading[];
+  readingTime: ReadTimeResults;
+  filename: string;
+};
 
 export const MatterContext = createContext<MatterContext>({
-  matter: {},
+  frontmatter: {},
   headings: [],
+  readingTime: { text: '', minutes: 0, time: 0, words: 0 },
+  filename: '',
 });
 
-type MatterProviderProps = PropsWithChildren<{
-  matter: LegacyFrontMatter;
-  headings: Heading[];
-}>;
+type MatterProviderProps = PropsWithChildren<MatterContext>;
 
 export const MatterProvider: FC<MatterProviderProps> = ({
-  matter,
+  frontmatter,
   headings,
+  readingTime,
+  filename,
   children,
 }) => (
-  <MatterContext.Provider value={{ matter, headings }}>
+  <MatterContext.Provider
+    value={{ frontmatter, headings, readingTime, filename }}
+  >
     {children}
   </MatterContext.Provider>
 );
diff --git a/util/gitHubUtils.ts b/util/gitHubUtils.ts
index 79472e203f585..7327a2637094c 100644
--- a/util/gitHubUtils.ts
+++ b/util/gitHubUtils.ts
@@ -1,2 +1,13 @@
+import GitHubSlugger from 'github-slugger';
+
 export const githubProfileAvatarUrl = (username: string): string =>
   `https://avatars.githubusercontent.com/${username}`;
+
+export const createGitHubSlug = () => {
+  const githubSlugger = new GitHubSlugger();
+
+  return (text: string) => githubSlugger.slug(text);
+};
+
+export const getGitHubEditPageUrl = (filename: string) =>
+  `https://github.com/nodejs/nodejs.org/blob/main/pages/en/${filename}`;

From e3b55328643de30341410ce350528f9a44af190c Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Tue, 28 Nov 2023 23:03:32 +0100
Subject: [PATCH 09/26] meta: updated packages, navigation, tailwind config,
 etc

---
 navigation.json    | 513 +++++++++++++++++++++++----------------------
 next.json.mjs      |   2 +-
 package.json       |   5 +-
 tailwind.config.ts |  12 ++
 turbo.json         |   8 +-
 5 files changed, 289 insertions(+), 251 deletions(-)

diff --git a/navigation.json b/navigation.json
index 28ba2c908a963..7efef4ef743bf 100644
--- a/navigation.json
+++ b/navigation.json
@@ -1,258 +1,281 @@
 {
-  "about": {
-    "link": "/about",
-    "translationId": "components.header.links.about",
-    "items": {
-      "governance": {
-        "link": "/about/governance",
-        "translationId": "components.navigation.about.links.governance"
-      },
-      "releases": {
-        "link": "/about/previous-releases",
-        "translationId": "components.navigation.about.links.releases"
-      },
-      "security": {
-        "link": "/about/security-reporting",
-        "translationId": "components.navigation.about.links.security"
-      }
+  "topNavigation": {
+    "learn": {
+      "link": "/learn",
+      "label": "components.header.links.learn"
+    },
+    "about": {
+      "link": "/about",
+      "label": "components.header.links.about"
+    },
+    "getInvolved": {
+      "link": "/get-involved",
+      "label": "components.header.links.getInvolved"
+    },
+    "docs": {
+      "link": "/docs",
+      "label": "components.header.links.docs"
+    },
+    "download": {
+      "link": "/download",
+      "label": "components.header.links.download"
+    },
+    "blog": {
+      "link": "/blog",
+      "label": "components.header.links.blog"
+    },
+    "certification": {
+      "link": "https://openjsf.org/certification",
+      "label": "components.header.links.certification"
     }
   },
-  "learn": {
-    "link": "/learn",
-    "translationId": "components.header.links.learn.title",
-    "items": {
-      "gettingStarted": {
-        "link": "/learn/getting-started/introduction-to-nodejs",
-        "translationId": "components.header.links.learn.gettingStarted.title",
-        "items": {
-          "introductionToNodejs": {
-            "link": "/learn/getting-started/introduction-to-nodejs",
-            "translationId": "components.header.links.learn.gettingStarted.introductionToNodejs"
-          },
-          "howToInstallNodejs": {
-            "link": "/learn/getting-started/how-to-install-nodejs",
-            "translationId": "components.header.links.learn.gettingStarted.howToInstallNodejs"
-          },
-          "howMuchJavascriptDoYouNeedToKnowToUseNodejs": {
-            "link": "/learn/getting-started/how-much-javascript-do-you-need-to-know-to-use-nodejs",
-            "translationId": "components.header.links.learn.gettingStarted.howMuchJavascriptDoYouNeedToKnowToUseNodejs"
-          },
-          "differencesBetweenNodejsAndTheBrowser": {
-            "link": "/learn/getting-started/differences-between-nodejs-and-the-browser",
-            "translationId": "components.header.links.learn.gettingStarted.differencesBetweenNodejsAndTheBrowser"
-          },
-          "theV8JavascriptEngine": {
-            "link": "/learn/getting-started/the-v8-javascript-engine",
-            "translationId": "components.header.links.learn.gettingStarted.theV8JavascriptEngine"
-          },
-          "anIntroductionToTheNpmPackageManager": {
-            "link": "/learn/getting-started/an-introduction-to-the-npm-package-manager",
-            "translationId": "components.header.links.learn.gettingStarted.anIntroductionToTheNpmPackageManager"
-          },
-          "ecmascript2015Es6AndBeyond": {
-            "link": "/learn/getting-started/ecmascript-2015-es6-and-beyond",
-            "translationId": "components.header.links.learn.gettingStarted.ecmascript2015Es6AndBeyond"
-          },
-          "nodejsTheDifferenceBetweenDevelopmentAndProduction": {
-            "link": "/learn/getting-started/nodejs-the-difference-between-development-and-production",
-            "translationId": "components.header.links.learn.gettingStarted.nodejsTheDifferenceBetweenDevelopmentAndProduction"
-          },
-          "nodejsWithTypescript": {
-            "link": "/learn/getting-started/nodejs-with-typescript",
-            "translationId": "components.header.links.learn.gettingStarted.nodejsWithTypescript"
-          },
-          "nodejsWithWebassembly": {
-            "link": "/learn/getting-started/nodejs-with-webassembly",
-            "translationId": "components.header.links.learn.gettingStarted.nodejsWithWebassembly"
-          }
+  "sideNavigation": {
+    "about": {
+      "label": "components.navigation.about.links.about",
+      "items": {
+        "about": {
+          "link": "/about",
+          "label": "components.navigation.about.links.about"
+        },
+        "governance": {
+          "link": "/about/governance",
+          "label": "components.navigation.about.links.governance"
+        },
+        "releases": {
+          "link": "/about/previous-releases",
+          "label": "components.navigation.about.links.releases"
+        },
+        "security": {
+          "link": "/about/security-reporting",
+          "label": "components.navigation.about.links.security"
         }
-      },
-      "asynchronousWork": {
-        "link": "/learn/asynchronous-work/asynchronous-flow-control",
-        "translationId": "components.header.links.learn.asynchronousWork.title",
-        "items": {
-          "asynchronousFlowControl": {
-            "link": "/learn/asynchronous-work/asynchronous-flow-control",
-            "translationId": "components.header.links.learn.asynchronousWork.asynchronousFlowControl"
-          },
-          "overviewOfBlockingVsNonBlocking": {
-            "link": "/learn/asynchronous-work/overview-of-blocking-vs-non-blocking",
-            "translationId": "components.header.links.learn.asynchronousWork.overviewOfBlockingVsNonBlocking"
-          },
-          "javascriptAsynchronousProgrammingAndCallbacks": {
-            "link": "/learn/asynchronous-work/javascript-asynchronous-programming-and-callbacks",
-            "translationId": "components.header.links.learn.asynchronousWork.javascriptAsynchronousProgrammingAndCallbacks"
-          },
-          "discoverJavaScriptTimers": {
-            "link": "/learn/asynchronous-work/discover-javascript-timers",
-            "translationId": "components.header.links.learn.asynchronousWork.discoverJavaScriptTimers"
-          },
-          "understandingProcessnexttick": {
-            "link": "/learn/asynchronous-work/understanding-processnexttick",
-            "translationId": "components.header.links.learn.asynchronousWork.understandingProcessnexttick"
-          },
-          "understandingSetimmediate": {
-            "link": "/learn/asynchronous-work/understanding-setimmediate",
-            "translationId": "components.header.links.learn.asynchronousWork.understandingSetimmediate"
-          },
-          "theNodejsEventEmitter": {
-            "link": "/learn/asynchronous-work/the-nodejs-event-emitter",
-            "translationId": "components.header.links.learn.asynchronousWork.theNodejsEventEmitter"
-          }
+      }
+    },
+    "getInvolved": {
+      "label": "components.navigation.getInvolved.links.getInvolved",
+      "items": {
+        "getInvolved": {
+          "link": "/get-involved",
+          "label": "components.navigation.getInvolved.links.getInvolved"
+        },
+        "collabSummit": {
+          "link": "/get-involved/collab-summit",
+          "label": "components.navigation.getInvolved.links.collabSummit"
+        },
+        "contribute": {
+          "link": "/get-involved/contribute",
+          "label": "components.navigation.getInvolved.links.contribute"
+        },
+        "codeOfConduct": {
+          "link": "https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md",
+          "label": "components.navigation.getInvolved.links.codeOfConduct"
         }
-      },
-      "manipulatingFiles": {
-        "link": "/learn/manipulating-files/nodejs-file-stats",
-        "translationId": "components.header.links.learn.manipulatingFiles.title",
-        "items": {
-          "nodejsFileStats": {
-            "link": "/learn/manipulating-files/nodejs-file-stats",
-            "translationId": "components.header.links.learn.manipulatingFiles.nodejsFileStats"
-          },
-          "nodejsFilePaths": {
-            "link": "/learn/manipulating-files/nodejs-file-paths",
-            "translationId": "components.header.links.learn.manipulatingFiles.nodejsFilePaths"
-          },
-          "workingWithFileDescriptorsInNodejs": {
-            "link": "/learn/manipulating-files/working-with-file-descriptors-in-nodejs",
-            "translationId": "components.header.links.learn.manipulatingFiles.workingWithFileDescriptorsInNodejs"
-          },
-          "readingFilesWithNodejs": {
-            "link": "/learn/manipulating-files/reading-files-with-nodejs",
-            "translationId": "components.header.links.learn.manipulatingFiles.readingFilesWithNodejs"
-          },
-          "writingFilesWithNodejs": {
-            "link": "/learn/manipulating-files/writing-files-with-nodejs",
-            "translationId": "components.header.links.learn.manipulatingFiles.writingFilesWithNodejs"
-          },
-          "workingWithFoldersInNodejs": {
-            "link": "/learn/manipulating-files/working-with-folders-in-nodejs",
-            "translationId": "components.header.links.learn.manipulatingFiles.workingWithFoldersInNodejs"
-          }
+      }
+    },
+    "docs": {
+      "label": "components.navigation.docs.links.docs",
+      "items": {
+        "docs": {
+          "link": "/docs",
+          "label": "components.navigation.docs.links.docs"
+        },
+        "apiLts": {
+          "link": "https://nodejs.org/dist/latest-{ltsNodeVersion}/docs/api",
+          "label": "components.navigation.docs.links.apiLts"
+        },
+        "apiCurrent": {
+          "link": "https://nodejs.org/dist/latest-{currentNodeVersion}/docs/api",
+          "label": "components.navigation.docs.links.apiCurrent"
+        },
+        "es6": {
+          "link": "/docs/es6",
+          "label": "components.navigation.docs.links.es6"
+        },
+        "guides": {
+          "link": "/docs/guides",
+          "label": "components.navigation.docs.links.guides"
+        },
+        "dependencies": {
+          "link": "https://github.com/nodejs/node/blob/main/doc/contributing/maintaining/maintaining-dependencies.md",
+          "label": "components.navigation.docs.links.dependencies"
         }
-      },
-      "commandLine": {
-        "link": "/learn/command-line/run-nodejs-scripts-from-the-command-line",
-        "translationId": "components.header.links.learn.commandLine.title",
-        "items": {
-          "runNodejsScriptsFromTheCommandLine": {
-            "link": "/learn/command-line/run-nodejs-scripts-from-the-command-line",
-            "translationId": "components.header.links.learn.commandLine.runNodejsScriptsFromTheCommandLine"
-          },
-          "howToReadEnvironmentVariablesFromNodejs": {
-            "link": "/learn/command-line/how-to-read-environment-variables-from-nodejs",
-            "translationId": "components.header.links.learn.commandLine.howToReadEnvironmentVariablesFromNodejs"
-          },
-          "howToUseTheNodejsRepl": {
-            "link": "/learn/command-line/how-to-use-the-nodejs-repl",
-            "translationId": "components.header.links.learn.commandLine.howToUseTheNodejsRepl"
-          },
-          "outputToTheCommandLineUsingNodejs": {
-            "link": "/learn/command-line/output-to-the-command-line-using-nodejs",
-            "translationId": "components.header.links.learn.commandLine.outputToTheCommandLineUsingNodejs"
-          },
-          "acceptInputFromTheCommandLineInNodejs": {
-            "link": "/learn/command-line/accept-input-from-the-command-line-in-nodejs",
-            "translationId": "components.header.links.learn.commandLine.acceptInputFromTheCommandLineInNodejs"
+      }
+    },
+    "learn": {
+      "items": {
+        "gettingStarted": {
+          "label": "components.navigation.learn.gettingStarted.links.gettingStarted",
+          "items": {
+            "introductionToNodejs": {
+              "link": "/learn/getting-started/introduction-to-nodejs",
+              "label": "components.navigation.learn.gettingStarted.links.introductionToNodejs"
+            },
+            "howToInstallNodejs": {
+              "link": "/learn/getting-started/how-to-install-nodejs",
+              "label": "components.navigation.learn.gettingStarted.links.howToInstallNodejs"
+            },
+            "howMuchJavascriptDoYouNeedToKnowToUseNodejs": {
+              "link": "/learn/getting-started/how-much-javascript-do-you-need-to-know-to-use-nodejs",
+              "label": "components.navigation.learn.gettingStarted.links.howMuchJavascriptDoYouNeedToKnowToUseNodejs"
+            },
+            "differencesBetweenNodejsAndTheBrowser": {
+              "link": "/learn/getting-started/differences-between-nodejs-and-the-browser",
+              "label": "components.navigation.learn.gettingStarted.links.differencesBetweenNodejsAndTheBrowser"
+            },
+            "theV8JavascriptEngine": {
+              "link": "/learn/getting-started/the-v8-javascript-engine",
+              "label": "components.navigation.learn.gettingStarted.links.theV8JavascriptEngine"
+            },
+            "anIntroductionToTheNpmPackageManager": {
+              "link": "/learn/getting-started/an-introduction-to-the-npm-package-manager",
+              "label": "components.navigation.learn.gettingStarted.links.anIntroductionToTheNpmPackageManager"
+            },
+            "ecmascript2015Es6AndBeyond": {
+              "link": "/learn/getting-started/ecmascript-2015-es6-and-beyond",
+              "label": "components.navigation.learn.gettingStarted.links.ecmascript2015Es6AndBeyond"
+            },
+            "nodejsTheDifferenceBetweenDevelopmentAndProduction": {
+              "link": "/learn/getting-started/nodejs-the-difference-between-development-and-production",
+              "label": "components.navigation.learn.gettingStarted.links.nodejsTheDifferenceBetweenDevelopmentAndProduction"
+            },
+            "nodejsWithTypescript": {
+              "link": "/learn/getting-started/nodejs-with-typescript",
+              "label": "components.navigation.learn.gettingStarted.links.nodejsWithTypescript"
+            },
+            "nodejsWithWebassembly": {
+              "link": "/learn/getting-started/nodejs-with-webassembly",
+              "label": "components.navigation.learn.gettingStarted.links.nodejsWithWebassembly"
+            }
+          }
+        },
+        "asynchronousWork": {
+          "label": "components.navigation.learn.asynchronousWork.links.asynchronousWork",
+          "items": {
+            "asynchronousFlowControl": {
+              "link": "/learn/asynchronous-work/asynchronous-flow-control",
+              "label": "components.navigation.learn.asynchronousWork.links.asynchronousFlowControl"
+            },
+            "overviewOfBlockingVsNonBlocking": {
+              "link": "/learn/asynchronous-work/overview-of-blocking-vs-non-blocking",
+              "label": "components.navigation.learn.asynchronousWork.links.overviewOfBlockingVsNonBlocking"
+            },
+            "javascriptAsynchronousProgrammingAndCallbacks": {
+              "link": "/learn/asynchronous-work/javascript-asynchronous-programming-and-callbacks",
+              "label": "components.navigation.learn.asynchronousWork.links.javascriptAsynchronousProgrammingAndCallbacks"
+            },
+            "discoverJavaScriptTimers": {
+              "link": "/learn/asynchronous-work/discover-javascript-timers",
+              "label": "components.navigation.learn.asynchronousWork.links.discoverJavaScriptTimers"
+            },
+            "understandingProcessnexttick": {
+              "link": "/learn/asynchronous-work/understanding-processnexttick",
+              "label": "components.navigation.learn.asynchronousWork.links.understandingProcessnexttick"
+            },
+            "understandingSetimmediate": {
+              "link": "/learn/asynchronous-work/understanding-setimmediate",
+              "label": "components.navigation.learn.asynchronousWork.links.understandingSetimmediate"
+            },
+            "theNodejsEventEmitter": {
+              "link": "/learn/asynchronous-work/the-nodejs-event-emitter",
+              "label": "components.navigation.learn.asynchronousWork.links.theNodejsEventEmitter"
+            }
+          }
+        },
+        "manipulatingFiles": {
+          "label": "components.navigation.learn.manipulatingFiles.links.manipulatingFiles",
+          "items": {
+            "nodejsFileStats": {
+              "link": "/learn/manipulating-files/nodejs-file-stats",
+              "label": "components.navigation.learn.manipulatingFiles.links.nodejsFileStats"
+            },
+            "nodejsFilePaths": {
+              "link": "/learn/manipulating-files/nodejs-file-paths",
+              "label": "components.navigation.learn.manipulatingFiles.links.nodejsFilePaths"
+            },
+            "workingWithFileDescriptorsInNodejs": {
+              "link": "/learn/manipulating-files/working-with-file-descriptors-in-nodejs",
+              "label": "components.navigation.learn.manipulatingFiles.links.workingWithFileDescriptorsInNodejs"
+            },
+            "readingFilesWithNodejs": {
+              "link": "/learn/manipulating-files/reading-files-with-nodejs",
+              "label": "components.navigation.learn.manipulatingFiles.links.readingFilesWithNodejs"
+            },
+            "writingFilesWithNodejs": {
+              "link": "/learn/manipulating-files/writing-files-with-nodejs",
+              "label": "components.navigation.learn.manipulatingFiles.links.writingFilesWithNodejs"
+            },
+            "workingWithFoldersInNodejs": {
+              "link": "/learn/manipulating-files/working-with-folders-in-nodejs",
+              "label": "components.navigation.learn.manipulatingFiles.links.workingWithFoldersInNodejs"
+            }
+          }
+        },
+        "commandLine": {
+          "label": "components.navigation.learn.commandLine.links.commandLine",
+          "items": {
+            "runNodejsScriptsFromTheCommandLine": {
+              "link": "/learn/command-line/run-nodejs-scripts-from-the-command-line",
+              "label": "components.navigation.learn.commandLine.links.runNodejsScriptsFromTheCommandLine"
+            },
+            "howToReadEnvironmentVariablesFromNodejs": {
+              "link": "/learn/command-line/how-to-read-environment-variables-from-nodejs",
+              "label": "components.navigation.learn.commandLine.links.howToReadEnvironmentVariablesFromNodejs"
+            },
+            "howToUseTheNodejsRepl": {
+              "link": "/learn/command-line/how-to-use-the-nodejs-repl",
+              "label": "components.navigation.learn.commandLine.links.howToUseTheNodejsRepl"
+            },
+            "outputToTheCommandLineUsingNodejs": {
+              "link": "/learn/command-line/output-to-the-command-line-using-nodejs",
+              "label": "components.navigation.learn.commandLine.links.outputToTheCommandLineUsingNodejs"
+            },
+            "acceptInputFromTheCommandLineInNodejs": {
+              "link": "/learn/command-line/accept-input-from-the-command-line-in-nodejs",
+              "label": "components.navigation.learn.commandLine.links.acceptInputFromTheCommandLineInNodejs"
+            }
           }
         }
       }
-    }
-  },
-  "download": {
-    "link": "/download",
-    "translationId": "components.header.links.download",
-    "items": {
-      "shaSums": {
-        "link": "https://nodejs.org/dist/{nodeVersion}/SHASUMS256.txt.asc",
-        "translationId": "components.downloadList.links.shaSums.title"
-      },
-      "allDownloads": {
-        "link": "https://nodejs.org/dist/{nodeVersion}/",
-        "translationId": "components.downloadList.links.allDownloads"
-      },
-      "packageManager": {
-        "link": "/download/package-manager",
-        "translationId": "components.downloadList.links.packageManager"
-      },
-      "previousReleases": {
-        "link": "/about/previous-releases",
-        "translationId": "components.downloadList.links.previousReleases"
-      },
-      "nightlyReleases": {
-        "link": "https://nodejs.org/download/nightly/",
-        "translationId": "components.downloadList.links.nightlyReleases"
-      },
-      "unofficialBuilds": {
-        "link": "https://unofficial-builds.nodejs.org/download/",
-        "translationId": "components.downloadList.links.unofficialBuilds"
-      },
-      "buildingFromSource": {
-        "link": "https://github.com/nodejs/node/blob/main/BUILDING.md#building-nodejs-on-supported-platforms",
-        "translationId": "components.downloadList.links.buildingFromSource"
-      },
-      "installingOnLinux": {
-        "link": "https://github.com/nodejs/help/wiki/Installation",
-        "translationId": "components.downloadList.links.installingOnLinux"
-      },
-      "installingOnWsl": {
-        "link": "https://github.com/nodejs/node/blob/main/BUILDING.md#building-nodejs-on-supported-platforms",
-        "translationId": "components.downloadList.links.installingOnWsl"
-      }
-    }
-  },
-  "docs": {
-    "link": "/docs",
-    "translationId": "components.header.links.docs",
-    "items": {
-      "apiLts": {
-        "link": "https://nodejs.org/dist/latest-{ltsNodeVersion}/docs/api",
-        "translationId": "components.navigation.docs.links.apiLts"
-      },
-      "apiCurrent": {
-        "link": "https://nodejs.org/dist/latest-{currentNodeVersion}/docs/api",
-        "translationId": "components.navigation.docs.links.apiCurrent"
-      },
-      "es6": {
-        "link": "/docs/es6",
-        "translationId": "components.navigation.docs.links.es6"
-      },
-      "guides": {
-        "link": "/docs/guides",
-        "translationId": "components.navigation.docs.links.guides"
-      },
-      "dependencies": {
-        "link": "https://github.com/nodejs/node/blob/main/doc/contributing/maintaining/maintaining-dependencies.md",
-        "translationId": "components.navigation.docs.links.dependencies"
-      }
-    }
-  },
-  "getInvolved": {
-    "link": "/get-involved",
-    "translationId": "components.header.links.getInvolved",
-    "items": {
-      "collabSummit": {
-        "link": "/get-involved/collab-summit",
-        "translationId": "components.navigation.getInvolved.links.collabSummit"
-      },
-      "contribute": {
-        "link": "/get-involved/contribute",
-        "translationId": "components.navigation.getInvolved.links.contribute"
-      },
-      "codeOfConduct": {
-        "link": "https://github.com/nodejs/node/blob/main/doc/contributing/code-of-conduct.md",
-        "translationId": "components.navigation.getInvolved.links.codeOfConduct"
+    },
+    "download": {
+      "items": {
+        "shaSums": {
+          "link": "https://nodejs.org/dist/{nodeVersion}/SHASUMS256.txt.asc",
+          "label": "components.downloadList.links.shaSums.title"
+        },
+        "allDownloads": {
+          "link": "https://nodejs.org/dist/{nodeVersion}/",
+          "label": "components.downloadList.links.allDownloads"
+        },
+        "packageManager": {
+          "link": "/download/package-manager",
+          "label": "components.downloadList.links.packageManager"
+        },
+        "previousReleases": {
+          "link": "/about/previous-releases",
+          "label": "components.downloadList.links.previousReleases"
+        },
+        "nightlyReleases": {
+          "link": "https://nodejs.org/download/nightly/",
+          "label": "components.downloadList.links.nightlyReleases"
+        },
+        "unofficialBuilds": {
+          "link": "https://unofficial-builds.nodejs.org/download/",
+          "label": "components.downloadList.links.unofficialBuilds"
+        },
+        "buildingFromSource": {
+          "link": "https://github.com/nodejs/node/blob/main/BUILDING.md#building-nodejs-on-supported-platforms",
+          "label": "components.downloadList.links.buildingFromSource"
+        },
+        "installingOnLinux": {
+          "link": "https://github.com/nodejs/help/wiki/Installation",
+          "label": "components.downloadList.links.installingOnLinux"
+        },
+        "installingOnWsl": {
+          "link": "https://github.com/nodejs/node/blob/main/BUILDING.md#building-nodejs-on-supported-platforms",
+          "label": "components.downloadList.links.installingOnWsl"
+        }
       }
     }
-  },
-  "certification": {
-    "link": "https://openjsf.org/certification",
-    "translationId": "components.header.links.certification",
-    "items": {}
-  },
-  "blog": {
-    "link": "/blog",
-    "translationId": "components.header.links.blog",
-    "items": {}
   }
 }
diff --git a/next.json.mjs b/next.json.mjs
index 0fee7fe10470c..0ec8f4b89ce69 100644
--- a/next.json.mjs
+++ b/next.json.mjs
@@ -4,7 +4,7 @@ import _siteNavigation from './navigation.json' assert { type: 'json' };
 import _siteRedirects from './redirects.json' assert { type: 'json' };
 import _siteConfig from './site.json' assert { type: 'json' };
 
-/** @type {Record<string, import('./types').NavigationEntry>} */
+/** @type {import('./types').SiteNavigation} */
 export const siteNavigation = _siteNavigation;
 
 /** @type {Record<string, import('./types').Redirect[]>} */
diff --git a/package.json b/package.json
index d74bbe3fd9b3a..f989e1547c645 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,10 @@
   "scripts": {
     "scripts:release-post": "cross-env NODE_NO_WARNINGS=1 node scripts/release-post/index.mjs",
     "serve": "cross-env NODE_NO_WARNINGS=1 next dev --turbo",
+    "serve:redesign": "cross-env NEXT_PUBLIC_ENABLE_REDESIGN=true npm run serve",
     "build": "cross-env NODE_NO_WARNINGS=1 next build",
     "start": "cross-env NODE_NO_WARNINGS=1 next start",
-    "deploy": "cross-env NEXT_STATIC_EXPORT=true npm run build",
+    "deploy": "cross-env NEXT_PUBLIC_STATIC_EXPORT=true npm run build",
     "lint:js": "eslint \"**/*.{js,mjs,ts,tsx}\" --cache --cache-strategy=content --cache-location=.eslintjscache",
     "lint:md": "eslint \"**/*.md?(x)\" --cache --cache-strategy=content --cache-location=.eslintmdcache",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",
@@ -55,6 +56,7 @@
     "classnames": "~2.3.2",
     "cross-env": "7.0.3",
     "feed": "~4.2.2",
+    "github-slugger": "~2.0.0",
     "glob": "~10.3.10",
     "gray-matter": "~4.0.3",
     "husky": "8.0.3",
@@ -72,6 +74,7 @@
     "rehype-autolink-headings": "~7.1.0",
     "rehype-slug": "~6.0.0",
     "remark-gfm": "~4.0.0",
+    "remark-reading-time": "~2.0.1",
     "semver": "~7.5.4",
     "sharp": "0.32.6",
     "shikiji": "~0.7.3",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0ae7328b22df7..0ae6b54540434 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -117,11 +117,22 @@ export default {
       'ibm-plex-mono': ['var(--font-ibm-plex-mono)'],
     },
     extend: {
+      screens: {
+        xs: { max: '639px' },
+      },
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-subtle':
+          // @todo: replace colors for proper tailwind vars (?)
+          'linear-gradient(180deg, rgba(246, 247, 249, 0.50) 0%, rgba(246, 247, 249, 0.00) 48.32%)',
+        'gradient-subtle-dark':
+          // @todo: replace colors for proper tailwind vars (?)
+          'linear-gradient(180deg, rgba(44, 52, 55, 0.50) 0%, rgba(44, 52, 55, 0.00) 48.32%)',
       },
       boxShadow: {
+        // @todo: replace colors for proper tailwind vars (?)
         xs: '0px 1px 2px 0px rgba(16, 24, 40, 0.05)',
+        // @todo: replace colors for proper tailwind vars (?)
         lg: '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)',
       },
       spacing: {
@@ -133,4 +144,5 @@ export default {
     },
   },
   darkMode: ['class', '[data-theme="dark"]'],
+  plugins: [require('@savvywombat/tailwindcss-grid-areas')],
 } satisfies Config;
diff --git a/turbo.json b/turbo.json
index f0f9e5baae738..f74c69540a862 100644
--- a/turbo.json
+++ b/turbo.json
@@ -7,7 +7,7 @@
       "persistent": true,
       "env": [
         "NEXT_PUBLIC_VERCEL_ENV",
-        "NEXT_STATIC_EXPORT",
+        "NEXT_PUBLIC_STATIC_EXPORT",
         "NEXT_PUBLIC_BASE_URL",
         "NEXT_PUBLIC_VERCEL_URL",
         "NEXT_PUBLIC_DIST_URL",
@@ -26,7 +26,7 @@
       "outputs": [".next/**", "!.next/cache/**"],
       "env": [
         "NEXT_PUBLIC_VERCEL_ENV",
-        "NEXT_STATIC_EXPORT",
+        "NEXT_PUBLIC_STATIC_EXPORT",
         "NEXT_PUBLIC_BASE_URL",
         "NEXT_PUBLIC_VERCEL_URL",
         "NEXT_PUBLIC_DIST_URL",
@@ -39,7 +39,7 @@
       "persistent": true,
       "env": [
         "NEXT_PUBLIC_VERCEL_ENV",
-        "NEXT_STATIC_EXPORT",
+        "NEXT_PUBLIC_STATIC_EXPORT",
         "NEXT_PUBLIC_BASE_URL",
         "NEXT_PUBLIC_VERCEL_URL",
         "NEXT_PUBLIC_DIST_URL",
@@ -58,7 +58,7 @@
       "outputs": [".next/**", "!.next/cache/**"],
       "env": [
         "NEXT_PUBLIC_VERCEL_ENV",
-        "NEXT_STATIC_EXPORT",
+        "NEXT_PUBLIC_STATIC_EXPORT",
         "NEXT_PUBLIC_BASE_URL",
         "NEXT_PUBLIC_VERCEL_URL",
         "NEXT_PUBLIC_DIST_URL",

From 8efb5b3cf7bb90a7e29ce4ffb8064eed5df5b8d8 Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Tue, 28 Nov 2023 23:14:52 +0100
Subject: [PATCH 10/26] chore: moved package to prod deps

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index f989e1547c645..18d56bc054f56 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
+    "@savvywombat/tailwindcss-grid-areas": "~3.1.0",
     "@sentry/nextjs": "~7.84.0",
     "@types/node": "20.8.10",
     "@vcarl/remark-headings": "~0.1.0",

From 86c9da114ee1dfe290ee7f40fde7fe244aa8257d Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Tue, 28 Nov 2023 23:21:12 +0100
Subject: [PATCH 11/26] fix: mocked module

---
 components/__mocks__/github-slugger.mjs | 7 +++++++
 jest.config.mjs                         | 1 +
 2 files changed, 8 insertions(+)
 create mode 100644 components/__mocks__/github-slugger.mjs

diff --git a/components/__mocks__/github-slugger.mjs b/components/__mocks__/github-slugger.mjs
new file mode 100644
index 0000000000000..31a075307647b
--- /dev/null
+++ b/components/__mocks__/github-slugger.mjs
@@ -0,0 +1,7 @@
+class GitHubSlugger {
+  slug() {
+    return 'mock-slug';
+  }
+}
+
+export default GitHubSlugger;
diff --git a/jest.config.mjs b/jest.config.mjs
index 0e4df6d9c01f9..6065ec5018b2c 100644
--- a/jest.config.mjs
+++ b/jest.config.mjs
@@ -15,6 +15,7 @@ const customJestConfig = {
   moduleNameMapper: {
     'next/router': '<rootDir>/components/__mocks__/next-router.mjs',
     'next-intl': '<rootDir>/components/__mocks__/next-intl.mjs',
+    'github-slugger': '<rootDir>/components/__mocks__/github-slugger.mjs',
   },
 };
 

From e914814d61c962b5595cabd51db6baa63a0ad1c6 Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Wed, 29 Nov 2023 14:39:54 +0100
Subject: [PATCH 12/26] chore: design fixes

---
 .storybook/main.ts                         | 9 ++-------
 components/Common/Select/index.module.css  | 1 -
 components/Common/Sidebar/index.module.css | 5 ++---
 layouts/New/layouts.module.css             | 2 --
 styles/new/base.css                        | 6 +++++-
 5 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 1da4e3118b92b..e559e3a2fed19 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -5,12 +5,7 @@ const rootClasses = classNames(
   // note: this is hard-coded sadly as next/font can only be loaded within next.js context
   '__variable_open-sans-normal',
   // note: this is hard-coded sadly as next/font can only be loaded within next.js context
-  '__variable_ibm-plex-mono-normal-600',
-  'font-open-sans',
-  'bg-white',
-  'text-neutral-950',
-  'dark:bg-neutral-950',
-  'dark:text-white'
+  '__variable_ibm-plex-mono-normal-600'
 );
 
 const config: StorybookConfig = {
@@ -27,7 +22,7 @@ const config: StorybookConfig = {
     // This `<style>` is necessary to simulate what `next-themes` (ThemeProvider) does on real applications
     // `next-theme` automatically injects the color-scheme based on the system preference or the current applied theme
     // on Storybook we don't use `next-theme` as we want to simulate themes
-    '<style>:root { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } #storybook-root { width: 100%; height: 100%; }</style>' +
+    '<style>:root { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; }</style>' +
     // This adds the base styling for dark/light themes within Storybook. This is a Storybook-only style
     `<body class="${rootClasses}"></body>`,
   addons: [
diff --git a/components/Common/Select/index.module.css b/components/Common/Select/index.module.css
index 81c9e1d04a983..aa7e4a571639d 100644
--- a/components/Common/Select/index.module.css
+++ b/components/Common/Select/index.module.css
@@ -7,7 +7,6 @@
   .label {
     @apply block
       w-full
-      pb-2
       text-sm
       font-medium
       text-neutral-800
diff --git a/components/Common/Sidebar/index.module.css b/components/Common/Sidebar/index.module.css
index 88a4fa8e21c3d..fe27b78e7c756 100644
--- a/components/Common/Sidebar/index.module.css
+++ b/components/Common/Sidebar/index.module.css
@@ -21,8 +21,7 @@
   }
 
   > div {
-    @apply hidden
-      w-full
-      xs:block;
+    @apply w-full
+      sm:hidden;
   }
 }
diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css
index 58c7e117090a6..3a402f67e5555 100644
--- a/layouts/New/layouts.module.css
+++ b/layouts/New/layouts.module.css
@@ -8,8 +8,6 @@
 
 .articleLayout {
   @apply grid
-    min-h-full
-    min-w-full
     grid-rows-[1fr]
     overflow-hidden
     grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
diff --git a/styles/new/base.css b/styles/new/base.css
index 8e47cdf2fa3fd..1d0cfd10588bf 100644
--- a/styles/new/base.css
+++ b/styles/new/base.css
@@ -6,7 +6,11 @@ html,
 body {
   @apply h-full
     w-full
-    overflow-hidden
+    overflow-hidden;
+}
+
+body {
+  @apply scroll-smooth
     bg-white
     font-open-sans
     text-neutral-950

From 5035a7928cebf2301f223f213173b128ea8c4a85 Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Wed, 29 Nov 2023 14:52:19 +0100
Subject: [PATCH 13/26] fix: last story fix

---
 components/Common/Select/index.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/Common/Select/index.stories.tsx b/components/Common/Select/index.stories.tsx
index 8cf26f8c2094b..b03d16f310c83 100644
--- a/components/Common/Select/index.stories.tsx
+++ b/components/Common/Select/index.stories.tsx
@@ -65,6 +65,7 @@ export const DropdownLabel: Story = {
       },
     ],
     placeholder: 'Select a guide',
+    label: 'Getting Started',
   },
 };
 

From fbf473924b9d0d86376f2eeb59e85d175e91c38b Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Wed, 29 Nov 2023 18:49:21 +0100
Subject: [PATCH 14/26] meta: mismatch of lock file

---
 package-lock.json | 113 ++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 110 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c4ace5c317a5e..e033e76fbc6b0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "nodejs-org-fork",
+  "name": "nodejs.org",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -17,6 +17,7 @@
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-toast": "^1.1.5",
+        "@savvywombat/tailwindcss-grid-areas": "~3.1.0",
         "@sentry/nextjs": "~7.84.0",
         "@types/node": "20.8.10",
         "@vcarl/remark-headings": "~0.1.0",
@@ -25,6 +26,7 @@
         "classnames": "~2.3.2",
         "cross-env": "7.0.3",
         "feed": "~4.2.2",
+        "github-slugger": "~2.0.0",
         "glob": "~10.3.10",
         "gray-matter": "~4.0.3",
         "husky": "8.0.3",
@@ -42,6 +44,7 @@
         "rehype-autolink-headings": "~7.1.0",
         "rehype-slug": "~6.0.0",
         "remark-gfm": "~4.0.0",
+        "remark-reading-time": "~2.0.1",
         "semver": "~7.5.4",
         "sharp": "0.32.6",
         "shikiji": "~0.7.3",
@@ -5277,6 +5280,20 @@
       "integrity": "sha512-2/U3GXA6YiPYQDLGwtGlnNgKYBSwCFIHf8Y9LUY5VATHdtbLlU0Y1R3QoBnT0aB4qv/BEiVVsj7LJXoQCgJ2vA==",
       "dev": true
     },
+    "node_modules/@savvywombat/tailwindcss-grid-areas": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@savvywombat/tailwindcss-grid-areas/-/tailwindcss-grid-areas-3.1.0.tgz",
+      "integrity": "sha512-CaNoCS7Zr3OeDDhCSXXU7dnqYjehdjNmDy6NdFxkLAyDcxA8YTI3rjPm6X+bTWyYINHXr+RONG3UKWrSv2UYSw==",
+      "dependencies": {
+        "lodash": "^4.17.21"
+      },
+      "engines": {
+        "node": ">=14.18.2"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.0.1"
+      }
+    },
     "node_modules/@sentry-internal/tracing": {
       "version": "7.84.0",
       "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.84.0.tgz",
@@ -14768,6 +14785,28 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/estree-util-value-to-estree": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/estree-util-value-to-estree/-/estree-util-value-to-estree-1.3.0.tgz",
+      "integrity": "sha512-Y+ughcF9jSUJvncXwqRageavjrNPAI+1M/L3BI3PyLp1nmgYTGUXU6t5z1Y7OWuThoDdhPME07bQU+d5LxdJqw==",
+      "dependencies": {
+        "is-plain-obj": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/estree-util-value-to-estree/node_modules/is-plain-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/estree-util-visit": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-1.2.1.tgz",
@@ -19583,8 +19622,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -25198,6 +25236,11 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/reading-time": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/reading-time/-/reading-time-1.5.0.tgz",
+      "integrity": "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg=="
+    },
     "node_modules/recast": {
       "version": "0.23.4",
       "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.4.tgz",
@@ -31744,6 +31787,70 @@
         "prettier": ">=1.0.0"
       }
     },
+    "node_modules/remark-reading-time": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/remark-reading-time/-/remark-reading-time-2.0.1.tgz",
+      "integrity": "sha512-fy4BKy9SRhtYbEHvp6AItbRTnrhiDGbqLQTSYVbQPGuRCncU1ubSsh9p/W5QZSxtYcUXv8KGL0xBgPLyNJA1xw==",
+      "dependencies": {
+        "estree-util-is-identifier-name": "^2.0.0",
+        "estree-util-value-to-estree": "^1.3.0",
+        "reading-time": "^1.3.0",
+        "unist-util-visit": "^3.1.0"
+      }
+    },
+    "node_modules/remark-reading-time/node_modules/@types/unist": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
+      "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+    },
+    "node_modules/remark-reading-time/node_modules/estree-util-is-identifier-name": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-2.1.0.tgz",
+      "integrity": "sha512-bEN9VHRyXAUOjkKVQVvArFym08BTWB0aJPppZZr0UNyAqWsLaVfAqP7hbaTJjzHifmB5ebnR8Wm7r7yGN/HonQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-reading-time/node_modules/unist-util-is": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz",
+      "integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==",
+      "dependencies": {
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-reading-time/node_modules/unist-util-visit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-3.1.0.tgz",
+      "integrity": "sha512-Szoh+R/Ll68QWAyQyZZpQzZQm2UPbxibDvaY8Xc9SUtYgPsDzx5AWSk++UUt2hJuow8mvwR+rG+LQLw+KsuAKA==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0",
+        "unist-util-visit-parents": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-reading-time/node_modules/unist-util-visit-parents": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-4.1.1.tgz",
+      "integrity": "sha512-1xAFJXAKpnnJl8G7K5KgU7FY55y3GcLIXqkzUj5QF/QVP7biUm0K0O2oqVkYsdjzJKifYeWn9+o6piAK2hGSHw==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-rehype": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.0.0.tgz",

From 92741152e3bb1316e1ddc6f718e80fe8beef9666 Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Wed, 29 Nov 2023 23:15:20 +0100
Subject: [PATCH 15/26] fix: fixed styles and minor content-wise bug fixes

---
 app/[locale]/[[...path]]/page.tsx             |  2 +-
 components/Common/MetaBar/index.module.css    |  4 +++-
 components/Common/MetaBar/index.tsx           |  5 +++--
 components/Common/Select/index.module.css     |  1 +
 components/Common/Select/index.tsx            |  2 +-
 components/Common/Sidebar/index.module.css    |  1 +
 .../Downloads/DownloadReleasesTable.tsx       | 22 ++++++-------------
 hooks/react-client/useClientContext.ts        | 13 ++---------
 layouts/New/layouts.module.css                |  9 ++++----
 next-data/generators/releaseData.mjs          |  2 +-
 pages/en/about/previous-releases.mdx          | 12 +---------
 providers/matterProvider.tsx                  | 15 ++++---------
 styles/new/markdown.css                       | 18 ++++++++++-----
 tailwind.config.ts                            | 12 +++-------
 14 files changed, 46 insertions(+), 72 deletions(-)

diff --git a/app/[locale]/[[...path]]/page.tsx b/app/[locale]/[[...path]]/page.tsx
index dd2cd4068c33a..3c4aac114dbbb 100644
--- a/app/[locale]/[[...path]]/page.tsx
+++ b/app/[locale]/[[...path]]/page.tsx
@@ -102,7 +102,7 @@ const getPage: FC<DynamicParams> = async ({ params }) => {
     const sharedContext = {
       frontmatter,
       headings,
-      pathname,
+      pathname: `/${pathname}`,
       readingTime,
       filename,
     };
diff --git a/components/Common/MetaBar/index.module.css b/components/Common/MetaBar/index.module.css
index c22954f0fa408..e03ab0c3c64dd 100644
--- a/components/Common/MetaBar/index.module.css
+++ b/components/Common/MetaBar/index.module.css
@@ -5,9 +5,11 @@
     gap-8
     border-l
     border-l-neutral-200
-    p-6
+    px-4
+    py-6
     dark:border-l-neutral-900
     md:max-w-xs
+    lg:px-6
     xs:mt-8
     xs:w-full
     xs:border-l-0
diff --git a/components/Common/MetaBar/index.tsx b/components/Common/MetaBar/index.tsx
index 92ebae98c250f..2dfcadda4eda5 100644
--- a/components/Common/MetaBar/index.tsx
+++ b/components/Common/MetaBar/index.tsx
@@ -35,8 +35,9 @@ const MetaBar: FC<MetaBarProps> = ({ items, headings }) => {
             <dd>{value}</dd>
           </Fragment>
         ))}
+
         {heading.length > 0 && (
-          <Fragment key="tableOfContents">
+          <>
             <dt>{t('components.metabar.tableOfContents')}</dt>
             <dd>
               <ol>
@@ -47,7 +48,7 @@ const MetaBar: FC<MetaBarProps> = ({ items, headings }) => {
                 ))}
               </ol>
             </dd>
-          </Fragment>
+          </>
         )}
       </dl>
     </div>
diff --git a/components/Common/Select/index.module.css b/components/Common/Select/index.module.css
index aa7e4a571639d..fc5d592b61074 100644
--- a/components/Common/Select/index.module.css
+++ b/components/Common/Select/index.module.css
@@ -15,6 +15,7 @@
 
   .trigger {
     @apply inline-flex
+      h-12
       w-full
       min-w-[17rem]
       items-center
diff --git a/components/Common/Select/index.tsx b/components/Common/Select/index.tsx
index 92324d0808796..8df3ea340ccb3 100644
--- a/components/Common/Select/index.tsx
+++ b/components/Common/Select/index.tsx
@@ -67,7 +67,7 @@ const Select: FC<SelectProps> = ({
           {label}
         </label>
       )}
-      <Primitive.Root defaultValue={defaultValue} onValueChange={onChange}>
+      <Primitive.Root value={defaultValue} onValueChange={onChange}>
         <Primitive.Trigger
           className={styles.trigger}
           aria-label={label}
diff --git a/components/Common/Sidebar/index.module.css b/components/Common/Sidebar/index.module.css
index fe27b78e7c756..1da3bbee4310a 100644
--- a/components/Common/Sidebar/index.module.css
+++ b/components/Common/Sidebar/index.module.css
@@ -12,6 +12,7 @@
     dark:border-r-neutral-900
     dark:bg-neutral-950
     md:max-w-xs
+    lg:px-6
     xs:w-full
     xs:border-r-0;
 
diff --git a/components/Downloads/DownloadReleasesTable.tsx b/components/Downloads/DownloadReleasesTable.tsx
index cd445350a6004..c40de0971e2d9 100644
--- a/components/Downloads/DownloadReleasesTable.tsx
+++ b/components/Downloads/DownloadReleasesTable.tsx
@@ -17,29 +17,21 @@ const DownloadReleasesTable: FC = async () => {
     <table id="tbVersions" className="download-table full-width">
       <thead>
         <tr>
-          <td>Version</td>
-          <td>LTS</td>
-          <td>Date</td>
-          <td>V8</td>
-          <td>npm</td>
-          <td>
-            NODE_MODULE_VERSION<a href="#ref-1">[1]</a>
-            <span id="backref-1"></span>
-          </td>
-          <td></td>
+          <th>Node.js Version</th>
+          <th>Codename</th>
+          <th>Release Date</th>
+          <th>npm</th>
         </tr>
       </thead>
       <tbody>
         {releaseData.map(release => (
           <tr key={release.major}>
-            <td data-label="Version">Node.js {release.version}</td>
-            <td data-label="LTS">{release.codename}</td>
+            <td data-label="Version">v{release.version}</td>
+            <td data-label="LTS">{release.codename || '-'}</td>
             <td data-label="Date">
               <time>{release.releaseDate}</time>
             </td>
-            <td data-label="V8">{release.v8}</td>
-            <td data-label="npm">{release.npm}</td>
-            <td data-label="NODE_MODULE_VERSION">{release.modules}</td>
+            <td data-label="npm">v{release.npm}</td>
             <td className="download-table-last">
               <a
                 href={`https://nodejs.org/download/release/${release.versionWithPrefix}/`}
diff --git a/hooks/react-client/useClientContext.ts b/hooks/react-client/useClientContext.ts
index 96e0f726a2b2e..3da7aa1401931 100644
--- a/hooks/react-client/useClientContext.ts
+++ b/hooks/react-client/useClientContext.ts
@@ -2,23 +2,14 @@
 
 import { useContext } from 'react';
 
-import { usePathname } from '@/navigation.mjs';
 import { MatterContext } from '@/providers/matterProvider';
 import type { ClientSharedServerContext } from '@/types';
 
 const useClientContext = (): ClientSharedServerContext => {
-  const { frontmatter, headings, readingTime, filename } =
+  const { frontmatter, pathname, headings, readingTime, filename } =
     useContext(MatterContext);
 
-  const pathname = usePathname();
-
-  return {
-    pathname: pathname || '',
-    frontmatter,
-    headings,
-    readingTime,
-    filename,
-  };
+  return { pathname, frontmatter, headings, readingTime, filename };
 };
 
 export default useClientContext;
diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css
index 3a402f67e5555..3af62e5eb29d6 100644
--- a/layouts/New/layouts.module.css
+++ b/layouts/New/layouts.module.css
@@ -11,7 +11,7 @@
     grid-rows-[1fr]
     overflow-hidden
     grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
-    sm:grid-cols-[auto_1fr_auto]
+    sm:grid-cols-[200px_1fr_200px]
     xl:grid-cols-[320px_1fr_320px]
     xs:block
     xs:overflow-auto;
@@ -25,7 +25,7 @@
       w-full
       flex-col
       items-start
-      gap-8
+      gap-6
       self-stretch
       overflow-y-auto
       overflow-x-hidden
@@ -34,9 +34,10 @@
       py-12
       grid-in-[main]
       dark:bg-gradient-subtle-dark
-      xs:!bg-none
+      xs:bg-none
       xs:px-4
-      xs:py-4;
+      xs:py-4
+      xs:dark:bg-none;
   }
 
   > *:nth-child(3) {
diff --git a/next-data/generators/releaseData.mjs b/next-data/generators/releaseData.mjs
index 9d5ce1b06996c..6429dca28c4f4 100644
--- a/next-data/generators/releaseData.mjs
+++ b/next-data/generators/releaseData.mjs
@@ -55,7 +55,7 @@ const generateReleaseData = async () => {
         major: latestVersion.semver.major,
         version: latestVersion.semver.raw,
         versionWithPrefix: `v${latestVersion.semver.raw}`,
-        codename: major.codename || '',
+        codename: major.support.codename || '',
         isLts: status === 'Active LTS' || status === 'Maintenance LTS',
         npm: latestVersion.dependencies.npm || '',
         v8: latestVersion.dependencies.v8 || '',
diff --git a/pages/en/about/previous-releases.mdx b/pages/en/about/previous-releases.mdx
index 706c3b3fed6bc..8e4e418a7cb01 100644
--- a/pages/en/about/previous-releases.mdx
+++ b/pages/en/about/previous-releases.mdx
@@ -18,14 +18,4 @@ Full details regarding Node.js release schedule are available [on GitHub](https:
 
 ### Looking for latest release of a version branch?
 
-<section>
-  <DownloadReleasesTable />
-
-  <small>
-    [<a href="#backref-1">1</a>]: <code>NODE_MODULE_VERSION</code> refers to the ABI (application binary
-    interface) version number of Node.js, used to determine which versions of
-    Node.js compiled C++ add-on binaries can be loaded in to without needing to be
-    re-compiled. It used to be stored as hex value in earlier versions, but is now
-    represented as an integer.
-  </small>
-</section>
+<DownloadReleasesTable />
diff --git a/providers/matterProvider.tsx b/providers/matterProvider.tsx
index 74d6a42791f07..0da8612a406b1 100644
--- a/providers/matterProvider.tsx
+++ b/providers/matterProvider.tsx
@@ -9,6 +9,7 @@ import type { LegacyFrontMatter } from '@/types';
 
 type MatterContext = {
   frontmatter: LegacyFrontMatter;
+  pathname: string;
   headings: Heading[];
   readingTime: ReadTimeResults;
   filename: string;
@@ -16,6 +17,7 @@ type MatterContext = {
 
 export const MatterContext = createContext<MatterContext>({
   frontmatter: {},
+  pathname: '',
   headings: [],
   readingTime: { text: '', minutes: 0, time: 0, words: 0 },
   filename: '',
@@ -24,15 +26,6 @@ export const MatterContext = createContext<MatterContext>({
 type MatterProviderProps = PropsWithChildren<MatterContext>;
 
 export const MatterProvider: FC<MatterProviderProps> = ({
-  frontmatter,
-  headings,
-  readingTime,
-  filename,
   children,
-}) => (
-  <MatterContext.Provider
-    value={{ frontmatter, headings, readingTime, filename }}
-  >
-    {children}
-  </MatterContext.Provider>
-);
+  ...data
+}) => <MatterContext.Provider value={data}>{children}</MatterContext.Provider>;
diff --git a/styles/new/markdown.css b/styles/new/markdown.css
index 5585065ae3a0b..5984290e8405f 100644
--- a/styles/new/markdown.css
+++ b/styles/new/markdown.css
@@ -57,7 +57,8 @@
   a,
   a:link,
   a:visited {
-    @apply text-green-600
+    @apply inline-block
+      text-green-600
       dark:text-green-400;
 
     &:hover {
@@ -68,7 +69,8 @@
 
   ul {
     @apply list-disc
-      px-5
+      pl-9
+      pr-5
       leading-6
       text-neutral-900
       dark:text-white;
@@ -104,7 +106,9 @@
         py-2
         text-neutral-900
         dark:border-neutral-800
-        dark:text-white;
+        dark:text-white
+        xs:block
+        xs:border-l-0;
 
       > a {
         @apply pr-2;
@@ -116,12 +120,16 @@
     }
 
     tr:last-child td {
-      @apply border-b-0;
+      @apply sm:border-b-0;
+
+      &:last-child {
+        @apply xs:border-b-0;
+      }
     }
 
     td:first-child,
     th:first-child {
-      @apply border-l-0;
+      @apply sm:border-l-0;
     }
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0ae6b54540434..f958c59964f42 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -117,9 +117,7 @@ export default {
       'ibm-plex-mono': ['var(--font-ibm-plex-mono)'],
     },
     extend: {
-      screens: {
-        xs: { max: '639px' },
-      },
+      screens: { xs: { max: '639px' } },
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-subtle':
@@ -135,12 +133,8 @@ export default {
         // @todo: replace colors for proper tailwind vars (?)
         lg: '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)',
       },
-      spacing: {
-        '4.5': '1.125rem',
-      },
-      aria: {
-        current: 'current="page"',
-      },
+      spacing: { '4.5': '1.125rem' },
+      aria: { current: 'current="page"' },
     },
   },
   darkMode: ['class', '[data-theme="dark"]'],

From b825e28833e15d018dc28225e48107ecf3bb7561 Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Wed, 29 Nov 2023 23:19:32 +0100
Subject: [PATCH 16/26] fix: home icon go home

---
 components/Containers/NavBar/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Containers/NavBar/index.tsx b/components/Containers/NavBar/index.tsx
index 7a45de8b208d3..bc1d6c322b084 100644
--- a/components/Containers/NavBar/index.tsx
+++ b/components/Containers/NavBar/index.tsx
@@ -38,10 +38,10 @@ const NavBar: FC<NavbarProps> = ({
   return (
     <nav className={`${style.container}`}>
       <div className={style.nodeIconAndMobileItemsToggler}>
-        <div className={style.nodeIconWrapper}>
+        <Link className={style.nodeIconWrapper} href="/">
           <NodejsDark className={style.nodejsLogoDark} />
           <NodejsLight className={style.nodejsLogoLight} />
-        </div>
+        </Link>
 
         <Label.Root
           onClick={() => setIsMenuOpen(prev => !prev)}

From c32381bde35c46d53921a70c2b303c8952945a31 Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Wed, 29 Nov 2023 23:20:19 +0100
Subject: [PATCH 17/26] chore: home aria label

---
 components/Containers/NavBar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Containers/NavBar/index.tsx b/components/Containers/NavBar/index.tsx
index bc1d6c322b084..08321576441d1 100644
--- a/components/Containers/NavBar/index.tsx
+++ b/components/Containers/NavBar/index.tsx
@@ -38,7 +38,7 @@ const NavBar: FC<NavbarProps> = ({
   return (
     <nav className={`${style.container}`}>
       <div className={style.nodeIconAndMobileItemsToggler}>
-        <Link className={style.nodeIconWrapper} href="/">
+        <Link className={style.nodeIconWrapper} href="/" aria-label="Home">
           <NodejsDark className={style.nodejsLogoDark} />
           <NodejsLight className={style.nodejsLogoLight} />
         </Link>

From 4fa52b7f4d2b46e3c215a8930c2a56dde2198e95 Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Thu, 30 Nov 2023 00:10:37 +0100
Subject: [PATCH 18/26] chore: some minimum design fixes

---
 components/Common/Select/index.module.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/Common/Select/index.module.css b/components/Common/Select/index.module.css
index fc5d592b61074..743ddbce652d0 100644
--- a/components/Common/Select/index.module.css
+++ b/components/Common/Select/index.module.css
@@ -15,7 +15,7 @@
 
   .trigger {
     @apply inline-flex
-      h-12
+      h-11
       w-full
       min-w-[17rem]
       items-center
@@ -101,7 +101,8 @@
 
 .inline {
   .trigger {
-    @apply min-w-fit
+    @apply h-auto
+      min-w-fit
       px-2.5
       py-2
       text-sm

From 40999396b281a8a22b1ae4640474e1a4d6444a5d Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Thu, 30 Nov 2023 02:24:41 +0300
Subject: [PATCH 19/26] refactor: paddings merged

---
 layouts/New/layouts.module.css | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css
index 3af62e5eb29d6..a79fbd52c64e8 100644
--- a/layouts/New/layouts.module.css
+++ b/layouts/New/layouts.module.css
@@ -30,13 +30,11 @@
       overflow-y-auto
       overflow-x-hidden
       bg-gradient-subtle
-      px-12
-      py-12
+      p-12
       grid-in-[main]
       dark:bg-gradient-subtle-dark
       xs:bg-none
-      xs:px-4
-      xs:py-4
+      xs:p-4
       xs:dark:bg-none;
   }
 

From 13fcaadbc02584eedb06e6dfe5210b66a92fadc5 Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Thu, 30 Nov 2023 02:26:37 +0300
Subject: [PATCH 20/26] refactor: footer top border added

---
 components/Containers/Footer/index.module.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/Containers/Footer/index.module.css b/components/Containers/Footer/index.module.css
index 6335deef1adea..f34359598fef5 100644
--- a/components/Containers/Footer/index.module.css
+++ b/components/Containers/Footer/index.module.css
@@ -3,8 +3,11 @@
     flex-col
     items-center
     gap-6
+    border-t
+    border-neutral-200
     px-8
     py-4
+    dark:border-neutral-900
     md:flex-row
     md:justify-between
     md:py-5;

From c09c328b51535c804b915523b8967d18effb61dd Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Thu, 30 Nov 2023 02:47:12 +0300
Subject: [PATCH 21/26] fix: contrast ratio on dark mode breadcrumb

---
 components/Common/Breadcrumbs/BreadcrumbLink/index.module.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css b/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
index 91747b6ebaa11..d82fa364b5b8f 100644
--- a/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
+++ b/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
@@ -5,7 +5,8 @@
       px-2
       py-1
       font-semibold
-      text-white;
+      text-white
+      dark:text-white;
 
     &:hover {
       @apply bg-green-700

From 37b392873c9398a58739bad83d81647328712bd0 Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Thu, 30 Nov 2023 02:56:01 +0300
Subject: [PATCH 22/26] fix: colspan changed to 2 for missing border

---
 components/Downloads/DownloadReleasesTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Downloads/DownloadReleasesTable.tsx b/components/Downloads/DownloadReleasesTable.tsx
index c40de0971e2d9..9c6d775623c0f 100644
--- a/components/Downloads/DownloadReleasesTable.tsx
+++ b/components/Downloads/DownloadReleasesTable.tsx
@@ -20,7 +20,7 @@ const DownloadReleasesTable: FC = async () => {
           <th>Node.js Version</th>
           <th>Codename</th>
           <th>Release Date</th>
-          <th>npm</th>
+          <th colSpan={2}>npm</th>
         </tr>
       </thead>
       <tbody>

From 4b2624fc388a4def550d8bafd9465bf0286454b4 Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Thu, 30 Nov 2023 18:34:22 +0300
Subject: [PATCH 23/26] fix: old layout table heading

---
 styles/old/page-modules/download.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/styles/old/page-modules/download.css b/styles/old/page-modules/download.css
index a77558b89c085..3f2491625d86f 100644
--- a/styles/old/page-modules/download.css
+++ b/styles/old/page-modules/download.css
@@ -160,6 +160,11 @@ h5.download-table-previous-releases-header {
 
   > thead {
     font-weight: 600;
+
+    th:last-child {
+      text-align: left;
+      padding-left: 1.5rem;
+    }
   }
 
   > tbody {

From 5c87ae1d1d7ed07584d46a893418167e7cb2f084 Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Fri, 1 Dec 2023 00:56:52 +0300
Subject: [PATCH 24/26] refactor: gradient and shadow colors replaced with
 theme colors

---
 tailwind.config.ts | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index f958c59964f42..86ebac9d2a714 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -92,6 +92,7 @@ export default {
       white: '#FFFFFF',
       'white-opaque': 'rgba(255, 255, 255, 0.5)',
       transparent: 'transparent',
+      shadow: '#101828',
     },
     fontSize: {
       xs: ['0.75rem', '1rem'],
@@ -121,17 +122,13 @@ export default {
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-subtle':
-          // @todo: replace colors for proper tailwind vars (?)
-          'linear-gradient(180deg, rgba(246, 247, 249, 0.50) 0%, rgba(246, 247, 249, 0.00) 48.32%)',
+          'linear-gradient(180deg, theme(colors.neutral.100)80 0%, theme(colors.neutral.100)00 48.32%)',
         'gradient-subtle-dark':
-          // @todo: replace colors for proper tailwind vars (?)
-          'linear-gradient(180deg, rgba(44, 52, 55, 0.50) 0%, rgba(44, 52, 55, 0.00) 48.32%)',
+          'linear-gradient(180deg, theme(colors.neutral.900)80 0%, theme(colors.neutral.900)00 48.32%)',
       },
       boxShadow: {
-        // @todo: replace colors for proper tailwind vars (?)
-        xs: '0px 1px 2px 0px rgba(16, 24, 40, 0.05)',
-        // @todo: replace colors for proper tailwind vars (?)
-        lg: '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)',
+        xs: '0px 1px 2px 0px theme(colors.shadow)0d',
+        lg: '0px 4px 6px -2px theme(colors.shadow)08, 0px 12px 16px -4px theme(colors.shadow)14',
       },
       spacing: { '4.5': '1.125rem' },
       aria: { current: 'current="page"' },

From dc171eac036c41fe4d6b3789762c94ee49dd1ea6 Mon Sep 17 00:00:00 2001
From: Claudio Wunder <cwunder@hubspot.com>
Date: Thu, 30 Nov 2023 23:34:49 +0100
Subject: [PATCH 25/26] chore: moved the `with` components to `components`

---
 {layouts/New => components}/withBreadcrumbs.tsx |  0
 {layouts/New => components}/withFooter.tsx      |  0
 {layouts/New => components}/withMetaBar.tsx     |  0
 {layouts/New => components}/withNavBar.tsx      |  0
 {layouts/New => components}/withSideBar.tsx     | 10 ++++++++--
 layouts/New/About.tsx                           |  8 ++++----
 layouts/New/Default.tsx                         |  4 ++--
 7 files changed, 14 insertions(+), 8 deletions(-)
 rename {layouts/New => components}/withBreadcrumbs.tsx (100%)
 rename {layouts/New => components}/withFooter.tsx (100%)
 rename {layouts/New => components}/withMetaBar.tsx (100%)
 rename {layouts/New => components}/withNavBar.tsx (100%)
 rename {layouts/New => components}/withSideBar.tsx (61%)

diff --git a/layouts/New/withBreadcrumbs.tsx b/components/withBreadcrumbs.tsx
similarity index 100%
rename from layouts/New/withBreadcrumbs.tsx
rename to components/withBreadcrumbs.tsx
diff --git a/layouts/New/withFooter.tsx b/components/withFooter.tsx
similarity index 100%
rename from layouts/New/withFooter.tsx
rename to components/withFooter.tsx
diff --git a/layouts/New/withMetaBar.tsx b/components/withMetaBar.tsx
similarity index 100%
rename from layouts/New/withMetaBar.tsx
rename to components/withMetaBar.tsx
diff --git a/layouts/New/withNavBar.tsx b/components/withNavBar.tsx
similarity index 100%
rename from layouts/New/withNavBar.tsx
rename to components/withNavBar.tsx
diff --git a/layouts/New/withSideBar.tsx b/components/withSideBar.tsx
similarity index 61%
rename from layouts/New/withSideBar.tsx
rename to components/withSideBar.tsx
index 6aa0b4c895544..7bd44e71f8220 100644
--- a/layouts/New/withSideBar.tsx
+++ b/components/withSideBar.tsx
@@ -1,13 +1,19 @@
+import type { RichTranslationValues } from 'next-intl';
 import type { FC } from 'react';
 
 import SideBar from '@/components/Common/Sidebar';
 import { useSiteNavigation } from '@/hooks/server';
 import type { NavigationKeys } from '@/types';
 
-const WithSideBar: FC<{ keys: NavigationKeys[] }> = ({ keys }) => {
+type WithSideBarProps = {
+  keys: NavigationKeys[];
+  context?: Record<string, RichTranslationValues>;
+};
+
+const WithSideBar: FC<WithSideBarProps> = ({ keys, context }) => {
   const { getSideNavigation } = useSiteNavigation();
 
-  const mappedSidebarItems = getSideNavigation(keys).map(
+  const mappedSidebarItems = getSideNavigation(keys, context).map(
     ([, { label, items }]) => ({
       groupName: label,
       items: items.map(([, { label, link }]) => ({ title: label, url: link })),
diff --git a/layouts/New/About.tsx b/layouts/New/About.tsx
index 32687e0b9629d..21649eb69e4e2 100644
--- a/layouts/New/About.tsx
+++ b/layouts/New/About.tsx
@@ -1,10 +1,10 @@
 import type { FC, PropsWithChildren } from 'react';
 
+import WithBreadcrumbs from '@/components/withBreadcrumbs';
+import WithMetaBar from '@/components/withMetaBar';
+import WithNavBar from '@/components/withNavBar';
+import WithSideBar from '@/components/withSideBar';
 import ArticleLayout from '@/layouts/New/Article';
-import WithBreadcrumbs from '@/layouts/New/withBreadcrumbs';
-import WithMetaBar from '@/layouts/New/withMetaBar';
-import WithNavBar from '@/layouts/New/withNavBar';
-import WithSideBar from '@/layouts/New/withSideBar';
 
 const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
diff --git a/layouts/New/Default.tsx b/layouts/New/Default.tsx
index 78cc4cdfec636..60a3d73e2173c 100644
--- a/layouts/New/Default.tsx
+++ b/layouts/New/Default.tsx
@@ -1,7 +1,7 @@
 import type { FC, PropsWithChildren } from 'react';
 
-import WithFooter from '@/layouts/New/withFooter';
-import WithNavBar from '@/layouts/New/withNavBar';
+import WithFooter from '@/components/withFooter';
+import WithNavBar from '@/components/withNavBar';
 
 const DefaultLayout: FC<PropsWithChildren> = ({ children }) => (
   <>

From 0d7c5a2f9fbe873d6eb0767cbce1d2f5baafdbb3 Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Fri, 1 Dec 2023 18:40:27 +0300
Subject: [PATCH 26/26] refactor: tw config alpha channel and xl content
 padding

---
 layouts/New/layouts.module.css | 1 +
 tailwind.config.ts             | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css
index a79fbd52c64e8..fb514053ced60 100644
--- a/layouts/New/layouts.module.css
+++ b/layouts/New/layouts.module.css
@@ -33,6 +33,7 @@
       p-12
       grid-in-[main]
       dark:bg-gradient-subtle-dark
+      xl:px-[4.5rem]
       xs:bg-none
       xs:p-4
       xs:dark:bg-none;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 86ebac9d2a714..7d806ceb937b0 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -122,13 +122,13 @@ export default {
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-subtle':
-          'linear-gradient(180deg, theme(colors.neutral.100)80 0%, theme(colors.neutral.100)00 48.32%)',
+          'linear-gradient(180deg, theme(colors.neutral.100 / 50%) 0%, theme(colors.neutral.100 / 0%) 48.32%)',
         'gradient-subtle-dark':
-          'linear-gradient(180deg, theme(colors.neutral.900)80 0%, theme(colors.neutral.900)00 48.32%)',
+          'linear-gradient(180deg, theme(colors.neutral.900 / 50%) 0%, theme(colors.neutral.900 / 0%) 48.32%)',
       },
       boxShadow: {
-        xs: '0px 1px 2px 0px theme(colors.shadow)0d',
-        lg: '0px 4px 6px -2px theme(colors.shadow)08, 0px 12px 16px -4px theme(colors.shadow)14',
+        xs: '0px 1px 2px 0px theme(colors.shadow / 5%)',
+        lg: '0px 4px 6px -2px theme(colors.shadow / 3%), 0px 12px 16px -4px theme(colors.shadow / 8%)',
       },
       spacing: { '4.5': '1.125rem' },
       aria: { current: 'current="page"' },