From 39993112b7bd6be7bbcd2e1721a07d67cbf0e038 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Mon, 4 Sep 2023 19:52:19 +0200
Subject: [PATCH] refactor: update asset URLs for vite-imagetools v5

Shorthand parameters have been removed as of vite-imagetools v5
---
 src/components/WelcomeHeader.vue |  6 +++---
 src/views/AnatomyView.vue        | 24 ++++++++++++------------
 src/views/AttributionsView.vue   |  4 ++--
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/WelcomeHeader.vue b/src/components/WelcomeHeader.vue
index ab2326f..e178a53 100644
--- a/src/components/WelcomeHeader.vue
+++ b/src/components/WelcomeHeader.vue
@@ -3,12 +3,12 @@
     <div class="welcome__image">
       <picture>
         <source
-          srcset="@/assets/viktor-avatar.png?w=400;800&avif&quality=75&srcset"
+          srcset="@/assets/viktor-avatar.png?w=400;800&format=avif&quality=75&as=srcset"
         />
         <source
-          srcset="@/assets/viktor-avatar.png?w=400;800&webp&quality=100&srcset"
+          srcset="@/assets/viktor-avatar.png?w=400;800&format=webp&quality=100&as=srcset"
         />
-        <img src="@/assets/viktor-avatar.png?w=400&png" alt="Viktor Avatar" />
+        <img src="@/assets/viktor-avatar.png?w=400&format=png" alt="Viktor Avatar" />
       </picture>
     </div>
 
diff --git a/src/views/AnatomyView.vue b/src/views/AnatomyView.vue
index 3440cfa..d029410 100644
--- a/src/views/AnatomyView.vue
+++ b/src/views/AnatomyView.vue
@@ -23,21 +23,21 @@ const colors = [
     <template v-if="$route.query.nsfw">
       <source
         srcset="
-          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&avif&quality=75&withoutEnlargement&srcset
+          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
         "
         sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
         type="image/avif"
       />
       <source
         srcset="
-          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&webp&quality=100&withoutEnlargement&srcset
+          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
         "
         sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
         type="image/webp"
       />
       <img
         srcset="
-          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&png&withoutEnlargement&srcset
+          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
         "
         sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
         alt="Viktor Ref by sabertoofs"
@@ -48,21 +48,21 @@ const colors = [
     <template v-else>
       <source
         srcset="
-          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&avif&quality=75&withoutEnlargement&srcset
+          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
         "
         sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
         type="image/avif"
       />
       <source
         srcset="
-          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&webp&quality=100&withoutEnlargement&srcset
+          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
         "
         sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
         type="image/webp"
       />
       <img
         srcset="
-          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&png&withoutEnlargement&srcset
+          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
         "
         sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
         :alt="`${$t('anatomy.images.back.caption')} by sabertoofs`"
@@ -86,7 +86,7 @@ const colors = [
     <template v-if="$route.query.nsfw">
       <source
         srcset="
-          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&avif&quality=75&withoutEnlargement&srcset
+          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
         "
         sizes="(min-width: 64em) 710px,
                (min-width: 50em) 590px,
@@ -96,7 +96,7 @@ const colors = [
       />
       <source
         srcset="
-          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&webp&quality=100&withoutEnlargement&srcset
+          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
         "
         sizes="(min-width: 64em) 710px,
                (min-width: 50em) 590px,
@@ -106,7 +106,7 @@ const colors = [
       />
       <img
         srcset="
-          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&png&withoutEnlargement&srcset
+          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
         "
         sizes="(min-width: 64em) 710px,
                (min-width: 50em) 590px,
@@ -120,7 +120,7 @@ const colors = [
     <template v-else>
       <source
         srcset="
-          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&avif&quality=75&withoutEnlargement&srcset
+          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
         "
         sizes="(min-width: 64em) 710px,
                (min-width: 50em) 590px,
@@ -130,7 +130,7 @@ const colors = [
       />
       <source
         srcset="
-          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&webp&quality=100&withoutEnlargement&srcset
+          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
         "
         sizes="(min-width: 64em) 710px,
                (min-width: 50em) 590px,
@@ -140,7 +140,7 @@ const colors = [
       />
       <img
         srcset="
-          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&png&withoutEnlargement&srcset
+          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
         "
         sizes="(min-width: 64em) 710px,
                (min-width: 50em) 590px,
diff --git a/src/views/AttributionsView.vue b/src/views/AttributionsView.vue
index 812f146..025998e 100644
--- a/src/views/AttributionsView.vue
+++ b/src/views/AttributionsView.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import AttributionTable from "@/components/AttributionTable.vue";
 
-import ViktorRefAlpha from "@/assets/viktor-ref-SFW-alpha.png?w=400&webp&quality=100&imagetools";
-import ViktorFront from "@/assets/viktor-front-SFW-alpha.png?w=400&webp&quality=100&imagetools";
+import ViktorRefAlpha from "@/assets/viktor-ref-SFW-alpha.png?w=400&format=webp&quality=100&imagetools";
+import ViktorFront from "@/assets/viktor-front-SFW-alpha.png?w=400&format=webp&quality=100&imagetools";
 
 const attributions = [
   {