Update some packages, fix stuff

Discusser · Discusser · commit ed043a170826 · 2025-07-19T14:26:38.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,15 +20,17 @@
     "@tailwindcss/postcss": "^4.1.11",
     "@types/eslint": "^9.6.1",
     "@types/node": "^22.16.5",
+    "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@typescript-eslint/parser": "^8.37.0",
     "bits-ui": "1.0.0-next.46",
     "clsx": "^2.1.1",
     "embla-carousel-svelte": "^8.6.0",
     "eslint": "^9.31.0",
-    "eslint-config-prettier": "^9.1.2",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.11.0",
     "globals": "^15.15.0",
     "lucide-svelte": "^0.456.0",
-    "mode-watcher": "^0.4.1",
+    "mode-watcher": "^1.1.0",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.6.14",
@@ -37,7 +39,7 @@
     "stylelint-config-tailwindcss": "^0.0.7",
     "svelte": "^5.36.8",
     "svelte-check": "^4.3.0",
-    "svelte-sonner": "^0.3.28",
+    "svelte-sonner": "^1.0.5",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^1.0.0",
     "tailwindcss": "^4.1.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/components/blog/ArticleCard.svelte b/src/lib/components/blog/ArticleCard.svelte
@@ -22,7 +22,7 @@
 			>
 			{#if article.tags != undefined}
 				<div class="mt-1 flex flex-wrap space-x-1">
-					{#each article.tags as tag}
+					{#each article.tags as tag (tag)}
 						<span class="text-muted-foreground bg-muted mb-1 rounded-md px-1 py-0.5 text-xs">
 							{tag}
 						</span>
diff --git a/src/lib/components/projects/ProjectDisplay.svelte b/src/lib/components/projects/ProjectDisplay.svelte
@@ -15,7 +15,6 @@
 	} = $props();
 
 	let searchFilter = $state('');
-	setContext('searchFilter', () => console.log(searchFilter));
 </script>
 
 <div class={cn('space-y-4', className)} {...restProps}>
@@ -25,7 +24,7 @@
 		</div>
 	</div>
 	<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-		{#each projects as project}
+		{#each projects as project (project.name)}
 			{#if (category == undefined || project.category == category) && project.name
 					.toLowerCase()
 					.includes(searchFilter.toLowerCase())}
diff --git a/src/lib/components/shared/Collapsible.svelte b/src/lib/components/shared/Collapsible.svelte
@@ -21,7 +21,7 @@
 	}
 </script>
 
-<div>
+<div {...restProps}>
 	<button
 		class={cn(
 			'bg-muted flex w-full items-center space-x-1 px-2 py-1 hover:cursor-pointer',
diff --git a/src/lib/components/shared/NavBar.svelte b/src/lib/components/shared/NavBar.svelte
@@ -43,7 +43,7 @@
 				<NavAnchor fuzzy href="/hobbies">Hobbies</NavAnchor>
 			</div>
 			<div>
-				<Button onclick={toggleMode} class="float-right" variant="outline" size="icon">
+				<Button onclick={toggleMode} class="float-right hover:cursor-pointer" variant="outline" size="icon">
 					<IconSun
 						class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
 					/>
diff --git a/src/lib/components/shared/table-of-contents/TableOfContentsElement.svelte b/src/lib/components/shared/table-of-contents/TableOfContentsElement.svelte
@@ -12,6 +12,10 @@
 		level?: number;
 	} = $props();
 
+	const sizes = ['text-xl', 'text-lg', 'text-base'];
+	let cssTextSize = level >= sizes.length ? sizes.at(-1) : sizes[level];
+	let positionString = $state('');
+
 	function onCreate(_div: HTMLDivElement) {
 		if (tocState.hasToc == false) return;
 
@@ -43,6 +47,6 @@
 
 <div {...restProps} use:onCreate>
 	<Linkable id={encodeURIComponent(title)} class="grow"
-		><p class="text-foreground text-xl font-bold">{title}</p></Linkable
+		><p class="text-foreground {cssTextSize} font-bold">{positionString} {title}</p></Linkable
 	>
 </div>
diff --git a/src/lib/components/shared/table-of-contents/state.svelte.ts b/src/lib/components/shared/table-of-contents/state.svelte.ts
@@ -1,4 +1,4 @@
-import type { TOCStack } from "@/lib/table-of-contents"
+import type { TOCStack } from "@/lib/table-of-contents";
 
 export const tocState = $state<{ hasToc: boolean, tocStack: TOCStack }>({
   hasToc: false,
diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte
@@ -1,20 +1,21 @@
 <script lang="ts">
-	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
-	import { mode } from "mode-watcher";
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+	import { mode } from 'mode-watcher';
 
 	let restProps: SonnerProps = $props();
 </script>
 
 <Sonner
-	theme={$mode}
+	theme={mode.current}
 	class="toaster group"
 	toastOptions={{
 		classes: {
-			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-			description: "group-[.toast]:text-muted-foreground",
-			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-		},
+			toast:
+				'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+			description: 'group-[.toast]:text-muted-foreground',
+			actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+			cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
+		}
 	}}
 	{...restProps}
 />
diff --git a/src/lib/constants/books.ts b/src/lib/constants/books.ts
@@ -5,6 +5,11 @@ export type Book = {
 };
 
 export const books: Book[] = [
+  {
+    name: "Letters from a Stoic",
+    author: "Seneca",
+    rating: 3.75
+  },
   {
     name: 'Civilization and Its Discontents',
     author: 'Sigmund Freud',
diff --git a/src/lib/constants/piano-pieces.ts b/src/lib/constants/piano-pieces.ts
@@ -52,6 +52,14 @@ export const pieces: Piece[] = [
     name: 'La Bohème',
     composer: Composer.Aznavour
   },
+  {
+    name: "Waltz No. 14, Op. Posth.",
+    composer: Composer.Chopin
+  },
+  {
+    name: 'Waltz Op. 69 No. 2',
+    composer: Composer.Chopin
+  },
   {
     name: 'Waltz Op. 64 No. 2',
     composer: Composer.Chopin
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
@@ -29,17 +29,11 @@ export const copyToClipboard = (text: string, message?: string, errorMessage?: s
     .then(() => {
       toast.success(message, {
         description: text,
-        cancel: {
-          label: 'Close'
-        }
       });
     })
     .catch((err) => {
       toast.error(errorMessage, {
         description: err.name + ': ' + err.message,
-        cancel: {
-          label: 'Close'
-        }
       });
     });
 };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -12,11 +12,11 @@
 
 <div class="flex min-h-screen flex-col">
 	<ModeWatcher />
-	<Toaster />
+	<Toaster closeButton />
 	<NavBar />
 
 	<div class="flex grow p-4">
-		<div class="absolute hidden w-1/4 lg:block">
+		<div class="absolute hidden lg:block">
 			<SideNav />
 		</div>
 		<div class="flex grow justify-center">
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
@@ -6,7 +6,7 @@
 <div class="flex flex-col space-y-4">
 	<p class="text-foreground text-2xl font-bold">Blog</p>
 	<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-		{#each articles as article}
+		{#each articles as article (article.title)}
 			<ArticleCard {article} />
 		{/each}
 	</div>
diff --git a/src/routes/blog/articles/numworks-programming/+page.svelte b/src/routes/blog/articles/numworks-programming/+page.svelte
@@ -50,7 +50,7 @@ fill_rect(x, y, w, h, col) - fills a rectangle spanning from (x, y) to (x + w, y
 		>
 	</Collapsible>
 	<Collapsible title="Ion">
-		<Code nohl>{`keydown(k) - returns true if the key k is down`}</Code>
+		<Code nohl>keydown(k) - returns true if the key k is down</Code>
 	</Collapsible><Collapsible title="Time"
 		><Code nohl
 			>{`monotonic() - returns the clock's time (not to be confused with the actual time)

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@`
`22`	`22`	`>`
`23`	`23`	`{#if article.tags != undefined}`
`24`	`24`	`<div class="mt-1 flex flex-wrap space-x-1">`
`25`		`- {#each article.tags as tag}`
	`25`	`+ {#each article.tags as tag (tag)}`
`26`	`26`	`<span class="text-muted-foreground bg-muted mb-1 rounded-md px-1 py-0.5 text-xs">`
`27`	`27`	`{tag}`
`28`	`28`	`</span>`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@`
`21`	`21`	`}`
`22`	`22`	`</script>`
`23`	`23`
`24`		`-<div>`
	`24`	`+<div {...restProps}>`
`25`	`25`	`<button`
`26`	`26`	`class={cn(`
`27`	`27`	`'bg-muted flex w-full items-center space-x-1 px-2 py-1 hover:cursor-pointer',`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { TOCStack } from "@/lib/table-of-contents"`
	`1`	`+import type { TOCStack } from "@/lib/table-of-contents";`
`2`	`2`
`3`	`3`	`export const tocState = $state<{ hasToc: boolean, tocStack: TOCStack }>({`
`4`	`4`	`hasToc: false,`