Fix issues when site isn't deployed to host root

index.html

@@ -5,8 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>C4 Diagrams — Structurizr Mini</title>
 
+    <!--
     <link href="git_submodules/structurizr/ui/src/css/joint-3.6.5.css" rel="stylesheet" />
     <link href="git_submodules/structurizr/ui/src/css/structurizr-diagram.css" rel="stylesheet" />
+  -->
+
+    <link rel='stylesheet' href='/structurizr_ui_styles.css' />
     <link rel='stylesheet' href='node_modules/autocompleter/autocomplete.min.css' />
     <link rel='stylesheet' href='styles.css' />
   </head>

modules/index.js

@@ -27,7 +27,7 @@ async function setup(structurizr) {
     })
   })
 
-  const navResponse = await fetch('/nav.json')
+  const navResponse = await fetch('nav.json')
   const nav = await navResponse.json()
 
   document.querySelector('.nav-links').innerHTML = nav.links

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "import-structurizr-scripts": "mkdir -p public && uglifyjs `< structurizr_ui_scripts.txt` --output public/structurizr_ui_scripts.js",
+    "import-structurizr-styles": "mkdir -p public && uglifycss `< structurizr_ui_styles.txt` --output public/structurizr_ui_styles.css",
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
@@ -19,6 +20,7 @@
     "history": "^5.3.0",
     "just-sort-by": "^3.2.0",
     "uglify-js": "^3.17.4",
+    "uglifycss": "^0.0.29",
     "vite": "^4.3.0"
   },
   "dependencies": {

structurizr_ui_styles.txt

@@ -0,0 +1,2 @@
+git_submodules/structurizr/ui/src/css/joint-3.6.5.css
+git_submodules/structurizr/ui/src/css/structurizr-diagram.css

vite.config.js

@@ -0,0 +1,3 @@
+export default {
+  base: './'
+}