chore: Update svelte, add new cover svg

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
-start the dev server with
+Install dependencies with `pnpm install`. Then 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",
-		"@playwright/test": "^1.40.0",
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/adapter-static": "^3.0.5",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@tailwindcss/typography": "^0.5.15",
-		"@types/eslint": "^9.6.0",
-		"autoprefixer": "^10.4.20",
-		"eslint": "^9.11.1",
+		"@eslint/js": "^9.29.0",
+		"@playwright/test": "^1.53.1",
+		"@sveltejs/adapter-auto": "^3.3.1",
+		"@sveltejs/adapter-static": "^3.0.8",
+		"@sveltejs/kit": "^2.22.0",
+		"@sveltejs/vite-plugin-svelte": "^5.1.0",
+		"@tailwindcss/typography": "^0.5.16",
+		"@types/eslint": "^9.6.1",
+		"autoprefixer": "^10.4.21",
+		"eslint": "^9.29.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.36.0",
-		"globals": "^15.9.0",
-		"mdsvex": "^0.12.3",
+		"eslint-plugin-svelte": "^2.46.1",
+		"globals": "^15.15.0",
+		"mdsvex": "^0.12.6",
 		"mdsvex-relative-images": "^1.0.3",
-		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"prettier-plugin-tailwindcss": "^0.6.5",
+		"prettier": "^3.5.3",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-tailwindcss": "^0.6.13",
 		"rehype-katex-svelte": "^1.2.0",
-		"remark-math": "^3.0.0",
-		"svelte": "^4.2.7",
+		"remark-math": "^3.0.1",
+		"svelte": "^5.34.7",
 		"svelte-check": "^4.0.0",
-		"tailwindcss": "^3.4.9",
-		"typescript": "5.5",
-		"typescript-eslint": "^8.7.0",
+		"tailwindcss": "^3.4.17",
+		"typescript": "~5.5.4",
+		"typescript-eslint": "^8.34.1",
 		"unist-util-visit": "^5.0.0",
-		"vite": "^5.0.3",
-		"vitest": "^2.0.0"
+		"vite": "^6.0.0",
+		"vitest": "^2.1.9"
 	},
 	"type": "module",
 	"dependencies": {
-		"@fortawesome/fontawesome-free": "^6.6.0",
-		"bits-ui": "^0.21.13",
+		"@fortawesome/fontawesome-free": "^6.7.2",
+		"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/routes/+page.svelte

@@ -1,14 +1,22 @@
 <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 { 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 button_blog;
+
+	onMount(() => {
+		let entity_blog = document.getElementById("visor");
+		entity_blog.appendChild(button_blog);
+	});
 	function onScroll() {
 		if (scrollHeight > 1) {
 			progress = Math.max(0, Math.min(1, scrollPosition / scrollHeight));
@@ -51,12 +59,15 @@
 	<title>{metadata.name}</title>
 </svelte:head>
 
-<div
-	id="background"
-	style="opacity: {1 - progress}; background-image: url('{$frontCover}')"
->
+<div class="cover" style="opacity: {1 - progress}">
+	<Cover />
+						<a
+							bind:this={button_blog}
+							href="/post"
+										 class="entity-nav-link nav-link"><text style="font: 14pt">Placeholder</text></a>
 </div>
 
+<!--
 <div id="front">
 	<div id="floater">
 		<p class="text-2xl floater-elem" style="color: #888">{metadata.frontDescription}</p>
@@ -83,7 +94,7 @@
 		</div>
 	</div>
 </div>
-
+-->
 <main>
 	<div id="bio">
 		<div class="p-1">
@@ -114,16 +125,42 @@
 />
 
 <style>
-	#background {
-		background-size: cover;
-		background-repeat: no-repeat;
-		background-position: center center;
-		z-index: -10;
+	.cover {
+		background:
+			/* no-repeat url("/cover.svg"), */
+			repeating-linear-gradient(129deg, transparent, #aaa 1px, #aaa 2px, transparent 1px, transparent 60px),
+			repeating-linear-gradient(11deg,  transparent, #aaa 1px, #aaa 2px, transparent 1px, transparent 40px),
+			#707078
+		;
+		/*
 		position: absolute;
+		background-size: contain;
+		background-position: center center; */
+		z-index: -10;
 		min-width: 100svw;
-		height: 100svh;
+		min-height: 100svh;
 		overscroll-behaviour: none;
 	}
+	:global(.cover > svg) {
+		max-width: 100svw;
+		max-height: 100svh;
+		z-index: -10;
+		width: 100%;
+		height: 100%;
+	}
+	:global(svg > .entity) {
+		filter: contrast(50%);
+		&:hover,
+		&:focus {
+			filter: contrast(100%);
+		}
+	}
+	.entity-nav-link {
+		display: block;
+		height: 20px;
+		width: 50px;
+		z-index: 10;
+	}
 	#front {
 		height: 100svh;
 		display: flex;