feat: add vite-imagetools

src/routes/blog/ondemand-image-optimization-catapi/index.md

@@ -0,0 +1,65 @@
+---
+created: '2022-08-04'
+title: 'Free, on-demand image optimizations with Cloudflare'
+description: ''
+keywords:
+  - image optimization
+  - docker
+  - sveltekit
+  - svelte
+hidden: true
+---
+
+<script context="module" lang="ts">
+	export async function load() {
+		return {
+			stuff: {
+				title,
+				description,
+        keywords,
+			},
+		};
+	}
+</script>
+
+<script>
+import architecture from "./_architecture.png?width=360;720;1280;1920&webp&metadata"
+import Image from "$components/Image.svelte"
+</script>
+
+I wanted to use responsive images for my small page of cute [cats](/cat). Since
+one of the design goals is to give my significant other, who by the way loves
+cats a lot more than me, the option to add cats on the fly and also consume the
+cat pictures in other services, I require dynamic image optimization.
+
+Requirements:
+
+- On demand addition of new images
+- Optimization for different width and webp / progressive JPEG
+- Served from the edge for lowest latencies
+
+Since I've been working a lot with Cloudflare, I of course checked out their
+[Image](https://developers.cloudflare.com/images/cloudflare-images/) offering.
+While the service would exactly fulfill my requirements, it costs 5€/m, which I
+currently can not afford. I thought, this was a good opportunity to build my own
+little image optimization service, that I could maybe even use in the future for
+other image-related projects.
+
+## Infrastructure overview
+
+I rely on Cloudflare services to serve the optimized images. On pages, this
+Svelte website is hosted. For our API endpoints that this website is querying, I
+utilize Cloudflare workers. The optimized images are stored on the new
+Cloudflare R2 storage and an index is created on KV. Finally, I host the image
+optimization program on a Raspberry Pi at my place. It is connected with a
+Cloudflare tunnel to the internet. Any other device that has computing power and
+is accessible via the internet is alright.
+
+<Image meta={architecture} />
+
+- **(1)**: a user uploads a new image, for example via this site
+- **(2)**: the worker processes forwards the image to the image optimization server
+- **(3)**: the optimization server does its thing and serves the optimized
+  images in a folder. The worker is notified where the optimized images can be found.
+- **(4)**: the worker fetches the images and stores them with a consistent naming scheme in
+- **(5)**: an object containing metadata to the optimized image (location in R2) are inserted into KV

src/routes/cat/index.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <script lang="ts">
-	import Image from '$lib/components/Image.svelte';
+	import Image from '$lib/components/CatImage.svelte';
 	import type { ImageMetadata } from '$lib/utils/types';
 	import Link from '$lib/components/Link.svelte';