[pull] main from nodejs:main

.github/workflows/build.yml

@@ -68,7 +68,7 @@ jobs:
           # If the Workflow is running on `merge_group` or `push` events it fallsback to the base repository
           repository: ${{ github.event.pull_request.head.repo.full_name || github.repository }}
           # We checkout the branch itself instead of a specific SHA (Commit) as we want to ensure that this Workflow
-          # is always running with the latest `ref` (changes) of the Pull Request's branh
+          # is always running with the latest `ref` (changes) of the Pull Request's branch
           # If the Workflow is running on `merge_group` or `push` events it fallsback to `github.ref` which will often be `main`
           # or the merge_group `ref`
           ref: ${{ github.event.pull_request.head.ref || github.ref }}
@@ -80,7 +80,7 @@ jobs:
           fetch-depth: 1
 
       - name: Restore Build Cache
-        uses: actions/cache/restore@704facf57e6136b1bc63b828d79edcd491f0ee84
+        uses: actions/cache/restore@704facf57e6136b1bc63b828d79edcd491f0ee84 # v3.3.2
         with:
           path: |
             .turbo/cache
@@ -94,7 +94,7 @@ jobs:
             cache-build-
 
       - name: Set up Node.js
-        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
         with:
           # We want to ensure that the Node.js version running here respects our supported versions
           node-version-file: '.nvmrc'
@@ -138,7 +138,7 @@ jobs:
         # since caches created on the `main` (default) branch can be reused on Pull Requests and PRs coming from forks
         if: |
           github.event_name == 'push' || github.event_name == 'pull_request_target'
-        uses: actions/cache/save@704facf57e6136b1bc63b828d79edcd491f0ee84
+        uses: actions/cache/save@704facf57e6136b1bc63b828d79edcd491f0ee84 # v3.3.2
         with:
           path: |
             .turbo/cache

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

@@ -69,13 +69,13 @@ jobs:
           # If the Workflow is running on `merge_group` or `push` events it fallsback to the base repository
           repository: ${{ github.event.pull_request.head.repo.full_name || github.repository }}
           # We checkout the branch itself instead of a specific SHA (Commit) as we want to ensure that this Workflow
-          # is always running with the latest `ref` (changes) of the Pull Request's branh
+          # is always running with the latest `ref` (changes) of the Pull Request's branch
           # If the Workflow is running on `merge_group` or `push` events it fallsback to `github.ref` which will often be `main`
           # or the merge_group `ref`
           ref: ${{ github.event.pull_request.head.ref || github.ref }}
 
       - name: Restore Lint Cache
-        uses: actions/cache/restore@704facf57e6136b1bc63b828d79edcd491f0ee84
+        uses: actions/cache/restore@704facf57e6136b1bc63b828d79edcd491f0ee84 # v3.3.2
         with:
           path: |
             .turbo/cache
@@ -95,7 +95,7 @@ jobs:
             cache-lint-
 
       - name: Set up Node.js
-        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
         with:
           # We want to ensure that the Node.js version running here respects our supported versions
           node-version-file: '.nvmrc'
@@ -140,7 +140,7 @@ jobs:
           (github.event_name == 'pull_request_target' &&
             startsWith(github.event.pull_request.head.ref, 'dependabot/') == false &&
             github.event.pull_request.head.ref != 'chore/crowdin')
-        uses: actions/cache/save@704facf57e6136b1bc63b828d79edcd491f0ee84
+        uses: actions/cache/save@704facf57e6136b1bc63b828d79edcd491f0ee84 # v3.3.2
         with:
           path: |
             .turbo/cache
@@ -179,7 +179,7 @@ jobs:
           # If the Workflow is running on `merge_group` or `push` events it fallsback to the base repository
           repository: ${{ github.event.pull_request.head.repo.full_name || github.repository }}
           # We checkout the branch itself instead of a specific SHA (Commit) as we want to ensure that this Workflow
-          # is always running with the latest `ref` (changes) of the Pull Request's branh
+          # is always running with the latest `ref` (changes) of the Pull Request's branch
           # If the Workflow is running on `merge_group` or `push` events it fallsback to `github.ref` which will often be `main`
           # or the merge_group `ref`
           ref: ${{ github.event.pull_request.head.ref || github.ref }}
@@ -188,7 +188,7 @@ jobs:
           fetch-depth: 0
 
       - name: Set up Node.js
-        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
         with:
           # We want to ensure that the Node.js version running here respects our supported versions
           node-version-file: '.nvmrc'
@@ -216,6 +216,7 @@ jobs:
           (github.event_name == 'pull_request_target' &&
             startsWith(github.event.pull_request.head.ref, 'dependabot/') == false &&
             github.event.pull_request.head.ref != 'chore/crowdin')
+        # sha reference has no stable git tag reference or URL. see https://github.com/chromaui/chromatic-cli/issues/797
         uses: chromaui/action@807600692d28833b717c155e15ed20905cdc865c
         with:
           buildScriptName: storybook:build
