Ehrenamt/ff-webpage
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 8 Packages Wiki Activity Actions

component formatting and types

Browse source
This commit is contained in:
Julian Krauser 2025-02-14 13:57:55 +01:00
parent c2a7d15eeb
commit ce745c06e5
60 changed files with 464 additions and 301 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
app.vue
View file

@ -3,24 +3,19 @@
</template>
<script setup lang="ts">
import type SEOComponent from "./types/component/seoComponent";
import type Global from "./types/single/global";
import calculateTitle from "./composables/calculateTitle";
import provideGlobal from "./composables/provideGlobal";
const runtimeConfig = useRuntimeConfig();
const appTitle = runtimeConfig.public.app.title;
const { SEO } = await provideGlobal();
const title = await calculateTitle();
const { findOne, find } = useStrapi();
const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
const {
metaTitle, metaDescription, keywords,
} = global.value?.data?.SEO ?? ({} as SEOComponent);
const { metaDescription, keywords } = SEO ?? {};
useHead({
title: metaTitle ?? appTitle,
title: title,
meta: [
{name: "description", content: metaDescription},
{name: "keywords", content: keywords},
]
{ name: "description", content: metaDescription },
{ name: "keywords", content: keywords },
],
});
</script>

8
assets/app.css
View file

@ -44,5 +44,13 @@ a[primary-sublink].active {
}
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
h3 {
@apply text-lg;
}

11
components/CollectionDetail.vue
View file

@ -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 />

12
components/ContentBuilder.vue
View file

@ -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>

24
components/Footer.vue
View file

@ -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>

17
components/Header.vue
View file

@ -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>

96
components/base/ListImageItem.vue
View file

@ -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>

85
components/base/ListItem.vue
View file

@ -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>

2
components/dynamicZone/ColumnImageText.vue
View file

@ -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;

2
components/dynamicZone/DualColumnText.vue
View file

@ -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>,

5
components/dynamicZone/Embedding.vue
View file

@ -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>,

21
components/dynamicZone/EmphasiseArticle.vue
View file

@ -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>

17
components/dynamicZone/FileDownload.vue
View file

@ -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>

2
components/dynamicZone/FullImage.vue
View file

@ -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;

2
components/dynamicZone/FullText.vue
View file

@ -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>,

2
components/dynamicZone/Gallery.vue
View file

@ -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;

13
components/dynamicZone/Section.vue Normal file
View file

@ -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>

12
components/dynamicZone/Spacer.vue Normal file
View file

@ -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>

8
components/field/Content.vue
View file

@ -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>

11
components/shared/Hero.vue → components/items/Hero.vue
View file

@ -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();

40
components/shared/EmphasiseArticle.vue Normal file
View file

@ -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>

29
components/shared/List.vue
View file

@ -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;

11
composables/calculateTitle.ts Normal file
View file

@ -0,0 +1,11 @@
import provideGlobal from "./provideGlobal";
export default async function () {
const runtimeConfig = useRuntimeConfig();
const appTitle = runtimeConfig.public.app.title;
const { SEO } = await provideGlobal();
const { metaTitle } = SEO ?? {};
return metaTitle ?? appTitle;
}

9
composables/provideGlobal.ts Normal file
View file

@ -0,0 +1,9 @@
import type Global from "../types/single/global";
export default async function () {
const { findOne } = useStrapi();
const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
const { logo, navbar, footer, SEO } = global.value?.data ?? {};
return { logo, navbar, footer, SEO };
}

19
layouts/landing.vue
View file

