component formatting and types

components/CollectionDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <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">
+    <p v-if="data?.date && data.date.includes('T')">
       {{
         new Date(data?.date ?? "").toLocaleString("de-DE", {
           day: "2-digit",
@@ -12,6 +12,15 @@
         })
       }}
     </p>
+    <p v-else-if="data?.date">
+      {{
+        new Date(data?.date ?? "").toLocaleString("de-DE", {
+          day: "2-digit",
+          month: "long",
+          year: "numeric",
+        })
+      }}
+    </p>
     <br />
     <p>{{ data?.description }}</p>
     <br />

components/ContentBuilder.vue

@@ -1,17 +1,19 @@
 <template>
   <div class="min-h-[calc(100vh-9rem)] w-full">
-    <SharedHero v-if="hero" :data="hero" />
+    <ItemsHero v-if="hero" :data="hero" />
     <div class="container mx-auto py-12 px-2 min-h-[50vh] flex flex-col gap-2">
       <div v-for="item in content" class="contents">
-        <DynamicZoneColumnImageText v-if="item.__component == 'dynamic-zone.column-image-text'" :data="item" />
+        <DynamicZoneSection v-if="item.__component == 'dynamic-zone.section'" :data="item" />
+        <DynamicZoneSpacer v-else-if="item.__component == 'dynamic-zone.spacer'" :data="item" />
+        <DynamicZoneColumnImageText v-else-if="item.__component == 'dynamic-zone.column-image-text'" :data="item" />
         <DynamicZoneDualColumnText v-else-if="item.__component == 'dynamic-zone.dual-column-text'" :data="item" />
-        <DynamicZoneEmphasiseArticle v-else-if="item.__component == 'dynamic-zone.emphasise-article'" :data="item" />
         <DynamicZoneFullImage v-else-if="item.__component == 'dynamic-zone.full-image'" :data="item" />
         <DynamicZoneFullText v-else-if="item.__component == 'dynamic-zone.full-text'" :data="item" />
         <DynamicZoneGallery v-else-if="item.__component == 'dynamic-zone.gallery'" :data="item" />
         <DynamicZoneFileDownload v-else-if="item.__component == 'dynamic-zone.file-download'" :data="item" />
         <DynamicZoneEmbedding v-else-if="item.__component == 'dynamic-zone.embedding'" :data="item" />
         <SharedList v-else-if="item.__component == 'shared.list'" :data="item" />
+        <SharedEmphasiseArticle v-else-if="item.__component == 'shared.emphasise-article'" :data="item" />
         <br />
       </div>
     </div>
@@ -20,11 +22,11 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type SharedHero from "../types/component/sharedHero";
+import type ItemsHero from "../types/component/items/hero";
 import type { ComponentTypes } from "../types/component/baseComponent";
 
 defineProps({
-  hero: { type: Object as PropType<SharedHero>, required: false, default: null },
+  hero: { type: Object as PropType<ItemsHero>, required: false, default: null },
   content: Array<ComponentTypes>,
 });
 </script>

components/Footer.vue

@@ -1,7 +1,10 @@
 <template>
-  <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">
-      <div v-for="link in footer.links" :key="link.id" class="contents">
+  <footer darkgray class="h-48 min-h-fit w-full p-5 pt-10 flex-col justify-center items-center flex gap-2">
+    <div
+      v-if="links && links.length != 0"
+      class="self-stretch py-5 justify-center items-center gap-4 md:gap-10 inline-flex flex-wrap"
+    >
+      <div v-for="link in 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>
@@ -15,9 +18,9 @@
         </NuxtLink>
       </div>
     </div>
-    <p class="text-base text-center">@Copyright {{ new Date().getFullYear() }} {{ footer.copyright }}</p>
-    <p class="text-base text-center">Inhalte verwaltet von {{ footer?.maintained ?? footer.copyright }}</p>
-    <p>
+    <p class="text-base text-center">@Copyright {{ new Date().getFullYear() }} {{ copyright ?? title }}</p>
+    <p class="text-base text-center">Inhalte verwaltet von {{ maintained_by ?? copyright ?? title }}</p>
+    <p class="text-sm text-gray-400 pt-2">
       <a href="https://ff-admin.de/webpage" target="_blank">FF Webpage</a>
       entwickelt von
       <a href="https://jk-effects.com" target="_blank">JK Effects</a>