@@ -230,7 +231,7 @@ jobs:
         if: steps.chromatic-deploy.outcome == 'success'
         # This comments the current Jest Coverage Report containing JUnit XML reports
         # and a Code Coverage Summary
-        uses: MishaKav/jest-coverage-comment@41b5ca01d1250de84537448d248b8d18152cb277
+        uses: MishaKav/jest-coverage-comment@41b5ca01d1250de84537448d248b8d18152cb277 # v1.0.23
         with:
           title: 'Unit Test Coverage Report'
           junitxml-path: ./junit.xml

.github/workflows/pull-request-label.yml

@@ -31,6 +31,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Remove GitHub Actions Label
-        uses: actions-ecosystem/action-remove-labels@2ce5d41b4b6aa8503e285553f75ed56e0a40bae0
+        uses: actions-ecosystem/action-remove-labels@2ce5d41b4b6aa8503e285553f75ed56e0a40bae0 # v1.3.0
         with:
           labels: github_actions:pull-request

.github/workflows/translations-pr.yml

@@ -33,7 +33,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: thollander/actions-comment-pull-request@1d3973dc4b8e1399c0620d3f2b1aa5e795465308
+      - uses: thollander/actions-comment-pull-request@1d3973dc4b8e1399c0620d3f2b1aa5e795465308 # v2.4.3
         with:
           message: |
             > [!NOTE]\
@@ -64,7 +64,7 @@ jobs:
           ref: ${{ github.event.pull_request.head.ref }}
 
       - name: Restore Lint Cache
-        uses: actions/cache/restore@704facf57e6136b1bc63b828d79edcd491f0ee84
+        uses: actions/cache/restore@704facf57e6136b1bc63b828d79edcd491f0ee84 # v3.3.2
         with:
           path: |
             .eslintmdcache
@@ -80,7 +80,7 @@ jobs:
             cache-lint-
 
       - name: Set up Node.js
-        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
         with:
           # We want to ensure that the Node.js version running here respects our supported versions
           node-version-file: '.nvmrc'
@@ -102,13 +102,13 @@ jobs:
         run: npx prettier "{pages,i18n}/**/*.{json,md,mdx}" --check --write --cache --cache-strategy=metadata --cache-location=.prettiercache
 
       - name: Push Changes back to Pull Request
-        uses: stefanzweifel/git-auto-commit-action@8756aa072ef5b4a080af5dc8fef36c5d586e521d
+        uses: stefanzweifel/git-auto-commit-action@8756aa072ef5b4a080af5dc8fef36c5d586e521d # v5.0.0
         with:
           commit_options: '--no-verify --signoff'
           commit_message: 'chore: automated format of translated files'
 
       - name: Save Lint Cache
-        uses: actions/cache/save@704facf57e6136b1bc63b828d79edcd491f0ee84
+        uses: actions/cache/save@704facf57e6136b1bc63b828d79edcd491f0ee84 # v3.3.2
         with:
           path: |
             .eslintmdcache

components/sections/Footer/index.tsx → components/Sections/Footer/index.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image';
 import type { FC } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import NavItem from '@/components/sections/NavItem';
+import NavItem from '@/components/Sections/NavItem';
 import { useSiteConfig } from '@/hooks/useSiteConfig';
 
 import styles from './index.module.css';

components/sections/NavItem/index.module.css → components/Sections/NavItem/index.module.css

@@ -25,7 +25,7 @@
         dark:text-white;
     }
 
-    &:active {
+    &.active {
       @apply bg-green-600;
 
       .label {
@@ -46,7 +46,7 @@
     }
 
     &:hover {
-      @apply dark:bg-neutral-900;
+      @apply bg-neutral-100 dark:bg-neutral-900;
     }
   }
 }

components/sections/NavItem/index.tsx → components/Sections/NavItem/index.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import type { FC, PropsWithChildren } from 'react';
 import { useMemo } from 'react';
 
-import LocalizedLink from '@/components/LocalizedLink';
+import ActiveLocalizedLink from '@/components/Common/ActiveLocalizedLink';
 
 import styles from './index.module.css';
 
@@ -16,24 +16,25 @@ type NavItemProps = {
 };
 
 const NavItem: FC<PropsWithChildren<NavItemProps>> = ({
-  href,
+  href = '',
   type = 'nav',
   children,
   className,
 }) => {
   const showIcon = useMemo(
-    () => type === 'nav' && /^https?:\/\//.test(href),
+    () => type === 'nav' && !href.toString().startsWith('/'),
     [href, type]
   );
 
   return (
-    <LocalizedLink
+    <ActiveLocalizedLink
       href={href}
       className={classNames(styles.navItem, styles[type], className)}
+      activeClassName={styles.active}
     >
       <span className={styles.label}>{children}</span>
       {showIcon && <ArrowUpRightIcon className={styles.icon} />}
-    </LocalizedLink>
+    </ActiveLocalizedLink>
   );
 };