Update docusaurus, yarn, and 3rd part dependencies (#94)

* Upgrade to Yarn 4

* Add plugin-content-docs as it generates warning since upgrade of yarn 1 to 4

* Fix an issue related to mermaid plugin upgrade

* Address deprecation notice (removal warning starting with docusaurus v4)
That way we are ready for later upgrade

* Adapt other pipelines

Author: sebastienvermeille

.github/workflows/build.yml

@@ -19,8 +19,12 @@ jobs:
       - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
         with:
           node-version: 21
+      - name: Use yarn 4.12
+        run: |
+          corepack enable
+          corepack prepare yarn@4.12.0 --activate
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: yarn install --immutable
       - name: Build documentation website
         # Check paths are valid, markdown, etc.
         run: yarn build

.github/workflows/deploy.yml

@@ -17,8 +17,12 @@ jobs:
       - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
         with:
           node-version: 21
+      - name: Use yarn 4.12
+        run: |
+          corepack enable
+          corepack prepare yarn@4.12.0 --activate
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: yarn install --immutable
       - name: Build website
         run: yarn build
       # Popular action to deploy to GitHub Pages:

.github/workflows/pushpreview.yml

@@ -25,14 +25,18 @@ jobs:
 
       - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
         with:
-          node-version: 18
+          node-version: 21
+      - name: Use yarn 4.12
+        run: |
+          corepack enable
+          corepack prepare yarn@4.12.0 --activate
 
       - name: Set BASE_URL
         run: echo "BASE_URL=/github/${{ github.repository }}/${{ github.event.number }}/" >> $GITHUB_ENV
 
       - name: Build site
         run: |
-          yarn install --frozen-lockfile
+          yarn install --immutable
           yarn build
 
       - name: Generate preview

docs/advanced/architecture.md

@@ -3,8 +3,9 @@ title: Architecture
 sidebar_position: 7
 ---
 
-import Centered from '@site/src/components/Centered';
 import Label from '@site/src/components/Label';
+import Centered from '@site/src/components/Centered';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
 # Architecture
 
@@ -26,24 +27,30 @@ There are 3 software components written for the NSPanel Manager project:
 
 ## Data flow
 
+
 <Centered>
-```mermaid
-flowchart TD
-    HAS(Home Assistant/OpenHAB)
-    NSPM(NSPanel Manager container)
-    MQTT(MQTT Server)
-    NSP1(NSPanel 1)
-    NSP2(NSPanel 2)
-    HAS <--> NSPM
-    NSPM <--> NSP1
-    NSPM <--> NSP2
-    MQTT <--> HAS
-    MQTT <--> NSPM
-    MQTT <--> NSP1
-    MQTT <--> NSP2
-```
+  <BrowserOnly fallback={<div>Loading diagram...</div>}>
+    {() => (
+      <div className="mermaid">
+        {`
+        flowchart TD
+            HAS(Home Assistant/OpenHAB)
+            NSPM(NSPanel Manager container)
+            MQTT(MQTT Server)
+            NSP1(NSPanel 1)
+            NSP2(NSPanel 2)
+            HAS <--> NSPM
+            NSPM <--> NSP1
+            NSPM <--> NSP2
+            MQTT <--> HAS
+            MQTT <--> NSPM
+            MQTT <--> NSP1
+            MQTT <--> NSP2
+        `}
+      </div>
+    )}
+  </BrowserOnly>
 </Centered>
-
 The data flow within NSPanel Manager might look intimidating but it’s not that bad. Below is an explanation of all the
 arrows above.
 

docusaurus.config.ts

@@ -21,7 +21,6 @@ const config: Config = {
   projectName: 'NSPanelManager-docs',
 
   onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
 
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
@@ -35,6 +34,9 @@ const config: Config = {
 
   markdown: {
     mermaid: true,
+    hooks: {
+        onBrokenMarkdownLinks: 'warn',
+    }
   },
 
   presets: [

package.json

@@ -15,20 +15,24 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.8.1",
-    "@docusaurus/preset-classic": "^3.8.1",
-    "@docusaurus/theme-mermaid": "^3.8.1",
-    "@mdx-js/react": "^3.0.0",
-    "clsx": "^2.0.0",
+    "@docusaurus/core": "^3.9.2",
+    "@docusaurus/plugin-content-docs": "3.9.2",
+    "@docusaurus/preset-classic": "^3.9.2",
+    "@docusaurus/theme-mermaid": "^3.9.2",
+    "@mdx-js/react": "^3.1.1",
+    "clsx": "^2.1.1",
     "prism-react-renderer": "^2.4.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.8.1",
-    "@docusaurus/tsconfig": "^3.8.1",
-    "@docusaurus/types": "^3.7.0",
-    "typescript": "~5.9.2"
+    "@docusaurus/module-type-aliases": "^3.9.2",
+    "@docusaurus/tsconfig": "^3.9.2",
+    "@docusaurus/types": "^3.9.2",
+    "typescript": "~5.9.3"
+  },
+  "resolutions": {
+    "mermaid": "10.9.0"
   },
   "browserslist": {
     "production": [