From b47c7a51b4c6bcecac260d62ec8feb5e675ed258 Mon Sep 17 00:00:00 2001
From: Will Stensvold <will@sludge.link>
Date: Wed, 25 Mar 2026 22:46:47 -0500
Subject: [PATCH] made the cards not look dumb. also you can literally just
 make up html tags. I think I knew this now i used it

---
 .../lib/assests}/Bacon_(Chipotle).jpg         | Bin
 .../pork => src/lib/assests}/Bacon_(Ends).jpg | Bin
 .../lib/assests}/Bacon_(Original).jpg         | Bin
 .../lib/assests}/Bacon_(Peppered).jpg         | Bin
 {static/pork => src/lib/assests}/Chop.jpg     | Bin
 .../pork => src/lib/assests}/Ham_(Smoked).jpg | Bin
 .../lib/assests}/Hocks_(Smoked).jpg           | Bin
 .../lib/assests}/Links_(Blueberry).jpg        | Bin
 .../pork => src/lib/assests}/Ribs_(Spare).jpg | Bin
 {static/pork => src/lib/assests}/Roast.jpg    | Bin
 .../pork => src/lib/assests}/Roast_(Loin).jpg | Bin
 {static/pork => src/lib/assests}/Steak.jpg    | Bin
 .../lib/assests/pork-links.jpg                | Bin
 src/routes/pork/+page.server.ts               |  15 +++
 src/routes/pork/+page.svelte                  |  89 ++++++++++++------
 15 files changed, 76 insertions(+), 28 deletions(-)
 rename {static/pork => src/lib/assests}/Bacon_(Chipotle).jpg (100%)
 rename {static/pork => src/lib/assests}/Bacon_(Ends).jpg (100%)
 rename {static/pork => src/lib/assests}/Bacon_(Original).jpg (100%)
 rename {static/pork => src/lib/assests}/Bacon_(Peppered).jpg (100%)
 rename {static/pork => src/lib/assests}/Chop.jpg (100%)
 rename {static/pork => src/lib/assests}/Ham_(Smoked).jpg (100%)
 rename {static/pork => src/lib/assests}/Hocks_(Smoked).jpg (100%)
 rename {static/pork => src/lib/assests}/Links_(Blueberry).jpg (100%)
 rename {static/pork => src/lib/assests}/Ribs_(Spare).jpg (100%)
 rename {static/pork => src/lib/assests}/Roast.jpg (100%)
 rename {static/pork => src/lib/assests}/Roast_(Loin).jpg (100%)
 rename {static/pork => src/lib/assests}/Steak.jpg (100%)
 rename static/pork/Links_(Original).jpg => src/lib/assests/pork-links.jpg (100%)

