From b25e5c4943d59c6e1f66c1fbb32ce64a4dd8a934 Mon Sep 17 00:00:00 2001
From: ryoppippi <1560508+ryoppippi@users.noreply.github.com>
Date: Sat, 5 Oct 2024 18:18:33 +0100
Subject: [PATCH] feat: create Image.svelte

---
 src/lib/Image.svelte | 53 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 src/lib/Image.svelte

diff --git a/src/lib/Image.svelte b/src/lib/Image.svelte
new file mode 100644
index 0000000..e7cfb65
--- /dev/null
+++ b/src/lib/Image.svelte
@@ -0,0 +1,53 @@
+<script lang='ts'>
+	type EnhancedImg = typeof import('*.png?enhanced').default;
+
+	type Props = {
+		src: string;
+		alt: string;
+	} & { [key: string]: unknown };
+
+	const { src, alt, ...rest }: Props = $props();
+
+	function importImage(src: string): EnhancedImg | undefined {
+		const pictures = import.meta.glob(`/src/**/*.{gif,heif,jpeg,jpg,png,tiff,webp}`, {
+			import: 'default',
+			query: {
+				enhanced: true,
+				w: '2400;2000;1600;1200;800;400',
+			},
+			eager: true,
+		});
+
+		for (const [path, picutureSrc] of Object.entries(pictures)) {
+			if (path.includes(src) || src.includes(path)) {
+				return picutureSrc as EnhancedImg;
+			}
+		}
+		return undefined;
+	}
+</script>
+
+{#snippet img(src: string)}
+	<img
+		{alt}
+		loading='lazy'
+		{src}
+		{...rest}
+	/>
+{/snippet}
+
+{#if src.startsWith('http')}
+	{@render img(src)}
+{:else}
+	{@const enhancedSrc = importImage(src)}
+	{#if enhancedSrc != null}
+		<enhanced:img
+			{alt}
+			loading='lazy'
+			src={enhancedSrc}
+			{...rest}
+		/>
+	{:else}
+		{@render img(src)}
+	{/if}
+{/if}