FIX: some fixes for rollout

Sizing, 3rd party calls, updates

app/components/Booking.vue

@@ -1,6 +1,6 @@
 <template>
   <section id="services" class="Services content">
-    <h1>Projektbuchungen</h1>
+    <h1>Projekt buchen</h1>
     <h2>Du hast also beschlossen, dass du <span class="highlight">meine Hilfe</span> brauchst. Cool!</h2>
     <p class="margin-top">Hinter diesen Angeboten gibt es <span class="highlight">keinerlei Abos oder versteckte Kosten</span>.
       Aus Transparenzgründen sei aber gesagt, dass sich <span class="highlight">*alle Preise zzgl. 19 % Umsatzsteuer</span>. verstehen.</p>
@@ -25,7 +25,7 @@
             <span v-if="service.price.post" class="post">{{service.price.post}}</span>
           </div>
           <div aria-hidden="true" class="bg-icon">
-            <Icon :name="`ph:${service.icon}-thin`" size="1.5em" mode="svg" />
+            <Icon :name="service.icon" size="1.5em" mode="svg" />
           </div>
         </header>
         <main>
@@ -85,7 +85,7 @@ const oneOff : Service[] = [
       value: 149,
     },
     smallClaim: 'A11y, bugs, schlechter Code.',
-    icon: 'magnifying-glass',
+    icon: 'ph:magnifying-glass-thin',
     button: 'Jetzt untersuchen',
     link: 'https://tidycal.com/webfussel/quick-check',
     list: [
@@ -102,7 +102,7 @@ const oneOff : Service[] = [
       value: 999,
     },
     smallClaim: 'Deine Vision.',
-    icon: 'trend-up',
+    icon: 'ph:trend-up-thin',
     button: 'Jetzt durchstarten',
     link: 'https://tidycal.com/webfussel/project-booking',
     list: [
@@ -120,7 +120,7 @@ const oneOff : Service[] = [
       post: '/ Tag / Person',
     },
     smallClaim: 'Wenn man\'s selber können muss.',
-    icon: 'graduation-cap',
+    icon: 'ph:graduation-cap-thin',
     button: 'Frag nach!',
     link: 'https://tidycal.com/webfussel/project-booking',
     list: [

app/components/Flatrate.vue

@@ -14,7 +14,7 @@
           <p class="claim">{{service.smallClaim}}</p>
           <p class="price">{{intl.format(service.price)}}</p>
           <div aria-hidden="true" class="bg-icon">
-            <Icon :name="`ph:${service.icon}-thin`" size="1.5em" mode="svg" />
+            <Icon :name="service.icon" size="1.5em" mode="svg" />
           </div>
         </header>
         <main>
@@ -24,7 +24,7 @@
               <span class="value">{{ service.hours }} Stunden pro Woche zugesichert</span>
             </li>
             <li v-for="(check, index) in service.checks">
-              <Icon class="icon" :class="{ 'yes' : check, 'no' : !check }" :name="`ph:${check ? 'check' : 'x'}-circle-duotone`" mode="svg" />
+              <Icon class="icon" :class="{ 'yes' : check, 'no' : !check }" :name="check ? 'ph:check-circle-duotone' : 'ph:x-circle-duotone'" mode="svg" />
               <span class="value">{{ points[index] }}</span>
             </li>
           </ul>
@@ -82,7 +82,7 @@ const flatrate : Service[] =
       {
         title: 'Casual',
         smallClaim: 'Für kleine Aufgaben nebenbei.',
-        icon: 'baby-carriage',
+        icon: 'ph:baby-carriage-thin',
         button: 'Jetzt klar machen',
         link: 'https://tidycal.com/webfussel/flatrate-casual',
         best: false,
@@ -100,7 +100,7 @@ const flatrate : Service[] =
       {
         title: 'Gold-Fussel',
         smallClaim: 'Wenn\'s mal wieder zu viel wird.',
-        icon: 'coins',
+        icon: 'ph:coins-thin',
         button: 'Jetzt Gold schürfen',
         link: 'https://tidycal.com/webfussel/flatrate-gold-fussel',
         best: true,
@@ -118,7 +118,7 @@ const flatrate : Service[] =
       {
         title: 'Big Chonker',
         smallClaim: 'Für die richtig großen Sachen.',
-        icon: 'skull',
+        icon: 'ph:skull-thin',
         button: 'Jetzt Fett trimmen',
         link: 'https://tidycal.com/webfussel/flatrate-big-chonker',
         best: false,

app/components/Spoiler.vue

@@ -1,6 +1,6 @@
 <template>
   <details class="Spoiler" :open="open" @click="toggle">
-    <summary><Icon class="icon" :name="`ph:${open ? 'minus' : 'plus'}-circle-duotone`" mode="svg" />{{ header }}</summary>
+    <summary><Icon class="icon" :name="icon" mode="svg" />{{ header }}</summary>
     <div>
       <p v-for="text in content">{{ text }}</p>
     </div>
@@ -16,8 +16,10 @@ type Props = {
 defineProps<Props>()
 
 const open = ref(false)
-const toggle = (event) => {
+const toggle = (event : MouseEvent) => {
   event.preventDefault()
   open.value = !open.value
 }
+
+const icon = computed(() => open.value ? 'ph:minus-circle-duotone' : 'ph:plus-circle-duotone')
 </script>

app/utils/socials.ts

@@ -2,32 +2,32 @@ export const socials = [
   {
     href: 'https://www.linkedin.com/in/webfussel/',
     icon: 'ph:linkedin-logo-duotone',
-    name: 'LinkedIn: Fiona Urban aka webfussel',
+    name: 'Fiona Urban aka webfussel',
     'aria-label': 'Externer Link: LinkedIn Profil'
   },
   {
     href: 'https://mastodontech.de/@webfussel',
     icon: 'ph:mastodon-logo-duotone',
-    name: 'Mastodon: @webfussel@mastodontech',
+    name: '@webfussel@mastodontech',
     rel: 'me',
     'aria-label': 'Externer Link: Mastodon Profil'
   },
   {
     href: 'https://bsky.app/profile/webfussel.de',
     icon: 'wf:bluesky',
-    name: 'Bluesky: @webfussel.de',
+    name: '@webfussel.de',
     'aria-label': 'Externer Link: Bluesky Profil'
   },
   {
     href: 'https://twitch.tv/webfussel',
     icon: 'ph:twitch-logo-duotone',
-    name: 'Twitch: webfussel',
+    name: 'webfussel',
     'aria-label': 'Externer Link: Twitch Kanal'
   },
   {
     href: 'https://ko-fi.com/webfussel',
     icon: 'wf:kofi',
-    name: 'Ko-Fi: webfussel',
+    name: 'webfussel',
     'aria-label': 'Externer Link: KoFi Profil'
   },
 ]

package.json

@@ -15,10 +15,11 @@
   },
   "devDependencies": {
     "@iconify-json/material-symbols": "^1.2.14",
+    "@iconify-json/ph": "^1.2.2",
     "@iconify-json/ri": "^1.2.5",
     "@nuxt/fonts": "^0.11.4",
     "@nuxt/icon": "^1.10.3",
-    "nuxt": "^3.15.3",
+    "nuxt": "^3.17.4",
     "postcss-nesting": "^13.0.0"
   }
 }