chore: bump version number

Starting with v5 vite-imagetools has removed shorthands

.browserslistrc

@@ -1,2 +1,3 @@
+defaults
+>1% and not dead
 last 2 versions
-not dead

.gitignore

@@ -26,3 +26,5 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+*.tsbuildinfo

.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
 }

package.json

@@ -1,36 +1,38 @@
 {
   "name": "sebin-reference",
-  "version": "0.10.4",
+  "version": "0.10.7",
   "private": true,
   "scripts": {
     "dev": "vite --host",
-    "build": "run-p type-check build-only",
+    "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
   },
   "dependencies": {
-    "vue": "^3.2.45",
-    "vue-router": "^4.2.4"
+    "vue": "^3.4.38",
+    "vue-router": "^4.4.3"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.3.2",
-    "@types/node": "^18.16.19",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/eslint-config-prettier": "^7.1.0",
-    "@vue/eslint-config-typescript": "^11.0.3",
-    "@vue/tsconfig": "^0.1.3",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.45.0",
-    "eslint-plugin-vue": "^9.15.1",
+    "@rushstack/eslint-patch": "^1.10.4",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^20.16.3",
+    "@vitejs/plugin-vue": "^5.1.3",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/tsconfig": "^0.5.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.28.0",
     "normalize.css": "^8.0.1",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
-    "sass": "^1.64.0",
-    "typescript": "^4.9.5",
-    "vite": "^4.4.6",
-    "vite-imagetools": "^4.0.19",
-    "vue-tsc": "^1.8.5"
+    "npm-run-all2": "^6.2.2",
+    "prettier": "^3.3.3",
+    "sass": "^1.77.8",
+    "typescript": "~5.5.0",
+    "vite": "^5.4.2",
+    "vite-imagetools": "^6.2.9",
+    "vue-tsc": "^2.1.4"
   }
 }

src/App.vue

@@ -62,21 +62,21 @@ provide(showModalKey, showModal)
     <picture>
       <source
         srcset="
-          @/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&avif&quality=75&srcset
+          @/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=avif&quality=75&as=srcset
         "
         sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
         type="image/avif"
       />
       <source
         srcset="
-          @/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&webp&quality=100&srcset
+          @/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=webp&quality=100&as=srcset
         "
         sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
         type="image/webp"
       />
       <img
         class="nav-logo"
-        srcset="@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&png&srcset"
+        srcset="@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=png&as=srcset"
         sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
         alt="Sebin Avatar"
       />

