Introduce pnpm

.githooks/pre-commit

@@ -3,12 +3,12 @@
 # Execute lint-staged jobs
 
 echo "Pre=commit hook"
-npm run lint-staged
+pnpm lint-staged
 if [ $? -ne 0 ]; then
     echo -e '\n\n🙋 Check "lint-staged" in failed.'
     echo -e '   Canceling the commit process.'
     echo -e '   Please fix and try again!\n\n'
-    echo -e '   To fix formatting, run: npm run reformat'
+    echo -e '   To fix formatting, run: pnpm reformat'
     exit 1
 fi
 

.github/vale/vale.md

@@ -26,9 +26,9 @@ We use Vale in two ways:
 
 When you have Vale installed, you can run this scripts on root level:
 
-- `npm run spell:error` to show only errors (same as in CI)
-- `npm run spell:warn` to show errors as well as warnings
-- `npm run spell:all` to show errors, warnings and suggestions
+- `pnpm spell:error` to show only errors (same as in CI)
+- `pnpm spell:warn` to show errors as well as warnings
+- `pnpm spell:all` to show errors, warnings and suggestions
 
 ## Our Vale setup
 

.github/workflows/link-check.yaml

@@ -20,20 +20,42 @@ jobs:
           ref: ${{ github.ref }}
           fetch-depth: 0
 
-      - name: Set Node version
+      - name: Set Node and pnpm versions
         id: versions
         shell: bash
         run: |
           NODE_VERSION=$(jq -r '.engines.node' package.json)
+          PNPM_VERSION=$(jq -r '.engines.pnpm' package.json)
           echo "NODE_VERSION=$NODE_VERSION" >> $GITHUB_OUTPUT
+          echo "PNPM_VERSION=$PNPM_VERSION" >> $GITHUB_OUTPUT
 
       - name: Setup node.js
         uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
         with:
           node-version: ${{ steps.versions.outputs.NODE_VERSION }}
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@c3b53f6a16e57305370b4ae5a540c2077a1d50dd # v2.2.4
+        with:
+          version: ${{ steps.versions.outputs.PNPM_VERSION }}
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Setup pnpm cache
+        uses: actions/cache@704facf57e6136b1bc63b828d79edcd491f0ee84 # v3.3.2
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
       - name: Install dependencies
-        run: npm install
+        run: pnpm install
 
       - name: Run markdown link check
-        run: npm run markdown-link-check -- -q -o
+        run: pnpm markdown-link-check -- -q -o

.github/workflows/pull-request.yaml

@@ -17,23 +17,45 @@ jobs:
           ref: ${{ github.ref }}
           fetch-depth: 0
 
-      - name: Set Node version
+      - name: Set Node and pnpm versions
         id: versions
         shell: bash
         run: |
           NODE_VERSION=$(jq -r '.engines.node' package.json)
+          PNPM_VERSION=$(jq -r '.engines.pnpm' package.json)
           echo "NODE_VERSION=$NODE_VERSION" >> $GITHUB_OUTPUT
+          echo "PNPM_VERSION=$PNPM_VERSION" >> $GITHUB_OUTPUT
 
       - name: Setup node.js
         uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
         with:
           node-version: ${{ steps.versions.outputs.NODE_VERSION }}
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@c3b53f6a16e57305370b4ae5a540c2077a1d50dd # v2.2.4
+        with:
+          version: ${{ steps.versions.outputs.PNPM_VERSION }}
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Setup pnpm cache
+        uses: actions/cache@704facf57e6136b1bc63b828d79edcd491f0ee84 # v3.3.2
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
       - name: Install dependencies
-        run: npm install
+        run: pnpm install
 
       - name: Linting code files
-        run: npm run lint:code
+        run: pnpm lint:code
 
       - name: Linting markdown files
-        run: npm run lint:markdown
+        run: pnpm lint:markdown

.prettierignore

@@ -1,3 +1,4 @@
 /build
 /.github/vale/dicts
-/.github/vale/styles
+/.github/vale/styles
+/pnpm-lock.yaml

README.md

