From 5c56af0dad2a431702ef9530252378e29ff7d8f2 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Sat, 2 Nov 2024 12:47:07 +0100
Subject: [PATCH] base zone components and type refinements

---
 components/ContentBuilder.vue                 | 24 ++++++++++++--
 components/Footer.vue                         |  2 +-
 components/Header.vue                         |  6 ++--
 components/dynamicZone/ColumnImageText.vue    | 12 +++++++
 components/dynamicZone/DualColumnText.vue     | 12 +++++++
 components/dynamicZone/EmphasiseArticle.vue   | 12 +++++++
 components/dynamicZone/FullImage.vue          | 12 +++++++
 components/dynamicZone/FullText.vue           | 12 +++++++
 components/dynamicZone/Gallery.vue            | 12 +++++++
 components/shared/Hero.vue                    | 25 +++++++++++++++
 components/shared/List.vue                    | 12 +++++++
 layouts/landing.vue                           | 10 ++++--
 nuxt.config.ts                                |  3 +-
 package-lock.json                             | 32 ++++++++++---------
 package.json                                  |  2 +-
 pages/[...slug].vue                           | 23 ++++++++-----
 pages/index.vue                               |  4 +--
 types/collection/article.ts                   | 13 ++++++++
 types/collection/page.ts                      |  7 ++--
 types/component/baseComponent.ts              | 30 +++++++++++++++++
 types/component/{image.ts => baseImage.ts}    | 17 ++++++++--
 types/component/dynamicZoneColumnImageText.ts |  9 ++++++
 types/component/dynamicZoneDualColumnText.ts  |  7 ++++
 .../component/dynamicZoneEmphasiseArticle.ts  |  9 ++++++
 types/component/dynamicZoneFullImage.ts       |  7 ++++
 types/component/dynamicZoneFullText.ts        |  6 ++++
 types/component/dynamicZoneGallery.ts         |  7 ++++
 .../component/{footer.ts => globalFooter.ts}  |  2 +-
 types/component/globalNavbar.ts               |  8 +++++
 .../{footerLink.ts => itemsFooterLink.ts}     |  0
 .../{navbarItem.ts => itemsNavbarItem.ts}     |  2 +-
 ...navbarSubItem.ts => itemsNavbarSubItem.ts} |  0
 types/component/navbar.ts                     |  8 -----
 types/component/sharedHero.ts                 |  7 ++++
 types/component/sharedLink.ts                 |  5 +++
 types/component/sharedList.ts                 |  7 ++++
 types/single/global.ts                        |  4 +--
 types/single/homepage.ts                      |  7 ++--
 38 files changed, 323 insertions(+), 54 deletions(-)
 create mode 100644 components/dynamicZone/ColumnImageText.vue
 create mode 100644 components/dynamicZone/DualColumnText.vue
 create mode 100644 components/dynamicZone/EmphasiseArticle.vue
 create mode 100644 components/dynamicZone/FullImage.vue
 create mode 100644 components/dynamicZone/FullText.vue
 create mode 100644 components/dynamicZone/Gallery.vue
 create mode 100644 components/shared/Hero.vue
 create mode 100644 components/shared/List.vue
 create mode 100644 types/collection/article.ts
 create mode 100644 types/component/baseComponent.ts
 rename types/component/{image.ts => baseImage.ts} (55%)
 create mode 100644 types/component/dynamicZoneColumnImageText.ts
 create mode 100644 types/component/dynamicZoneDualColumnText.ts
 create mode 100644 types/component/dynamicZoneEmphasiseArticle.ts
 create mode 100644 types/component/dynamicZoneFullImage.ts
 create mode 100644 types/component/dynamicZoneFullText.ts
 create mode 100644 types/component/dynamicZoneGallery.ts
 rename types/component/{footer.ts => globalFooter.ts} (72%)
 create mode 100644 types/component/globalNavbar.ts
 rename types/component/{footerLink.ts => itemsFooterLink.ts} (100%)
 rename types/component/{navbarItem.ts => itemsNavbarItem.ts} (75%)
 rename types/component/{navbarSubItem.ts => itemsNavbarSubItem.ts} (100%)
 delete mode 100644 types/component/navbar.ts
 create mode 100644 types/component/sharedHero.ts
 create mode 100644 types/component/sharedLink.ts
 create mode 100644 types/component/sharedList.ts

