872 lines
27 KiB
TypeScript
872 lines
27 KiB
TypeScript
import type { Page } from "../../../types/cms/Page";
|
|
import type { HTMLSkeleton } from "../../../types/cms/Html";
|
|
import type { MarkdownSkeleton } from "../../../types/cms/Markdown";
|
|
import type { ComponentIframeSkeleton } from "../../../types/cms/Iframe";
|
|
import type { ImageGallerySkeleton } from "../../../types/cms/ImageGallery";
|
|
import type { ComponentImageSkeleton } from "../../../types/cms/Image";
|
|
import type { QuoteSkeleton } from "../../../types/cms/Quote";
|
|
import type { ComponentYoutubeVideoSkeleton } from "../../../types/cms/YoutubeVideo";
|
|
import type { ComponentHeadlineSkeleton } from "../../../types/cms/Headline";
|
|
import type { ComponentImgSkeleton } from "../../../types/cms/Img";
|
|
import { ContentType } from "../../../types/cms/ContentType.enum";
|
|
import { FullwidthBannerVariant } from "../../../types/cms/FullwidthBanner";
|
|
|
|
/**
|
|
* Erstellt eine Mock HTML-Komponente
|
|
*/
|
|
function createMockHTML(
|
|
id: string,
|
|
html: string,
|
|
mobile: string = "12",
|
|
tablet?: string,
|
|
desktop?: string,
|
|
spaceBottom?: number
|
|
): HTMLSkeleton {
|
|
return {
|
|
contentTypeId: ContentType.html,
|
|
fields: {
|
|
id,
|
|
html,
|
|
layout: {
|
|
mobile: mobile as any,
|
|
tablet: tablet as any,
|
|
desktop: desktop as any,
|
|
spaceBottom: spaceBottom as any,
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Erstellt eine Mock Markdown-Komponente
|
|
*/
|
|
function createMockMarkdown(
|
|
name: string,
|
|
content: string,
|
|
alignment: "left" | "center" | "right" = "left",
|
|
mobile: string = "12",
|
|
tablet?: string,
|
|
desktop?: string,
|
|
spaceBottom?: number
|
|
): MarkdownSkeleton {
|
|
return {
|
|
contentTypeId: ContentType.markdown,
|
|
fields: {
|
|
name,
|
|
content,
|
|
alignment,
|
|
layout: {
|
|
mobile: mobile as any,
|
|
tablet: tablet as any,
|
|
desktop: desktop as any,
|
|
spaceBottom: spaceBottom as any,
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Erstellt eine Mock-Image-Komponente
|
|
*/
|
|
function createMockImage(
|
|
title: string,
|
|
description: string,
|
|
url: string
|
|
): ComponentImgSkeleton {
|
|
return {
|
|
contentTypeId: ContentType.img,
|
|
fields: {
|
|
title,
|
|
description,
|
|
file: {
|
|
url,
|
|
details: {
|
|
size: 100000,
|
|
image: {
|
|
width: 800,
|
|
height: 600,
|
|
},
|
|
},
|
|
fileName: `${title.toLowerCase().replace(/\s+/g, "-")}.jpg`,
|
|
contentType: "image/jpeg",
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Erstellt eine Mock Iframe-Komponente
|
|
*/
|
|
function createMockIframe(
|
|
name: string,
|
|
content: string,
|
|
iframe: string,
|
|
overlayImageUrl?: string,
|
|
mobile: string = "12",
|
|
tablet?: string,
|
|
desktop?: string,
|
|
spaceBottom?: number
|
|
): ComponentIframeSkeleton {
|
|
return {
|
|
contentTypeId: ContentType.iframe,
|
|
fields: {
|
|
name,
|
|
content,
|
|
iframe,
|
|
overlayImage: overlayImageUrl
|
|
? createMockImage(name, "Overlay Image", overlayImageUrl)
|
|
: undefined,
|
|
layout: {
|
|
mobile: mobile as any,
|
|
tablet: tablet as any,
|
|
desktop: desktop as any,
|
|
spaceBottom: spaceBottom as any,
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Erstellt eine Mock ImageGallery-Komponente
|
|
*/
|
|
function createMockImageGallery(
|
|
name: string,
|
|
images: Array<{ title: string; description?: string; url: string }>,
|
|
description?: string,
|
|
mobile: string = "12",
|
|
tablet?: string,
|
|
desktop?: string,
|
|
spaceBottom?: number
|
|
): ImageGallerySkeleton {
|
|
return {
|
|
contentTypeId: ContentType.imgGallery,
|
|
fields: {
|
|
name,
|
|
images: images.map((img) =>
|
|
createMockImage(img.title, img.description || "", img.url)
|
|
),
|
|
description,
|
|
layout: {
|
|
mobile: mobile as any,
|
|
tablet: tablet as any,
|
|
desktop: desktop as any,
|
|
spaceBottom: spaceBottom as any,
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Erstellt eine Mock Image-Komponente
|
|
*/
|
|
function createMockImageComponent(
|
|
name: string,
|
|
imageUrl: string,
|
|
caption: string,
|
|
maxWidth?: number,
|
|
aspectRatio?: number,
|
|
mobile: string = "12",
|
|
tablet?: string,
|
|
desktop?: string,
|
|
spaceBottom?: number
|
|
): ComponentImageSkeleton {
|
|
return {
|
|
contentTypeId: ContentType.image,
|
|
fields: {
|
|
name,
|
|
image: createMockImage(name, caption, imageUrl),
|
|
caption,
|
|
maxWidth,
|
|
aspectRatio,
|
|
layout: {
|
|
mobile: mobile as any,
|
|
tablet: tablet as any,
|
|
desktop: desktop as any,
|
|
spaceBottom: spaceBottom as any,
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Erstellt eine Mock Quote-Komponente
|
|
*/
|
|
function createMockQuote(
|
|
quote: string,
|
|
author: string,
|
|
variant: "left" | "right" = "left",
|
|
mobile: string = "12",
|
|
tablet?: string,
|
|
desktop?: string,
|
|
spaceBottom?: number
|
|
): QuoteSkeleton {
|
|
return {
|
|
contentTypeId: ContentType.quote,
|
|
fields: {
|
|
quote,
|
|
author,
|
|
variant,
|
|
layout: {
|
|
mobile: mobile as any,
|
|
tablet: tablet as any,
|
|
desktop: desktop as any,
|
|
spaceBottom: spaceBottom as any,
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Erstellt eine Mock YouTube-Video-Komponente
|
|
*/
|
|
function createMockYoutubeVideo(
|
|
id: string,
|
|
youtubeId: string,
|
|
params?: string,
|
|
title?: string,
|
|
description?: string,
|
|
mobile: string = "12",
|
|
tablet?: string,
|
|
desktop?: string,
|
|
spaceBottom?: number
|
|
): ComponentYoutubeVideoSkeleton {
|
|
return {
|
|
contentTypeId: ContentType.youtubeVideo,
|
|
fields: {
|
|
id,
|
|
youtubeId,
|
|
params,
|
|
title,
|
|
description,
|
|
layout: {
|
|
mobile: mobile as any,
|
|
tablet: tablet as any,
|
|
desktop: desktop as any,
|
|
spaceBottom: spaceBottom as any,
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Erstellt eine Mock Headline-Komponente
|
|
*/
|
|
function createMockHeadline(
|
|
internal: string,
|
|
text: string,
|
|
tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" = "h2",
|
|
align?: "left" | "center" | "right",
|
|
mobile: string = "12",
|
|
tablet?: string,
|
|
desktop?: string,
|
|
spaceBottom?: number
|
|
): ComponentHeadlineSkeleton {
|
|
return {
|
|
contentTypeId: ContentType.headline,
|
|
fields: {
|
|
internal,
|
|
text,
|
|
tag,
|
|
align,
|
|
layout: {
|
|
mobile: mobile as any,
|
|
tablet: tablet as any,
|
|
desktop: desktop as any,
|
|
spaceBottom: spaceBottom as any,
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Generiert Mock-Seiten mit locale-spezifischen Inhalten
|
|
* @param locale - Die gewünschte Locale ("de" oder "en")
|
|
* @returns Record von Seiten mit locale-spezifischen Inhalten
|
|
*/
|
|
export function generateMockPages(locale: string = "de"): Record<string, Page> {
|
|
const isEn = locale === "en";
|
|
|
|
return {
|
|
"/": {
|
|
slug: "/",
|
|
name: isEn ? "Home" : "Home",
|
|
linkName: isEn ? "Home" : "Startseite",
|
|
headline: isEn
|
|
? "Welcome to our website"
|
|
: "Willkommen auf unserer Website",
|
|
subheadline: isEn
|
|
? "Discover our products and services"
|
|
: "Entdecken Sie unsere Produkte und Dienstleistungen",
|
|
seoTitle: isEn ? "Home - Welcome" : "Home - Willkommen",
|
|
seoMetaRobots: "index, follow",
|
|
seoDescription: isEn
|
|
? "Welcome to our website. Discover our products and services."
|
|
: "Willkommen auf unserer Website. Entdecken Sie unsere Produkte und Dienstleistungen.",
|
|
row1JustifyContent: "center",
|
|
row1AlignItems: "center",
|
|
row1Content: [
|
|
createMockMarkdown(
|
|
"welcome-intro",
|
|
isEn
|
|
? "# Welcome\n\nThis is a **markdown** component showcasing our content system.\n\n- Feature 1\n- Feature 2\n- Feature 3"
|
|
: "# Willkommen\n\nDies ist eine **Markdown**-Komponente, die unser Content-System zeigt.\n\n- Funktion 1\n- Funktion 2\n- Funktion 3",
|
|
"center",
|
|
"12",
|
|
"10",
|
|
"8",
|
|
2
|
|
),
|
|
],
|
|
row2JustifyContent: "start",
|
|
row2AlignItems: "start",
|
|
row2Content: [
|
|
createMockHTML(
|
|
"intro-html",
|
|
isEn
|
|
? '<div class="p-4 bg-blue-50 rounded-lg"><h2 class="text-2xl font-bold mb-2">HTML Content</h2><p>This is an HTML component with custom styling.</p></div>'
|
|
: '<div class="p-4 bg-blue-50 rounded-lg"><h2 class="text-2xl font-bold mb-2">HTML Inhalt</h2><p>Dies ist eine HTML-Komponente mit benutzerdefiniertem Styling.</p></div>',
|
|
"12",
|
|
"6",
|
|
"6",
|
|
1.5
|
|
),
|
|
createMockMarkdown(
|
|
"features",
|
|
isEn
|
|
? "## Features\n\n- Fast and reliable\n- Modern technology\n- Great support"
|
|
: "## Funktionen\n\n- Schnell und zuverlässig\n- Moderne Technologie\n- Großer Support",
|
|
"left",
|
|
"12",
|
|
"6",
|
|
"6",
|
|
1.5
|
|
),
|
|
],
|
|
row3JustifyContent: "start",
|
|
row3AlignItems: "start",
|
|
row3Content: [
|
|
createMockMarkdown(
|
|
"footer-note",
|
|
isEn
|
|
? "---\n\n*Thank you for visiting our website!*"
|
|
: "---\n\n*Vielen Dank für Ihren Besuch auf unserer Website!*",
|
|
"center",
|
|
"12",
|
|
"8",
|
|
"6"
|
|
),
|
|
],
|
|
topFullwidthBanner: {
|
|
contentTypeId: ContentType.fullwidthBanner,
|
|
fields: {
|
|
name: "home-banner",
|
|
variant: FullwidthBannerVariant.light,
|
|
headline: isEn ? "Welcome" : "Herzlich Willkommen",
|
|
subheadline: isEn
|
|
? "Your solution for all needs"
|
|
: "Ihre Lösung für alle Bedürfnisse",
|
|
text: isEn
|
|
? "Discover our diverse range of offerings and find exactly what you're looking for."
|
|
: "Entdecken Sie unsere vielfältigen Angebote und finden Sie genau das, was Sie suchen.",
|
|
image: [],
|
|
img: {
|
|
contentTypeId: ContentType.img,
|
|
fields: {
|
|
title: isEn ? "Home Banner" : "Home Banner",
|
|
description: isEn
|
|
? "Banner for the homepage"
|
|
: "Banner für die Startseite",
|
|
file: {
|
|
url: "https://picsum.photos/1200/400?random=home",
|
|
details: {
|
|
size: 45678,
|
|
image: {
|
|
width: 1200,
|
|
height: 400,
|
|
},
|
|
},
|
|
fileName: "home-banner.jpg",
|
|
contentType: "image/jpeg",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
"/about": {
|
|
slug: "/about",
|
|
name: isEn ? "About Us" : "Über uns",
|
|
linkName: isEn ? "About Us" : "Über uns",
|
|
headline: isEn ? "About Us" : "Über uns",
|
|
subheadline: isEn
|
|
? "Get to know us better"
|
|
: "Lernen Sie uns besser kennen",
|
|
seoTitle: isEn ? "About Us - Our Story" : "Über uns - Unsere Geschichte",
|
|
seoMetaRobots: "index, follow",
|
|
seoDescription: isEn
|
|
? "Learn more about our company, our values and our mission."
|
|
: "Erfahren Sie mehr über unsere Firma, unsere Werte und unsere Mission.",
|
|
row1JustifyContent: "start",
|
|
row1AlignItems: "start",
|
|
row1Content: [
|
|
createMockMarkdown(
|
|
"about-intro",
|
|
isEn
|
|
? "# Our Story\n\nWe are a company dedicated to providing excellent service and innovative solutions."
|
|
: "# Unsere Geschichte\n\nWir sind ein Unternehmen, das sich der Bereitstellung exzellenter Dienstleistungen und innovativer Lösungen widmet.",
|
|
"left",
|
|
"12",
|
|
"8",
|
|
"8"
|
|
),
|
|
],
|
|
row2JustifyContent: "between",
|
|
row2AlignItems: "start",
|
|
row2Content: [
|
|
createMockHTML(
|
|
"mission",
|
|
isEn
|
|
? '<div class="p-6 border-l-4 border-blue-500"><h3 class="text-xl font-semibold mb-2">Our Mission</h3><p>To deliver exceptional value to our customers.</p></div>'
|
|
: '<div class="p-6 border-l-4 border-blue-500"><h3 class="text-xl font-semibold mb-2">Unsere Mission</h3><p>Außergewöhnlichen Mehrwert für unsere Kunden zu schaffen.</p></div>',
|
|
"12",
|
|
"5",
|
|
"5",
|
|
1
|
|
),
|
|
createMockHTML(
|
|
"vision",
|
|
isEn
|
|
? '<div class="p-6 border-l-4 border-green-500"><h3 class="text-xl font-semibold mb-2">Our Vision</h3><p>To be the leading provider in our industry.</p></div>'
|
|
: '<div class="p-6 border-l-4 border-green-500"><h3 class="text-xl font-semibold mb-2">Unsere Vision</h3><p>Der führende Anbieter in unserer Branche zu sein.</p></div>',
|
|
"12",
|
|
"5",
|
|
"5",
|
|
1
|
|
),
|
|
],
|
|
row3JustifyContent: "start",
|
|
row3AlignItems: "start",
|
|
row3Content: [
|
|
createMockMarkdown(
|
|
"values",
|
|
isEn
|
|
? "## Our Values\n\n1. **Integrity** - We do what we say\n2. **Innovation** - We embrace new ideas\n3. **Excellence** - We strive for the best"
|
|
: "## Unsere Werte\n\n1. **Integrität** - Wir halten, was wir versprechen\n2. **Innovation** - Wir begrüßen neue Ideen\n3. **Exzellenz** - Wir streben nach dem Besten",
|
|
"left",
|
|
"12",
|
|
"10",
|
|
"8"
|
|
),
|
|
],
|
|
topFullwidthBanner: {
|
|
contentTypeId: ContentType.fullwidthBanner,
|
|
fields: {
|
|
name: "about-banner",
|
|
variant: FullwidthBannerVariant.dark,
|
|
headline: isEn ? "About Us" : "Über uns",
|
|
subheadline: isEn
|
|
? "Our Story and Values"
|
|
: "Unsere Geschichte und Werte",
|
|
text: isEn
|
|
? "For many years, we have been your reliable partner for innovative solutions."
|
|
: "Seit vielen Jahren sind wir Ihr zuverlässiger Partner für innovative Lösungen.",
|
|
image: [],
|
|
img: {
|
|
contentTypeId: ContentType.img,
|
|
fields: {
|
|
title: isEn ? "About Banner" : "About Banner",
|
|
description: isEn
|
|
? "Banner for the about page"
|
|
: "Banner für die Über-uns-Seite",
|
|
file: {
|
|
url: "https://picsum.photos/1200/400?random=about",
|
|
details: {
|
|
size: 45678,
|
|
image: {
|
|
width: 1200,
|
|
height: 400,
|
|
},
|
|
},
|
|
fileName: "about-banner.jpg",
|
|
contentType: "image/jpeg",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
"/404": {
|
|
slug: "/404",
|
|
name: isEn ? "404" : "404",
|
|
linkName: isEn ? "404" : "404",
|
|
headline: isEn ? "404 - Page Not Found" : "404 - Seite nicht gefunden",
|
|
subheadline: isEn
|
|
? "The page you are looking for does not exist."
|
|
: "Die gesuchte Seite existiert nicht.",
|
|
seoTitle: isEn ? "Page Not Found" : "Seite nicht gefunden",
|
|
seoMetaRobots: "noindex, follow",
|
|
seoDescription: isEn
|
|
? "The page you are looking for does not exist."
|
|
: "Die gesuchte Seite existiert nicht.",
|
|
row1JustifyContent: "center",
|
|
row1AlignItems: "center",
|
|
row1Content: [
|
|
createMockMarkdown(
|
|
"404-message",
|
|
isEn
|
|
? "# Page Not Found\n\nThe page you are looking for does not exist or has been moved.\n\nPlease check the URL or return to the [homepage](/)."
|
|
: "# Seite nicht gefunden\n\nDie gesuchte Seite existiert nicht oder wurde verschoben.\n\nBitte überprüfen Sie die URL oder kehren Sie zur [Startseite](/) zurück.",
|
|
"center",
|
|
"12",
|
|
"10",
|
|
"8"
|
|
),
|
|
],
|
|
row2JustifyContent: "start",
|
|
row2AlignItems: "start",
|
|
row2Content: [],
|
|
row3JustifyContent: "start",
|
|
row3AlignItems: "start",
|
|
row3Content: [],
|
|
topFullwidthBanner: {
|
|
contentTypeId: ContentType.fullwidthBanner,
|
|
fields: {
|
|
name: "404-banner",
|
|
variant: FullwidthBannerVariant.dark,
|
|
headline: isEn ? "404" : "404",
|
|
subheadline: isEn ? "Page Not Found" : "Seite nicht gefunden",
|
|
text: isEn
|
|
? "The page you are looking for does not exist."
|
|
: "Die gesuchte Seite existiert nicht.",
|
|
image: [],
|
|
img: {
|
|
contentTypeId: ContentType.img,
|
|
fields: {
|
|
title: isEn ? "404 Banner" : "404 Banner",
|
|
description: isEn
|
|
? "Banner for the 404 page"
|
|
: "Banner für die 404-Seite",
|
|
file: {
|
|
url: "https://picsum.photos/1200/400?random=404",
|
|
details: {
|
|
size: 45678,
|
|
image: {
|
|
width: 1200,
|
|
height: 400,
|
|
},
|
|
},
|
|
fileName: "404-banner.jpg",
|
|
contentType: "image/jpeg",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
"/500": {
|
|
slug: "/500",
|
|
name: isEn ? "500" : "500",
|
|
linkName: isEn ? "500" : "500",
|
|
headline: isEn ? "500 - Server Error" : "500 - Serverfehler",
|
|
subheadline: isEn
|
|
? "Something went wrong on our end. Please try again later."
|
|
: "Etwas ist auf unserer Seite schiefgelaufen. Bitte versuchen Sie es später erneut.",
|
|
seoTitle: isEn ? "Server Error" : "Serverfehler",
|
|
seoMetaRobots: "noindex, follow",
|
|
seoDescription: isEn
|
|
? "Something went wrong on our end. Please try again later."
|
|
: "Etwas ist auf unserer Seite schiefgelaufen. Bitte versuchen Sie es später erneut.",
|
|
row1JustifyContent: "center",
|
|
row1AlignItems: "center",
|
|
row1Content: [
|
|
createMockMarkdown(
|
|
"500-message",
|
|
isEn
|
|
? "# Server Error\n\nWe're sorry, but something went wrong on our end.\n\nOur team has been notified and is working on fixing the issue. Please try again later or return to the [homepage](/)."
|
|
: "# Serverfehler\n\nEs tut uns leid, aber etwas ist auf unserer Seite schiefgelaufen.\n\nUnser Team wurde benachrichtigt und arbeitet an der Behebung des Problems. Bitte versuchen Sie es später erneut oder kehren Sie zur [Startseite](/) zurück.",
|
|
"center",
|
|
"12",
|
|
"10",
|
|
"8"
|
|
),
|
|
],
|
|
row2JustifyContent: "start",
|
|
row2AlignItems: "start",
|
|
row2Content: [],
|
|
row3JustifyContent: "start",
|
|
row3AlignItems: "start",
|
|
row3Content: [],
|
|
topFullwidthBanner: {
|
|
contentTypeId: ContentType.fullwidthBanner,
|
|
fields: {
|
|
name: "500-banner",
|
|
variant: FullwidthBannerVariant.dark,
|
|
headline: isEn ? "500" : "500",
|
|
subheadline: isEn ? "Server Error" : "Serverfehler",
|
|
text: isEn
|
|
? "Something went wrong on our end. Please try again later."
|
|
: "Etwas ist auf unserer Seite schiefgelaufen. Bitte versuchen Sie es später erneut.",
|
|
image: [],
|
|
img: {
|
|
contentTypeId: ContentType.img,
|
|
fields: {
|
|
title: isEn ? "500 Banner" : "500 Banner",
|
|
description: isEn
|
|
? "Banner for the 500 page"
|
|
: "Banner für die 500-Seite",
|
|
file: {
|
|
url: "https://picsum.photos/1200/400?random=500",
|
|
details: {
|
|
size: 45678,
|
|
image: {
|
|
width: 1200,
|
|
height: 400,
|
|
},
|
|
},
|
|
fileName: "500-banner.jpg",
|
|
contentType: "image/jpeg",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
"/components": {
|
|
slug: "/components",
|
|
name: isEn ? "Components" : "Komponenten",
|
|
linkName: isEn ? "Components" : "Komponenten",
|
|
headline: isEn ? "Component Showcase" : "Komponenten-Showcase",
|
|
subheadline: isEn
|
|
? "All available content components"
|
|
: "Alle verfügbaren Content-Komponenten",
|
|
seoTitle: isEn ? "Components - Showcase" : "Komponenten - Showcase",
|
|
seoMetaRobots: "index, follow",
|
|
seoDescription: isEn
|
|
? "Showcase of all available content components."
|
|
: "Showcase aller verfügbaren Content-Komponenten.",
|
|
row1JustifyContent: "start",
|
|
row1AlignItems: "start",
|
|
row1Content: [
|
|
createMockHeadline(
|
|
"headline-h1",
|
|
isEn ? "Component Showcase" : "Komponenten-Showcase",
|
|
"h1",
|
|
"center",
|
|
"12"
|
|
),
|
|
createMockMarkdown(
|
|
"intro",
|
|
isEn
|
|
? "This page demonstrates all available content components in our CMS system."
|
|
: "Diese Seite demonstriert alle verfügbaren Content-Komponenten in unserem CMS-System.",
|
|
"center",
|
|
"12",
|
|
"10",
|
|
"8"
|
|
),
|
|
],
|
|
row2JustifyContent: "start",
|
|
row2AlignItems: "start",
|
|
row2Content: [
|
|
createMockHeadline(
|
|
"headline-html",
|
|
isEn ? "HTML Component" : "HTML-Komponente",
|
|
"h2",
|
|
"left",
|
|
"12",
|
|
"6",
|
|
"6"
|
|
),
|
|
createMockHTML(
|
|
"html-example",
|
|
isEn
|
|
? '<div class="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500"><h3 class="text-xl font-semibold mb-2">HTML Content</h3><p>This is an <strong>HTML</strong> component with custom styling.</p></div>'
|
|
: '<div class="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500"><h3 class="text-xl font-semibold mb-2">HTML Inhalt</h3><p>Dies ist eine <strong>HTML</strong>-Komponente mit benutzerdefiniertem Styling.</p></div>',
|
|
"12",
|
|
"6",
|
|
"6"
|
|
),
|
|
createMockHeadline(
|
|
"headline-markdown",
|
|
isEn ? "Markdown Component" : "Markdown-Komponente",
|
|
"h2",
|
|
"left",
|
|
"12",
|
|
"6",
|
|
"6"
|
|
),
|
|
createMockMarkdown(
|
|
"markdown-example",
|
|
isEn
|
|
? "## Markdown Content\n\nThis is a **Markdown** component with:\n\n- Lists\n- **Bold** text\n- *Italic* text\n- [Links](/)"
|
|
: "## Markdown Inhalt\n\nDies ist eine **Markdown**-Komponente mit:\n\n- Listen\n- **Fettem** Text\n- *Kursivem* Text\n- [Links](/)",
|
|
"left",
|
|
"12",
|
|
"6",
|
|
"6"
|
|
),
|
|
],
|
|
row3JustifyContent: "start",
|
|
row3AlignItems: "start",
|
|
row3Content: [
|
|
createMockHeadline(
|
|
"headline-image",
|
|
isEn ? "Image Component" : "Bild-Komponente",
|
|
"h2",
|
|
"left",
|
|
"12"
|
|
),
|
|
createMockImageComponent(
|
|
"sample-image",
|
|
"https://picsum.photos/800/600?random=1",
|
|
isEn
|
|
? "A sample image with caption"
|
|
: "Ein Beispielbild mit Beschriftung",
|
|
undefined,
|
|
undefined,
|
|
"12",
|
|
"8",
|
|
"6"
|
|
),
|
|
createMockHeadline(
|
|
"headline-gallery",
|
|
isEn ? "Image Gallery" : "Bildergalerie",
|
|
"h2",
|
|
"left",
|
|
"12"
|
|
),
|
|
createMockImageGallery(
|
|
"gallery-example",
|
|
[
|
|
{
|
|
title: isEn ? "Image 1" : "Bild 1",
|
|
description: isEn ? "First gallery image" : "Erstes Galeriebild",
|
|
url: "https://picsum.photos/400/300?random=2",
|
|
},
|
|
{
|
|
title: isEn ? "Image 2" : "Bild 2",
|
|
description: isEn
|
|
? "Second gallery image"
|
|
: "Zweites Galeriebild",
|
|
url: "https://picsum.photos/400/300?random=3",
|
|
},
|
|
{
|
|
title: isEn ? "Image 3" : "Bild 3",
|
|
description: isEn ? "Third gallery image" : "Drittes Galeriebild",
|
|
url: "https://picsum.photos/400/300?random=4",
|
|
},
|
|
{
|
|
title: isEn ? "Image 4" : "Bild 4",
|
|
url: "https://picsum.photos/400/300?random=5",
|
|
},
|
|
],
|
|
isEn
|
|
? "A collection of sample images"
|
|
: "Eine Sammlung von Beispielbildern",
|
|
"12"
|
|
),
|
|
createMockHeadline(
|
|
"headline-quote",
|
|
isEn ? "Quote Component" : "Zitat-Komponente",
|
|
"h2",
|
|
"left",
|
|
"12"
|
|
),
|
|
createMockQuote(
|
|
isEn
|
|
? "The only way to do great work is to love what you do."
|
|
: "Die einzige Möglichkeit, großartige Arbeit zu leisten, ist, das zu lieben, was man tut.",
|
|
isEn ? "Steve Jobs" : "Steve Jobs",
|
|
"left",
|
|
"12",
|
|
"6",
|
|
"6"
|
|
),
|
|
createMockQuote(
|
|
isEn
|
|
? "Innovation distinguishes between a leader and a follower."
|
|
: "Innovation unterscheidet einen Führer von einem Anhänger.",
|
|
isEn ? "Steve Jobs" : "Steve Jobs",
|
|
"right",
|
|
"12",
|
|
"6",
|
|
"6"
|
|
),
|
|
createMockHeadline(
|
|
"headline-youtube",
|
|
isEn ? "YouTube Video" : "YouTube-Video",
|
|
"h2",
|
|
"left",
|
|
"12"
|
|
),
|
|
createMockYoutubeVideo(
|
|
"youtube-1",
|
|
"dQw4w9WgXcQ",
|
|
"autoplay=0",
|
|
isEn ? "Sample YouTube Video" : "Beispiel-YouTube-Video",
|
|
isEn
|
|
? "A sample YouTube video embedded in the page"
|
|
: "Ein eingebettetes YouTube-Video auf der Seite",
|
|
"12",
|
|
"10",
|
|
"8"
|
|
),
|
|
createMockHeadline(
|
|
"headline-iframe",
|
|
isEn ? "Iframe Component" : "Iframe-Komponente",
|
|
"h2",
|
|
"left",
|
|
"12"
|
|
),
|
|
createMockIframe(
|
|
"iframe-example",
|
|
isEn
|
|
? "<p>This is an iframe component with embedded content.</p>"
|
|
: "<p>Dies ist eine Iframe-Komponente mit eingebettetem Inhalt.</p>",
|
|
"https://example.com",
|
|
"https://picsum.photos/800/400?random=6",
|
|
"12",
|
|
"10",
|
|
"8"
|
|
),
|
|
],
|
|
topFullwidthBanner: {
|
|
contentTypeId: ContentType.fullwidthBanner,
|
|
fields: {
|
|
name: "components-banner",
|
|
variant: FullwidthBannerVariant.light,
|
|
headline: isEn ? "Component Showcase" : "Komponenten-Showcase",
|
|
subheadline: isEn
|
|
? "All available content components"
|
|
: "Alle verfügbaren Content-Komponenten",
|
|
text: isEn
|
|
? "Explore all the different content components available in our CMS system."
|
|
: "Entdecken Sie alle verschiedenen Content-Komponenten, die in unserem CMS-System verfügbar sind.",
|
|
image: [],
|
|
img: {
|
|
contentTypeId: ContentType.img,
|
|
fields: {
|
|
title: isEn ? "Components Banner" : "Komponenten Banner",
|
|
description: isEn
|
|
? "Banner for the components page"
|
|
: "Banner für die Komponenten-Seite",
|
|
file: {
|
|
url: "https://picsum.photos/1200/400?random=components",
|
|
details: {
|
|
size: 45678,
|
|
image: {
|
|
width: 1200,
|
|
height: 400,
|
|
},
|
|
},
|
|
fileName: "components-banner.jpg",
|
|
contentType: "image/jpeg",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
}
|