migrate to svelte5 partially

mdsvex.config.js

@@ -3,7 +3,6 @@ import remarkGFM from 'remark-gfm';
 import remarkEmoji from 'remark-emoji';
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
-import remarkFootnotes from 'remark-footnotes';
 
 const config = defineConfig({
 	layout: {
@@ -15,7 +14,7 @@ const config = defineConfig({
 		dashes: 'oldschool',
 	},
 
-	remarkPlugins: [remarkGFM, remarkEmoji, remarkFootnotes],
+	remarkPlugins: [remarkGFM, remarkEmoji],
 	rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behaviour: 'append' }]],
 });
 

package.json

@@ -19,40 +19,41 @@
 		"format": "prettier --write --plugin-search-dir=. ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-cloudflare": "^1.0.0",
+		"@iconify/svelte": "^4.1.0",
-		"@sveltejs/kit": "^1.0.1",
+		"@sveltejs/adapter-cloudflare": "^4.8.0",
-		"@typescript-eslint/eslint-plugin": "^5.47.1",
+		"@sveltejs/kit": "^2.9.0",
-		"@typescript-eslint/parser": "^5.47.1",
+		"@typescript-eslint/eslint-plugin": "^8.17.0",
-		"autoprefixer": "^10.4.13",
+		"@typescript-eslint/parser": "^8.17.0",
-		"browserslist": "^4.21.4",
+		"autoprefixer": "^10.4.20",
-		"eslint": "^8.31.0",
+		"browserslist": "^4.24.2",
-		"eslint-config-prettier": "^8.3.0",
+		"eslint": "^9.16.0",
-		"eslint-plugin-svelte3": "^4.0.0",
+		"eslint-config-prettier": "^9.1.0",
-		"fontaine": "^0.4.1",
+		"fontaine": "^0.5.0",
 		"mdi-svelte": "^1.1.2",
-		"mdsvex": "^0.10.6",
+		"mdsvex": "^0.12.3",
-		"postcss": "^8.4.20",
+		"postcss": "^8.4.49",
-		"postcss-load-config": "^4.0.1",
+		"postcss-load-config": "^6.0.1",
-		"postcss-normalize": "^10.0.1",
+		"postcss-normalize": "^13.0.1",
-		"prettier": "^2.8.1",
+		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^2.9.0",
+		"prettier-plugin-svelte": "^3.3.2",
-		"rehype-autolink-headings": "^6.1.1",
+		"rehype-autolink-headings": "^7.1.0",
-		"rehype-slug": "^5.1.0",
+		"rehype-slug": "^6.0.0",
-		"remark-emoji": "^3.0.2",
+		"remark-emoji": "^5.0.1",
-		"remark-footnotes": "2.0",
+		"remark-gfm": "^4.0.0",
-		"remark-gfm": "^3.0.1",
+		"svelte": "^5.8.1",
-		"svelte": "^3.55.0",
+		"svelte-check": "^4.1.1",
-		"svelte-check": "^3.0.1",
+		"svelte-preprocess": "^6.0.3",
-		"svelte-preprocess": "^5.0.0",
+		"tailwindcss": "^3.4.16",
-		"tslib": "^2.4.1",
+		"tslib": "^2.8.1",
-		"typescript": "^4.9.4",
+		"typescript": "^5.7.2",
-		"vite": "^4.0.3",
+		"vite": "^6.0.3",
-		"vite-imagetools": "^4.0.12"
+		"vite-imagetools": "^7.0.5"
 	},
 	"dependencies": {
-		"@fontsource/ubuntu-mono": "^4.5.11",
+		"@fontsource/ubuntu-mono": "^5.1.0",
-		"@mdi/js": "^7.1.96",
+		"@mdi/js": "^7.4.47",
-		"imagetools-core": "^3.2.3"
+		"@sveltejs/vite-plugin-svelte": "^5.0.1",
+		"imagetools-core": "^7.0.2"
 	},
 	"browserslist": "last 2 versions"
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/lib/components/Footer.svelte

@@ -3,18 +3,19 @@
 </script>
 
 <script>
-	import { mdiCopyright } from '@mdi/js';
+	import Icon from '@iconify/svelte';
-
-	import Icon from 'mdi-svelte';
 	import Link from './Link.svelte';
 </script>
 
-<footer>
+<footer class="mt-16 p-8">
 	<!-- container class inherited from __layout-->
 	<div class="container">
-		<p>Copyright <Icon path={mdiCopyright} size="1rem" /> {year} Alexander Daichendt</p>
+		<p class="flex items-center gap-1">
+			Copyright <Icon icon="material-symbols:copyright" class="inline-block" />
+			{year} Alexander Daichendt
+		</p>
 
-		<div class="footerLinks">
+		<div class="flex md:justify-between md:flex-row flex-col gap-1">
 			<Link href="/cat">Meeeeeow</Link>
 			<Link href="/privacy">Privacy Policy</Link>
 			<Link href="/impressum">Impressum</Link>
@@ -26,18 +27,12 @@
 <style>
 	footer {
 		background-color: var(--special-bg-color);
-		padding: 2rem;
-		margin-top: 4rem;
 	}
 	@media screen and (max-width: 500px) {
 		.footerLinks {
 			flex-direction: column;
 		}
 	}
-	.footerLinks {
-		display: flex;
-		justify-content: space-between;
-	}
 	:global(footer div a) {
 		color: var(--text-soft-color) !important;
 	}

src/lib/components/Image.svelte

@@ -29,16 +29,16 @@
 	export let alt: string;
 
 	/** `img` attribute */
-	export let loading: string = 'lazy';
+	export let loading: 'lazy' | 'eager' = 'lazy';
 </script>
 
 <!--
     @component
     takes the output of a vite-imagetools import (using the `meta` output format)
     and generates a `<picture>` with `<source>` tags and an `<img>`.
