Compare commits
No commits in common. "main" and "v1.0.3" have entirely different histories.
21 changed files with 27 additions and 119 deletions
|
@ -1,12 +1,12 @@
|
||||||
# ff-webpage
|
# ff-webpage
|
||||||
|
|
||||||
Feuerwehr Webseite zu Strapi Content Management
|
Feuerwehr Webseite zu Strapi Contnet Management
|
||||||
|
|
||||||
## Einleitung
|
## Einleitung
|
||||||
|
|
||||||
Dieses Repository dient zur dynamischen Erstellung von Webseiten. Es ist ein Frontend-Client, der auf die Daten des [Strapi Content Management Systems (CMS)](https://forgejo.jk-effects.cloud/Ehrenamt/ff-webpage-cms) zugreift. Die Webseite wird mit Nuxt.js erstellt und bietet eine benutzerfreundliche Oberfläche für die Anzeige von Inhalten. Die Webseite ist für Feuerwehren konzipiert und bietet eine einfache Möglichkeit, Informationen zu veröffentlichen und zu verwalten.
|
Dieses Repository dient zur dynamischen Erstellung von Webseiten. Es ist ein Frontend-Client, der auf die Daten des [Strapi Content Management Systems (CMS)](https://forgejo.jk-effects.cloud/Ehrenamt/ff-webpage-cms) zugreift. Die Webseite wird mit Nuxt.js erstellt und bietet eine benutzerfreundliche Oberfläche für die Anzeige von Inhalten. Die Webseite ist für Feuerwehren konzipiert und bietet eine einfache Möglichkeit, Informationen zu veröffentlichen und zu verwalten.
|
||||||
|
|
||||||
Eine Demo dieser Seite finden Sie unter [https://webpage-demo.ff-admin.de](https://webpage-demo.ff-admin.de).
|
Eine Demo dieser Seite finden Sie unter [https://ff-demo.jk-effects.cloud](https://ff-demo.jk-effects.cloud).
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
|
|
|
@ -9,8 +9,6 @@
|
||||||
<DynamicZoneFullImage v-else-if="item.__component == 'dynamic-zone.full-image'" :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" />
|
<DynamicZoneFullText v-else-if="item.__component == 'dynamic-zone.full-text'" :data="item" />
|
||||||
<DynamicZoneGallery v-else-if="item.__component == 'dynamic-zone.gallery'" :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" />
|
<SharedList v-else-if="item.__component == 'shared.list'" :data="item" />
|
||||||
<br />
|
<br />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,15 +0,0 @@
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import type { PropType } from "vue";
|
|
||||||
import type DynamicZoneEmbedding from "../../types/component/dynamicZoneEmbedding";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
data: Object as PropType<DynamicZoneEmbedding>,
|
|
||||||
});
|
|
||||||
</script>
|
|
|
@ -1,42 +0,0 @@
|
||||||
<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>
|
|
||||||
<NuxtPicture
|
|
||||||
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"
|
|
||||||
target="_blank"
|
|
||||||
class="w-fit text-primary underline"
|
|
||||||
>
|
|
||||||
Datei herunterladen
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import type { PropType } from "vue";
|
|
||||||
import type DynamicZoneFileDownload from "../../types/component/dynamicZoneFileDownload";
|
|
||||||
|
|
||||||
const runtimeConfig = useRuntimeConfig();
|
|
||||||
const baseUrl = runtimeConfig.public.strapi.url;
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
data: Object as PropType<DynamicZoneFileDownload>,
|
|
||||||
});
|
|
||||||
|
|
||||||
const showComponent = computed(() => {
|
|
||||||
if (props.data.file.mime == "application/pdf" || props.data.file.mime.includes("image")) {
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
return props.data.enable_download;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="!hide_backdrop" class="relative h-[calc(100svh-6rem)] max-h-[calc(100svh-6rem)] w-full overflow-hidden">
|
<div class="relative h-[calc(100svh-6rem)] max-h-[calc(100svh-6rem)] w-full overflow-hidden">
|
||||||
<NuxtPicture
|
<NuxtPicture
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="w-full h-full object-cover object-center"
|
class="w-full h-full object-cover object-center"
|
||||||
|
@ -7,11 +7,6 @@
|
||||||
:imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
|
: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 class="absolute p-4 max-sm:w-full sm:h-40 bottom-5" :src="baseUrl + navbar.logo.url" />
|
||||||
<img
|
|
||||||
class="absolute h-5 w-5 left-1/2 -translate-y-1/2 bottom-5 text-gray-400 cursor-pointer"
|
|
||||||
src="/chevrons-down.svg"
|
|
||||||
@click="scroll()"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<Header />
|
<Header />
|
||||||
<slot />
|
<slot />
|
||||||
|
@ -33,9 +28,5 @@ const { data: global } = await useAsyncData("global", () => findOne<Global>("glo
|
||||||
const { navbar } = global.value?.data as unknown as Global;
|
const { navbar } = global.value?.data as unknown as Global;
|
||||||
|
|
||||||
const { data: homepage } = await useAsyncData("homepage", () => findOne<Homepage>("homepage"));
|
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 as unknown as Homepage;
|
||||||
|
|
||||||
function scroll() {
|
|
||||||
window.scrollTo({ top: window.innerHeight - 96, behavior: "smooth" });
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
4
package-lock.json
generated
4
package-lock.json
generated
|
@ -1,12 +1,12 @@
|
||||||
{
|
{
|
||||||
"name": "nuxt-app",
|
"name": "nuxt-app",
|
||||||
"version": "1.1.0",
|
"version": "1.0.3",
|
||||||
"lockfileVersion": 2,
|
"lockfileVersion": 2,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "nuxt-app",
|
"name": "nuxt-app",
|
||||||
"version": "1.1.0",
|
"version": "1.0.3",
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nuxt/image": "^1.8.1",
|
"@nuxt/image": "^1.8.1",
|
||||||
|
|
|
@ -21,5 +21,5 @@
|
||||||
"postcss": "^8.4.47",
|
"postcss": "^8.4.47",
|
||||||
"tailwindcss": "^3.4.14"
|
"tailwindcss": "^3.4.14"
|
||||||
},
|
},
|
||||||
"version": "1.1.0"
|
"version": "1.0.3"
|
||||||
}
|
}
|
||||||
|
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-down"><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>
|
|
Before Width: | Height: | Size: 317 B |
|
@ -1,4 +1,4 @@
|
||||||
import type BaseFile from "../component/baseFile";
|
import type BaseImage from "../component/baseImage";
|
||||||
import type BaseCollection from "./baseCollection";
|
import type BaseCollection from "./baseCollection";
|
||||||
|
|
||||||
export default interface Article extends BaseCollection {}
|
export default interface Article extends BaseCollection {}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import type BaseFile from "../component/baseFile";
|
import type BaseImage from "../component/baseImage";
|
||||||
import type ContentField from "../field/content";
|
import type ContentField from "../field/content";
|
||||||
|
|
||||||
export default interface BaseCollection {
|
export default interface BaseCollection {
|
||||||
|
@ -14,6 +14,6 @@ export default interface BaseCollection {
|
||||||
description: string;
|
description: string;
|
||||||
date: string | undefined;
|
date: string | undefined;
|
||||||
content: ContentField | undefined;
|
content: ContentField | undefined;
|
||||||
image: BaseFile | undefined;
|
image: BaseImage | undefined;
|
||||||
attachment: Array<BaseFile>;
|
attachment: Array<BaseImage>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import type BaseFile from "../component/baseFile";
|
import type BaseImage from "../component/baseImage";
|
||||||
import type BaseCollection from "./baseCollection";
|
import type BaseCollection from "./baseCollection";
|
||||||
|
|
||||||
export default interface Vehicle extends BaseCollection {
|
export default interface Vehicle extends BaseCollection {
|
||||||
|
|
|
@ -4,9 +4,7 @@ import type DynamicZoneEmphasiseArticle from "./dynamicZoneEmphasiseArticle";
|
||||||
import type DynamicZoneFullImage from "./dynamicZoneFullImage";
|
import type DynamicZoneFullImage from "./dynamicZoneFullImage";
|
||||||
import type DynamicZoneFullText from "./dynamicZoneFullText";
|
import type DynamicZoneFullText from "./dynamicZoneFullText";
|
||||||
import type DynamicZoneGallery from "./dynamicZoneGallery";
|
import type DynamicZoneGallery from "./dynamicZoneGallery";
|
||||||
import type DynamicZoneFileDownload from "./dynamicZoneFileDownload";
|
|
||||||
import type SharedList from "./sharedList";
|
import type SharedList from "./sharedList";
|
||||||
import type DynamicZoneEmbedding from "./dynamicZoneEmbedding";
|
|
||||||
|
|
||||||
export default interface BaseComponent {
|
export default interface BaseComponent {
|
||||||
__component: ComponentNames;
|
__component: ComponentNames;
|
||||||
|
@ -20,9 +18,7 @@ export type ComponentNames =
|
||||||
| "dynamic-zone.full-image"
|
| "dynamic-zone.full-image"
|
||||||
| "dynamic-zone.emphasise-article"
|
| "dynamic-zone.emphasise-article"
|
||||||
| "dynamic-zone.dual-column-text"
|
| "dynamic-zone.dual-column-text"
|
||||||
| "dynamic-zone.column-image-text"
|
| "dynamic-zone.column-image-text";
|
||||||
| "dynamic-zone.file-download"
|
|
||||||
| "dynamic-zone.embedding";
|
|
||||||
|
|
||||||
export type ComponentTypes =
|
export type ComponentTypes =
|
||||||
| SharedList
|
| SharedList
|
||||||
|
@ -31,6 +27,4 @@ export type ComponentTypes =
|
||||||
| DynamicZoneFullImage
|
| DynamicZoneFullImage
|
||||||
| DynamicZoneEmphasiseArticle
|
| DynamicZoneEmphasiseArticle
|
||||||
| DynamicZoneDualColumnText
|
| DynamicZoneDualColumnText
|
||||||
| DynamicZoneColumnImageText
|
| DynamicZoneColumnImageText;
|
||||||
| DynamicZoneFileDownload
|
|
||||||
| DynamicZoneEmbedding;
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
export default interface BaseFile {
|
export default interface BaseImage {
|
||||||
id: number;
|
id: number;
|
||||||
documentId: string;
|
documentId: string;
|
||||||
name: string;
|
name: string;
|
|
@ -1,10 +1,10 @@
|
||||||
import type ContentField from "../field/content";
|
import type ContentField from "../field/content";
|
||||||
import type BaseComponent from "./baseComponent";
|
import type BaseComponent from "./baseComponent";
|
||||||
import type BaseFile from "./baseFile";
|
import type BaseImage from "./baseImage";
|
||||||
|
|
||||||
export default interface DynamicZoneColumnImageText extends BaseComponent {
|
export default interface DynamicZoneColumnImageText extends BaseComponent {
|
||||||
__component: "dynamic-zone.column-image-text";
|
__component: "dynamic-zone.column-image-text";
|
||||||
text: ContentField;
|
text: ContentField;
|
||||||
image_left: boolean;
|
image_left: boolean;
|
||||||
image: BaseFile;
|
image: BaseImage;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +0,0 @@
|
||||||
import type BaseComponent from "./baseComponent";
|
|
||||||
|
|
||||||
export default interface DynamicZoneEmbedding extends BaseComponent {
|
|
||||||
__component: "dynamic-zone.embedding";
|
|
||||||
title: string;
|
|
||||||
link: string;
|
|
||||||
}
|
|
|
@ -1,9 +0,0 @@
|
||||||
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;
|
|
||||||
}
|
|
|
@ -1,7 +1,7 @@
|
||||||
import type BaseComponent from "./baseComponent";
|
import type BaseComponent from "./baseComponent";
|
||||||
import type BaseFile from "./baseFile";
|
import type BaseImage from "./baseImage";
|
||||||
|
|
||||||
export default interface DynamicZoneFullImage extends BaseComponent {
|
export default interface DynamicZoneFullImage extends BaseComponent {
|
||||||
__component: "dynamic-zone.full-image";
|
__component: "dynamic-zone.full-image";
|
||||||
image: BaseFile;
|
image: BaseImage;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import type BaseComponent from "./baseComponent";
|
import type BaseComponent from "./baseComponent";
|
||||||
import type BaseFile from "./baseFile";
|
import type BaseImage from "./baseImage";
|
||||||
|
|
||||||
export default interface DynamicZoneGallery extends BaseComponent {
|
export default interface DynamicZoneGallery extends BaseComponent {
|
||||||
__component: "dynamic-zone.gallery";
|
__component: "dynamic-zone.gallery";
|
||||||
images: Array<BaseFile>;
|
images: Array<BaseImage>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import type BaseFile from "./baseFile";
|
import type BaseImage from "./baseImage";
|
||||||
import type NavbarItem from "./itemsNavbarItem";
|
import type NavbarItem from "./itemsNavbarItem";
|
||||||
|
|
||||||
export default interface Navbar {
|
export default interface Navbar {
|
||||||
id: number;
|
id: number;
|
||||||
logo: BaseFile;
|
logo: BaseImage;
|
||||||
navbar_items: NavbarItem[];
|
navbar_items: NavbarItem[];
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import type BaseFile from "./baseFile";
|
import type BaseImage from "./baseImage";
|
||||||
|
|
||||||
export default interface SharedHero {
|
export default interface SharedHero {
|
||||||
id: number;
|
id: number;
|
||||||
title: string;
|
title: string;
|
||||||
banner: BaseFile;
|
banner: BaseImage;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import type BaseFile from "../component/baseFile";
|
import type BaseImage from "../component/baseImage";
|
||||||
import type { ComponentTypes } from "../component/baseComponent";
|
import type { ComponentTypes } from "../component/baseComponent";
|
||||||
|
|
||||||
export default interface Homepage {
|
export default interface Homepage {
|
||||||
|
@ -8,7 +8,6 @@ export default interface Homepage {
|
||||||
updatedAt: string;
|
updatedAt: string;
|
||||||
publishedAt: string;
|
publishedAt: string;
|
||||||
locale: string;
|
locale: string;
|
||||||
backdrop: BaseFile;
|
backdrop: BaseImage;
|
||||||
hide_backdrop: boolean;
|
|
||||||
content: Array<ComponentTypes>;
|
content: Array<ComponentTypes>;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue