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

@@ -10,6 +10,7 @@
   import Hamburger from "$lib/components/Hamburger/Hamburger.svelte";
   import { clickOutside } from "$lib/utils/clickOutside";
   import { PUBLIC_BUCKET_URL } from "$env/static/public";
+  import searchIcon from "$lib/assets/search_1.png";
 
   export let whitelistedUserAgent: boolean;
 
@@ -146,7 +147,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}

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

@@ -153,11 +153,6 @@ test.describe("Header", () => {
       "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 });
 });

vite.config.js.timestamp-1704566943118-9376bbf834a7b.mjs

@@ -0,0 +1,41 @@
+// vite.config.js
+import { sveltekit } from "file:///home/jaskaran/repos/enki-website/node_modules/@sveltejs/kit/src/exports/vite/index.js";
+import { defineConfig } from "file:///home/jaskaran/repos/enki-website/node_modules/vite/dist/node/index.js";
+var vite_config_default = defineConfig({
+  plugins: [sveltekit({ configFile: "svelte.config.js" })],
+  alias: {
+    $app: "/node_modules/@sveltejs/kit/assets/app",
+    $lib: "/src/lib",
+  },
+  server: {
+    fs: {
+      allow: [".."],
+    },
+  },
+  test: {
+    globals: true,
+    environment: "jsdom",
+    alias: [{ find: /^svelte$/, replacement: "svelte/internal" }],
+    setupFiles: ["./setupTests.ts", "jest-canvas-mock"],
+    watchExclude: [
+      "**/node_modules/**",
+      "**/dist/**",
+      "**/cypress/**",
+      "**/.{idea,git,cache,output,temp}/**",
+      "**.spec.js",
+    ],
+    exclude: [
+      "**/node_modules/**",
+      "**/dist/**",
+      "**/cypress/**",
+      "**/.{idea,git,cache,output,temp}/**",
+      "**.spec.js",
+    ],
+  },
+  legacy: { buildSsrCjsExternalHeuristics: true },
+  build: {
+    minify: true,
+  },
+});
+export { vite_config_default as default };
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS9qYXNrYXJhbi9yZXBvcy9lbmtpLXdlYnNpdGVcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9ob21lL2phc2thcmFuL3JlcG9zL2Vua2ktd2Vic2l0ZS92aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vaG9tZS9qYXNrYXJhbi9yZXBvcy9lbmtpLXdlYnNpdGUvdml0ZS5jb25maWcuanNcIjsvLy8gPHJlZmVyZW5jZSB0eXBlcz1cInZpdGVzdFwiIC8+XG5pbXBvcnQgeyBzdmVsdGVraXQgfSBmcm9tIFwiQHN2ZWx0ZWpzL2tpdC92aXRlXCI7XG5pbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tIFwidml0ZVwiO1xuXG4vKiogQHR5cGUge2ltcG9ydCgndml0ZScpLlVzZXJDb25maWd9ICovXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xuICBwbHVnaW5zOiBbc3ZlbHRla2l0KHsgY29uZmlnRmlsZTogXCJzdmVsdGUuY29uZmlnLmpzXCIgfSldLFxuICBhbGlhczoge1xuICAgICRhcHA6IFwiL25vZGVfbW9kdWxlcy9Ac3ZlbHRlanMva2l0L2Fzc2V0cy9hcHBcIixcbiAgICAkbGliOiBcIi9zcmMvbGliXCIsXG4gIH0sXG4gIHNlcnZlcjoge1xuICAgIGZzOiB7XG4gICAgICBhbGxvdzogW1wiLi5cIl0sXG4gICAgfSxcbiAgfSxcbiAgdGVzdDoge1xuICAgIGdsb2JhbHM6IHRydWUsXG4gICAgZW52aXJvbm1lbnQ6IFwianNkb21cIixcbiAgICBhbGlhczogW3sgZmluZDogL15zdmVsdGUkLywgcmVwbGFjZW1lbnQ6IFwic3ZlbHRlL2ludGVybmFsXCIgfV0sXG4gICAgc2V0dXBGaWxlczogW1wiLi9zZXR1cFRlc3RzLnRzXCIsIFwiamVzdC1jYW52YXMtbW9ja1wiXSxcbiAgICB3YXRjaEV4Y2x1ZGU6IFtcbiAgICAgIFwiKiovbm9kZV9tb2R1bGVzLyoqXCIsXG4gICAgICBcIioqL2Rpc3QvKipcIixcbiAgICAgIFwiKiovY3lwcmVzcy8qKlwiLFxuICAgICAgXCIqKi8ue2lkZWEsZ2l0LGNhY2hlLG91dHB1dCx0ZW1wfS8qKlwiLFxuICAgICAgXCIqKi5zcGVjLmpzXCIsXG4gICAgXSxcbiAgICBleGNsdWRlOiBbXG4gICAgICBcIioqL25vZGVfbW9kdWxlcy8qKlwiLFxuICAgICAgXCIqKi9kaXN0LyoqXCIsXG4gICAgICBcIioqL2N5cHJlc3MvKipcIixcbiAgICAgIFwiKiovLntpZGVhLGdpdCxjYWNoZSxvdXRwdXQsdGVtcH0vKipcIixcbiAgICAgIFwiKiouc3BlYy5qc1wiLFxuICAgIF0sXG4gIH0sXG4gIGxlZ2FjeTogeyBidWlsZFNzckNqc0V4dGVybmFsSGV1cmlzdGljczogdHJ1ZSB9LFxuICBidWlsZDoge1xuICAgIG1pbmlmeTogdHJ1ZSxcbiAgfSxcbn0pO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUNBLFNBQVMsaUJBQWlCO0FBQzFCLFNBQVMsb0JBQW9CO0FBRzdCLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVMsQ0FBQyxVQUFVLEVBQUUsWUFBWSxtQkFBbUIsQ0FBQyxDQUFDO0FBQUEsRUFDdkQsT0FBTztBQUFBLElBQ0wsTUFBTTtBQUFBLElBQ04sTUFBTTtBQUFBLEVBQ1I7QUFBQSxFQUNBLFFBQVE7QUFBQSxJQUNOLElBQUk7QUFBQSxNQUNGLE9BQU8sQ0FBQyxJQUFJO0FBQUEsSUFDZDtBQUFBLEVBQ0Y7QUFBQSxFQUNBLE1BQU07QUFBQSxJQUNKLFNBQVM7QUFBQSxJQUNULGFBQWE7QUFBQSxJQUNiLE9BQU8sQ0FBQyxFQUFFLE1BQU0sWUFBWSxhQUFhLGtCQUFrQixDQUFDO0FBQUEsSUFDNUQsWUFBWSxDQUFDLG1CQUFtQixrQkFBa0I7QUFBQSxJQUNsRCxjQUFjO0FBQUEsTUFDWjtBQUFBLE1BQ0E7QUFBQSxNQUNBO0FBQUEsTUFDQTtBQUFBLE1BQ0E7QUFBQSxJQUNGO0FBQUEsSUFDQSxTQUFTO0FBQUEsTUFDUDtBQUFBLE1BQ0E7QUFBQSxNQUNBO0FBQUEsTUFDQTtBQUFBLE1BQ0E7QUFBQSxJQUNGO0FBQUEsRUFDRjtBQUFBLEVBQ0EsUUFBUSxFQUFFLCtCQUErQixLQUFLO0FBQUEsRUFDOUMsT0FBTztBQUFBLElBQ0wsUUFBUTtBQUFBLEVBQ1Y7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=