-  
+
     usage
-  
+
     - in `global.d.ts`
       ```typescript
       declare module "*&imagetools" {
@@ -64,9 +64,9 @@
           border-radius: 50%;
         }
         ```
-  
+
     example generated `<picture>`
-  
+
     ```html
     <picture>
       <source
@@ -88,20 +88,20 @@
       <img src="/_app/assets/me-2bc09a6d.png" alt="me" />
     </picture>
     ```
-  
+
     notes
-  
+
     - from the documentation for
       [`sizes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes),
-  
+
       > The selected source size affects the intrinsic size of the image (the
       > image’s display size if no CSS styling is applied). If the srcset
       > attribute is absent, or contains no values with a width descriptor, then
       > the sizes attribute has no effect.
-  
+
       there are other things that may also affect the intrinsic (and separately,
       display) size of the image, but this is all we set here.
-  
+
     - the `&imagetools` in the usage above is to make typescript happy. there are
       other workarounds, if you'd prefer a differnet one
       https://github.com/JonasKruckenberg/imagetools/issues/160
@@ -109,9 +109,9 @@
       testing that didn't seem to allow for multiple formats. i was also tempted
       to just use png, but in my bit of testing the webp file was only ~10% (!)
       the size of the png.
-  
+
     assumptions
-  
+
     - this counts on vite-imagetools returning metadata objects in the same order
       as the query values are specified
       - e.g. for `?width=100;200&format=webp;png&meta` we expect the source with
@@ -120,9 +120,9 @@
       - i don't think this is guaranteed, so hopefully it doesn't change. looks
         like it depends on this bit of code
         https://github.com/JonasKruckenberg/imagetools/blob/main/packages/core/src/lib/resolve-configs.ts#L17
-  
+
     references
-  
+
     - responsive images
       - mdn https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
       - css-tricks https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/

src/lib/components/Table.svelte

@@ -1,7 +1,7 @@
 <script>
 </script>
 
-<div tabindex="0">
+<div tabindex="-1">
 	<table id="table">
 		<slot />
 	</table>

src/lib/components/ThemeSwitcher.svelte

@@ -71,7 +71,7 @@
 
 <label class="switch">
 	<input aria-label="Nightmode" type="checkbox" bind:checked on:change={toggleTheme} />
-	<span class="slider round" />
+	<span class="slider round"></span>
 </label>
 
 <style>

src/routes/+layout.svelte

@@ -3,6 +3,7 @@
 	import Footer from '$lib/components/Footer.svelte';
 	import Header from '$lib/components/Header.svelte';
 	import '@fontsource/ubuntu-mono/400.css';
+	import '../app.css';
 </script>
 
 <div class="container upper">
@@ -15,9 +16,6 @@
 <Footer />
 
 <style>
-	@import 'normalize.css';
-	@import 'sanitize.css';
-
 	.upper {
 		min-height: calc(100vh - 4rem - 8px);
 	}

src/routes/cat/+page.svelte

@@ -1,62 +0,0 @@
-<script lang="ts">
-	import type { PageData } from './$types';
-	import Image from '$lib/components/CatImage.svelte';
-	import Link from '$lib/components/Link.svelte';
-	import SEO from '$components/SEO.svelte';
-
-	export let data: PageData;
-
-	$: cats = data.cats;
-</script>
-
-<SEO />
-
-<section class="masonry">
-	{#each cats as cat}
-		<figure>
-			<Link
-				href={`https://cats.daichendt.one/${cat.images[cat.images.length - 1].href}`}
-				disableIcon
-				disablePrefetch
-			>
-				<Image
-					metadata={cat.images}
-					sizes="(max-width: 720px) 1px, (max-width: 1280px) 360px, 720px"
-				/>
-			</Link>
-		</figure>
-	{/each}
-</section>
-
-<style>
-	.masonry {
-		column-count: 3;
-		column-gap: 1em;
-	}
-
-	/* Masonry on medium-sized screens */
-	@media only screen and (max-width: 800px) and (min-width: 500px) {
-		.masonry {
-			column-count: 2;
-		}
-	}
-
-	/* Masonry on small screens */
-	@media only screen and (max-width: 500px) and (min-width: 0px) {
-		.masonry {
-			column-count: 1;
-		}
-	}
-
-	figure {
-		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
-		margin: 0;
-		background-color: #eee;
-		display: inline-block;
-		margin: 0 0 1em;
-		width: 100%;
-	}
-	figure:hover {
-		filter: brightness(90%);
-	}
-</style>

src/routes/cat/+page.ts

@@ -1,9 +0,0 @@
-import type { PageLoad } from './$types';
-
-export const load: PageLoad = async ({ fetch }) => {
-	const response = await fetch('https://cats.daichendt.one/list');
-	const asJson = await response.json();
-	return {
-		cats: response.ok && asJson,
-	};
-};

svelte.config.js

@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-cloudflare';
-import preprocess from 'svelte-preprocess';
+import { sveltePreprocess } from 'svelte-preprocess';
 import autoprefixer from 'autoprefixer';
 import cssNormalizer from 'postcss-normalize';
 import { mdsvex } from 'mdsvex';
@@ -12,7 +12,7 @@ const config = {
 	// Consult https://github.com/sveltejs/svelte-preprocess
 	// for more information about preprocessors
 	preprocess: [
-		preprocess({ postcss: { plugins: [autoprefixer, cssNormalizer()] } }),
+		sveltePreprocess({ postcss: { plugins: [autoprefixer, cssNormalizer()] } }),
 		mdsvex(mdsvexconfig),
 	],
 

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};