diff --git a/components/ContentBuilder.vue b/components/ContentBuilder.vue
index 5f84a6b..ca3b99e 100644
--- a/components/ContentBuilder.vue
+++ b/components/ContentBuilder.vue
@@ -1,5 +1,25 @@
 <template>
-  <p>Content Builder</p>
+  <SharedHero v-if="hero" :data="hero" />
+  <div class="container mx-auto py-12 min-h-[50vh]">
+    <div v-for="item in content" class="contents">
+      <DynamicZoneColumnImageText v-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" />
+      <SharedList v-else-if="item.__component == 'shared.list'" :data="item" />
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type SharedHero from "../types/component/sharedHero";
+import type { ComponentTypes } from "../types/component/baseComponent";
+
+defineProps({
+  hero: Object as PropType<SharedHero>,
+  content: Array<ComponentTypes>,
+});
+</script>
diff --git a/components/Footer.vue b/components/Footer.vue
index 124e638..53af096 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -16,5 +16,5 @@ 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 unknown as Global;
+const { footer } = global.value?.data ?? ({} as Global);
 </script>
diff --git a/components/Header.vue b/components/Header.vue
index a7056de..674ad96 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -17,9 +17,9 @@
       </div>
     </div>
     <div
-      v-if="navbar_sub_items?.length != 0"
+      v-if="navbar_sub_items && navbar_sub_items?.length != 0"
       primary
-      class="h-12 min-h-fit w-full px-12 border-t-2 border-white justify-center items-center gap-5 flex"
+      class="h-fit min-h-fit w-full px-12 border-t-2 border-white justify-center items-center gap-5 flex"
     >
       <NuxtLink
         primary-sublink
@@ -44,7 +44,7 @@ const baseUrl = useStrapiUrl().replace("/api", "");
 const { findOne } = useStrapi();
 
 const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
