rollback #288 due to #338

Update mermaid

.eslintrc.cjs

@@ -8,7 +8,16 @@ module.exports = {
 		'prettier'
 	],
 	plugins: ['svelte3', 'tailwindcss', '@typescript-eslint'],
-	ignorePatterns: ['docs/*', '*.cjs', '*.md', 'snapshots.js', 'svelte.config.js', 'package.json'],
+	ignorePatterns: [
+		'docs/*',
+		'*.cjs',
+		'*.md',
+		'snapshots.js',
+		'svelte.config.js',
+		'renovate.json',
+		'package.json',
+		'tsconfig.json'
+	],
 	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 	settings: {
 		'svelte3/typescript': () => require('typescript')

cypress/integration/actions.spec.ts

@@ -1,9 +1,7 @@
 describe('Check actions', () => {
-	// eslint-disable-next-line mocha/no-hooks-for-single-case
 	beforeEach(() => {
 		cy.clearLocalStorage();
 		cy.visit('/edit');
-		cy.contains('Actions').click();
 	});
 	it('should update markdown code', () => {
 		cy.get('#markdown')
@@ -17,4 +15,10 @@ describe('Check actions', () => {
 					});
 			});
 	});
+
+	it('should load gists from URL', () => {
+		cy.get('#gist').type('https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a');
+		cy.contains('Load Gist').click();
+		cy.contains('Go shopping!!');
+	});
 });

cypress/integration/history.spec.ts

