feat: initial cat page

src/lib/components/Image.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { ImageMetadata } from '$lib/utils/types';
+	export let metadata: ImageMetadata[];
+	export let sizes: string;
+
+	const fallback = metadata[metadata.length - 1];
+	const _metadata = metadata.slice(0, metadata.length - 1);
+
+	const srcset = _metadata
+		.map(({ href, width }) => `https://cats.daichendt.one/${href} ${width}w`)
+		.join(',');
+</script>
+
+{#if !fallback && !metadata}
+	No metadata supplied
+{:else}
+	<img {srcset} class="image" alt="A cute kitty" {sizes} loading="lazy" />
+{/if}
+
+<style>
+	.image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+	}
+</style>

src/lib/components/blurupplaceholder.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Thumbnail } from '$lib/utils/types';
+
+	export let thumbnail: Thumbnail;
+</script>
+
+<svg width="100%" height="100%" viewBox="0 0 {thumbnail.width} {thumbnail.height}">
+	<filter id="blur" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+		<feGaussianBlur stdDeviation="20 20" edgeMode="duplicate" />
+		<feComponentTransfer>
+			<feFuncA type="discrete" tableValues="1 1" />
+		</feComponentTransfer>
+	</filter>
+	<image
+		filter="url(#blur)"
+		xlink:href="data:image/jpeg;base64,{thumbnail.value}"
+		x="0"
+		y="0"
+		height="100%"
+		width="100%"
+	/>
+</svg>

src/lib/utils/types.ts

@@ -15,3 +15,15 @@ export interface Skill {
 	years: number;
 	started: number;
 }
+
+export interface ImageMetadata {
+	href: string;
+	mime: string;
+	width: number;
+}
+
+export interface Thumbnail {
+	value: string;
+	width: number;
+	height: number;
+}

src/lib/utils/utils.ts

@@ -0,0 +1,17 @@
+export const createLoadObserver = (handler: () => void) => {
+	let waiting = 0;
+
+	const onload = (el) => {
+		waiting++;
+		console.log(waiting);
+		el.addEventListener('load', () => {
+			waiting--;
+			console.log('waiting ' + waiting);
+			if (waiting === 0) {
+				handler();
+			}
+		});
+	};
+
+	return onload;
+};