@@ -26,10 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import type Global from "../types/single/global";
-
-const { findOne } = useStrapi();
-
-const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
-const { footer } = global.value?.data ?? ({} as Global);
+const title = await calculateTitle();
+const { footer } = await provideGlobal();
+const { links, maintained_by, copyright } = footer ?? {};
 </script>

components/Header.vue

@@ -5,9 +5,11 @@
       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" :src="baseUrl + navbar.logo.url" />
+        <img v-if="logo" class="h-16" :src="baseUrl + logo.url" />
+        <img v-else class="h-16" src="/favicon.png" />
       </NuxtLink>
-      <div class="md:hidden">
+
+      <div v-if="navbar" class="md:hidden">
         <svg
           v-if="!open"
           viewBox="0 0 24 24"
@@ -27,6 +29,7 @@
       </div>
 
       <div
+        v-if="navbar"
         class="w-fit max-w-full p-2.5 justify-center items-center gap-7 flex flex-col md:flex-row md:flex-wrap"
         :class="open ? 'max-md:absolute top-24 left-0 max-md:w-full bg-primary' : 'max-md:hidden'"
       >
@@ -34,7 +37,7 @@
           primary-link
           v-for="link in navbar.navbar_items"
           :key="link.id"
-          :to="`/${link.URL}/${link.default_active_child ?? ''}`"
+          :to="`/${link.URL}${link.default_active_child ? '/' + link.default_active_child : ''}`"
           :class="link.URL == params?.[0] ? 'active' : ''"
         >
           {{ link.name }}
@@ -61,21 +64,21 @@
 </template>
 
 <script setup lang="ts">
-import type Global from "../types/single/global";
+import provideGlobal from "../composables/provideGlobal";
 
 const {
   params: { slug: params },
 } = useRoute();
+
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;
-const { findOne } = useStrapi();
 
-const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
-const { navbar } = global.value?.data ?? ({} as Global);
+const { logo, navbar } = await provideGlobal();
 
 const open = ref(false);
 
 const navbar_sub_items = computed(() => {
+  if (!navbar) return [];
   return navbar.navbar_items.find((ni) => ni.URL == params?.[0])?.navbar_sub_items;
 });
 </script>

components/base/ListImageItem.vue

@@ -4,41 +4,30 @@
     :class="allowNavigation ? '' : 'pointer-events-none'"
     :to="`${urlOverwrite ?? $route.path}/${data?.slug}`"
   >
-    <NuxtPicture
-      loading="lazy"
-      class="w-full h-56 object-cover object-center"
-      :src="baseUrl + data?.image?.url"
-      :imgAttrs="{ class: 'w-full h-56 object-cover object-center' }"
-    />
+    <div class="w-full h-56 relative">
+      <NuxtPicture
+        loading="lazy"
+        class="w-full h-full object-cover object-center"
+        :src="data?.image?.url || logo?.url ? baseUrl + (data?.image?.url ?? logo?.url) : '/favicon.png'"
+        :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
+      />
+      <h1
+        v-if="itemIndex"
+        class="text-center text-black text-4xl my-auto absolute bottom-2 left-2"
+        style="text-shadow: 2px 2px 4px white"
+      >
+        {{ itemIndex }}.
+      </h1>
+    </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>
-        <span v-if="numberOverwrite != undefined" class="w-24 text-center text-black text-4xl my-auto">
-          {{ numberOverwrite }}.
-        </span>
         {{ data?.title }}
       </h1>
-      <p v-if="numberOverwrite != undefined && data?.date && data.date.includes('T')" 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",
-          })
-        }}
-        Uhr
+      <p v-if="itemDate" class="w-full text-[#5c5c5c]">
+        {{ itemDate }}
       </p>
-      <p v-else-if="data?.date && data.date.includes('T')" class="w-full text-[#5c5c5c]">
-        {{
-          new Date(data?.date ?? "").toLocaleString("de-DE", {
-            minute: "2-digit",
-            hour: "2-digit",
-          })
-        }}
-        Uhr
-      </p>
-      <p class="w-full text-[#5c5c5c]">
+      <p class="w-full text-[#5c5c5c] line-clamp-2 overflow-hidden">
         {{ data?.description }}
       </p>
     </div>
@@ -48,14 +37,59 @@
 <script setup lang="ts">
 import type { PropType } from "vue";
 import type BaseCollection from "~/types/collection/baseCollection";
+import type Lookup from "../../types/collection/lookup";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;
 