-const { navbar } = global.value?.data as unknown as Global;
+const { navbar } = global.value?.data ?? ({} as Global);
 
 const navbar_sub_items = computed(() => {
   return navbar.navbar_items.find((ni) => ni.URL == params?.[0])?.navbar_sub_items;
diff --git a/components/dynamicZone/ColumnImageText.vue b/components/dynamicZone/ColumnImageText.vue
new file mode 100644
index 0000000..07da2b8
--- /dev/null
+++ b/components/dynamicZone/ColumnImageText.vue
@@ -0,0 +1,12 @@
+<template>
+  <p>{{ data }}</p>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneColumnImageText from "../../types/component/dynamicZoneColumnImageText";
+
+defineProps({
+  data: Object as PropType<DynamicZoneColumnImageText>,
+});
+</script>
diff --git a/components/dynamicZone/DualColumnText.vue b/components/dynamicZone/DualColumnText.vue
new file mode 100644
index 0000000..3a35d8b
--- /dev/null
+++ b/components/dynamicZone/DualColumnText.vue
@@ -0,0 +1,12 @@
+<template>
+  <p>{{ data }}</p>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneDualColumnText from "../../types/component/dynamicZoneDualColumnText";
+
+defineProps({
+  data: Object as PropType<DynamicZoneDualColumnText>,
+});
+</script>
diff --git a/components/dynamicZone/EmphasiseArticle.vue b/components/dynamicZone/EmphasiseArticle.vue
new file mode 100644
index 0000000..6458670
--- /dev/null
+++ b/components/dynamicZone/EmphasiseArticle.vue
@@ -0,0 +1,12 @@
+<template>
+  <p>{{ data }}</p>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneEmphasiseArticle from "../../types/component/dynamicZoneEmphasiseArticle";
+
+defineProps({
+  data: Object as PropType<DynamicZoneEmphasiseArticle>,
+});
+</script>
diff --git a/components/dynamicZone/FullImage.vue b/components/dynamicZone/FullImage.vue
new file mode 100644
index 0000000..a1a1f35
--- /dev/null
+++ b/components/dynamicZone/FullImage.vue
@@ -0,0 +1,12 @@
+<template>
+  <p>{{ data }}</p>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneFullImage from "../../types/component/dynamicZoneFullImage";
+
+defineProps({
+  data: Object as PropType<DynamicZoneFullImage>,
+});
+</script>
diff --git a/components/dynamicZone/FullText.vue b/components/dynamicZone/FullText.vue
new file mode 100644
index 0000000..10ab0af
--- /dev/null
+++ b/components/dynamicZone/FullText.vue
@@ -0,0 +1,12 @@
+<template>
+  <p>{{ data }}</p>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneFullText from "../../types/component/dynamicZoneFullText";
+
+defineProps({
+  data: Object as PropType<DynamicZoneFullText>,
+});
+</script>
diff --git a/components/dynamicZone/Gallery.vue b/components/dynamicZone/Gallery.vue
new file mode 100644
index 0000000..402462c
--- /dev/null
+++ b/components/dynamicZone/Gallery.vue
@@ -0,0 +1,12 @@
+<template>
+  <p>{{ data }}</p>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneGallery from "../../types/component/dynamicZoneGallery";
+
+defineProps({
+  data: Object as PropType<DynamicZoneGallery>,
+});
+</script>
diff --git a/components/shared/Hero.vue b/components/shared/Hero.vue
new file mode 100644
index 0000000..6c201c0
--- /dev/null
+++ b/components/shared/Hero.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="w-full max-h-60 h-60">
+    <NuxtPicture
+      preload
+      loading="lazy"
+      class="w-full h-full object-cover object-center"
+      :src="baseUrl + data?.banner.url"
+      :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
+    />
+    <div primary class="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 baseUrl = useStrapiUrl().replace("/api", "");
+</script>
diff --git a/components/shared/List.vue b/components/shared/List.vue
new file mode 100644
index 0000000..93d63fb
--- /dev/null
+++ b/components/shared/List.vue
@@ -0,0 +1,12 @@
+<template>
+  <p>{{ data }}</p>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type SharedList from "../../types/component/sharedList";
+
+defineProps({
+  data: Object as PropType<SharedList>,
+});
+</script>
diff --git a/layouts/landing.vue b/layouts/landing.vue
index 030733c..4c11b68 100644
--- a/layouts/landing.vue
+++ b/layouts/landing.vue
@@ -1,6 +1,12 @@
 <template>
-  <div class="relative h-[calc(100vh-6rem)] w-full">
-    <NuxtPicture preload loading="lazy" class="w-full h-full object-cover" :src="baseUrl + backdrop.url" />
+  <div class="relative h-[calc(100vh-6rem)] max-h-[calc(100vh-6rem)] w-full overflow-hidden">
+    <NuxtPicture
+      preload
+      loading="lazy"
+      class="w-full h-full object-cover object-center"
+      :src="baseUrl + backdrop.url"
+      :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
+    />
     <img class="absolute h-40 w-fit bottom-10 left-5" :src="baseUrl + navbar.logo.url" />
   </div>
   <Header />
diff --git a/nuxt.config.ts b/nuxt.config.ts
index bb96bba..fd138cb 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -33,5 +33,6 @@ export default defineNuxtConfig({
   strapi: {
     url: process.env.STRAPI_URL,
     prefix: "/api",
+    version: "v5",
   },
-});
\ No newline at end of file
+});
diff --git a/package-lock.json b/package-lock.json
index 393a6cf..4a8b458 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@nuxt/image": "^1.8.1",
-        "@nuxtjs/strapi": "^1.12.0",
+        "@nuxtjs/strapi": "npm:@nuxtjs/strapi-edge@1.12.0-28818224.f53bdf9",
         "nuxt": "^3.13.2",
         "vue": "latest",
         "vue-router": "latest"
@@ -1353,15 +1353,17 @@
       }
     },
     "node_modules/@nuxtjs/strapi": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/strapi/-/strapi-1.12.0.tgz",
