Skip to content

Commit bb0ab7c

Browse files
sidharthv96sidharthv96
authored
Merge pull request #1574 from mermaid-js/release-promotion
Release live editor
2 parents 877cbdb + 939ef8b commit bb0ab7c

File tree

11 files changed

+340
-281
lines changed

11 files changed

+340
-281
lines changed

‎.env‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
MERMAID_DOMAIN=''
2-
MERMAID_ANALYTICS_URL=''
3-
MERMAID_RENDERER_URL='https://mermaid.ink'
4-
MERMAID_KROKI_RENDERER='https://kroki.io'
5-
MERMAID_IS_ENABLED_MERMAID_CHART_LINKS=''
1+
MERMAID_DOMAIN=''
2+
MERMAID_ANALYTICS_URL=''
3+
MERMAID_RENDERER_URL='https://mermaid.ink'
4+
MERMAID_KROKI_RENDERER='https://kroki.io'
5+
MERMAID_IS_ENABLED_MERMAID_CHART_LINKS=''
6+
7+
# cp .env .env.local to make local changes

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,5 @@ yarn-error.log
1111
/snapshots.js
1212
/cypress/downloads
1313
/cypress/videos
14-
/cypress/screenshots
14+
/cypress/screenshots
15+
.env.local

‎cypress/snapshots.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
module.exports = {
22
"Site Loads": {
33
"Check Home page load": {
4-
"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}"
4+
"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}"
55
},
66
"Check Redirect from old URL": {
77
"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 = {
1919
"__version": "12.17.4",
2020
"Auto sync tests": {
2121
"should dim diagram when code is edited": {
22-
"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}"
22+
"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}"
2323
},
2424
"should not dim diagram when code is in sync": {
25-
"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}"
25+
"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}"
2626
}
2727
},
2828
"Test themes": {

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"@cypress/snapshot": "2.1.7",
2626
"@fortawesome/fontawesome-free": "^6.5.1",
2727
"@sveltejs/adapter-static": "3.0.6",
28-
"@sveltejs/kit": "2.8.0",
28+
"@sveltejs/kit": "2.8.1",
2929
"@sveltejs/vite-plugin-svelte": "^4.0.0",
3030
"@testing-library/jest-dom": "^6.6.3",
3131
"@testing-library/svelte": "^5.2.4",
@@ -95,7 +95,7 @@
9595
]
9696
},
9797
"volta": {
98-
"node": "18.20.4",
98+
"node": "18.20.5",
9999
"yarn": "1.22.22"
100100
},
101101
"engines": {

‎src/lib/components/DropdownNavMenu.svelte‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<script lang="ts">
2+
interface Props {
3+
links: { title: string; href: string }[];
4+
label?: string;
5+
icon?: string;
6+
}
7+
8+
let { links, label, icon }: Props = $props();
9+
</script>
10+
11+
<div class="dropdown dropdown-end">
12+
<button class="btn btn-ghost">
13+
{#if icon}
14+
<i class={icon}></i>
15+
{/if}
16+
{#if label}
17+
<span>{label}</span>
18+
{/if}
19+
<svg
20+
xmlns="http://www.w3.org/2000/svg"
21+
viewBox="0 0 1792 1792"
22+
class="ml-1 inline-block h-4 w-4 fill-current"
23+
><path
24+
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>
25+
</button>
26+
<div
27+
class="dropdown-content menu top-14 size-fit overflow-y-auto bg-base-200 text-base-content shadow-2xl">
28+
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
29+
<ul tabindex="0" class="menu compact p-4">
30+
{#each links as { href, title }}
31+
<li>
32+
<a
33+
role="menuitem"
34+
tabindex="0"
35+
class="whitespace-nowrap underline"
36+
target="_blank"
37+
{href}>
38+
{title}
39+
</a>
40+
</li>
41+
{/each}
42+
</ul>
43+
</div>
44+
</div>

‎src/lib/components/Navbar.svelte‎

Lines changed: 65 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -9,53 +9,43 @@
99
<script lang="ts">
1010
import { env } from '$lib/util/env';
1111
import { dismissPromotion, getActivePromotion } from '$lib/util/promos/promo';
12+
import { stateStore } from '$lib/util/state';
13+
import { MCBaseURL } from '$lib/util/util';
14+
import type { ComponentProps } from 'svelte';
15+
import DropdownNavMenu from './DropdownNavMenu.svelte';
1216
import Privacy from './Privacy.svelte';
1317
import Theme from './Theme.svelte';
1418
1519
const { isEnabledMermaidChartLinks } = env;
1620
1721
let isMenuOpen = $state(false);
18-
22+
const isReferral = document.referrer.includes(MCBaseURL);
1923
function toggleMenu() {
2024
isMenuOpen = !isMenuOpen;
2125
}
2226
23-
interface Link {
24-
href: string;
25-
title?: string;
26-
icon?: string;
27-
img?: string;
28-
}
27+
type Links = ComponentProps<typeof DropdownNavMenu>['links'];
2928
30-
let links: Link[] = [
31-
{
32-
title: 'Documentation',
33-
href: 'https://mermaid.js.org/intro/getting-started.html'
34-
},
29+
const githubLinks: Links = [
30+
{ title: 'Mermaid JS', href: 'https://github.com/mermaid-js/mermaid' },
3531
{
36-
title: 'Tutorial',
37-
href: 'https://mermaid.js.org/ecosystem/tutorials.html'
32+
title: 'Mermaid Live Editor',
33+
href: 'https://github.com/mermaid-js/mermaid-live-editor'
3834
},
3935
{
40-
title: 'Mermaid',
41-
href: 'https://github.com/mermaid-js/mermaid'
42-
},
43-
{
44-
title: 'CLI',
36+
title: 'Mermaid CLI',
4537
href: 'https://github.com/mermaid-js/mermaid-cli'
46-
},
47-
{
48-
href: 'https://github.com/mermaid-js/mermaid-live-editor',
49-
icon: 'fab fa-github fa-lg'
5038
}
5139
];
5240
53-
if (isEnabledMermaidChartLinks) {
54-
links.push({
55-
href: 'https://mermaidchart.com',
56-
img: './mermaidchart-logo.svg'
57-
});
58-
}
41+
const documentationLinks: Links = [
42+
{ title: 'Getting started', href: 'https://mermaid.js.org/intro/getting-started.html' },
43+
{ title: 'Tutorials', href: 'https://mermaid.js.org/ecosystem/tutorials.html' },
44+
{
45+
title: 'Integrations',
46+
href: 'https://mermaid.js.org/ecosystem/integrations-community.html'
47+
}
48+
];
5949
6050
let activePromotion = $state(getActivePromotion());
6151
@@ -93,11 +83,37 @@
9383
</div>
9484
{/if}
9585

96-
<div class="navbar bg-primary p-0 shadow-lg">
97-
<div class="mx-2 flex-1 px-2">
98-
<span class="text-lg font-bold">
99-
<a href="/">Mermaid<span class="text-xs font-thin">v{version}</span> Live Editor</a>
100-
</span>
86+
<div class="navbar z-50 bg-primary p-0 shadow-lg">
87+
<div class="mx-2 flex flex-1 gap-2 px-2">
88+
<a href="/"><img class="size-6" src="./favicon.svg" alt="Mermaid Live Editor" /></a>
89+
<div
90+
id="switcher"
91+
class="flex items-center justify-center gap-2 font-bold"
92+
class:flex-row-reverse={isReferral}>
93+
<a href="/">
94+
{#if !isReferral}
95+
Mermaid
96+
{/if}
97+
Live Editor
98+
</a>
99+
{#if isEnabledMermaidChartLinks}
100+
<input
101+
type="checkbox"
102+
class="toggle toggle-primary"
103+
id="editorMode"
104+
checked={isReferral}
105+
onclick={() => {
106+
logEvent('playgroundToggle', { isReferred: isReferral });
107+
window.open(
108+
`${MCBaseURL}/play#${$stateStore.serialized}`,
109+
'_self',
110+
// Do not send referrer header, if the user already came from playground
111+
isReferral ? 'noreferrer' : ''
112+
);
113+
}} />
114+
<a href="{MCBaseURL}/play#{$stateStore.serialized}">Playground</a>
115+
{/if}
116+
</div>
101117
</div>
102118

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

142158
<div class="hidden w-full lg:flex lg:w-auto lg:items-center" id="menu">
143-
<Theme />
159+
<span class="text-sm">v{version}</span>
144160
<ul class="items-center justify-between pt-4 text-base lg:flex lg:pt-0">
145161
<li>
146162
<Privacy />
147163
</li>
148-
{#each links as { title, href, icon, img }}
164+
<li>
165+
<Theme />
166+
</li>
167+
<li>
168+
<DropdownNavMenu label="Documentation" links={documentationLinks} />
169+
</li>
170+
<li>
171+
<DropdownNavMenu icon="fab fa-github fa-lg" links={githubLinks} />
172+
</li>
173+
174+
{#if isEnabledMermaidChartLinks}
149175
<li>
150-
<a class="btn btn-ghost" target="_blank" {href}>
151-
{#if icon}
152-
<i class={icon}></i>
153-
{:else if img}
154-
<img src={img} alt={title} />
155-
{/if}
156-
{#if title}
157-
{title}
158-
{/if}
176+
<a class="btn btn-ghost" target="_blank" href="https://mermaidchart.com">
177+
<img class="size-6" src="./mermaidchart-logo.svg" alt="Mermaid Chart" />
159178
</a>
160179
</li>
161-
{/each}
180+
{/if}
162181
</ul>
163182
</div>
164183
</div>
@@ -171,13 +190,4 @@
171190
background: #661ae6;
172191
display: flex;
173192
}
174-
175-
.navbar {
176-
z-index: 10000;
177-
}
178-
179-
img {
180-
width: 1.5rem;
181-
height: 1.5rem;
182-
}
183193
</style>

‎src/lib/util/stats.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ const defaultDelay = minutesToMilliSeconds(1);
104104
const delaysPerEvent = {
105105
render: minutesToMilliSeconds(5),
106106
panZoom: minutesToMilliSeconds(10),
107+
playgroundToggle: defaultDelay,
107108
copyClipboard: defaultDelay,
108109
download: defaultDelay,
109110
copyMarkdown: defaultDelay,

‎src/lib/util/util.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { initURLSubscription, loadState, updateCodeStore } from './state';
2-
import { plausible, initAnalytics } from './stats';
31
import { loadDataFromUrl } from './fileLoaders/loader';
42
import { initLoading } from './loading';
53
import { applyMigrations } from './migrations';
4+
import { initURLSubscription, loadState, updateCodeStore } from './state';
5+
import { initAnalytics, plausible } from './stats';
66

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

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

3031
let count = 0;
3132
export const errorDebug = (limit = 1000) => {

‎src/routes/edit/+page.svelte‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script lang="ts">
2-
import { dev } from '$app/environment';
32
import { base } from '$app/paths';
43
import Actions from '$lib/components/Actions.svelte';
54
import Card from '$lib/components/Card/Card.svelte';
@@ -11,10 +10,9 @@
1110
import type { DocumentationConfig, EditorMode, Tab, ValidatedState } from '$lib/types';
1211
import { env } from '$lib/util/env';
1312
import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
14-
import { cmdKey, initHandler, syncDiagram } from '$lib/util/util';
13+
import { cmdKey, initHandler, MCBaseURL, syncDiagram } from '$lib/util/util';
1514
import { onMount } from 'svelte';
1615
17-
const MCBaseURL = dev ? 'http://localhost:5174' : 'https://mermaidchart.com';
1816
const docURLBase = 'https://mermaid.js.org';
1917
const docMap: DocumentationConfig = {
2018
graph: {

‎src/tests/setup.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import 'vitest-dom/extend-expect';
55
// TODO: Remove once https://github.com/sveltejs/kit/issues/6259 is closed.
66
beforeAll(() => {
77
vi.mock('$app/environment', () => ({
8-
browser: 'window' in globalThis
8+
browser: 'window' in globalThis,
9+
dev: true
910
}));
1011
});

0 commit comments

Comments
 (0)