migrate from imgix

jaskaransarkaria · Dec 29, 2023 · 241dbcf · 241dbcf
1 parent b0ac73f
commit 241dbcf
Show file tree

Hide file tree

Showing 27 changed files with 133 additions and 119 deletions.
diff --git a/src/app.html b/src/app.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <link rel="preconnect" href="https://enki.imgix.net" />
+    <link rel="preconnect" href="https://storage.googleapis.com/enki-website" />
     <link rel="preconnect" href="https://server.enkionline.com" />
     <link rel="preconnect" href="https://plausible.io" />
     <link rel="preconnect" href="https://tickettailor.com" />

diff --git a/src/lib/components/BackToTop/BackToTop.svelte b/src/lib/components/BackToTop/BackToTop.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { PUBLIC_BUCKET_URL } from "$env/static/public";
+
   export let showOnPx = 150;
   let hidden = true;
 
@@ -27,7 +29,7 @@
 
 <button class="back-to-top" on:click={goTop} class:hidden
   ><img
-    src="https://enki.imgix.net/back_to_top_3.png"
+    src={`${PUBLIC_BUCKET_URL}/back_to_top_3.png`}
     alt="back to the top button"
   /></button
 >

diff --git a/src/lib/components/Basket/Basket.svelte b/src/lib/components/Basket/Basket.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { PUBLIC_BUCKET_URL } from "$env/static/public";
   import { goto } from "$app/navigation";
   import { fade } from "svelte/transition";
   import { basket } from "$lib/stores/basket";
@@ -48,7 +49,7 @@
         in:fade
       >
         <img
-          src={`https://enki.imgix.net/${obj.id}-0?auto=format,compress`}
+          src={`${PUBLIC_BUCKET_URL}/${obj.id}-0`}
           alt={`${obj.name}`}
           on:click={() => goto(`/shop/product/${obj.id}`)}
           class={isMobile ? "mobile-product-img" : "product-img"}

diff --git a/src/lib/components/Breadcrumbs/Breadcrumbs.svelte b/src/lib/components/Breadcrumbs/Breadcrumbs.svelte
@@ -3,7 +3,7 @@
   import { onMount } from "svelte";
   import { refreshCategories } from "$lib/utils/requests";
   import { readonlyAllCategories } from "$lib/stores/categories";
-  import { PUBLIC_SERVER_URL } from "$env/static/public";
+  import { PUBLIC_BUCKET_URL, PUBLIC_SERVER_URL } from "$env/static/public";
 
   import type { Category } from "$lib/types/category";
   import type { Base } from "$lib/types/base";
@@ -24,6 +24,7 @@
     ParentId: 0,
     Children: [],
     NominalCode: "",
+    Description: "",
   };
 
   onMount(async () => {
@@ -84,10 +85,7 @@
       data-testid="breadcrumb"
       on:click={async () => await handleBreadcrumbClick(breadcrumb)}
     >
-      <img
-        src="https://enki.imgix.net/empty_hex_1.png?auto=format,compress"
-        alt="breadcrumb icon"
-      />
+      <img src={`${PUBLIC_BUCKET_URL}/empty_hex_1.png`} alt="breadcrumb icon" />
       {breadcrumb.Name}
     </button>
   {/each}

diff --git a/src/lib/components/DetailedSingleProduct/DetailedSingleProduct.svelte b/src/lib/components/DetailedSingleProduct/DetailedSingleProduct.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
+  import { PUBLIC_BUCKET_URL } from "$env/static/public";
   import { clickOutside } from "$lib/utils/clickOutside";
   import AddToBasket from "$lib/components/AddToBasket/AddToBasket.svelte";
   import MobileClose from "$lib/components/MobileClose/MobileClose.svelte";
   import SwipeImage from "$lib/components/SwipeImage/SwipeImage.svelte";
+  import { getImageFilename } from "$lib/utils/getImageFilename";
 
   import type { Product } from "$lib/types/product";
 
@@ -21,22 +23,17 @@
     }
   };
 
-  const createImgArr = (
-    product: Product,
-    imgWidth?: number
-  ): { src: string; alt: string }[] =>
+  const createImgArr = (product: Product): { src: string; alt: string }[] =>
     product?.ProductImages?.length
