1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<script lang="ts">
import { useRegisterSW } from 'virtual:pwa-register/svelte';
import { pwaInfo } from 'virtual:pwa-info';
import { onMount } from 'svelte';
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 });
initializeStores();
const toastStore = getToastStore();
onMount(async () => {
if (pwaInfo) {
useRegisterSW({
immediate: true,
onRegistered(r) {
console.log(`SW Registered: ${r?.active?.scriptURL}`);
},
onRegisterError(error: Error) {
console.error('SW registration error', error);
},
onOfflineReady() {
toastStore.trigger({
background: 'variant-filled-success',
hideDismiss: true,
message: 'Now ready for offline use!',
timeout: 5000
});
}
});
}
});
$: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : '';
</script>
<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">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>
|
