responsive and config

app.vue

@@ -1,3 +1,12 @@
 <template>
   <NuxtPage />
 </template>
+
+<script setup>
+const runtimeConfig = useRuntimeConfig();
+const appTitle = runtimeConfig.public.app.title;
+
+useHead({
+  title: appTitle,
+});
+</script>

components/CollectionDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-[calc(100vh-9rem)] h-fit container mx-auto py-12">
+  <div class="min-h-[calc(100vh-9rem)] h-fit container mx-auto py-12 px-2">
     <h1>{{ data?.title }}</h1>
     <p v-if="data?.date">
       {{
@@ -18,9 +18,9 @@
     <NuxtPicture
       v-if="data?.image"
       loading="lazy"
-      class="w-fit h-[50vh] max-w-full object-cover object-center"
+      class="w-full h-full sm:w-fit sm:h-[50vh] max-w-full object-cover object-center"
       :src="baseUrl + data.image.url"
-      :imgAttrs="{ class: 'w-fit h-[50vh] max-w-full object-cover object-center' }"
+      :imgAttrs="{ class: 'w-full h-full sm:w-fit sm:h-[50vh] object-cover object-center' }"
     />
     <br v-if="data?.image" />
     <div v-if="data?.content">
@@ -30,13 +30,13 @@
     <br />
     <div v-if="data?.attachment">
       <p>Anhang:</p>
-      <div class="flex flex-row flex-wrap gap-2 w-full min-h-fit">
+      <div class="flex flex-col sm:flex-row flex-wrap gap-2 w-full min-h-fit">
         <NuxtPicture
           v-for="img in data.attachment"
           loading="lazy"
-          class="w-fit h-48 object-cover object-center"
+          class="w-full h-fit sm:w-fit sm:h-48 object-cover object-center"
           :src="baseUrl + img.url"
-          :imgAttrs="{ class: 'w-fit h-48 object-cover object-center' }"
+          :imgAttrs="{ class: 'w-full h-fit sm:w-fit sm:h-48 object-cover object-center' }"
         />
       </div>
     </div>

components/Footer.vue

@@ -1,12 +1,12 @@
 <template>
-  <div darkgray class="h-48 min-h-fit w-full px-5 py-10 flex-col justify-center items-center flex">
+  <div 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>
-    <div class="text-base">@Copyright {{ new Date().getFullYear() }} {{ footer.copyright }}</div>
-    <div class="text-base">verwaltet von {{ footer.designed_developed_by }}</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>
 </template>
 

components/base/ListImageItem.vue

@@ -10,24 +10,22 @@
       :src="baseUrl + data?.image?.url"
       :imgAttrs="{ class: 'w-full h-56 object-cover object-center' }"
     />
-    <div class="w-full h-44 relative bg-white">
-      <div class="w-full h-full px-2.5 py-5 flex flex-col justify-start items-start gap-2.5">
-        <h1>{{ data?.title }}</h1>
-        <p v-if="data?.date" class="self-stretch grow shrink basis-0 text-[#5c5c5c]">
-          {{
-            new Date(data?.date ?? "").toLocaleString("de-DE", {
-              day: "2-digit",
-              month: "long",
-              year: "numeric",
-              minute: "2-digit",
-              hour: "2-digit",
-            })
-          }}
-        </p>
-        <p class="self-stretch grow shrink basis-0 text-[#5c5c5c]">
-          {{ data?.description }}
-        </p>
-      </div>
+    <div class="w-full h-44 relative bg-white px-2 py-5 flex flex-col justify-start items-start gap-2 overflow-y-auto">
+      <h1>{{ data?.title }}</h1>
+      <p v-if="data?.date" class="w-full text-[#5c5c5c]">
+        {{
+          new Date(data?.date ?? "").toLocaleString("de-DE", {
+            day: "2-digit",
+            month: "long",
+            year: "numeric",
+            minute: "2-digit",
+            hour: "2-digit",
+          })
+        }}
+      </p>
+      <p class="w-full text-[#5c5c5c]">
+        {{ data?.description }}
+      </p>
     </div>
   </NuxtLink>
 </template>

components/dynamicZone/ColumnImageText.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col md:flex-row gap-4">
     <NuxtPicture
       loading="lazy"
-      class="w-1/2 min-w-[50%] h-fit object-cover object-center"
+      class="w-full md:w-1/2 min-w-[50%] h-fit 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' }"

components/dynamicZone/FullImage.vue

@@ -1,7 +1,7 @@
 <template>
   <NuxtPicture
     loading="lazy"
-    class="w-full md:w-1/2 md:min-w-[50%] h-fit object-cover object-center mx-auto"
+    class="w-full lg:w-1/2 lg:min-w-[50%] h-fit object-cover object-center mx-auto"
     :src="baseUrl + data?.image.url"
     :imgAttrs="{ class: 'w-full h-fit object-cover object-center' }"
   />

components/dynamicZone/Gallery.vue

@@ -3,9 +3,9 @@
     <NuxtPicture
       v-for="img in data?.images"
       loading="lazy"
-      class="w-full h-fit md:w-fit md:h-48 object-cover object-center"
+      class="w-full h-fit sm:w-fit sm:h-48 object-cover object-center"
       :src="baseUrl + img.url"
-      :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
+      :imgAttrs="{ class: 'w-full h-fit sm:w-fit sm:h-48 object-cover object-center' }"
     />
   </div>
 </template>

components/field/Content.vue

@@ -21,6 +21,13 @@
           <FieldType v-for="child in list.children" :data="child" />
         </li>
       </ol>
+      <NuxtLink
+        v-else-if="item.type == 'code'"
+        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
+      >
     </div>
   </div>
 </template>

nuxt.config.ts

@@ -3,7 +3,7 @@ export default defineNuxtConfig({
   app: {
     baseURL: "/",
     head: {
-      title: process.env.APP_TITLE,
+      title: "Feuerwehr",
       htmlAttrs: {
         lang: "de",
       },
@@ -31,24 +31,18 @@ export default defineNuxtConfig({
   modules: ["@nuxtjs/strapi", "@nuxt/image"],
 
   strapi: {
-    url: process.env.STRAPI_URL,
+    url: process.env.PUBLIC_STRAPI_URL,
     prefix: "/api",
     version: "v5",
   },
 
   runtimeConfig: {
-    strapi: {
-      url: process.env.STRAPI_URL ?? "localhost:1337",
-    },
-    app: {
-      title: process.env.APP_TITLE ?? "Feuerwehr",
-    },
     public: {
       strapi: {
-        url: process.env.STRAPI_URL ?? "localhost:1337",
+        url: process.env.PUBLIC_STRAPI_URL ?? "localhost:1337",
       },
       app: {
-        title: process.env.APP_TITLE ?? "Feuerwehr",
+        title: process.env.PUBLIC_APP_TITLE ?? "Feuerwehr",
       },
     },
   },

types/field/content.ts

@@ -10,6 +10,11 @@ export default interface ContentField
         format: "unordered" | "ordered";
         children: Array<{ type: "list-item"; children: Array<TypeField> }>;
       }
+    | {
+        type: "code";
+        children: Array<{ type: "list-item"; children: Array<TypeField> }>;
+        language: "plaintext";
+      }
   > {}
 
 export type TypeField = TextField | { type: "link"; url: string; children: Array<TextField> };