aboutsummaryrefslogtreecommitdiffstats
path: root/app/src/lib/components
diff options
context:
space:
mode:
authorMatt Strapp <matt@mattstrapp.net>2023-10-20 14:08:54 -0500
committerMatt Strapp <matt@mattstrapp.net>2023-10-20 14:08:54 -0500
commit85b69ea89fbd08c3019f32b57a284337b6555cad (patch)
tree03674ba1400b42d0ce3bde4f6a058503d8a5647b /app/src/lib/components
parentBump svelte from 4.2.1 to 4.2.2 (diff)
downloadtrinkets-85b69ea89fbd08c3019f32b57a284337b6555cad.tar
trinkets-85b69ea89fbd08c3019f32b57a284337b6555cad.tar.gz
trinkets-85b69ea89fbd08c3019f32b57a284337b6555cad.tar.bz2
trinkets-85b69ea89fbd08c3019f32b57a284337b6555cad.tar.lz
trinkets-85b69ea89fbd08c3019f32b57a284337b6555cad.tar.xz
trinkets-85b69ea89fbd08c3019f32b57a284337b6555cad.tar.zst
trinkets-85b69ea89fbd08c3019f32b57a284337b6555cad.zip
uh
Signed-off-by: Matt Strapp <matt@mattstrapp.net>
Diffstat (limited to 'app/src/lib/components')
-rw-r--r--app/src/lib/components/Navigation.svelte70
-rw-r--r--app/src/lib/components/ReloadPrompt.svelte32
2 files changed, 102 insertions, 0 deletions
diff --git a/app/src/lib/components/Navigation.svelte b/app/src/lib/components/Navigation.svelte
new file mode 100644
index 0000000..2e5ba98
--- /dev/null
+++ b/app/src/lib/components/Navigation.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+ import { page } from '$app/stores'
+
+ import Icon from '@iconify/svelte'
+ import homeIcon from '@iconify/icons-carbon/home'
+ import logoGithub from '@iconify/icons-carbon/logo-github'
+ import menuIcon from '@iconify/icons-carbon/menu'
+ import pageBreak from '@iconify/icons-carbon/page-break'
+
+ import { AppRail, AppRailAnchor, getDrawerStore } from '@skeletonlabs/skeleton'
+
+ const drawerStore = getDrawerStore()
+
+ function drawerClose(): void {
+ drawerStore.close()
+ }
+
+ /**
+ * If the menu prop is true, then the close menu button will be rendered.
+ */
+ export let menu = false
+</script>
+
+<AppRail>
+ <svelte:fragment slot="lead">
+ {#if menu}
+ <AppRailAnchor on:click={drawerClose} title="Close Menu" value={0} href="javascript:;">
+ <svelte:fragment slot="lead">
+ <Icon icon={menuIcon} width="25" />
+ </svelte:fragment>
+ Close Menu
+ </AppRailAnchor>
+ {/if}
+ </svelte:fragment>
+ <AppRailAnchor
+ href="/"
+ selected={$page.url.pathname === '/'}
+ on:click={drawerClose}
+ title="Homepage"
+ >
+ <svelte:fragment slot="lead">
+ <Icon icon={homeIcon} width="35" />
+ </svelte:fragment>
+ Home!
+ </AppRailAnchor>
+ <AppRailAnchor
+ href="/truncate"
+ selected={$page.url.pathname === '/truncate'}
+ on:click={drawerClose}
+ title="Truncate Files"
+ >
+ <svelte:fragment slot="lead">
+ <Icon icon={pageBreak} width="35" />
+ </svelte:fragment>
+ Truncate!
+ </AppRailAnchor>
+ <svelte:fragment slot="trail">
+ <AppRailAnchor
+ href="https://github.com/rosstheross/rosstheross.github.io"
+ rel="noreferrer"
+ on:click={drawerClose}
+ title="Source Code"
+ >
+ <svelte:fragment slot="lead">
+ <Icon icon={logoGithub} width="35" />
+ </svelte:fragment>
+ Source!
+ </AppRailAnchor>
+ </svelte:fragment>
+</AppRail>
diff --git a/app/src/lib/components/ReloadPrompt.svelte b/app/src/lib/components/ReloadPrompt.svelte
new file mode 100644
index 0000000..e6effbb
--- /dev/null
+++ b/app/src/lib/components/ReloadPrompt.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+ import { getToastStore } from '@skeletonlabs/skeleton'
+ import { useRegisterSW } from 'virtual:pwa-register/svelte'
+
+ const toastStore = getToastStore()
+
+ const { updateServiceWorker } = useRegisterSW({
+ onRegisteredSW(r) {
+ console.log('SW Registered: ', r)
+ },
+ onNeedRefresh() {
+ toastStore.trigger({
+ message: 'A new version of the application is available.',
+ autohide: false,
+ action: {
+ label: 'Refresh',
+ response: updateServiceWorker,
+ },
+ })
+ },
+ onOfflineReady() {
+ toastStore.trigger({
+ background: 'variant-filled-success',
+ message: 'Now ready for offline use!',
+ timeout: 5000,
+ })
+ },
+ onRegisterError(err) {
+ console.error('SW Registration Error: ', err)
+ },
+ })
+</script>