@@ -15,10 +15,15 @@ We're using [Docusaurus](https://docusaurus.io/docs) to build our documentation,
 
 - [node](https://nodejs.org/en/) needs to be installed.
   -> please check [nvmrc](.nvmrc) or the `engines` definition in [package.json](package.json) for version.
+- We use [pnpm](https://pnpm.io/) (version 8) as a package manager. Read their official documentation [how to
+  install](https://pnpm.io/installation) pnpm.
 
 This is the setup you need every time. You can find the different ways how to run the local development process below.
 
-We use [Vale](.github/vale/vale.md) for spell checking. The spell check will run in the GitHub pipeline.
+#### Optional
+
+- We use [Vale](.github/vale/vale.md) spell checking. The spell check will run in the GitHub pipeline.
+
 To use Vale locally, please make sure you install it:
 
 - It runs on Mac, Linux and Windows. You can find instructions to download and install it at
@@ -32,53 +37,54 @@ While we check for errors in the pipeline, we also have "warning" and "suggestio
 First, make sure you hare the required technology set up:
 
 - node (see above)
+- pnpm (see above)
 - optional: Vale (see above)
 
 The, install all needed dependencies and setup the needed githooks:
 
 ```shell
-npm install
+pnpm install
 ```
 
 To start the local development server, run:
 
 ```shell
-npm start
+pnpm start
 ```
 
 🦖 the website will now run on `http://localhost:3000/`
 
 ## Scripts used and their actions
 
 ℹ️ You can see all our scripts in the [`package.json`](package.json).
-You can also run `npm run` in your console to get a list of all available scripts.
+You can also run `pnpm run` in your console to get a list of all available scripts.
 
 Please note that you have to set up your [local development](#installation-and-usage) in order to use the scripts.
 
 Here are the important ones you're likely to use:
 
-- `npm start`: starts the app for development
-- `npm run build`: will build the documentation site and generate all static files in "build". After `build` you can
-  run `npm run serve` to test your build locally
-- `npm run lint`: runs a format check and if no error is found, lints code and markdown files in the project.
+- `pnpm start`: starts the app for development
+- `pnpm build`: will build the documentation site and generate all static files in "build". After `build` you can
+  run `pnpm serve` to test your build locally
+- `pnpm lint`: runs a format check and if no error is found, lints code and markdown files in the project.
   - the linting script does not mutate your code. See [Linting and code formatting](#linting-and-code-formatting) for
     more info.
-- `npm run reformat`: runs the code formatter (Prettier) as well as the markdown linter in fix mode. This will mutate
+- `pnpm reformat`: runs the code formatter (Prettier) as well as the markdown linter in fix mode. This will mutate
   your code.
-- `npm run markdown-link-check`: checks if there are any broken links. Note: This requires internet connection, as it
+- `pnpm markdown-link-check`: checks if there are any broken links. Note: This requires internet connection, as it
   does check external links, too!
-  - Run `npm run markdown-link-check -- -o` to only check for internal links (offline mode).
-  - Run `npm run markdown-link-check -- -q` to only log errors.
-  - Run `npm run markdown-link-check -- -f /path/your-file.md` to run checks for only one file.
+  - Run `pnpm markdown-link-check -- -o` to only check for internal links (offline mode).
+  - Run `pnpm markdown-link-check -- -q` to only log errors.
+  - Run `pnpm markdown-link-check -- -q /path/your-file.md` to run checks for only one file.
 
 For these scripts, you need to have Vale installed (see [Requirements](#requirements)):
 
-- `npm run spell:error` to show only errors (same as in CI)
-- `npm run spell:warn` to show errors as well as warnings
-- `npm run spell:all` to show errors, warnings and suggestions
+- `pnpm spell:error` to show only errors (same as in CI)
+- `pnpm spell:warn` to show errors as well as warnings
+- `pnpm spell:warn` to show errors, warnings and suggestions
 
 ℹ️ We are using a custom hook path for enabling pre-commit hooks. This path is set in the local git configuration when
-running `npm install`.
+running `pnpm install`.
 
 ## Linting and code formatting
 
@@ -92,19 +98,19 @@ How we keep our app's codebase looking consistent and nice 💅🏼
 
 ### Fine-grained scripts for linting and formatting
 
-We provide `npm run lint` as well as `npm run reformat` to check or mutate your changes. We also offer more specific
+We provide `pnpm lint` as well as `pnpm reformat` to check or mutate your changes. We also offer more specific
 scripts you can use:
 
 Scripts with `lint` do not mutate your code in any way:
 
-- `npm run lint:code` - runs a Prettier and ESlint check. This includes basic checks for markdown, but not
+- `pnpm lint:code` - runs a Prettier and ESlint check. This includes basic checks for markdown, but not
   in depth.
-- `npm run lint:markdown` - runs markdown-lint with more detailed check on markdown files.
+- `pnpm lint:markdown` - runs markdown-lint with more detailed check on markdown files.
 
 To apply findings from `lint` and mutate your files:
 
-- `npm run reformat:code` - runs Prettier and ESlint in fix mode.
-- `npm run reformat:markdown` - runs markdownlint in fix mode.
+- `pnpm reformat:code` - runs Prettier and ESlint in fix mode.
+- `pnpm reformat:markdown` - runs markdownlint in fix mode.
 
 ℹ️ It's convenient to let Prettier and ESlint automatically format your code "on save" by your IDE or editor. For
 markdownlint

STYLEGUIDE.md

@@ -2,7 +2,7 @@
 
 We adhere to the [Google developer documentation style guide](https://developers.google.com/style). We're also establishing a more detailed custom guidelines, which is documented here.
 
-You can run a Vale check for all available styles by running `npm run spell:all`. At the moment, only the level `error` is a established style guide for us. Checking for warnings or suggestions is meant to be used as inspiration and support.
+You can run a Vale check for all available styles by running `pnpm spell:all`. At the moment, only the level `error` is an established style guide for us. Checking for warnings or suggestions is meant to be used as inspiration and support.
 
 Where possible, these rules are checked automatically using Vale. For more information on how this is set up, see
 our [Vale documentation](.github/vale/vale.md).
@@ -43,7 +43,11 @@ While "topic" would typically be in lowercase, if it's referring to a UI element
 - **Generic terms**: Words like "user" or "server" should typically be in lowercase unless they start a sentence or are part of a title.
 - **Branding consistency**: Ensure that brand-specific terms are consistently capitalized across all documentation. This should be added to our [branding](.github/vale/styles/Klaw/branding.yml) style.
 - **Review third-party names**: Always respect the capitalization of third-party product or company names, even if they don't follow standard rules. These can be added to our [branding](.github/vale/styles/Klaw/branding.yml) style.
-- **Use sentence case**: For titles, headings, and general content, adopt sentence case, capitalizing only the first word and any proper nouns. For this, we have [capitalization heading](.github/vale/styles/Klaw/capitalization-heading.yml) style. This style configuration still needs work, as we need to have a comprehensive list of expectations. Until then, it can be used as support with running `npm run spell:warn`.
+- **Use sentence case**: For titles, headings, and general content, adopt sentence case,
+  capitalizing only the first word and any proper nouns.
+  For this, we have [capitalization heading](.github/vale/styles/Klaw/capitalization-heading.yml) style.
+  This style configuration still needs work, as we need to have a comprehensive list of expectations.
+  Until then, it can be used as support with running `pnpm spell:warn`.
 
 ### Helpful tools
 

markdown-link-check-script/markdown-link-check.md

@@ -8,22 +8,22 @@ Note: All scripts need to be run from root and you have to set up
 your [local development](../README.md#installation-and-usage) in
 order to use them.
 
-### ➡️ `npm run markdown-link-check`
+### ➡️ `pnpm markdown-link-check`
 
 Will run the check for all Markdown files. It checks internal as well as external links (so it needs internet
 connection) and assets. Please be aware that you need to [check your results](#limitation)
 
-### ➡️ `npm run markdown-link-check -f "path/to/file.md`
+### ➡️ `pnpm markdown-link-check -f "path/to/file.md`
 
 Will run the check for a specific Markdown files. It checks internal as well as external links (so it needs internet
 connection) and assets.
 
 ### Flags to use
 
-- `npm run markdown-link-check -- -q` will run in quite mode and not log the files checked, but log the different
+- `pnpm markdown-link-check -- -q` will run in quite mode and not log the files checked, but log the different
   processes and a end result. If there is an error, the error will be logged.
 
-- `npm run markdown-link-check -- -o` will run in offline mode and not check for links starting with http/https.
+- `pnpm markdown-link-check -- -o` will run in offline mode and not check for links starting with http/https.
 
 The flags can be used with all files as well as only one. They can also be used together.