Merge pull request #305 from ryan-hay/rhay/fix-299

fix 299 + dep bump + v4 config + node version

Author: kfwu-ibm

.github/workflows/deploy.yml

@@ -49,7 +49,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: "18"
+          node-version: "24"
           cache: ${{ steps.detect-package-manager.outputs.manager }}
       - name: Setup Pages
         uses: actions/configure-pages@v3

.github/workflows/test-deploy.yml

@@ -7,6 +7,9 @@ on:
     # Review gh actions docs if you want to further define triggers, paths, etc
     # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on
 
+permissions:
+  contents: read
+
 jobs:
   test-deploy:
     name: Test deployment
@@ -15,7 +18,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 24
           cache: npm
 
       - name: Install dependencies

best-practice/practitioner-basics/1-solution-design/architecture.mdx

@@ -6,9 +6,6 @@ description:
 sidebar_position: 2
 ---
 
-import BlueprintExampleDiagramLight from './images/architecture/blueprint-example-diagram-light.svg'
-import BlueprintExampleDiagramApp from './images/architecture/blueprint-example-diagram-app.svg'
-
 :::info
 
 Whilst the examples below focus on AIOps as the subject, this guide is meant as
@@ -61,7 +58,13 @@ cluster and AIOps can result in expensive rework and project delays.
 
 To that end, a picture paints a thousand words:
 
-<BlueprintExampleDiagramLight style={{ maxWidth: '100%', height: 'auto' }} />
+<img
+  src="/waiops-tech-jam/img/architecture/blueprint-example-diagram-light.svg"
+  alt="Blueprint example diagram"
+  width="1614"
+  height="1483"
+  style={{ maxWidth: '100%', height: 'auto' }}
+/>
 
 A diagram like this conveys a lot of contextual information in one go, and
 allows all stakeholders to work together on a single overarching view of the
@@ -110,7 +113,13 @@ information about the applications and services, including the technology or
 platform in use, is very beneficial:
 
 
-<BlueprintExampleDiagramApp style={{ maxWidth: '100%', height: 'auto' }} />
+<img
+  src="/waiops-tech-jam/img/architecture/blueprint-example-diagram-app.svg"
+  alt="Blueprint example application diagram"
+  width="1144"
+  height="773"
+  style={{ maxWidth: '100%', height: 'auto' }}
+/>
 
 This can be as detailed as you like, however it is not necessary to depict every
 instance or detail of the stack. Rather, focus on information that can help you

docusaurus.config.ts

@@ -8,10 +8,12 @@ const config: Config = {
   url: "https://github.com/",
   baseUrl: "/waiops-tech-jam/",
   onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "warn",
   favicon: "img/favicon.svg",
   markdown: {
     mermaid: true,
+    hooks: {
+      onBrokenMarkdownLinks: "warn",
+    },
   },
 
   // GitHub pages deployment config.