feat: manage about highlight fallback media via payload

This commit is contained in:
syntaxbullet
2026-06-22 12:32:56 +02:00
parent 53fc63b486
commit 9d2994ecdf
5 changed files with 26 additions and 12 deletions

View File

@@ -44,6 +44,7 @@ export const aboutContent = {
],
},
highlights: {
fallbackImageFilename: 'gala-saal-overview.jpg',
eyebrow: 'Preisträger-Highlights',
heading: 'AUSGEZEICHNETE 2025',
cta: { label: 'Alle Preisträger', url: '/preistraeger' },

View File

@@ -21,7 +21,7 @@ type AboutCms = Partial<typeof aboutContent> & {
hero?: Partial<typeof aboutContent.hero> & { backgroundImage?: unknown }
prize?: Partial<typeof aboutContent.prize> & { image?: unknown }
mittelstand?: Partial<typeof aboutContent.mittelstand> & { image?: unknown }
highlights?: Partial<typeof aboutContent.highlights> & { selectedWinners?: unknown[] | null }
highlights?: Partial<typeof aboutContent.highlights> & { fallbackImage?: unknown; selectedWinners?: unknown[] | null }
}
type TextRow = { text?: string | null }
@@ -63,7 +63,7 @@ function HighlightedText({ text, highlight }: { text: string; highlight: string
)
}
const normalizeWinner = (doc: CmsRouteDoc | undefined): Winner | undefined => {
const normalizeWinner = (doc: CmsRouteDoc | undefined, fallbackImage: string): Winner | undefined => {
if (!doc) return undefined
return {
id: String(doc.id),
@@ -72,7 +72,7 @@ const normalizeWinner = (doc: CmsRouteDoc | undefined): Winner | undefined => {
category: String(doc.category || 'Preisträger'),
year: Number(doc.year || aboutContent.highlights.year),
type: String(doc.awardType || 'Auszeichnung'),
img: mediaUrl(doc.image, '/images/gala-saal-overview.jpg'),
img: mediaUrl(doc.image, fallbackImage),
shortDesc: String(doc.shortDesc || doc.description || doc.meta?.description || ''),
longDesc: String(doc.longDesc || doc.description || doc.meta?.description || ''),
quote: String(doc.quote || ''),
@@ -85,10 +85,10 @@ const normalizeWinner = (doc: CmsRouteDoc | undefined): Winner | undefined => {
}
}
const winnerFromRelationship = (entry: unknown, allDocs: CmsRouteDoc[]) => {
if (entry && typeof entry === 'object') return normalizeWinner(entry as CmsRouteDoc)
const winnerFromRelationship = (entry: unknown, allDocs: CmsRouteDoc[], fallbackImage: string) => {
if (entry && typeof entry === 'object') return normalizeWinner(entry as CmsRouteDoc, fallbackImage)
const doc = allDocs.find((item) => String(item.id) === String(entry))
return normalizeWinner(doc)
return normalizeWinner(doc, fallbackImage)
}
const About: React.FC = () => {
@@ -98,16 +98,20 @@ const About: React.FC = () => {
const hero = { ...aboutContent.hero, ...(cms.hero || {}) }
const prize = { ...aboutContent.prize, ...(cms.prize || {}) }
const mittelstand = { ...aboutContent.mittelstand, ...(cms.mittelstand || {}) }
const highlights = { ...aboutContent.highlights, ...(cms.highlights || {}) }
const highlights = useMemo(() => ({ ...aboutContent.highlights, ...(cms.highlights || {}) }), [cms.highlights])
const testimonials = { ...aboutContent.testimonials, ...(cms.testimonials || {}) }
const history = { ...aboutContent.history, ...(cms.history || {}) }
const goals = { ...aboutContent.goals, ...(cms.goals || {}) }
const values = { ...aboutContent.values, ...(cms.values || {}) }
const cta = { ...aboutContent.cta, ...(cms.cta || {}) }
const highlightFallbackImage = mediaUrl(
highlights.fallbackImage,
`/images/${aboutContent.highlights.fallbackImageFilename}`,
)
const highlightWinners = useMemo(() => {
const selected = fallbackArray<unknown>(highlights.selectedWinners, [])
.map((entry) => winnerFromRelationship(entry, cmsWinners))
.map((entry) => winnerFromRelationship(entry, cmsWinners, highlightFallbackImage))
.filter((winner): winner is Winner => Boolean(winner))
if (selected.length) return selected.slice(0, 8)
@@ -116,12 +120,12 @@ const About: React.FC = () => {
Boolean(winner) && winner?.year === Number(highlights.year || aboutContent.highlights.year)
const cmsByYear = cmsWinners
.map(normalizeWinner)
.map((winner) => normalizeWinner(winner, highlightFallbackImage))
.filter(isWinnerFromYear)
.slice(0, 8)
return cmsByYear.length ? cmsByYear : FALLBACK_HIGHLIGHTS
}, [cmsWinners, highlights.selectedWinners, highlights.year])
}, [cmsWinners, highlightFallbackImage, highlights])
return (
<div className="animate-fade-in">