Merge pull request #1917 from mermaid-js/sidv/fixBasePath

fix(#1914): Resolve base path

.env

@@ -1,4 +1,5 @@
 MERMAID_DOMAIN=''
+MERMAID_BASE_PATH=''
 MERMAID_DOCS_URL='https://mermaid.js.org'
 MERMAID_ANALYTICS_URL=''
 MERMAID_RENDERER_URL='https://mermaid.ink'

Dockerfile

@@ -21,6 +21,7 @@ ARG MERMAID_DOMAIN
 ARG MERMAID_IS_ENABLED_MERMAID_CHART_LINKS
 ARG MERMAID_PRIVACY_POLICY_URL
 ARG MERMAID_HIDE_PRIVACY_POLICY
+ARG MERMAID_BASE_PATH
 
 COPY . ./
 

README.md

@@ -28,6 +28,8 @@ If you want to speed up the progress for mermaid-live-editor, join the Discord c
 docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/mermaid-js/mermaid-live-editor
 ```
 
+The published docker image is built using our default environment variables. You cannot override them when running the image. If you need to customize them, you will need to build the image yourself.
+
 ### To configure renderer URL
 
 When building set the MERMAID_RENDERER_URL build argument to the rendering

package.json

@@ -48,6 +48,7 @@
     "chai": "^4.5.0",
     "clsx": "^2.1.1",
     "cssnano": "^6.1.2",
+    "dotenv": "^17.3.1",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-es": "^4.1.0",

pnpm-lock.yaml

@@ -165,6 +165,9 @@ importers:
       cssnano:
         specifier: ^6.1.2
         version: 6.1.2(postcss@8.5.3)
+      dotenv:
+        specifier: ^17.3.1
+        version: 17.3.1
       eslint:
         specifier: ^9.39.2
         version: 9.39.2(jiti@2.6.1)
@@ -1996,6 +1999,10 @@ packages:
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
+  dotenv@17.3.1:
+    resolution: {integrity: sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==}
+    engines: {node: '>=12'}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -6021,6 +6028,8 @@ snapshots:
       domelementtype: 2.3.0
       domhandler: 5.0.3
 
+  dotenv@17.3.1: {}
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2

src/lib/components/MermaidChartIcon.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+  import { asset } from '$app/paths';
   import type { ClassValue } from 'svelte/elements';
 
   let { class: className }: { class?: ClassValue } = $props();
 </script>
 
-<img class={['size-4', className]} src="/mermaidchart-logo.svg" alt="Mermaid Chart" />
+<img class={['size-4', className]} src={asset('/mermaidchart-logo.svg')} alt="Mermaid Chart" />

src/lib/components/Share.svelte

@@ -4,6 +4,7 @@
   import { Separator } from '$/components/ui/separator';
   import { env } from '$/util/env';
   import { urlsStore } from '$/util/state';
+  import { asset } from '$app/paths';
   import ShareIcon from '~icons/material-symbols/share';
   import CopyInput from './CopyInput.svelte';
   import MermaidChartIcon from './MermaidChartIcon.svelte';
@@ -22,7 +23,7 @@
     <div class="flex flex-col gap-4">
       <div class="flex flex-col gap-2">
         <h2 class="flex items-center gap-2">
-          <img class="size-5" src="/favicon.svg" alt="Mermaid Live Editor" />
+          <img class="size-5" src={asset('/favicon.svg')} alt="Mermaid Live Editor" />
           Mermaid Live Editor
         </h2>
         <CopyInput value={window.location.href} />

src/lib/util/redirect.ts

@@ -1,3 +1,5 @@
+import { resolve } from '$app/paths';
+
 /**
  * Build the redirect URL for legacy root-path links.
  * Extracts the route and fragment from the old hash-based URL format,
@@ -11,5 +13,5 @@ export const buildRedirectUrl = (location: Location): string => {
     path = parts[1];
     fragment = `#${parts[2]}`;
   }
-  return `/${path}${location.search}${fragment}`;
+  return `${resolve(`/${path}`, {})}${location.search}${fragment}`;
 };

svelte.config.js

@@ -1,4 +1,5 @@
 import adapter from '@sveltejs/adapter-static';
+import 'dotenv/config';
 import { sveltePreprocess } from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -10,6 +11,9 @@ const config = {
     alias: {
       '$/*': './src/lib/*'
     },
+    paths: {
+      base: process.env.MERMAID_BASE_PATH ?? ''
+    },
     adapter: adapter({
       pages: 'docs',
       fallback: '404.html'