Merge pull request #1573 from mermaid-js/playground

MC Playground Toggle
2024-11-14 20:34:40 +05:30
parent 83f3c07f10 5b103acb11
commit ba1c0da871
9 changed files with 128 additions and 70 deletions
@@ -1,5 +1,7 @@
-  MERMAID_DOMAIN=''
-  MERMAID_ANALYTICS_URL=''
-  MERMAID_RENDERER_URL='https://mermaid.ink'
-  MERMAID_KROKI_RENDERER='https://kroki.io'
-  MERMAID_IS_ENABLED_MERMAID_CHART_LINKS=''
+MERMAID_DOMAIN=''
+MERMAID_ANALYTICS_URL=''
+MERMAID_RENDERER_URL='https://mermaid.ink'
+MERMAID_KROKI_RENDERER='https://kroki.io'
+MERMAID_IS_ENABLED_MERMAID_CHART_LINKS=''
+
+# cp .env .env.local to make local changes
@@ -11,4 +11,5 @@ yarn-error.log
 /snapshots.js
 /cypress/downloads
 /cypress/videos
-/cypress/screenshots
+/cypress/screenshots
+.env.local
@@ -1,7 +1,7 @@
 module.exports = {
  "Site Loads": {
    "Check Home page load": {
-      "1": "{\"code\":\"flowchart TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n  \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true}"
+      "1": "{\"code\":\"flowchart TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n  \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"rough\":false,\"updateDiagram\":true,\"panZoom\":false}"
    },
    "Check Redirect from old URL": {
      "1": "{\"code\":\"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true}"
@@ -19,10 +19,10 @@ module.exports = {
  "__version": "12.17.4",
  "Auto sync tests": {
    "should dim diagram when code is edited": {
-      "1": "{\"code\":\"flowchart TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Test\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":false,\"updateDiagram\":false}"
+      "1": "{\"code\":\"flowchart TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Test\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":false,\"rough\":false,\"updateDiagram\":false,\"panZoom\":false}"
    },
    "should not dim diagram when code is in sync": {
-      "1": "{\"code\":\"flowchart TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Testing\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":false}"
+      "1": "{\"code\":\"flowchart TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Testing\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"rough\":false,\"updateDiagram\":false,\"panZoom\":false}"
    }
  },
  "Test themes": {
@@ -0,0 +1,44 @@
+<script lang="ts">
+  interface Props {
+    links: { title: string; href: string }[];
+    label?: string;
+    icon?: string;
+  }
+
+  let { links, label, icon }: Props = $props();
+</script>
+
+<div class="dropdown dropdown-end">
+  <button class="btn btn-ghost">
+    {#if icon}
+      <i class={icon}></i>
+    {/if}
+    {#if label}
+      <span>{label}</span>
+    {/if}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1792 1792"
+      class="ml-1 inline-block h-4 w-4 fill-current"
+      ><path
+        d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z" /></svg>
+  </button>
+  <div
+    class="dropdown-content menu top-14 size-fit overflow-y-auto bg-base-200 text-base-content shadow-2xl">
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <ul tabindex="0" class="menu compact p-4">
+      {#each links as { href, title }}
+        <li>
+          <a
+            role="menuitem"
+            tabindex="0"
+            class="whitespace-nowrap underline"
+            target="_blank"
+            {href}>
+            {title}
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</div>
@@ -9,53 +9,43 @@
 <script lang="ts">
  import { env } from '$lib/util/env';
  import { dismissPromotion, getActivePromotion } from '$lib/util/promos/promo';
+  import { stateStore } from '$lib/util/state';
+  import { MCBaseURL } from '$lib/util/util';
+  import type { ComponentProps } from 'svelte';
+  import DropdownNavMenu from './DropdownNavMenu.svelte';
  import Privacy from './Privacy.svelte';
  import Theme from './Theme.svelte';

  const { isEnabledMermaidChartLinks } = env;

  let isMenuOpen = $state(false);
-
+  const isReferral = document.referrer.includes(MCBaseURL);
  function toggleMenu() {
    isMenuOpen = !isMenuOpen;
  }

-  interface Link {
-    href: string;
-    title?: string;
-    icon?: string;
-    img?: string;
-  }
+  type Links = ComponentProps<typeof DropdownNavMenu>['links'];

-  let links: Link[] = [
+  const githubLinks: Links = [
+    { title: 'Mermaid JS', href: 'https://github.com/mermaid-js/mermaid' },
    {
-      title: 'Documentation',
-      href: 'https://mermaid.js.org/intro/getting-started.html'
+      title: 'Mermaid Live Editor',
+      href: 'https://github.com/mermaid-js/mermaid-live-editor'
    },
    {
-      title: 'Tutorial',
-      href: 'https://mermaid.js.org/ecosystem/tutorials.html'
-    },
-    {
-      title: 'Mermaid',
-      href: 'https://github.com/mermaid-js/mermaid'
-    },
-    {
-      title: 'CLI',
+      title: 'Mermaid CLI',
      href: 'https://github.com/mermaid-js/mermaid-cli'
-    },
-    {
-      href: 'https://github.com/mermaid-js/mermaid-live-editor',
-      icon: 'fab fa-github fa-lg'
    }
  ];

-  if (isEnabledMermaidChartLinks) {
-    links.push({
-      href: 'https://mermaidchart.com',
-      img: './mermaidchart-logo.svg'
-    });
-  }
+  const documentationLinks: Links = [
+    { title: 'Getting started', href: 'https://mermaid.js.org/intro/getting-started.html' },
+    { title: 'Tutorials', href: 'https://mermaid.js.org/ecosystem/tutorials.html' },
+    {
+      title: 'Integrations',
+      href: 'https://mermaid.js.org/ecosystem/integrations-community.html'
+    }
+  ];

  let activePromotion = $state(getActivePromotion());

@@ -93,11 +83,37 @@
  </div>
 {/if}

-<div class="navbar bg-primary p-0 shadow-lg">
-  <div class="mx-2 flex-1 px-2">
-    <span class="text-lg font-bold">
-      <a href="/">Mermaid<span class="text-xs font-thin">v{version}</span> Live Editor</a>
-    </span>
+<div class="navbar z-50 bg-primary p-0 shadow-lg">
+  <div class="mx-2 flex flex-1 gap-2 px-2">
+    <a href="/"><img class="size-6" src="./favicon.svg" alt="Mermaid Live Editor" /></a>
+    <div
+      id="switcher"
+      class="flex items-center justify-center gap-2 font-bold"
+      class:flex-row-reverse={isReferral}>
+      <a href="/">
+        {#if !isReferral}
+          Mermaid
+        {/if}
+        Live Editor
+      </a>
+      {#if isEnabledMermaidChartLinks}
+        <input
+          type="checkbox"
+          class="toggle toggle-primary"
+          id="editorMode"
+          checked={isReferral}
+          onclick={() => {
+            logEvent('playgroundToggle', { isReferred: isReferral });
+            window.open(
+              `${MCBaseURL}/play#${$stateStore.serialized}`,
+              '_self',
+              // Do not send referrer header, if the user already came from playground
+              isReferral ? 'noreferrer' : ''
+            );
+          }} />
+        <a href="{MCBaseURL}/play#{$stateStore.serialized}">Playground</a>
+      {/if}
+    </div>
  </div>

  <label
@@ -140,25 +156,28 @@
    onclick={toggleMenu} />

  <div class="hidden w-full lg:flex lg:w-auto lg:items-center" id="menu">
-    <Theme />
+    <span class="text-sm">v{version}</span>
    <ul class="items-center justify-between pt-4 text-base lg:flex lg:pt-0">
      <li>
        <Privacy />
      </li>
-      {#each links as { title, href, icon, img }}
+      <li>
+        <Theme />
+      </li>
+      <li>
+        <DropdownNavMenu label="Documentation" links={documentationLinks} />
+      </li>
+      <li>
+        <DropdownNavMenu icon="fab fa-github fa-lg" links={githubLinks} />
+      </li>
+
+      {#if isEnabledMermaidChartLinks}
        <li>
-          <a class="btn btn-ghost" target="_blank" {href}>
-            {#if icon}
-              <i class={icon}></i>
-            {:else if img}
-              <img src={img} alt={title} />
-            {/if}
-            {#if title}
-              {title}
-            {/if}
+          <a class="btn btn-ghost" target="_blank" href="https://mermaidchart.com">
+            <img class="size-6" src="./mermaidchart-logo.svg" alt="Mermaid Chart" />
          </a>
        </li>
-      {/each}
+      {/if}
    </ul>
  </div>
 </div>
@@ -171,13 +190,4 @@
    background: #661ae6;
    display: flex;
  }
-
-  .navbar {
-    z-index: 10000;
-  }
-
-  img {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
 </style>
@@ -104,6 +104,7 @@ const defaultDelay = minutesToMilliSeconds(1);
 const delaysPerEvent = {
  render: minutesToMilliSeconds(5),
  panZoom: minutesToMilliSeconds(10),
+  playgroundToggle: defaultDelay,
  copyClipboard: defaultDelay,
  download: defaultDelay,
  copyMarkdown: defaultDelay,
@@ -1,8 +1,8 @@
-import { initURLSubscription, loadState, updateCodeStore } from './state';
-import { plausible, initAnalytics } from './stats';
 import { loadDataFromUrl } from './fileLoaders/loader';
 import { initLoading } from './loading';
 import { applyMigrations } from './migrations';
+import { initURLSubscription, loadState, updateCodeStore } from './state';
+import { initAnalytics, plausible } from './stats';

 export const loadStateFromURL = (): void => {
  loadState(window.location.hash.slice(1));
@@ -26,6 +26,7 @@ export const initHandler = async (): Promise<void> => {

 export const isMac = navigator.platform.toUpperCase().includes('MAC');
 export const cmdKey = isMac ? 'Cmd' : 'Ctrl';
+export const MCBaseURL = 'https://mermaidchart.com'; // 'http://localhost:5174'

 let count = 0;
 export const errorDebug = (limit = 1000) => {
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { dev } from '$app/environment';
  import { base } from '$app/paths';
  import Actions from '$lib/components/Actions.svelte';
  import Card from '$lib/components/Card/Card.svelte';
@@ -11,10 +10,9 @@
  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 { cmdKey, initHandler, MCBaseURL, syncDiagram } from '$lib/util/util';
  import { onMount } from 'svelte';

-  const MCBaseURL = dev ? 'http://localhost:5174' : 'https://mermaidchart.com';
  const docURLBase = 'https://mermaid.js.org';
  const docMap: DocumentationConfig = {
    graph: {
@@ -5,6 +5,7 @@ import 'vitest-dom/extend-expect';
 // TODO: Remove once https://github.com/sveltejs/kit/issues/6259 is closed.
 beforeAll(() => {
  vi.mock('$app/environment', () => ({
-    browser: 'window' in globalThis
+    browser: 'window' in globalThis,
+    dev: true
  }));
 });