diff options
| author | Matt Strapp <matt@mattstrapp.net> | 2023-09-13 16:04:12 -0500 |
|---|---|---|
| committer | Matt Strapp <matt@mattstrapp.net> | 2023-09-14 13:26:23 -0500 |
| commit | 319a10b9a106e768ea2d3fb6d7134817911208ce (patch) | |
| tree | d4d71c83665ff583071f387309980b6cdb893d88 /app/src | |
| parent | Initial commit (diff) | |
| download | trinkets-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.ts | 8 | ||||
| -rw-r--r-- | app/src/app.html | 20 | ||||
| -rw-r--r-- | app/src/app.postcss | 2 | ||||
| -rw-r--r-- | app/src/hooks.server.ts | 35 | ||||
| -rw-r--r-- | app/src/routes/+layout.svelte | 27 | ||||
| -rw-r--r-- | app/src/routes/+layout.ts | 2 | ||||
| -rw-r--r-- | app/src/routes/+page.svelte | 6 |
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" /> |