aboutsummaryrefslogtreecommitdiffstats
path: root/app/src
diff options
context:
space:
mode:
authorMatt Strapp <matt@mattstrapp.net>2023-09-13 16:04:12 -0500
committerMatt Strapp <matt@mattstrapp.net>2023-09-14 13:26:23 -0500
commit319a10b9a106e768ea2d3fb6d7134817911208ce (patch)
treed4d71c83665ff583071f387309980b6cdb893d88 /app/src
parentInitial commit (diff)
downloadtrinkets-319a10b9a106e768ea2d3fb6d7134817911208ce.tar
trinkets-319a10b9a106e768ea2d3fb6d7134817911208ce.tar.gz
trinkets-319a10b9a106e768ea2d3fb6d7134817911208ce.tar.bz2
trinkets-319a10b9a106e768ea2d3fb6d7134817911208ce.tar.lz
trinkets-319a10b9a106e768ea2d3fb6d7134817911208ce.tar.xz
trinkets-319a10b9a106e768ea2d3fb6d7134817911208ce.tar.zst
trinkets-319a10b9a106e768ea2d3fb6d7134817911208ce.zip
Add basic PWA support
TODO: draw the rest of the owl
Diffstat (limited to '')
-rw-r--r--app/src/app.d.ts8
-rw-r--r--app/src/app.html20
-rw-r--r--app/src/app.postcss2
-rw-r--r--app/src/hooks.server.ts35
-rw-r--r--app/src/routes/+layout.svelte27
-rw-r--r--app/src/routes/+layout.ts2
-rw-r--r--app/src/routes/+page.svelte6
7 files changed, 83 insertions, 17 deletions
diff --git a/app/src/app.d.ts b/app/src/app.d.ts
index 8f4d638..3e4ed20 100644
--- a/app/src/app.d.ts
+++ b/app/src/app.d.ts
@@ -2,8 +2,8 @@
// for information about these interfaces
// and what to do when importing types
declare namespace App {
- // interface Locals {}
- // interface PageData {}
- // interface Error {}
- // interface Platform {}
+ // interface Locals {}
+ // interface PageData {}
+ // interface Error {}
+ // interface Platform {}
}
diff --git a/app/src/app.html b/app/src/app.html
index 0297ac7..4480bed 100644
--- a/app/src/app.html
+++ b/app/src/app.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en" class="dark">
- <head>
- <meta charset="utf-8" />
- <link rel="icon" href="%sveltekit.assets%/favicon.png" />
- <meta name="viewport" content="width=device-width" />
- %sveltekit.head%
- </head>
- <body data-sveltekit-preload-data="hover" data-theme="crimson">
- <div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
- </body>
+ <head>
+ <meta charset="utf-8" />
+ <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+ <meta name="viewport" content="width=device-width" />
+ %sveltekit.head%
+ </head>
+ <body data-sveltekit-preload-data="hover" data-theme="crimson">
+ <div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
+ </body>
</html>
diff --git a/app/src/app.postcss b/app/src/app.postcss
index 8ef7d35..f3fef83 100644
--- a/app/src/app.postcss
+++ b/app/src/app.postcss
@@ -5,5 +5,5 @@
html,
body {
- @apply h-full overflow-hidden;
+ @apply h-full overflow-hidden;
}
diff --git a/app/src/hooks.server.ts b/app/src/hooks.server.ts
new file mode 100644
index 0000000..163f640
--- /dev/null
+++ b/app/src/hooks.server.ts
@@ -0,0 +1,35 @@
+import { minify } from 'html-minifier-terser';
+import { building } from '$app/environment';
+
+const minification_options = {
+ collapseBooleanAttributes: true,
+ collapseWhitespace: true,
+ conservativeCollapse: true,
+ decodeEntities: true,
+ html5: true,
+ ignoreCustomComments: [/^#/],
+ minifyCSS: true,
+ minifyJS: true,
+ removeAttributeQuotes: true,
+ removeComments: false, // some hydration code needs comments, so leave them in
+ removeOptionalTags: true,
+ removeRedundantAttributes: true,
+ removeScriptTypeAttributes: true,
+ removeStyleLinkTypeAttributes: true,
+ sortAttributes: true,
+ sortClassName: true
+};
+
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+ let page = '';
+
+ return resolve(event, {
+ transformPageChunk: ({ html, done }) => {
+ page += html;
+ if (done) {
+ return building ? minify(page, minification_options) : page;
+ }
+ }
+ });
+} \ No newline at end of file
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index 3d5c07f..93a41b1 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -1,4 +1,8 @@
<script lang="ts">
+ import { registerSW } from 'virtual:pwa-register'
+ import { pwaInfo } from 'virtual:pwa-info';
+ import { onMount } from 'svelte'
+
import '../app.postcss';
import { AppShell, AppBar } from '@skeletonlabs/skeleton';
@@ -6,8 +10,31 @@
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 () => {
+ if (pwaInfo) {
+ registerSW({
+ immediate: true,
+ onRegistered(r) {
+ console.log(`SW Registered: ${r}`)
+ },
+ onRegisterError(error) {
+ console.log('SW registration error', error)
+ },
+ onOfflineReady() {
+ console.log('SW Offline Ready')
+ }
+ })
+ }
+ })
+
+ $: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : ''
</script>
+<svelte:head>
+ {@html webManifestLink}
+</svelte:head>
+
<!-- App Shell -->
<AppShell>
<svelte:fragment slot="header">
diff --git a/app/src/routes/+layout.ts b/app/src/routes/+layout.ts
index c8cacf0..189f71e 100644
--- a/app/src/routes/+layout.ts
+++ b/app/src/routes/+layout.ts
@@ -1 +1 @@
-export const prerender = true; \ No newline at end of file
+export const prerender = true;
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index 67c0353..7cd11ed 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -1,8 +1,12 @@
+<svelte:head>
+ <title>Coming Soon(TM)</title>
+</svelte:head>
+
<!-- YOU CAN DELETE EVERYTHING IN THIS PAGE -->
<div class="container h-full mx-auto flex justify-center items-center">
<div class="space-y-10 text-center flex flex-col items-center">
- <h2 class="h2">Welcome to Skeleton.</h2>
+ <h2 class="h2">Welcome to a placeholder.</h2>
<!-- Animated Logo -->
<figure>
<section class="img-bg" />