Merge pull request #1554 from mermaid-js/release-promotion

Release live editor

.env

@@ -1,2 +1,5 @@
-  MERMAID_DOMAIN="mermaid.live"
-	MERMAID_ANALYTICS_URL="https://p.mermaid.live"
+  MERMAID_DOMAIN=''
+  MERMAID_ANALYTICS_URL=''
+  MERMAID_RENDERER_URL='https://mermaid.ink'
+  MERMAID_KROKI_RENDERER='https://kroki.io'
+  MERMAID_IS_ENABLED_MERMAID_CHART_LINKS=''

.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/

.gitignore

@@ -11,4 +11,4 @@ yarn-error.log
 /snapshots.js
 /cypress/downloads
 /cypress/videos
-/cypress/screenshots
+/cypress/screenshots

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 . ./
 

README.md

@@ -29,20 +29,37 @@ 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`
+When building set the MERMAID_RENDERER_URL build argument to the rendering
+service.
+Example:
+Default is`https://mermaid.ink`.
+Set to empty string to disable 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.
+When building set the MERMAID_KROKI_RENDERER_URL build argument to your Kroki
+instance.
 Default is `https://kroki.io`
+Set to empty string to disable 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

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'

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...
 }
 

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

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() {
@@ -22,7 +26,8 @@
     icon?: string;
     img?: string;
   }
-  const links: Link[] = [
+
+  let links: Link[] = [
     {
       title: 'Documentation',
       href: 'https://mermaid.js.org/intro/getting-started.html'
@@ -42,13 +47,16 @@
     {
       href: 'https://github.com/mermaid-js/mermaid-live-editor',
       icon: 'fab fa-github fa-lg'
-    },
-    {
-      href: 'https://mermaidchart.com',
-      img: './mermaidchart-logo.svg'
     }
   ];
 
+  if (isEnabledMermaidChartLinks) {
+    links.push({
+      href: 'https://mermaidchart.com',
+      img: './mermaidchart-logo.svg'
+    });
+  }
+
   let activePromotion = getActivePromotion();
 
   const trackBannerClick = () => {

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;

src/lib/util/promos/promo.ts

@@ -1,6 +1,7 @@
 import { writable, type Writable, get } from 'svelte/store';
 import { persist, localStorage } from '../persist';
 import August2024 from './August2024.svelte';
+import { env } from '$lib/util/env';
 
 interface Promotion {
   id: string;
@@ -35,6 +36,10 @@ const dismissedPromotionsStore: Writable<string[]> = persist(
 );
 
 export const getActivePromotion = (): Promotion | undefined => {
+  if (!env.isEnabledMermaidChartLinks) {
+    return;
+  }
+
   const dismissedPromotions = get(dismissedPromotionsStore);
   const now = new Date();
   return promotions

src/routes/edit/+page.svelte

@@ -9,6 +9,7 @@
   import Preset from '$lib/components/Preset.svelte';
   import View from '$lib/components/View.svelte';
   import type { DocumentationConfig, EditorMode, Tab, ValidatedState } from '$lib/types';
+  import { env } from '$lib/util/env';
   import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
   import { cmdKey, initHandler, syncDiagram } from '$lib/util/util';
   import { onMount } from 'svelte';
@@ -215,13 +216,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 env.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">