diff --git a/static/pork/Bacon_(Chipotle).jpg b/src/lib/assests/Bacon_(Chipotle).jpg
similarity index 100%
rename from static/pork/Bacon_(Chipotle).jpg
rename to src/lib/assests/Bacon_(Chipotle).jpg
diff --git a/static/pork/Bacon_(Ends).jpg b/src/lib/assests/Bacon_(Ends).jpg
similarity index 100%
rename from static/pork/Bacon_(Ends).jpg
rename to src/lib/assests/Bacon_(Ends).jpg
diff --git a/static/pork/Bacon_(Original).jpg b/src/lib/assests/Bacon_(Original).jpg
similarity index 100%
rename from static/pork/Bacon_(Original).jpg
rename to src/lib/assests/Bacon_(Original).jpg
diff --git a/static/pork/Bacon_(Peppered).jpg b/src/lib/assests/Bacon_(Peppered).jpg
similarity index 100%
rename from static/pork/Bacon_(Peppered).jpg
rename to src/lib/assests/Bacon_(Peppered).jpg
diff --git a/static/pork/Chop.jpg b/src/lib/assests/Chop.jpg
similarity index 100%
rename from static/pork/Chop.jpg
rename to src/lib/assests/Chop.jpg
diff --git a/static/pork/Ham_(Smoked).jpg b/src/lib/assests/Ham_(Smoked).jpg
similarity index 100%
rename from static/pork/Ham_(Smoked).jpg
rename to src/lib/assests/Ham_(Smoked).jpg
diff --git a/static/pork/Hocks_(Smoked).jpg b/src/lib/assests/Hocks_(Smoked).jpg
similarity index 100%
rename from static/pork/Hocks_(Smoked).jpg
rename to src/lib/assests/Hocks_(Smoked).jpg
diff --git a/static/pork/Links_(Blueberry).jpg b/src/lib/assests/Links_(Blueberry).jpg
similarity index 100%
rename from static/pork/Links_(Blueberry).jpg
rename to src/lib/assests/Links_(Blueberry).jpg
diff --git a/static/pork/Ribs_(Spare).jpg b/src/lib/assests/Ribs_(Spare).jpg
similarity index 100%
rename from static/pork/Ribs_(Spare).jpg
rename to src/lib/assests/Ribs_(Spare).jpg
diff --git a/static/pork/Roast.jpg b/src/lib/assests/Roast.jpg
similarity index 100%
rename from static/pork/Roast.jpg
rename to src/lib/assests/Roast.jpg
diff --git a/static/pork/Roast_(Loin).jpg b/src/lib/assests/Roast_(Loin).jpg
similarity index 100%
rename from static/pork/Roast_(Loin).jpg
rename to src/lib/assests/Roast_(Loin).jpg
diff --git a/static/pork/Steak.jpg b/src/lib/assests/Steak.jpg
similarity index 100%
rename from static/pork/Steak.jpg
rename to src/lib/assests/Steak.jpg
diff --git a/static/pork/Links_(Original).jpg b/src/lib/assests/pork-links.jpg
similarity index 100%
rename from static/pork/Links_(Original).jpg
rename to src/lib/assests/pork-links.jpg
diff --git a/src/routes/pork/+page.server.ts b/src/routes/pork/+page.server.ts
index a3e4a39..1ec9dcf 100644
--- a/src/routes/pork/+page.server.ts
+++ b/src/routes/pork/+page.server.ts
@@ -10,6 +10,7 @@ const PRICE_PER_LB = 6
 const pork = [
   {
     name: "pork links",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: true,
     lb_package: true,
@@ -20,6 +21,7 @@ const pork = [
   },
   {
     name: "bacon",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: true,
     tubed: false,
     lb_package: true,
@@ -33,6 +35,7 @@ const pork = [
   },
   {
     name: "bratwurst",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: true,
     lb_package: true,
@@ -49,6 +52,7 @@ const pork = [
   },
   {
     name: "rings",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: true,
     lb_package: true,
@@ -59,6 +63,7 @@ const pork = [
   },
   {
     name: "patties",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     lb_package: true,
@@ -70,6 +75,7 @@ const pork = [
   },
   {
     name: "ham",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: true,
     tubed: false,
     lb_package: false,
@@ -77,54 +83,63 @@ const pork = [
   },
   {
     name: "raw ham",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 7, max: 15 }
   },
   {
     name: "loin roast",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 3, max: 4 }
   },
   {
     name: "chop",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 0.75, max: 1.5 }
   },
   {
     name: "steak",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 1.5, max: 3 }
   },
   {
     name: "belly",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 7, max: 10 }
   },
   {
     name: "spare ribs",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 2, max: 4 }
   },
   {
     name: "butt",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 3, max: 5 }
   },
   {
     name: "smoked hocks",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: true,
     tubed: false,
     avg_weight: { min: 1, max: 2 }
   },
   {
     name: "roast",
+    src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 4, max: 7 }
diff --git a/src/routes/pork/+page.svelte b/src/routes/pork/+page.svelte
index 63bb974..b93aa46 100644
--- a/src/routes/pork/+page.svelte
+++ b/src/routes/pork/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import type { MouseEventHandler } from "svelte/elements";
+  import { onMount } from "svelte";
+
   let { data } = $props<{ data: { pork: Pork[]; PRICE_PER_LB: number } }>();
   interface Pork {
     pork: {
@@ -15,14 +16,13 @@
     };
   }
 
