feat: initial cat page

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>

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);
 			}
 		});
 	}

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>