version update to nuxt4
This commit is contained in:
parent
7f1770d442
commit
ef84942e38
41 changed files with 5134 additions and 4946 deletions
15
app/app.vue
Normal file
15
app/app.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<NuxtPage />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { seo, title } = useGlobal();
|
||||
|
||||
useHead({
|
||||
title: title.value,
|
||||
meta: [
|
||||
{ name: "description", content: seo.value?.metaDescription },
|
||||
{ name: "keywords", content: seo.value?.keywords ?? "" },
|
||||
],
|
||||
});
|
||||
</script>
|
||||
20
app/assets/ConthraxSemiBold.css
Normal file
20
app/assets/ConthraxSemiBold.css
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
/**
|
||||
* @license
|
||||
* MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500
|
||||
*
|
||||
* The fonts listed in this notice are subject to the End User License
|
||||
* Agreement(s) entered into by the website owner. All other parties are
|
||||
* explicitly restricted from using the Licensed Webfonts(s).
|
||||
*
|
||||
* You may obtain a valid license at the URLs below.
|
||||
*
|
||||
* Webfont: undefined by undefined
|
||||
* URL: https://www.myfonts.comundefined
|
||||
* Copyright: Copyright © 2024 Monotype Imaging Inc. All rights reserved.
|
||||
*
|
||||
* © 2024 MyFonts Inc. */
|
||||
|
||||
@font-face {
|
||||
font-family: "ConthraxSemiBold";
|
||||
src: url("ConthraxSemiBold/font.woff2") format("woff2"), url("ConthraxSemiBold/font.woff") format("woff");
|
||||
}
|
||||
BIN
app/assets/ConthraxSemiBold/font.woff
Normal file
BIN
app/assets/ConthraxSemiBold/font.woff
Normal file
Binary file not shown.
BIN
app/assets/ConthraxSemiBold/font.woff2
Normal file
BIN
app/assets/ConthraxSemiBold/font.woff2
Normal file
Binary file not shown.
60
app/assets/app.css
Normal file
60
app/assets/app.css
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-primary: #b22222;
|
||||
--color-darkgray: #2b292a;
|
||||
--color-lightgray: #e3dfdf;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "ConthraxSemiBold";
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
@apply bg-white text-black w-full min-h-screen;
|
||||
}
|
||||
|
||||
[primary] {
|
||||
@apply bg-primary text-white;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
a[primary-link] {
|
||||
@apply text-xl;
|
||||
}
|
||||
|
||||
a[primary-link].active {
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
a[primary-sublink] {
|
||||
@apply text-xl p-2;
|
||||
}
|
||||
|
||||
a[primary-sublink].active {
|
||||
@apply bg-white text-primary;
|
||||
}
|
||||
|
||||
[lightgray] {
|
||||
@apply bg-lightgray;
|
||||
}
|
||||
|
||||
[darkgray] {
|
||||
@apply bg-darkgray text-white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-2xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-lg;
|
||||
}
|
||||
68
app/components/CollectionDetail.vue
Normal file
68
app/components/CollectionDetail.vue
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<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 && data.date.includes('T')">
|
||||
{{
|
||||
new Date(data?.date ?? "").toLocaleString("de-DE", {
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
})
|
||||
}}
|
||||
</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 />
|
||||
<NuxtPicture
|
||||
v-if="data?.image"
|
||||
loading="lazy"
|
||||
class="max-sm:w-full h-full sm:h-[50vh] max-w-full object-cover object-center"
|
||||
:src="baseUrl + data.image.url"
|
||||
:imgAttrs="{ class: 'h-full sm:h-[50vh] object-cover object-center' }"
|
||||
/>
|
||||
<br v-if="data?.image" />
|
||||
<div v-if="data?.content">
|
||||
<p>Bericht:</p>
|
||||
<FieldContent :data="data.content" />
|
||||
</div>
|
||||
<br />
|
||||
<div v-if="data?.attachment">
|
||||
<p>Anhang:</p>
|
||||
<div class="flex flex-col sm:flex-row flex-wrap gap-2 w-full min-h-fit">
|
||||
<NuxtPicture
|
||||
v-for="img in data.attachment"
|
||||
loading="lazy"
|
||||
class="max-sm:w-full sm:h-48 object-cover object-center"
|
||||
:src="baseUrl + img.url"
|
||||
:imgAttrs="{ class: 'max-sm:w-full sm:h-48 object-cover object-center' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from "vue";
|
||||
import type Article from "~~/types/collection/article";
|
||||
import type Operation from "~~/types/collection/operation";
|
||||
import type Event from "~~/types/collection/event";
|
||||
import type Vehicle from "~~/types/collection/vehicle";
|
||||
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const baseUrl = runtimeConfig.public.strapi.url;
|
||||
|
||||
defineProps({
|
||||
data: Object as PropType<Article | Operation | Event | Vehicle>,
|
||||
});
|
||||
</script>
|
||||
33
app/components/ContentBuilder.vue
Normal file
33
app/components/ContentBuilder.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div class="min-h-[calc(100vh-9rem)] w-full">
|
||||
<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">
|
||||
<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" />
|
||||
<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" />
|
||||
<DynamicZoneFileViewer v-else-if="item.__component == 'dynamic-zone.file-viewer'" :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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from "vue";
|
||||
import type ItemsHero from "~~/types/component/items/hero";
|
||||
import type { ComponentTypes } from "~~/types/component/baseComponent";
|
||||
|
||||
defineProps({
|
||||
hero: { type: Object as PropType<ItemsHero>, required: false, default: null },
|
||||
content: Array<ComponentTypes>,
|
||||
});
|
||||
</script>
|
||||
34
app/components/Footer.vue
Normal file
34
app/components/Footer.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<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>
|
||||
<NuxtLink
|
||||
v-else
|
||||
:to="`${link.URL.startsWith('/') ? '' : '/'}${link.URL}`"
|
||||
:target="link.target"
|
||||
class="text-base"
|
||||
>
|
||||
{{ link.text }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</p>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { footer, title } = useGlobal();
|
||||
const { links, maintained_by, copyright } = footer.value ?? {};
|
||||
</script>
|
||||
82
app/components/Header.vue
Normal file
82
app/components/Header.vue
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<header class="sticky top-0 h-fit z-50">
|
||||
<div
|
||||
primary
|
||||
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 v-if="logo" class="h-16" :src="baseUrl + logo.url" />
|
||||
<img v-else class="h-16" src="/favicon.png" />
|
||||
</NuxtLink>
|
||||
|
||||
<div v-if="navbar" class="md:hidden">
|
||||
<svg
|
||||
v-if="!open"
|
||||
viewBox="0 0 24 24"
|
||||
class="h-10 w-10 cursor-pointer fill-none stroke-2 stroke-white"
|
||||
@click="open = !open"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
<svg
|
||||
v-else
|
||||
viewBox="0 0 24 24"
|
||||
class="h-10 w-10 cursor-pointer fill-none stroke-2 stroke-white"
|
||||
@click="open = !open"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</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'"
|
||||
>
|
||||
<NuxtLink
|
||||
primary-link
|
||||
v-for="link in navbar.navbar_items"
|
||||
:key="link.id"
|
||||
:to="`/${link.URL}${link.default_active_child ? '/' + link.default_active_child : ''}`"
|
||||
:class="link.URL == params?.[0] ? 'active' : ''"
|
||||
>
|
||||
{{ link.name }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="navbar_sub_items && navbar_sub_items?.length != 0"
|
||||
primary
|
||||
class="h-fit min-h-fit w-full px-4 md:px-12 border-t-2 border-white justify-center items-center gap-5 flex flex-row max-md:flex-wrap"
|
||||
>
|
||||
<NuxtLink
|
||||
primary-sublink
|
||||
v-for="sublink in navbar_sub_items"
|
||||
:key="sublink.id"
|
||||
:to="`/${params?.[0]}/${sublink.URL}`"
|
||||
:class="sublink.URL == params?.[1] ? 'active' : ''"
|
||||
class="w-fit"
|
||||
>
|
||||
{{ sublink.name }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const {
|
||||
params: { slug: params },
|
||||
} = useRoute();
|
||||
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const baseUrl = runtimeConfig.public.strapi.url;
|
||||
|
||||
const { logo, navbar } = useGlobal();
|
||||
|
||||
const open = ref(false);
|
||||
|
||||
const navbar_sub_items = computed(() => {
|
||||
if (!navbar.value) return [];
|
||||
return navbar.value.navbar_items.find((ni) => ni.URL == params?.[0])?.navbar_sub_items;
|
||||
});
|
||||
</script>
|
||||
3
app/components/NotFound.vue
Normal file
3
app/components/NotFound.vue
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<div class="h-[calc(100vh-18rem)] w-full flex items-center justify-center">Nicht gefunden</div>
|
||||
</template>
|
||||
93
app/components/base/ListImageItem.vue
Normal file
93
app/components/base/ListImageItem.vue
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<NuxtLink
|
||||
class="w-full sm:w-72 h-96 rounded-lg shadow-md border border-gray-200 flex-col justify-start items-start inline-flex overflow-hidden"
|
||||
:class="allowNavigation ? '' : 'pointer-events-none'"
|
||||
:to="`${urlOverwrite ?? $route.path}/${data?.slug}`"
|
||||
>
|
||||
<div class="w-full h-56 min-h-56 relative">
|
||||
<NuxtPicture
|
||||
loading="lazy"
|
||||
class="w-full h-full min-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 grow relative bg-white p-2 pb-4 flex flex-col justify-start items-start gap-2 overflow-y-auto">
|
||||
<h1>
|
||||
{{ data?.title }}
|
||||
</h1>
|
||||
<p class="w-full text-[#5c5c5c] line-clamp-2 overflow-hidden">
|
||||
{{ itemDate }}
|
||||
</p>
|
||||
<p class="w-full text-[#5c5c5c] line-clamp-2 overflow-hidden">
|
||||
{{ data?.description }}
|
||||
</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<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;
|
||||
|
||||
const { logo } = useGlobal();
|
||||
|
||||
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") ? ("2-digit" as const) : undefined,
|
||||
hour: props.data?.date.includes("T") ? ("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>
|
||||
74
app/components/base/ListItem.vue
Normal file
74
app/components/base/ListItem.vue
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<NuxtLink
|
||||
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="itemIndex" class="min-w-20 w-20 sm:min-w-24 sm:w-24 text-center text-black text-4xl! my-auto">
|
||||
{{ itemIndex }}.
|
||||
</h1>
|
||||
|
||||
<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="itemDate && lookup?.show_date" class="w-full text-[#5c5c5c]">
|
||||
{{ itemDate }}
|
||||
</p>
|
||||
<p class="w-full text-[#5c5c5c] line-clamp-2 overflow-hidden">
|
||||
{{ data?.description }}
|
||||
</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from "vue";
|
||||
import type BaseCollection from "~~/types/collection/baseCollection";
|
||||
import type Lookup from "~~/types/collection/lookup";
|
||||
|
||||
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") ? ("2-digit" as const) : undefined,
|
||||
hour: props.data?.date.includes("T") ? ("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>
|
||||
24
app/components/dynamicZone/ColumnImageText.vue
Normal file
24
app/components/dynamicZone/ColumnImageText.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div class="flex flex-col md:flex-row gap-8 md:gap-4">
|
||||
<NuxtPicture
|
||||
loading="lazy"
|
||||
class="w-full md:w-1/2 min-w-[50%] object-cover object-center"
|
||||
:class="data?.image_left ? 'order-0' : 'order-1'"
|
||||
:src="baseUrl + data?.image.url"
|
||||
:imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
|
||||
/>
|
||||
<FieldContent :data="data?.text" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from "vue";
|
||||
import type DynamicZoneColumnImageText from "~~/types/component/dynamic-zone/columnImageText";
|
||||
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const baseUrl = runtimeConfig.public.strapi.url;
|
||||
|
||||
defineProps({
|
||||
data: Object as PropType<DynamicZoneColumnImageText>,
|
||||
});
|
||||
</script>
|
||||
15
app/components/dynamicZone/DualColumnText.vue
Normal file
15
app/components/dynamicZone/DualColumnText.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<div class="flex flex-col md:flex-row gap-8 md:gap-4">
|
||||
<FieldContent :data="data?.left_side" />
|
||||
<FieldContent :data="data?.right_side" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from "vue";
|
||||
import type DynamicZoneDualColumnText from "~~/types/component/dynamic-zone/dualColumnText";
|
||||
|
||||
defineProps({
|
||||
data: Object as PropType<DynamicZoneDualColumnText>,
|
||||
});
|
||||
</script>
|
||||
14
app/components/dynamicZone/Embedding.vue
Normal file
14
app/components/dynamicZone/Embedding.vue
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
|
||||
<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/dynamic-zone/embedding";
|
||||
|
||||
const props = defineProps({
|
||||
data: Object as PropType<DynamicZoneEmbedding>,
|
||||
});
|
||||
</script>
|
||||
24
app/components/dynamicZone/FileDownload.vue
Normal file
24
app/components/dynamicZone/FileDownload.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
|
||||
<a
|
||||
:href="baseUrl + data?.file.url"
|
||||
:download="data?.file.name"
|
||||
target="_blank"
|
||||
class="w-fit text-primary underline"
|
||||
>
|
||||
Datei {{ data?.file.name }} herunterladen
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from "vue";
|
||||
import type DynamicZoneFileDownload from "~~/types/component/dynamic-zone/fileDownload";
|
||||
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const baseUrl = runtimeConfig.public.strapi.url;
|
||||
|
||||
defineProps({
|
||||
data: Object as PropType<DynamicZoneFileDownload>,
|
||||
});
|
||||
</script>
|
||||
42
app/components/dynamicZone/FileViewer.vue
Normal file
42
app/components/dynamicZone/FileViewer.vue
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div v-if="showComponent" class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
|
||||
<iframe v-if="data?.file.mime == 'application/pdf'" :src="baseUrl + data.file.url" class="w-full h-[90vh]"></iframe>
|
||||
<NuxtPicture
|
||||
v-else-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' }"
|
||||
/>
|
||||
<video
|
||||
v-else-if="data?.file.mime.includes('video')"
|
||||
class="w-full max-w-full h-auto object-contain"
|
||||
controls
|
||||
controlsList="nodownload"
|
||||
>
|
||||
<source :src="baseUrl + data?.file.url" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from "vue";
|
||||
import type DynamicZoneFileViewer from "~~/types/component/dynamic-zone/fileViewer";
|
||||
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const baseUrl = runtimeConfig.public.strapi.url;
|
||||
|
||||
const props = defineProps({
|
||||
data: Object as PropType<DynamicZoneFileViewer>,
|
||||
});
|
||||
|
||||
const showComponent = computed(() => {
|
||||
if (
|
||||
props.data?.file.mime == "application/pdf" ||
|
||||
props.data?.file.mime.includes("image") ||
|
||||
props.data?.file.mime.includes("video")
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
20
app/components/dynamicZone/FullImage.vue
Normal file
20
app/components/dynamicZone/FullImage.vue
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<NuxtPicture
|
||||
loading="lazy"
|
||||
class="w-full lg:w-1/2 lg:min-w-[50%] object-cover object-center mx-auto"
|
||||
:src="baseUrl + data?.image.url"
|
||||
:imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from "vue";
|
||||
import type DynamicZoneFullImage from "~~/types/component/dynamic-zone/fullImage";
|
||||
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const baseUrl = runtimeConfig.public.strapi.url;
|
||||
|
||||
defineProps({
|
||||
data: Object as PropType<DynamicZoneFullImage>,
|
||||
});
|
||||
</script>
|
||||
12
app/components/dynamicZone/FullText.vue
Normal file
12
app/components/dynamicZone/FullText.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<FieldContent :data="data?.text" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from "vue";
|
||||
import type DynamicZoneFullText from "~~/types/component/dynamic-zone/fullText";
|
||||
|
||||
defineProps({
|
||||
data: Object as PropType<DynamicZoneFullText>,
|
||||
});
|
||||
</script>
|
||||
23
app/components/dynamicZone/Gallery.vue
Normal file
23
app/components/dynamicZone/Gallery.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<div class="flex flex-row flex-wrap gap-2 w-full min-h-fit">
|
||||
<NuxtPicture
|
||||
v-for="img in data?.images"
|
||||
loading="lazy"
|
||||
class="max-sm:w-full sm:h-48 object-cover object-center"
|
||||
:src="baseUrl + img.url"
|
||||
:imgAttrs="{ class: 'max-sm:w-full sm:h-48 object-cover object-center' }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from "vue";
|
||||
import type DynamicZoneGallery from "~~/types/component/dynamic-zone/gallery";
|
||||
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const baseUrl = runtimeConfig.public.strapi.url;
|
||||
|
||||
defineProps({
|
||||
data: Object as PropType<DynamicZoneGallery>,
|
||||
});
|
||||
</script>
|
||||
13
app/components/dynamicZone/Section.vue
Normal file
13
app/components/dynamicZone/Section.vue
Normal 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
app/components/dynamicZone/Spacer.vue
Normal file
12
app/components/dynamicZone/Spacer.vue
Normal 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>
|
||||
49
app/components/field/Content.vue
Normal file
49
app/components/field/Content.vue
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<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' && 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>
|
||||
<div v-else-if="item.type == 'quote'" class="w-full p-3">
|
||||
<p class="p-3 bg-gray-200 border-l-2 border-gray-500">
|
||||
<FieldType v-for="child in item.children" :data="child" />
|
||||
</p>
|
||||
</div>
|
||||
<ol
|
||||
v-else-if="item.type == 'list'"
|
||||
class="w-full"
|
||||
:class="item.format == 'unordered' ? 'list-disc' : 'list-decimal'"
|
||||
>
|
||||
<li v-for="list in item.children" class="ml-6">
|
||||
<FieldType v-for="child in list.children" :data="child" />
|
||||
</li>
|
||||
</ol>
|
||||
<NuxtLink
|
||||
v-else-if="item.type == 'code'"
|
||||
primary
|
||||
:to="item.children[0].text.split('->')[0]"
|
||||
class="w-fit p-2 px-3 rounded-md mx-auto mt-3"
|
||||
>
|
||||
{{ item.children[0].text.split("->")[1] }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from "vue";
|
||||
import type ContentField from "~~/types/field/content";
|
||||
|
||||
defineProps({
|
||||
data: Object as PropType<ContentField>,
|
||||
});
|
||||
</script>
|
||||
21
app/components/field/Text.vue
Normal file
21
app/components/field/Text.vue
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<span
|
||||
v-for="text in data"
|
||||
:key="text.text"
|
||||
:class="[
|
||||
text.bold ? 'font-bold' : '',
|
||||
text.strikethrough ? 'line-through' : '',
|
||||
text.underline ? 'underline' : '',
|
||||
text.italic ? 'italic' : '',
|
||||
]"
|
||||
>{{ text.text }}</span
|
||||
>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { TextField } from "~~/types/field/content";
|
||||
|
||||
defineProps({
|
||||
data: Array<TextField>,
|
||||
});
|
||||
</script>
|
||||
15
app/components/field/Type.vue
Normal file
15
app/components/field/Type.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<FieldText v-if="data?.type == 'text'" :data="[data]" />
|
||||
<NuxtLink v-else :href="data?.url" class="text-primary">
|
||||
<FieldText :data="data?.children" />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from "vue";
|
||||
import type { TypeField } from "~~/types/field/content";
|
||||
|
||||
defineProps({
|
||||
data: Object as PropType<TypeField>,
|
||||
});
|
||||
</script>
|
||||
26
app/components/items/Hero.vue
Normal file
26
app/components/items/Hero.vue
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<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 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 ItemsHero from "~~/types/component/items/hero";
|
||||
|
||||
defineProps({
|
||||
data: Object as PropType<ItemsHero>,
|
||||
});
|
||||
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const baseUrl = runtimeConfig.public.strapi.url;
|
||||
</script>
|
||||
40
app/components/shared/EmphasiseArticle.vue
Normal file
40
app/components/shared/EmphasiseArticle.vue
Normal 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(() =>
|
||||
find<Lookup>("collection-lookups", {
|
||||
filters: {
|
||||
collection: { $eq: "articles" },
|
||||
},
|
||||
})
|
||||
);
|
||||
const articleLookup = ref(lookup.value?.data[0]);
|
||||
|
||||
defineProps({
|
||||
data: Object as PropType<SharedEmphasiseArticle>,
|
||||
});
|
||||
</script>
|
||||
292
app/components/shared/List.vue
Normal file
292
app/components/shared/List.vue
Normal file
|
|
@ -0,0 +1,292 @@
|
|||
<template>
|
||||
<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"
|
||||
:class="allowLeft ? '' : 'pointer-events-none opacity-75'"
|
||||
@click="changeTimedData(allowLeft ?? 0)"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
<h1>{{ activeYear }}</h1>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="h-5 w-5 cursor-pointer fill-none stroke-2 stroke-black"
|
||||
:class="allowRight ? '' : 'pointer-events-none opacity-75'"
|
||||
@click="changeTimedData(allowRight ?? 0)"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="flex gap-2 w-full max-w-4xl mx-auto"
|
||||
: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.list_with_date == 'by-month' && getDate(index) != ''" class="w-full text-center">
|
||||
{{ getDate(index) }}
|
||||
</p>
|
||||
<BaseListImageItem
|
||||
v-if="data?.lookup.show_image"
|
||||
:data="item"
|
||||
:lookup="data?.lookup"
|
||||
:number-overwrite="getNumber(index)"
|
||||
:allow-navigation="data.lookup.enable_detail"
|
||||
/>
|
||||
<BaseListItem
|
||||
v-else-if="data?.lookup"
|
||||
:data="item"
|
||||
:lookup="data?.lookup"
|
||||
:number-overwrite="getNumber(index)"
|
||||
:allow-navigation="data.lookup.enable_detail"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="pagination.pageCount > 1"
|
||||
class="flex flex-row w-full max-w-4xl mx-auto justify-between items-center select-none pt-4"
|
||||
>
|
||||
<p class="text-sm font-normal text-gray-500">
|
||||
Elemente <span class="font-semibold text-gray-900">{{ showingText }}</span> von
|
||||
<span class="font-semibold text-gray-900">{{ entryCount }}</span>
|
||||
</p>
|
||||
<ul class="flex flex-row text-sm h-8">
|
||||
<li
|
||||
class="flex h-8 w-8 items-center justify-center text-gray-500 bg-white border border-gray-300 first:rounded-s-lg last:rounded-e-lg"
|
||||
:class="[
|
||||
currentPage > 1 ? 'cursor-pointer hover:bg-gray-100 hover:text-gray-700' : 'opacity-50 pointer-events-none',
|
||||
]"
|
||||
@click="changeTimedPage(currentPage - 1)"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" class="h-5 w-4 cursor-pointer fill-none stroke-2 stroke-black">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
</li>
|
||||
<li
|
||||
v-for="page in displayedPagesNumbers"
|
||||
:key="page"
|
||||
class="flex h-8 w-8 items-center justify-center text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 first:rounded-s-lg last:rounded-e-lg"
|
||||
:class="[currentPage - 1 == page ? 'font-bold border-primary' : '', page != '.' ? ' cursor-pointer' : '']"
|
||||
@click="changeTimedPage(page)"
|
||||
>
|
||||
{{ typeof page == "number" ? page + 1 : "..." }}
|
||||
</li>
|
||||
<li
|
||||
class="flex h-8 w-8 items-center justify-center text-gray-500 bg-white border border-gray-300 first:rounded-s-lg last:rounded-e-lg"
|
||||
:class="[
|
||||
currentPage < pagination.pageCount
|
||||
? 'cursor-pointer hover:bg-gray-100 hover:text-gray-700'
|
||||
: 'opacity-50 pointer-events-none',
|
||||
]"
|
||||
@click="changeTimedPage(currentPage + 1)"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" class="h-4 w-4 cursor-pointer fill-none stroke-2 stroke-black">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PropType } from "vue";
|
||||
import type SharedList from "~~/types/component/shared/list";
|
||||
import type BaseCollection from "~~/types/collection/baseCollection";
|
||||
|
||||
interface Meta {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
pageCount: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const baseUrl = runtimeConfig.public.strapi.url;
|
||||
const { find } = useStrapi();
|
||||
|
||||
const props = defineProps({
|
||||
data: Object as PropType<SharedList>,
|
||||
});
|
||||
const collection = ref<Array<BaseCollection> | undefined>();
|
||||
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.list_with_date != "none") {
|
||||
const { data: year } = await useAsyncData<Array<number>>(
|
||||
"range" + (props.data?.lookup.documentId ?? ""),
|
||||
() => $fetch(`${baseUrl}/api/custom/${props.data?.lookup.collection}/distinct-years`),
|
||||
{
|
||||
watch: [() => props.data],
|
||||
}
|
||||
);
|
||||
years.value = year.value ?? [];
|
||||
activeYear.value = years.value[0] ?? 0;
|
||||
}
|
||||
const { data: collections } = await useAsyncData(
|
||||
props.data?.lookup.documentId ?? "",
|
||||
() =>
|
||||
find<BaseCollection>(props.data?.lookup.collection ?? "", {
|
||||
...(props.data?.lookup?.list_with_date != "none"
|
||||
? {
|
||||
sort: "date:desc",
|
||||
filters: {
|
||||
date: {
|
||||
//@ts-ignore
|
||||
$between: [`${activeYear.value}-01-01 00:00:00.000000`, `${activeYear.value}-12-31 23:59:59.999`],
|
||||
},
|
||||
},
|
||||
pagination: {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
withCount: true,
|
||||
},
|
||||
}
|
||||
: {
|
||||
pagination: {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
withCount: true,
|
||||
},
|
||||
}),
|
||||
}),
|
||||
{
|
||||
watch: [() => props.data],
|
||||
}
|
||||
);
|
||||
collection.value = collections.value?.data;
|
||||
pagination.value = (collections.value?.meta.pagination as unknown as {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
pageCount: number;
|
||||
total: number;
|
||||
}) ?? {
|
||||
page: 0,
|
||||
pageSize: 0,
|
||||
pageCount: 0,
|
||||
total: 0,
|
||||
};
|
||||
|
||||
const numberOffset = computed(() => {
|
||||
return (pagination.value.page - 1) * pagination.value.pageSize;
|
||||
});
|
||||
|
||||
const allowRight = computed<number | undefined>(() => {
|
||||
return years.value.filter((y) => y < activeYear.value).sort((a, b) => b - a)[0];
|
||||
});
|
||||
const allowLeft = computed(() => {
|
||||
return years.value.filter((y) => y > activeYear.value).sort((a, b) => a - b)[0];
|
||||
});
|
||||
|
||||
const currentPage = computed(() => pagination.value.page);
|
||||
const entryCount = computed(() => pagination.value.total);
|
||||
const showingStart = computed(() => (currentPage.value - 1) * pagination.value.pageSize);
|
||||
const showingEnd = computed(() => {
|
||||
let max = (currentPage.value - 1) * pagination.value.pageSize + pagination.value.pageSize;
|
||||
if (max > entryCount.value) max = entryCount.value;
|
||||
return max;
|
||||
});
|
||||
const showingText = computed(() => `${entryCount.value != 0 ? showingStart.value + 1 : 0} - ${showingEnd.value}`);
|
||||
const displayedPagesNumbers = computed(() => {
|
||||
let stateOfPush = false;
|
||||
|
||||
return [...new Array(pagination.value.pageCount)].reduce((acc, curr, index) => {
|
||||
if (
|
||||
index <= 1 ||
|
||||
index >= pagination.value.pageCount - 2 ||
|
||||
(currentPage.value - 1 <= index && index <= currentPage.value + 1)
|
||||
) {
|
||||
acc.push(index);
|
||||
stateOfPush = false;
|
||||
return acc;
|
||||
}
|
||||
if (stateOfPush == true) return acc;
|
||||
acc.push(".");
|
||||
stateOfPush = true;
|
||||
|
||||
return acc;
|
||||
}, []);
|
||||
});
|
||||
|
||||
function getNumber(index: number): number {
|
||||
if (props.data?.lookup.items_with_number == "inverted") {
|
||||
return pagination.value.total - numberOffset.value - index;
|
||||
} else {
|
||||
return numberOffset.value + index + 1;
|
||||
}
|
||||
}
|
||||
|
||||
function getDate(index: number): string {
|
||||
let thisElement = collection.value?.[index];
|
||||
let beforeElement = collection.value?.[index - 1];
|
||||
|
||||
if (thisElement && beforeElement) {
|
||||
let thisElementDate = new Date(thisElement.date ?? "").toLocaleDateString("de", { month: "long" });
|
||||
let beforeElementDate = new Date(beforeElement.date ?? "").toLocaleDateString("de", { month: "long" });
|
||||
if (thisElementDate == beforeElementDate) return "";
|
||||
else return thisElementDate;
|
||||
} else if (thisElement) {
|
||||
return new Date(thisElement.date ?? "").toLocaleDateString("de", { month: "long" });
|
||||
} else return "";
|
||||
}
|
||||
|
||||
async function changeTimedData(year: number) {
|
||||
activeYear.value = year;
|
||||
const data = await find<BaseCollection>(props.data?.lookup.collection ?? "", {
|
||||
sort: "date:desc",
|
||||
filters: {
|
||||
date: {
|
||||
// @ts-ignore
|
||||
$between: [`${activeYear.value}-01-01 00:00:00.000000`, `${activeYear.value}-12-31 23:59:59.999`],
|
||||
},
|
||||
},
|
||||
pagination: {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
withCount: true,
|
||||
},
|
||||
});
|
||||
|
||||
collection.value = data?.data;
|
||||
pagination.value = (data?.meta.pagination as unknown as {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
pageCount: number;
|
||||
total: number;
|
||||
}) ?? {
|
||||
page: 0,
|
||||
pageSize: 0,
|
||||
pageCount: 0,
|
||||
total: 0,
|
||||
};
|
||||
}
|
||||
async function changeTimedPage(page: number = 1) {
|
||||
const data = await find<BaseCollection>(props.data?.lookup.collection ?? "", {
|
||||
sort: "date:desc",
|
||||
filters: {
|
||||
date: {
|
||||
// @ts-ignore
|
||||
$between: [`${activeYear.value}-01-01 00:00:00.000000`, `${activeYear.value}-12-31 23:59:59.999`],
|
||||
},
|
||||
},
|
||||
pagination: {
|
||||
page,
|
||||
pageSize: 10,
|
||||
withCount: true,
|
||||
},
|
||||
});
|
||||
|
||||
collection.value = data?.data;
|
||||
pagination.value = (data?.meta.pagination as unknown as {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
pageCount: number;
|
||||
total: number;
|
||||
}) ?? {
|
||||
page: 0,
|
||||
pageSize: 0,
|
||||
pageCount: 0,
|
||||
total: 0,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
26
app/composables/useGlobal.ts
Normal file
26
app/composables/useGlobal.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import type BaseFile from "~~/types/component/baseFile";
|
||||
import type Footer from "~~/types/component/global/footer";
|
||||
import type Navbar from "~~/types/component/global/navbar";
|
||||
import type SEO from "~~/types/component/global/seo";
|
||||
import type Global from "~~/types/single/global";
|
||||
|
||||
export const useGlobal = () => {
|
||||
const global = useState<Global | null>("global");
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const appTitle = runtimeConfig.public.app.title;
|
||||
|
||||
const logo = computed<BaseFile | null>(() => global.value?.logo ?? null);
|
||||
const navbar = computed<Navbar | null>(() => global.value?.navbar ?? null);
|
||||
const footer = computed<Footer | null>(() => global.value?.footer ?? null);
|
||||
const seo = computed<SEO | null>(() => global.value?.SEO ?? null);
|
||||
const title = computed<string>(() => seo.value?.metaTitle ?? appTitle);
|
||||
|
||||
return {
|
||||
logo,
|
||||
global,
|
||||
navbar,
|
||||
footer,
|
||||
seo,
|
||||
title,
|
||||
};
|
||||
};
|
||||
63
app/composables/useSitemap.ts
Normal file
63
app/composables/useSitemap.ts
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import type Page from "~~/types/collection/page";
|
||||
import type { ComponentTypes } from "~~/types/component/baseComponent";
|
||||
|
||||
export const useSitemap = () => {
|
||||
const { navbar, footer } = useGlobal();
|
||||
const pages = useState<Page[]>("sitemap_pages");
|
||||
|
||||
const sitemap = ref<sitemap>([]);
|
||||
|
||||
for (const element of navbar.value?.navbar_items ?? []) {
|
||||
if (!element.default_active_child) {
|
||||
sitemap.value.push({
|
||||
path: element.URL.startsWith("/") ? element.URL : `/${element.URL}`,
|
||||
origin: "navbar",
|
||||
document: element?.page?.documentId,
|
||||
hasCollection: element.page.content.filter((c: ComponentTypes) => c.__component == "shared.list").length != 0,
|
||||
});
|
||||
}
|
||||
for (const subelement of element.navbar_sub_items) {
|
||||
let url = `${element.URL}/${subelement.URL}`;
|
||||
sitemap.value.push({
|
||||
path: url.startsWith("/") ? url : `/${url}`,
|
||||
origin: "navbar",
|
||||
document: subelement?.page?.documentId,
|
||||
hasCollection:
|
||||
subelement?.page?.content.filter((c: ComponentTypes) => c.__component == "shared.list").length != 0,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
for (const element of pages.value) {
|
||||
let url = element.slug.replaceAll("~", "/");
|
||||
if (!sitemap.value.find((a) => a.path == url)) {
|
||||
sitemap.value.push({
|
||||
path: url.startsWith("/") ? url : `/${url}`,
|
||||
origin: "page",
|
||||
document: element.documentId,
|
||||
hasCollection: element.content.filter((c: ComponentTypes) => c.__component == "shared.list").length != 0,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
for (const element of footer.value?.links ?? []) {
|
||||
let url = element.URL.startsWith("/") ? element.URL : `/${element.URL}`;
|
||||
if (!sitemap.value.find((a) => a.path == url) && !element.URL.startsWith("http")) {
|
||||
sitemap.value.push({
|
||||
path: url,
|
||||
origin: "footer",
|
||||
document: undefined,
|
||||
hasCollection: undefined,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return sitemap;
|
||||
};
|
||||
|
||||
type sitemap = Array<{
|
||||
path: string;
|
||||
origin: string;
|
||||
document?: string;
|
||||
hasCollection?: boolean;
|
||||
}>;
|
||||
5
app/layouts/default.vue
Normal file
5
app/layouts/default.vue
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<Header />
|
||||
<slot />
|
||||
<Footer />
|
||||
</template>
|
||||
39
app/layouts/landing.vue
Normal file
39
app/layouts/landing.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<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 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 p-2 box-content rounded-full bg-white cursor-pointer"
|
||||
src="/chevrons-down.svg"
|
||||
@click="scroll()"
|
||||
/>
|
||||
</div>
|
||||
<Header />
|
||||
<slot />
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type Homepage from "~~/types/single/homepage";
|
||||
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const baseUrl = runtimeConfig.public.strapi.url;
|
||||
const { findOne } = useStrapi();
|
||||
|
||||
const { logo } = useGlobal();
|
||||
|
||||
const { data: homepage } = await useAsyncData("homepage", () => findOne<Homepage>("homepage"));
|
||||
const { backdrop } = homepage.value?.data ?? {};
|
||||
|
||||
function scroll() {
|
||||
window.scrollTo({ top: window.innerHeight - 96, behavior: "smooth" });
|
||||
}
|
||||
</script>
|
||||
134
app/pages/[...slug].vue
Normal file
134
app/pages/[...slug].vue
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
<template>
|
||||
<NuxtLayout name="default">
|
||||
<NotFound v-if="notFound" />
|
||||
<ContentBuilder v-else-if="showContentBuilder" :hero="page?.hero" :content="page?.content" />
|
||||
<CollectionDetail v-else :data="detail" />
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type Article from "~~/types/collection/article";
|
||||
import type Event from "~~/types/collection/event";
|
||||
import type Operation from "~~/types/collection/operation";
|
||||
import type Vehicle from "~~/types/collection/vehicle";
|
||||
import type Page from "~~/types/collection/page";
|
||||
|
||||
const {
|
||||
params: { slug: params },
|
||||
} = useRoute();
|
||||
const { findOne, find } = useStrapi();
|
||||
|
||||
const sitemap = useSitemap();
|
||||
|
||||
const detail = ref<Article | Operation | Event | Vehicle | undefined>(undefined);
|
||||
|
||||
const activePath = computed(() => {
|
||||
return "/" + (Array.isArray(params) ? params.join("/") : params);
|
||||
});
|
||||
const activePageBySitemap = computed(() => {
|
||||
return sitemap.value.find((s) => s.path == activePath.value);
|
||||
});
|
||||
const similarestPage = computed(() => {
|
||||
return sitemap.value.reduce(
|
||||
(bestMatch, current) => {
|
||||
const currentMatchLength = current.path
|
||||
.split("/")
|
||||
.filter(
|
||||
(segment, index) => segment != "" && segment.trim() == activePath.value.split("/")[index]?.trim()
|
||||
).length;
|
||||
const bestMatchLength = bestMatch.path
|
||||
.split("/")
|
||||
.filter(
|
||||
(segment, index) => segment != "" && segment.trim() == activePath.value.split("/")[index]?.trim()
|
||||
).length;
|
||||
|
||||
if (currentMatchLength > bestMatchLength) {
|
||||
return current;
|
||||
} else {
|
||||
return bestMatch;
|
||||
}
|
||||
},
|
||||
{ path: "", origin: "", hasCollection: false }
|
||||
);
|
||||
});
|
||||
|
||||
const { data: pages } = await useAsyncData(
|
||||
activePath,
|
||||
() =>
|
||||
findOne<Page | Array<Page>>("pages", similarestPage.value?.document, {
|
||||
populate: {
|
||||
content: {
|
||||
populate: "*",
|
||||
},
|
||||
hero: {
|
||||
populate: "*",
|
||||
},
|
||||
},
|
||||
filters: !similarestPage.value?.document
|
||||
? {
|
||||
slug: { $eq: Array.isArray(params) ? params.join("~") : params ?? "" },
|
||||
ref_only_access: { $eq: false },
|
||||
}
|
||||
: {},
|
||||
}),
|
||||
{
|
||||
default: () => null,
|
||||
watch: [activePath],
|
||||
}
|
||||
);
|
||||
const page = computed(() => {
|
||||
return Array.isArray(pages.value?.data) ? pages.value.data[0] : pages.value?.data;
|
||||
});
|
||||
|
||||
const isCollectionDetail = computed(() => {
|
||||
return activePath.value != similarestPage.value.path && similarestPage.value.hasCollection;
|
||||
});
|
||||
|
||||
const notFound = computed(() => {
|
||||
if (isCollectionDetail.value && detail.value) return !detail.value;
|
||||
else
|
||||
return (
|
||||
!page.value ||
|
||||
(page.value && !(page.value.content.length != 0 || page.value.hero.title || page.value.hero.banner))
|
||||
);
|
||||
});
|
||||
|
||||
const showContentBuilder = computed(() => {
|
||||
if (isCollectionDetail.value && detail.value) return !detail.value;
|
||||
else return page.value && (page.value.content.length != 0 || page.value.hero.title || page.value.hero.banner);
|
||||
});
|
||||
|
||||
if (isCollectionDetail) {
|
||||
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 detailKey = `detail-${element}-${activePath.value.substring(activePath.value.lastIndexOf("/") + 1)}`;
|
||||
const { data: details } = await useAsyncData(
|
||||
detailKey,
|
||||
() =>
|
||||
find<Article | Operation | Event | Vehicle>(element ?? "", {
|
||||
populate: "*",
|
||||
filters: {
|
||||
slug: {
|
||||
$eq: activePath.value.substring(activePath.value.lastIndexOf("/") + 1),
|
||||
},
|
||||
},
|
||||
}),
|
||||
{
|
||||
watch: [activePath],
|
||||
}
|
||||
);
|
||||
if (details.value?.data[0]) {
|
||||
detail.value = details.value?.data[0];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
14
app/pages/index.vue
Normal file
14
app/pages/index.vue
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<NuxtLayout name="landing">
|
||||
<ContentBuilder :content="content" />
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type Homepage from "~~/types/single/homepage";
|
||||
|
||||
const { findOne } = useStrapi();
|
||||
|
||||
const { data: homepage } = await useAsyncData("homepage", () => findOne<Homepage>("homepage"));
|
||||
const { content } = homepage.value?.data ?? {};
|
||||
</script>
|
||||
15
app/pages/sitemap.vue
Normal file
15
app/pages/sitemap.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<NuxtLayout name="default">
|
||||
<div class="min-h-[calc(100vh-9rem)] w-full">
|
||||
<div class="container mx-auto py-12 px-2 min-h-[50vh] flex flex-col gap-2">
|
||||
<NuxtLink v-for="item in sitemap" :key="item.path" :to="`${item.path}`">
|
||||
{{ item.path }} {{ item.hasCollection ? "(...)" : "" }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const sitemap = useSitemap();
|
||||
</script>
|
||||
15
app/plugins/global.ts
Normal file
15
app/plugins/global.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import type Global from "~~/types/single/global";
|
||||
|
||||
export default defineNuxtPlugin(async (nuxtApp) => {
|
||||
const globalState = useState<Global | null>("global", () => null);
|
||||
|
||||
if (!globalState.value) {
|
||||
const { findOne } = useStrapi();
|
||||
const { data: global } = await useAsyncData("global", () => findOne<Global>("global"), {
|
||||
server: true,
|
||||
lazy: false,
|
||||
default: () => {},
|
||||
});
|
||||
globalState.value = global.value?.data ?? null;
|
||||
}
|
||||
});
|
||||
33
app/plugins/sitemap.ts
Normal file
33
app/plugins/sitemap.ts
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import type Page from "~~/types/collection/page";
|
||||
import type Global from "~~/types/single/global";
|
||||
|
||||
export default defineNuxtPlugin(async (nuxtApp) => {
|
||||
const pageState = useState<Page[]>("sitemap_pages", () => []);
|
||||
|
||||
if (pageState.value.length == 0) {
|
||||
const { find } = useStrapi();
|
||||
const { data: page_res } = await useAsyncData(
|
||||
"sitemap_pages",
|
||||
() =>
|
||||
find<Page>("pages", {
|
||||
filters: {
|
||||
//@ts-ignore
|
||||
$or: [
|
||||
{
|
||||
ref_only_access: { $eq: false },
|
||||
},
|
||||
{
|
||||
ref_only_access: { $null: true },
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
{
|
||||
server: true,
|
||||
lazy: false,
|
||||
default: () => {},
|
||||
}
|
||||
);
|
||||
pageState.value = page_res.value?.data ?? [];
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue