fix: Graphics of the cover

README.md

@@ -7,10 +7,10 @@ A blog framework
 To create the production version,
 
 ```bash
-npm run build
+pnpm run build
 ```
 
-You can preview the production build with `npm run preview`.
+You can preview the production build with `pnpm run dev --open`.
 
 ### Content
 
@@ -35,24 +35,23 @@ image.
 
 Install [pre-commit](https://pre-commit.com/).
 
-Install dependencies with `npm install` (or `pnpm install` or `yarn`). Then
+Install dependencies with `pnpm install`. Then start the dev server with
-start the dev server with
 
 ```bash
-npm run dev [-- --open]
+pnpm run dev [-- --open]
 ```
 
 ### Formatting
 
 ``` bash
-npx eslint
+pnpx eslint
 ```
 
 ### Testing
 
 To run tests
 ``` bash
-npx playwright test
+pnpx playwright test
 ```
 
 All tests must have the suffix `.spec.[jt]s`. Be cautious while updating

package.json

@@ -16,47 +16,47 @@
 		"prepare": "svelte-kit sync"
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.11.1",
+		"@eslint/js": "^9.29.0",
-		"@playwright/test": "^1.40.0",
+		"@playwright/test": "^1.53.1",
-		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/adapter-static": "^3.0.5",
+		"@sveltejs/adapter-static": "^3.0.8",
-		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/kit": "^2.22.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.1.0",
-		"@tailwindcss/typography": "^0.5.15",
+		"@tailwindcss/typography": "^0.5.16",
-		"@types/eslint": "^9.6.0",
+		"@types/eslint": "^9.6.1",
-		"autoprefixer": "^10.4.20",
+		"autoprefixer": "^10.4.21",
-		"eslint": "^9.11.1",
+		"eslint": "^9.29.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.36.0",
+		"eslint-plugin-svelte": "^2.46.1",
-		"globals": "^15.9.0",
+		"globals": "^15.15.0",
-		"mdsvex": "^0.12.3",
+		"mdsvex": "^0.12.6",
 		"mdsvex-relative-images": "^1.0.3",
-		"prettier": "^3.1.1",
+		"prettier": "^3.5.3",
-		"prettier-plugin-svelte": "^3.1.2",
+		"prettier-plugin-svelte": "^3.4.0",
-		"prettier-plugin-tailwindcss": "^0.6.5",
+		"prettier-plugin-tailwindcss": "^0.6.13",
 		"rehype-katex-svelte": "^1.2.0",
-		"remark-math": "^3.0.0",
+		"remark-math": "^3.0.1",
-		"svelte": "^4.2.7",
+		"svelte": "^5.34.7",
 		"svelte-check": "^4.0.0",
-		"tailwindcss": "^3.4.9",
+		"tailwindcss": "^3.4.17",
-		"typescript": "5.5",
+		"typescript": "~5.5.4",
-		"typescript-eslint": "^8.7.0",
+		"typescript-eslint": "^8.34.1",
 		"unist-util-visit": "^5.0.0",
-		"vite": "^5.0.3",
+		"vite": "^6.0.0",
-		"vitest": "^2.0.0"
+		"vitest": "^2.1.9"
 	},
 	"type": "module",
 	"dependencies": {
-		"@fortawesome/fontawesome-free": "^6.6.0",
+		"@fortawesome/fontawesome-free": "^6.7.2",
-		"bits-ui": "^0.21.13",
+		"bits-ui": "^2.8.0",
 		"clsx": "^2.1.1",
 		"lucide-svelte": "^0.451.0",
 		"rehype-slug": "^6.0.0",
-		"remark-github-blockquote-alert": "^1.2.1",
+		"remark-github-blockquote-alert": "^1.3.1",
 		"remark-toc": "^9.0.0",
-		"shiki": "^1.22.0",
+		"shiki": "^1.29.2",
 		"svelte-radix": "^1.1.1",
-		"tailwind-merge": "^2.5.2",
+		"tailwind-merge": "^2.6.0",
 		"tailwind-variants": "^0.2.1"
 	}
 }

src/app.css

@@ -126,7 +126,7 @@ a.disabled-link {
 	color: rgb(128,128,128);
 	pointer-events: none;
 }
-a:not(.icon) {
+main a:not(.icon) {
 	position: relative;
 	text-decoration: inherit;
 

src/lib/components/PostHeader.svelte

@@ -37,9 +37,7 @@
 		<p class="text-gray-200 flex justify-center">
 			{#each (post?.tags ?? []) as tag, i}
 				{#if i > 0}
-					<div class="separator text-sm">
 					<DividerVertical />
-					</div>
 				{/if}
 				<a href="/tag/{tag}">{tag}</a>
 			{/each}

src/lib/components/ThemeSwitch.svelte

@@ -20,7 +20,10 @@
 	}
 </script>
 
-<button class="nav-link" on:click={toggleTheme} aria-label="Toggle Theme">
+<button
+	id="theme-switch"
+	class="nav-link"
+	on:click={toggleTheme} aria-label="Toggle Theme">
 	{#if $theme === "tokiwa"}
 		<Sun />
 	{:else}
@@ -30,6 +33,7 @@
 
 <style>
 	button {
+		flex-shrink: 0;
 		padding: 0;
 		font-weight: inherit;
 		background: none;

src/routes/+page.svelte

@@ -1,14 +1,39 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { derived } from 'svelte/store'
 	import { routes } from "$lib/sitemap.ts"
 	import { Separator } from "$lib/components/ui/separator/index.js";
-	import { theme, getThemeObject } from '$lib/theme'
+	import { theme, setTheme, getThemeObject } from '$lib/theme'
 	import { Rss } from "lucide-svelte";
 	import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
+	import Cover from "$lib/Cover.svelte"
 	let scrollPosition: number = .5;
 	let scrollHeight: number = 1;
-	let progress: number = 0;
+	let progress: number
+ = 0.0;
 
+	let button_blog;
+
+	function toggleTheme() {
+		theme.update((currentTheme) => {
+			const newTheme = currentTheme === 'tokiwa' ? 'star' : 'tokiwa'
+
+			document.documentElement.setAttribute('color-scheme', newTheme)
+			localStorage.setItem('color-scheme', newTheme)
+
+			if (newTheme === "tokiwa") {
+				document.documentElement.classList.remove('dark');
+			} else {
+				document.documentElement.classList.add('dark');
+			}
+			setTheme(newTheme);
+			return newTheme
+		})
+	}
+	onMount(() => {
+		let entity_switch = document.getElementById("switch");
+		entity_switch.addEventListener("click", toggleTheme);
+	});
 	function onScroll() {
 		if (scrollHeight > 1) {
 			progress = Math.max(0, Math.min(1, scrollPosition / scrollHeight));
@@ -40,11 +65,6 @@
 	};
 	const iconLinks: [string, string][] = Object.entries(metadata.links).map(
 		([key, link]) => [iconMap[key], link]);
-
-	const frontCover = derived(
-		theme,
-		($theme) => getThemeObject($theme, metadata.frontCover)
-	)
 </script>
 
 <svelte:head>
@@ -52,34 +72,29 @@
 </svelte:head>
 
 <div
-	id="background"
+	id="cover"
-	style="opacity: {1 - progress}; background-image: url('{$frontCover}')"
+	style="opacity: {1 - progress}; --grid-line: #999; --grid-line-dark: #333; --grid-cell: #707078"
 >
-</div>
+	<div id="cover-image">
+		<Cover />
+	</div>
 
-<div id="front">
+	<div id="navbar">
-	<div id="floater">
+		<div>
-		<p class="text-2xl floater-elem" style="color: #888">{metadata.frontDescription}</p>
+			<p class="text-2xl" style="color: #888; z-index: 2">{metadata.frontDescription}</p>
-		<div
+		</div>
-			class="floater-elem"
+		<div id="link-container" class="h-5 items-center">
-				 style="padding-bottom: {(1 - progress) * 50}vh"
+			<a class="nav-link" href="#bio">Bio</a>
-		>
+			{#each routes as item}
-			<div id="navbar" class="h-5 items-center space-x-4 text-sm">
+				{#if item.route !== "/"}
-				<a class="nav-link" href="#bio">Bio</a>
+					<a
-				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
+						href={item.route}
-				{#each routes as item}
+						class="nav-link"
-					{#if item.route !== "/"}
+						class:disabled-link={item.disabled}>{item.name}</a>
-						<a
+				{/if}
-							href={item.route}
+			{/each}
-							class="nav-link"
+			<a class="icon nav-link" href="/rss.xml"><Rss /></a>
-							class:disabled-link={item.disabled}>{item.name}</a>
+			<ThemeSwitch />
-						<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
-					{/if}
-				{/each}
-				<a class="icon nav-link" href="/rss.xml"><Rss /></a>
-				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
-				<ThemeSwitch />
-			</div>
 		</div>
 	</div>
 </div>
@@ -92,7 +107,7 @@
 					<p id="bio-name">{name}</p>
 					<div class="w-100">
 						{#each iconLinks as [cl, link]}
-							<a class="icon m-1" href={link}><i class="fa-xl {cl}"></i></a>
+							<a class="icon m-1" href={link} aria-label={cl}><i class="fa-xl {cl}"></i></a>
 						{/each}
 					</div>
 				</div>
@@ -114,39 +129,130 @@
 />
 
 <style>
-	#background {
+	#cover {
-		background-size: cover;
+		background:
-		background-repeat: no-repeat;
+			repeating-linear-gradient(128.6deg, transparent, var(--grid-line) 1px, var(--grid-line) 2px, transparent 1px, transparent 55px),
-		background-position: center center;
+			repeating-linear-gradient(11deg,  transparent, var(--grid-line) 1px, var(--grid-line) 2px, transparent 1px, transparent 40px),
-		z-index: -10;
+			var(--grid-cell)
+		;
+		/*
 		position: absolute;
-		min-width: 100svw;
+		background-size: contain;
-		height: 100svh;
+		background-position: center center; */
 		overscroll-behaviour: none;
-	}
-	#front {
-		height: 100svh;
 		display: flex;
-		flex-direction: column;
-		overscroll-behavior: none;
-	}
-	#floater {
-		display: flex;
-		flex-direction: column;
 		justify-content: center;
-		margin-top: auto;
+		flex-direction: column;
-		margin-left: auto;
+		visibility: visible;
-		margin-right: auto;
+	}
+	:global(.dark #cover) {
+		background:
+			repeating-linear-gradient(128.6deg, transparent, var(--grid-line-dark) 1px, var(--grid-line-dark) 2px, transparent 1px, transparent 55px),
+			repeating-linear-gradient(11deg,  transparent, var(--grid-line-dark) 1px, var(--grid-line-dark) 2px, transparent 1px, transparent 40px),
+			black
+		;
+	}
+	:global(#cover-image > svg) {
+		max-width: 100svw;
+		max-height: 100svh;
+		width: 100%;
+		height: 100%;
+	}
+	:global(svg a) {
+		pointer-events: all;
+		:global(path) {
+			filter: contrast(50%);
+		}
+		:global(.effect) {
+			visibility: hidden;
+		}
+		&:hover,
+		&:focus {
+			:global(.effect) {
+				visibility: visible;
+			}
+			:global(path) {
+				filter: contrast(100%);
+			}
+		}
+	}
+	:global(.dark .shadow) {
+		visibility: hidden;
+	}
+	:global(svg .shadow) {
+		pointer-events: none;
+	}
+	:global(#switch-right) {
+		visibility: hidden;
+	}
+	:global(#switch-left) {
+		visibility: visible;
+	}
+	:global(.dark #switch-right) {
+		visibility: visible;
+	}
+	:global(.dark #switch-left) {
+		visibility: hidden;
+	}
+	:global(.effect > .glow) {
+		filter: blur(.3rem);
+	}
+	.nav-link {
+		display: inline-block;
 	}
 	#navbar {
 		display: flex;
 		flex-wrap: wrap;
-		justify-content: center;
+		padding-top: 30%;
+		flex-direction: column;
+		div {
+			padding-left: 5%;
+		}
 	}
-	.floater-elem {
+	#link-container {
-		margin-left: auto;
+		display: flex;
-		margin-right: auto;
+		flex-direction: column;
+		align-items: flex-start;
 	}
+	/* mobile */
+	@media (max-width: 700px) {
+		#navbar {
+			visibility: visible;
+			height: 100svh;
+		}
+		#cover {
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-end;
+		}
+		#cover-image {
+			position: absolute;
+			max-height: 100svh;
+			max-width: 100svw;
+			pointer-events: none;
+
+			:global(.effect) {
+				visibility: visible;
+			}
+		}
+		:global(#cover-image a) {
+			pointer-events: none;
+		}
+		:global(svg .entity-label) {
+			visibility: hidden;
+		}
+	}
+	/* desktop */
+	@media (min-width: 701px) {
+		#navbar {
+			padding-top: 0;
+			visibility: hidden;
+			height: 0;
+			width: 0;
+		}
+	}
+
+	/* main */
 	main {
 		width: 100%;
 		@apply bg-background;

static/robots.txt

@@ -0,0 +1,34 @@
+User-agent: GPTBot
+Disallow: /
+User-agent: ChatGPT-User
+Disallow: /
+User-agent: Google-Extended
+Disallow: /
+User-agent: PerplexityBot
+Disallow: /
+User-agent: Amazonbot
+Disallow: /
+User-agent: ClaudeBot
+Disallow: /
+User-agent: Omgilibot
+Disallow: /
+User-Agent: FacebookBot
+Disallow: /
+User-Agent: Applebot
+Disallow: /
+User-agent: anthropic-ai
+Disallow: /
+User-agent: Bytespider
+Disallow: /
+User-agent: Claude-Web
+Disallow: /
+User-agent: Diffbot
+Disallow: /
+User-agent: ImagesiftBot
+Disallow: /
+User-agent: Omgilibot
+Disallow: /
+User-agent: Omgili
+Disallow: /
+User-agent: YouBot
+Disallow: /