-      ? product.ProductImages.map((_, idx) => ({
-          src: `https://enki.imgix.net/${product.Id}-${idx}?q=100${
-            imgWidth ? `&w=${imgWidth}` : ""
-          }`,
+      ? product.ProductImages.map((img, idx) => ({
+          src: `${PUBLIC_BUCKET_URL}/${getImageFilename(img.ImageUrl)}`,
           alt: `${product.Name} image ${idx + 1}`,
         }))
       : [
           {
-            src: `https://enki.imgix.net/${product.Id}-0?q=100${
-              imgWidth ? `&w=${imgWidth}` : ""
-            }`,
+            src: `${PUBLIC_BUCKET_URL}/${getImageFilename(
+              product.ProductImages[0].ImageUrl
+            )}`,
             alt: `${product.Name} image 1`,
           },
         ];
@@ -152,10 +149,7 @@
           bind:bool={showFullScreen}
           positionOverride="top: 1%; left: 2%"
         />
-        <SwipeImage
-          imgArr={createImgArr(product, innerWidth * (100 / 100))}
-          setImgWidth
-        />
+        <SwipeImage imgArr={createImgArr(product)} setImgWidth />
       {:else}
         <div class="full-screen-img-view">
           <SwipeImage imgArr={createImgArr(product)} setImgWidth fullScreen />

diff --git a/src/lib/components/Footer/Footer.svelte b/src/lib/components/Footer/Footer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { fade } from "svelte/transition";
+  import { PUBLIC_BUCKET_URL } from "$env/static/public";
   import MailChimpSubscribe from "$lib/components/MailChimpSubscribe/MailChimpSubscribe.svelte";
 
   $: outerWidth = 0;
@@ -14,7 +15,7 @@
       <a href="/contact">
         <img
           class="footer-icons"
-          src="https://enki.imgix.net/telephone_3.png?q=100"
+          src={`${PUBLIC_BUCKET_URL}/telephone_3.png`}
           alt="contact us"
         />
       </a>
@@ -25,7 +26,7 @@
       >
         <img
           class="footer-icons"
-          src="https://enki.imgix.net/insta_logo_3.png?q=100"
+          src={`${PUBLIC_BUCKET_URL}/insta_logo_3.png`}
           alt="link to instagram"
         />
       </a>
@@ -36,7 +37,7 @@
       >
         <img
           class="footer-icons"
-          src="https://enki.imgix.net/fb_logo_3.png?q=100"
+          src={`${PUBLIC_BUCKET_URL}/fb_logo_3.png`}
           alt="link to facebook"
         />
       </a>
@@ -52,19 +53,19 @@
         <div class="mobile-icons">
           <img
             class="mobile-footer-icons"
-            src="https://enki.imgix.net/telephone.png?auto=format,compress"
+            src={`${PUBLIC_BUCKET_URL}/telephone.png`}
             alt="contact us"
             on:click={() => goto("/contact")}
           />
           <img
             class="mobile-footer-icons"
-            src="https://enki.imgix.net/insta_logo_3.png?q=100"
+            src={`${PUBLIC_BUCKET_URL}/insta_logo_3.png`}
             alt="link to instagram"
             on:click={() => goto("https://www.instagram.com/enkionline/?hl=en")}
           />
           <img
             class="mobile-footer-icons"
-            src="https://enki.imgix.net/fb_logo_3.png?q=100"
+            src={`${PUBLIC_BUCKET_URL}/fb_logo_3.png`}
             alt="link to facebook"
             on:click={() =>
               goto("https://www.facebook.com/Enki-1665334930147391")}

diff --git a/src/lib/components/Header/Header.svelte b/src/lib/components/Header/Header.svelte
@@ -9,6 +9,7 @@
   import SearchProducts from "$lib/components/SearchProducts/SearchProducts.svelte";
   import Hamburger from "$lib/components/Hamburger/Hamburger.svelte";
   import { clickOutside } from "$lib/utils/clickOutside";
+  import { PUBLIC_BUCKET_URL } from "$env/static/public";
 
   export let whitelistedUserAgent: boolean;
 
@@ -125,7 +126,7 @@
     {#if !showSearch}
       <img
         transition:fade|local
-        src="https://enki.imgix.net/header_1.png?auto=compress"
+        src={`${PUBLIC_BUCKET_URL}/header_1.png`}
         alt="Enki"
         loading="eager"
         class="enki-logo"
@@ -135,7 +136,7 @@
   {:else}
     <img
       transition:fade|local
-      src="https://enki.imgix.net/header_1.png?auto=compress"
+      src={`${PUBLIC_BUCKET_URL}/header_1.png`}
       alt="Enki"
       loading="eager"
       class="enki-logo"
@@ -145,7 +146,7 @@
   <div class="right-container">
     <img
       class="search-icon"
-      src="https://enki.imgix.net/search-icon.png?auto=format,compress"
+      src={`${PUBLIC_BUCKET_URL}/search-icon.png`}
       alt="search"
       style={move($left)}
       on:click={handleClick}
@@ -163,7 +164,7 @@
     >
       <img
         class="basket-icon"
-        src="https://enki.imgix.net/basket-icon.png?auto=format,compress"
+        src={`${PUBLIC_BUCKET_URL}/basket-icon.png`}
         alt="basket"
         on:click={() => goto("/shop/basket")}
       />

diff --git a/src/lib/components/Hex/Hex.svelte b/src/lib/components/Hex/Hex.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { PUBLIC_BUCKET_URL } from "$env/static/public";
   import { fade } from "svelte/transition";
   import { lazy } from "$lib/utils/lazyAction";
 
@@ -14,6 +15,7 @@
     ParentId: 0,
     Children: [],
     NominalCode: null,
+    Description: "",
   };
   export let loaded: Map<string, HTMLImageElement> = new Map();
 </script>
@@ -22,7 +24,7 @@
   {#if isEmpty}
     <div class="hex-link">
       <img
-        src="https://enki.imgix.net/empty_hex_4.png?auto=format,compress&q=80"
+        src={`${PUBLIC_BUCKET_URL}/empty_hex_4.png`}
         alt="hexagon shape for the category button"
         data-testid="empty-hex"
       />
@@ -39,15 +41,15 @@
           in:fade={{ duration: 500 }}
           src="/grey_square.png"
           use:lazy={{
-            src: `https://enki.imgix.net/${category.Id}?auto=format,compress&q=60&lossless=1&w=0.3`,
+            src: `${PUBLIC_BUCKET_URL}/${category.Description}}`,
             loaded,
           }}
           alt={`category ${category.Name}`}
           data-testid="cdn-img"
         />
         <img
           in:fade={{ duration: 500 }}
-          src={`https://enki.imgix.net/hex_${Math.floor(
+          src={`${PUBLIC_BUCKET_URL}/hex_${Math.floor(
             Math.random() * (6 - 1 + 1) + 1
           )}.svg`}
           alt="hexagon shape for the category button"

diff --git a/src/lib/components/ProductView/ProductView.svelte b/src/lib/components/ProductView/ProductView.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+  import { PUBLIC_BUCKET_URL } from "$env/static/public";
   import { beforeUpdate } from "svelte";
   import { fade } from "svelte/transition";
   import { browser } from "$app/environment";
   import { groupBy } from "lodash-es";
   import Banner from "$lib/components/Banner/Banner.svelte";
   import SingleProduct from "$lib/components/SingleProduct/SingleProduct.svelte";
+  import { getImageFilename } from "$lib/utils/getImageFilename";
 
   import type { Category } from "$lib/types/category";
   import type { Product } from "$lib/types/product";
@@ -189,8 +191,7 @@
             <div class="gift-wrap-img-container">
               <div class="img-container">
                 <img
-                  role="img"
-                  src="https://enki.imgix.net/gift-wrap-1.jpeg?format=auto,compress"
+                  src={`${PUBLIC_BUCKET_URL}/gift-wrap-1.jpeg`}
                   alt="the inside of a card with happy birthday written out"
                 />
                 <p>
@@ -201,8 +202,7 @@
               </div>
               <div class="img-container">
                 <img
-                  role="img"
-                  src="https://enki.imgix.net/gift-wrap-2.jpeg?format=auto,compress"
+                  src={`${PUBLIC_BUCKET_URL}/gift-wrap-2.jpeg`}
                   alt="some gifts wrapped with colourful wrapping paper and pink and green ribbon"
                 />
                 <p>
@@ -214,8 +214,7 @@
               </div>
               <div class="img-container">
                 <img
-                  role="img"
-                  src="https://enki.imgix.net/gift-wrap-3.jpeg?format=auto,compress"
+                  src={`${PUBLIC_BUCKET_URL}/gift-wrap-3.jpeg`}
                   alt="some gifts wrapped with brown paper wrapping paper and yellow and green ribbon"
                 />
                 <p>

diff --git a/src/lib/components/SingleProduct/SingleProduct.svelte b/src/lib/components/SingleProduct/SingleProduct.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
+  import { PUBLIC_BUCKET_URL } from "$env/static/public";
   import ImageLoader from "$lib/components/Image/ImageLoader.svelte";
   import DetailedSingleProduct from "$lib/components/DetailedSingleProduct/DetailedSingleProduct.svelte";
 
   import type { Product } from "$lib/types/product";
   import type { Category } from "$lib/types/category";
+  import { getImageFilename } from "$lib/utils/getImageFilename";
 
   export let variantCategory: Category | null = null;
   export let product: Product | null;
@@ -28,7 +30,7 @@
   >
     <div class="position-img">
       <ImageLoader
-        src={`https://enki.imgix.net/${variantCategory.Id}?auto=format,compress`}
+        src={`${PUBLIC_BUCKET_URL}/${variantCategory.Id}`}
         alt={`${variantCategory.Name}`}
       />
     </div>
@@ -49,26 +51,28 @@
       {#if product.CurrentStock === 1}
         <div style:position="relative">
           <img
-            role="img"
             class="low-in-stock-img"
-            src="https://enki.imgix.net/low_in_stock_teal_1.png"
+            src={`${PUBLIC_BUCKET_URL}/low_in_stock_teal_1.png`}
             alt="this product is low in stock"
           />
         </div>
       {/if}
       {#if product.CurrentStock <= 0}
         <div style:position="relative">
           <img
-            role="img"
             class="low-in-stock-img"
-            src="https://enki.imgix.net/out_of_stock_orange.png"
+            src={`${PUBLIC_BUCKET_URL}/out_of_stock_orange.png`}
             alt="this product is out of stock"
           />
         </div>
       {/if}
       <div class="position-img">
         <ImageLoader
-          src={`https://enki.imgix.net/${product.Id}-0?auto=format,compress`}
+          src={product.ProductImages[0]?.ImageUrl
+            ? `${PUBLIC_BUCKET_URL}/${getImageFilename(
+                product.ProductImages[0].ImageUrl
+              )}`
+            : "/coming-soon.png"}
           alt={`${product.Name}`}
         />
       </div>

diff --git a/src/lib/types/category.ts b/src/lib/types/category.ts
@@ -5,4 +5,5 @@ export interface Category extends Base {
   ParentId: number | null;
   Children: Category[];
   NominalCode: string | null;
+  Description: string;
 }
diff --git a/src/lib/types/product.ts b/src/lib/types/product.ts
@@ -5,7 +5,7 @@ export interface Product extends Base {
   CategoryId: number;
   Description: string;
   SalePrice: number;
-  ProductImages: string[];
+  ProductImages: ProductImages[];
   ProductTags: Tag[];
   VariantGroupId: number;
   CurrentStock: number;
@@ -17,3 +17,7 @@ export interface Product extends Base {
 interface ProductDetails {
   DetailedDescription: string;
 }
+
+interface ProductImages {
+  ImageUrl: string;
+}
diff --git a/src/lib/types/tag.ts b/src/lib/types/tag.ts
@@ -2,4 +2,5 @@ import type { Base } from "$lib/types/base";
 
 export interface Tag extends Base {
   TagTypeId: string;
+  Description?: string;
 }