Adding Mermaid Chart Support

FrontEnd/scripts/controllers/readme_controller.js

@@ -13,9 +13,63 @@
 // limitations under the License.
 
 import { Controller } from '@hotwired/stimulus'
+import mermaid from 'mermaid'
 
 export class ReadmeController extends Controller {
+    onThemeChange(darkMode) {
+        // If `darkMode` isn't passed, get the current value
+        if (darkMode == undefined) {
+            darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+            console.log('actually dark mode is', darkMode)
+        }
+
+        // Get all mermaid diagrams
+        const mermaidDivs = document.querySelectorAll('pre[lang="mermaid"]')
+
+        for (const div of Array.from(mermaidDivs)) {
+            // Get the diagram code
+            const json = div.parentElement.parentElement.getAttribute('data-json')
+            if (!json) {
+                continue
+            }
+            const diagramCode = JSON.parse(json).data
+            if (diagramCode) {
+                try {
+                    // Clear the existing diagram
+                    div.innerHTML = diagramCode
+                    div.removeAttribute('data-processed')
+                } catch (error) {
+                    console.error('Error re-rendering mermaid diagram:', error)
+                }
+            }
+        }
+
+        mermaid.initialize({
+            theme: darkMode ? 'dark' : undefined,
+            nodeSpacing: 50,
+            rankSpacing: 50,
+            curve: 'basis',
+        })
+
+        // Rather then preprocess the HTML in Swift we just change the selector to use `lang` attribute instead of `class`
+        mermaid.run({
+            querySelector: 'pre[lang="mermaid"]',
+        })
+    }
     navigateToAnchorFromLocation() {
+        // listen for changes to color scheme
+        if (typeof window !== 'undefined') {
+            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+
+            // Add listener for system preference changes
+            mediaQuery.addEventListener('change', (e) => {
+                this.onThemeChange(e.matches)
+            })
+        }
+
+        // setup mermaid diagrams
+        this.onThemeChange()
+
         // If the browser has an anchor in the URL that may be inside the README then
         // we should attempt to scroll it into view once the README is loaded.
         const hash = window.location.hash

Makefile

@@ -95,7 +95,10 @@ analyze:
 db-up: db-up-dev db-up-test
 
 db-up-dev:
-	docker run --name spi_dev -e POSTGRES_DB=spi_dev -e POSTGRES_USER=spi_dev -e POSTGRES_PASSWORD=xxx -p 6432:5432 -d postgres:16-alpine
+	docker run --name spi_dev -e POSTGRES_DB=spi_dev -e POSTGRES_USER=spi_dev -e POSTGRES_PASSWORD=xxx -p 6432:5432 \
+	-e PGDATA=/pgdata \
+	--tmpfs /pgdata:rw,noexec,nosuid,size=1024m \
+	-d postgres:16-alpine
 
 # Keep test db on postgres:13 for now, to make local testing faster. See
 # https://github.com/SwiftPackageIndex/SwiftPackageIndex-Server/issues/3360#issuecomment-2331103211