Merge branch 'main' into MattIPv4/fnm

.github/PULL_REQUEST_TEMPLATE.md

@@ -26,7 +26,7 @@ You can check the items by adding an `x` between the brackets, like this: `[x]`
 -->
 
 - [ ] I have read the [Contributing Guidelines](https://github.com/nodejs/nodejs.org/blob/main/CONTRIBUTING.md) and made commit messages that follow the guideline.
-- [ ] I have run `npx turbo format` to ensure the code follows the style guide.
-- [ ] I have run `npx turbo test` to check if all tests are passing.
+- [ ] I have run `npm run format` to ensure the code follows the style guide.
+- [ ] I have run `npm run test` to check if all tests are passing.
 - [ ] I have run `npx turbo build` to check if the website builds without errors.
 - [ ] I've covered new added functionality with unit tests if necessary.

.github/workflows/lint-and-tests.yml

@@ -60,7 +60,7 @@ jobs:
       (github.event_name == 'pull_request_target' &&
         github.event.label.name == 'github_actions:pull-request')
 
-    name: Lint
+    name: Quality checks
     runs-on: ubuntu-latest
     needs: [base]
 
@@ -116,8 +116,7 @@ jobs:
         # We also use `npm i` instead of `npm ci` so that the node_modules/.cache folder doesn't get deleted
         run: npm i --no-audit --no-fund --ignore-scripts --userconfig=/dev/null
 
-      - name: Run `turbo lint`
-        id: eslint-step
+      - name: Run quality checks with `turbo`
         # We run the ESLint and Prettier commands on all Workflow triggers of the `Lint` job, besides if
         # the Pull Request comes from a Crowdin Branch, as we don't want to run ESLint and Prettier on Crowdin PRs
         # Note: Linting and Prettifying of files on Crowdin PRs is handled by the `translations-pr.yml` Workflow
@@ -127,13 +126,7 @@ jobs:
             github.event.pull_request.head.ref != 'chore/crowdin')
         # We want to enforce that the actual `turbo@latest` package is used instead of a possible hijack from the user
         # the `${{ needs.base.outputs.turbo_args }}` is a string substitution happening from the base job
-        run: npx --package=turbo@latest -- turbo lint ${{ needs.base.outputs.turbo_args }}
-
-      - name: Run `turbo prettier`
-        if: steps.eslint-step.outcome == 'success'
-        # We want to enforce that the actual `turbo@latest` package is used instead of a possible hijack from the user
-        # the `${{ needs.base.outputs.turbo_args }}` is a string substitution happening from the base job
-        run: npx --package=turbo@latest -- turbo prettier ${{ needs.base.outputs.turbo_args }}
+        run: npx --package=turbo@latest -- turbo lint:js lint:md lint:css prettier ${{ needs.base.outputs.turbo_args }}
 
       - name: Run `tsc build`
         # We want to ensure that the whole codebase is passing and successfully compiles with TypeScript

app/[locale]/error.tsx

