Created a way to abstract UI browser code

calimania · Jan 4, 2025 · ba9e8ca · ba9e8ca
1 parent 460f5e8
commit ba9e8ca
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 27 deletions.
diff --git a/src/interfaces/Product.ts b/src/interfaces/Product.ts
@@ -9,6 +9,24 @@ export default interface Product {
     metaTitle: string,
     metaDescription: string,
   };
+  Slides: {
+    id: string,
+    url: string,
+    formats: {
+      medium: {
+        ext: string,
+        url: string,
+        width: number,
+        height: number,
+      },
+      small: {
+        ext: string,
+        url: string,
+        width: number,
+        height: number
+      }
+    }
+  }[],
   Thumbnail: {
     id: string,
     url: string,

diff --git a/src/layouts/Posts.astro b/src/layouts/Posts.astro
@@ -70,7 +70,10 @@ const blogPage: { data: Page } | undefined = pages.find(
     </section>
     <Hr />
   </main>
-  <Main pageTitle="Posts" pageDesc="All the articles I've posted.">
+  <Main
+    pageTitle={blogPage?.data?.SEO?.metaTitle || "Articles"}
+    pageDesc={blogPage?.data?.SEO?.metaDescription || "Articles"}
+  >
     <ul>
       {
         paginatedPosts.map(({ data }) => (

diff --git a/src/pages/products/[slug].astro b/src/pages/products/[slug].astro
@@ -53,28 +53,8 @@ const selectedPrice = prices[0];
 ---
 
 <script>
-  // Front matter TS is executed in the ~server during the build process
-  // import confetti from 'canvas-confetti';
-
-  const buttons = document.querySelectorAll("[data-astro-image]");
-
-  // Add event listeners to fire confetti when a button is clicked.
-  buttons.forEach(button => {
-    button.addEventListener("click", e => {
-      const jsonData = e.target?.dataset?.astroImage; // Access the data attribute
-      try {
-        const jsonObject = JSON.parse(jsonData); // Parse the JSON string
-        const heroImage = document.querySelector(".hero-image");
-        if (heroImage) {
-          heroImage.src = jsonObject.url;
-        }
-
-        console.log({ e, jsonData, jsonObject });
-      } catch (error) {
-        console.error("Error parsing JSON", error);
-      }
-    });
-  });
+  import { ProductSlideshow } from "../../scripts/ui";
+  ProductSlideshow();
 </script>
 
 <Layout
@@ -104,9 +84,9 @@ const selectedPrice = prices[0];
                   {product?.data?.Slides?.map((slide: any) => (
                     <div class="aspect-w-3 aspect-h-4 overflow-hidden rounded-lg">
                       <img
-                        src={slide.url}
+                        src={slide?.formats?.thumbnail?.url}
                         alt={slide.alternativeText || ""}
-                        data-astro-image={JSON.stringify(slide?.formats?.large)}
+                        data-astro-image={JSON.stringify(slide?.formats?.small)}
                         class="h-full w-full cursor-pointer object-cover object-center transition-opacity hover:opacity-75"
                       />
                     </div>
@@ -136,8 +116,8 @@ const selectedPrice = prices[0];
           {/* Price selector */}
           <div class="mt-8">
             <div class="flex items-center justify-between">
-              <h2 class="text-sm font-medium text-gray-900 dark:text-white">
-                Size
+              <h2 class="text-2xl font-medium text-gray-900 dark:text-white">
+                Available Options
               </h2>
               <span class="text-sm text-gray-500">
                 Select your preferred option

diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
@@ -0,0 +1,30 @@
+/**
+ *
+ */
+export const ProductSlideshow = function () {
+  // Front matter TS is executed in the ~server during the build process
+  // import confetti from 'canvas-confetti';
+
+  const buttons = document.querySelectorAll("[data-astro-image]");
+
+  // Add event listeners to fire confetti when a button is clicked.
+  buttons.forEach(button => {
+    button.addEventListener("click", e => {
+      const jsonData = e.target?.getAttribute('data-astro-image');
+
+      try {
+        const jsonObject = JSON.parse(jsonData || ''); // Parse the JSON string
+        const heroImage = document.querySelector(".hero-image");
+        console.log({ heroImage })
+
+        if (heroImage) {
+          heroImage.src = jsonObject.url;
+        }
+
+        console.log({ e, jsonData, jsonObject });
+      } catch (error) {
+        console.error("Error parsing JSON", error);
+      }
+    });
+  });
+};