aboutsummaryrefslogtreecommitdiffstats
path: root/app/src/routes/+layout.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'app/src/routes/+layout.svelte')
-rw-r--r--app/src/routes/+layout.svelte117
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>