diff options
Diffstat (limited to '')
| -rw-r--r-- | app/src/routes/+layout.svelte | 117 |
1 files changed, 58 insertions, 59 deletions
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte index 8a70575..a0dd68a 100644 --- a/app/src/routes/+layout.svelte +++ b/app/src/routes/+layout.svelte @@ -1,76 +1,75 @@ <script lang="ts"> - import { registerSW } from 'virtual:pwa-register' - import { pwaInfo } from 'virtual:pwa-info'; - import { onMount } from 'svelte' + import { useRegisterSW } from 'virtual:pwa-register/svelte'; + import { pwaInfo } from 'virtual:pwa-info'; + import { onMount } from 'svelte'; - import '../app.postcss'; - import { AppShell, AppBar } from '@skeletonlabs/skeleton'; + import '../app.postcss'; + import { AppShell, AppBar, getToastStore, initializeStores, Toast } from '@skeletonlabs/skeleton'; + import Navigation from '$lib/svelte/Navigation.svelte'; - // Floating UI for Popups - // import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom'; - // import { storePopup } from '@skeletonlabs/skeleton'; - // storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow }); + // Floating UI for Popups + // import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom'; + // import { storePopup } from '@skeletonlabs/skeleton'; + // storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow }); - onMount(async () => { + initializeStores(); + + const toastStore = getToastStore(); + + onMount(async () => { if (pwaInfo) { - registerSW({ + useRegisterSW({ immediate: true, - onRegistered(r: ServiceWorkerRegistration) { - console.log(`SW Registered: ${r}`) + onRegistered(r) { + console.log(`SW Registered: ${r?.active?.scriptURL}`); }, onRegisterError(error: Error) { - console.log('SW registration error', error) + console.error('SW registration error', error); }, - onOfflineReady() { - console.log('SW Offline Ready') - } - }) + onOfflineReady() { + toastStore.trigger({ + background: 'variant-filled-success', + hideDismiss: true, + message: 'Now ready for offline use!', + timeout: 5000 + }); + } + }); } - }) - - $: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : '' + }); + + $: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : ''; </script> -<svelte:head> - {@html webManifestLink} +<svelte:head> + {@html webManifestLink} </svelte:head> +<Toast position="br" /> + <!-- App Shell --> <AppShell> - <svelte:fragment slot="header"> - <!-- App Bar --> - <AppBar> - <svelte:fragment slot="lead"> - <strong class="text-xl uppercase">Skeleton</strong> - </svelte:fragment> - <svelte:fragment slot="trail"> - <a - class="btn btn-sm variant-ghost-surface" - href="https://discord.gg/EXqV7W8MtY" - target="_blank" - rel="noreferrer" - > - Discord - </a> - <a - class="btn btn-sm variant-ghost-surface" - href="https://twitter.com/SkeletonUI" - target="_blank" - rel="noreferrer" - > - Twitter - </a> - <a - class="btn btn-sm variant-ghost-surface" - href="https://github.com/skeletonlabs/skeleton" - target="_blank" - rel="noreferrer" - > - GitHub - </a> - </svelte:fragment> - </AppBar> - </svelte:fragment> - <!-- Page Route Content --> - <slot /> + <svelte:fragment slot="header"> + <!-- App Bar --> + <AppBar> + <svelte:fragment slot="lead"> + <strong class="text-xl uppercase">A!</strong> + </svelte:fragment> + <svelte:fragment slot="trail"> + <a + class="btn btn-sm variant-ghost-surface" + href="https://github.com/rosstheross/rosstheross.github.io" + target="_blank" + rel="noreferrer" + > + Frontend Source + </a> + </svelte:fragment> + </AppBar> + </svelte:fragment> + <svelte:fragment slot="sidebarLeft"> + <Navigation /> + </svelte:fragment> + <!-- Page Route Content --> + <slot /> </AppShell> |