114 lines
3.3 KiB
TypeScript
114 lines
3.3 KiB
TypeScript
import { ImageResponse } from 'next/og';
|
|
import { getPostBySlug } from '@/lib/blog';
|
|
|
|
export const runtime = 'nodejs';
|
|
|
|
export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string } }) {
|
|
const post = await getPostBySlug(slug, locale);
|
|
|
|
if (!post) {
|
|
return new ImageResponse(
|
|
<div style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: '#001a4d' }} />
|
|
);
|
|
}
|
|
|
|
return new ImageResponse(
|
|
(
|
|
<div
|
|
style={{
|
|
height: '100%',
|
|
width: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'flex-start',
|
|
justifyContent: 'flex-end',
|
|
backgroundColor: '#001a4d',
|
|
padding: '80px',
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
{/* Background Image Overlay if available */}
|
|
{post.frontmatter.featuredImage && (
|
|
<img
|
|
src={post.frontmatter.featuredImage.startsWith('http') ? post.frontmatter.featuredImage : `https://klz-cables.com${post.frontmatter.featuredImage}`}
|
|
alt=""
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
objectFit: 'cover',
|
|
opacity: 0.4,
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Gradient Overlay */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
background: 'linear-gradient(to top, rgba(0,26,77,1) 0%, rgba(0,26,77,0.4) 100%)',
|
|
}}
|
|
/>
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 10 }}>
|
|
{post.frontmatter.category && (
|
|
<div
|
|
style={{
|
|
fontSize: '20px',
|
|
fontWeight: 'bold',
|
|
color: '#00ff99',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '0.1em',
|
|
marginBottom: '16px',
|
|
backgroundColor: 'rgba(0,255,153,0.1)',
|
|
padding: '4px 12px',
|
|
borderRadius: '4px',
|
|
}}
|
|
>
|
|
{post.frontmatter.category}
|
|
</div>
|
|
)}
|
|
<div
|
|
style={{
|
|
fontSize: '64px',
|
|
fontWeight: '900',
|
|
color: 'white',
|
|
lineHeight: '1.1',
|
|
maxWidth: '900px',
|
|
marginBottom: '24px',
|
|
}}
|
|
>
|
|
{post.frontmatter.title}
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
<div
|
|
style={{
|
|
fontSize: '24px',
|
|
color: 'rgba(255,255,255,0.6)',
|
|
fontWeight: '500',
|
|
}}
|
|
>
|
|
KLZ Cables Blog
|
|
</div>
|
|
<div style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#00ff99', margin: '0 16px' }} />
|
|
<div
|
|
style={{
|
|
fontSize: '24px',
|
|
color: 'rgba(255,255,255,0.6)',
|
|
}}
|
|
>
|
|
{new Date(post.frontmatter.date).toLocaleDateString(locale, { year: 'numeric', month: 'long', day: 'numeric' })}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
{
|
|
width: 1200,
|
|
height: 630,
|
|
}
|
|
);
|
|
}
|