chore: Migrate Hero component

.eslintrc

@@ -35,6 +35,7 @@
       "plugins": ["@typescript-eslint"],
       "globals": { "globalThis": false },
       "rules": {
+        "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
         "@typescript-eslint/consistent-type-imports": "error"
       }
     },

.github/workflows/github-pages.yml

@@ -50,7 +50,7 @@ jobs:
           enableCrossOsArchive: true
 
       - name: Build Next.js
-        run: npx turbo build
+        run: npx turbo deploy
         env:
           TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
           TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
@@ -66,9 +66,6 @@ jobs:
           key: build-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('node_modules/.cache') }}
           enableCrossOsArchive: true
 
-      - name: Export Next.js static files
-        run: npx turbo export
-
       - name: Upload Artifact
         uses: actions/upload-pages-artifact@v1
         with:

.github/workflows/pull-request.yml

@@ -83,7 +83,13 @@ jobs:
           enableCrossOsArchive: true
 
       - name: Run Unit Tests
-        run: npx turbo test:ci
+        run: npx turbo test:unit -- --coverage
+        env:
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
+      - name: Run Storybook Tests
+        run: npx turbo test:storybook
         env:
           TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
           TURBO_TEAM: ${{ secrets.TURBO_TEAM }}

.gitignore

@@ -1,16 +1,19 @@
 # Commonly ignored Node.js files
-node_modules/
+node_modules
 npm-debug.log
-.npm/
+.npm
 
 # OSX system files, the bane of our existence
 .DS_Store
 .AppleDouble
 .LSOverride
 
-# Next.js files
+# Next.js Build Output
 .next
 build
