[pull] main from nodejs:main

.eslintrc.json

@@ -10,7 +10,7 @@
       "extends": "plugin:storybook/recommended"
     },
     {
-      "files": ["**/__tests__/*.mjs", "__mocks__/*.mjs"],
+      "files": ["**/{__tests__,__mocks__}/*.mjs"],
       "env": { "jest": true }
     },
     {

.nvmrc

@@ -1 +1 @@
-lts/hydrogen
+20

COLLABORATOR_GUIDE.md

@@ -79,6 +79,7 @@ The Website also uses several other Open Source libraries (not limited to) liste
     - [PostCSS Simple Vars](https://github.com/postcss/postcss-simple-vars)
 - [Tailwind][] is used as our CSS Framework and the Foundation of our Design System
 - [Hero Icons](https://heroicons.com/) is an SVG Icon Library used within our Codebase
+- [Radix UI][] is a collection of customizable UI components
 - [Shiki][] is a Syntax Highlighter used for our Codeboxes
   - A [Rehype Plugin](https://rehype-pretty-code.netlify.app/) is used here for transforming `pre` and `code` tags into Syntax Highlighted Codeboxes
 - [MDX][] and Markdown are used for structuring the Content of the Website
@@ -195,8 +196,8 @@ Finally, if you're unfamiliar with how to use Tailwind or how to use Tailwind wi
 > You can apply Tailwind Tokens with Tailwind's `@apply` CSS rule. [Read more about applying Tailwind classes with `@apply`](https://tailwindcss.com/docs/functions-and-directives#apply).
 
 > \[!IMPORTANT]\
-> When using IDEs such as Visual Studio Code, we recommend installing the official [Stylelint](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
-> and [Tailwind](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) Extensions.\
+> When using IDEs such as Visual Studio Code, we recommend installing the official [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
+> and [Tailwind](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) Extensions.\
 > These are recommended Extensions for IntelliSense, Syntax Highlighting and Error Checking when styling your Component.
 
 ### Best practices when creating a Component
@@ -429,6 +430,12 @@ The Node.js Website uses Tailwind as a CSS Framework for crafting our React Comp
 We use `next/fonts` Open Sans as the default font for the Node.js Website.
 The font is configured as a CSS variable and then configured on `tailwind.config.js` as the default font for the Website.
 
+#### Why we use RadixUI?
+
+- It is a minimalistic component library broken down in individual packages for each Component
+- It already handles all WAI-ARIA and Accessibility shortcuts/bindings needed for Interactive Elements
+- It allows us to focus on designing interactive Components without the effort of adding all the surrounding sugar and code needed to make the Component accessibility-friendly.
+
 ### Why MDX?
 
 MDX is an extension on Markdown that allows us to add JSX Components within Markdown.
@@ -475,6 +482,31 @@ Defining a `.vscode` configuration like this also aides browser-only development
 
 The npm ecosystem resolution and installation of `peerDependencies` installation [changed in recent versions](https://nodejs.org/en/blog/npm/peer-dependencies#using-peer-dependencies). The project documents what version of `Node.js` and `npm` to use via the [`.nvmrc` file](https://github.com/nodejs/nodejs.org/blob/main/.nvmrc). Not all contributors have tooling to automatically read this file and adhere to the correct version, however. To ensure all contributors install dependencies the same way, a local `.npmrc` file directly configures peerDependency installation behavior.
 
+### Why we don't use [`remark-preset-lint-node`](https://github.com/nodejs/remark-preset-lint-node)?
+
+The Node.js GitHub organisation owns an in-house remark preset (set of rules and plugins) that standardises the contents of Markdown files across the GitHub organisation.
+This package uses `remark` plugins such as `remark-gfm`, and it has rules such as forbidden words, maximum line-length of Markdown content, and many very specific rules.
+
+This preset is used within Node.js Development tooling itself (within `make`) and it used as a one-off script to lint the Markdown files within the `nodejs/node` repository.
+(The same preset is also used within `nodejs/node` CI).
+
+Whilst that preset has a lot of value, it is not suitable for the Node.js Website. One of the main reasons are that it inheritedly conflicts with `prettier` and with `mdx-js`,
+which causes issues from ensuring that Markdown and MDX files are correctly linted, formatted and parsed. Not to mention that these amount of rules, greatly increase the running time of ESLint.
+
+Hence, we decided to not use this preset and instead use a more minimalistic approach to linting Markdown files. Which means that we follow the default recommended `remark-lint`, `mdx-js` and `commonmark`
+linting and formatting rules, plus the formatting rules enforced by prettier.
+
+We also decided to not use `remark-gfm` as we want to support the basic CommonMark standard for Markdown files, and the default MDX standard for MDX files.
+Having that said, there's one exception, as we use [`autolink-literal`](mdast-util-gfm-autolink-literal) for transforming literal links (text) into anchor elements, which is part of the GitHub Flavoured Markdown specification.
+
+Finally, as the Node.js Website grows, we have thousands of Markdown files, meaning the more rules we add, the more time it takes to lint and format the Markdown files. And the greater the chance is
+for the standard adopted on the `nodejs/node` repository to deviate from standard spec-compliant CommonMark. The Node.js Website uses a default recommended configuration that enforces our Markdown files to be spec-compliant.
+
+It's important to mention that this repository is compatible with Markdown files from `nodejs/node` as our formatting is way less strict.
+We also have rules in-place (for example in the release blog post generation) that ensure that Markdown files that are "loaded" from `nodejs/node` are compatible when created.
+
+Also note that our goal is to fully support any Markdown file incoming from `nodejs/node` and that originates from the `remark-preset-lint-node`. Our goal is to support our fellow collaborators and to ensure that the Node.js Website is fully compatible with the Node.js project.
+
 ## Seeking additional clarification
 
 A lot of the current structure is due to retro-compatibility, keeping a simple and familiar file structure and keeping files that have historical reasons or needs.
@@ -491,3 +523,4 @@ If you're unfamiliar or curious about something, we recommend opening a Discussi
 [React]: https://react.dev/
 [Shiki]: https://github.com/shikijs/shiki
 [Tailwind]: https://tailwindcss.com/
+[Radix UI]: https://www.radix-ui.com/

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

@@ -0,0 +1,53 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import Tabs from '../index';
+
+describe('Tabs', () => {
+  const tabs = [
+    { key: 'package', label: 'Package Manager' },
+    { key: 'prebuilt', label: 'Prebuilt Installer' },
+    { key: 'source', label: 'Source Code' },
+  ];
+
+  beforeEach(() => {
+    render(
+      <Tabs tabs={tabs} defaultValue="package">
+        <TabsPrimitive.Content value="package">
+          Package Manager
+        </TabsPrimitive.Content>
+        <TabsPrimitive.Content value="prebuilt">
+          Prebuilt Installer
+        </TabsPrimitive.Content>
+        <TabsPrimitive.Content value="source">
+          Source Code
+        </TabsPrimitive.Content>
+      </Tabs>
+    );
+  });
+
+  it('renders the correct number of tabs', () => {
+    const tabElements = screen.getAllByRole('tab');
+    expect(tabElements).toHaveLength(3);
+  });
+
+  it('renders the correct tab content when clicked', async () => {
+    const user = userEvent.setup();
+
+    const beforeActiveTabPanel = screen.getAllByRole('tabpanel');
+
+    expect(beforeActiveTabPanel).toHaveLength(1);
+
+    expect(beforeActiveTabPanel.at(0)).toHaveTextContent('Package Manager');
+
+    const tabElements = screen.getAllByRole('tab');
+    await user.click(tabElements.at(-1));
+
+    const afterActiveTabPanel = screen.getAllByRole('tabpanel');
+
+    expect(afterActiveTabPanel).toHaveLength(1);
+
+    expect(afterActiveTabPanel.at(0)).toHaveTextContent('Source Code');
+  });
+});

components/Common/Tabs/index.module.css

@@ -0,0 +1,20 @@
+.tabsList {
+  @apply flex
+    gap-1
+    font-open-sans;
+
+  .tabsTrigger {
+    @apply border-b-2
+      border-b-transparent
+      px-1
+      pb-[11px]
+      text-sm
+      font-semibold
+      text-neutral-800
+      data-[state=active]:border-b-green-600
+      data-[state=active]:text-green-600
+      dark:text-neutral-200
+      dark:data-[state=active]:border-b-green-400
+      dark:data-[state=active]:text-green-400;
+  }
+}

components/Common/Tabs/index.stories.tsx

@@ -0,0 +1,42 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Tabs from './index';
+
+type Story = StoryObj<typeof Tabs>;
+type Meta = MetaObj<typeof Tabs>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: 'prebuilt',
+    tabs: [
+      {
+        key: 'package',
+        label: 'Package Manager',
+      },
+      {
+        key: 'prebuilt',
+        label: 'Prebuilt Installer',
+      },
+      {
+        key: 'source',
+        label: 'Source Code',
+      },
+    ],
+    children: (
+      <>
+        <TabsPrimitive.Content value="package">
+          Package Manager
+        </TabsPrimitive.Content>
+        <TabsPrimitive.Content value="prebuilt">
+          Prebuilt Installer
+        </TabsPrimitive.Content>
+        <TabsPrimitive.Content value="source">
+          Source Code
+        </TabsPrimitive.Content>
+      </>
+    ),
+  },
+};
+
+export default { component: Tabs } as Meta;

components/Common/Tabs/index.tsx

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

components/Header.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import Image from 'next/image';
+import { useTheme } from 'next-themes';
 import { useIntl } from 'react-intl';
 
 import { useLocale } from '@/hooks/useLocale';
@@ -13,6 +14,7 @@ const Header = () => {
   const { navigationItems } = useNavigation();
   const { formatMessage } = useIntl();
   const { asPath, basePath } = useRouter();
+  const { theme, setTheme } = useTheme();
 
   const getLinkClassName = (href: string) =>
     classNames({ active: isCurrentLocaleRoute(href, href !== '/') });
@@ -57,6 +59,7 @@ const Header = () => {
             type="button"
             title={toggleDarkMode}
             aria-label={toggleDarkMode}
+            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
           >
             <Image
               priority
@@ -66,6 +69,7 @@ const Header = () => {
               src={`${basePath}/static/images/light-mode.svg`}
               alt="Dark Theme Switcher"
             />
+
             <Image
               priority
               width="28"

components/__mocks__/next-router.mjs

@@ -0,0 +1,4 @@
+export const useRouter = () => ({
+  isReady: true,
+  asPath: '/',
+});