-defineProps({
+const { logo } = await provideGlobal();
+
+const props = defineProps({
   data: Object as PropType<BaseCollection>,
+  lookup: Object as PropType<Lookup>,
   numberOverwrite: { type: Number, default: undefined },
   allowNavigation: { type: Boolean, default: false },
   urlOverwrite: { type: String, default: undefined },
 });
+
+const itemIndex = computed(() => {
+  if (props.lookup?.items_with_number != "none") {
+    return props.numberOverwrite;
+  } else if (props.lookup?.list_with_date != "none") {
+    return new Date(props.data?.date ?? "").toLocaleString("de-DE", {
+      day: "2-digit",
+    });
+  } else {
+    return undefined;
+  }
+});
+
+const itemDate = computed(() => {
+  let config = {
+    year:
+      props.lookup?.list_with_date == "none" || props.lookup?.items_with_number != "none"
+        ? ("numeric" as const)
+        : undefined,
+    month:
+      props.lookup?.list_with_date != "by-month" || props.lookup?.items_with_number != "none"
+        ? ("long" as const)
+        : undefined,
+    day:
+      props.lookup?.list_with_date == "none" || props.lookup?.items_with_number != "none"
+        ? ("2-digit" as const)
+        : undefined,
+    minute:
+      props.data?.date.includes("T") && props.lookup?.items_with_number != "none" ? ("2-digit" as const) : undefined,
+    hour:
+      props.data?.date.includes("T") && props.lookup?.items_with_number != "none" ? ("2-digit" as const) : undefined,
+  };
+  if (Object.values(config).filter((c) => c).length != 0) {
+    //(props.lookup?.list_with_date != "none" || props.lookup?.show_date)
+    return (
+      new Date(props.data?.date ?? "").toLocaleString("de-DE", config) + (props.data?.date.includes("T") ? "Uhr" : "")
+    );
+  } else {
+    return undefined;
+  }
+});
 </script>

components/base/ListItem.vue

@@ -1,43 +1,19 @@
 <template>
   <NuxtLink
-    class="w-full h-fit py-2 bg-white shadow-md border border-gray-200 rounded-md justify-start items-start flex"
+    class="w-full h-fit p-2 bg-white shadow-md border border-gray-200 rounded-md justify-start items-start flex"
     :class="allowNavigation ? '' : 'pointer-events-none'"
     :to="`${urlOverwrite ?? $route.path}/${data?.slug}`"
   >
-    <h1 v-if="numberOverwrite != undefined" class="w-24 text-center text-black text-4xl my-auto">
-      {{ numberOverwrite }}.
+    <h1 v-if="itemIndex" class="min-w-20 w-20 sm:min-w-24 sm:w-24 text-center text-black text-4xl my-auto">
+      {{ itemIndex }}.
     </h1>
-    <h1 v-else class="w-24 text-center text-black text-4xl my-auto">
-      {{
-        new Date(data?.date ?? "").toLocaleString("de-DE", {
-          day: "2-digit",
-        })
-      }}.
-    </h1>
-    <div class="grow shrink basis-0 flex-col justify-center items-center flex">
+
+    <div class="grow shrink basis-0 flex-col justify-center items-center flex overflow-hidden">
       <h1 class="w-full">{{ data?.title }}</h1>
-      <p v-if="numberOverwrite != undefined && data?.date && data.date.includes('T')" 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",
-          })
-        }}
-        Uhr
+      <p v-if="itemDate" class="w-full text-[#5c5c5c]">
+        {{ itemDate }}
       </p>
-      <p v-else-if="data?.date && data.date.includes('T')" class="w-full text-[#5c5c5c]">
-        {{
-          new Date(data?.date ?? "").toLocaleString("de-DE", {
-            minute: "2-digit",
-            hour: "2-digit",
-          })
-        }}
-        Uhr
-      </p>
-      <p class="w-full text-[#5c5c5c]">
+      <p class="w-full text-[#5c5c5c] line-clamp-2 overflow-hidden">
         {{ data?.description }}
       </p>
     </div>
@@ -47,11 +23,54 @@
 <script setup lang="ts">
 import type { PropType } from "vue";
 import type BaseCollection from "../../types/collection/baseCollection";
+import type Lookup from "../../types/collection/lookup";
 
