Optimize images (PNG → AVIF)

components/animations/Portal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import sky from '~/assets/images/textures/sky.png'
-import particles from '~/assets/images/textures/particles.png'
+import sky from 'assets/images/textures/sky.png'
+import particles from 'assets/images/textures/particles.png'
 
 const { $local } = useNuxtApp()
 const config = useAppConfig()

components/blocks/Navigation.vue

@@ -2,7 +2,7 @@
 import { storeToRefs } from 'pinia'
 import { usePageStore } from '~/stores/pages'
 
-import logo from '~/assets/images/logo.gif'
+import logo from 'assets/images/logo.avif'
 
 const pageStore = usePageStore()
 const { pages } = storeToRefs(pageStore)

components/blocks/Settings.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import cogIcon from '~/assets/images/icons/cog.png'
-import pearlIcon from '~/assets/images/icons/pearl.gif'
+import cogIcon from 'assets/images/icons/cog.avif'
+import pearlIcon from 'assets/images/icons/pearl.avif'
 
 const config = useAppConfig()
 const { animate } = storeToRefs(usePageStore())

components/content/Card.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
 
-import warningIcon from '~/assets/images/icons/accent/warning.png'
-import errorIcon from '~/assets/images/icons/accent/error.png'
-import infoIcon from '~/assets/images/icons/accent/info.png'
-import helpIcon from '~/assets/images/icons/accent/help.png'
-import checkIcon from '~/assets/images/icons/accent/checkmark.png'
-import ideaIcon from '~/assets/images/icons/accent/idea.png'
+import warningIcon from 'assets/images/icons/accent/warning.avif'
+import errorIcon from 'assets/images/icons/accent/error.avif'
+import infoIcon from 'assets/images/icons/accent/info.avif'
+import helpIcon from 'assets/images/icons/accent/help.avif'
+import checkIcon from 'assets/images/icons/accent/checkmark.avif'
+import ideaIcon from 'assets/images/icons/accent/idea.avif'
 
 type IconOptions = 'warning' | 'error' | 'info' | 'help' | 'checkmark' | 'idea'
 

docker-compose.yml

@@ -1,5 +1,3 @@
-version: "3"
-
 services:
   index:
     container_name: frontend-index

pages/blog/[slug].vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { formatDate } from 'date-fns'
-import chestAnimation from '~/assets/images/chest.webp'
+import chestAnimation from 'assets/images/chest.avif'
 import { render } from 'vue'
 import { CodeControls } from '#components'
 

stores/pages.ts

@@ -1,7 +1,7 @@
-import aboutIcon from '~/assets/images/icons/accent/info.png'
-import projectIcon from '~/assets/images/icons/defrag.png'
-import socialIcon from '~/assets/images/icons/user.png'
-import blogIcon from '~/assets/images/icons/book.png'
+import aboutIcon from 'assets/images/icons/accent/info.avif'
+import projectIcon from 'assets/images/icons/defrag.avif'
+import socialIcon from 'assets/images/icons/user.avif'
+import blogIcon from 'assets/images/icons/book.avif'
 
 export const usePageStore = defineStore('page', () => {
   const title: string = 'Enderman'

stylelint.config.mjs

@@ -1,4 +1,5 @@
 /** @type {import("stylelint").Config} */
+
 export default {
   defaultSeverity: 'warning',
   formatter: 'compact',