style: 💄 update about & start moving icons into assets/

src/lib/components/DetailedSingleProduct/DetailedSingleProduct.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { PUBLIC_BUCKET_URL } from "$env/static/public";
+  import comingSoon from "$lib/assets/coming_soon.png";
   import { clickOutside } from "$lib/utils/clickOutside";
   import AddToBasket from "$lib/components/AddToBasket/AddToBasket.svelte";
   import MobileClose from "$lib/components/MobileClose/MobileClose.svelte";
@@ -38,7 +39,7 @@
               ? `${PUBLIC_BUCKET_URL}/${getImageFilename(
                   product.ProductImages[0].ImageUrl
                 )}${isAvifSupported ? "-avif" : ""}`
-              : "/coming-soon.png",
+              : comingSoon,
             alt: `${product.Name} image 1`,
           },
         ];

src/lib/components/Footer/Footer.svelte

@@ -2,6 +2,7 @@
   import { goto } from "$app/navigation";
   import { fade } from "svelte/transition";
   import { PUBLIC_BUCKET_URL } from "$env/static/public";
+  import github from "$lib/assets/github.png";
   import MailChimpSubscribe from "$lib/components/MailChimpSubscribe/MailChimpSubscribe.svelte";
 
   $: outerWidth = 0;
@@ -44,6 +45,19 @@
           alt="link to facebook"
         />
       </a>
+      <a
+        href="https://www.github.com/jaskaransarkaria/enki-website"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <img
+          loading="lazy"
+          class="footer-icons"
+          src={github}
+          alt="link to website source code"
+          width="60px"
+        />
+      </a>
     </div>
   {/if}
   <div class="centre-container">
@@ -64,14 +78,26 @@
             class="mobile-footer-icons"
             src={`${PUBLIC_BUCKET_URL}/insta_logo_3.png`}
             alt="link to instagram"
-            on:click={() => goto("https://www.instagram.com/enkionline/?hl=en")}
+            on:click={() =>
+              (window.location.href =
+                "https://www.instagram.com/enkionline/?hl=en")}
           />
           <img
             class="mobile-footer-icons"
             src={`${PUBLIC_BUCKET_URL}/fb_logo_3.png`}
             alt="link to facebook"
             on:click={() =>
-              goto("https://www.facebook.com/Enki-1665334930147391")}
+              (window.location.href =
+                "https://www.facebook.com/Enki-1665334930147391")}
+          />
+          <img
+            loading="lazy"
+            class="mobile-footer-icons"
+            src={github}
+            alt="link to website source code"
+            on:click={() =>
+              (window.location.href =
+                "https://www.github.com/jaskaransarkaria/enki-website")}
           />
         </div>
       </div>

src/lib/components/Header/Header.svelte

@@ -9,7 +9,10 @@
   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";
+
+  import header from "$lib/assets/header_1.png";
+  import basketIcon from "$lib/assets/basket_icon.png";
+  import searchIcon from "$lib/assets/search_1.png";
 
   export let whitelistedUserAgent: boolean;
 
