From 8d02623c8caac27e516f6d6270b4ac404556efd8 Mon Sep 17 00:00:00 2001
From: Alexander Daichendt <alexander.daichendt@tum.de>
Date: Wed, 3 Aug 2022 20:23:19 +0200
Subject: [PATCH] feat: initial cat page

---
 src/lib/components/Image.svelte             | 27 ++++++++++
 src/lib/components/blurupplaceholder.svelte | 22 ++++++++
 src/lib/utils/types.ts                      | 12 +++++
 src/lib/utils/utils.ts                      | 17 ++++++
 src/routes/__layout.svelte                  |  1 +
 src/routes/admin/index.svelte               |  8 ++-
 src/routes/cat/index.svelte                 | 57 ++++++++++++++++++---
 7 files changed, 135 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/components/Image.svelte
 create mode 100644 src/lib/components/blurupplaceholder.svelte
 create mode 100644 src/lib/utils/utils.ts

diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
new file mode 100644
index 0000000..ef093b1
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/blurupplaceholder.svelte b/src/lib/components/blurupplaceholder.svelte
new file mode 100644
index 0000000..1087581
--- /dev/null
+++ b/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>
diff --git a/src/lib/utils/types.ts b/src/lib/utils/types.ts
index bc39e5c..f2ff897 100644
--- a/src/lib/utils/types.ts
+++ b/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;
+}
diff --git a/src/lib/utils/utils.ts b/src/lib/utils/utils.ts
new file mode 100644
index 0000000..8c30169
--- /dev/null
+++ b/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;
+};
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index b0210ff..f497606 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -69,6 +69,7 @@
 		<p>Copyright <Icon path={mdiCopyright} size="1rem" /> {year} Alexander Daichendt</p>
 
 		<div class="footerLinks">
+			<Link href="/cat">Meeeeeow</Link>
 			<Link href="/privacy">Privacy Policy</Link>
 			<Link href="/impressum">Impressum</Link>
 			<Link href="https://github.com/AlexDaichendt/site">Source</Link>
diff --git a/src/routes/admin/index.svelte b/src/routes/admin/index.svelte
index 8853c0b..98f48ae 100644
--- a/src/routes/admin/index.svelte
+++ b/src/routes/admin/index.svelte
@@ -6,15 +6,19 @@
 	function beamKitty() {
 		importing = true;
 
-		fetch(`https://cats.daichendt.one/import?key=${kittyLink}`, {
+		fetch(`https://cats.daichendt.one/import?url=${kittyLink}&optimize=true`, {
 			method: 'PUT',
 			headers: { 'X-Custom-Auth-Key': import.meta.env.VITE_CATAPI_PASSWD },
 		}).then((result) => {
+			importing = false;
+
 			if (result.status === 200) {
 				kittyLink = '';
-				importing = false;
 				showSuccess = true;
 				setTimeout(() => (showSuccess = false), 5000);
+			} else {
+				// display error
+				console.log(result);
 			}
 		});
 	}
diff --git a/src/routes/cat/index.svelte b/src/routes/cat/index.svelte
index 2aff911..b980b0d 100644
--- a/src/routes/cat/index.svelte
+++ b/src/routes/cat/index.svelte
@@ -4,7 +4,6 @@
 	export async function load({ fetch }: LoadEvent): LoadOutput {
 		const response = await fetch('https://cats.daichendt.one/list');
 		const asJson = await response.json();
-
 		return {
 			status: response.status,
 			props: {
@@ -15,15 +14,59 @@
 </script>
 
 <script lang="ts">
-	export let cats: Record<string, string>[];
+	import Image from '$lib/components/Image.svelte';
+	import type { ImageMetadata } from '$lib/utils/types';
+	import Link from '$lib/components/Link.svelte';
+
+	export let cats: { images: ImageMetadata[] }[];
 </script>
 
-{#each cats as cat}
-	<img src={`https://cats.daichendt.one/${cat.key}`} alt="cat" />
-{/each}
+<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>
-	img {
-		width: 50%;
+	.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>