Disable buttons/links to share data with other websites depending on …

…env variables
mermaid-js · Sep 6, 2024 · 431a63f · 431a63f
1 parent 370a03f
commit 431a63f
Show file tree

Hide file tree

Showing 11 changed files with 96 additions and 52 deletions.
diff --git a/.env b/.env
@@ -1,2 +1,5 @@
-  MERMAID_DOMAIN="mermaid.live"
-	MERMAID_ANALYTICS_URL="https://p.mermaid.live"
+  MERMAID_DOMAIN=''
+	MERMAID_ANALYTICS_URL=''
+  MERMAID_RENDERER_URL=''
+  MERMAID_KROKI_RENDERER=''
+  MERMAID_IS_ENABLED_MERMAID_CHART_LINKS=''
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -23,6 +23,9 @@ jobs:
         env:
           MERMAID_DOMAIN: 'mermaid.live'
           MERMAID_ANALYTICS_URL: 'https://p.mermaid.live'
+          MERMAID_RENDERER_URL: 'https://mermaid.ink'
+          MERMAID_KROKI_RENDERER_URL: 'https://kroki.io'
+          MERMAID_IS_ENABLED_MERMAID_CHART_LINKS: 'True'
         run: |
           export DEPLOY=true
           [ "$GITHUB_EVENT_NAME" != "pull_request" ] && rm -rf docs/_app/

diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,4 @@ yarn-error.log
 /cypress/downloads
 /cypress/videos
 /cypress/screenshots
+.vscode
diff --git a/Dockerfile b/Dockerfile
@@ -18,6 +18,7 @@ ARG MERMAID_RENDERER_URL
 ARG MERMAID_KROKI_RENDERER_URL
 ARG MERMAID_ANALYTICS_URL
 ARG MERMAID_DOMAIN
+ARG MERMAID_IS_ENABLED_MERMAID_CHART_LINKS
 
 COPY . ./
 

diff --git a/README.md b/README.md
@@ -30,19 +30,31 @@ docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/mermaid-js/mermaid
 ### To configure renderer URL
 
 When building set the MERMAID_RENDERER_URL build argument to the rendering service.
-Default is `https://mermaid.ink`
+Default is empty disabling PNG and SVG links under Actions
 
 ### To configure Kroki Instance URL
 
 When building set the MERMAID_KROKI_RENDERER_URL build argument to your Kroki instance.
-Default is `https://kroki.io`
+Default is empty disabling Kroki link under Actions
 
 ### To configure Analytics
 
 When building set the MERMAID_ANALYTICS_URL build argument to your plausible instance, and MERMAID_DOMAIN to your domain.
 
 Default is empty, disabling analytics.
 
+### To enable Mermaid Chart links and promotion
+
+When building set the MERMAID_IS_ENABLED_MERMAID_CHART_LINKS build argument to `True`
+
+Default is empty, disabling button to save to Mermaid Chart and promotional banner.
+
+### To update the Security modal
+
+The modal shown on clicking the security link assumes analytics, renderer, Kroki
+and Mermaid chart are enabled. You can update it by modifying `Privacy.svelte`
+if you wish.
+
 ### Development
 
 ```bash

diff --git a/netlify.toml b/netlify.toml
@@ -1,3 +1,6 @@
 [build.environment]
 	MERMAID_ANALYTICS_URL = 'https://p.mermaid.live'
 	MERMAID_DOMAIN = 'mermaid.live'
+	MERMAID_RENDERER_URL = 'https://mermaid.ink'
+	MERMAID_KROKI_RENDERER_URL = 'https://kroki.io'
+	MERMAID_IS_ENABLED_MERMAID_CHART_LINKS ='True'
diff --git a/src/env.d.ts b/src/env.d.ts
@@ -5,6 +5,7 @@ interface ImportMetaEnv {
   readonly MERMAID_KROKI_RENDERER_URL?: string;
   readonly MERMAID_ANALYTICS_URL?: string;
   readonly MERMAID_DOMAIN?: string;
+  readonly MERMAID_IS_ENABLED_MERMAID_CHART_LINKS?: string;
   // more env variables...
 }
 

diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte
@@ -197,21 +197,25 @@ ${svgString}`);
     <button id="downloadSVG" class="action-btn flex-grow" on:click={onDownloadSVG}>
       <i class="fas fa-download mr-2" /> SVG
     </button>