@@ -1,8 +1,12 @@
 describe('Save History', () => {
 	beforeEach(() => {
+		cy.clock();
 		cy.clearLocalStorage();
 		cy.visit('/edit');
+		cy.contains('Actions').click();
+		cy.contains('History').click();
 	});
+
 	it('should save when clicked', () => {
 		cy.get('#historyList').find('li').should('have.length', 0);
 		cy.get('#historyList').contains('No items in History');
@@ -43,7 +47,6 @@ describe('Save History', () => {
 	});
 
 	it('should auto save history', () => {
-		cy.clock();
 		cy.get('#editor').type('  C --> HistoryTest');
 		cy.tick(70000);
 		cy.contains('Timeline').click();

cypress/integration/loadSite.spec.ts

@@ -32,6 +32,35 @@ describe('Site Loads', () => {
 		cy.contains('classDiagram');
 	});
 
+	it('should load diagram from gist', () => {
+		cy.visit(`/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a`);
+		cy.contains('History').click();
+		cy.contains('Go shopping!!');
+		cy.contains('Revisions');
+		cy.contains('sidharthv96 v8f8f1e2');
+		cy.contains('sidharthv96 v7851e19');
+		cy.getLocalStorage('codeStore').snapshot();
+	});
+
+	it('should load diagram from gist revision', () => {
+		cy.visit(
+			'/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19'
+		);
+		cy.contains('History').click();
+		cy.contains('Party');
+		cy.contains('Revisions');
+		cy.contains('sidharthv96 v7851e19');
+		cy.getLocalStorage('codeStore').snapshot();
+	});
+
+	it('should load diagram from raw files', () => {
+		cy.visit(
+			'/edit?code=https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd&config=https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json'
+		);
+		cy.contains('Party');
+		cy.getLocalStorage('codeStore').snapshot();
+	});
+
 	it('should prevent setting the "securityLevel" option via URL', () => {
 		const b64State = toBase64(
 			`{"code":"graph TD\\nA[\\"<img src='https://via.placeholder.com/64' width=64 />\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","updateEditor":true,"autoSync":true,"updateDiagram":true}`,

cypress/snapshots.js

@@ -4,10 +4,19 @@ module.exports = {
       "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]\\n  \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":true,\"autoSync\":true,\"updateDiagram\":true}"
     },
     "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}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":false}"
+      "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}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true}"
+    },
+    "should load diagram from gist": {
+      "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping!!)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a\"}}}"
+    },
+    "should load diagram from gist revision": {
+      "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19\"}}}"
+    },
+    "should load diagram from raw files": {
+      "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping!!)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}"
     }
   },
-  "__version": "8.2.0",
+  "__version": "8.3.1",
   "Auto sync tests": {
     "should dim diagram when code is edited": {
       "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]\\n    C --> Test\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":false,\"updateDiagram\":false}"

package.json

@@ -15,15 +15,15 @@
 	},
 	"devDependencies": {
 		"@cypress/snapshot": "^2.1.7",
-		"@sveltejs/adapter-static": "1.0.0-next.16",
+		"@sveltejs/adapter-static": "1.0.0-next.17",
 		"@sveltejs/kit": "1.0.0-next.147",
 		"@types/mermaid": "^8.2.7",
-		"@typescript-eslint/eslint-plugin": "^4.29.2",
-		"@typescript-eslint/parser": "^4.29.2",
-		"autoprefixer": "^10.3.1",
+		"@typescript-eslint/eslint-plugin": "^4.30.0",
+		"@typescript-eslint/parser": "^4.30.0",
+		"autoprefixer": "^10.3.3",
 		"chai": "^4.3.4",
 		"cssnano": "^5.0.8",
-		"cypress": "8.3.0",
+		"cypress": "8.3.1",
 		"cypress-localstorage-commands": "^1.5.0",
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.1.0",
@@ -32,28 +32,28 @@
 		"eslint-plugin-postcss-modules": "^1.2.1",
 		"eslint-plugin-svelte3": "^3.2.0",
 		"eslint-plugin-tailwindcss": "^1.14.3",
-		"husky": "^7.0.1",
+		"husky": "^7.0.2",
 		"lint-staged": "^11.1.2",
-		"mocha": "^9.1.0",
+		"mocha": "^9.1.1",
 		"postcss": "^8.3.6",
 		"postcss-load-config": "^3.1.0",
 		"prettier": "~2.3.2",
-		"prettier-plugin-svelte": "^2.3.1",
-		"svelte": "^3.42.2",
-		"svelte-preprocess": "^4.7.4",
-		"tailwindcss": "^2.2.7",
+		"prettier-plugin-svelte": "^2.4.0",
+		"svelte": "^3.42.4",
+		"svelte-preprocess": "^4.8.0",
+		"tailwindcss": "^2.2.9",
 		"tslib": "^2.3.1",
-		"typescript": "^4.3.5"
+		"typescript": "^4.4.2"
 	},
 	"type": "module",
 	"dependencies": {
 		"@analytics/google-analytics": "^0.5.3",
 		"@macfja/svelte-persistent-store": "^1.2.0",
-		"analytics": "^0.7.13",
+		"analytics": "^0.7.14",
 		"js-base64": "^3.6.1",
-		"mermaid": "^8.11.4",
+		"mermaid": "^8.12.1",
 		"moment": "^2.29.1",
-		"monaco-editor": "^0.25.2",
+		"monaco-editor": "^0.27.0",
 		"random-word-slugs": "^0.0.5"
 	},
 	"lint-staged": {

renovate.json

@@ -0,0 +1,28 @@
+{
+	"extends": [
+		"config:base",
+		":rebaseStalePrs",
+		"group:allNonMajor",
+		"schedule:earlyMondays",
+		":automergeMinor",
+		":automergeTesters",
+		":automergeLinters",
+		":automergeTypes",
+		":automergePatch"
+	],
+	"packageRules": [
+		{
+			"matchUpdateTypes": ["minor", "patch", "pin", "digest"],
+			"automerge": true
+		},
+		{
+			"matchDatasources": ["npm"],
+			"stabilityDays": 3
+		}
+	],
+	"dependencyDashboard": true,
+	"major": {
+		"dependencyDashboardApproval": true
+	},
+	"dependencyDashboardAutoclose": true
+}

src/app.html

@@ -21,27 +21,27 @@
 		/>
 		<link
 			rel="stylesheet"
-			href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs/editor/editor.main.min.css"
+			href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.27.0/min/vs/editor/editor.main.min.css"
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"
 		/>
 		<script>
 			var require = {
-				paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs' }
+				paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.27.0/min/vs' }
 			};
 		</script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs/loader.min.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.27.0/min/vs/loader.min.js"
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"
 		></script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs/editor/editor.main.nls.min.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.27.0/min/vs/editor/editor.main.nls.min.js"
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"
 		></script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs/editor/editor.main.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.27.0/min/vs/editor/editor.main.js"
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"
 		></script>

src/app.postcss

@@ -12,3 +12,7 @@
 .action-btn {
 	@apply rounded p-2 bg-indigo-400 shadow flex-auto text-white hover:bg-indigo-500;
 }
+
+.input {
+	@apply flex-1 border-indigo-400 border-solid border-2 rounded;
+}

src/lib/components/actions.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { browser } from '$app/env';
+
 	import Card from '$lib/components/card/card.svelte';
 	import type { State } from '$lib/types';
 	import { codeStore } from '$lib/util/state';
@@ -105,17 +107,36 @@
 		);
 	};
 
-	const onCopyMarkdown = (event: Event) => {
-		event.target.select();
+	const onCopyMarkdown = () => {
+		document.getElementById('markdown').select();
 		document.execCommand('Copy');
 	};
 
+	let gistURL = '';
+	codeStore.subscribe((state) => {
+		if (state.loader?.type === 'gist') {
+			// @ts-ignore Gist will have url
+			gistURL = state.loader.config.url;
+		}
+	});
+
+	const loadGist = () => {
+		if (!gistURL) {
+			alert('Please enter a Gist URL first');
+		}
+		window.location.href = `${window.location.pathname}?gist=${gistURL}`;
+	};
+
 	let iUrl: string;
 	let svgUrl: string;
 	let mdCode: string;
 	let imagemodeselected = 'auto';
 	let userimagesize = 1080;
 
+	let isNetlify = false;
+	if (browser && ['mermaid.live', 'netlify'].some((path) => window.location.host.includes(path))) {
+		isNetlify = true;
+	}
 	codeStore.subscribe((state: State) => {
 		const stateCopy = JSON.parse(JSON.stringify(state));
 		if (typeof stateCopy.mermaid === 'string') {
@@ -128,7 +149,7 @@
 	});
 </script>
 
-<Card title="Actions" isOpen={false}>
+<Card title="Actions" isOpen={true}>
 	<div class="flex flex-wrap gap-2 m-2">
 		{#if isClipboardAvailable()}
 			<button class="action-btn w-full" on:click={onCopyClipboard}
@@ -162,8 +183,29 @@
 		</div>
 
 		<div class="w-full flex gap-2 items-center">
-			<label for="markdown">Copy Markdown</label>
-			<input class="flex-1" id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
+			<input class="input" id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
+			<label for="markdown">
+				<button class="btn text-white flex-auto" on:click={onCopyMarkdown}> Copy Markdown </button>
+			</label>
 		</div>
+
+		<div class="w-full flex gap-2 items-center">
+			<input
+				class="input"
+				id="gist"
+				type="text"
+				bind:value={gistURL}
+				placeholder="Enter Gist URL" />
+			<label for="gist">
+				<button class="btn text-white flex-auto" on:click={loadGist}> Load Gist </button>
+			</label>
+		</div>
+		{#if isNetlify}
+			<div class="w-full flex items-center justify-center">
+				<a class="link underline text-gray-500 text-sm" href="https://netlify.com">
+					This site is powered by Netlify
+				</a>
+			</div>
+		{/if}
 	</div>
 </Card>

src/lib/components/card/tabs.svelte

@@ -7,7 +7,7 @@
 	export let title: string;
 	export let isOpen = false;
 
-	let activeTabID: string = tabs[0]?.id;
+	$: activeTabID = tabs[0]?.id;
 
 	const dispatch = createEventDispatcher<TabEvents>();
 	const toggleTabs = (tab: Tab) => {
@@ -27,12 +27,12 @@
 			{#each tabs as tab}
 				<li class="mr-2 last:mr-0 w-28 h-6 flex-auto text-center">
 					<div
-						class="text cursor-pointer font-semibold min-w-16 w-auto px-2 py-1 -mb-4 rounded-t  block leading-normal {activeTabID ===
+						class="text cursor-pointer font-semibold min-w-16 w-auto px-2 py-1 -mb-4 rounded-t flex justify-center items-center leading-normal {activeTabID ===
 						tab.id
 							? 'text-indigo-500 bg-white border-white'
 							: 'text-white bg-indigo-500 border-indigo-500 hover:bg-indigo-600'}"
 						on:click|stopPropagation={() => toggleTabs(tab)}>
-						<i class={tab.icon} />
+						<i class="{tab.icon} mr-1" />
 						{tab.title}
 					</div>
 				</li>

src/lib/components/editor/editor.svelte

@@ -14,11 +14,10 @@
 	export let editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
 		value: text,
 		language: language,
-		scrollBeyondLastLine: false,
 		minimap: {
 			enabled: false
 		},
-		theme: 'myCoolTheme',
+		theme: 'mermaidTheme',
 		overviewRulerLanes: 0
 	};
 	export let errorMarkers: monaco.editor.IMarkerData[] = [];
@@ -39,7 +38,7 @@
 		let i = 0;
 		while (i++ < 10) {
 			try {
-				//@ts-ignore : This is a hack to handle a svelte-kit error when importing monaco.
+				// @ts-ignore : This is a hack to handle a svelte-kit error when importing monaco.
 				Monaco = monaco;
 				return;
 			} catch {
@@ -50,7 +49,7 @@
 	};
 	onMount(async () => {
 		try {
-			//@ts-ignore : This is a hack to handle a svelte-kit error when importing monaco.
+			// @ts-ignore : This is a hack to handle a svelte-kit error when importing monaco.
 			Monaco = monaco;
 		} catch {
 			await loadMonaco(); // Fix https://github.com/mermaid-js/mermaid-live-editor/issues/175

src/lib/components/editor/util.ts

@@ -36,7 +36,7 @@ export const initEditor = (monacoEditor): void => {
 		]
 	});
 
-	monacoEditor.editor.defineTheme('myCoolTheme', {
+	monacoEditor.editor.defineTheme('mermaidTheme', {
 		base: 'vs',
 		inherit: false,
 		rules: [

src/lib/components/history/history.svelte

@@ -3,29 +3,30 @@
 	import { codeStore, getStateString } from '$lib/util/state';
 	import {
 		addHistoryEntry,
-		autoHistoryMode,
+		historyModeStore,
 		clearHistoryData,
 		getPreviousState,
-		historyStore
+		historyStore,
+		loaderHistoryStore
 	} from './history';
 	import { notify, prompt } from '$lib/util/notify';
 	import { onMount } from 'svelte';
 	import moment from 'moment';
-	import type { State, Tab } from '$lib/types';
+	import type { HistoryType, State, Tab } from '$lib/types';
 
 	const HISTORY_SAVE_INTERVAL = 60000;
 
 	const tabSelectHandler = (message: CustomEvent<Tab>) => {
-		autoHistoryMode.set('timeline' === message.detail.id);
+		historyModeStore.set(message.detail.id as HistoryType);
 	};
-	const tabs: Tab[] = [
+	let tabs: Tab[] = [
 		{
-			id: 'saved',
+			id: 'manual',
 			title: 'Saved',
 			icon: 'far fa-bookmark'
 		},
 		{
-			id: 'timeline',
+			id: 'auto',
 			title: 'Timeline',
 			icon: 'fas fa-history'
 		}
@@ -38,7 +39,7 @@
 			addHistoryEntry({
 				state: $codeStore,
 				time: Date.now(),
-				auto
+				type: auto ? 'auto' : 'manual'
 			});
 		} else if (!auto) {
 			notify('State already saved.');
@@ -62,13 +63,27 @@
 	};
 
 	onMount(() => {
-		autoHistoryMode.set(false);
+		historyModeStore.set('manual');
 		setInterval(() => {
 			saveHistory(true);
 		}, HISTORY_SAVE_INTERVAL);
 	});
 
-	let isOpen = true;
+	loaderHistoryStore.subscribe((entries) => {
+		if (entries.length > 0 && tabs.length === 2) {
+			tabs = [
+				{
+					id: 'loader',
+					title: 'Revisions',
+					icon: 'fab fa-git-alt'
+				},
+				...tabs
+			];
+			historyModeStore.set('loader');
+		}
+	});
+
+	let isOpen = false;
 </script>
 
 <Card on:select={tabSelectHandler} bind:isOpen {tabs} title="History">
@@ -78,20 +93,30 @@
 			class="btn"
 			on:click|stopPropagation={() => saveHistory()}
 			title="Save current state"><i class="far fa-save" /></button>
-		<button
-			id="clearHistory"
-			class="btn text-red-400"
-			on:click|stopPropagation={() => clearHistory()}
-			title="Delete all saved states"><i class="fas fa-trash-alt" /></button>
+		{#if $historyModeStore !== 'loader'}
+			<button
+				id="clearHistory"
+				class="btn text-red-400"
+				on:click|stopPropagation={() => clearHistory()}
+				title="Delete all saved states"><i class="fas fa-trash-alt" /></button>
+		{/if}
 	</div>
 	<ul class="p-2 space-y-2 overflow-auto h-56" id="historyList">
 		{#if $historyStore.length > 0}
-			{#each $historyStore as { state, time, name }}
+			{#each $historyStore as { state, time, name, url, type }}
 				<li class="rounded p-2 shadow flex-col">
 					<div class="flex">
 						<div class="flex-1">
 							<div class="flex flex-col">
-								<span>{name}</span>
+								{#if url}
+									<a
+										href={url}
+										target="_blank"
+										title="Open revision in new tab"
+										class="hover:underline text-blue-500">{name}</a>
+								{:else}
+									<span>{name}</span>
+								{/if}
 								<span class="text-gray-400 text-sm">{relativeTime(time)}</span>
 							</div>
 						</div>
@@ -99,9 +124,11 @@
 							<button
 								class="rounded px-2 w-24 bg-green-200 hover:bg-green-300"
 								on:click={() => restoreHistory(state)}><i class="fas fa-undo" /> Restore</button>
-							<button
-								class="rounded px-2 w-24 bg-red-200 hover:bg-red-300"
-								on:click={() => clearHistory(time)}><i class="fas fa-trash-alt" /> Delete</button>
+							{#if type !== 'loader'}
+								<button
+									class="rounded px-2 w-24 bg-red-200 hover:bg-red-300"
+									on:click={() => clearHistory(time)}><i class="fas fa-trash-alt" /> Delete</button>
+							{/if}
 						</div>
 					</div>
 				</li>

src/lib/components/history/history.ts

@@ -1,12 +1,13 @@
-import { derived, Readable, Writable, writable, get } from 'svelte/store';
+import { derived, writable, get } from 'svelte/store';
+import type { Readable, Writable } from 'svelte/store';
 import { persist, localStorage } from '@macfja/svelte-persistent-store';
 import { generateSlug } from 'random-word-slugs';
-import type { HistoryEntry } from '../../types';
+import type { HistoryEntry, HistoryType } from '$lib/types';
 
 const MAX_AUTO_HISTORY_LENGTH = 30;
 
-export const autoHistoryMode: Writable<boolean> = persist(
-	writable(true),
+export const historyModeStore: Writable<HistoryType> = persist(
+	writable('manual'),
 	localStorage(),
 	'autoHistoryMode'
 );
@@ -23,17 +24,30 @@ const manualHistoryStore: Writable<HistoryEntry[]> = persist(
 	'manualHistoryStore'
 );
 
+export const loaderHistoryStore: Writable<HistoryEntry[]> = writable([] as HistoryEntry[]);
+
 export const historyStore: Readable<HistoryEntry[]> = derived(
-	[autoHistoryMode, autoHistoryStore, manualHistoryStore],
-	([autoMode, autoHistories, manualHistories], set) => {
-		set(autoMode ? autoHistories : manualHistories);
+	[historyModeStore, autoHistoryStore, manualHistoryStore, loaderHistoryStore],
+	([historyMode, autoHistories, manualHistories, loadedHistories], set) => {
+		if (historyMode === 'auto') {
+			set(autoHistories);
+		} else if (historyMode === 'manual') {
+			set(manualHistories);
+		} else if (historyMode === 'loader') {
+			set(loadedHistories);
+		} else {
+			set(autoHistories);
+		}
 	}
 );
 
 export const addHistoryEntry = (entry: HistoryEntry): void => {
+	if (entry.type === 'loader') {
+		loaderHistoryStore.update((entries) => [entry, ...entries]);
+		return;
+	}
 	entry.name = generateSlug(2);
-
-	if (!entry.auto) {
+	if (entry.type !== 'auto') {
 		manualHistoryStore.update((entries) => [entry, ...entries]);
 		return;
 	}
@@ -46,9 +60,12 @@ export const addHistoryEntry = (entry: HistoryEntry): void => {
 };
 
 export const clearHistoryData = (time?: number): void => {
-	(get(autoHistoryMode) ? autoHistoryStore : manualHistoryStore).update((entries) =>
-		entries.filter((entry) => time && entry.time != time)
-	);
+	(get(historyModeStore) === 'auto' ? autoHistoryStore : manualHistoryStore).update((entries) => {
+		if (get(historyModeStore) !== 'loader') {
+			entries = entries.filter((entry) => time && entry.time != time);
+		}
+		return entries;
+	});
 };
 
 export const getPreviousState = (auto: boolean): string => {

src/lib/types.d.ts

@@ -29,11 +29,32 @@ export interface State {
 	updateEditor: boolean;
 	updateDiagram: boolean;
 	autoSync: boolean;
+	loader?: LoaderConfig;
 }
 
+export interface GistLoaderConfig {
+	url: string;
+}
+
+export interface LoadingState {
+	loading: boolean;
+	message?: string;
+}
+export interface FileLoaderConfig {
+	codeURL: string;
+	configURL?: string;
+}
+export interface LoaderConfig {
+	type: 'gist' | 'files';
+	config: GistLoaderConfig | FileLoaderConfig;
+}
+export type HistoryType = 'auto' | 'manual' | 'loader';
 export interface HistoryEntry {
 	state: State;
 	time: number;
 	name?: string;
-	auto: boolean;
+	type: HistoryType;
+	url?: string;
 }
+
+type Loader = (url: string) => Promise<State>;

src/lib/util/fileLoaders/gist.ts

@@ -0,0 +1,105 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { State } from '$lib/types';
+import { defaultState } from '../state';
+import { addHistoryEntry } from '../../components/history/history';
+
+const codeFileName = 'code.mmd';
+const configFileName = 'config.json';
+
+const isValidGist = (files: any): boolean => {
+	return codeFileName in files;
+};
+
+const getFileContent = async (file: any): Promise<string> => {
+	if (file.truncated) {
+		return await (await fetch(file.raw_url)).text();
+	}
+	return file.content;
+};
+
+interface GistData {
+	code: string;
+	config?: string;
+	author: string;
+	time: number;
+	version: string;
+	url: string;
+}
+
+const getGistData = async (gistURL: string): Promise<GistData> => {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const [_, __, gistID, revisionID] = gistURL.split('github.com').pop().split('/');
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+	const { html_url, files, history } = await (
+		await fetch(`https://api.github.com/gists/${gistID}${revisionID ? '/' + revisionID : ''}`)
+	).json();
+	if (isValidGist(files)) {
+		const code = await getFileContent(files[codeFileName]);
+		let config: string;
+		if (configFileName in files) {
+			config = await getFileContent(files[configFileName]);
+		}
+		const currentItem = history[0];
+		return {
+			url: `${html_url}/${currentItem.version}`,
+			code,
+			config,
+			author: currentItem.user.login,
+			time: new Date(currentItem.committed_at).getTime(),
+			version: (currentItem.version as string).slice(-7)
+		};
+	} else {
+		throw 'Invalid gist provided';
+	}
+};
+
+const getStateFromGist = (gist: GistData, gistURL: string = gist.url): State => {
+	const state: State = {
+		...defaultState,
+		code: gist.code,
+		loader: {
+			type: 'gist',
+			config: {
+				url: gistURL
+			}
+		}
+	};
+	gist.config && (state.mermaid = gist.config);
+	return state;
+};
+
+export const loadGistData = async (gistURL: string): Promise<State> => {
+	try {
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		const [_, __, gistID, revisionID] = gistURL.split('github.com').pop().split('/');
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+		const { history } = await (
+			await fetch(`https://api.github.com/gists/${gistID}${revisionID ? '/' + revisionID : ''}`)
+		).json();
+		const gistHistory: GistData[] = [];
+		for (const entry of history) {
+			// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+			const data: GistData = await getGistData(entry.url).catch(() => undefined);
+			data && gistHistory.push(data);
+		}
+		if (gistHistory.length === 0) {
+			throw 'Invalid gist provided';
+		}
+		gistHistory.reverse();
+		const state = getStateFromGist(gistHistory.slice(-1).pop(), gistURL);
+		for (const gist of gistHistory) {
+			addHistoryEntry({
+				state: getStateFromGist(gist),
+				time: gist.time,
+				type: 'loader',
+				url: gist.url,
+				name: `${gist.author} v${gist.version}`
+			});
+		}
+		return state;
+	} catch (err) {
+		console.error(err);
+	}
+};

src/lib/util/fileLoaders/loader.ts

@@ -0,0 +1,58 @@
+import { loadGistData } from './gist';
+import { updateCodeStore, defaultState } from '../state';
+import type { Loader, State } from '$lib/types';
+const loaders: Record<string, Loader> = {
+	gist: loadGistData
+};
+
+export const loadDataFromUrl = async (): Promise<void> => {
+	const searchParams = new URLSearchParams(window.location.search);
+	let state: State = defaultState;
+	let code: string, config: string;
+	let loaded = false;
+	const codeURL: string = searchParams.get('code');
+	const configURL: string = searchParams.get('config');
+
+	if (codeURL) {
+		code = await (await fetch(codeURL)).text();
+		loaded = true;
+	}
+	if (configURL) {
+		config = await (await fetch(configURL)).text();
+	} else {
+		config = defaultState.mermaid;
+	}
+	if (!code) {
+		for (const [key, value] of searchParams.entries()) {
+			if (key in loaders) {
+				try {
+					state = await loaders[key](value);
+					loaded = true;
+					break;
+				} catch (err) {
+					console.error(err);
+				}
+			}
+		}
+	} else {
+		state = {
+			code,
+			mermaid: config,
+			loader: {
+				type: 'files',
+				config: {
+					codeURL,
+					configURL
+				}
+			}
+		} as State;
+	}
+	loaded &&
+		updateCodeStore({
+			...state,
+			autoSync: true,
+			updateDiagram: true,
+			updateEditor: true
+		});
+	// window.location.search = '';
+};

src/lib/util/loading.ts

@@ -0,0 +1,20 @@
+import { writable } from 'svelte/store';
+import type { Writable } from 'svelte/store';
+import type { LoadingState } from '$lib/types';
+
+const defaultLoading: LoadingState = {
+	loading: false
+};
+
+export const loadingStateStore: Writable<LoadingState> = writable(defaultLoading);
+export const initLoading = async <T>(message: string, task: Promise<T>): Promise<T> => {
+	loadingStateStore.set({
+		loading: true,
+		message
+	});
+	const result: T = await task;
+	loadingStateStore.set({
+		loading: false
+	});
+	return result;
+};

src/lib/util/state.ts

@@ -4,7 +4,7 @@ import { persist, localStorage } from '@macfja/svelte-persistent-store';
 import type { State } from '$lib/types';
 import { saveStatistcs } from './stats';
 
-const defaultState: State = {
+export const defaultState: State = {
 	code: `graph TD
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{Let me think}

src/lib/util/util.ts

@@ -1,6 +1,8 @@
 import type { State } from '$lib/types';
 import { initURLSubscription, loadState, updateCodeStore } from './state';
 import { analytics, initAnalytics } from './stats';
+import { loadDataFromUrl } from './fileLoaders/loader';
+import { initLoading } from './loading';
 
 export const loadStateFromURL = (): void => {
 	loadState(window.location.hash.slice(1));
@@ -14,6 +16,7 @@ export const syncDiagram = (): void => {
 
 export const initHandler = async (): Promise<void> => {
 	loadStateFromURL();
+	await initLoading('Loading Gist...', loadDataFromUrl().catch(console.error));
 	syncDiagram();
 	initURLSubscription();
 	await initAnalytics();

src/routes/__layout.svelte

@@ -2,6 +2,7 @@
 	import '../app.postcss';
 	import { base } from '$app/paths';
 	import { onMount } from 'svelte';
+	import { loadingStateStore } from '$lib/util/loading';
 	// This can be removed once https://github.com/sveltejs/kit/issues/1612 is fixed.
 	// Then move it into src and vite will bundle it automatically.
 	onMount(() => {
@@ -23,3 +24,44 @@
 <main class="h-screen">
 	<slot />
 </main>
+
+{#if $loadingStateStore.loading}
+	<div
+		class="w-screen h-screen z-50 absolute left-0 top-0 bg-gray-600 opacity-50 flex align-middle justify-center">
+		<div class="text-indigo-100 text-4xl font-bold my-auto">
+			<div class="loader mx-auto" />
+			<div>{$loadingStateStore.message}</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.loader {
+		border: 0.45em solid #f3f3f3;
+		border-radius: 50%;
+		border-top: 0.45em solid #6365f1;
+		width: 3em;
+		height: 3em;
+		-webkit-animation: spin 2s linear infinite; /* Safari */
+		animation: spin 2s linear infinite;
+	}
+
+	/* Safari */
+	@-webkit-keyframes spin {
+		0% {
+			-webkit-transform: rotate(0deg);
+		}
+		100% {
+			-webkit-transform: rotate(360deg);
+		}
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>

tsconfig.json

@@ -2,7 +2,7 @@
 	"compilerOptions": {
 		"moduleResolution": "node",
 		"module": "es2020",
-		"lib": ["es2020", "ESNext"],
+		"lib": ["es2020", "ESNext", "DOM.Iterable"],
 		"target": "es2019",
 		/**
 			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript