Skip to content

Commit 1d892ba

Browse files
flmathflmath
committed
feat: add service worker for caching and offline support
- Implemented a service worker in `src/service-worker.ts` to cache static assets and handle fetch requests. - Added new favicon images: `favicon192.png` and `favicon512.png`. - Updated `global.css` with root styles and responsive design. - Created `manifest.json` for PWA support with app details and icons. - Added `robots.txt` to manage web crawler access. - Enhanced `svelte.config.js` to support mdsvex with custom layouts. - Updated `vite.config.ts` to include `.odt` files in assets.
1 parent d11cbba commit 1d892ba

110 files changed

Lines changed: 24926 additions & 48 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎note‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
<script lang="ts">
2+
import ImposibleCubeSvg from "$lib/svg/ImposibleCubeSvg.svelte";
3+
import NavLink from "../lib/NavLink.svelte";
4+
import LogoElement from "../lib/LogoElement.svelte";
5+
import Penrose3 from "$lib/png/Penrose3.svelte";
6+
import Reutersward from "$lib/svg/Reutersward.svelte";
7+
import { page } from "$app/state";
8+
import { onMount } from "svelte";
9+
10+
type NavElement = LogoElement | NavLink;
11+
let hover: NavElement[] = [];
12+
let currentPageId = page.route.id;
13+
14+
onMount(async () => (currentPageId = "/"));
15+
16+
$: if (currentPageId !== page.route.id) handleChange();
17+
18+
function handleChange() {
19+
hover.forEach((element) => {
20+
element.handleMouseOver();
21+
element.handleMouseOut();
22+
});
23+
}
24+
25+
function handleMouseOver(e: Event) {
26+
hover.forEach((element) => {
27+
element.handleMouseOver();
28+
});
29+
}
30+
31+
function handleMouseOut(e: Event) {
32+
hover.forEach((element) => {
33+
element.handleMouseOut();
34+
});
35+
}
36+
</script>
37+
38+
<svelte:head>
39+
<title>Mathias Green personal pages</title>
40+
<meta charset="UTF-8" />
41+
<meta
42+
name="description"
43+
content="My questions to life, the universe, and everything."
44+
/>
45+
<meta name="keywords" content="Erlang, Programming, Mathematics" />
46+
<meta name="author" content="Mathias Green" />
47+
</svelte:head>
48+
<!-- <div>{$page.routeId} {hover}</div> -->
49+
<body class="background">
50+
<nav
51+
class="navbar"
52+
on:mouseenter={handleMouseOver}
53+
on:mouseleave={handleMouseOut}
54+
>
55+
<ul class="navbar-nav">
56+
<LogoElement bind:this={hover[0]}>
57+
<span slot="text">Start</span>
58+
</LogoElement>
59+
60+
<NavLink href="/posts" bind:this={hover[1]}>
61+
<Penrose3 slot="picture" /> <span slot="text">Posts</span></NavLink
62+
>
63+
<NavLink href="/curriculum_vitae" bind:this={hover[2]}
64+
><ImposibleCubeSvg slot="picture" />
65+
<span slot="text">CV</span></NavLink
66+
>
67+
68+
<NavLink class="last" href="/exit_page" bind:this={hover[3]}>
69+
<Reutersward slot="picture" /><span slot="text">Out</span></NavLink
70+
>
71+
</ul>
72+
</nav>
73+
74+
<main>
75+
<slot />
76+
</main>
77+
</body>
78+
79+
<style>
80+
body {
81+
margin: 0;
82+
height: 100%;
83+
}
84+
.background {
85+
color: black;
86+
background-color: var(--bg-primary);
87+
88+
/*based on https://github.com/Yuvrajchandra/CSS-Background-Patterns/tree/main/1.%20The%20Black%20Hexagons with MIT license*/
89+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='162' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd' %3E%3Cg id='hexagons' fill='%239C92AC' fill-opacity='0.08' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E ");
90+
background-attachment: fixed;
91+
92+
background-position: center;
93+
}
94+
95+
body::-webkit-scrollbar {
96+
width: none;
97+
display: none;
98+
}
99+
body::-webkit-scrollbar-track {
100+
background: #ffffff;
101+
display: none;
102+
}
103+
body::-webkit-scrollbar-thumb {
104+
background: #ffffff;
105+
display: none;
106+
}
107+
.navbar {
108+
position: fixed;
109+
z-index: 100;
110+
background-color: var(--bg-primary);
111+
background-image: url("$lib/assets/bg.webp");
112+
filter: opacity(0.8) brightness(1.1);
113+
/*overflow: scroll;*/
114+
}
115+
.navbar-nav {
116+
list-style: none;
117+
padding: 0;
118+
margin: 0;
119+
display: flex;
120+
filter: brightness(0.9);
121+
}
122+
/* Small screens */
123+
@media only screen and (max-width: 900px) {
124+
body {
125+
padding-bottom: 1rem;
126+
}
127+
main {
128+
padding-bottom: 8rem;
129+
margin-bottom: 8rem;
130+
height: calc(100% - 8rem);
131+
max-height: calc(100% - 8rem);
132+
width: 100%;
133+
max-width: 100%;
134+
}
135+
136+
137+
.navbar {
138+
padding-top: 1rem;
139+
bottom: 0;
140+
width: 100%;
141+
height: 6rem;
142+
transition: height var(--transition-speed) ease;
143+
filter: opacity(1);
144+
background-size: cover;
145+
}
146+
.navbar:hover {
147+
/* width: 100%;
148+
height: 10rem; */
149+
filter: opacity(1) brightness(1.1);
150+
}
151+
152+
.navbar-nav {
153+
flex-direction: row;
154+
margin-left: 1rem;
155+
}
156+
.navbar-nav :global(.last) {
157+
scale: 0.8;
158+
transform: translateY(-1.5rem);
159+
margin-right: 1rem;
160+
margin-left: auto;
161+
}
162+
}
163+
/* Large screens */
164+
@media only screen and (min-width: 900px) {
165+
body {
166+
padding-bottom: 8rem;
167+
}
168+
main {
169+
width: calc(100% - 8rem);
170+
max-width: calc(100% - 8rem);
171+
172+
height: 100%;
173+
174+
margin-left: 8rem;
175+
}
176+
177+
.navbar-nav {
178+
flex-direction: column;
179+
align-items: left;
180+
height: 100vh;
181+
}
182+
183+
.navbar-nav :global(.last) {
184+
margin-top: auto;
185+
margin-bottom: 1rem;
186+
}
187+
188+
.navbar {
189+
top: 0;
190+
width: 8rem;
191+
transition: width var(--transition-speed) ease;
192+
background-size: 18rem auto;
193+
}
194+
195+
.navbar:hover {
196+
width: 18rem;
197+
filter: opacity(1) brightness(1.1);
198+
}
199+
}
200+
</style>

