From 4c24b52e124a1c5995c5d08a67a7513dfe1b5287 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 8 Nov 2024 22:30:47 +0530 Subject: [PATCH 01/10] feat: Add mermaidchart playground toggle --- .env | 12 +++++++----- .gitignore | 3 ++- src/lib/components/Navbar.svelte | 19 +++++++++++++++++-- src/lib/util/stats.ts | 1 + 4 files changed, 27 insertions(+), 8 deletions(-) diff --git a/.env b/.env index e2f0428fd..c9bdfa82c 100644 --- a/.env +++ b/.env @@ -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 diff --git a/.gitignore b/.gitignore index 28575d857..93a49eded 100644 --- a/.gitignore +++ b/.gitignore @@ -11,4 +11,5 @@ yarn-error.log /snapshots.js /cypress/downloads /cypress/videos -/cypress/screenshots \ No newline at end of file +/cypress/screenshots +.env.local diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte index 833817a7a..fdf6d9da8 100644 --- a/src/lib/components/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -9,6 +9,7 @@ + +
+ +
+ + +
+
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte index fdf6d9da8..0fcdcdaa6 100644 --- a/src/lib/components/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -10,6 +10,8 @@ import { env } from '$lib/util/env'; import { dismissPromotion, getActivePromotion } from '$lib/util/promos/promo'; import { stateStore } from '$lib/util/state'; + import type { ComponentProps } from 'svelte'; + import DropdownNavMenu from './DropdownNavMenu.svelte'; import Privacy from './Privacy.svelte'; import Theme from './Theme.svelte'; @@ -21,42 +23,28 @@ isMenuOpen = !isMenuOpen; } - interface Link { - href: string; - title?: string; - icon?: string; - img?: string; - } + type Links = ComponentProps['links']; - let links: Link[] = [ - { - title: 'Documentation', - href: 'https://mermaid.js.org/intro/getting-started.html' - }, + const githubLinks: Links = [ + { title: 'Mermaid JS', href: 'https://github.com/mermaid-js/mermaid' }, { - title: 'Tutorial', - href: 'https://mermaid.js.org/ecosystem/tutorials.html' + title: 'Mermaid Live Editor', + href: 'https://github.com/mermaid-js/mermaid-live-editor' }, { - 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()); @@ -94,7 +82,7 @@ {/if} -
+
Mermaid Live Editor @@ -154,26 +142,28 @@ onclick={toggleMenu} />
@@ -186,13 +176,4 @@ background: #661ae6; display: flex; } - - .navbar { - z-index: 10000; - } - - img { - width: 1.5rem; - height: 1.5rem; - } From 8c1c348f68de75bc31ce1b7ae309ebdb0574e828 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 11 Nov 2024 01:47:43 +0530 Subject: [PATCH 04/10] chore: Cleanup --- src/lib/components/DropdownNavMenu.svelte | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/lib/components/DropdownNavMenu.svelte b/src/lib/components/DropdownNavMenu.svelte index 530b8582f..abc1881f0 100644 --- a/src/lib/components/DropdownNavMenu.svelte +++ b/src/lib/components/DropdownNavMenu.svelte @@ -24,18 +24,18 @@ 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" />
+ class="dropdown-content menu top-14 size-fit overflow-y-auto bg-base-200 text-base-content shadow-2xl">
    - {#each links as link} + {#each links as { href, title }}
  • - {link.title} + {href}> + {title}
    • {/each} From f954dfab61693f1b997274ec62bf7eeb7eb097d8 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 13 Nov 2024 21:07:57 +0530 Subject: [PATCH 05/10] feat: Retain toggle label positions --- src/lib/components/Navbar.svelte | 26 +++++++++++++++++--------- src/lib/util/util.ts | 6 ++++-- src/routes/edit/+page.svelte | 4 +--- 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte index 0fcdcdaa6..f173a9a69 100644 --- a/src/lib/components/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -10,6 +10,7 @@ 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'; @@ -18,7 +19,7 @@ const { isEnabledMermaidChartLinks } = env; let isMenuOpen = $state(false); - + const isReferral = document.referrer.includes(MCBaseURL); function toggleMenu() { isMenuOpen = !isMenuOpen; } @@ -83,23 +84,30 @@ {/if}
    -
    - +
    + Mermaid Live Editor +
    Mermaid Live Editor {#if isEnabledMermaidChartLinks} { - logEvent('playgroundToggle'); - window.location.href = `https://mermaidchart.com/play#${$stateStore.serialized}`; + 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' : '' + ); }} /> - - Mermaid Chart Playground - + Mermaid Chart Playground {/if} - +