+
+# Next.js Generated Files
+public/robots.txt
 public/sitemap.xml
 public/en/feed/*.xml
 pages/en/blog/year-[0-9][0-9][0-9][0-9].md
@@ -26,8 +29,6 @@ coverage
 # Storybook
 storybook-static
 
-# Vercel Config
+# Vercel Files
 .vercel
-
-# TurboRepo
 .turbo

.storybook/preview.tsx

@@ -23,6 +23,7 @@ const preview: Preview = {
         basePath: '',
       },
     },
+    backgrounds: { disable: true },
   },
 };
 
@@ -39,7 +40,9 @@ export const decorators = [
                 }
               `}
             </style>
-            <Story />
+            <div data-test-id="story-root">
+              <Story />
+            </div>
           </NodeDataProvider>
         </LocaleProvider>
       </SiteProvider>

.storybook/test-runner.ts

@@ -0,0 +1,14 @@
+// TODO: Convert this to ESM once the bug is resolved
+// https://github.com/storybookjs/test-runner/issues/293
+
+const config = {
+  async postRender(page, _context) {
+    const rootElementId = '[data-test-id="story-root"]';
+    const rootElement = await page.locator(rootElementId);
+    const content = await rootElement.innerHTML();
+    expect(content).toBeDefined();
+    expect(content).toMatchSnapshot();
+  },
+};
+
+module.exports = config;

CONTRIBUTING.md

@@ -23,8 +23,8 @@ Thank you for your interest in contributing to the Node.js Website. Before you p
 
 ```bash
 git clone [email protected]:<GITHUB_ID>/nodejs.org.git # SSH
-gh repo clone <GITHUB_ID>/nodejs.org # GitHub CLI
 git clone https://github.com/<GITHUB_ID>/nodejs.org.git # HTTPS
+gh repo clone <GITHUB_ID>/nodejs.org # GitHub CLI
 ```
 
 3. Change into the nodejs.org directory.
@@ -36,7 +36,9 @@ cd nodejs.org
 4. Create a remote for keeping your fork as well as your local clone up-to-date.
 
 ```bash
-git remote add upstream [email protected]:nodejs/nodejs.org.git
+git remote add upstream [email protected]:nodejs/nodejs.org.git # SSH
+git remote add upstream https://github.com/nodejs/nodejs.org.git # HTTPS
+gh repo sync nodejs/nodejs.org # GitHub CLI
 ```
 
 5. Create a new branch for your work.
@@ -85,8 +87,9 @@ npx turbo format
 
 - `npx turbo serve` runs Next.js's Local Development Server, listening by default on `http://localhost:3000/`.
 - `npx turbo build` builds the Application on Production mode. The output is by default within `.next` folder.
-- `npx turbo export` exports the website from the `.next` into a fully static website. The output is by default within `build` folder.
-  - This is what it's used to deploy the website on our current Node.js servers.
+  - This is used for the Node.js Vercel Deployments (Preview & Production)
+- `npx turbo deploy` builds the Application on Export Production Mode. The output is by default within `build` folder.
+  - This is used for the Node.js Legacy Website Server (DigitalOcean)
 - `npx turbo start` starts a web server running serving the built content from `npx turbo build`
 
 #### Other CLI options
@@ -102,7 +105,10 @@ We also offer other commands that offer you assistance during your local develop
   - **Usage:** `npx turbo scripts:release-post -- --version=vXX.X.X --force`
 - `npx turbo storybook` starts Storybook's local server
 - `npx turbo storybook:build` builds Storybook as a static web application for publishing
-- `npx turbo test` runs jest (unit-tests) locally
+- `npx turbo test` runs all tests locally
+  - `npx turbo test:unit` runs jest (unit-tests) locally
+  - `npx turbo test:storybook` runs storybook test-runner tests
+    - `npx turbo test:storybook:snapshot` generates and updates snapshots for all storybook components.
 
 ## Creating Components
 
@@ -178,7 +184,7 @@ Commits should be signed. You can read more about [Commit Signing][] here.
 
 Each new feature or bug fix should be accompanied by a unit test (when deemed valuable). We use [Jest][] as our test runner and [React Testing Library][] for our React unit tests.
 
-We also use [Storybook][] to document our components. Each component should have a storybook story that documents the component's usage.
+We also use [Storybook][] to document our components. Each component should have a storybook story that documents the component's usage. Snapshot testing of our components is directly done by taking snapshot of all Storybook stories, using [Storybook Test Runner][] and [Playwright][].
 
 ### General Guidelines for Unit Tests
 
@@ -299,6 +305,8 @@ If something is missing here, or you feel something is not well described, feel
 [Jest]: https://jestjs.io/
 [React Testing Library]: https://testing-library.com/docs/react-testing-library/intro/
 [Storybook]: https://storybook.js.org/
+[Storybook Test Runner]: https://storybook.js.org/addons/@storybook/test-runner#dom-snapshot-recipe
+[Playwright]: https://playwright.dev/
 [`react-intl`]: https://formatjs.io/docs/react-intl/
 [Next.js]: https://nextjs.org/
 [MDX]: https://mdxjs.com/

components/Api/DataTag/__snapshots__/index.stories.ts.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Api/DataTag Blue smoke-test 1`] = `
+<span class="DataTag_dataTag__xyqF4"
+      data-tag="M"
+>
+  M
+</span>
+`;
+
+exports[`Api/DataTag Red smoke-test 1`] = `
+<span class="DataTag_dataTag__xyqF4"
+      data-tag="E"
+>
+  E
+</span>
+`;
+
+exports[`Api/DataTag Yellow smoke-test 1`] = `
+<span class="DataTag_dataTag__xyqF4"
+      data-tag="C"
+>
+  C
+</span>
+`;

components/Api/JsonLink/__snapshots__/index.stories.ts.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Api/JsonLink Default smoke-test 1`] = `
+<div class="JsonLink_json__0XIkR">
+  <a href="https://nodejs.org/docs/latest-v18.x/api/documentation.json">
+    <span>
+      View as JSON
+    </span>
+    <svg stroke="currentColor"
+         fill="currentColor"
+         stroke-width="0"
+         viewbox="0 0 640 512"
+         class="JsonLink_FaRobotIcon__KvHGw"
+         height="1em"
+         width="1em"
+         xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z">
+      </path>
+    </svg>
+  </a>
+</div>
+`;

components/Api/JsonLink/index.module.scss

@@ -0,0 +1,29 @@
+.json {
+  display: flex;
+  flex-wrap: wrap;
+
+  a {
+    color: var(--color-text-secondary);
+    font-family: var(--sans-serif);
+    font-size: 1.4rem;
+    font-weight: var(--font-weight-regular);
+    margin-left: 0;
+    text-decoration: none !important;
+    text-transform: uppercase;
+    vertical-align: middle;
+
+    span {
+      font-weight: var(--font-weight-regular);
+      vertical-align: middle;
+    }
+
+    &:hover {
+      color: var(--brand-light);
+    }
+
+    .FaRobotIcon {
+      margin-left: 0.5rem;
+      vertical-align: middle;
+    }
+  }
+}

components/Api/JsonLink/index.stories.ts

@@ -0,0 +1,14 @@
+import JsonLink from './index';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof JsonLink>;
+type Meta = MetaObj<typeof JsonLink>;
+
+export const Default: Story = {
+  args: {
+    version: 'v18',
+    fileName: 'documentation',
+  },
+};
+
+export default { component: JsonLink } as Meta;

components/Api/JsonLink/index.tsx

@@ -0,0 +1,22 @@
+import { FormattedMessage } from 'react-intl';
+import { FaRobot } from 'react-icons/fa';
+import styles from './index.module.scss';
+import type { FC } from 'react';
+
+type JsonLinkProps = {
+  fileName: string;
+  version: string;
+};
+
+const JsonLink: FC<JsonLinkProps> = ({ fileName, version }) => (
+  <div className={styles.json}>
+    <a
+      href={`https://nodejs.org/docs/latest-${version}.x/api/${fileName}.json`}
+    >
+      <FormattedMessage id="components.api.jsonLink.title" tagName="span" />
+      <FaRobot className={styles.FaRobotIcon} />
+    </a>
+  </div>
+);
+
+export default JsonLink;

components/Api/SourceLink/__snapshots__/index.stories.ts.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Api/SourceLink Default smoke-test 1`] = `
+<p class="SourceLink_sourceLinkComponent__1vzdY">
+  Source Code:
+  <a href="https://github.com/nodejs/node/blob/1.0.0/http://nodejs.org/version/1.0.0">
+    http://nodejs.org/version/1.0.0
+  </a>
+</p>
+`;

components/Api/SourceLink/index.module.scss

@@ -0,0 +1,5 @@
+.sourceLinkComponent {
+  font-size: var(--font-size-body3);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+}

components/Api/SourceLink/index.stories.ts

@@ -0,0 +1,14 @@
+import SourceLink from './index';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof SourceLink>;
+type Meta = MetaObj<typeof SourceLink>;
+
+export const Default: Story = {
+  args: {
+    version: '1.0.0',
+    link: 'http://nodejs.org/version/1.0.0',
+  },
+};
+
+export default { component: SourceLink } as Meta;