From df469ee7295411e892bd8d9ab48de794c84784c1 Mon Sep 17 00:00:00 2001
From: core <core@coredoes.dev>
Date: Sun, 18 Feb 2024 11:50:43 -0500
Subject: [PATCH] image weirdness

---
 src/lib/components/Image.svelte               | 42 +++++++++++++++----
 .../dashboard/vaccs/[id]/events/+page.svelte  |  4 +-
 vite.config.ts                                |  1 +
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
index 21d901b..bf51ce6 100644
--- a/src/lib/components/Image.svelte
+++ b/src/lib/components/Image.svelte
@@ -1,16 +1,44 @@
 <script lang="ts">
-  import { Image } from "@unpic/svelte";
   import { blurhashToCssGradientString } from "@unpic/placeholder";
 
-  export let blurhash: string | undefined = undefined;
+  export let alt: string;
+  export let src: string;
+  export let width: string | null | undefined = undefined;
+  export let height: string | null | undefined = undefined;
+  export let blurhash: string | null | undefined = undefined;
+  export let priority: boolean = false;
 
-  let background: string | undefined = undefined;
+  let props: any = $$restProps;
 
   $: {
-    if (blurhash) {
-      background = blurhashToCssGradientString(blurhash);
-    }
+      if (priority) {
+          props.loading ||= "eager";
+          props.fetchpriority ||= "high";
+      } else {
+          props.loading ||= "lazy";
+          props.decoding ||= "async";
+      }
+
+      if (props.alt === "") {
+          props.role ||= "presentation";
+      }
+
+      let style = '';
+
+      if (width) {
+          style += `width: ${width};`;
+      }
+      if (height) {
+          style += `height: ${height};`;
+      }
+
+      if (blurhash) {
+          let bg = blurhashToCssGradientString(blurhash);
+          style += `background-image: ${bg};`;
+      }
+
+      props.style += style;
   }
 </script>
 
-<Image {background} width={500} height={281} {...$$restProps} />
+<img {src} {alt} {width} {height} {...props} on:error={null} />
\ No newline at end of file
diff --git a/src/routes/dashboard/vaccs/[id]/events/+page.svelte b/src/routes/dashboard/vaccs/[id]/events/+page.svelte
index 6e6846b..c175a5a 100644
--- a/src/routes/dashboard/vaccs/[id]/events/+page.svelte
+++ b/src/routes/dashboard/vaccs/[id]/events/+page.svelte
@@ -40,8 +40,8 @@
       <Table.Row>
         <Table.Cell>
           <Image
-            width="500px"
-            height="281px"
+                  width="480px"
+            class="rounded"
             src={event.bannerUrl}
             blurhash={event.bannerBlurHash}
             alt={event.name} />
diff --git a/vite.config.ts b/vite.config.ts
index 0859949..8460938 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -21,6 +21,7 @@ export default defineConfig({
       "jsonwebtoken",
       "@prisma/client",
       "marked",
+      "@unpic/placeholder"
     ],
   },
 });