@@ -6,6 +6,7 @@ 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';
 
 const ErrorPage: FC<{ error: Error }> = ({ error }) => {
@@ -14,7 +15,7 @@ const ErrorPage: FC<{ error: Error }> = ({ error }) => {
 
   return (
     <CenteredLayout>
-      <div className="glowingBackdrop" />
+      <GlowingBackdrop />
 
       <main>
         500

app/[locale]/not-found.tsx

@@ -6,14 +6,15 @@ 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';
 
 const NotFoundPage: FC = () => {
   const t = useTranslations();
 
   return (
     <CenteredLayout>
-      <div className="glowingBackdrop" />
+      <GlowingBackdrop />
 
       <main>
         404

app/global-error.tsx

@@ -5,6 +5,7 @@ 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';
 
@@ -16,7 +17,7 @@ const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
       <body>
         <BaseLayout>
           <CenteredLayout>
-            <div className="glowingBackdrop" />
+            <GlowingBackdrop />
 
             <main>
               500

components/Common/CodeBox/index.tsx

@@ -94,7 +94,7 @@ const CodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
 
   return (
     <div className={styles.root}>
-      <pre ref={ref} className={styles.content} tabIndex={0}>
+      <pre ref={ref} className={styles.content} tabIndex={0} dir="ltr">
         {transformCode(children, language)}
       </pre>
 

components/Common/GlowingBackdrop/index.module.css

@@ -0,0 +1,32 @@
+.glowingBackdrop {
+  @apply absolute
+    left-0
+    top-0
+    -z-10
+    size-full
+    opacity-50
+    md:opacity-100;
+
+  &::after {
+    @apply absolute
+      inset-0
+      m-auto
+      aspect-square
+      w-[300px]
+      rounded-full
+      bg-green-300
+      blur-[120px]
+      content-['']
+      dark:bg-green-700;
+  }
+
+  svg {
+    @apply absolute
+      inset-0
+      m-auto
+      h-[600px]
+      object-cover
+      text-neutral-300
+      dark:text-neutral-900/75;
+  }
+}

components/Common/GlowingBackdrop/index.stories.tsx

@@ -0,0 +1,10 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
+
+type Story = StoryObj<typeof GlowingBackdrop>;
+type Meta = MetaObj<typeof GlowingBackdrop>;
+
+export const Default: Story = {};
+
+export default { component: GlowingBackdrop } as Meta;

components/Common/GlowingBackdrop/index.tsx

@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+
+import HexagonGrid from '@/components/Icons/HexagonGrid';
+
+import styles from './index.module.css';
+
+const GlowingBackdrop: FC = () => (
+  <div className={styles.glowingBackdrop}>
+    <HexagonGrid />
+  </div>
+);
+
+export default GlowingBackdrop;

components/Common/Preview/index.module.css

@@ -7,9 +7,6 @@
     border
     border-neutral-900
     bg-neutral-950
-    bg-[url('/static/images/patterns/hexagon-grid.svg')]
-    bg-contain
-    bg-center
     @container/preview;
 
   &::after {
@@ -58,6 +55,21 @@
       @xl/preview:text-2xl
       @2xl/preview:text-3xl;
 
+    .hexagon {
+      @apply absolute
+        inset-0
+        m-auto
+        size-full
+        @md/preview:h-3/5
+        @md/preview:w-3/5
+        @lg/preview:h-2/3
+        @lg/preview:w-2/3
+        @xl/preview:h-3/5
+        @xl/preview:w-3/5
+        @2xl/preview:h-2/3
+        @2xl/preview:w-2/3;
+    }
+
     .logo {
       @apply mx-auto
         size-6

components/Common/Preview/index.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import type { FC } from 'react';
 
+import HexagonGrid from '@/components/Icons/HexagonGrid';
 import JsIconWhite from '@/components/Icons/Logos/JsIconWhite';
 import type { BlogPreviewType } from '@/types';
 
@@ -14,6 +15,7 @@ type PreviewProps = {
 const Preview: FC<PreviewProps> = ({ type = 'announcements', title }) => (
   <div className={classNames(styles.root, styles[type])}>
     <div className={styles.container} aria-hidden={true}>
+      <HexagonGrid className={styles.hexagon} />
       <JsIconWhite className={styles.logo} />
       {title}
     </div>

components/Downloads/Release/BitnessDropdown.tsx

@@ -79,11 +79,13 @@ const BitnessDropdown: FC = () => {
     if (currentBitnessExcluded && nonExcludedBitness) {
       // We set it as a Number for cases where it is 64 or 86 otherwise we are
       // setting it as a string (ARMv7, ARMv6, etc.)
-      if (Number.isNaN(Number(nonExcludedBitness)) === false) {
-        setBitness(Number(nonExcludedBitness));
-      } else {
-        setBitness(nonExcludedBitness);
-      }
+      const numericBitness = Number(nonExcludedBitness);
+
+      setBitness(
+        numericBitness.toString() === nonExcludedBitness
+          ? numericBitness
+          : nonExcludedBitness
+      );
     }
     // we shouldn't react when "actions" change
     // eslint-disable-next-line react-hooks/exhaustive-deps

components/Icons/HexagonGrid.stories.tsx

@@ -0,0 +1,10 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import HexagonGrid from '@/components/Icons/HexagonGrid';
+
+type Story = StoryObj<typeof HexagonGrid>;
+type Meta = MetaObj<typeof HexagonGrid>;
+
+export const Default: Story = {};
+
+export default { component: HexagonGrid } as Meta;