Merge branch 'major/website-redesign' into migrate-source-link

Signed-off-by: Claudio Wunder <cwunder@gnome.org>

.eslintrc

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

.storybook/preview.tsx

@@ -23,6 +23,7 @@ const preview: Preview = {
         basePath: '',
       },
     },
+    backgrounds: { disable: true },
   },
 };
 

CONTRIBUTING.md

@@ -23,8 +23,8 @@ Thank you for your interest in contributing to the Node.js Website. Before you p
 
 ```bash
 git clone git@github.com:<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 git@github.com:nodejs/nodejs.org.git
+git remote add upstream git@github.com: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.

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/Stability/__snapshots__/index.stories.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Api/Stability Default smoke-test 1`] = `
+<div class="Stability_stability__U0Zm0 Stability_stabilityLevel0__ygvXd">
+  Stability: 0 - Insert the text of your Alert here
+</div>
+`;

components/Api/Stability/index.module.scss

@@ -0,0 +1,36 @@
+.stability {
+  border-radius: 4px;
+  color: #fff;
+  line-height: 1.5;
+  margin: 0 0 1rem;
+  padding: 1rem;
+
+  p {
+    display: inline;
+    margin: 0;
+  }
+
+  a {
+    color: #fff;
+
+    code {
+      color: #fff !important;
+    }
+  }
+
+  &Level0 {
+    background-color: var(--danger5);
+  }
+
+  &Level1 {
+    background-color: var(--warning4);
+  }
+
+  &Level2 {
+    background-color: var(--brand5);
+  }
+
+  &Level3 {
+    background-color: var(--info5);
+  }
+}

components/Api/Stability/index.stories.tsx

@@ -0,0 +1,24 @@
+import Stability from './index';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof Stability>;
+type Meta = MetaObj<typeof Stability>;
+
+export const Default: Story = {
+  args: {
+    stability: 0,
+    children: 'Insert the text of your Alert here',
+  },
+  argTypes: {
+    stability: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 3,
+        step: 1,
+      },
+    },
+  },
+};
+
+export default { component: Stability } as Meta;

components/Api/Stability/index.tsx

@@ -0,0 +1,23 @@
+import { FormattedMessage } from 'react-intl';
+import styles from './index.module.scss';
+import type { PropsWithChildren, FC } from 'react';
+
+type StabilityProps = PropsWithChildren<{ stability: number }>;
+
+const getStabilityClass = (stability: number) => {
+  const style = styles[`stabilityLevel${stability}`];
+  if (!style) throw new Error(`Unknown stability level: ${stability}`);
+  return style;
+};
+
+const Stability: FC<StabilityProps> = ({ stability, children }) => (
+  <div className={`${styles.stability} ${getStabilityClass(stability)}`}>
+    <FormattedMessage
+      id="components.api.stability"
+      values={{ level: stability }}
+    />
+    {children}
+  </div>
+);
+
+export default Stability;

components/Article/Codebox/__snapshots__/index.stories.tsx.snap

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Article/Codebox Default smoke-test 1`] = `
+<pre class="Codebox_pre___vcVQ language-js">
+  <div class="Codebox_top__1r10k">
+    <div class="Codebox_langBox__zXBm7">
+      <button type="button"
+              class="Codebox_lang__X6WDB Codebox_selected__gFZLU"
+      >
+        js
+      </button>
+    </div>
+    <button type="button"
+            class="Codebox_copy__ZEctM"
+    >
+      copy
+    </button>
+  </div>
+  <div class="Codebox_content__jhl_a">
+    <span class="token keyword">
+      const
+    </span>
+    a
+    <span class="token operator">
+      =
+    </span>
+    <span class="token number">
+      1
+    </span>
+    <span class="token punctuation">
+      ;
+    </span>
+  </div>
+</pre>
+`;
+
+exports[`Article/Codebox MultiLang smoke-test 1`] = `
+<pre class="Codebox_pre___vcVQ language-js|language-mjs">
+  <div class="Codebox_top__1r10k">
+    <div class="Codebox_langBox__zXBm7">
+      <button type="button"
+              class="Codebox_lang__X6WDB Codebox_selected__gFZLU"
+      >
+        cjs
+      </button>
+      <button type="button"
+              class="Codebox_lang__X6WDB"
+      >
+        mjs
+      </button>
+    </div>
+    <button type="button"
+            class="Codebox_copy__ZEctM"
+    >
+      copy
+    </button>
+  </div>
+  <div class="Codebox_content__jhl_a">
+    <span class="token keyword">
+      const
+    </span>
+    http
+    <span class="token operator">
+      =
+    </span>
+    <span class="token function">
+      require
+    </span>
+    <span class="token punctuation">
+      (
+    </span>
+    <span class="token string">
+      'http'
+    </span>
+    <span class="token punctuation">
+      )
+    </span>
+    <span class="token punctuation">
+      ;
+    </span>
+  </div>
+</pre>
+`;