-defineProps({
+const props = defineProps({
   data: Object as PropType<BaseCollection>,
+  lookup: Object as PropType<Lookup>,
   numberOverwrite: { type: Number, default: undefined },
   allowNavigation: { type: Boolean, default: false },
   urlOverwrite: { type: String, default: undefined },
 });
+
+const itemIndex = computed(() => {
+  if (props.lookup?.items_with_number != "none") {
+    return props.numberOverwrite;
+  } else if (props.lookup?.list_with_date != "none") {
+    return new Date(props.data?.date ?? "").toLocaleString("de-DE", {
+      day: "2-digit",
+    });
+  } else {
+    return undefined;
+  }
+});
+
+const itemDate = computed(() => {
+  let config = {
+    year:
+      props.lookup?.list_with_date == "none" || props.lookup?.items_with_number != "none"
+        ? ("numeric" as const)
+        : undefined,
+    month:
+      props.lookup?.list_with_date != "by-month" || props.lookup?.items_with_number != "none"
+        ? ("long" as const)
+        : undefined,
+    day:
+      props.lookup?.list_with_date == "none" || props.lookup?.items_with_number != "none"
+        ? ("2-digit" as const)
+        : undefined,
+    minute:
+      props.data?.date.includes("T") && props.lookup?.items_with_number != "none" ? ("2-digit" as const) : undefined,
+    hour:
+      props.data?.date.includes("T") && props.lookup?.items_with_number != "none" ? ("2-digit" as const) : undefined,
+  };
+  if (Object.values(config).filter((c) => c).length != 0) {
+    //(props.lookup?.list_with_date != "none" || props.lookup?.show_date)
+    return (
+      new Date(props.data?.date ?? "").toLocaleString("de-DE", config) + (props.data?.date.includes("T") ? "Uhr" : "")
+    );
+  } else {
+    return undefined;
+  }
+});
 </script>

components/dynamicZone/ColumnImageText.vue

@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneColumnImageText from "../../types/component/dynamicZoneColumnImageText";
+import type DynamicZoneColumnImageText from "../../types/component/dynamic-zone/columnImageText";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;

components/dynamicZone/DualColumnText.vue

@@ -7,7 +7,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneDualColumnText from "../../types/component/dynamicZoneDualColumnText";
+import type DynamicZoneDualColumnText from "../../types/component/dynamic-zone/dualColumnText";
 
 defineProps({
   data: Object as PropType<DynamicZoneDualColumnText>,

components/dynamicZone/Embedding.vue

@@ -1,13 +1,12 @@
 <template>
   <div class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
-    <h1 class="text-center">{{ data.title }}</h1>
-    <iframe :src="data.link" class="w-full h-[90vh]"></iframe>
+    <iframe :src="data?.link" class="w-full h-[90vh]"></iframe>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneEmbedding from "../../types/component/dynamicZoneEmbedding";
+import type DynamicZoneEmbedding from "../../types/component/dynamic-zone/embedding";
 
 const props = defineProps({
   data: Object as PropType<DynamicZoneEmbedding>,

components/dynamicZone/EmphasiseArticle.vue

@@ -1,21 +0,0 @@
-<template>
-  <div class="w-full flex flex-col justify-center">
-    <h1 class="text-center">{{ data?.titel }}</h1>
-    <p class="text-center text-[#5c5c5c]">{{ data?.description }}</p>
-    <br />
-    <div class="flex gap-2 w-full max-w-4xl mx-auto flex-row flex-wrap justify-center">
-      <div v-for="item in data?.articles" :key="item.slug" class="contents">
-        <BaseListImageItem :data="item" :allow-navigation="true" :url-overwrite="data?.base_url" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { PropType } from "vue";
-import type DynamicZoneEmphasiseArticle from "../../types/component/dynamicZoneEmphasiseArticle";
-
-defineProps({
-  data: Object as PropType<DynamicZoneEmphasiseArticle>,
-});
-</script>

components/dynamicZone/FileDownload.vue

@@ -1,18 +1,17 @@
 <template>
   <div v-if="showComponent" class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
-    <h1 class="text-center">{{ data.title }}</h1>
-    <iframe v-if="data.file.mime == 'application/pdf'" :src="baseUrl + data.file.url" class="w-full h-[90vh]"></iframe>
+    <iframe v-if="data?.file.mime == 'application/pdf'" :src="baseUrl + data.file.url" class="w-full h-[90vh]"></iframe>
     <NuxtPicture
-      v-if="data.file.mime.includes('image')"
+      v-if="data?.file.mime.includes('image')"
       loading="lazy"
       class="w-full object-cover object-center mx-auto"
       :src="baseUrl + data?.file.url"
       :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
     />
     <a
-      v-if="data.enable_download"
-      :href="baseUrl + data.file.url"
-      :download="data.file.name"
+      v-if="data?.enable_download"
+      :href="baseUrl + data?.file.url"
+      :download="data?.file.name"
       target="_blank"
       class="w-fit text-primary underline"
     >
@@ -23,7 +22,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneFileDownload from "../../types/component/dynamicZoneFileDownload";
+import type DynamicZoneFileDownload from "../../types/component/dynamic-zone/fileDownload";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;
@@ -33,10 +32,10 @@ const props = defineProps({
 });
 
 const showComponent = computed(() => {
-  if (props.data.file.mime == "application/pdf" || props.data.file.mime.includes("image")) {
+  if (props.data?.file.mime == "application/pdf" || props.data?.file.mime.includes("image")) {
     return true;
   } else {
-    return props.data.enable_download;
+    return props.data?.enable_download;
   }
 });
 </script>

components/dynamicZone/FullImage.vue

@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneFullImage from "../../types/component/dynamicZoneFullImage";
+import type DynamicZoneFullImage from "../../types/component/dynamic-zone/fullImage";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;

components/dynamicZone/FullText.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneFullText from "../../types/component/dynamicZoneFullText";
+import type DynamicZoneFullText from "../../types/component/dynamic-zone/fullText";
 
 defineProps({
   data: Object as PropType<DynamicZoneFullText>,

components/dynamicZone/Gallery.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneGallery from "../../types/component/dynamicZoneGallery";
+import type DynamicZoneGallery from "../../types/component/dynamic-zone/gallery";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;

components/dynamicZone/Section.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1 class="text-center">{{ data?.title }}</h1>
+  <p v-if="data?.description" class="text-center text-[#5c5c5c]">{{ data?.description }}</p>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneSection from "../../types/component/dynamic-zone/section";
+
+defineProps({
+  data: Object as PropType<DynamicZoneSection>,
+});
+</script>

components/dynamicZone/Spacer.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="bg-primary h-2 rounded-full w-48 mx-auto"></div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneSpacer from "../../types/component/dynamic-zone/spacer";
+
+defineProps({
+  data: Object as PropType<DynamicZoneSpacer>,
+});
+</script>

components/field/Content.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="w-full h-fit flex flex-col gap-2">
     <div v-for="item in data" :key="item.type" class="contents">
-      <h1 v-if="item.type == 'heading'" class="w-full">
+      <h1 v-if="item.type == 'heading' && item?.level == 1" class="w-full">
         <FieldType v-for="child in item.children" :data="child" />
       </h1>
+      <h2 v-else-if="item.type == 'heading' && item?.level == 2" class="w-full">
+        <FieldType v-for="child in item.children" :data="child" />
+      </h2>
+      <h3 v-else-if="item.type == 'heading'" class="w-full">
+        <FieldType v-for="child in item.children" :data="child" />
+      </h3>
       <p v-else-if="item.type == 'paragraph'" class="w-full">
         <FieldType v-for="child in item.children" :data="child" />
       </p>

components/items/Hero.vue

@@ -1,23 +1,24 @@
 <template>
-  <div class="flex flex-col w-full max-h-72 h-72 overflow-hidden">
+  <div class="flex flex-col w-full max-h-72 h-fit overflow-hidden">
     <NuxtPicture
+      v-if="data?.banner"
       loading="lazy"
       class="w-full h-60 object-cover object-center"
       :src="baseUrl + data?.banner.url"
       :imgAttrs="{ class: 'w-full h-60 object-cover object-center' }"
     />
-    <div primary class="h-12 min-h-12 w-full px-12 justify-center items-center gap-5 flex">
-      <p>{{ data?.title }}</p>
+    <div v-if="data?.title" primary class="h-12 min-h-12 w-full px-12 justify-center items-center gap-5 flex">
+      <p>{{ data.title }}</p>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type SharedHero from "../../types/component/sharedHero";
+import type ItemsHero from "../../types/component/items/hero";
 
 defineProps({
-  data: Object as PropType<SharedHero>,
+  data: Object as PropType<ItemsHero>,
 });
 
 const runtimeConfig = useRuntimeConfig();

components/shared/EmphasiseArticle.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="w-full flex flex-col justify-center">
+    <div class="flex gap-2 w-full max-w-4xl mx-auto flex-row flex-wrap justify-center">
+      <div v-for="item in data?.articles" :key="item.slug" class="contents">
+        <BaseListImageItem
+          v-if="articleLookup?.show_image"
+          :data="item"
+          :allow-navigation="articleLookup.enable_detail"
+          :url-overwrite="data?.link_to_articles"
+        />
+        <BaseListItem
+          v-else-if="articleLookup"
+          :data="item"
+          :allow-navigation="articleLookup.enable_detail"
+          :url-overwrite="data?.link_to_articles"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type SharedEmphasiseArticle from "../../types/component/shared/emphasiseArticle";
+import type Lookup from "../../types/collection/lookup";
+
+const { find } = useStrapi();
+const { data: lookup } = await useAsyncData("lookup", () =>
+  find<Lookup>("collection-lookups", {
+    filters: {
+      collection: "articles",
+    },
+  })
+);
+const articleLookup = ref(lookup.value?.data[0]);
+
+defineProps({
+  data: Object as PropType<SharedEmphasiseArticle>,
+});
+</script>

components/shared/List.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="data?.lookup.date_list" class="flex flex-row justify-between w-full max-w-4xl mx-auto">
+  <div v-if="data?.lookup.list_with_date != 'none'" class="flex flex-row justify-between w-full max-w-4xl mx-auto">
     <svg
       viewBox="0 0 24 24"
       class="h-5 w-5 cursor-pointer fill-none stroke-2 stroke-black"
@@ -20,26 +20,25 @@
   </div>
   <div
     class="flex gap-2 w-full max-w-4xl mx-auto"
-    :class="data?.lookup.image_item ? 'flex-row flex-wrap justify-center' : ' flex-col'"
+    :class="data?.lookup.show_image ? 'flex-row flex-wrap justify-center' : ' flex-col'"
   >
     <div v-for="(item, index) in collection" :key="item.slug" class="contents">
-      <p
-        v-if="data?.lookup.date_list && data?.lookup.numbered_item == false && getDate(index) != ''"
-        class="w-full text-center"
-      >
+      <p v-if="data?.lookup.list_with_date == 'by-month' && getDate(index) != ''" class="w-full text-center">
         {{ getDate(index) }}
       </p>
       <BaseListImageItem
-        v-if="data?.lookup.image_item"
+        v-if="data?.lookup.show_image"
         :data="item"
-        :number-overwrite="data.lookup.numbered_item ? getNumber(index) : undefined"
-        :allow-navigation="data.enable_detail"
+        :lookup="data?.lookup"
+        :number-overwrite="getNumber(index)"
+        :allow-navigation="data.lookup.enable_detail"
       />
       <BaseListItem
         v-else-if="data?.lookup"
         :data="item"
-        :number-overwrite="data.lookup.numbered_item ? getNumber(index) : undefined"
-        :allow-navigation="data.enable_detail"
+        :lookup="data?.lookup"
+        :number-overwrite="getNumber(index)"
+        :allow-navigation="data.lookup.enable_detail"
       />
     </div>
   </div>
@@ -91,7 +90,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type SharedList from "../../types/component/sharedList";
+import type SharedList from "../../types/component/shared/list";
 import type BaseCollection from "~/types/collection/baseCollection";
 
 interface Meta {
@@ -113,7 +112,7 @@ const years = ref<Array<number>>([]);
 const pagination = ref<Meta>({ page: 0, pageSize: 0, pageCount: 0, total: 0 });
 const activeYear = ref<number>(0);
 
-if (props.data?.lookup.date_list) {
+if (props.data?.lookup.list_with_date) {
   const { data: year } = await useAsyncData<Array<number>>("distinct-years", () =>
     $fetch(`${baseUrl}/api/custom/${props.data?.lookup.collection}/distinct-years`)
   );
@@ -122,7 +121,7 @@ if (props.data?.lookup.date_list) {
 }
 const { data: collections } = await useAsyncData("collection", () =>
   find<BaseCollection>(props.data?.lookup.collection ?? "", {
-    ...(props.data?.lookup?.date_list
+    ...(props.data?.lookup?.list_with_date
       ? {
           sort: "date:desc",
           filters: {
@@ -200,7 +199,7 @@ const displayedPagesNumbers = computed(() => {
 });
 
 function getNumber(index: number): number {
-  if (props.data?.lookup.inverse_count) {
+  if (props.data?.lookup.items_with_number == "inverted") {
     return pagination.value.total - numberOffset.value - index;
   } else {
     return numberOffset.value + index + 1;