@ -1,14 +1,17 @@
<template>
<div v-if="!hide_backdrop" class="relative h-[calc(100svh-6rem)] max-h-[calc(100svh-6rem)] w-full overflow-hidden">
<div v-if="backdrop" class="relative h-[calc(100svh-6rem)] max-h-[calc(100svh-6rem)] w-full overflow-hidden">
<NuxtPicture
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 p-4 max-sm:w-full sm:h-40 bottom-5" :src="baseUrl + navbar.logo.url" />
<img v-if="logo" class="absolute p-4 max-sm:w-full sm:h-40 bottom-5" :src="baseUrl + logo.url" />
<img v-else class="absolute p-4 max-sm:w-full sm:h-40 bottom-5" src="/favicon.png" />
<img
class="absolute h-5 w-5 left-1/2 -translate-y-1/2 bottom-5 text-gray-400 cursor-pointer"
class="absolute h-5 w-5 left-1/2 -translate-y-1/2 bottom-5 text-gray-400 p-2 box-content rounded-full bg-white cursor-pointer"
src="/chevrons-down.svg"
@click="scroll()"
/>
@ -19,21 +22,17 @@
</template>
<script setup lang="ts">
import type Global from "../types/single/global";
import provideGlobal from "../composables/provideGlobal";
import type Homepage from "../types/single/homepage";
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 unknown as Global;
const { logo } = await provideGlobal();
const { data: homepage } = await useAsyncData("homepage", () => findOne<Homepage>("homepage"));
const { backdrop, hide_backdrop } = homepage.value?.data as unknown as Homepage;
const { backdrop } = homepage.value?.data ?? {};
function scroll() {
window.scrollTo({ top: window.innerHeight - 96, behavior: "smooth" });

79
pages/[...slug].vue
View file

@ -9,27 +9,32 @@
<script setup lang="ts">
import type Article from "../types/collection/article";
import type Event from "../types/collection/event";
import type Lookup from "../types/collection/lookup";
import type Operation from "../types/collection/operation";
import type Vehicle from "../types/collection/vehicle";
import type Page from "../types/collection/page";
import type NavbarSubItem from "../types/component/itemsNavbarSubItem";
import type Global from "../types/single/global";
import provideGlobal from "../composables/provideGlobal";
const {
params: { slug: params },
} = useRoute();
const { findOne, find } = useStrapi();
const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
const {
navbar: { navbar_items },
} = global.value?.data ?? ({} as Global);
const navbar_sub_items = ref<NavbarSubItem[]>(navbar_items.find((ni) => ni.URL == params[0])?.navbar_sub_items ?? []);
const active_item = ref<Page | null | undefined>(navbar_items.find((ni) => ni.URL == params[0])?.page);
const active_sub_item = ref<Page | null | undefined>(navbar_sub_items.value.find((si) => si.URL == params[1])?.page);
const active_page_id = ref<string>(active_sub_item.value?.documentId ?? active_item.value?.documentId ?? "");
const { navbar } = await provideGlobal();
const navbar_items = computed(() => {
return navbar?.navbar_items ?? [];
});
const navbar_sub_items = computed(() => {
return navbar_items.value.find((ni) => ni.URL == params[0])?.navbar_sub_items ?? [];
});
const active_item = computed(() => {
return navbar_items.value.find((ni) => ni.URL == params[0])?.page;
});
const active_sub_item = computed(() => {
return navbar_sub_items.value.find((si) => si.URL == params[1])?.page;
});
const active_page_id = computed(() => {
return active_sub_item.value?.documentId ?? active_item.value?.documentId ?? "";
});
const { data: pages } = await useAsyncData("pages", () =>
findOne<Page | Array<Page>>("pages", active_page_id.value, {
@ -47,32 +52,48 @@ const { data: pages } = await useAsyncData("pages", () =>
},
})
);
const page = ref<Page | undefined>(Array.isArray(pages.value?.data) ? pages.value.data[0] : pages.value?.data);
const page = computed(() => {
return Array.isArray(pages.value?.data) ? pages.value.data[0] : pages.value?.data;
});
let detail = ref<Article | Operation | Event | Vehicle | undefined>(undefined);
const searchDetail = params[2] || (params[1] && navbar_sub_items.value.length == 0);
if (searchDetail) {
const paramsFind = params[2] ? [params[0], params[1]] : [params[0]];
const { data: lookup } = await useAsyncData("lookup", () => find<Lookup>("collection-lookups"));
const activeLookup: Lookup | undefined = lookup.value?.data.find((l) => paramsFind.includes(l.reference));
const { data: details } = await useAsyncData("detail", () =>
find<Article | Operation | Event | Vehicle>(activeLookup?.collection ?? "", {
populate: "*",
filters: {
slug: params[2] ?? params[1],
},
})
);
detail.value = details.value?.data[0];
const searchDetail = computed(() => {
if (!active_sub_item.value) return params[1];
return params[2];
});
if (searchDetail.value) {
let collectionOfDetail = [
...new Set(
page.value?.content
.filter((c) => c.__component == "shared.list")
.filter((c) => c.lookup.enable_detail)
.map((c) => c.lookup.collection)
),
];
for (const element of collectionOfDetail) {
const { data: details } = await useAsyncData("detail", () =>
find<Article | Operation | Event | Vehicle>(element ?? "", {
populate: "*",
filters: {
slug: params[2] ?? params[1],
},
})
);
if (details.value?.data[0]) {
detail.value = details.value?.data[0];
break;
}
}
}
const notFound = computed(() => {
if (searchDetail) return !detail.value;
if (searchDetail.value) return !detail.value;
else return active_page_id.value == "" && !page.value?.content && !page.value?.hero;
});
const showContentBuilder = computed(() => {
if (searchDetail) return !detail.value;
if (searchDetail.value) return !detail.value;
else return !!page.value?.content || !!page.value?.hero;
});
</script>

1
types/collection/article.ts
View file

@ -1,4 +1,3 @@
import type BaseFile from "../component/baseFile";
import type BaseCollection from "./baseCollection";
export default interface Article extends BaseCollection {}

2
types/collection/baseCollection.ts
View file

@ -12,7 +12,7 @@ export default interface BaseCollection {
title: string;
description: string;
date: string | undefined;
date: string;
content: ContentField | undefined;
image: BaseFile | undefined;
attachment: Array<BaseFile>;

5
types/collection/event.ts
View file

@ -1,6 +1,3 @@
import type BaseCollection from "./baseCollection";
export default interface Event extends BaseCollection {
image: undefined;
content: undefined;
}
export default interface Event extends BaseCollection {}

14
types/collection/lookup.ts
View file

@ -1,13 +1,15 @@
export default interface Lookup {
id: number;
documentId: string;
collection: string;
image_item: boolean;
date_list: boolean;
numbered_item: boolean;
inverse_count: boolean;
reference: string;
createdAt: string;
updatedAt: string;
publishedAt: string;
reference: string;
collection: "events" | "vehicles" | "articles" | "operations";
show_image: boolean;
show_date: boolean;
list_with_date: "none" | "by-year" | "by-month";
items_with_number: "none" | "numbered" | "inverted";
enable_detail: boolean;
}

4
types/collection/operation.ts
View file

@ -1,5 +1,3 @@
import type BaseCollection from "./baseCollection";
export default interface Operation extends BaseCollection {
image: undefined;
}
export default interface Operation extends BaseCollection {}

4
types/collection/page.ts
View file

@ -1,5 +1,5 @@
import type { ComponentTypes } from "../component/baseComponent";
import type SharedHero from "../component/sharedHero";
import type ItemsHero from "../component/items/hero";
export default interface Page {
id: number;
@ -10,7 +10,7 @@ export default interface Page {
publishedAt: string;
locale: string;
slug: string;
hero: SharedHero;
hero: ItemsHero;
content: Array<ComponentTypes>;
localizations: any[];
}

5
types/collection/vehicle.ts
View file

@ -1,6 +1,3 @@
import type BaseFile from "../component/baseFile";
import type BaseCollection from "./baseCollection";
export default interface Vehicle extends BaseCollection {
date: undefined;
}
export default interface Vehicle extends BaseCollection {}

28
types/component/baseComponent.ts
View file

@ -1,12 +1,14 @@
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 DynamicZoneFileDownload from "./dynamicZoneFileDownload";
import type SharedList from "./sharedList";
import type DynamicZoneEmbedding from "./dynamicZoneEmbedding";
import type SharedEmphasiseArticle from "./shared/emphasiseArticle";
import type SharedList from "./shared/list";
import type DynamicZoneColumnImageText from "./dynamic-zone/columnImageText";
import type DynamicZoneDualColumnText from "./dynamic-zone/dualColumnText";
import type DynamicZoneFullImage from "./dynamic-zone/fullImage";
import type DynamicZoneFullText from "./dynamic-zone/fullText";
import type DynamicZoneGallery from "./dynamic-zone/gallery";
import type DynamicZoneFileDownload from "./dynamic-zone/fileDownload";
import type DynamicZoneEmbedding from "./dynamic-zone/embedding";
import type DynamicZoneSection from "./dynamic-zone/section";
import type DynamicZoneSpacer from "./dynamic-zone/spacer";
export default interface BaseComponent {
__component: ComponentNames;
@ -15,10 +17,12 @@ export default interface BaseComponent {
export type ComponentNames =
| "shared.list"
| "shared.emphasise-article"
| "dynamic-zone.section"
| "dynamic-zone.spacer"
| "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"
| "dynamic-zone.file-download"
@ -26,10 +30,12 @@ export type ComponentNames =
export type ComponentTypes =
| SharedList
| SharedEmphasiseArticle
| DynamicZoneSection
| DynamicZoneSpacer
| DynamicZoneGallery
| DynamicZoneFullText
| DynamicZoneFullImage
| DynamicZoneEmphasiseArticle
| DynamicZoneDualColumnText
| DynamicZoneColumnImageText
| DynamicZoneFileDownload

6
types/component/dynamicZoneColumnImageText.ts → types/component/dynamic-zone/columnImageText.ts
View file

@ -1,6 +1,6 @@
import type ContentField from "../field/content";
import type BaseComponent from "./baseComponent";
import type BaseFile from "./baseFile";
import type ContentField from "../../field/content";
import type BaseComponent from "../baseComponent";
import type BaseFile from "../baseFile";
export default interface DynamicZoneColumnImageText extends BaseComponent {
__component: "dynamic-zone.column-image-text";

4
types/component/dynamicZoneDualColumnText.ts → types/component/dynamic-zone/dualColumnText.ts
View file

@ -1,5 +1,5 @@
import type ContentField from "../field/content";
import type BaseComponent from "./baseComponent";
import type ContentField from "../../field/content";
import type BaseComponent from "../baseComponent";
export default interface DynamicZoneDualColumnText extends BaseComponent {
__component: "dynamic-zone.dual-column-text";

3
types/component/dynamicZoneEmbedding.ts → types/component/dynamic-zone/embedding.ts
View file

@ -1,7 +1,6 @@
import type BaseComponent from "./baseComponent";
import type BaseComponent from "../baseComponent";
export default interface DynamicZoneEmbedding extends BaseComponent {
__component: "dynamic-zone.embedding";
title: string;
link: string;
}

5
types/component/dynamicZoneFileDownload.ts → types/component/dynamic-zone/fileDownload.ts
View file

@ -1,9 +1,8 @@
import type BaseComponent from "./baseComponent";
import type BaseFile from "./baseFile";
import type BaseComponent from "../baseComponent";
import type BaseFile from "../baseFile";
export default interface DynamicZoneFileDownload extends BaseComponent {
__component: "dynamic-zone.file-download";
enable_download: boolean;
title: string;
file: BaseFile;
}

4
types/component/dynamicZoneFullImage.ts → types/component/dynamic-zone/fullImage.ts
View file

@ -1,5 +1,5 @@
import type BaseComponent from "./baseComponent";
import type BaseFile from "./baseFile";
import type BaseComponent from "../baseComponent";
import type BaseFile from "../baseFile";
export default interface DynamicZoneFullImage extends BaseComponent {
__component: "dynamic-zone.full-image";

4
types/component/dynamicZoneFullText.ts → types/component/dynamic-zone/fullText.ts
View file

@ -1,5 +1,5 @@
import type ContentField from "../field/content";
import type BaseComponent from "./baseComponent";
import type ContentField from "../../field/content";
import type BaseComponent from "../baseComponent";
export default interface DynamicZoneFullText extends BaseComponent {
__component: "dynamic-zone.full-text";

4
types/component/dynamicZoneGallery.ts → types/component/dynamic-zone/gallery.ts
View file

@ -1,5 +1,5 @@
import type BaseComponent from "./baseComponent";
import type BaseFile from "./baseFile";
import type BaseComponent from "../baseComponent";
import type BaseFile from "../baseFile";
export default interface DynamicZoneGallery extends BaseComponent {
__component: "dynamic-zone.gallery";

7
types/component/dynamic-zone/section.ts Normal file
View file

@ -0,0 +1,7 @@
import type BaseComponent from "../baseComponent";
export default interface DynamicZoneSection extends BaseComponent {
__component: "dynamic-zone.section";
title: string;
description: string;
}

5
types/component/dynamic-zone/spacer.ts Normal file
View file

@ -0,0 +1,5 @@
import type BaseComponent from "../baseComponent";
export default interface DynamicZoneSpacer extends BaseComponent {
__component: "dynamic-zone.spacer";
}

10
types/component/dynamicZoneEmphasiseArticle.ts
View file

@ -1,10 +0,0 @@
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>;
base_url: string;
}

8
types/component/global/footer.ts Normal file
View file

@ -0,0 +1,8 @@
import type FooterLink from "../items/footerLink";
export default interface Footer {
id: number;
copyright: undefined | string;
maintained_by: undefined | string;
links: FooterLink[];
}

6
types/component/global/navbar.ts Normal file
View file

@ -0,0 +1,6 @@
import type NavbarItem from "../items/navbarItem";
export default interface Navbar {
id: number;
navbar_items: NavbarItem[];
}

2
types/component/seoComponent.ts → types/component/global/seo.ts
View file

@ -1,4 +1,4 @@
export default interface SEOComponent {
export default interface SEO {
metaTitle: string;
metaDescription: string;
keywords: string;

8
types/component/globalFooter.ts
View file

@ -1,8 +0,0 @@
import type FooterLink from "./itemsFooterLink";
export default interface Footer {
id: number;
copyright: string;
maintained?: string;
links: FooterLink[];
}

8
types/component/globalNavbar.ts
View file

@ -1,8 +0,0 @@
import type BaseFile from "./baseFile";
import type NavbarItem from "./itemsNavbarItem";
export default interface Navbar {
id: number;
logo: BaseFile;
navbar_items: NavbarItem[];
}

0
types/component/itemsFooterLink.ts → types/component/items/footerLink.ts
View file

7
types/component/items/hero.ts Normal file
View file

@ -0,0 +1,7 @@
import type BaseFile from "../baseFile";
export default interface ItemsHero {
id: number;
title: string | undefined;
banner: BaseFile | undefined;
}

0
types/component/sharedLink.ts → types/component/items/link.ts
View file

2
types/component/itemsNavbarItem.ts → types/component/items/navbarItem.ts
View file

@ -1,4 +1,4 @@
import type NavbarSubItem from "./itemsNavbarSubItem";
import type NavbarSubItem from "./navbarSubItem";
export default interface NavbarItem {
id: number;

2
types/component/itemsNavbarSubItem.ts → types/component/items/navbarSubItem.ts
View file

@ -1,4 +1,4 @@
import type Page from "../collection/page";
import type Page from "../../collection/page";
export default interface NavbarSubItem {
id: number;

8
types/component/shared/emphasiseArticle.ts Normal file
View file

@ -0,0 +1,8 @@
import type Article from "../../collection/article";
import type BaseComponent from "../baseComponent";
export default interface SharedEmphasiseArticle extends BaseComponent {
__component: "shared.emphasise-article";
articles: Array<Article>;
link_to_articles: string;
}

7
types/component/shared/list.ts Normal file
View file

@ -0,0 +1,7 @@
import type Lookup from "../../collection/lookup";
import type BaseComponent from "../baseComponent";
export default interface SharedList extends BaseComponent {
__component: "shared.list";
lookup: Lookup;
}

7
types/component/sharedHero.ts
View file

@ -1,7 +0,0 @@
import type BaseFile from "./baseFile";
export default interface SharedHero {
id: number;
title: string;
banner: BaseFile;
}

8
types/component/sharedList.ts
View file

@ -1,8 +0,0 @@
import type Lookup from "../collection/lookup";
import type BaseComponent from "./baseComponent";
export default interface SharedList extends BaseComponent {
__component: "shared.list";
enable_detail: boolean;
lookup: Lookup;
}

14
types/single/global.ts
View file

@ -1,6 +1,7 @@
import type Footer from "../component/globalFooter";
import type Navbar from "../component/globalNavbar";
import type SEOComponent from "../component/seoComponent";
import type BaseFile from "../component/baseFile";
import type Footer from "../component/global/footer";
import type Navbar from "../component/global/navbar";
import type SEO from "../component/global/seo";
export default interface Global {
id: number;
@ -9,7 +10,8 @@ export default interface Global {
updatedAt: string;
publishedAt: string;
locale: string;
navbar: Navbar;
footer: Footer;
SEO: SEOComponent;
logo: BaseFile;
navbar: Navbar | undefined;
footer: Footer | undefined;
SEO: SEO | undefined;
}

3
types/single/homepage.ts
View file

@ -8,7 +8,6 @@ export default interface Homepage {
updatedAt: string;
publishedAt: string;
locale: string;
backdrop: BaseFile;
hide_backdrop: boolean;
backdrop: undefined | BaseFile;
content: Array<ComponentTypes>;
}