-  let selected = $state("Chop");
-
-  const change_photo: MouseEventHandler<HTMLLIElement> = ({
-    currentTarget: { id },
-  }) => {
-    // console.log(id);
-    // selected = id;
-  };
+  onMount(async () => {
+    const images = import.meta.glob("$lib/assests/*.jpg", {
+      eager: true,
+      query: { enhanced: true },
+    });
+    console.log(images);
+  });
 </script>
 
 <svelte:head>
@@ -38,22 +38,30 @@
   <h5>this ain't your grocery store's pork</h5>
   <h5>All priced at {data.PRICE_PER_LB}$/#</h5>
   <div id="pork">
-    {#each data.pork as { name, cured, tubed, lb_package, flavors, avg_weight }}
-      <div onmouseenter={change_photo} id={name}>
+    {#each data.pork as { name, src, cured, tubed, lb_package, flavors, avg_weight }}
+      <card id={name}>
         <h3>{name}</h3>
-        {#if lb_package}
-          <p>1 lb</p>
-        {:else}
-          <p>{avg_weight.min}~ {avg_weight.max} lbs</p>
-        {/if}
-        {#if cured}
-          <span>Cured!</span>
-        {/if}
-        {#if tubed}
-          <span>Tubed!</span>
-        {/if}
+        <img {src} alt="A photo of {name}" />
+        <div>
+          {#if cured}
+            <span>Cured!</span>
+          {/if}
+          {#if tubed}
+            <span>Tubed!</span>
+          {/if}
+          <p>
+            Weight:
+            {#if lb_package}
+              1 lb
+            {:else}
+              {avg_weight.min}~ {avg_weight.max} lbs
+            {/if}
+          </p>
+        </div>
+
         {#if flavors != undefined}
           <ul>
+            <li>Flavors:</li>
             {#each flavors as flavor}
               <li>
                 {flavor}
@@ -61,7 +69,7 @@
             {/each}
           </ul>
         {/if}
-      </div>
+      </card>
     {/each}
     <!-- <img -->
     <!--   src={`/pork/${selected.replace(" ", "_")}.jpg`} -->
@@ -104,18 +112,42 @@
     font-size: 1rem;
     gap: 1rem;
     width: 100%;
-    div {
+    card {
       background: var(--primary-9);
       border-radius: var(--br);
       padding: 1rem;
       display: flex;
       flex-direction: column;
-    }
-    h3 {
-      text-transform: capitalize;
+      gap: 1rem;
+      position: relative;
+      img {
+        width: 100%;
+        border-radius: var(--br);
+      }
+      div {
+        display: flex;
+        justify-content: space-around;
+        font-size: 0.75rem;
+      }
+      span {
+        // font-size: 0.75rem;
+        background: var(--primary-5);
+        width: fit-content;
+        border-radius: var(--br);
+        padding: 0.125rem 0.325rem;
+      }
+      h3 {
+        position: absolute;
+        background: var(--primary-9);
+        border-radius: 0 0 var(--br) 0;
+        padding: 0.125rem 0.325rem;
+        top: 1rem;
+        text-transform: capitalize;
+      }
     }
 
     ul {
+      font-size: 0.85rem;
       width: 100%;
       display: inherit;
       flex-direction: column;
@@ -124,6 +156,7 @@
         display: inherit;
         gap: 1rem;
         padding-left: 1rem;
+        text-transform: capitalize;
         &:nth-child(even) {
           background: var(--primary-8);
         }
@@ -140,7 +173,7 @@
       flex-wrap: wrap;
       align-items: center;
       justify-content: space-around;
-      div {
+      card {
         flex-basis: 20rem;
         // align-items: center;
         justify-content: center;