chore: resolve conflict

Author: canerakdas

.github/workflows/dependency-review.yml

@@ -13,6 +13,11 @@ on:
     branches:
       - main
 
+# Cancel any runs on the same branch
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 permissions:
   contents: read
 

.github/workflows/translations-pr.yml

@@ -15,6 +15,11 @@ on:
       - 'packages/i18n/locales/*.json'
       - '!packages/i18n/locales/en.json'
 
+# Cancel any runs on the same branch
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 permissions:
   actions: read
 

CONTRIBUTING.md

@@ -10,6 +10,7 @@ Thank you for your interest in contributing to the Node.js Website. Before you p
 - [Commit Guidelines](#commit-guidelines)
 - [Pull Request Policy](#pull-request-policy)
 - [Developer's Certificate of Origin 1.1](#developers-certificate-of-origin-11)
+- [Adding a Learn Page](#adding-a-learn-page)
 
 ## Contributing
 
@@ -241,3 +242,99 @@ By contributing to this project, I certify that:
 [Conventional Commits]: https://www.conventionalcommits.org/
 [Commit Signing]: https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits
 [Husky]: https://typicode.github.io/husky/
+
+## Adding a Learn Page
+
+Since the redesign of the website, we have a new section called 'Learn'. This is intended to provide a more explanatory set of resources than the API docs, which are designed purely to explain the available APIs.
+
+The Learn section is separate from the API docs and is intended to provide a more narrative, tutorial style set of resources. This is a place where we can provide more context and guidance on how to use the APIs and how to build applications with them.
+
+The Learn section is also divided into several sub-categories. Note that the sub-categories must be on the same topic.
+
+### Structure of the Learn section
+
+The file structure of the Learn section is as follows:
+
+```
+site/
+├─ pages/
+│  ├─ en/
+│  │  ├─ learn/
+│  │  │  ├─ sub-categories/
+│  │  │  │  ├─ article.md
+```
+
+The frontmatter of the `article.md` file should look like this:
+
+```yaml
+title: A super cool title
+layout: learn
+authors: github_username, another_github_username
+```
+
+A little bit of explanation about the frontmatter:
+
+- `title`: The title of the article. This will be displayed as the title of the page. We recommend that you use the same title as the navigation entry. How to enter navigation entries is explained later in this document.
+- `layout`: This must be set to `learn` so that the new article has the same style as other Learn pages.
+- `authors`: A list of the GitHub usernames of the authors of the article. This is used to display the authors' profile pictures on the page. The frontmatter must always have the `github_username` followed by `, `. The comma and space is important.
+
+### Modify the navigation
+
+The data of the navigation is stored in app/site/navigation.json. To add a new entry to the navigation, you need to add a new object to the sideNavigation.learn.
+
+```json
+{
+  "sideNavigation": {
+    "learn": [
+      {
+        "label": "Sub-category",
+        "items": {
+          "article": {
+            "link": "/learn/sub-category/article",
+            "label": "components.navigation.learn.sub-category.article"
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
+The `label` key is used to display the title of the article in the navigation. To add a new i18n key we recommend you to read [the translation guide](./TRANSLATION.md#adding-new-translation-keys).
+
+### Add the article
+
+To add a new article, you need to create a new markdown file in the `site/pages/en/learn/your-sub-category` directory.
+
+1. Create your new markdown file in the `site/pages/en/learn/your-sub-category` directory.
+2. Add the frontmatter to the file.
+3. Write your article.
+4. Add the navigation entry to `app/site/navigation.json`.
+5. Add the translation key to the translation files.
+
+DONE!
+
+### Edit the article
+
+To edit an existing article, you need to find the markdown file in the `site/pages/en/learn/your-sub-category` directory.
+
+> [!NOTE]
+> If you rewrite a big part of the article you can add yourself as an author in the frontmatter. **But** if you only fix a typo or a small part of the article, you don't need to add yourself as an author.
+
+### Accessible MDX components
+
+#### Codebox
+
+The codebox component is used to display code snippets. If two code snippets follow without any text between them, they will be displayed in the same codebox, but with two tabs.
+
+```md
+'''cjs
+const http = require('node:http');
+'''
+
+'''mjs
+import http from 'node:http';
+'''
+```
+
+`cjs` and `mjs` are variants of `js`, it's just to display the correct language in the codebox (cjs = CommonJS, mjs = ES Module).

README.md

@@ -105,6 +105,8 @@ These are maintained in different repositories and we urge users to open **issue
 
 [Translation Guidelines][]
 
+[Status Page](https://status.nodejs.org/) of the Node.js web infrastructure.
+
 ## Thanks
 
 - Thanks to all contributors and collaborators that make this project possible.

apps/site/.storybook/main.ts

@@ -34,7 +34,7 @@ const config: StorybookConfig = {
   webpack: async config => ({
     ...config,
     // We want to conform as much as possible with our target settings
-    target: 'browserslist',
+    target: 'browserslist:development',
     // Performance Hints do not make sense on Storybook as it is bloated by design
     performance: { hints: false },
     // `nodevu` is a Node.js-specific package that requires Node.js modules
@@ -52,7 +52,8 @@ const config: StorybookConfig = {
     ignoreWarnings: [
       e =>
         e.message.includes('Critical dep') ||
-        e.message.includes('was not found in'),
+        e.message.includes('was not found in') ||
+        e.message.includes('generated code contains'),
     ],
   }),
 };

apps/site/app/[locale]/error.tsx

@@ -6,31 +6,26 @@ import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
 import Button from '@/components/Common/Button';
-import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
-import CenteredLayout from '@/layouts/Centered';
+import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
 
 const ErrorPage: FC<{ error: Error }> = ({ error }) => {
   captureException(error);
   const t = useTranslations();
 
   return (
-    <CenteredLayout>
-      <GlowingBackdrop />
-
-      <main>
-        500
-        <h1 className="special -mt-4 text-center">
-          {t('layouts.error.internalServerError.title')}
-        </h1>
-        <p className="-mt-4 max-w-sm text-center text-lg">
-          {t('layouts.error.internalServerError.description')}
-        </p>
-        <Button href="/">
-          {t('layouts.error.backToHome')}
-          <ArrowRightIcon />
-        </Button>
-      </main>
-    </CenteredLayout>
+    <GlowingBackdropLayout>
+      500
+      <h1 className="special -mt-4 text-center">
+        {t('layouts.error.internalServerError.title')}
+      </h1>
+      <p className="-mt-4 max-w-sm text-center text-lg">
+        {t('layouts.error.internalServerError.description')}
+      </p>
+      <Button href="/">
+        {t('layouts.error.backToHome')}
+        <ArrowRightIcon />
+      </Button>
+    </GlowingBackdropLayout>
   );
 };
 

apps/site/app/[locale]/not-found.tsx

@@ -6,40 +6,35 @@ import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
 import Button from '@/components/Common/Button';
-import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
-import CenteredLayout from '@/layouts/Centered';
+import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
 
 const NotFoundPage: FC = () => {
   const t = useTranslations();
 
   return (
-    <CenteredLayout>
-      <GlowingBackdrop />
-
-      <main>
-        404
-        <h1 className="special -mt-4 text-center">
-          {t('layouts.error.notFound.title')}
-        </h1>
-        <div className="my-4 flex h-[150px] items-center justify-center md:h-[300px]">
-          <div className="turtle motion-safe:animate-surf motion-reduce:animate-none">
-            <Image
-              src="/static/images/node-mascot.svg"
-              alt="The Node.js mascot"
-              height={114.69}
-              width={100}
-            />
-          </div>
+    <GlowingBackdropLayout>
+      404
+      <h1 className="special -mt-4 text-center">
+        {t('layouts.error.notFound.title')}
+      </h1>
+      <div className="my-4 flex h-[150px] items-center justify-center md:h-[300px]">
+        <div className="turtle motion-safe:animate-surf motion-reduce:animate-none">
+          <Image
+            src="/static/images/node-mascot.svg"
+            alt="The Node.js mascot"
+            height={114.69}
+            width={100}
+          />
         </div>
-        <p className="-mt-4 max-w-sm text-center text-lg">
-          {t('layouts.error.notFound.description')}
-        </p>
-        <Button href="/">
-          {t('layouts.error.backToHome')}
-          <ArrowRightIcon />
-        </Button>
-      </main>
-    </CenteredLayout>
+      </div>
+      <p className="-mt-4 max-w-sm text-center text-lg">
+        {t('layouts.error.notFound.description')}
+      </p>
+      <Button href="/">
+        {t('layouts.error.backToHome')}
+        <ArrowRightIcon />
+      </Button>
+    </GlowingBackdropLayout>
   );
 };
 

apps/site/app/global-error.tsx

@@ -5,9 +5,8 @@ import { captureException } from '@sentry/nextjs';
 import type { FC } from 'react';
 
 import Button from '@/components/Common/Button';
-import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
 import BaseLayout from '@/layouts/Base';
-import CenteredLayout from '@/layouts/Centered';
+import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
 
 const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
   captureException(error);
@@ -16,23 +15,17 @@ const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
     <html>
       <body>
         <BaseLayout>
-          <CenteredLayout>
-            <GlowingBackdrop />
-
-            <main>
-              500
-              <h1 className="special -mt-4 text-center">
-                Internal Server Error
-              </h1>
-              <p className="-mt-4 max-w-sm text-center text-lg">
-                This page has thrown a non-recoverable error.
-              </p>
-              <Button href="/">
-                Back to Home
-                <ArrowRightIcon />
-              </Button>
-            </main>
-          </CenteredLayout>
+          <GlowingBackdropLayout>
+            500
+            <h1 className="special -mt-4 text-center">Internal Server Error</h1>
+            <p className="-mt-4 max-w-sm text-center text-lg">
+              This page has thrown a non-recoverable error.
+            </p>
+            <Button href="/">
+              Back to Home
+              <ArrowRightIcon />
+            </Button>
+          </GlowingBackdropLayout>
         </BaseLayout>
       </body>
     </html>

apps/site/components/Common/ActiveLink/__tests__/index.test.mjs

@@ -1,7 +1,15 @@
 import { render, screen } from '@testing-library/react';
 
+import { VERSION_SUPPORT_SHORTCUT } from '@/next.constants.mjs';
+
 import ActiveLink from '..';
 
+// mock usePathname, but retain all the other imports
+jest.mock('@/navigation.mjs', () => ({
+  ...jest.requireActual('@/navigation.mjs'),
+  usePathname: jest.fn(),
+}));
+
 describe('ActiveLink', () => {
   it('renders as localized link', () => {
     render(
@@ -38,4 +46,61 @@ describe('ActiveLink', () => {
       'link active'
     );
   });
+
+  it('does not set active class when href base does not match', () => {
+    const { usePathname } = require('@/navigation.mjs');
+    usePathname.mockReturnValue('/not-link/sublink');
+
+    render(
+      <ActiveLink
+        className="link"
+        activeClassName="active"
+        allowSubPath={true}
+        href={'/link/sub-link'}
+      >
+        Link
+      </ActiveLink>
+    );
+
+    expect(screen.findByText('Link')).resolves.toHaveAttribute('class', 'link');
+  });
+
+  it('sets active class when href is other than VERSION_SUPPORT_SHORTCUT', () => {
+    const { usePathname } = require('@/navigation.mjs');
+    usePathname.mockReturnValue('/link/sublink');
+
+    render(
+      <ActiveLink
+        className="link"
+        activeClassName="active"
+        allowSubPath={true}
+        href={'/link/sub-link'}
+      >
+        Link
+      </ActiveLink>
+    );
+
+    expect(screen.findByText('Link')).resolves.toHaveAttribute(
+      'class',
+      'link active'
+    );
+  });
+
+  it('does not set active class when href is VERSION_SUPPORT_SHORTCUT', () => {
+    const { usePathname } = require('@/navigation.mjs');
+    usePathname.mockReturnValue(VERSION_SUPPORT_SHORTCUT);
+
+    render(
+      <ActiveLink
+        className="link"
+        activeClassName="active"
+        allowSubPath={true}
+        href={VERSION_SUPPORT_SHORTCUT}
+      >
+        Link
+      </ActiveLink>
+    );
+
+    expect(screen.findByText('Link')).resolves.toHaveAttribute('class', 'link');
+  });
 });