FIX: customer logos

Fixed HiDPI customer logos

components/Customers.vue

@@ -4,7 +4,18 @@
     <h3>Meine bisherigen Geschäftpartner</h3>
     <div class="customer-list margin-top default-gap">
       <a v-for="customer in customers" :href="customer.link" target="_blank" rel="noopener noreferrer">
-        <img loading="lazy" height="50" :width="customer.logo.width" :alt="customer.name" :src="customer.logo.src" :class="[customer.logo.white ? 'white' : '']" />
+        <img
+            loading="lazy"
+            height="50"
+            :width="customer.logo.width"
+            :alt="customer.name"
+            :srcset="[
+                getCustomerImage(customer.logo.src)('1x', true),
+                getCustomerImage(customer.logo.src)('2x', true),
+                getCustomerImage(customer.logo.src)('3x', true),
+            ].join(', ')"
+            :src="getCustomerImage(customer.logo.src)('1x', false)"
+        />
       </a>
     </div>
     <h3 class="margin-top-big">Projektauswahl</h3>
@@ -34,21 +45,22 @@
 <script setup lang="ts">
 import { css, pcss, html, js, njs, nuxt, scss, ts, tw, vue, flutter, dart, android } from '~/Skills'
 
+const getCustomerImage = (img : string) => getImage('/img/customers/', img)
+
 const customers = [
   {
     name: 'Bounce Commerce',
     link: 'https://bounce-commerce.de',
     logo: {
-      src: '/img/customers/bounce.webp',
+      src: 'bounce',
       width: 150,
-      white: true,
     },
   },
   {
     name: 'GMX',
     link: 'https://gmx.net',
     logo: {
-      src: '/img/customers/gmx.webp',
+      src: 'gmx',
       width: 148,
       white: true,
     },
@@ -57,7 +69,7 @@ const customers = [
     name: 'WEB.DE',
     link: 'https://web.de',
     logo: {
-      src: '/img/customers/webde.webp',
+      src: 'webde',
       width: 50,
     },
   },
@@ -65,7 +77,7 @@ const customers = [
     name: '1&1',
     link: 'https://1und1.de',
     logo: {
-      src: '/img/customers/einsundeins.webp',
+      src: '1u1',
       width: 50,
     },
   },
@@ -73,7 +85,7 @@ const customers = [
     name: 'Körrie',
     link: 'https://körrie.de',
     logo: {
-      src: '/img/customers/koerrie.webp',
+      src: 'koerrie',
       width: 50,
     }
   },
@@ -81,7 +93,7 @@ const customers = [
     name: 'Pembe',
     link: 'https://pembe.io',
     logo: {
-      src: '/img/customers/pembe.webp',
+      src: 'pembe',
       width: 48,
       white: true,
     },
@@ -90,7 +102,7 @@ const customers = [
     name: 'SAE Institute Germany',
     link: 'https://www.sae.edu/deu/en/sae-home/',
     logo: {
-      src: '/img/customers/sae.webp',
+      src: 'sae',
       width: 77,
       white: true,
     },

components/Person.vue

@@ -4,8 +4,8 @@
         loading="lazy"
         width="150"
         height="150"
-        :srcset="[getImage('1x', true), getImage('2x', true), getImage('3x', true)].join(', ')"
-        :src="getImage('1x', false)"
+        :srcset="[userImage('1x', true), userImage('2x', true), userImage('3x', true)].join(', ')"
+        :src="userImage('1x', false)"
         :alt="`Bild von ${name}`"
     />
     <h3>{{name}}</h3>
@@ -28,5 +28,5 @@ type Props = {
 
 const { img } = defineProps<Props>()
 
-const getImage = (size : '1x' | '2x' | '3x', set : boolean) => `/img/network/${img}@${size}.webp${set ? ` ${size}` : ''}`
+const userImage = getImage('/img/network/', img)
 </script>

utils/image.ts

@@ -0,0 +1 @@
+export const getImage = (path : string, img : string) => (size : '1x' | '2x' | '3x', set : boolean) => `${path}${img}@${size}.webp${set ? ` ${size}` : ''}`