Merge branch 'develop' into revert-585-revert-478-develop

src/hooks.ts

@@ -0,0 +1,9 @@
+import type { Handle } from '@sveltejs/kit/types/hooks';
+
+export const handle: Handle = async ({ request, resolve }) => {
+	const response = await resolve(request, {
+		ssr: false
+	});
+
+	return response;
+};

src/lib/components/actions.svelte

@@ -2,10 +2,11 @@
 	import { browser } from '$app/env';
 
 	import Card from '$lib/components/card/card.svelte';
-	import { rendererUrl } from '$lib/util/env';
+	import { rendererUrl, krokiRendererUrl } from '$lib/util/env';
 	import { base64State, codeStore } from '$lib/util/state';
-	import { toBase64 } from 'js-base64';
+	import { toBase64, btoa as jsbtoa } from 'js-base64';
 	import moment from 'moment';
+	import pako from 'pako';
 
 	type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void;
 
@@ -127,6 +128,31 @@
 		window.location.href = `${window.location.pathname}?gist=${gistURL}`;
 	};
 
+	const textEncode = (str) => {
+		if (window.TextEncoder) {
+			return new TextEncoder('utf-8').encode(str);
+		}
+		let utf8 = unescape(encodeURIComponent(str));
+		let result = new Uint8Array(utf8.length);
+		for (let i = 0; i < utf8.length; i++) {
+			result[i] = utf8.charCodeAt(i);
+		}
+		return result;
+	};
+
+	const onKrokiClick = () => {
+		const krokiCode = getKrokiCode($codeStore.code);
+		const krokiUrl = `${krokiRendererUrl}/mermaid/svg/${krokiCode}`;
+		return window.open(krokiUrl, '_blank');
+	};
+
+	const getKrokiCode = (source) => {
+		const data = textEncode(source);
+		const compressed = pako.deflate(data, { level: 9, to: 'string' });
+		let result = jsbtoa(compressed).replace(/\+/g, '-').replace(/\//g, '_');
+		return result;
+	};
+
 	let iUrl: string;
 	let svgUrl: string;
 	let mdCode: string;
@@ -168,6 +194,9 @@
 		<button class="action-btn flex-auto">
 			<a target="_blank" href={svgUrl}><i class="fas fa-external-link-alt mr-2" /> SVG</a>
 		</button>
+		<button class="action-btn flex-auto" on:click={onKrokiClick}>
+			<i class="fas fa-external-link-alt mr-2" /> Kroki
+		</button>
 
 		<div class="flex gap-2 items-center">
 			PNG size

src/lib/util/env.ts

@@ -1 +1,2 @@
 export const rendererUrl = import.meta.env.MERMAID_RENDERER_URL ?? 'https://mermaid.ink';
+export const krokiRendererUrl = import.meta.env.MERMAID_KROKI_RENDERER_URL ?? 'https://kroki.io';