-      "integrity": "sha512-pysxYW5SPQaB6H7G72wO2qz4Rl7DakuPUthNweEvL3ERK5O3qMZ97mIm+Pdwvb3/H0ntFDJSjx08YRWjjuV7hg==",
+      "name": "@nuxtjs/strapi-edge",
+      "version": "1.12.0-28818224.f53bdf9",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/strapi-edge/-/strapi-edge-1.12.0-28818224.f53bdf9.tgz",
+      "integrity": "sha512-SdazV9/5qJr/b5F//fveU9DVxBFeYKfB6Gg7wyvZoNUW9z9BSPuQyoCfDdzRkPy+QqdaLhFXPjFJdPNeK/8agA==",
+      "license": "MIT",
       "dependencies": {
-        "@nuxt/kit": "^3.11.1",
+        "@nuxt/kit": "^3.13.2",
         "defu": "^6.1.4",
-        "graphql": "^16.8.1",
-        "qs": "^6.12.0",
-        "ufo": "^1.5.3"
+        "graphql": "^16.9.0",
+        "qs": "^6.13.0",
+        "ufo": "^1.5.4"
       }
     },
     "node_modules/@parcel/watcher": {
@@ -10920,15 +10922,15 @@
       }
     },
     "@nuxtjs/strapi": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/strapi/-/strapi-1.12.0.tgz",
