Merge pull request 'webworker' (#1) from webworker into main
continuous-integration/drone/push Build is passing Details

Reviewed-on: #1
This commit is contained in:
Quenten 2022-07-04 14:49:57 +00:00
commit f2b79c1f9b
17 changed files with 734 additions and 238 deletions

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"typescript.tsdk": "node_modules/typescript/lib"
}

728
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -16,10 +16,11 @@
"@sveltejs/adapter-auto": "next",
"@sveltejs/adapter-node": "^1.0.0-next.78",
"@sveltejs/kit": "next",
"@types/serviceworker": "^0.0.48",
"@typescript-eslint/eslint-plugin": "^5.27.0",
"@typescript-eslint/parser": "^5.27.0",
"autoprefixer": "^10.4.7",
"eslint": "^8.16.0",
"eslint": "^8.19.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^4.0.0",
"postcss": "^8.4.14",
@ -30,7 +31,10 @@
"svelte-preprocess": "^4.10.7",
"tailwindcss": "^3.1.4",
"tslib": "^2.3.1",
"typescript": "^4.7.2"
"typescript": "^4.7.4"
},
"type": "module"
"type": "module",
"dependencies": {
"svelte-language-server": "^0.14.29"
}
}

View File

@ -3,4 +3,8 @@ module.exports = {
tailwindcss: {},
autoprefixer: {},
},
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}

View File

@ -4,6 +4,7 @@
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" href="/manifest.json">
%sveltekit.head%
</head>
<body>

View File

@ -0,0 +1,28 @@
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 bg-red-50 rounded-xl p-3 gap-y-5"
>
<ul class="list-disc ml-4">
<p class="font-bold">Music</p>
<li>Hatsune Miku</li>
<li>PinocchioP</li>
<li>Mothy/Akuno-p</li>
</ul>
<ul class="list-disc ml-4">
<p class="font-bold">TV</p>
<li>Game of Thrones</li>
<li>Avatar the Last Airbender</li>
</ul>
<ul class="list-disc ml-4">
<p class="font-bold">VTubers</p>
<li>Momosuzu Nene</li>
<li>Amane Kanata</li>
<li>Petra Gurin</li>
<li>Ninomae Ina'nis</li>
<li>Kson</li>
</ul>
<ul class="list-disc ml-4">
<p class="font-bold">Food</p>
<li>Spaghetti</li>
<li>Sushi</li>
</ul>
</div>

View File

@ -3,11 +3,11 @@
<h1
class="font-roboto_slab text-center text-2xl lg:text-6xl xl:text-7xl w-auto md:w-max mt-10 lg:mt-32 mx-auto font-bold h1-shadow"
>
Welcome to my website
</h1>
>Welcome to my website</h1>
<!-->
<br class="hidden lg:block" />
<p class="font-roboto_slab text-center lg:text-2xl text-md">The modern web meets 2000</p>
</!-->
<p class="font-roboto_slab text-center lg:text-2xl text-md lg:mt-5">The modern web meets 2000</p>
<hr class="border-black" />
<br />
<div class="md:text-center lg:px-40">

View File

@ -4,20 +4,20 @@
</script>
<div class="grid grid-cols-7 grid-rows-1 sm:grid-rows-1 gap-y-2 mt-2 sm:mt-4 sm:pl-4 align-middle h-24 md:h-16">
<div class="lg:col-start-2 col-span-7 md:col-span-4 lg:col-span-3 flex flex-row">
<div class="h-full">
<div class="lg:col-start-2 col-span-7 md:col-span-4 lg:col-span-3 flex flex-row items-start">
<div class="h-full sm:aspect-square">
<img
class="hidden sm:block h-full my-auto"
class="hidden sm:block h-full my-auto aspect-square"
src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/icon.png"
alt="Icon"
/>
<div class="block sm:hidden ml-2 mt-4">
<div class="block sm:hidden ml-2 mt-4 w-fit">
<Hamburger />
</div>
</div>
<div class="w-full sm:w-auto sm:pl-5 sm:my-auto text-center mx-auto sm:mx-0 pr-9 sm:pr-0">
<h1 class="text-2xl md:text-3xl h-min font-medium">Internetica Galactica 2</h1>
<p class="h-min text-xs">Surviving the rewriting</p>
<div class="w-full sm:pl-5 sm:my-auto text-center sm:text-left sm:mx-0 pr-9 sm:pr-0">
<h1 class="text-2xl md:text-3xl font-medium">Internetica Galactica 2</h1>
<p class="text-xs">Surviving the rewriting</p>
</div>
</div>
<div class="hidden md:col-start-5 col-start-1 col-end-7 sm:grid grid-cols-6">

View File