src/components/FilterButton.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { Ratings } from '@/interfaces'
 
 interface Props {
   modelValue: number[]
-  id: string
   name?: string
-  kind: string
-  value: number
+  value: Ratings
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: number[]): void
 }
 
 const props = defineProps<Props>()
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<Emits>()
 
 const checked = computed({
   get() {
@@ -28,12 +31,16 @@ const checked = computed({
       class="filter-button__input"
       type="checkbox"
       :name="name"
-      :id="id"
+      :id="Ratings[value].toLowerCase()"
       :value="value"
       v-model="checked"
     />
-    <label :for="id" class="filter-button__label" :class="[kind]">
-      <slot></slot>
+    <label
+      :for="Ratings[value].toLowerCase()"
+      class="filter-button__label"
+      :class="[Ratings[value].toLowerCase()]"
+    >
+      {{ Ratings[value] }}
     </label>
   </div>
 </template>

src/components/FilterListTag.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 interface Props {
-  type?: string
+  type: string
 }
 
 defineProps<Props>()
 </script>
 
 <template>
-  <span class="filter-list__tag" :class="type">
-    <slot></slot>
+  <span class="filter-list__tag" :class="type.toLowerCase()">
+    <span>{{ type }}</span>
   </span>
 </template>
 

src/components/FilteredList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { Ratings, Role } from '@/interfaces'
 import type { Kink } from '@/interfaces'
 import FilterButton from '@/components/FilterButton.vue'
 import FilterListTag from '@/components/FilterListTag.vue'
@@ -17,36 +18,15 @@ const filteredItems = computed(() =>
     .sort((a, b) => a.rating - b.rating)
     .filter((kink) => filterOptions.value.some((filterNum) => kink.rating === filterNum))
 )
-
-const toLabel = (rating: number) => {
-  switch (rating) {
-    case 1:
-      return 'Love'
-    case 2:
-      return 'Yes'
-    case 3:
-      return 'Maybe'
-    case 4:
-      return 'No'
-  }
-}
 </script>
 
 <template>
   <div class="filter-list">
     <div class="filter-list__filters">
-      <FilterButton name="rating" id="love" kind="love" :value="1" v-model="filterOptions">
-        Love
-      </FilterButton>
-      <FilterButton name="rating" id="yes" kind="yes" :value="2" v-model="filterOptions">
-        Yes
-      </FilterButton>
-      <FilterButton name="rating" id="maybe" kind="maybe" :value="3" v-model="filterOptions">
-        Maybe
-      </FilterButton>
-      <FilterButton name="rating" id="no" kind="no" :value="4" v-model="filterOptions">
-        No
-      </FilterButton>
+      <FilterButton name="rating" :value="Ratings.Love" v-model="filterOptions" />
+      <FilterButton name="rating" :value="Ratings.Yes" v-model="filterOptions" />
+      <FilterButton name="rating" :value="Ratings.Maybe" v-model="filterOptions" />
+      <FilterButton name="rating" :value="Ratings.No" v-model="filterOptions" />
     </div>
 
     <div class="filter-list__list-container">
@@ -56,22 +36,19 @@ const toLabel = (rating: number) => {
             <FilterListTag
               v-if="filterOptions.length > 1"
               class="category"
-              :type="toLabel(item.rating)?.toLowerCase()"
-            >
-              <span>{{ toLabel(item.rating) }}</span>
-            </FilterListTag>
-
+              :type="Ratings[item.rating]"
+            />
             <span class="filter-list__item-name">
               <span>{{ item.name }}</span>
             </span>
-
-            <FilterListTag type="receive">
-              <span v-if="item.receive">receive</span>
-            </FilterListTag>
-
-            <FilterListTag type="give">
-              <span v-if="item.give">give</span>
-            </FilterListTag>
+            <FilterListTag
+              v-if="((item.role ?? 0) & Role.Receive) === Role.Receive"
+              :type="Role[Role.Receive]"
+            />
+            <FilterListTag
+              v-if="((item.role ?? 0) & Role.Give) === Role.Give"
+              :type="Role[Role.Give]"
+            />
           </li>
         </ul>
       </template>

src/components/RefToggle.vue

@@ -7,8 +7,12 @@ interface Props {
   name?: string
 }
 
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void
+}
+
 const props = defineProps<Props>()
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<Emits>()
 
 const checked = computed({
   get() {

src/components/WelcomeHeader.vue

@@ -5,21 +5,21 @@
       <picture>
         <source
           srcset="
-            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&avif&quality=75&withoutEnlargement&srcset
+            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&format=avif&quality=75&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
           type="image/avif"
         />
         <source
           srcset="
-            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&webp&quality=100&withoutEnlargement&srcset
+            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&format=webp&quality=100&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
           type="image/webp"
         />
         <img
           srcset="
-            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&png&withoutEnlargement&srcset
+            @/assets/sebin-smug-icon.png?w=180;200;240;280;350;400;480;0&format=png&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 280px, (min-width: 80em) 240px, (min-width: 35em) 200px, 180px"
           alt="Sebin Avatar"

src/interfaces.ts

@@ -6,8 +6,20 @@ interface ColorDict {
 interface Kink {
   name: string
   rating: number
-  receive?: boolean
-  give?: boolean
+  role?: Role
+}
+
+export enum Ratings {
+  Love,
+  Yes,
+  Maybe,
+  No
+}
+
+export enum Role {
+  Give = 1,
+  Receive = 2,
+  Both = Give | Receive
 }
 
 export type { ColorDict, Kink }

src/sebin.ts

@@ -1,3 +1,5 @@
+import { Ratings, Role } from '@/interfaces'
+
 export const firstName = 'Sebin',
   middleName = 'Antario',
   lastName = 'Nyshkim',
@@ -31,50 +33,50 @@ export const firstName = 'Sebin',
     girth: 5 // cm
   },
   kinks = [
-    { name: 'Absorption', rating: 4 },
-    { name: 'Anal', rating: 1, recive: true, give: true },
-    { name: 'Auto-Fellatio', rating: 2 },
-    { name: 'Biting', rating: 2, receive: true, give: true },
-    { name: 'Bukkake', rating: 2, receive: false, give: true },
-    { name: 'Chastity', rating: 4 },
-    { name: 'Chubby', rating: 3 },
-    { name: 'Clothed Sex', rating: 2 },
-    { name: 'Cock Slapping', rating: 2, receive: false, give: true },
-    { name: 'Coiling', rating: 3, receive: false, give: true },
-    { name: 'Competition', rating: 3, receive: false, give: true },
-    { name: 'Creampie', rating: 2, receive: false, give: true },
-    { name: 'Crushing (Living/Objects)', rating: 4 },
-    { name: 'Cum From Mouth/Nose', rating: 2, receive: false, give: true },
-    { name: 'Cum Inflation (Light/Medium)', rating: 2 },
-    { name: 'Deep-throat', rating: 2, receive: true, give: false },
-    { name: 'Dirty Talking', rating: 2 },
-    { name: 'Excessive Cum', rating: 1, receive: true, give: true },
-    { name: 'Face-Fucking', rating: 2, receive: false, give: true },
-    { name: 'Facial', rating: 2, receive: false, give: true },
-    { name: 'Feet', rating: 4 },
-    { name: 'Filled Condoms', rating: 2 },
-    { name: 'Foreplay', rating: 2, receive: true, give: true },
-    { name: 'Frotting', rating: 2 },
-    { name: 'Gangbangs', rating: 2 },
-    { name: 'Growth', rating: 1, receive: true, give: false },
-    { name: 'Handjobs', rating: 2, receive: true, give: true },
-    { name: 'Hotdogging', rating: 2, receive: false, give: true },
-    { name: 'Kissing', rating: 2, receive: true, give: true },
-    { name: 'Macro', rating: 1 },
-    { name: 'Milking', rating: 2 },
-    { name: 'Muscle Growth', rating: 1, receive: true, give: true },
-    { name: 'Muscle Worship', rating: 2, receive: true, give: true },
-    { name: 'Nipple Play', rating: 2, receive: true, give: true },
-    { name: 'Oral', rating: 1, receive: true, give: true },
-    { name: 'Rough', rating: 2, receive: true, give: true },
-    { name: 'Sheath Play', rating: 2, receive: true, give: true },
-    { name: 'Size Difference', rating: 1 },
-    { name: 'Slime/Goo Characters', rating: 2 },
-    { name: 'Spanking', rating: 3, receive: false, give: true },
-    { name: 'Tailsex', rating: 2, receive: true, give: true },
-    { name: 'Toys', rating: 2, receive: true, give: true },
-    { name: 'Underwear', rating: 1 },
-    { name: 'Unsanitary', rating: 4 },
-    { name: 'Verbal Abuse', rating: 3, receive: false, give: true },
-    { name: 'Vore', rating: 4 },
+    { name: 'Absorption', rating: Ratings.No },
+    { name: 'Anal', rating: Ratings.Love, role: Role.Both },
+    { name: 'Auto-Fellatio', rating: Ratings.Yes },
+    { name: 'Biting', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Bukkake', rating: Ratings.Yes, role: Role.Give },
+    { name: 'Chastity', rating: Ratings.No },
+    { name: 'Chubby', rating: Ratings.Maybe },
+    { name: 'Clothed Sex', rating: Ratings.Yes },
+    { name: 'Cock Slapping', rating: Ratings.Yes, role: Role.Give },
+    { name: 'Coiling', rating: Ratings.Maybe, role: Role.Give },
+    { name: 'Competition', rating: Ratings.Maybe, role: Role.Give },
+    { name: 'Creampie', rating: Ratings.Yes, role: Role.Give },
+    { name: 'Crushing (Living/Objects)', rating: Ratings.No },
+    { name: 'Cum From Mouth/Nose', rating: Ratings.Yes, role: Role.Give },
+    { name: 'Cum Inflation (Light/Medium)', rating: Ratings.Yes },
+    { name: 'Deep-throat', rating: Ratings.Yes, role: Role.Receive },
+    { name: 'Dirty Talking', rating: Ratings.Yes },
+    { name: 'Excessive Cum', rating: Ratings.Love, role: Role.Both },
+    { name: 'Face-Fucking', rating: Ratings.Yes, role: Role.Give },
+    { name: 'Facial', rating: Ratings.Yes, role: Role.Give },
+    { name: 'Feet', rating: Ratings.No },
+    { name: 'Filled Condoms', rating: Ratings.Yes },
+    { name: 'Foreplay', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Frotting', rating: Ratings.Yes },
+    { name: 'Gangbangs', rating: Ratings.Yes },
+    { name: 'Growth', rating: Ratings.Love, role: Role.Receive },
+    { name: 'Handjobs', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Hotdogging', rating: Ratings.Yes, role: Role.Give },
+    { name: 'Kissing', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Macro', rating: Ratings.Love },
+    { name: 'Milking', rating: Ratings.Yes },
+    { name: 'Muscle Growth', rating: Ratings.Love, role: Role.Both },
+    { name: 'Muscle Worship', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Nipple Play', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Oral', rating: Ratings.Love, role: Role.Both },
+    { name: 'Rough', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Sheath Play', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Size Difference', rating: Ratings.Love },
+    { name: 'Slime/Goo Characters', rating: Ratings.Yes },
+    { name: 'Spanking', rating: Ratings.Maybe, role: Role.Give },
+    { name: 'Tailsex', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Toys', rating: Ratings.Yes, role: Role.Both },
+    { name: 'Underwear', rating: Ratings.Love },
+    { name: 'Unsanitary', rating: Ratings.No },
+    { name: 'Verbal Abuse', rating: Ratings.Maybe, role: Role.Give },
+    { name: 'Vore', rating: Ratings.No }
   ]

src/views/AbilitiesView.vue

@@ -24,21 +24,21 @@ import AttackList from '@/components/AttackList.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&png&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;960;1920;1330;1680&format=png&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             alt="Sebin Fire Breath"
@@ -61,21 +61,21 @@ import AttackList from '@/components/AttackList.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&png&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;960;1920;1330;1680&format=png&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             alt="Sebin Fire Breath"
@@ -98,21 +98,21 @@ import AttackList from '@/components/AttackList.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&png&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;960;1920;1330;1680&format=png&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             alt="Sebin Kindled Fist"
@@ -134,21 +134,21 @@ import AttackList from '@/components/AttackList.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&png&withoutEnlargement&srcset
+              @/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;960;1920;1330;1680&format=png&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
             alt="Sebin Burning Twister"

src/views/AnatomyView.vue

@@ -47,7 +47,7 @@ const showModal = inject<Function>(showModalKey, Function)
       <picture v-if="isNsfw">
         <source
           srcset="
-            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&avif&quality=75&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=avif&quality=75&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -61,7 +61,7 @@ const showModal = inject<Function>(showModalKey, Function)
         />
         <source
           srcset="
-            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&webp&quality=100&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=webp&quality=100&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -75,7 +75,7 @@ const showModal = inject<Function>(showModalKey, Function)
         />
         <img
           srcset="
-            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&png&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-body-NSFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=png&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -92,7 +92,7 @@ const showModal = inject<Function>(showModalKey, Function)
       <picture v-else>
         <source
           srcset="
-            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&avif&quality=75&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=avif&quality=75&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -106,7 +106,7 @@ const showModal = inject<Function>(showModalKey, Function)
         />
         <source
           srcset="
-            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&webp&quality=100&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=webp&quality=100&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -120,7 +120,7 @@ const showModal = inject<Function>(showModalKey, Function)
         />
         <img
           srcset="
-            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&png&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-body-SFW.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;2880;3240;3360&format=png&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -213,7 +213,7 @@ const showModal = inject<Function>(showModalKey, Function)
       <picture>
         <source
           srcset="
-            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&avif&quality=75&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&format=avif&quality=75&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -227,7 +227,7 @@ const showModal = inject<Function>(showModalKey, Function)
         />
         <source
           srcset="
-            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&webp&quality=100&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&format=webp&quality=100&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -241,7 +241,7 @@ const showModal = inject<Function>(showModalKey, Function)
         />
         <img
           srcset="
-            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&png&withoutEnlargement&srcset
+            @/assets/refs/sebin-ref-expressions.png?w=480;720;1080;1280;1440;1600;1920;2240;960;2160;2560;0&format=png&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 2240px,
                  (min-width: 100em) 1920px,
@@ -321,21 +321,21 @@ const showModal = inject<Function>(showModalKey, Function)
       <picture>
         <source
           srcset="
-            @/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&avif&quality=75&withoutEnlargement&srcset
+            @/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&format=avif&quality=75&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
           type="image/avif"
         />
         <source
           srcset="
-            @/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&webp&quality=100&withoutEnlargement&srcset
+            @/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&format=webp&quality=100&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
           type="image/webp"
         />
         <img
           srcset="
-            @/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&jpg&quality=95&withoutEnlargement&srcset
+            @/assets/refs/upper-body-ref.png?w=400;700;1000;1200;1500;1800&format=jpg&quality=95&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
           alt="Sebin's upper body closeup"
@@ -368,21 +368,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref12.png?w=290;770;900;580;1280;1540;1700;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 900px, (min-width: 80em) 770px, (min-width: 35em) 640px, 290px"
             alt="Sebin flexing"
@@ -401,21 +401,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref1.png?w=400;700;1000;1200;1500;1800;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             alt="Sebin beckons"
@@ -434,21 +434,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref2.png?w=415;625;875;1250;1500;1750;2250;2625&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 875px, (min-width: 80em) 750px, (min-width: 35em) 625px, 415px"
             alt="Sebin jamming out to some tunes"
@@ -467,21 +467,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref3.png?w=400;800;1000;1200;1500;1800;2100&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             alt="Sebin flexing"
@@ -500,21 +500,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref4.png?w=400;980;1400;1680;1960;2100;2520;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 980px, (min-width: 80em) 840px, (min-width: 35em) 700px, 400px"
             alt="Sebin soaping up"
@@ -533,21 +533,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref5.jpg?w=415;735;1050;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 735px, (min-width: 80em) 630px, (min-width: 35em) 525px, 415px"
             alt="Sebin bulging out"
@@ -566,21 +566,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref6.png?w=400;765;1090;1310;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             alt="Sebin showing you his rings"
@@ -599,21 +599,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 995px, 415px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 992px, 415px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref7.tiff?w=415;995;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1240px, (min-width: 80em) 1190px, (min-width: 35em) 992px, 415px"
             alt="Sebin ready to throw down"
@@ -632,21 +632,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref8.png?w=415;1000;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 80em) 1200px, (min-width: 35em) 1000px, 415px"
             alt="Sebin looking aloof (but chill)"
@@ -665,21 +665,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref9.jpg?w=400;735;1470;1760;2240;1200;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1120px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             alt="Sebin getting out of the pool"
@@ -698,21 +698,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref10.jpg?w=380;600;850;1275;1530;1800&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 600px, (min-width: 80em) 510px, (min-width: 35em) 425px, 380px"
             alt="Sebin getting frisky on the train"
@@ -731,21 +731,21 @@ const showModal = inject<Function>(showModalKey, Function)
         <picture>
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&png&withoutEnlargement&srcset
+              @/assets/refs/muscle/muscle-ref11.png?w=400;765;1200;1635;1965;2295&format=png&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 765px, (min-width: 80em) 655px, (min-width: 35em) 545px, 400px"
             alt="Sebin getting ready to lift"
@@ -770,17 +770,17 @@ const showModal = inject<Function>(showModalKey, Function)
       <template #img>
         <picture>
           <source
-            srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&avif&quality=75&srcset"
+            srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&format=avif&quality=75&as=srcset"
             sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
             type="image/avif"
           />
           <source
-            srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&webp&quality=100&srcset"
+            srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&format=webp&quality=100&as=srcset"
             sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
             type="image/webp"
           />
           <img
-            srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&png&srcset"
+            srcset="@/assets/refs/sebin-ref-penis.png?w=480;720;0&format=png&as=srcset"
             sizes="(min-width: 45em) 1155px, (min-width: 30em) 720px, 480px"
             alt="Sebin's manly parts"
             loading="lazy"

src/views/ClothingView.vue

@@ -15,21 +15,21 @@ import RefGallery from '@/components/RefGallery.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 910px, (min-width: 80em) 780px, (min-width: 35em) 650px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 910px, (min-width: 80em) 780px, (min-width: 35em) 650px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&png&withoutEnlargement&srcset
+              @/assets/refs/clothes/casual/fullbody.png?w=400;780;910;1300;1560;0&format=png&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 910px, (min-width: 80em) 780px, (min-width: 35em) 650px, 400px"
             alt="Sebin in his casual outfit"
@@ -51,19 +51,19 @@ import RefGallery from '@/components/RefGallery.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 915px, (min-width: 80em) 785px, (min-width: 35em) 655px, 400px"
           />
           <source
             srcset="
-              @/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 915px, (min-width: 80em) 785px, (min-width: 35em) 655px, 400px"
           />
           <img
             srcset="
-              @/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&jpg&withoutEnlargement&srcset
+              @/assets/refs/clothes/cold/fullbody.png?w=400;785;915;1310;0&format=jpg&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 915px, (min-width: 80em) 785px, (min-width: 35em) 655px, 400px"
             alt="Sebin in his cold weather outfit"
@@ -85,19 +85,19 @@ import RefGallery from '@/components/RefGallery.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 745px, (min-width: 80em) 639px, (min-width: 35em) 532px, 400px"
           />
           <source
             srcset="
-              @/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 745px, (min-width: 80em) 639px, (min-width: 35em) 532px, 400px"
           />
           <img
             srcset="
-              @/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&jpg&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/fullbody.png?w=400;640;800;1070;1280;1490;1605;0&format=jpg&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 745px, (min-width: 80em) 639px, (min-width: 35em) 532px, 400px"
             alt="Sebin in his workout outfit (fullbody)"
@@ -119,19 +119,19 @@ import RefGallery from '@/components/RefGallery.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500x, 400px"
           />
           <source
             srcset="
-              @/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
           />
           <img
             srcset="
-              @/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&jpg&withoutEnlargement&srcset
+              @/assets/refs/clothes/workout/closeup.png?w=400;600;800;1000;1200;1400;1800;0&format=jpg&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 400px"
             alt="Sebin in his workout outfit (close-up)"
@@ -153,21 +153,21 @@ import RefGallery from '@/components/RefGallery.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&avif&quality=75&withoutEnlargement&srcset
+              @/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&format=avif&quality=75&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 850px, (min-width: 80em) 730px, (min-width: 35em) 605px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&webp&quality=100&withoutEnlargement&srcset
+              @/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&format=webp&quality=100&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 850px, (min-width: 80em) 730px, (min-width: 35em) 605px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&jpg&quality=95&withoutEnlargement&srcset
+              @/assets/refs/clothes/lazy/fullbody.png?w=400;850;1210;1460;0&format=jpg&quality=95&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 850px, (min-width: 80em) 730px, (min-width: 35em) 605px, 400px"
             alt="Tracksuit pants"
@@ -189,21 +189,21 @@ import RefGallery from '@/components/RefGallery.vue'
         <picture>
           <source
             srcset="
-              @/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&avif&withoutEnlargement&srcset
+              @/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&format=avif&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1028px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             type="image/avif"
           />
           <source
             srcset="
-              @/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&webp&withoutEnlargement&srcset
+              @/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&format=webp&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1028px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             type="image/webp"
           />
           <img
             srcset="
-              @/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&withoutEnlargement&srcset
+              @/assets/refs/clothes/lazy/undies.png?w=400;880;1028;1470;1760;0&withoutEnlargement&as=srcset
             "
             sizes="(min-width: 120em) 1028px, (min-width: 80em) 880px, (min-width: 35em) 735px, 400px"
             alt="Shorts"

src/views/OverdriveView.vue

@@ -9,27 +9,27 @@ import RefFigure from '@/components/RefFigure.vue'
     <h1>Overdrive Form</h1>
   </section>
 
-  <RefFigure id="overdrive-ref" polaroidBorder>
+  <RefFigure id="overdrive-ref" cornerText>
     <!-- max 1080px -->
     <template #img>
       <picture>
         <source
           srcset="
-            @/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&avif&quality=75&withoutEnlargement&srcset
+            @/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&format=avif&quality=75&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 450px"
           type="image/avif"
         />
         <source
           srcset="
-            @/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&webp&quality=100&withoutEnlargement&srcset
+            @/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&format=webp&quality=100&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 450px"
           type="image/webp"
         />
         <img
           srcset="
-            @/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&jpg&quality=95&withoutEnlargement&srcset
+            @/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&format=jpg&quality=95&withoutEnlargement&as=srcset
           "
           sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 450px"
           alt="Sebin in Overdrive"

tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["globals.d.ts", "env.d.ts", "src/**/*", "src/**/*.vue", "package.json"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

tsconfig.json

@@ -1,16 +1,11 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-
+  "files": [],
   "references": [
     {
       "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
     }
   ]
 }

tsconfig.node.json

@@ -1,8 +1,20 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "include": [
+    "globals.d.ts",
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
   "compilerOptions": {
     "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "types": ["node"]
   }
 }

vite.config.mts

@@ -2,6 +2,7 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import { imagetools } from 'vite-imagetools'
+import autoprefixer from 'autoprefixer'
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
@@ -16,7 +17,7 @@ export default defineConfig({
   css: {
     devSourcemap: true,
     postcss: {
-      plugins: [require('autoprefixer')]
+      plugins: [autoprefixer({})]
     }
   }
 })