DutchEllie
/
svelte-testing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
parent 0746091cd8 d5938df300
commit f2b79c1f9b
17 changed files with 734 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

728
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
package.json
View File

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

4
postcss.config.cjs
View File

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

1
src/app.html
View File

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

28
src/components/about/likes.svelte Normal file
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>

8
src/components/homepage/content.svelte
View File

@ -3,11 +3,11 @@
<h1 <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" 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" /> <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" /> <hr class="border-black" />
<br /> <br />
<div class="md:text-center lg:px-40"> <div class="md:text-center lg:px-40">

14
src/components/misc/header.svelte
View File

@ -4,20 +4,20 @@
</script> </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="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="lg:col-start-2 col-span-7 md:col-span-4 lg:col-span-3 flex flex-row items-start">
<div class="h-full"> <div class="h-full sm:aspect-square">
<img <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" src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/icon.png"
alt="Icon" alt="Icon"
/> />
<div class="block sm:hidden ml-2 mt-4"> <div class="block sm:hidden ml-2 mt-4 w-fit">
<Hamburger /> <Hamburger />
</div> </div>
</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"> <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 h-min font-medium">Internetica Galactica 2</h1> <h1 class="text-2xl md:text-3xl font-medium">Internetica Galactica 2</h1>
<p class="h-min text-xs">Surviving the rewriting</p> <p class="text-xs">Surviving the rewriting</p>
</div> </div>
</div> </div>
<div class="hidden md:col-start-5 col-start-1 col-end-7 sm:grid grid-cols-6"> <div class="hidden md:col-start-5 col-start-1 col-end-7 sm:grid grid-cols-6">

33
src/routes/about.svelte
View File

@ -2,6 +2,7 @@
import Maincontent from '../components/misc/maincontent.svelte'; import Maincontent from '../components/misc/maincontent.svelte';
import Content from '../components/about/content.svelte'; import Content from '../components/about/content.svelte';
import Sidebar from '../components/about/sidebar.svelte'; import Sidebar from '../components/about/sidebar.svelte';
import Likes from '../components/about/likes.svelte';
</script> </script>
<svelte:head> <svelte:head>
@ -15,36 +16,12 @@
<Sidebar /> <Sidebar />
</div> </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 /> <Content />
</div> </div>
<div class="px-2 col-span-7"> <div class="px-2 col-span-7">
<Likes />
<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>
</div> </div>
</Maincontent> </Maincontent>

9
src/routes/offline.svelte Normal file
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);
})()
)
}
})

0
src/stores/currentMusic.js → src/stores/currentMusic.ts
View File

0
src/stores/musicStore.js → src/stores/musicStore.ts
View File

BIN
static/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

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"
}

6
svelte.config.js
View File

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

2
tsconfig.json
View File

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