web button support

src/lib/web_buttons/dic.json

@@ -0,0 +1,12 @@
+[
+   {
+      "name":"paw",
+      "url":"",
+      "path":"paw.png"
+   },
+   {
+      "name":"catgirl",
+      "url":"",
+      "path":"catgirl.gif"
+   }
+]

src/lib/web_buttons/webButtons.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import json from "./dic.json";
+	const imageModules = import.meta.glob(
+		"./imgs/*.{avif,AVIF,heif,HEIF,jpeg,JPEG,jpg,JPG,png,PNG,tiff,TIFF,webp,WEBP}",
+		{
+			eager: true,
+			import: "default",
+			query: {
+				enhanced: true,
+			},
+		},
+	);
+	const gifModules = import.meta.glob("./imgs/*.{gif,GIF}", {
+		eager: true,
+		import: "default",
+	});
+	function getImageUrl(name: string): any {
+		let query = "./imgs/" + name;
+		return imageModules[query] || gifModules[query];
+	}
+	export { WebButtons };
+</script>
+
+{#snippet WebButtons()}
+	{#each json as web_button}
+		<a
+			class="web_button_container"
+			title="{web_button.name} web button (88x31)"
+			href={web_button.url}
+		>
+			<enhanced:img
+				class="web_button_img"
+				src={getImageUrl(web_button.path)}
+				alt="88x31 web button"
+				loading="lazy"
+			/>
+		</a>
+	{/each}
+{/snippet}
+
+<style>
+	.web_button_div {
+		display: flex;
+		flex-direction: row;
+	}
+	.web_button_container {
+	}
+	.web_button_img {
+	}
+</style>