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>

src/routes/+layout.js

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/+layout.svelte

@@ -2,7 +2,9 @@
 	import favicon from "$lib/assets/favicon.svg";
 	import { SidebarLeft } from "$lib/sidebar/sidebar_left.svelte";
 	import { SidebarRight } from "$lib/sidebar/sidebar_right.svelte";
+	import { WebButtons } from "$lib/web_buttons/webButtons.svelte";
 	let { children } = $props();
+	export const prerender = true;
 </script>
 
 <svelte:head>
@@ -27,7 +29,7 @@
 </div>
 <hr style="width: 97%; border-radius: 100px" />
 <center>
-	<a>meow</a>
+	{@render WebButtons()}
 </center>
 <hr style="width: 92%; border-radius: 100px" />
 <footer>

src/routes/+page.svelte

@@ -1 +1 @@
-<p>home</p>
+<p>Slowly converting this website to svelte</p>