‎note copy‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
2+
import { mdsvex } from 'mdsvex';
3+
import adapter from '@sveltejs/adapter-static';
4+
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
5+
import remarkUnwrapImages from 'remark-unwrap-images';
6+
import remarkToc from 'remark-toc';
7+
import rehypeSlug from 'rehype-slug';
8+
9+
/** @type {import('mdsvex').MdsvexOptions} */
10+
const mdsvexOptions = {
11+
// Options for mdsvex can be specified here
12+
// For example, you can enable syntax highlighting or specify extensions
13+
extensions: ['.svx', '.md'],
14+
layout: {
15+
// Resolve paths from the project root (__dirname is the directory of svelte.config.js)
16+
blog: '$lib/assets/mdlayouts/erldbg.svelte',
17+
article: '$lib/assets/mdlayouts/article.svelte',
18+
_: '$lib/assets/mdlayouts/fallback.svelte'
19+
},
20+
// remarkPlugins: [remarkUnwrapImages, remarkToc],
21+
// rehypePlugins: [rehypeSlug]
22+
};
23+
24+
// svelte.config.js
25+
/** @type {import('@sveltejs/kit').Config} */
26+
const config = {
27+
28+
preprocess: [mdsvex(mdsvexOptions), vitePreprocess()],
29+
extensions: ['.svelte', '.svx', '.md'],
30+
kit: {
31+
// adapter-auto will be replaced with adapter-static
32+
appDir: 'internal', // directory to output the built app
33+
adapter: adapter({
34+
// default options are fine for most GitHub Pages setups
35+
pages: 'build', // directory to output the static files
36+
assets: 'build', // directory to output the static files
37+
fallback: 'index.html', // can be '200.html' or '404.html' if using a SPA with client-side routing
38+
precompress: false,
39+
strict: true
40+
}),
41+
paths: {
42+
// IMPORTANT: If you are deploying to a subdirectory like <username>.github.io/<repo-name>
43+
// you need to specify the base path. Otherwise, if deploying to <username>.github.io,
44+
// you can omit this or set it to ''.
45+
//base: process.env.NODE_ENV === 'production' ? 'po-name' : '',
46+
base: ''
47+
// dev ? '' : '/flmath.github.io',
48+
},
49+
prerender: {
50+
// You can specify an array of routes to prerender.
51+
entries: ['*','/curriculum_vitae', '/posts/ErlangDBG']
52+
}
53+
}
54+
};
55+
56+
export default config;

0 commit comments

Comments
 (0)