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

Compare commits

base: DutchEllie:d5ae762517716fdf9c99848228a0cab151d4f0de
Branches Tags
DutchEllie:main
DutchEllie:webworker
..
compare: DutchEllie:0746091cd84f8b6e413613a8cce517b23f80e957
Branches Tags
DutchEllie:main
DutchEllie:webworker

No commits in common. "d5ae762517716fdf9c99848228a0cab151d4f0de" and "0746091cd84f8b6e413613a8cce517b23f80e957" have entirely different histories.
d5ae762517 ... 0746091cd8

17 changed files with 238 additions and 708 deletions
Show Stats Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@ -1,3 +0,0 @@
{
"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,11 +16,10 @@
"@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.19.0", "eslint": "^8.16.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",
@ -31,10 +30,7 @@
"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.4" "typescript": "^4.7.2"
}, },
"type": "module", "type": "module"
"dependencies": {
"svelte-language-server": "^0.14.29"
}
} }

4
postcss.config.cjs
View File

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

1
src/app.html
View File

@ -4,7 +4,6 @@
<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
View File

@ -1,28 +0,0 @@
<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 items-start"> <div class="lg:col-start-2 col-span-7 md:col-span-4 lg:col-span-3 flex flex-row">
<div class="h-full sm:aspect-square"> <div class="h-full">
<img <img
class="hidden sm:block h-full my-auto aspect-square" class="hidden sm:block h-full my-auto"
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 w-fit"> <div class="block sm:hidden ml-2 mt-4">
<Hamburger /> <Hamburger />
</div> </div>
</div> </div>
<div class="w-full sm:pl-5 sm:my-auto text-center sm:text-left sm:mx-0 pr-9 sm:pr-0"> <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 font-medium">Internetica Galactica 2</h1> <h1 class="text-2xl md:text-3xl h-min font-medium">Internetica Galactica 2</h1>
<p class="text-xs">Surviving the rewriting</p> <p class="h-min 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,7 +2,6 @@
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>
@ -16,12 +15,36 @@
<Sidebar /> <Sidebar />
</div> </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 ">
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
View File

@ -1,9 +0,0 @@
<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>

83
src/service-worker.ts
View File

@ -1,83 +0,0 @@
/* eslint-disable no-var */
import { build, files, version } from '$service-worker';
const worker = (self as unknown) as ServiceWorkerGlobalScope;
const FILES = `cache${version}`;
// build is an array of all files generated by the bundler
// files is an array of all files in the static dir
const to_cache = build.concat(files);
const staticAssets = new Set(to_cache);
worker.addEventListener("install", (event) => {
event.waitUntil(
caches
.open(FILES)
.then((cache) => 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 !== FILES) 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(`offline${version}`);
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 = url.host === self.location.host && staticAssets.has(url.pathname);
const skipBecauseUncached = event.request.cache === 'only-if-cached' && !isStaticAsset;
if (isHttp && !skipBecauseUncached) {
event.respondWith(
(async () => {
const cachedAsset = isStaticAsset && (await caches.match(event.request));
return cachedAsset || fetchAndCache(event.request);
})()
)
}
})

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

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

BIN
static/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

17
static/manifest.json
View File

@ -1,17 +0,0 @@
{
"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,12 +1,14 @@
import adapter from '@sveltejs/adapter-node'; import adapter from '@sveltejs/adapter-node';
import sveltePreprocess from 'svelte-preprocess'; import preprocess 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: [
sveltePreprocess({postcss: true}) preprocess({
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
} }
} }