feat: add japan trip images

.gitattributes

@@ -0,0 +1 @@
+**/*.webp filter=lfs diff=lfs merge=lfs -text

package.json

@@ -12,6 +12,7 @@
     "format": "prettier --write ."
   },
   "devDependencies": {
+    "@sveltejs/enhanced-img": "^0.3.8",
     "@sveltejs/kit": "^2.5.20",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@tailwindcss/forms": "^0.5.7",
@@ -46,6 +47,7 @@
   "trustedDependencies": [
     "@sveltejs/kit",
     "esbuild",
+    "sharp",
     "svelte-preprocess"
   ]
 }

src/routes/+layout.svelte

@@ -150,7 +150,7 @@
 		"
 		style="border-style: ridge hidden hidden hidden;"
 	>
-		<div class="bg-opacity-100 pixelate-bg flex flex-row flex-nowrap gap-2 justify-start overflow-auto">
+		<div class="flex flex-row flex-nowrap gap-2 justify-start overflow-auto">
 			{#each menuItems as item}
 				{@const highlight = isRoute(item.href)}
 				<NavButton {highlight} {...item} />

src/routes/entries/hello-world/+page.md

@@ -5,4 +5,4 @@ layout = "blogpost"
 excerpt = "meow"
 +++
 
-hello everyone :3
+hello everyone :3c

src/routes/entries/japan-trip24/+page.md

@@ -0,0 +1,25 @@
++++
+title = "japan trip 09/24"
+date = "2024-09-19"
+layout = "blogpost"
+excerpt = "photos from my trip to japan"
++++
+
+<script lang="ts">
+    export let data;
+</script>
+
+## 1-16 / 09 / 2024
+
+some photos i took while on a japan trip
+
+<p>
+these are *not* sorted, have fun trying to figure out the actual order
+<span class="text-xs italic">(i accidentally stripped the exif data and im too lazy to find the images again)</span>
+</p>
+
+<div class="grid gap-x-2 md:grid-cols-4">
+{#each data.images as src}
+<enhanced:img class="w-full h-full object-cover [transition:transform_.2s] md:hover:[transform:scale(2)]" {src}/>
+{/each}
+</div>

src/routes/entries/japan-trip24/+page.ts

@@ -0,0 +1,12 @@
+const images = import.meta.glob<any>(
+    './images/*.webp',
+    { query: { enhanced: true }, eager: true }
+);
+
+export function load() {
+    const imgs =
+        Object.values(images).map(module => {
+            return module.default
+        });
+    return { images: imgs }
+}