Merge pull request #5019 from alphagov/add-mermaid-js-dependency

Add mermaid.js as a dependency

Author: pezholio

.github/workflows/ci.yml

@@ -34,6 +34,10 @@ jobs:
       - uses: ruby/setup-ruby@v1
         with:
           bundler-cache: true
+      - uses: actions/setup-node@v4
+        with:
+          cache: 'npm'
+      - run: yarn install --frozen-lockfile
       - run: bundle exec rake
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/deploy.yml

@@ -35,6 +35,10 @@ jobs:
       - uses: ruby/setup-ruby@v1
         with:
           bundler-cache: true
+      - uses: actions/setup-node@v4
+        with:
+          cache: 'npm'
+      - run: yarn install --frozen-lockfile
       - name: Build 'build' folder ready for deployment
         run: bundle exec rake build
         env:
@@ -78,4 +82,4 @@ jobs:
             }
         env:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
-          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
+          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK

config.rb

@@ -24,6 +24,12 @@
 activate :search_engine_sitemap,
          default_change_frequency: "weekly"
 
+# Load all the `dist/` directories from direct dependencies specified in package.json
+package = JSON.parse(File.read("package.json"))
+package.fetch("dependencies", []).each_key do |dep|
+  sprockets.append_path File.join(__dir__, "node_modules", dep, "dist")
+end
+
 helpers do
   def dashboard
     Dashboard.new

package.json

@@ -0,0 +1,10 @@
+{
+  "name": "govuk-developer-docs",
+  "description": "Developer docs for GOV.UK Publishing",
+  "private": true,
+  "author": "Government Digital Service",
+  "license": "MIT",
+  "dependencies": {
+    "mermaid": "^11.4.1"
+  }
+}

source/javascripts/application.js

@@ -7,3 +7,4 @@
 //= require govuk_publishing_components/components/cookie-banner
 //= require govuk_publishing_components/load-analytics
 //= require filter-list
+//= require mermaid-init

source/javascripts/mermaid-init.js

@@ -0,0 +1,7 @@
+//= require mermaid
+
+mermaid.initialize({ startOnLoad: false });
+mermaid.run({
+    querySelector: '[lang="mermaid"] code',
+});
+