diff --git a/package.json b/package.json index a5ede03f..279eea1b 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "@analytics/google-analytics": "^0.5.3", "@macfja/svelte-persistent-store": "^1.1.1", "analytics": "^0.7.13", + "daisyui": "^1.11.1", "js-base64": "^3.6.1", "mermaid": "^8.11.4", "moment": "^2.29.1", diff --git a/src/app.postcss b/src/app.postcss index edf491bf..d213f1d3 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -1,7 +1,7 @@ @tailwind base; @tailwind components; @tailwind utilities; - +/* .nav-btn { @apply lg:p-2 py-3 px-0 block border-b-2 border-transparent hover:border-white; } @@ -15,4 +15,4 @@ .input { @apply flex-1 border-indigo-400 border-solid border-2 rounded; -} +} */ diff --git a/src/lib/components/card/card.svelte b/src/lib/components/card/card.svelte index 91e80024..a7974a51 100644 --- a/src/lib/components/card/card.svelte +++ b/src/lib/components/card/card.svelte @@ -9,17 +9,17 @@ $: isOpen = isCloseable ? isOpen : true; -
-
(isOpen = !isOpen)}> +
+
(isOpen = !isOpen)}>
-
+
{#if isOpen} -
+
{/if} diff --git a/src/lib/components/card/tabs.svelte b/src/lib/components/card/tabs.svelte index dc479b6f..7300395a 100644 --- a/src/lib/components/card/tabs.svelte +++ b/src/lib/components/card/tabs.svelte @@ -17,25 +17,20 @@
- (isOpen = !isOpen)}> + (isOpen = !isOpen)}> {#if isCloseable} {/if} {title} {#if isOpen && tabs} -
    +
      {#each tabs as tab} -
    • -
      toggleTabs(tab)}> - - {tab.title} -
      -
      • +
      toggleTabs(tab)}> + + {tab.title} +
      {/each}
    {/if} diff --git a/src/lib/components/history/history.svelte b/src/lib/components/history/history.svelte index 96350cfd..dcfa787a 100644 --- a/src/lib/components/history/history.svelte +++ b/src/lib/components/history/history.svelte @@ -90,13 +90,13 @@
    {#if $historyModeStore !== 'loader'} {/if} @@ -121,20 +121,18 @@
- + {#if type !== 'loader'} - + {/if}
{/each} {:else} -
+
No items in History
Click the Save button to save current state and restore it later.
Timeline will automatically be saved every minute. diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte index 19e1875e..c6b839b6 100644 --- a/src/lib/components/navbar.svelte +++ b/src/lib/components/navbar.svelte @@ -37,11 +37,12 @@ ]; -
-
- Mermaidv{version} Live Editor +
+
+ + Mermaidv{version} Live Editor +
-
+
diff --git a/src/lib/components/theme.svelte b/src/lib/components/theme.svelte new file mode 100644 index 00000000..2c8fa213 --- /dev/null +++ b/src/lib/components/theme.svelte @@ -0,0 +1,33 @@ + + + diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts index 643ea9d8..864d3183 100644 --- a/src/lib/util/state.ts +++ b/src/lib/util/state.ts @@ -2,7 +2,7 @@ import { writable, get, derived } from 'svelte/store'; import { toBase64, fromBase64 } from 'js-base64'; import { persist, localStorage } from '@macfja/svelte-persistent-store'; import type { State } from '$lib/types'; -import { saveStatistcs } from './stats'; +import { saveStatistics } from './stats'; export const defaultState: State = { code: `graph TD @@ -24,6 +24,7 @@ export const defaultState: State = { updateDiagram: true }; +export const themeStore = persist(writable(''), localStorage(), 'themeStore'); export const codeStore = persist(writable(defaultState), localStorage(), 'codeStore'); export const base64State = derived([codeStore], ([code], set) => { set(toBase64(JSON.stringify(code), true)); @@ -33,7 +34,7 @@ export const loadState = (data: string): void => { let state: State; try { const stateStr = fromBase64(data); - console.log(`Tring to load state: ${stateStr}`); + console.log(`Trying to load state: ${stateStr}`); state = JSON.parse(stateStr); const mermaidConfig = typeof state.mermaid === 'string' ? JSON.parse(state.mermaid) : state.mermaid; @@ -66,12 +67,12 @@ export const updateCodeStore = (newState: State): void => { let prompted = false; export const updateCode = (code: string, updateEditor: boolean, updateDiagram = false): void => { - saveStatistcs(code); + saveStatistics(code); const lines = (code.match(/\n/g) || '').length + 1; if (lines > 50 && !prompted && get(codeStore).autoSync) { const turnOff = confirm( - 'Long diagram deteced. Turn off Auto Sync? Click the sync logo to manually sync.' + 'Long diagram detected. Turn off Auto Sync? Click the sync logo to manually sync.' ); prompted = true; if (turnOff) { diff --git a/src/lib/util/stats.ts b/src/lib/util/stats.ts index 0a8ae69e..34915f58 100644 --- a/src/lib/util/stats.ts +++ b/src/lib/util/stats.ts @@ -34,10 +34,10 @@ const detectType = (text: string): string => { // manual debounce let timeout; -export const saveStatistcs = (graph: string): void => { +export const saveStatistics = (graph: string): void => { if (analytics) { clearTimeout(timeout); - // Only save statistcs after a 5 sec delay + // Only save statistics after a 5 sec delay timeout = setTimeout(function () { const graphType = detectType(graph); console.debug('ga:', 'send', 'event', 'render', graphType); diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 92cf8996..1bef1e14 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -3,6 +3,9 @@ import { base } from '$app/paths'; import { onMount } from 'svelte'; import { loadingStateStore } from '$lib/util/loading'; + import { themeStore } from '$lib/util/state'; + import Theme from '$lib/components/theme.svelte'; + // 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(() => { @@ -21,7 +24,8 @@ }); -
+
+
diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte index f194d8a8..7e63f127 100644 --- a/src/routes/edit.svelte +++ b/src/routes/edit.svelte @@ -120,7 +120,7 @@ }); -
+