-      "integrity": "sha512-pysxYW5SPQaB6H7G72wO2qz4Rl7DakuPUthNweEvL3ERK5O3qMZ97mIm+Pdwvb3/H0ntFDJSjx08YRWjjuV7hg==",
+      "version": "npm:@nuxtjs/strapi-edge@1.12.0-28818224.f53bdf9",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/strapi-edge/-/strapi-edge-1.12.0-28818224.f53bdf9.tgz",
+      "integrity": "sha512-SdazV9/5qJr/b5F//fveU9DVxBFeYKfB6Gg7wyvZoNUW9z9BSPuQyoCfDdzRkPy+QqdaLhFXPjFJdPNeK/8agA==",
       "requires": {
-        "@nuxt/kit": "^3.11.1",
+        "@nuxt/kit": "^3.13.2",
         "defu": "^6.1.4",
-        "graphql": "^16.8.1",
-        "qs": "^6.12.0",
-        "ufo": "^1.5.3"
+        "graphql": "^16.9.0",
+        "qs": "^6.13.0",
+        "ufo": "^1.5.4"
       }
     },
     "@parcel/watcher": {
diff --git a/package.json b/package.json
index 2aaf9cd..7c53ce0 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@nuxt/image": "^1.8.1",
-    "@nuxtjs/strapi": "^1.12.0",
+    "@nuxtjs/strapi": "npm:@nuxtjs/strapi-edge@1.12.0-28818224.f53bdf9",
     "nuxt": "^3.13.2",
     "vue": "latest",
     "vue-router": "latest"
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index 6a50623..b7c3dfe 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -1,7 +1,7 @@
 <template>
   <NuxtLayout name="default">
-    <NotFound v-if="data.length == 0" />
-    <ContentBuilder v-else class="min-h-[calc(100vh-9rem)] w-full" />
+    <NotFound v-if="active_page_id == ''" />
+    <ContentBuilder v-else class="min-h-[calc(100vh-9rem)] w-full" :hero="hero" :content="content" />
   </NuxtLayout>
 </template>
 
@@ -18,7 +18,7 @@ const { findOne } = useStrapi();
 const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
 const {
   navbar: { navbar_items },
-} = global.value?.data as unknown as Global;
+} = global.value?.data ?? ({} as Global);
 
 const navbar_sub_items = computed(() => {
   return navbar_items.find((ni) => ni.URL == params[0])?.navbar_sub_items ?? [];
@@ -31,14 +31,21 @@ const active_sub_item = computed(() => {
   return navbar_sub_items.value.find((si) => si.URL == params[1])?.page;
 });
 const active_page_id = computed<string>(() => {
-  return active_sub_item.value?.slug ?? active_item.value?.slug ?? "";
+  return active_sub_item.value?.documentId ?? active_item.value?.documentId ?? "";
 });
 
 const { data: pages } = await useAsyncData("pages", () =>
-  findOne<Array<Page>>("pages", {
-    populate: "*",
-    filters: { slug: active_page_id.value },
+  findOne<Page>("pages", active_page_id.value, {
+    populate: {
+      populate: "*",
+      content: {
+        populate: "*",
+      },
+      hero: {
+        populate: "*",
+      },
+    },
   })
 );
-const data = pages.value?.data as unknown as Array<Page>;
+const { content, hero } = pages.value?.data ?? {};
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index 738c6b8..81e519f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
   <NuxtLayout name="landing">
-    <ContentBuilder class="min-h-[calc(100vh-9rem)] w-full" />
+    <ContentBuilder class="min-h-[calc(100vh-9rem)] w-full" :content="content" />
   </NuxtLayout>
 </template>
 
@@ -10,5 +10,5 @@ import type Homepage from "../types/single/homepage";
 const { findOne } = useStrapi();
 
 const { data: homepage } = await useAsyncData("homepage", () => findOne<Homepage>("homepage"));
-const { content } = homepage.value?.data as unknown as Homepage;
+const { content } = homepage.value?.data ?? {};
 </script>
diff --git a/types/collection/article.ts b/types/collection/article.ts
new file mode 100644
index 0000000..5be8f1e
--- /dev/null
+++ b/types/collection/article.ts
@@ -0,0 +1,13 @@
+export default interface Article {
+  id: number;
+  documentId: string;
+  title: string;
+  description: string;
+  slug: string;
+  content: Array<{ type: string; children: Array<{ type: string; text: string }>; level?: number }>;
+  date: string;
+  createdAt: string;
+  updatedAt: string;
+  publishedAt: string;
+  locale: string;
+}
diff --git a/types/collection/page.ts b/types/collection/page.ts
index 64bf67d..17d70ba 100644
--- a/types/collection/page.ts
+++ b/types/collection/page.ts
@@ -1,3 +1,6 @@
+import type { ComponentTypes } from "../component/baseComponent";
+import type SharedHero from "../component/sharedHero";
+
 export default interface Page {
   id: number;
   documentId: string;
@@ -7,7 +10,7 @@ export default interface Page {
   publishedAt: string;
   locale: string;
   slug: string;
-  Hero: { id: number; titel: string };
-  content: { __component: string; id: number; list: string; enable_detail: boolean }[];
+  hero: SharedHero;
+  content: Array<ComponentTypes>;
   localizations: any[];
 }
diff --git a/types/component/baseComponent.ts b/types/component/baseComponent.ts
new file mode 100644
index 0000000..0b903bd
--- /dev/null
+++ b/types/component/baseComponent.ts
@@ -0,0 +1,30 @@
+import type DynamicZoneColumnImageText from "./dynamicZoneColumnImageText";
+import type DynamicZoneDualColumnText from "./dynamicZoneDualColumnText";
+import type DynamicZoneEmphasiseArticle from "./dynamicZoneEmphasiseArticle";
+import type DynamicZoneFullImage from "./dynamicZoneFullImage";
+import type DynamicZoneFullText from "./dynamicZoneFullText";
+import type DynamicZoneGallery from "./dynamicZoneGallery";
+import type SharedList from "./sharedList";
+
+export default interface BaseComponent {
+  __component: ComponentNames;
+  id: number;
+}
+
+export type ComponentNames =
+  | "shared.list"
+  | "dynamic-zone.gallery"
+  | "dynamic-zone.full-text"
+  | "dynamic-zone.full-image"
+  | "dynamic-zone.emphasise-article"
+  | "dynamic-zone.dual-column-text"
+  | "dynamic-zone.column-image-text";
+
+export type ComponentTypes =
+  | SharedList
+  | DynamicZoneGallery
+  | DynamicZoneFullText
+  | DynamicZoneFullImage
+  | DynamicZoneEmphasiseArticle
+  | DynamicZoneDualColumnText
+  | DynamicZoneColumnImageText;
diff --git a/types/component/image.ts b/types/component/baseImage.ts
similarity index 55%
rename from types/component/image.ts
rename to types/component/baseImage.ts
index 02af65e..1d4cdd2 100644
--- a/types/component/image.ts
+++ b/types/component/baseImage.ts
@@ -1,4 +1,4 @@
-export default interface Image {
+export default interface BaseImage {
   id: number;
   documentId: string;
   name: string;
@@ -6,7 +6,7 @@ export default interface Image {
   caption: string | null;
   width: number;
   height: number;
-  formats: any;
+  formats: Record<string, ImageFormat> | null;
   hash: string;
   ext: string;
   mime: string;
@@ -19,3 +19,16 @@ export default interface Image {
   updatedAt: string;
   publishedAt: string;
 }
+
+export interface ImageFormat {
+  name: string;
+  hash: string;
+  ext: string;
+  mime: string;
+  path: string | null;
+  width: number;
+  height: number;
+  size: number;
+  sizeInBytes: number;
+  url: string;
+}
diff --git a/types/component/dynamicZoneColumnImageText.ts b/types/component/dynamicZoneColumnImageText.ts
new file mode 100644
index 0000000..644ad5b
--- /dev/null
+++ b/types/component/dynamicZoneColumnImageText.ts
@@ -0,0 +1,9 @@
+import type BaseComponent from "./baseComponent";
+import type BaseImage from "./baseImage";
+
+export default interface DynamicZoneColumnImageText extends BaseComponent {
+  __component: "dynamic-zone.column-image-text";
+  text: Array<{ type: string; children: Array<{ type: string; text: string }> }>;
+  image_left: boolean;
+  image: BaseImage;
+}
diff --git a/types/component/dynamicZoneDualColumnText.ts b/types/component/dynamicZoneDualColumnText.ts
new file mode 100644
index 0000000..406718a
--- /dev/null
+++ b/types/component/dynamicZoneDualColumnText.ts
@@ -0,0 +1,7 @@
+import type BaseComponent from "./baseComponent";
+
+export default interface DynamicZoneDualColumnText extends BaseComponent {
+  __component: "dynamic-zone.dual-column-text";
+  left_side: Array<{ type: string; children: Array<{ type: string; text: string }> }>;
+  right_side: Array<{ type: string; children: Array<{ type: string; text: string }> }>;
+}
diff --git a/types/component/dynamicZoneEmphasiseArticle.ts b/types/component/dynamicZoneEmphasiseArticle.ts
new file mode 100644
index 0000000..7328600
--- /dev/null
+++ b/types/component/dynamicZoneEmphasiseArticle.ts
@@ -0,0 +1,9 @@
+import type Article from "../collection/article";
+import type BaseComponent from "./baseComponent";
+
+export default interface DynamicZoneEmphasiseArticle extends BaseComponent {
+  __component: "dynamic-zone.emphasise-article";
+  titel: string;
+  description: string;
+  articles: Array<Article>;
+}
diff --git a/types/component/dynamicZoneFullImage.ts b/types/component/dynamicZoneFullImage.ts
new file mode 100644
index 0000000..8901f66
--- /dev/null
+++ b/types/component/dynamicZoneFullImage.ts
@@ -0,0 +1,7 @@
+import type BaseComponent from "./baseComponent";
+import type BaseImage from "./baseImage";
+
+export default interface DynamicZoneFullImage extends BaseComponent {
+  __component: "dynamic-zone.full-image";
+  image: BaseImage;
+}
diff --git a/types/component/dynamicZoneFullText.ts b/types/component/dynamicZoneFullText.ts
new file mode 100644
index 0000000..c4586a6
--- /dev/null
+++ b/types/component/dynamicZoneFullText.ts
@@ -0,0 +1,6 @@
+import type BaseComponent from "./baseComponent";
+
+export default interface DynamicZoneFullText extends BaseComponent {
+  __component: "dynamic-zone.full-text";
+  text: Array<{ type: string; children: Array<{ type: string; text: string }> }>;
+}
diff --git a/types/component/dynamicZoneGallery.ts b/types/component/dynamicZoneGallery.ts
new file mode 100644
index 0000000..4b34f42
--- /dev/null
+++ b/types/component/dynamicZoneGallery.ts
@@ -0,0 +1,7 @@
+import type BaseComponent from "./baseComponent";
+import type BaseImage from "./baseImage";
+
+export default interface DynamicZoneGallery extends BaseComponent {
+  __component: "dynamic-zone.gallery";
+  images: Array<BaseImage>;
+}
diff --git a/types/component/footer.ts b/types/component/globalFooter.ts
similarity index 72%
rename from types/component/footer.ts
rename to types/component/globalFooter.ts
index 047bc08..8294a83 100644
--- a/types/component/footer.ts
+++ b/types/component/globalFooter.ts
@@ -1,4 +1,4 @@
-import type FooterLink from "./footerLink";
+import type FooterLink from "./itemsFooterLink";
 
 export default interface Footer {
   id: number;
diff --git a/types/component/globalNavbar.ts b/types/component/globalNavbar.ts
new file mode 100644
index 0000000..24a1cf6
--- /dev/null
+++ b/types/component/globalNavbar.ts
@@ -0,0 +1,8 @@
+import type BaseImage from "./baseImage";
+import type NavbarItem from "./itemsNavbarItem";
+
+export default interface Navbar {
+  id: number;
+  logo: BaseImage;
+  navbar_items: NavbarItem[];
+}
diff --git a/types/component/footerLink.ts b/types/component/itemsFooterLink.ts
similarity index 100%
rename from types/component/footerLink.ts
rename to types/component/itemsFooterLink.ts
diff --git a/types/component/navbarItem.ts b/types/component/itemsNavbarItem.ts
similarity index 75%
rename from types/component/navbarItem.ts
rename to types/component/itemsNavbarItem.ts
index 53219cb..0139b87 100644
--- a/types/component/navbarItem.ts
+++ b/types/component/itemsNavbarItem.ts
@@ -1,4 +1,4 @@
-import type NavbarSubItem from "./navbarSubItem";
+import type NavbarSubItem from "./itemsNavbarSubItem";
 
 export default interface NavbarItem {
   id: number;
diff --git a/types/component/navbarSubItem.ts b/types/component/itemsNavbarSubItem.ts
similarity index 100%
rename from types/component/navbarSubItem.ts
rename to types/component/itemsNavbarSubItem.ts
diff --git a/types/component/navbar.ts b/types/component/navbar.ts
deleted file mode 100644
index 3754981..0000000
--- a/types/component/navbar.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type Image from "./image";
-import type NavbarItem from "./navbarItem";
-
-export default interface Navbar {
-  id: number;
-  logo: Image;
-  navbar_items: NavbarItem[];
-}
diff --git a/types/component/sharedHero.ts b/types/component/sharedHero.ts
new file mode 100644
index 0000000..dcd52bd
--- /dev/null
+++ b/types/component/sharedHero.ts
@@ -0,0 +1,7 @@
+import type BaseImage from "./baseImage";
+
+export default interface SharedHero {
+  id: number;
+  title: string;
+  banner: BaseImage;
+}
diff --git a/types/component/sharedLink.ts b/types/component/sharedLink.ts
new file mode 100644
index 0000000..868344e
--- /dev/null
+++ b/types/component/sharedLink.ts
@@ -0,0 +1,5 @@
+export default interface SharedLink {
+  text: string;
+  URL: string;
+  target: "_blank" | "_self" | "_parent" | "_top";
+}
diff --git a/types/component/sharedList.ts b/types/component/sharedList.ts
new file mode 100644
index 0000000..f20a513
--- /dev/null
+++ b/types/component/sharedList.ts
@@ -0,0 +1,7 @@
+import type BaseComponent from "./baseComponent";
+
+export default interface SharedList extends BaseComponent {
+  __component: "shared.list";
+  list: string;
+  enable_detail: boolean;
+}
diff --git a/types/single/global.ts b/types/single/global.ts
index d144e34..b6eae4f 100644
--- a/types/single/global.ts
+++ b/types/single/global.ts
@@ -1,5 +1,5 @@
-import type Footer from "../component/footer";
-import type Navbar from "../component/navbar";
+import type Footer from "../component/globalFooter";
+import type Navbar from "../component/globalNavbar";
 
 export default interface Global {
   id: number;
diff --git a/types/single/homepage.ts b/types/single/homepage.ts
index 314c06f..43d7e30 100644
--- a/types/single/homepage.ts
+++ b/types/single/homepage.ts
@@ -1,4 +1,5 @@
-import type Image from "../component/image";
+import type BaseImage from "../component/baseImage";
+import type { ComponentTypes } from "../component/baseComponent";
 
 export default interface Homepage {
   id: number;
@@ -7,6 +8,6 @@ export default interface Homepage {
   updatedAt: string;
   publishedAt: string;
   locale: string;
-  backdrop: Image;
-  content: Array<any>;
+  backdrop: BaseImage;
+  content: Array<ComponentTypes>;
 }