feat(infra): migrate to next.js infrastructure (#4991)Co-authored-by:…

… Brian Muenzenmeyer <brian.muenzenmeyer@gmail.com> Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com> Co-authored-by: Michael Esteban <mickel13@gmail.com> Co-authored-by: Shu Ding <g@shud.in>

* chore(next.js): added initial package.json update and configuration files

* chore(static): moved static files to public/static

* chore(pages): moved locale directory to pages/

* chore(survey): added readme and updated deploy script for survey

* chore(legacy): removed build.js and server.js

* chore(typescript): updated theme.tsx and added typescript support

* chore(folder-structure): continued moving files and clean up of things

* chore(codeowners): updated codeowners

* chore(eslint): updated markdown matching

* chore(move): moved styles and layout and data folders

* chore(i18n): added initial locale config

* chore(lts): stick with v18 lts

* chore(i18n): updated crowdin configuration

* chore(lts): fixed lts naming on ci and nvm

* chore(package.json): fixed lint commands

* chore(package-lock): reindexed and updated package lock

* chore(i18n): added react-intl package

* chore(configs): updated next, eslint and tsconfig

* chore(packages): add prettier config for the plugin

* chore(configs): updated prettier, eslint adn package.json

* chore(package): removed airbnb config

* chore(lint): applied linting in core files

* chore(lint): applied linting on markdown and style files

* chore(ci): disable build job for now

* chore(cache): added eslint cache files to ignore

* chore(public): moved robots and security to root public folder

* chore(eslint): added default next config

* chore(remark): added remark configuration

* chore(i18n): added ICU locale files boilerplates

* chore(config): added website config file

* chore(favicon): removed all favicon alternates to a simple png file

* chore(dependencies): added a rss/atom/json feed package

* chore(packages): updated packages and adopted npm-run-all

* chore(layouts): removed blm specific layouts

* feast(config): introduced site config provider and context

* feat(header): started to create the header component

* chore(provider): refactored provider

* chore(fonts): added source sans pro font

* feat(templates): added core component

* chore(pages): removed legacy blm page

* feat(types): introduced frontmatter types

* chore(theme): started to update theme with layout

* feat(config): updated site config types

* feat(header): added all header meta tags

* chore(document): added assets for theme switch

* chore(eslint): fixed eslint failed rule

* update nextra

* chore(document): added remaining scripts

* feat(footer): added footer

* feat(header): updated header with favicon

* feat(manifest): added manifest for PWA

* feat(i18n): introduced i18n hook

* chore(header): added i18n config

* feat(layouts): added default layout

* feat(layouts): initial version of the layout provider

* refactor(provider): cleaned-up the site provider

* feat(theme): adopted layout provider on theme

* chore(layouts): removed unused layouts

* feat(footer): added scroll-to-top

* chore(i18n): added navigation and translations

* chore(dependencies): added highlightjs and classnames

* chore(utils): added link locale util

* feat(i18n): introduced locale provider

* feat(header): renamed header into htmlhead

* feat(header): introduced page header

* feat(components): introduced localised linkicomponent

* feat(components): introduced language picker component

* chore(footer): updated translation id

* feat(app): updated app, document and theme with new locale and scripts

* chore(layouts): added header to default layout

* chore(layouts): removed old header layout

* chore(docs): made the docs index mdx compatible

* chore(types): added labels to frontmatter

* chore(config): updated next config and remark plugins

* chore(types): added types for node-version-data

* feat(i18n): hook to support metadata about current route

* feat(navigation): updated navigation metadata

* feat(navigation): introduced a navigation hook

* feat(node-versions): introduced provider and types for node-versions

* feat(navigation): introduced side navigation component

* feat(header): use the new navigation component

* chore(app): introduced node data provider usage

* feat(docs): introduced doc layout

* chore(layouts): added docs to layout provider

* chore(layouts/scripts): removed now unused layouts and scripts

* chore(scripts): removed build scripts for node data

* chore(utils): introduced new util

* chore(data): removed non-needed data anymore

* chore(navigation): include root entry on side nav

* fix(footer): fixed spacing of items

* fix(body): next element to also follow body rules

* feat(layouts): introduced new layouts

* chore(note): added todo notes on temporary components

* feat(mdx): added proper node api versions component

* chore(dependencies): removed non-needed dependencies

* chore(docs): reverted mdx rename and use regular mdx provider for the component import

* chore(remark): a lot of the lists are unordered and shouldn't need to be with *

* chore(layouts): removed unused knowledge layouts

* feat(banner): introduced banner component

* feat(nextra): allow plain md syntax; include i18n file in ssg

* feat(next): introduced lambdas for getting data

* chore(eslint): added mjs to es6 context

* feat(next): adopted new data fetching mechanism

* feat(providers): updated providers with new data fetching

* chore(types): simplified provider types

* chore(i18n): added lts span

* chore(next): improve next configuration

* feat(header): allow subpath match for sidenav

* chore(dependencies): added critters and sharp for css/image optimization

* feat(caching): introduced caching of static async props

* fix(header): home location sublink

* chore(hooks): removed .tsx extension

* chore(scripts): removed unused scripts

* feat(utils): added util for changelog link

* feat(providers): provide nextra context

* chore(types): added numeric version

* feat(hooks): nextra context hook

* feat(components): download button component

* feat(layouts): introduced index layout

* feat(date): added format time util

* chore(scripts): removed more unused scripts

* disable flexsearch for now

* chore(next): increase memory pool for build

* feat(data): updated hooks and how data is provided

* chore(components): moved a few components around

* chore(404): added dev 404 page

* chore(i18n): added navigation and i18n for downloads

* feat(download): introduced download components

* feat(pages): introduced download pages

* feat(navigation): offer replacement of vars in link

* chore(scripts): updated a few scripts

* chore(scripts): removed other deprecated script

* chore(handlebars): added handlebars

* feat(release-post): contained release posts within the scripts folder

* chore(external): no need to have a package.json there anymore

* chore(release-post): minor typo fix

* chore(dependencies): added sw dependency

* chore(sw): enable sw feature

* chore(types): updated node data types

* feat(components): introduced download table component

* chore(layouts): introduced previous releases layout

* chore(scripts): added jquery as script

* refactor(components): use Link component

* chore(downloads): use dompurify for the frontmatter modules

* fix(links): fix api docs links

* fix(locale): fixed determination of route match

* chore(deps): updated dependencies

* chore(helpers): introduced helper for getting a header link

* feat(heading): introduced anchored heading component

* chore(theme): adopted anchored component

* chore(anchor): id is always provided

* chore(dependencies): updated package json

* chore(mdx): transformed into mdx pages that need to be in mdx

* chore(dependencies): updated dependencies

* chore(mdx): default config

* fix: upgrade nextra and refactor getNextData

* feat(layouts): introduced blog post layout

* fix(release-post): end paragraph markings

* chore(layouts): sanitize to be memoized

* fix: only pass necessary node versions in page props

* chore(guides): removed non-translated guides

* fix(markdown): fix buffer guide markdown

* feat(mdx): blockquote as highlightbox

* fix(linting): fixed prettier rules for mdx

* fix: /404 route and optimize page size

* fix: optimize next build

* chore(canonical): add canonical

* refactor(data): simplified data gathering

* chore(dependencies): introducesd sitemap and swr

* chore(ts): allow downlevel iteration

* fix(build): unoptimized images

* feat(downloads): only latest major of each version

* chore(js): removed unused code

* chore(404): prettified 404 file

* chore(footer): fixed # not valid

* chore(i18n): add 404 page messages

* chore(404): use tsx instead of mdx

* chore(react-intl): no errors

* chore(i18n): fallback data

* chore(ci): added build on ci again

* chore(sitemap): added sitemap data

* chore(eslint): prefer nodejs config

* chore(fix): linting

* chore(scripts): remove server 404 and fix main.js for 404

* chore(build): is memory efficient now

* fix(i18n): always using english locale

* chore(next): updated config options

* feat(data): improved data rendering/reusability

* chore(next): remove non-necessary packages

* chore(scripts): refactored release-post to mjs

* chore(scripts): simplify and document code

* chore(next): refactored data scripts

* refactor(header): i18n, svg and fix styles

* chore(next): minor refactor of helper

* feat(node-data): only on selected routes

* fix(ts): fixed typescript types

* refactor(providers): simplified the _app

* chore(dependencies): added gray-matter

* feat(helpers): introduced script helpers

* chore(types): updated types

* refactor(next): refactored data components

* chore(sitemap): removed non-existent env

* chore(optimize): removed css optimization

* feat(dat): introduced blog data helper

* fix(blogdata): fixed slug

* feat(types): shared props and context

* feat(utils): added time component

* chore(gitignore): year pages

* chore(types): refactored types

* chore(data): improved blog data and create year pages

* feat(blog): introduced blog index page

* feat(layouts): implemented blog category layout

* feat(i18n): migrate translations 🎉  (#1)

* feat: migrate `ar`

* feat: migrate `ca`

* feat: migrate `de`

* feat: migrate `es`

* feat: migrate `fa`

* feat: migrate `fr`

* feat: migrate `gl`

* feat: migrate `it`

* feat: migrate `ja`

* feat: migrate `ka`

* feat: migrate `ko`

* feat: migrate `nl`

* feat: migrate `pt-br`

* feat: migrate `ro`

* feat: migrate `ru`

* feat: migrate `tr`

* feat: migrate `uk`

* feat: migrate `zh-cn`

* feat: migrate `zh-tw`

* chore: update next and previous strings

* chore: remove `en` site.json

* fix(document): numerours document style fixes and javascript fixes

* chore(eslint): global window

* chore(external): moved external folders

* feat(rss): introduced rss generation

* chore(tests): removed unused tests

* chore(readme): updated readme

* chore(lint): ignore and fix linting

* refactor(scripts): refactored the legacy scripts

* chore(ci): set memory to 4gb on ci

* chore(workers): no need tofr morkers

* chore(ci): updated a doc and ci file

* chore(refactor): minor refactors, text changes and bug fixes

* Update COLLABORATOR_GUIDE.md

Co-authored-by: Brian Muenzenmeyer <brian.muenzenmeyer@gmail.com>
Signed-off-by: Claudio Wunder <cwunder@gnome.org>

* Apply suggestions from code review

Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com>
Signed-off-by: Claudio Wunder <cwunder@gnome.org>

* fix: upgrade nextra to remove the __esModule hack

* chore: disable outputFileTracing

* chore(ci): use build cache

* chore(js): fix theme switcher issues

* fix(build): improved data transmission from static props

* chore(fixes): minor style and config changes

* fix(scrollto): minor scroll to fix

* Update next.config.mjs

Co-authored-by: Michael Esteban <mickel13@gmail.com>
Signed-off-by: Claudio Wunder <cwunder@gnome.org>

* chore(ci): attempt to optimize caching

* chore(ci): fine-tune to be based on eslint hashing

* chore(cache): only cache .next/cache

* chore(mastodon): added mastodon verification

* chore(next): updated packages and optimised build performance

* chore(dependencies): updated dependencies

* fix(lint): fixed linting

* chore(dependencies): removed temp dep

* chore(package): reduce memory

---------

Signed-off-by: Claudio Wunder <cwunder@gnome.org>
Co-authored-by: Shu Ding <g@shud.in>
Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com>
Co-authored-by: Brian Muenzenmeyer <brian.muenzenmeyer@gmail.com>
Co-authored-by: Michael Esteban <mickel13@gmail.com>

.editorconfig

@@ -1,13 +1,9 @@
-# https://editorconfig.org/
-
 root = true
 
 [*]
 indent_style = space
 indent_size = 2
 end_of_line = lf
-insert_final_newline = true
+charset = utf-8
 trim_trailing_whitespace = true
-
-[*.svg]
-insert_final_newline = false
+insert_final_newline = true

.eslintignore

@@ -1,4 +1,17 @@
-**/*.min.js
-static/legacy/
-external/
-build/
+build
+.next
+external
+styles
+node_modules
+public/en/user-survey-report
+public/static/documents
+public/static/legacy
+
+# These should be fixed in the future as the
+# tests and scripts will be updated in this PR
+tests
+
+# MDX Plugin enforces Prettier formatting which should
+# be done in the future as we don't want to update the Markdown file
+# contents right now
+pages/**/*.md

.eslintrc

@@ -1,51 +1,72 @@
 {
-  "extends": [
-    "eslint:recommended",
-    "standard",
-    "prettier"
-  ],
-  "plugins": [
-    "prettier"
-  ],
-  "rules": {
-    "prettier/prettier": "error"
-  },
+  "extends": ["eslint:recommended", "next"],
   "overrides": [
     {
-      "files": [
-        "**/*.md"
-      ],
-      "plugins": [
-        "markdown"
-      ],
-      "processor": "markdown/markdown"
+      "files": ["**/*.{mjs,js,jsx,ts,tsx}"],
+      "extends": ["plugin:prettier/recommended"],
+      "env": { "node": true, "es6": true }
+    },
+    {
+      "files": ["**/*.{ts,tsx}"],
+      "globals": { "globalThis": false }
+    },
+    {
+      "files": ["**/*.tsx"],
+      "rules": {
+        "react/no-unused-prop-types": "off",
+        "react/require-default-props": "off",
+        "react/jsx-props-no-spreading": "off",
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "warn",
+        "consistent-return": "off",
+        "react/function-component-definition": [
+          "error",
+          {
+            "namedComponents": "arrow-function",
+            "unnamedComponents": "arrow-function"
+          }
+        ],
+        "react/jsx-filename-extension": [
+          2,
+          { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
+        ]
+      }
+    },
+    {
+      "files": ["**/*.{md,mdx}"],
+      "extends": ["plugin:mdx/recommended"],
+      "settings": { "mdx/code-blocks": false },
+      "rules": { "react/jsx-no-undef": "off", "no-useless-escape": "off" }
     },
     {
       "files": [
-        "**/*.md/*.js"
+        "pages/*/about/*.{md,mdx}",
+        "pages/*/download/*.{md,mdx}",
+        "pages/*/get-involved/*.{md,mdx}",
+        "pages/*/docs/*.{md,mdx}",
+        "pages/*/*.{md,mdx}"
       ],
-      "parserOptions": {
-        "ecmaVersion": "latest"
-      },
+      "settings": { "mdx/code-blocks": true }
+    },
+    {
+      "files": ["pages/**/*.{md,mdx}/*.{js,jsx,cjs,mjs,ts,tsx}"],
       "rules": {
-        "eqeqeq": "off",
-        "n/no-deprecated-api": "off",
-        "n/handle-callback-err": "off",
-        "no-const-assign": "off",
+        "camelcase": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "consistent-return": "off",
+        "func-names": "off",
+        "import/extensions": "off",
+        "import/no-extraneous-dependencies": "off",
+        "import/no-unresolved": "off",
+        "no-console": "off",
+        "no-empty": "off",
+        "no-restricted-globals": "off",
+        "no-restricted-syntax": "off",
         "no-undef": "off",
+        "no-underscore-dangle": "off",
         "no-unused-expressions": "off",
         "no-unused-vars": "off",
-        "node/handle-callback-err": "off",
-        "node/no-deprecated-api": "off",
-        "prefer-const": "off",
-        "prettier/prettier": [
-          "error",
-          {
-            "singleQuote": true,
-            "trailingComma": "none"
-          }
-        ],
-        "semi": ["error", "always"]
+        "prefer-promise-reject-errors": "off"
       }
     }
   ]

.github/ISSUE_TEMPLATE/01-bug-report.yml

@@ -11,37 +11,36 @@ body:
         for us to fix it when you attach a screenshot as well.
   - type: input
     attributes:
-      label: "URL:"
+      label: 'URL:'
       description: The URL of the page you are reporting an issue on.
       placeholder: https://nodejs.org/en/
     validations:
       required: true
   - type: input
     attributes:
-      label: "Browser Name:"
-      description: What kind of browser are you using? 
+      label: 'Browser Name:'
+      description: What kind of browser are you using?
       placeholder: Chrome
     validations:
       required: true
   - type: input
     attributes:
-      label: "Browser Version:"
+      label: 'Browser Version:'
       description: What version of browser are you using?
-      placeholder: "103.0.5060.134"
+      placeholder: '103.0.5060.134'
     validations:
       required: true
   - type: input
     attributes:
-      label: "Operation System:"
-      description: 
-        What kind of operation system are you using
+      label: 'Operation System:'
+      description: What kind of operation system are you using
         (Write it in full, with version number)?
-      placeholder: "Windows 10, 21H2, 19044.1826"
+      placeholder: 'Windows 10, 21H2, 19044.1826'
     validations:
       required: true
   - type: textarea
     attributes:
-      label: "How to reproduce the issue:"
+      label: 'How to reproduce the issue:'
       placeholder: |
         1. What I did. 
         2. What I expected to happen. 

.github/ISSUE_TEMPLATE/02-feature-request.yml

@@ -12,7 +12,7 @@ body:
         so it might be a good idea to check out our plans there as well: https://github.com/nodejs/nodejs.dev/issues/.
   - type: textarea
     attributes:
-      label: "Enter your suggestions in details:"
+      label: 'Enter your suggestions in details:'
       placeholder: |
         1. What I expected to happen.
         2. Your reason (if possible, images or videos are welcome).

.github/ISSUE_TEMPLATE/03-i18n.yml

@@ -10,7 +10,7 @@ body:
         to create a new localization team.
   - type: textarea
     attributes:
-      label: "Enter your issue on localizations here:"
+      label: 'Enter your issue on localizations here:'
       placeholder: |
         1. The name of the team (e.g: nodejs/node-cn).
         2. Any problems to report or you want to create it?

.github/dependabot.yml

@@ -1,12 +1,12 @@
 version: 2
 updates:
   - package-ecosystem: github-actions
-    directory: "/"
+    directory: '/'
     schedule:
       interval: weekly
     open-pull-requests-limit: 10
   - package-ecosystem: npm
-    directory: "/"
+    directory: '/'
     schedule:
       interval: weekly
     open-pull-requests-limit: 10

.github/workflows/ci.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: "lts/*"
+          node-version-file: '.nvmrc'
           cache: npm
 
       - name: Install npm dependencies
@@ -31,9 +31,9 @@ jobs:
       - name: Lint
         run: |
           echo "::add-matcher::.github/workflows/remark-lint-problem-matcher.json"
-          npm run test:lint
+          npm run lint
 
-  test:
+  build:
     name: Node on ${{ matrix.os }}
     runs-on: ${{ matrix.os }}
 
@@ -49,28 +49,47 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: "lts/*"
+          node-version-file: '.nvmrc'
           cache: npm
 
-      - run: java -version
-
-      - name: Install npm dependencies
+      - name: Install NPM dependencies
         run: npm ci
 
-      - name: Build
-        run: npm run build
-
-      - name: Run unit tests
-        run: npm run test:unit
+      - name: Restore Next.js cache
+        uses: actions/cache/restore@v3
+        with:
+          path: |
+            ${{ github.workspace }}/.next/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
 
-      - name: Run HTML validator
-        run: npm run test:html
+      - name: Build Next.js
+        run: npm run build
+        env:
+          NODE_OPTIONS: '--max_old_space_size=4096'
 
-      - name: Run linkinator
-        uses: JustinBeckwith/linkinator-action@v1
+      - name: Save Next.js cache
+        uses: actions/cache/save@v3
         with:
-          linksToSkip: "^(?!http://localhost)"
-          paths: en
-          recurse: true
-          serverRoot: build
-          verbosity: error
+          path: |
+            ${{ github.workspace }}/.next/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('.next/cache/eslint') }}
+
+      - name: Export Next.js
+        run: npm run export
+
+      # We don't generate non-translated pages. So if a certain page on /en/ exists
+      # but not on /de/ or any other language, it will 404. This is handled on nginx level
+      # Prior to this migration Metalsmith would copy the English version of a page to all
+      # the non-translated pages. "Fooling" the 404 by basically adding i18n context with
+      # an untranslated page. This would be very exhaustive with Next.js on SCG mode
+      # but it's something we want to do once we decide upon using Next.js on SSR mode or
+      # if we decide upon using Vercel's infrastructure as generating a copy of every English page
+      # on the file system is very resource exhaustive.
+      # - name: Run linkinator
+      #   uses: JustinBeckwith/linkinator-action@v1
+      #   with:
+      #     linksToSkip: '^(?!http://localhost)'
+      #     paths: en
+      #     recurse: true
+      #     serverRoot: build
+      #     verbosity: error

.github/workflows/codeql.yml

@@ -1,4 +1,4 @@
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   push:
@@ -8,7 +8,7 @@ on:
     branches:
       - main
   schedule:
-    - cron: "0 0 * * 0"
+    - cron: '0 0 * * 0'
   workflow_dispatch:
 
 jobs:
@@ -27,7 +27,7 @@ jobs:
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v2
         with:
-          languages: "javascript"
+          languages: 'javascript'
 
       - name: Perform CodeQL Analysis
         uses: github/codeql-action/analyze@v2

.gitignore

@@ -1,5 +1,3 @@
-# Generated HTML and other static files
-build/
 # Commonly ignored Node.js files
 node_modules/
 npm-debug.log
@@ -10,7 +8,13 @@ npm-debug.log
 .AppleDouble
 .LSOverride
 
-# Netlify
-.netlify
+# Next.js files
+.next
+build
+public/sitemap.xml
+public/en/feed/*.xml
+pages/en/blog/year-[0-9][0-9][0-9][0-9].md
 
-.cache/
+# ESLint Cache Files
+.eslintjscache
+.eslintmdcache

.nvmrc

@@ -0,0 +1 @@
+lts/hydrogen

.prettierignore

@@ -0,0 +1,17 @@
+build
+.next
+external
+styles
+node_modules
+public/en/user-survey-report
+public/static/documents
+public/static/legacy
+
+# These should be fixed in the future as the
+# tests and scripts will be updated in this PR
+tests
+
+# MDX Plugin enforces Prettier formatting which should
+# be done in the future as we don't want to update the Markdown file
+# contents right now
+pages/**/*.md

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "avoid"
+}