feat: add initial cat page

src/routes/admin/index.svelte

@@ -1 +1,36 @@
+<script lang="ts">
+	let kittyLink: string;
+	let importing = false;
+	let showSuccess = false;
+
+	function beamKitty() {
+		importing = true;
+
+		fetch(`https://cats.daichendt.one/import?key=${kittyLink}`, {
+			method: 'PUT',
+			headers: { 'X-Custom-Auth-Key': import.meta.env.VITE_CATAPI_PASSWD },
+		}).then((result) => {
+			if (result.status === 200) {
+				kittyLink = '';
+				importing = false;
+				showSuccess = true;
+				setTimeout(() => (showSuccess = false), 5000);
+			}
+		});
+	}
+</script>
+
 <h1>Administration Area</h1>
+<h2>Add a cat</h2>
+<input type="text" placeholder="cat me up" bind:value={kittyLink} />
+<button type="button" on:click={beamKitty} disabled={importing}> Send </button>
+
+{#if showSuccess}
+	<span class="success">Successfully beamed up the kitty!</span>
+{/if}
+
+<style>
+	.success {
+		color: greenyellow;
+	}
+</style>

src/routes/cat/cats.json.ts

@@ -0,0 +1,47 @@
+function encode(input: Uint8Array) {
+	const keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
+	let output = '';
+	let chr1, chr2, chr3, enc1, enc2, enc3, enc4;
+	let i = 0;
+
+	while (i < input.length) {
+		chr1 = input[i++];
+		chr2 = i < input.length ? input[i++] : Number.NaN; // Not sure if the index
+		chr3 = i < input.length ? input[i++] : Number.NaN; // checks are needed here
+
+		enc1 = chr1 >> 2;
+		enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+		enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+		enc4 = chr3 & 63;
+
+		if (isNaN(chr2)) {
+			enc3 = enc4 = 64;
+		} else if (isNaN(chr3)) {
+			enc4 = 64;
+		}
+		output += keyStr.charAt(enc1) + keyStr.charAt(enc2) + keyStr.charAt(enc3) + keyStr.charAt(enc4);
+	}
+	return output;
+}
+
+export async function GET({ request, params }) {
+	const response = await fetch('https://catapi.cf4.workers.dev/list');
+	const asJson = await response.json();
+
+	const resultcats = await Promise.all(
+		asJson.map(async (cat) => {
+			const catimage = await fetch(`https://catapi.cf4.workers.dev/${cat.key}`);
+			const img = await catimage.arrayBuffer();
+
+			const b64 = encode(new Uint8Array(img));
+			return { ...cat, b64 };
+		}),
+	);
+
+	return {
+		status: response.status,
+		body: {
+			cats: response.ok && resultcats,
+		},
+	};
+}

src/routes/cat/index.svelte

@@ -0,0 +1,29 @@
+<script context="module" lang="ts">
+	import type { LoadEvent, LoadOutput } from '@sveltejs/kit';
+
+	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: {
+				cats: response.ok && asJson,
+			},
+		};
+	}
+</script>
+
+<script lang="ts">
+	export let cats: Record<string, string>[];
+</script>
+
+{#each cats as cat}
+	<img src={`https://cats.daichendt.one/${cat.key}`} alt="cat" />
+{/each}
+
+<style>
+	img {
+		width: 50%;
+	}
+</style>