@@ -126,7 +129,7 @@
     {#if !showSearch}
       <img
         transition:fade|local
-        src={`${PUBLIC_BUCKET_URL}/header_1.png`}
+        src={header}
         alt="Enki"
         loading="eager"
         class="enki-logo"
@@ -136,7 +139,7 @@
   {:else}
     <img
       transition:fade|local
-      src={`${PUBLIC_BUCKET_URL}/header_1.png`}
+      src={header}
       alt="Enki"
       loading="eager"
       class="enki-logo"
@@ -146,7 +149,7 @@
   <div class="right-container">
     <img
       class="search-icon"
-      src={`${PUBLIC_BUCKET_URL}/search-icon.png`}
+      src={searchIcon}
       alt="search"
       style={move($left)}
       on:click={handleClick}
@@ -164,7 +167,7 @@
     >
       <img
         class="basket-icon"
-        src={`${PUBLIC_BUCKET_URL}/basket-icon.png`}
+        src={basketIcon}
         alt="basket"
         on:click={() => goto("/shop/basket")}
       />

src/lib/components/Hex/Hex.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { PUBLIC_BUCKET_URL } from "$env/static/public";
   import { fade } from "svelte/transition";
+  import greySquare from "$lib/assets/grey_square.png";
 
   import type { Category } from "$lib/types/category";
   import type { Tag } from "$lib/types/tag";
@@ -45,7 +46,7 @@
       {#key loaded}
         {#if imgError}
           <img
-            src="/grey_square.png"
+            src={greySquare}
             alt={`category ${category.Name}`}
             data-testid="cdn-img"
             bind:this={catImg}

src/lib/components/Image/Image.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
+  import comingSoon from "$lib/assets/coming_soon.png";
 
   export let src: string;
   export let alt: string;
@@ -20,8 +21,8 @@
   class:loaded
   bind:this={thisImage}
   on:error={() => {
-    if (thisImage.src != "/coming-soon.png") {
-      thisImage.src = "/coming-soon.png";
+    if (thisImage.src != comingSoon) {
+      thisImage.src = comingSoon;
     }
   }}
 />

src/lib/components/SingleProduct/SingleProduct.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { PUBLIC_BUCKET_URL } from "$env/static/public";
+  import comingSoon from "$lib/assets/coming_soon.png";
   import ImageLoader from "$lib/components/Image/ImageLoader.svelte";
   import DetailedSingleProduct from "$lib/components/DetailedSingleProduct/DetailedSingleProduct.svelte";
   import { isAvifSupported } from "$lib/stores/isAvifSupported";
@@ -75,7 +76,7 @@
             ? `${PUBLIC_BUCKET_URL}/${getImageFilename(
                 product.ProductImages[0].ImageUrl
               )}${isAvifSupported ? "-avif" : ""}`
-            : "/coming-soon.png"}
+            : comingSoon}
           alt={`${product.Name}`}
         />
       </div>

src/lib/components/SwipeImage/SwipeImage.svelte

@@ -9,6 +9,8 @@
   import "swiper/css/navigation";
   import "swiper/css/pagination";
 
+  import comingSoon from "$lib/assets/coming_soon.png";
+
   export let imgArr: { src: string; alt: string }[];
   export let setImgWidth = false;
   export let fullScreen = false;
@@ -51,8 +53,8 @@
       alt={imgArr[0].alt}
       style:cursor={fullScreen ? null : "pointer"}
       on:error={() => {
-        if (imgArr[0].src != "/coming-soon.png") {
-          imgArr[0].src = "/coming-soon.png";
+        if (imgArr[0].src != comingSoon) {
+          imgArr[0].src = comingSoon;
         }
       }}
       class={fullScreen ? "full-screen" : ""}

src/lib/utils/basket.ts

@@ -1,3 +1,4 @@
+import comingSoon from "$lib/assets/coming_soon.png";
 import type { BasketProduct } from "$lib/types/basketProduct";
 import type { Product } from "$lib/types/product";
 import { getImageFilename } from "$lib/utils/getImageFilename";
@@ -66,7 +67,7 @@ const addNewItemToBasket = (
     imgHash:
       product?.ProductImages?.length > 0
         ? getImageFilename(product.ProductImages[0].ImageUrl)
-        : "/coming-soon.png",
+        : comingSoon,
     price: product.SalePrice,
     currentStock: product.CurrentStock,
     giftWrap: false,

src/routes/about/+page.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
   import { PUBLIC_BUCKET_URL } from "$env/static/public";
+  import dora from "$lib/assets/dora_1.png";
+  import faith from "$lib/assets/faith_1.png";
+  import layla from "$lib/assets/layla.png";
+  import ellis from "$lib/assets/ellis.png";
   import { page } from "$app/stores";
   import { browser } from "$app/environment";
   import SwipeImage from "$lib/components/SwipeImage/SwipeImage.svelte";
@@ -70,28 +74,61 @@
       <div class="card">
         <img
           in:fade={{ duration: 600 }}
-          src={`${PUBLIC_BUCKET_URL}/faith_1.png`}
-          alt="shop owner faith"
+          src={faith}
+          alt="shop owner faith cartoon"
         />
         <p>
           Faith started Enki in 2017 in a small shop not far from the current
           location. She is a jeweller with over ten years of experience who
-          specialises in repairing antique jewellery. She has a dog called Dodi
-          who sometimes joins her at work! You can find her at Enki from Monday
-          to Friday.
+          specialises in repairing antique jewellery. She is currently on
+          maternity leave looking after her daughter Ishaani but will be back in
+          April.
         </p>
       </div>
       <div class="card">
         <img
           in:fade={{ duration: 600 }}
-          src={`${PUBLIC_BUCKET_URL}/dora_1.png`}
-          alt="shop owner faith"
+          src={dora}
+          alt="shop manager cartoon"
         />
         <p>
           Dora joined Enki in 2018 and has been making jewellery ever since,
           she’s always been a crafter and can do amazing things with beads! She
           comes from Germany but has been in Brum since 2016. You can find her
-          at Enki Thursday to Sunday.
+          at Enki Wednesday to Saturday and every other Sunday.
+        </p>
+      </div>
+      <div class="card">
+        <img
+          in:fade={{ duration: 600 }}
+          src={ellis}
+          alt="Sunday/ Monday shop keeper cartoon"
+        />
+        <p>
+          Ellis joined us in 2022 on a part time basis, and works as a graphic
+          artist and designer in the city too. You can find their work at
+          <a href="https://www.instagram.com/ellismilesdesigner/" rel="_blank"
+            >@ellismilesdesigner</a
+          > on Instagram, and you can find them at Enki Sundays and Mondays!
+        </p>
+      </div>
+      <div class="card">
+        <img
+          in:fade={{ duration: 600 }}
+          src={layla}
+          alt="Tuesday / Wednesday shop keeper cartoon"
+        />
+        <p>
+          Layla joined Enki in 2023 and enjoys taking photos of our gifts and
+          getting them out online! She is an artist specialising in batik and a
+          musician playing rock n’ roll! You can find her at Enki on Tuesdays
+          and Wednesdays. <a
+            href="https://www.instagram.com/laylatutt/"
+            rel="_blank"
+            >@laylatutt
+          </a><a href="https://www.instagram.com/laylatutt_art/" rel="_blank">
+            @laylatutt_art</a
+          >
         </p>
       </div>
     </div>

src/routes/shop/product/[product]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { PUBLIC_BUCKET_URL } from "$env/static/public";
   import { page } from "$app/stores";
+  import comingSoon from "$lib/assets/coming_soon.png";
   import Banner from "$lib/components/Banner/Banner.svelte";
   import SingleProduct from "$lib/components/SingleProduct/SingleProduct.svelte";
   import Breadcrumbs from "$lib/components/Breadcrumbs/Breadcrumbs.svelte";
@@ -20,7 +21,7 @@
     content={`${PUBLIC_BUCKET_URL}/${
       productToShow[0]?.ProductImages[0]?.ImageUrl
         ? getImageFilename(productToShow[0].ProductImages[0].ImageUrl)
-        : "/coming-soon.png"
+        : comingSoon
     }`}
   />
   <meta property="og:type" content="website" />

src/routes/shop/search/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { page } from "$app/stores";
   import { PUBLIC_BUCKET_URL } from "$env/static/public";
+  import comingSoon from "$lib/assets/coming_soon.png";
   import ProductView from "$lib/components/ProductView/ProductView.svelte";
   import { getImageFilename } from "$lib/utils/getImageFilename";
 </script>
@@ -24,7 +25,7 @@
       content={`${PUBLIC_BUCKET_URL}/${
         $page.data.data[0]?.ProductImages[0]?.ImageUrl
           ? getImageFilename($page.data.data[0]?.ProductImages[0]?.ImageUrl)
-          : "/coming-soon.png"
+          : comingSoon
       }`}
     />
     <meta property="og:type" content="website" />

tests/components/footer.spec.js

@@ -4,7 +4,7 @@ test.describe("Footer", () => {
   test("shows mobile footer", async ({ page }) => {
     await page.setViewportSize({ width: 350, height: 900 });
     await page.goto("/");
-    await expect(page.locator(".mobile-footer-icons")).toHaveCount(3);
+    await expect(page.locator(".mobile-footer-icons")).toHaveCount(4);
     await expect(page.locator("h3")).toHaveText(
       "Want to be the first to find out about new products and classes?"
     );
@@ -14,7 +14,7 @@ test.describe("Footer", () => {
   test("shows desktop footer", async ({ page }) => {
     await page.setViewportSize({ width: 1280, height: 2400 });
     await page.goto("/");
-    await expect(page.locator(".footer-icons")).toHaveCount(3);
+    await expect(page.locator(".footer-icons")).toHaveCount(4);
     await expect(page.locator("h3")).toHaveText(
       "Want to be the first to find out about new products and classes?"
     );

tests/components/header.spec.js

@@ -6,10 +6,6 @@ test.describe("Header", () => {
     await page.goto("/");
 
     await expect(page.locator("#nav-icon")).toHaveClass(/(?!open)/);
-    await expect(page.locator("img.enki-logo")).toHaveAttribute(
-      "src",
-      "https://storage.googleapis.com/enki-website/header_1.png"
-    );
 
     await page.locator("#nav-icon").click();
 
@@ -147,20 +143,5 @@ test.describe("Header", () => {
     await page.locator("img.enki-logo").click();
     await page.waitForURL("http://localhost:4000/");
     expect(page.url()).toBe("http://localhost:4000/");
-
-    await expect(page.locator("img.enki-logo")).toHaveAttribute(
-      "src",
-      "https://storage.googleapis.com/enki-website/header_1.png"
-    );
-
-    await expect(page.locator("img.search-icon")).toHaveAttribute(
-      "src",
-      "https://storage.googleapis.com/enki-website/search-icon.png"
-    );
-
-    await expect(page.locator("img.basket-icon")).toHaveAttribute(
-      "src",
-      "https://storage.googleapis.com/enki-website/basket-icon.png"
-    );
   });
 });

tests/routes/about.spec.js

@@ -2,6 +2,6 @@ import { expect, test } from "@playwright/test";
 
 test("About Page", async ({ page }) => {
   await page.goto("/about");
-  await page.waitForTimeout(1000);
-  await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });
+  await page.waitForTimeout(1500);
+  await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.25 });
 });