tknuth/claudia_blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

DB ready

Browse Source
This commit is contained in:
Timo Knuth
2025-09-30 22:10:00 +02:00
parent 5856eda62b
commit f36fe6276c
5 changed files with 348 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/components/BlogPost.tsx
View File

@@ -4,7 +4,6 @@ import { BlogPost, BlogPostSection } from '@/types/blog'
interface BlogPostCardProps {
post: BlogPost
onReadMore: (post: BlogPost) => void
isLatest: boolean
}
@@ -48,14 +47,14 @@ const cardStyles = {
function formatDate(timestamp: string) {
const date = new Date(timestamp)
return date.toLocaleDateString(undefined, {
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
})
}
export function BlogPostCard({ post, onReadMore, isLatest }: BlogPostCardProps) {
export function BlogPostCard({ post, isLatest }: BlogPostCardProps) {
const previewUrl = resolveMediaUrl(post.previewImage)
return (
@@ -153,9 +152,8 @@ export function BlogPostCard({ post, onReadMore, isLatest }: BlogPostCardProps)
{post.excerpt && <p style={cardStyles.excerpt}>{post.excerpt}</p>}
<button
type="button"
onClick={() => onReadMore(post)}
<a
href={`/blog/${post.slug}`}
style={{
display: 'inline-flex',
alignItems: 'center',
@@ -167,212 +165,14 @@ export function BlogPostCard({ post, onReadMore, isLatest }: BlogPostCardProps)
fontSize: '12px',
letterSpacing: '0.15em',
textTransform: 'uppercase',
textDecoration: 'none',
color: '#1E1A17',
cursor: 'pointer'
}}
>
Read More
</button>
</a>
</article>
)
}
interface BlogPostModalProps {
post: BlogPost
onClose: () => void
}
function renderSection(section: BlogPostSection) {
const imageUrl = resolveMediaUrl(section.image)
return (
<div key={section.id} style={{ marginBottom: '32px' }}>
{section.text && (
<p
style={{
fontFamily: 'Spectral, serif',
fontSize: '16px',
color: '#4A4A4A',
lineHeight: 1.8,
marginBottom: imageUrl ? '18px' : 0
}}
>
{section.text}
</p>
)}
{imageUrl && (
<div
style={{
border: '2px solid #8B7D6B',
backgroundColor: 'white',
padding: '6px',
maxWidth: '420px',
width: '100%',
margin: '0 auto'
}}
>
<img
src={imageUrl}
alt="Blog section"
style={{
display: 'block',
width: '100%',
height: 'auto',
backgroundColor: '#F7F1E1'
}}
/>
</div>
)}
</div>
)
}
export function BlogPostModal({ post, onClose }: BlogPostModalProps) {
const heroImage = resolveMediaUrl(post.previewImage)
return (
<div
style={{
position: 'fixed',
inset: 0,
backgroundColor: 'rgba(0, 0, 0, 0.6)',
zIndex: 1000,
display: 'flex',
justifyContent: 'center',
alignItems: 'flex-start',
overflowY: 'auto',
padding: '48px 20px'
}}
onClick={onClose}
>
<div
style={{
position: 'relative',
maxWidth: '820px',
width: '100%',
backgroundColor: '#F7F1E1',
border: '2px solid #8B7D6B',
padding: '32px',
boxShadow: '0 20px 60px rgba(0,0,0,0.35)'
}}
onClick={(event) => event.stopPropagation()}
>
<button
type="button"
onClick={onClose}
style={{
position: 'absolute',
top: '16px',
right: '16px',
background: 'transparent',
border: 'none',
fontSize: '24px',
cursor: 'pointer'
}}
aria-label="Close"
>
X
</button>
{heroImage && (
<div
style={{
marginLeft: '-32px',
marginRight: '-32px',
marginTop: '-32px',
borderBottom: '2px solid #8B7D6B'
}}
>
<img
src={heroImage}
alt={post.title}
style={{ display: 'block', width: '100%', height: 'auto' }}
/>
</div>
)}
<header style={{ marginTop: '24px', marginBottom: '32px' }}>
<div style={{
display: 'flex',
gap: '16px',
alignItems: 'center',
marginBottom: '12px'
}}>
{post.isEditorsPick && (
<span style={{
backgroundColor: '#C89C2B',
color: '#F7F1E1',
padding: '6px 12px',
fontFamily: 'Space Mono, monospace',
fontSize: '12px',
letterSpacing: '0.15em',
textTransform: 'uppercase'
}}>
Editor's Pick
</span>
)}
<span style={{
fontFamily: 'Space Mono, monospace',
fontSize: '12px',
letterSpacing: '0.15em',
color: '#8B7D6B',
textTransform: 'uppercase'
}}>
{formatDate(post.createdAt)}
</span>
</div>
<h2 style={{
fontFamily: 'Abril Fatface, serif',
fontSize: '42px',
color: '#1E1A17',
marginBottom: '16px'
}}>
{post.title}
</h2>
{post.linkUrl && (
<a
href={post.linkUrl}
target="_blank"
rel="noopener noreferrer"
style={{
display: 'inline-block',
backgroundColor: '#1E1A17',
color: '#F7F1E1',
padding: '12px 22px',
fontFamily: 'Space Mono, monospace',
fontSize: '12px',
letterSpacing: '0.15em',
textTransform: 'uppercase',
border: '2px solid #8B7D6B'
}}
>
To Produkt
</a>
)}
</header>
<div>
{post.sections.map(section => renderSection(section))}
</div>
{post.footer && (
<footer style={{
borderTop: '2px solid #8B7D6B',
marginTop: '32px',
paddingTop: '24px'
}}>
<p style={{
fontFamily: 'Spectral, serif',
fontSize: '15px',
color: '#4A4A4A',
lineHeight: 1.6
}}>
{post.footer}
</p>
</footer>
)}
</div>
</div>
)
}