feat(ui): add ui-components package

.github/workflows/dependency-review.yml

@@ -34,4 +34,4 @@ jobs:
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       - name: Review Dependencies
-        uses: actions/dependency-review-action@4081bf99e2866ebe428fc0477b69eb4fcda7220a # v4.4.0
+        uses: actions/dependency-review-action@3b139cfc5fae8b618d3eae3675e383bb1769c019 # v4.5.0

.github/workflows/lighthouse.yml

@@ -27,12 +27,39 @@ permissions:
   pull-requests: write
 
 jobs:
-  lighthouse-ci:
+  get-vercel-preview:
     # We want to skip our lighthouse analysis on Dependabot PRs
     if: |
       startsWith(github.event.pull_request.head.ref, 'dependabot/') == false &&
       github.event.label.name == 'github_actions:pull-request'
+    name: Get Vercel Preview
+    runs-on: ubuntu-latest
+    outputs:
+      deployment_found: ${{ steps.check_deployment.outputs.deployment_found }}
+      url: ${{ steps.check_deployment.outputs.url }}
+    steps:
+      - name: Capture Vercel Preview
+        id: check_deployment
+        uses: patrickedqvist/wait-for-vercel-preview@06c79330064b0e6ef7a2574603b62d3c98789125 # v1.3.2
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          max_timeout: 300 # timeout after 5 minutes
+          check_interval: 10 # check every 10 seconds
+        continue-on-error: true
+      - name: Set Outputs
+        if: always()
+        id: set_outputs
+        run: |
+          if [[ -z "${{ steps.check_deployment.outputs.url }}" ]]; then
+            echo "deployment_found=false" >> $GITHUB_OUTPUT
+          else
+            echo "deployment_found=true" >> $GITHUB_OUTPUT
+            echo "url=${{ steps.check_deployment.outputs.url }}" >> $GITHUB_OUTPUT
+          fi
 
+  lighthouse-ci:
+    needs: get-vercel-preview
+    if: needs.get-vercel-preview.outputs.deployment_found == 'true'
     name: Lighthouse Report
     runs-on: ubuntu-latest
 
@@ -57,16 +84,6 @@ jobs:
           # Used later to edit the existing comment
           comment-tag: 'lighthouse_audit'
 
-      - name: Capture Vercel Preview
-        uses: patrickedqvist/wait-for-vercel-preview@06c79330064b0e6ef7a2574603b62d3c98789125 # v1.3.2
-        id: vercel_preview_url
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          # timeout after 5 minutes
-          max_timeout: 300
-          # check every 10 seconds
-          check_interval: 10
-
       - name: Audit Preview URL with Lighthouse
         # Conduct the lighthouse audit
         id: lighthouse_audit
@@ -76,11 +93,11 @@ jobs:
           configPath: './.lighthouserc.json'
           # These URLS capture critical pages / site functionality.
           urls: |
-            ${{ steps.vercel_preview_url.outputs.url }}/en
-            ${{ steps.vercel_preview_url.outputs.url }}/en/about
-            ${{ steps.vercel_preview_url.outputs.url }}/en/about/previous-releases
-            ${{ steps.vercel_preview_url.outputs.url }}/en/download
-            ${{ steps.vercel_preview_url.outputs.url }}/en/blog
+            ${{ needs.get-vercel-preview.outputs.url }}/en
+            ${{ needs.get-vercel-preview.outputs.url }}/en/about
+            ${{ needs.get-vercel-preview.outputs.url }}/en/about/previous-releases
+            ${{ needs.get-vercel-preview.outputs.url }}/en/download
+            ${{ needs.get-vercel-preview.outputs.url }}/en/blog
           uploadArtifacts: true # save results as a action artifacts
           temporaryPublicStorage: true # upload lighthouse report to the temporary storage
 
@@ -93,7 +110,7 @@ jobs:
           # see https://github.com/actions/github-script#use-env-as-input
           LIGHTHOUSE_RESULT: ${{ steps.lighthouse_audit.outputs.manifest }}
           LIGHTHOUSE_LINKS: ${{ steps.lighthouse_audit.outputs.links }}
-          VERCEL_PREVIEW_URL: ${{ steps.vercel_preview_url.outputs.url }}
+          VERCEL_PREVIEW_URL: ${{ needs.get-vercel-preview.outputs.url }}
         with:
           # Run as a separate file so we do not have to inline all of our formatting logic.
           # See https://github.com/actions/github-script#run-a-separate-file for more info.

.github/workflows/translations-pr-lint.yml

