Scaffold multi-package workspace. (#6850)

.github/workflows/build.yml

@@ -136,4 +136,4 @@ jobs:
           (matrix.os == 'ubuntu-latest') &&
           ((github.event_name == 'push') || (github.event_name == 'pull_request_target'))
         run: |
-          npm run sync-orama
+          cd apps/site && npm run sync-orama

.github/workflows/lighthouse.yml

@@ -106,7 +106,7 @@ jobs:
           # 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.
           script: |
-            const { formatLighthouseResults } = await import('${{github.workspace}}/scripts/lighthouse/index.mjs')
+            const { formatLighthouseResults } = await import('${{github.workspace}}/apps/site/scripts/lighthouse/index.mjs')
             await formatLighthouseResults({core})
 
       - name: Add Comment to PR

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

@@ -45,9 +45,8 @@ jobs:
         # This step is responsible for providing a reusable string that can be used within other steps and jobs
         # that use the `turbo` cli command as a way of easily providing shared arguments to the `turbo` command
         id: turborepo_arguments
-        # See https://turbo.build/repo/docs/reference/command-line-reference/run#--cache-dir
         # See https://turbo.build/repo/docs/reference/command-line-reference/run#--force
-        run: echo "turbo_args=--force=true --cache-dir=.turbo/cache" >> "$GITHUB_OUTPUT"
+        run: echo "turbo_args=--force=true" >> "$GITHUB_OUTPUT"
 
   lint:
     # This Job should run either on `merge_groups` or `push` events
@@ -126,11 +125,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: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
-        run: npx --package=typescript@latest -- tsc --build .
+        run: npx --package=turbo@latest -- turbo lint check-types prettier ${{ needs.base.outputs.turbo_args }}
 
       - name: Save Lint Cache
         # We only want to save caches on `push` events or `pull_request_target` events
@@ -227,6 +222,7 @@ jobs:
         # sha reference has no stable git tag reference or URL. see https://github.com/chromaui/chromatic-cli/issues/797
         uses: chromaui/action@5f6574e351eb055223ae8ea9e1a734d1d695ea9c
         with:
+          workingDir: apps/site
           buildScriptName: storybook:build
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           exitOnceUploaded: true

.husky/pre-commit

@@ -5,4 +5,4 @@
 npx lint-staged
 
 # verify typescript staged files
-npx tsc --build .
+npx tsc --build apps/site

.lintstagedrc.json

@@ -1,5 +1,8 @@
 {
-  "**/*.{js,mjs,ts,tsx,md,mdx}": ["eslint --fix", "prettier --check --write"],
+  "**/*.{js,mjs,ts,tsx,md,mdx}": [
+    "turbo run lint:lint-staged --",
+    "prettier --check --write"
+  ],
   "**/*.css": ["stylelint --allow-empty-input", "prettier --write"],
   "**/*.{json,yml}": ["prettier --check --write"]
 }

COLLABORATOR_GUIDE.md

@@ -96,41 +96,45 @@ The Website also uses several other Open Source libraries (not limited to) liste
 
 ### Structure of this Repository
 
-- React Components are defined on `/components`
-- React Templates are defined on `/layouts`
-- Global Stylesheets are declared on `/styles`
+⚠️ The repository is actively under migration to a multi-package workspace.
+Locations are subject to change. (If you are someone updating these paths,
+please document those changes here.)
+
+- React Components are defined on `apps/site/components`
+- React Templates are defined on `apps/site/layouts`
+- Global Stylesheets are declared on `apps/site/styles`
   - Styles are done with [PostCSS][]
-- Public files are stored on `/public`
-  - Static Images, JavaScript files, and others are stored within `/public/static`
-- Internationalisation is done on `/i18n`
-  - React Localisation Data is stored within `/i18n/locales`
+- Public files are stored on `apps/site/public`
+  - Static Images, JavaScript files, and others are stored within `apps/site/public/static`
+- Internationalisation is done on `apps/site/i18n`
+  - React Localisation Data is stored within `apps/site/i18n/locales`
   - We use the [ICU Message Syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) for Translations
-  - Configuration for Locales is done within `/i18n/config.json`
-- Website Content is defined within `/pages`
-  - Initial development usually happens in English: `/pages/en`
-  - Localized versions of `/pages/en` are done within `/pages/{localeCode}`
+  - Configuration for Locales is done within `apps/site/i18n/config.json`
+- Website Content is defined within `apps/site/pages`
+  - Initial development usually happens in English: `apps/site/pages/en`
+  - Localized versions of `/pages/en` are done within `apps/site/pages/{localeCode}`
   - All content is in Markdown and is per locale.
   - The top of each Markdown file is a YAML (Frontmatter) block for page-specific localization information passed to various templates.
-  - The bulk of the Markdown content for each page is referenced as `{children}` on their respective JSX Layout (`layouts/`)
-- Multi-Purpose React Hooks are defined on `/hooks`
-- Multi-Purpose TypeScript definitions are defined on `/types`
-- React Context Providers are defined on `/providers`
-- Build-time Data Fetching Scripts are defined on `/next-data`
+  - The bulk of the Markdown content for each page is referenced as `{children}` on their respective JSX Layout (`apps/site/layouts/`)
+- Multi-Purpose React Hooks are defined on `apps/site/hooks`
+- Multi-Purpose TypeScript definitions are defined on `apps/site/types`
+- React Context Providers are defined on `apps/site/providers`
+- Build-time Data Fetching Scripts are defined on `apps/site/next-data`
   - Used for Node.js Release data fetching
   - Generation of build-time indexes such as blog data
-- Multi-Purpose Scripts are stored within `/scripts`
+- Multi-Purpose Scripts are stored within `apps/site/scripts`
   - Such as Node.js Release Blog Post generation
-- Storybook Configuration is done within `/.storybook`
+- Storybook Configuration is done within `apps/site/.storybook`
   - We use an almost out-of-the-box Storybook Experience with a few extra customisations
 
 ### Adding new Pages
 
 1. Create new page content including the layout, title and copy.
-2. Update the relevant `/layout` to add a link to the new page.
+2. Update the relevant `apps/site/layout` to add a link to the new page.
 
 #### Create the page content
 
-Create a new markdown file in `/pages/en`.
+Create a new markdown file in `apps/site/pages/en`.
 
 At the top of the markdown file, within the Markdown Frontmatter, set a page the title and layout.
 
@@ -192,7 +196,7 @@ Finally, if you're unfamiliar with how to use Tailwind or how to use Tailwind wi
   - We require that you define one Tailwind Token per line, just as shown on the example above, since this improves readability
 - Only write CSS within CSS Modules, avoid writing CSS within JavaScript files
 - We recommend creating mixins for reusable animations, effects and more
-  - You can create Mixins within the `styles/mixins` folder
+  - You can create Mixins within the `apps/site/styles/mixins` folder
 
 > \[!NOTE]\
 > Tailwind is already configured for this repository. You don't need to import any Tailwind module within your CSS module.\
@@ -205,11 +209,11 @@ Finally, if you're unfamiliar with how to use Tailwind or how to use Tailwind wi
 
 ### Best practices when creating a Component
 
-- All React Components should be placed within the `components` folder.
+- All React Components should be placed within the `apps/site/components` folder.
 - Each Component should be placed, whenever possible, within a sub-folder, which we call the "Domain" of the Component
   - The domain represents where these Components belong to or where they will be used.
   - For example, Components used within Article Pages or that are part of the structure of an Article or the Article Layouts,
-    should be placed within `components/Article`
+    should be placed within `apps/site/components/Article`
 - Each component should have its folder with the name of the Component
 - The structure of each component folder follows the following template:
   ```text
@@ -332,13 +336,13 @@ This is to ensure that the Website is always available and that we do not depend
 #### What is `next.dynamic.mjs`?
 
 Our whole Website uses a custom renderer for rendering the pages.
-As you might have seen, within the `pages` directory we have [Next.js Dynamic Route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes) named `[...path].tsx` that matches against all possible routes of the Website.
+As you might have seen, within the `apps/site/pages` directory we have [Next.js Dynamic Route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes) named `[...path].tsx` that matches against all possible routes of the Website.
 
-This means that each `.md(x)` file within `pages/` is not rendered by Next.js regular App Tree (`pages/_document.tsx` and `pages/_app.tsx`) but a custom render tree.
+This means that each `.md(x)` file within `apps/site/pages/` is not rendered by Next.js regular App Tree (`apps/site/pages/_document.tsx` and `apps/site/pages/_app.tsx`) but a custom render tree.
 
 This custom render uses `getStaticPaths` and [Incremental Static Generation](https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) to generate the full list of supported pages of the Website.
 For example, this allows us to generate Localized Pages for every page that is not translated, by telling Next.js to create a localised path.
-`next.dynamic.mjs` is responsible for getting a full list of the source pages (`pages/en`) and identifying which pages have been translated.
+`next.dynamic.mjs` is responsible for getting a full list of the source pages (`apps/site/pages/en`) and identifying which pages have been translated.
 
 Non-translated pages will have their Localized contexts and translated React message-bags (`next-intl`) but the content will be the same as the source page (English).
 Whereas localized pages will have localized context and content.

CONTRIBUTING.md

@@ -91,7 +91,7 @@ for getting things done and landing your contribution.
 
    ```bash
    npm ci # installs this project's dependencies
-   npx turbo dev # starts a development environment
+   npm run dev # starts a development environment
    ```
 
 7. Perform your changes. In case you're unfamiliar with the structure of this repository, we recommend a read on the [Collaborator Guide](./COLLABORATOR_GUIDE.md)
@@ -103,10 +103,10 @@ for getting things done and landing your contribution.
    git merge upstream/main
    ```
 
-9. Run `npx turbo format` to confirm that linting and formatting are passing.
+9. Run `npm run format` to confirm that linting and formatting are passing.
 
    ```bash
-   npx turbo format
+   npm run format
    ```
 
 10. Once you're happy with your changes, add and commit them to your branch, then push the branch to your fork.
@@ -137,28 +137,28 @@ This repository contains several scripts and commands for performing numerous ta
 <details>
   <summary>Commands for Running & Building the Website</summary>
 
-- `npx turbo dev` runs Next.js's Local Development Server, listening by default on `http://localhost:3000/`.
-- `npx turbo build` builds the Application on Production mode. The output is by default within `.next` folder.
+- `npm run dev` runs Next.js's Local Development Server, listening by default on `http://localhost:3000/`.
+- `npm run build` builds the Application on Production mode. The output is by default within `.next` folder.
   - This is used for the Node.js Vercel Deployments (Preview & Production)
 - `npx turbo deploy` builds the Application on Export Production Mode. The output is by default within `build` folder.
   - This is used for the Node.js Legacy Website Server (DigitalOcean)
-- `npx turbo start` starts a web server running serving the built content from `npx turbo build`
+- `npx turbo start` starts a web server running serving the built content from `npm run build`
 
 </details>
 
 <details>
   <summary>Commands for Maintenance Tasks and Tests</summary>
 
-- `npx turbo lint` runs the linter for all the js files.
-  - `npx turbo lint:fix` attempts to fix any linting errors
-- `npx turbo prettier` runs the prettier for all the js files.
-  - `npx turbo prettier:fix` attempts to fix any style errors
-- `npx turbo format` formats and fixes the whole codebase
-- `npx turbo scripts:release-post` generates a release post for the current release
-  - **Usage:** `npx turbo scripts:release-post -- --version=vXX.X.X --force`
+- `npm run lint` runs the linter for all files.
+  - `npm run lint:fix` attempts to fix any linting errors
+- `npm run prettier` runs the prettier for all the js files.
+  - `npm run prettier:fix` attempts to fix any style errors
+- `npx turbo format` formats and fixes lints for the whole codebase
+- `npm run scripts:release-post` in the `apps/site` directory generates a release post for the current release
+  - **Usage:** `npm run scripts:release-post -- --version=vXX.X.X --force`
 - `npx turbo storybook` starts Storybook's local server
 - `npx turbo storybook:build` builds Storybook as a static web application for publishing
-- `npx turbo test` runs all tests locally
+- `npm run test` runs all tests locally
   - `npx turbo test:unit` runs jest (unit-tests) locally
 
 </details>

.eslintrc.json → apps/site/.eslintrc.json

@@ -1,5 +1,6 @@
 {
   "extends": "prettier",
+  "ignorePatterns": ["storybook-static/**"],
   "overrides": [
     {
       "files": ["public/**/*.js"],
@@ -19,6 +20,7 @@
       "plugins": ["import"],
       "extends": ["eslint:recommended", "next", "next/core-web-vitals"],
       "rules": {
+        "import/namespace": "off",
         "import/order": [
           "error",
           {
@@ -48,6 +50,10 @@
         "plugin:import/typescript"
       ],
       "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "project": true,
+        "tsconfigRootDir": "."
+      },
       "rules": {
         "@typescript-eslint/consistent-type-imports": "error",
         "@typescript-eslint/array-type": ["error", { "default": "generic" }],

apps/site/README.md

@@ -0,0 +1 @@
+# Node.js website

client-context.ts → apps/site/client-context.ts

@@ -1,8 +1,7 @@
 import { cache } from 'react';
 
 import type { ClientSharedServerContext } from '@/types';
-
-import { assignClientContext } from './util/assignClientContext';
+import { assignClientContext } from '@/util/assignClientContext';
 
 // This allows us to have Server-Side Context's of the shared "contextual" data
 // which includes the frontmatter, the current pathname from the dynamic segments

components/Common/Blockquote/index.module.css → apps/site/components/Common/Blockquote/index.module.css

@@ -16,8 +16,8 @@
     dark:text-white;
 
   & cite {
-    @apply text-base
-      font-regular
+    @apply font-regular
+      text-base
       not-italic;
 
     &::before {

components/Common/Button/index.module.css → apps/site/components/Common/Button/index.module.css

@@ -1,9 +1,9 @@
 .button {
-  @apply relative
+  @apply px-4.5
+    relative
     inline-flex
     items-center
     gap-2
-    px-4.5
     py-2.5
     text-center
     font-semibold;
@@ -95,15 +95,15 @@
       shadow-sm;
 
     &::before {
-      @apply absolute
+      @apply bg-gradient-glow-backdrop
+        absolute
         left-0
         right-0
         top-0
         -z-10
         mx-auto
         h-full
         w-full
-        bg-gradient-glow-backdrop
         opacity-30
         content-[''];
     }

components/Common/CodeBox/index.module.css → apps/site/components/Common/CodeBox/index.module.css

@@ -10,13 +10,13 @@
       p-4;
 
     & > code {
-      @apply grid
+      @apply font-ibm-plex-mono
+        font-regular
+        grid
         overflow-x-auto
         bg-transparent
         p-0
-        font-ibm-plex-mono
         text-sm
-        font-regular
         leading-snug
         text-neutral-400
         [counter-reset:line];
@@ -32,13 +32,13 @@
         }
 
         &:not(:empty:last-child)::after {
-          @apply absolute
+          @apply w-4.5
+            font-ibm-plex-mono
+            absolute
             left-0
             top-0
             mr-4
-            w-4.5
             text-right
-            font-ibm-plex-mono
             text-neutral-600
             [content:counter(line)]
             [counter-increment:line];

components/Common/LinkTabs/index.module.css → apps/site/components/Common/LinkTabs/index.module.css

@@ -1,13 +1,13 @@
 .tabsList {
-  @apply mb-6
+  @apply font-open-sans
+    max-xs:hidden
+    mb-6
     mt-10
     flex
     gap-2
     border-b
     border-b-neutral-200
-    font-open-sans
-    dark:border-b-neutral-800
-    max-xs:hidden;
+    dark:border-b-neutral-800;
 
   .tabsTrigger {
     @apply border-b-2
@@ -33,9 +33,9 @@
     md:hidden;
 
   > span {
-    @apply my-6
+    @apply max-xs:flex
+      my-6
       hidden
-      w-full
-      max-xs:flex;
+      w-full;
   }
 }

components/Common/Pagination/PaginationListItem/index.module.css → apps/site/components/Common/Pagination/PaginationListItem/index.module.css

@@ -1,16 +1,16 @@
 .listItem,
 .listItem:link,
 .listItem:active {
-  @apply flex
+  @apply aria-current:bg-green-600
+    aria-current:text-white
+    flex
     size-10
     items-center
     justify-center
     rounded
     px-3
     py-2.5
     text-neutral-800
-    aria-current:bg-green-600
-    aria-current:text-white
     dark:text-neutral-200;
 
   &:hover {