-    <a target="_blank" rel="noreferrer" class="flex-grow" href={iUrl}>
-      <button class="action-btn w-full">
-        <i class="fas fa-external-link-alt mr-2" /> PNG
-      </button>
-    </a>
-    <a target="_blank" rel="noreferrer" class="flex-grow" href={svgUrl}>
-      <button class="action-btn w-full">
-        <i class="fas fa-external-link-alt mr-2" /> SVG
-      </button>
-    </a>
-    <a target="_blank" rel="noreferrer" class="flex-grow" href={krokiUrl}>
-      <button class="action-btn w-full">
-        <i class="fas fa-external-link-alt mr-2" /> Kroki
-      </button>
-    </a>
+    {#if rendererUrl}
+      <a target="_blank" rel="noreferrer" class="flex-grow" href={iUrl}>
+        <button class="action-btn w-full">
+          <i class="fas fa-external-link-alt mr-2" /> PNG
+        </button>
+      </a>
+      <a target="_blank" rel="noreferrer" class="flex-grow" href={svgUrl}>
+        <button class="action-btn w-full">
+          <i class="fas fa-external-link-alt mr-2" /> SVG
+        </button>
+      </a>
+    {/if}
+    {#if krokiRendererUrl}
+      <a target="_blank" rel="noreferrer" class="flex-grow" href={krokiUrl}>
+        <button class="action-btn w-full">
+          <i class="fas fa-external-link-alt mr-2" /> Kroki
+        </button>
+      </a>
+    {/if}
 
     <div class="flex items-center gap-2">
       PNG size
@@ -238,14 +242,16 @@ ${svgString}`);
       {/if}
     </div>
 
-    <div class="flex w-full items-center gap-2">
-      <input class="input" id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
-      <label for="markdown">
-        <button class="btn btn-primary btn-md flex-auto" on:click={onCopyMarkdown}>
-          Copy Markdown
-        </button>
-      </label>
-    </div>
+    {#if rendererUrl}
+      <div class="flex w-full items-center gap-2">
+        <input class="input" id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
+        <label for="markdown">
+          <button class="btn btn-primary btn-md flex-auto" on:click={onCopyMarkdown}>
+            Copy Markdown
+          </button>
+        </label>
+      </div>
+    {/if}
 
     <div class="flex w-full items-center gap-2">
       <input

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
@@ -7,9 +7,13 @@
 </script>
 
 <script lang="ts">
+  import { env } from '$lib/util/env';
   import Theme from './Theme.svelte';
   import { dismissPromotion, getActivePromotion } from '$lib/util/promos/promo';
   import Privacy from './Privacy.svelte';
+
+  const { isEnabledMermaidChartLinks } = env;
+
   let isMenuOpen = false;
 
   function toggleMenu() {
@@ -21,6 +25,7 @@
     title?: string;
     icon?: string;
     img?: string;
+    isVisible?: boolean;
   }
   const links: Link[] = [
     {
@@ -45,7 +50,8 @@
     },
     {
       href: 'https://mermaidchart.com',
-      img: './mermaidchart-logo.svg'
+      img: './mermaidchart-logo.svg',
+      isHidden: !isEnabledMermaidChartLinks
     }
   ];
 
@@ -61,7 +67,7 @@
   };
 </script>
 
-{#if activePromotion}
+{#if activePromotion && isEnabledMermaidChartLinks}
   <div
     class="top-bar z-10 flex h-fit w-full items-center justify-center bg-gradient-to-r from-[#bd34fe] to-[#ff3670] p-1 text-center text-white">
     <div
@@ -136,19 +142,21 @@
       <li>
         <Privacy />
       </li>
-      {#each links as { title, href, icon, img }}
-        <li>
-          <a class="btn btn-ghost" target="_blank" {href}>
-            {#if icon}
-              <i class={icon} />
-            {:else if img}
-              <img src={img} alt={title} />
-            {/if}
-            {#if title}
-              {title}
-            {/if}
-          </a>
-        </li>
+      {#each links as { title, href, icon, img, isHidden }}
+        {#if !isHidden}
+          <li>
+            <a class="btn btn-ghost" target="_blank" {href}>
+              {#if icon}
+                <i class={icon} />
+              {:else if img}
+                <img src={img} alt={title} />
+              {/if}
+              {#if title}
+                {title}
+              {/if}
+            </a>
+          </li>
+        {/if}
       {/each}
     </ul>
   </div>

diff --git a/src/lib/util/env.ts b/src/lib/util/env.ts
@@ -1,6 +1,7 @@
 export const env = {
-  rendererUrl: import.meta.env.MERMAID_RENDERER_URL ?? 'https://mermaid.ink',
-  krokiRendererUrl: import.meta.env.MERMAID_KROKI_RENDERER_URL ?? 'https://kroki.io',
+  rendererUrl: import.meta.env.MERMAID_RENDERER_URL ?? '',
+  krokiRendererUrl: import.meta.env.MERMAID_KROKI_RENDERER_URL ?? '',
   analyticsUrl: import.meta.env.MERMAID_ANALYTICS_URL ?? '',
-  domain: import.meta.env.MERMAID_DOMAIN ?? 'mermaid.live'
+  domain: import.meta.env.MERMAID_DOMAIN ?? '',
+  isEnabledMermaidChartLinks: import.meta.env.MERMAID_IS_ENABLED_MERMAID_CHART_LINKS == 'True'
 } as const;
diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { dev } from '$app/environment';
   import { base } from '$app/paths';
+  import { env } from '$lib/util/env';
   import Actions from '$lib/components/Actions.svelte';
   import Card from '$lib/components/Card/Card.svelte';
   import Editor from '$lib/components/Editor.svelte';
@@ -13,6 +14,8 @@
   import { cmdKey, initHandler, syncDiagram } from '$lib/util/util';
   import { onMount } from 'svelte';
 
+  const { isEnabledMermaidChartLinks } = env;
+
   const MCBaseURL = dev ? 'http://localhost:5174' : 'https://mermaidchart.com';
   const docURLBase = 'https://mermaid.js.org';
   const docMap: DocumentationConfig = {
@@ -215,13 +218,15 @@
             target="_blank"
             class="btn btn-secondary btn-xs gap-1"
             title="View diagram in new page"><i class="fas fa-external-link-alt" />Full screen</a>
-          <a
-            href={`${MCBaseURL}/app/plugin/save?state=${$stateStore.serialized}`}
-            target="_blank"
-            class="btn btn-secondary btn-xs gap-1 bg-[#FF3570]"
-            title="Save diagram in Mermaid Chart"
-            ><img src="./mermaidchart-logo.svg" class="h-5 w-5" alt="Mermaid chart logo" />Save to
-            Mermaid Chart</a>
+          {#if isEnabledMermaidChartLinks}
+            <a
+              href={`${MCBaseURL}/app/plugin/save?state=${$stateStore.serialized}`}
+              target="_blank"
+              class="btn btn-secondary btn-xs gap-1 bg-[#FF3570]"
+              title="Save diagram in Mermaid Chart"
+              ><img src="./mermaidchart-logo.svg" class="h-5 w-5" alt="Mermaid chart logo" />Save to
+              Mermaid Chart</a>
+          {/if}
         </div>
 
         <div class="flex-1 overflow-auto">