syntaxbullet/bmp-website-2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: manage blog detail fallback media via payload

Browse Source
This commit is contained in:
syntaxbullet
2026-06-22 12:36:37 +02:00
parent a2c4df74e9
commit 79a9075f3a
5 changed files with 36 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/spa/blogDetailContent.ts
View File

@@ -1,4 +1,5 @@
export const blogDetailContent = {
fallbackImageFilename: 'gala-saal-overview.jpg',
notFound: {
title: 'Artikel nicht gefunden',
backLabel: 'Zurück zur Presse',

9
src/spa/pages/BlogDetail.tsx
View File

@@ -4,7 +4,7 @@ import { ArrowLeft, Clock, User, Tag, ArrowRight } from 'lucide-react';
import { motion } from 'framer-motion';
import { getArticleBySlug, articles, type BlogArticle, type BlogSection } from '@/spa/data/blog';
import { useCmsRoute } from '@/spa/cmsRoute';
import { docImageUrl } from '@/spa/cmsMediaField';
import { docImageUrl, mediaUrl } from '@/spa/cmsMediaField';
import { useIsMobile } from '@/spa/hooks/useIsMobile';
import { blogDetailContent } from '@/spa/blogDetailContent';
import Image from '@/spa/components/ui/UnoptimizedImage'
@@ -17,6 +17,7 @@ const FF = '"IBM Plex Sans", sans-serif';
const FB = '"Inter", sans-serif';
type BlogDetailCms = Omit<Partial<typeof blogDetailContent>, 'categoryColors'> & {
fallbackImage?: unknown
categoryColors?: unknown
metaCopy?: Partial<typeof blogDetailContent.meta>
}
@@ -46,6 +47,8 @@ export default function BlogDetail() {
const { slug } = useParams<{ slug: string }>();
const route = useCmsRoute();
const cmsArticle = route?.collection === 'posts' ? route.doc : undefined;
const cmsDetail = getDetailPage(cmsArticle?.detailPage);
const articleFallbackImage = mediaUrl(cmsDetail.fallbackImage, `/images/${blogDetailContent.fallbackImageFilename}`);
const article = (slug ? getArticleBySlug(slug) : undefined) || (cmsArticle ? {
slug: String(cmsArticle.slug || slug),
title: String(cmsArticle.title || 'Presse'),
@@ -54,7 +57,7 @@ export default function BlogDetail() {
author: String(cmsArticle.authorName || 'BMP Redaktion'),
authorRole: String(cmsArticle.authorRole || 'Presse'),
readTime: String(cmsArticle.readTime || '1 min'),
img: docImageUrl(cmsArticle, '/images/gala-saal-overview.jpg', 'heroImage'),
img: docImageUrl(cmsArticle, articleFallbackImage, 'heroImage'),
excerpt: String(cmsArticle.excerpt || cmsArticle.meta?.description || 'Dieser Pressebeitrag wird aus Payload CMS geladen.'),
sections: Array.isArray(cmsArticle.sections) && cmsArticle.sections.length > 0 ? cmsArticle.sections as BlogSection[] : [{ body: String(cmsArticle.excerpt || cmsArticle.meta?.description || 'Dieser Pressebeitrag wird aus Payload CMS geladen.') }],
tags: Array.isArray(cmsArticle.tags)
@@ -69,7 +72,7 @@ export default function BlogDetail() {
: [],
detailPage: cmsArticle.detailPage,
} as BlogArticle : undefined);
const detail = getDetailPage(article && 'detailPage' in article ? article.detailPage : undefined);
const detail = getDetailPage(article && 'detailPage' in article ? article.detailPage : cmsDetail);
const notFound = detail.notFound || blogDetailContent.notFound;
const heroBackLink = detail.heroBackLink || blogDetailContent.heroBackLink;
const categoryColors = colorMap(detail.categoryColors);