Favicon, fontawesome

2021-05-17 08:57:41 +05:30
parent eb5d17af02
commit 21ec09d039
11 changed files with 22 additions and 10 deletions
@@ -2,8 +2,22 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Online FlowChart &amp; Diagrams Editor - Mermaid Live Editor</title>
+		<meta
+			name="og:image"
+			content="https://github.com/mermaid-js/mermaid/raw/develop/img/header.png"
+		/>
+		<link rel="canonical" href="https://mermaid-js.github.io/mermaid-live-editor/" />
+		<meta
+			name="description"
+			content="Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript."
+		/>
+		<link rel="icon" type="image/png" href="favicon.png" />
+		<link
+			rel="stylesheet"
+			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
+		/>
 		<script
 			src="https://cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js"
 			integrity="sha256-aQCGsx3/OLAXwNyOUrAedielIQAjIrMFkcWdXMlIkGc="
@@ -27,7 +27,6 @@ export const loadState = (data: string): void => {
 	let state: State;
 	try {
 		const stateStr = fromBase64(data);
-		console.log('state from url', stateStr);
 		state = JSON.parse(stateStr);
 	} catch (e) {
 		console.error('Init error', e);
@@ -40,7 +40,6 @@
 		const image = new Image();
 		image.onload = exporter(canvas, context, image);

-		console.log('SVG', getBase64SVG());
 		image.src = `data:image/svg+xml;base64,${getBase64SVG()}`;
 		event.stopPropagation();
 		event.preventDefault();
@@ -5,11 +5,7 @@
 	export let isOpen: boolean = true;
 	export let tabs: Tab[] = [];
 	export let title: string;
-	$: {
-		console.log('a', isOpen);
-		isOpen = isCloseable ? isOpen : true;
-		console.log(isOpen);
-	}
+	$: isOpen = isCloseable ? isOpen : true;
 </script>

 <div class={`bg-white rounded overflow-hidden shadow m-2 flex-grow flex flex-col `}>
@@ -28,7 +28,6 @@
 	$: editor?.setValue(text);
 	$: {
 		Monaco?.editor.setModelMarkers(editor.getModel(), 'test', errorMarkers);
-		console.log(errorMarkers);
 	}

 	const dispatch = createEventDispatcher<EditorEvents>();
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { version } from 'mermaid/package.json';
 	interface Link {
 		title: string;
 		href: string;
@@ -29,7 +30,7 @@

 <header class="p-2 bg-indigo-400 text-white font-bold flex flex-wrap items-center">
 	<div class="flex-1 flex justify-between items-center">
-		<a href="/"> Mermaid Live Editor </a>
+		<a href="/">Mermaid<span class="text-xs font-thin">(v{version})</span> Live Editor</a>
 	</div>

 	<label for="menu-toggle" class="pointer-cursor lg:hidden block"
@@ -12,9 +12,11 @@
 	import { onMount } from 'svelte';
 	import type monaco from 'monaco-editor';
 	import type { Mermaid } from 'mermaid';
+	import { version } from 'mermaid/package.json';
 	import { goto } from '$app/navigation';

 	const mermaid: Mermaid = (window.mermaid as unknown) as Mermaid;
+
 	let selectedMode = 'code';
 	const languageMap = {
 		code: 'mermaid',
@@ -97,6 +99,7 @@
 <svelte:head>
 	<title>Edit</title>
 </svelte:head>
+
 <div class="h-full flex flex-col overflow-hidden bg-gray-100">
 	<Navbar />
 	<div class="flex-1 flex overflow-hidden">
@@ -135,6 +138,7 @@
 					<View />
 				</div>
 			</Card>
+			<div class="self-end mx-2 -mt-2">Powered by Mermaid v{version}</div>
 		</div>
 	</div>
 </div>