@@ -0,0 +1,57 @@
+# This Workflow is used to comment on PRs that have changes that touch Translated Files
+# and then comments on their PRs mentioning that they should not do so
+
+name: Incoming Translation Checks
+
+on:
+  # run when someone tries to manually change localized content
+  pull_request_target:
+    branches:
+      - main
+    paths:
+      - 'apps/site/pages/**/*.md'
+      - 'apps/site/pages/**/*.mdx'
+      - '!apps/site/pages/en/**/*.md'
+      - '!apps/site/pages/en/**/*.mdx'
+      - '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
+
+jobs:
+  comment_on_translation_pr:
+    # This comment should always be posted on forks, or from internal PRs not originating from Crowdin (which are direct branches)
+    if: |
+      (github.event.pull_request.head.repo.full_name != 'nodejs/nodejs.org') ||
+      (github.event.pull_request.head.repo.full_name == 'nodejs/nodejs.org' && github.event.pull_request.head.ref != 'chore/crowdin')
+
+    name: Comment on Translation PR
+    runs-on: ubuntu-latest
+
+    permissions:
+      # This permission is required by `thollander/actions-comment-pull-request`
+      pull-requests: write
+
+    steps:
+      - name: Harden Runner
+        uses: step-security/harden-runner@0080882f6c36860b6ba35c610c98ce87d4e2f26f # v2.10.2
+        with:
+          egress-policy: audit
+
+      - uses: thollander/actions-comment-pull-request@e2c37e53a7d2227b61585343765f73a9ca57eda9 # v3.0.0
+        with:
+          message: |
+            > [!NOTE]\
+            > Your Pull Request seems to be updating **Translations** of the Node.js Website.
+            >
+            > Whilst we appreciate your intent; Any Translation update should be done through our [Crowdin Project](https://crowdin.com/project/nodejs-web).
+            > We recommend giving a read on our [Translation Guidelines](https://github.com/nodejs/nodejs.org/blob/main/TRANSLATION.md).
+            >
+            > Thank you!
+          comment-tag: use_crowdin

.github/workflows/translations-pr.yml → .github/workflows/translations-sync.yml

@@ -1,67 +1,64 @@
-# This Workflow is used to comment on PRs that have changes that touch Translated Files
-# and then comments on their PRs mentioning that they should not do so
+# This action automates the synchronization of our crowdin translations, so that a human does not need to kick it off from the crowdin UI
+# It also formats incoming content because it is often not adherent to our rules post-translation.
 
-name: Crowdin Checks
+# See translations-upload.yml for automation to upload our source content
+# See translations-pr-lint.yml for quality control we conduct on ingress of new translations.
+name: Crowdin Download
 
 on:
-  pull_request_target:
-    branches:
-      - main
-    paths:
-      - 'apps/site/pages/**/*.md'
-      - 'apps/site/pages/**/*.mdx'
-      - '!apps/site/pages/en/**/*.md'
-      - '!apps/site/pages/en/**/*.mdx'
-      - 'packages/i18n/locales/*.json'
-      - '!packages/i18n/locales/en.json'
+  workflow_dispatch: # Allow running when we want to, for events such as urgent translation mistakes or 100% completed languages
+  schedule:
+    - cron: '0 5 * * 5' # At 05:00 on Fridays. This guarantees that we have the 72 hour weekend time to review translations.
 
 # Cancel any runs on the same branch
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
 permissions:
-  actions: read
+  # These permissions required by `crowdin/github-action`
+  contents: write
+  pull-requests: write
 
 jobs:
-  comment_on_translation_pr:
-    # This comment should always be posted on forks, or from internal PRs not originating from Crowdin (which are direct branches)
-    if: |
-      (github.event.pull_request.head.repo.full_name != 'nodejs/nodejs.org') ||
-      (github.event.pull_request.head.repo.full_name == 'nodejs/nodejs.org' && github.event.pull_request.head.ref != 'chore/crowdin')
-
-    name: Comment on Translation PR
+  synchronize-with-crowdin:
     runs-on: ubuntu-latest
-
-    permissions:
-      # This permission is required by `thollander/actions-comment-pull-request`
-      pull-requests: write
+    outputs:
+      pull_request_number: ${{ steps.crowdin_pr.outputs.pull_request_number }}
 
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@0080882f6c36860b6ba35c610c98ce87d4e2f26f # v2.10.2
+        uses: step-security/harden-runner@91182cccc01eb5e619899d80e4e971d6181294a7 # v2.10.1
         with:
           egress-policy: audit
 
-      - uses: thollander/actions-comment-pull-request@e2c37e53a7d2227b61585343765f73a9ca57eda9 # v3.0.0
+      - name: Checkout
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+
+        # see all the options at https://github.com/crowdin/github-action
+      - name: Crowdin PR
+        uses: crowdin/github-action@2d540f18b0a416b1fbf2ee5be35841bd380fc1da # v2.3.0
+        id: crowdin_pr
         with:
-          message: |
-            > [!NOTE]\
-            > Your Pull Request seems to be updating **Translations** of the Node.js Website.
-            >
-            > Whilst we appreciate your intent; Any Translation update should be done through our [Crowdin Project](https://crowdin.com/project/nodejs-web).
-            > We recommend giving a read on our [Translation Guidelines](https://github.com/nodejs/nodejs.org/blob/main/TRANSLATION.md).
-            >
-            > Thank you!
-          comment-tag: use_crowdin
+          # do not upload anything - this is a one-way operation download
+          upload_sources: false
+          upload_translations: false
+          # the rest of this controls how the PR comes in with new translations
+          download_translations: true
+          localization_branch_name: chore/crowdin
+          create_pull_request: true
+          pull_request_title: '[automated]: crowdin sync'
+          pull_request_body: 'New Crowdin translations from the [Node.js Crowdin project](https://crowdin.com/project/nodejs-web)'
+          commit_message: 'chore: synced translations from crowdin'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          # A numeric ID, found at https://crowdin.com/project/nodejs-web/tools/api
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+          # Created from https://crowdin.com/settings#api-key logged in using nodejs-crowdin-bot
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
 
   format_crowdin_pull_request:
-    # We should only run the automated Format Command on Crowdin-based Pull Requests
-    if: |
-      github.event.pull_request.head.repo.full_name == 'nodejs/nodejs.org' &&
-      github.event.pull_request.head.ref == 'chore/crowdin'
-
-    name: Format Crowdin Pull Request
+    needs: synchronize-with-crowdin
     runs-on: ubuntu-latest
 
     permissions:
@@ -77,8 +74,8 @@ jobs:
       - name: Git Checkout
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
-          # Provides the Pull Request commit SHA or the GitHub merge group ref
-          ref: ${{ github.event_name == 'pull_request_target' && github.event.pull_request.head.sha || github.ref }}
+          # Use the number from the output of crowdin/github-action
+          ref: refs/pull/${{ needs.synchronize-with-crowdin.outputs.pull_request_number }}/head
 
       - name: Restore Lint Cache
         uses: actions/cache/restore@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2
@@ -123,6 +120,7 @@ jobs:
         with:
           commit_options: '--no-verify --signoff'
           commit_message: 'chore: automated format of translated files'
+          branch: 'chore/crowdin'
 
       - name: Save Lint Cache
         uses: actions/cache/save@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2

.github/workflows/translations-upload.yml

@@ -0,0 +1,41 @@
+# This action automates the upload of our source content to crowdin.
+# See translations-sync.yml for the automation to download new translations on a schedule
+# See translations-pr-lint.yml for quality control we conduct on ingress of new translations.
+name: Crowdin Upload
+
+on:
+  push:
+    branches: [main]
+
+# Cancel any runs on the same branch
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  upload-to-crowdin:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Harden Runner
+        uses: step-security/harden-runner@91182cccc01eb5e619899d80e4e971d6181294a7 # v2.10.1
+        with:
+          egress-policy: audit
+
+      - name: Checkout
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+
+        # see all the options at https://github.com/crowdin/github-action
+      - name: crowdin action
+        uses: crowdin/github-action@2d540f18b0a416b1fbf2ee5be35841bd380fc1da # v2.3.0
+        with:
+          # only upload sources, ensuring this is a one-way operation
+          upload_sources: true
+          upload_translations: false
+          download_translations: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          # A numeric ID, found at https://crowdin.com/project/nodejs-web/tools/api
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+          # Created from https://crowdin.com/settings#api-key logged in using nodejs-crowdin-bot
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

.nvmrc

@@ -1 +1 @@
-20
+v22

CODEOWNERS

@@ -21,3 +21,5 @@ turbo.json @nodejs/nodejs-website @nodejs/web-infra
 crowdin.yml @nodejs/web-infra
 apps/site/redirects.json @nodejs/web-infra
 apps/site/site.json @nodejs/web-infra
+
+apps/site/pages/en/learn/getting-started/security-best-practices.md @nodejs/security-wg

CONTRIBUTING.md

@@ -115,7 +115,7 @@ for getting things done and landing your contribution.
     ```bash
     cd ~/nodejs.org
     git add .
-    git commit #let commitizen handle the commit
+    git commit -m "describe your changes"
     git push -u origin name-of-your-branch
     ```
 

README.md

@@ -30,9 +30,6 @@
   <a title="scorecard" href="https://securityscorecards.dev/viewer/?uri=github.com/nodejs/nodejs.org">
     <img src="https://api.securityscorecards.dev/projects/github.com/nodejs/nodejs.org/badge" alt="nodejs.org scorecard badge" />
   </a>
-  <a href="http://commitizen.github.io/cz-cli/" alt="Commitizen friendly">
-    <img src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg">
-  </a>
   <br />
   <br />
 </p>

TRANSLATION.md

@@ -87,3 +87,12 @@ Translation Keys should not be translated during Unit Testing. If your Component
 - Unit Tests should not rely on text, titles, or string bags, as these texts will change arbitrarily and make the test suite fail.
   - In this case, you should test your component by aria-text, or other `aria-*` attributes or even by class names or other artifacts.
 - Visual Regression Testing is recommended to test how different languages and text appear within a Component.
+
+## Deploying Translations
+
+Translations are synced between Crowdin and the repository via GitHub Actions.
+
+- On every push to `main`, we upload any new source content.
+- Via a cron schedule, and as needed manually by a collaborator, we download completed translations.
+
+Incoming translations are linted to ensure they come from crowdin, and are also formatted to adhere to our project settings.