Improve image handling

package.json

@@ -11,7 +11,9 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/adapter-node": "^1.3.1",
 		"@sveltejs/kit": "^1.27.4",
+		"@zerodevx/svelte-img": "^2.1.0",
 		"lorem-ipsum": "^2.0.8",
 		"sass": "^1.69.5",
 		"svelte": "^4.0.5",

src/lib/assets/plants/aloe-vera.toml

@@ -3,9 +3,8 @@ name = "Aloe Vera"
 bin_name = "Aloe Vera"
 
 [image]
-small = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Aloe_Vera_%284700054020%29.jpg/320px-Aloe_Vera_%284700054020%29.jpg"
-medium = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Aloe_Vera_%284700054020%29.jpg/1024px-Aloe_Vera_%284700054020%29.jpg"
-large = "https://upload.wikimedia.org/wikipedia/commons/d/d2/Aloe_Vera_%284700054020%29.jpg"
+local = "aloe-vera.jpg"
+format = "jpeg"
 source = "https://commons.wikimedia.org/wiki/File:Aloe_Vera_(4700054020).jpg"
 alt = """
 Aloe Vera. \

src/lib/assets/plants/monstera-deliciosa.toml

@@ -3,9 +3,9 @@ name = "Monstera Deliciosa"
 bin_name = "Monstera Deliciosa"
 
 [image]
-small = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/New_Monstera_Deliciosa_Leaf.jpg/360px-New_Monstera_Deliciosa_Leaf.jpg"
-medium = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/New_Monstera_Deliciosa_Leaf.jpg/768px-New_Monstera_Deliciosa_Leaf.jpg"
-large = "https://upload.wikimedia.org/wikipedia/commons/d/d4/New_Monstera_Deliciosa_Leaf.jpg"
+remote = "https://upload.wikimedia.org/wikipedia/commons/d/d4/New_Monstera_Deliciosa_Leaf.jpg"
+format = "json"
+width = 1512
 source = "https://commons.wikimedia.org/wiki/File:New_Monstera_Deliciosa_Leaf.jpg"
 alt = """
 Monstera deliciosa. \

src/lib/plants.ts

@@ -7,9 +7,10 @@ export type PlantData = {
 	bin_name: string;
 
 	image: {
-		small: string;
-		medium: string;
-		large: string;
+		local?: string;
+		remote?: string;
+		format?: string;
+		width?: number;
 		source: string;
 		alt: string;
 	};

src/routes/+page.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
   import { plants } from "$lib/plants";
+  import Img from "@zerodevx/svelte-img";
+  const images = import.meta.glob("$lib/assets/images/*.{png,jpg,jpeg,webp}", {
+    import: "default",
+    eager: true,
+    query: { w: 256, h: 128, fit: "cover", as: "run:2", normalize: true },
+  });
 </script>
 
 <h1>Plantwiki</h1>
@@ -8,9 +14,16 @@
     <div class="plant-item-wrapper">
       <div class="plant-item">
         <a class="plant-link" href="/plants/{plant.slug}">
-          <img
-            class="plant-image"
-            src={plant.image.small}
+          <Img
+            class="sv-image"
+            src={images[`/src/lib/assets/images/${plant.image.local}`] ?? {
+              img: { src: plant.image.remote, w: plant.image.width },
+              sources: {
+                [plant.image.format ?? "jpeg"]: [
+                  { src: plant.image.remote, w: plant.image.width },
+                ],
+              },
+            }}
             alt={plant.image.alt}
           />
           <h2 class="plant-title">{plant.name}</h2>
@@ -44,6 +57,7 @@
       height: 128px;
       width: 256px;
       user-select: none;
+      overflow: hidden;
 
       &:hover {
         margin: 0.75em 1.25em 0.75em 0.75em;
@@ -63,12 +77,6 @@
         display: block;
         position: relative;
 
-        img {
-          border-radius: 0.5em;
-          height: 128px;
-          width: 256px;
-          object-fit: cover;
-        }
         h2.plant-title {
           transition-duration: 0.25s;
           position: absolute;
@@ -110,4 +118,14 @@
       }
     }
   }
+  :global(.plants-list .sv-image) {
+    border-radius: 0.5em;
+    height: 128px;
+    width: 256px;
+    object-fit: cover;
+
+    --reveal-transform: scale(1.02);
+    --reveal-transition: opacity 1s ease-in, transform 0.8s ease-out;
+    --reveal-filter: blur(20px);
+  }
 </style>

src/routes/plants/[plant]/+page.ts

@@ -3,7 +3,6 @@ import type { PageLoad } from "./$types";
 import { plants, type PlantData } from "$lib/plants";
 
 export const load: PageLoad = ({ params }) => {
-	console.log(plants);
 	if (plants[params.plant]) {
 		return plants[params.plant] as PlantData;
 	}

src/routes/plants/[plant]/PlantImage.svelte

@@ -1,11 +1,27 @@
 <script lang="ts">
-  import type { PlantData } from "./proxy+page";
+  import type { PlantData } from "$lib/plants";
+  import Img from "@zerodevx/svelte-img";
 
   export let image: PlantData["image"];
+
+  const images = import.meta.glob("$lib/assets/images/*.{png,jpg,jpeg,webp}", {
+    import: "default",
+    eager: true,
+    query: { w: 1024, h: 512, fit: "cover", as: "run:2", normalize: true },
+  });
+
+  const src = images[`/src/lib/assets/images/${image.local}`] ?? {
+    img: { src: image.remote, w: image.width },
+    sources: {
+      [image.format ?? "jpeg"]: [{ src: image.remote, w: image.width }],
+    },
+  };
 </script>
 
 <figure class="plant-image">
-  <img src={image.medium} alt={image.alt} />
+  <div class="image-wrap">
+    <Img class="sv-image" {src} alt={image.alt} />
+  </div>
 
   {#if image.source != ""}
     <a class="image-source" href={image.source} aria-label="Image Source">
@@ -42,7 +58,9 @@
       transition-duration: 0.5s;
     }
 
-    img {
+    .image-wrap {
+      aspect-ratio: 2 / 1;
+      overflow: hidden;
       border-radius: 0.5em;
       width: 100%;
       object-fit: cover;
@@ -52,4 +70,19 @@
       background-color: colors.$highlight;
     }
   }
+  :global(.plant-image picture) {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 2 / 1;
+  }
+  :global(.sv-image) {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 2 / 1;
+    object-fit: cover;
+
+    --reveal-transform: scale(1.02);
+    --reveal-transition: opacity 1s ease-in, transform 0.8s ease-out;
+    --reveal-filter: blur(20px);
+  }
 </style>

src/routes/plants/[plant]/TempBar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import type { PlantData } from "./proxy+page";
+  import type { PlantData } from "$lib/plants";
+
   export let temp: PlantData["temp"];
 </script>
 

svelte.config.js

@@ -1,5 +1,5 @@
-import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import adapter from "@sveltejs/adapter-node";
+import { vitePreprocess } from "@sveltejs/kit/vite";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -11,8 +11,8 @@ const config = {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
-	}
+		adapter: adapter(),
+	},
 };
 
 export default config;

vite.config.ts

@@ -1,7 +1,8 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
 import { ViteToml } from "vite-plugin-toml";
+import { imagetools } from "@zerodevx/svelte-img/vite";
 
 export default defineConfig({
-	plugins: [sveltekit(), ViteToml()],
+	plugins: [ViteToml(), sveltekit(), imagetools()],
 });