@ -2,6 +2,7 @@
import Maincontent from '../components/misc/maincontent.svelte';
import Content from '../components/about/content.svelte';
import Sidebar from '../components/about/sidebar.svelte';
import Likes from '../components/about/likes.svelte';
</script>
<svelte:head>
@ -15,36 +16,12 @@
<Sidebar />
</div>
<div class="px-5 sm:px-0 sm:pr-5 lg:pr-0 sm:mt-10 col-span-7 sm:col-span-2 md:col-span-4 lg:col-span-3 ">
<div
class="px-5 sm:px-0 sm:pr-5 lg:pr-0 sm:mt-10 col-span-7 sm:col-span-2 md:col-span-4 lg:col-span-3 "
>
<Content />
</div>
<div class="px-2 col-span-7">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 bg-red-50 rounded-xl p-3 gap-y-5">
<ul class="list-disc ml-4">
<p class="font-bold">Music</p>
<li>Hatsune Miku</li>
<li>Amane Kanata</li>
<li>Mothy/Akuno-p</li>
</ul>
<ul class="list-disc ml-4">
<p class="font-bold">TV</p>
<li>Game of Thrones</li>
<li>Avatar the Last Airbender</li>
</ul>
<ul class="list-disc ml-4">
<p class="font-bold">VTubers</p>
<li>Momosuzu Nene</li>
<li>Amane Kanata</li>
<li>Petra Gurin</li>
<li>Ninomae Ina'nis</li>
</ul>
<ul class="list-disc ml-4">
<p class="font-bold">Food</p>
<li>Spaghetti</li>
<li>Steak!</li>
</ul>
</div>
<Likes />
</div>
</Maincontent>

View File

@ -0,0 +1,9 @@
<script>
export const prerender = true;
</script>
<div class="text-center mt-10">
<h1 class="text-7xl">This page is not available offline</h1>
<br />
<a class="underline hover:underline-offset-2" href="/">Click here to go back</a>
</div>

109
src/service-worker.ts Normal file
View File

@ -0,0 +1,109 @@
/* eslint-disable no-var */
import { build, files, version } from '$service-worker';
// Code mostly comes from: https://dev.to/100lvlmaster/create-a-pwa-with-sveltekit-svelte-a36
// With some modifications done by someone in the comments
const worker = (self as unknown) as ServiceWorkerGlobalScope;
const STATIC_CACHE_NAME = `cache${version}`
const APP_CACHE_NAME = `cache${version}`;
// Hardcoded bunch of routes to always preemptively cache
const routes = ["/", "/about"];
// Hardcoded list of other assets to always preemptively cache
const custom_assets = [
"https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500&family=Roboto+Slab&display=swap"
];
// Adds the domain to the file path, making it a full name
const addDomain = (assets: string[]) =>
assets.map((f) => self.location.origin + f);
// build is an array of all files generated by the bundler
// files is an array of all files in the static dir
const ourAssets = addDomain([
...files,
...build,
...routes
]);
const to_cache = [...ourAssets, ...custom_assets]
const staticAssets = new Set(to_cache);
worker.addEventListener("install", (event) => {
event.waitUntil(
caches
.open(STATIC_CACHE_NAME)
.then((cache) => {
return cache.addAll(to_cache)
})
.then(() => {
worker.skipWaiting();
})
);
});
worker.addEventListener("activate", (event) => {
event.waitUntil(
caches.keys()
.then(async (keys) => {
// Delete old caches
for (const key of keys) {
if (key !== STATIC_CACHE_NAME && key !== APP_CACHE_NAME) await caches.delete(key);
}
console.log("old caches deleted")
worker.clients.claim();
})
.then(() => console.log("Activated"))
)
})
// Fetch the asset from the network and store it in the cache
// Falls back to the cache if the user is offline
async function fetchAndCache(request: Request) {
const cache = await caches.open(APP_CACHE_NAME);
try {
const response = await fetch(request);
cache.put(request, response.clone());
return response;
} catch (err) { // if the user is offline, the request will fail
const response = await cache.match(request);
if (response) return response;
// if not in cache, throw error anyway
throw err;
}
}
worker.addEventListener("fetch", (event) => {
if (event.request.method !== "GET") return;
//console.log("fetch event intercepted")
// Firefox has not yet fixed this, so it needs to be excluded from this caching behavior
// https://web.dev/sw-range-requests/
// https://wpt.fyi/results/fetch/range/sw.https.window.html?label=master&label=experimental&aligned
if (navigator.userAgent.includes("Firefox/") && event.request.headers.has("range")) return;
const url = new URL(event.request.url);
// Don't try to cache protocols other than http/https
const isHttp = url.protocol.startsWith("http");
const isStaticAsset = staticAssets.has(url.href);
const skipBecauseUncached = event.request.cache === 'only-if-cached' && !isStaticAsset;
if (isHttp && !skipBecauseUncached) {
event.respondWith(
(async () => {
// always serve static files and bundler-generated assets from cache.
// if your application has other URLs with data that will never change,
// set this variable to true for them, and they will only be fetched once.
const cachedAsset = isStaticAsset && (await caches.match(event.request));
return cachedAsset || fetchAndCache(event.request);
})()
)
}
})

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 28 KiB

17
static/manifest.json Normal file
View File

@ -0,0 +1,17 @@
{
"short_name": "Internetica Galactica 2",
"name": "Internetica Galactica 2",
"start_url": "/",
"icons": [
{
"src": "/favicon.png",
"type": "image/png",
"sizes": "512x512"
}
],
"background_color": "#FFAFCC",
"display": "standalone",
"scope": "/",
"theme_color": "#FFAFCC",
"description": "The modern web meets 2000"
}

View File

@ -1,14 +1,12 @@
import adapter from '@sveltejs/adapter-node';
import preprocess from 'svelte-preprocess';
import sveltePreprocess from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: [
preprocess({
postcss: true,
}),
sveltePreprocess({postcss: true})
],
kit: {
adapter: adapter(),

View File

@ -8,6 +8,6 @@
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true
"strict": true,
}
}