component formatting and types

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/Hero.vue

@@ -1,25 +0,0 @@
-<template>
-  <div class="flex flex-col w-full max-h-72 h-72 overflow-hidden">
-    <NuxtPicture
-      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>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { PropType } from "vue";
-import type SharedHero from "../../types/component/sharedHero";
-
-defineProps({
-  data: Object as PropType<SharedHero>,
-});
-
-const runtimeConfig = useRuntimeConfig();
-const baseUrl = runtimeConfig.public.strapi.url;
-</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;