From 624af7cdc0f929346ab7e65a27a4f213c9c3cd36 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Sun, 10 Nov 2024 08:29:08 +0100
Subject: [PATCH] safari optimizations

---
 components/CollectionDetail.vue            |  8 ++++----
 components/Footer.vue                      | 20 +++++++++++++++-----
 components/Header.vue                      |  6 +++---
 components/dynamicZone/ColumnImageText.vue |  6 +++---
 components/dynamicZone/DualColumnText.vue  |  2 +-
 components/dynamicZone/FullImage.vue       |  4 ++--
 components/dynamicZone/Gallery.vue         |  4 ++--
 components/field/Content.vue               |  3 ++-
 layouts/landing.vue                        |  2 +-
 nuxt.config.ts                             |  1 -
 package.json                               |  2 +-
 types/field/content.ts                     |  2 +-
 12 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/components/CollectionDetail.vue b/components/CollectionDetail.vue
index 841f470..8f57f1b 100644
--- a/components/CollectionDetail.vue
+++ b/components/CollectionDetail.vue
@@ -18,9 +18,9 @@
     <NuxtPicture
       v-if="data?.image"
       loading="lazy"
-      class="w-full h-full sm:w-fit sm:h-[50vh] max-w-full object-cover object-center"
+      class="max-sm:w-full h-full sm:h-[50vh] max-w-full object-cover object-center"
       :src="baseUrl + data.image.url"
-      :imgAttrs="{ class: 'w-full h-full sm:w-fit sm:h-[50vh] object-cover object-center' }"
+      :imgAttrs="{ class: 'h-full sm:h-[50vh] object-cover object-center' }"
     />
     <br v-if="data?.image" />
     <div v-if="data?.content">
@@ -34,9 +34,9 @@
         <NuxtPicture
           v-for="img in data.attachment"
           loading="lazy"
-          class="w-full h-fit sm:w-fit sm:h-48 object-cover object-center"
+          class="max-sm:w-full sm:h-48 object-cover object-center"
           :src="baseUrl + img.url"
-          :imgAttrs="{ class: 'w-full h-fit sm:w-fit sm:h-48 object-cover object-center' }"
+          :imgAttrs="{ class: 'max-sm:w-full sm:h-48 object-cover object-center' }"
         />
       </div>
     </div>
diff --git a/components/Footer.vue b/components/Footer.vue
index e9a5a27..8d2437b 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -1,13 +1,23 @@
 <template>
-  <div darkgray class="h-48 min-h-fit w-full px-5 py-10 flex-col justify-center items-center flex gap-2">
+  <footer darkgray class="h-48 min-h-fit w-full px-5 py-10 flex-col justify-center items-center flex gap-2">
     <div class="self-stretch py-5 justify-center items-center gap-4 md:gap-10 inline-flex flex-wrap">
-      <NuxtLink v-for="link in footer.links" :key="link.id" :to="link.URL" :target="link.target" class="text-base">
-        {{ link.text }}
-      </NuxtLink>
+      <div v-for="link in footer.links" :key="link.id" class="contents">
+        <a v-if="link.URL.startsWith('http')" :href="link.URL" :target="link.target" class="text-base">{{
+          link.text
+        }}</a>
+        <NuxtLink
+          v-else
+          :to="`${link.URL.startsWith('/') ? '' : '/'}${link.URL}`"
+          :target="link.target"
+          class="text-base"
+        >
+          {{ link.text }}
+        </NuxtLink>
+      </div>
     </div>
     <div class="text-base text-center">@Copyright {{ new Date().getFullYear() }} {{ footer.copyright }}</div>
     <div class="text-base text-center">verwaltet von {{ footer.designed_developed_by }}</div>
-  </div>
+  </footer>
 </template>
 
 <script setup lang="ts">
diff --git a/components/Header.vue b/components/Header.vue
index 3932d4f..512e183 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="sticky top-0 h-fit">
+  <header class="sticky top-0 h-fit">
     <div
       primary
       class="h-24 min-h-fit w-full px-4 md:px-12 py-2.5 justify-between items-center gap-5 flex overflow-hidden"
     >
       <NuxtLink to="/">
-        <img class="h-16 w-fit min-w-fit" :src="baseUrl + navbar.logo.url" />
+        <img class="h-16" :src="baseUrl + navbar.logo.url" />
       </NuxtLink>
       <div class="md:hidden">
         <svg
@@ -57,7 +57,7 @@
         {{ sublink.name }}
       </NuxtLink>
     </div>
-  </div>
+  </header>
 </template>
 
 <script setup lang="ts">
