From c97bf51b0df1f582e35ec8e49de32688e42c2500 Mon Sep 17 00:00:00 2001
From: Scott Kennedy <scottyzen@gmail.com>
Date: Sat, 27 Apr 2024 19:56:21 +0100
Subject: [PATCH] Fix images

---
 CHANGELOG.md                                     | 16 ----------------
 netlify.toml                                     |  9 ---------
 woonuxt_base/components/CategoryCard.vue         |  5 +++--
 .../components/generalElements/HeroBanner.vue    |  6 ++++--
 .../components/productElements/ProductCard.vue   |  3 ++-
 .../productElements/ProductImageGallery.vue      | 11 +++++++----
 6 files changed, 16 insertions(+), 34 deletions(-)
 delete mode 100644 CHANGELOG.md
 delete mode 100644 netlify.toml

diff --git a/CHANGELOG.md b/CHANGELOG.md
deleted file mode 100644
index 2da42ac..0000000
--- a/CHANGELOG.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file. I'll try my best to keep it updated.
-
-## 3.4.27 (06-04-2024)
-
-### Bug Fixes
-
-- The default variation is now respected. Also, if there are no defaults set, the first of each attribute is selected. IMO I think that is better than having the user select the first option for each attribute. [#141](https://github.com/scottyzen/woonuxt/issues/141)
-
-## 3.4.26 (06-04-2024)
-
-### Bug Fixes
-
-- Fix bug where a product variation that wasn't available was able to be added to the cart.
-- Product gallery showing not all variations and won't change image [#139](https://github.com/scottyzen/woonuxt/issues/139)
diff --git a/netlify.toml b/netlify.toml
deleted file mode 100644
index 36c1f95..0000000
--- a/netlify.toml
+++ /dev/null
@@ -1,9 +0,0 @@
-[template.environment]
-  GQL_HOST = "WordPress URL http://example.com"
-  NUXT_IMAGE_DOMAINS = "Comma separated list of domains. example.com,example2.com"
-
-[build]
-  command = "nuxt generate"
-
-[images]
-  remote_images = ["https://secure.woonuxt.com/.*"]
diff --git a/woonuxt_base/components/CategoryCard.vue b/woonuxt_base/components/CategoryCard.vue
index b95bd15..b0bebac 100644
--- a/woonuxt_base/components/CategoryCard.vue
+++ b/woonuxt_base/components/CategoryCard.vue
@@ -14,11 +14,12 @@ const ImageHeight = Math.round(imageWidth * 1.25);
     <NuxtImg
       :width="imageWidth"
       :height="ImageHeight"
-      class="absolute inset-0 object-cover w-full h-full skeleton"
+      class="absolute inset-0 object-cover w-full h-full"
       :src="node.image?.sourceUrl || fallbackImage"
       :alt="node.image?.altText || node.name"
       :title="node.image?.title || node.name"
-      loading="lazy" />
+      loading="lazy"
+      placeholder />
     <div class="absolute inset-x-0 bottom-0 opacity-50 bg-gradient-to-t from-black to-transparent h-1/2" />
     <span class="relative z-10 mt-auto mb-2 text-sm font-semibold text-white capitalize md:text-base md:mb-4" v-html="node.name" />
   </NuxtLink>
diff --git a/woonuxt_base/components/generalElements/HeroBanner.vue b/woonuxt_base/components/generalElements/HeroBanner.vue
index 7746e26..d7dbf59 100644
--- a/woonuxt_base/components/generalElements/HeroBanner.vue
+++ b/woonuxt_base/components/generalElements/HeroBanner.vue
@@ -3,13 +3,15 @@
     <NuxtImg
       width="1400"
       height="800"
-      class="object-cover w-full h-[420px] lg:h-[560px] xl:h-[640px] skeleton"
+      class="object-cover w-full h-[420px] lg:h-[560px] xl:h-[640px]"
       src="/images/hero-4.jpg"
       alt="Hero image"
       loading="eager"
       sizes="sm:100vw lg:1400px"
       fetchpriority="high"
-      preload />
+      preload
+      placeholder
+      placeholder-class="blur-xl" />
     <div class="container absolute inset-0 flex flex-col items-start justify-center bg-gradient-to-l from-gray-200 md:bg-none p-8">
       <h1 class="text-3xl font-bold md:mb-4 md:text-4xl lg:text-6xl">Just landed.</h1>
       <h2 class="text-lg font-bold md:mb-4 lg:text-3xl">The New Year Collection</h2>
diff --git a/woonuxt_base/components/productElements/ProductCard.vue b/woonuxt_base/components/productElements/ProductCard.vue
index baaf059..cdb0b3b 100644
--- a/woonuxt_base/components/productElements/ProductCard.vue
+++ b/woonuxt_base/components/productElements/ProductCard.vue
@@ -48,7 +48,8 @@ const imagetoDisplay = computed<string>(() => {
         :alt="node.image?.altText || node.name"
         :title="node.image?.title || node.name"
         :loading="index <= 3 ? 'eager' : 'lazy'"
-        class="skeleton" />
+        placeholder
+        placeholder-class="blur-xl" />
     </NuxtLink>
     <div class="p-2">
       <StarRating :rating="node.averageRating" :count="node.reviewCount" />
diff --git a/woonuxt_base/components/productElements/ProductImageGallery.vue b/woonuxt_base/components/productElements/ProductImageGallery.vue
index 9c17b7c..e10f0cc 100644
--- a/woonuxt_base/components/productElements/ProductImageGallery.vue
+++ b/woonuxt_base/components/productElements/ProductImageGallery.vue
@@ -41,25 +41,28 @@ watch(
   <div>
     <SaleBadge :node="node" class="absolute text-base top-4 right-4" />
     <NuxtImg
-      class="rounded-xl object-contain w-full min-w-[350px] skeleton"
-      :imgAttrs="{ class: 'rounded-xl object-contain w-full min-w-[350px] skeleton' }"
+      class="rounded-xl object-contain w-full min-w-[350px]"
       width="640"
       height="640"
       :alt="imageToShow.altText || node.name"
       :title="imageToShow.title || node.name"
       :src="imageToShow.sourceUrl || fallbackImage"
-      fetchpriority="high" />
+      fetchpriority="high"
+      placeholder
+      placeholder-class="blur-xl" />
     <div v-if="gallery.nodes.length" class="my-4 gallery-images">
       <NuxtImg
         v-for="galleryImg in galleryImages"
         :key="galleryImg.databaseId"
-        class="cursor-pointer rounded-xl skeleton"
+        class="cursor-pointer rounded-xl"
         width="640"
         height="640"
         :src="galleryImg.sourceUrl"
         :alt="galleryImg.altText || node.name"
         :title="galleryImg.title || node.name"
         @click.native="changeImage(galleryImg)"
+        placeholder
+        placeholder-class="blur-xl"
         loading="lazy" />
     </div>
   </div>