diff --git a/components/dynamicZone/ColumnImageText.vue b/components/dynamicZone/ColumnImageText.vue
index 8652d12..f2ff2ea 100644
--- a/components/dynamicZone/ColumnImageText.vue
+++ b/components/dynamicZone/ColumnImageText.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="flex flex-col md:flex-row gap-4">
+  <div class="flex flex-col md:flex-row gap-8 md:gap-4">
     <NuxtPicture
       loading="lazy"
-      class="w-full md:w-1/2 min-w-[50%] h-fit object-cover object-center"
+      class="w-full md:w-1/2 min-w-[50%] object-cover object-center"
       :class="data?.image_left ? 'order-0' : 'order-1'"
       :src="baseUrl + data?.image.url"
-      :imgAttrs="{ class: 'w-full h-fit object-cover object-center' }"
+      :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
     />
     <FieldContent :data="data?.text" />
   </div>
diff --git a/components/dynamicZone/DualColumnText.vue b/components/dynamicZone/DualColumnText.vue
index cb23a6c..b4222ab 100644
--- a/components/dynamicZone/DualColumnText.vue
+++ b/components/dynamicZone/DualColumnText.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col md:flex-row gap-4">
+  <div class="flex flex-col md:flex-row gap-8 md:gap-4">
     <FieldContent :data="data?.left_side" />
     <FieldContent :data="data?.right_side" />
   </div>
diff --git a/components/dynamicZone/FullImage.vue b/components/dynamicZone/FullImage.vue
index fd7e1c7..bf8e9af 100644
--- a/components/dynamicZone/FullImage.vue
+++ b/components/dynamicZone/FullImage.vue
@@ -1,9 +1,9 @@
 <template>
   <NuxtPicture
     loading="lazy"
-    class="w-full lg:w-1/2 lg:min-w-[50%] h-fit object-cover object-center mx-auto"
+    class="w-full lg:w-1/2 lg:min-w-[50%] object-cover object-center mx-auto"
     :src="baseUrl + data?.image.url"
-    :imgAttrs="{ class: 'w-full h-fit object-cover object-center' }"
+    :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
   />
 </template>
 
diff --git a/components/dynamicZone/Gallery.vue b/components/dynamicZone/Gallery.vue
index 8afdac8..9115681 100644
--- a/components/dynamicZone/Gallery.vue
+++ b/components/dynamicZone/Gallery.vue
@@ -3,9 +3,9 @@
     <NuxtPicture
       v-for="img in data?.images"
       loading="lazy"
-      class="w-full h-fit sm:w-fit sm:h-48 object-cover object-center"
+      class="max-sm:w-full sm:h-48 object-cover object-center"
       :src="baseUrl + img.url"
-      :imgAttrs="{ class: 'w-full h-fit sm:w-fit sm:h-48 object-cover object-center' }"
+      :imgAttrs="{ class: 'max-sm:w-full sm:h-48 object-cover object-center' }"
     />
   </div>
 </template>
diff --git a/components/field/Content.vue b/components/field/Content.vue
index f445084..4f4c556 100644
--- a/components/field/Content.vue
+++ b/components/field/Content.vue
@@ -26,8 +26,9 @@
         primary
         :to="item.children[0].text.split('->')[0]"
         class="w-fit p-2 px-3 rounded-md mx-auto mt-3"
-        >{{ item.children[0].text.split("->")[1] }}</NuxtLink
       >
+        {{ item.children[0].text.split("->")[1] }}
+      </NuxtLink>
     </div>
   </div>
 </template>
diff --git a/layouts/landing.vue b/layouts/landing.vue
index 7605dab..3dff4d2 100644
--- a/layouts/landing.vue
+++ b/layouts/landing.vue
@@ -6,7 +6,7 @@
       :src="baseUrl + backdrop.url"
       :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
     />
-    <img class="absolute p-4 w-full h-fit sm:h-40 sm:w-fit bottom-5" :src="baseUrl + navbar.logo.url" />
+    <img class="absolute p-4 max-sm:w-full sm:h-40 bottom-5" :src="baseUrl + navbar.logo.url" />
   </div>
   <Header />
   <slot />
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ddcf532..54e4034 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -10,7 +10,6 @@ export default defineNuxtConfig({
       meta: [
         { charset: "utf-8" },
         { name: "viewport", content: "width=device-width, initial-scale=1" },
-        { hid: "description", name: "description", content: "" },
         { name: "format-detection", content: "telephone=no" },
       ],
       link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.png" }],
diff --git a/package.json b/package.json
index 2c44bad..b899b80 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "dev": "nuxt dev --host",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
diff --git a/types/field/content.ts b/types/field/content.ts
index ed11643..1e82813 100644
--- a/types/field/content.ts
+++ b/types/field/content.ts
@@ -12,7 +12,7 @@ export default interface ContentField
       }
     | {
         type: "code";
-        children: Array<{ type: "list-item"; children: Array<TypeField> }>;
+        children: Array<TextField>;
         language: "plaintext";
       }
   > {}