mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(og): redesign blog open graph images using thumbnails as background
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 41s
Details
Build & Deploy / 🏗️ Build (push) Failing after 50s
Details
Build & Deploy / 🧪 QA (push) Failing after 2m58s
Details
Build & Deploy / 🚀 Deploy (push) Has been skipped
Details
Build & Deploy / 🩺 Health Check (push) Has been skipped
Details
Build & Deploy / 🔔 Notify (push) Successful in 1s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-22 19:05:02 +01:00
parent 2ef00271ab
commit b2f5e2dd4d
2 changed files with 271 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/web/app/blog/[slug]/opengraph-image.tsx
View File

@@ -1,7 +1,7 @@
import { ImageResponse } from "next/og"; import { ImageResponse } from "next/og";
import { allPosts } from "contentlayer/generated"; import { allPosts } from "contentlayer/generated";
import { blogThumbnails } from "../../../src/components/blog/blogThumbnails"; import { blogThumbnails } from "../../../src/components/blog/blogThumbnails";
import { OGImageTemplate } from "../../../src/components/OGImageTemplate"; import { BlogOGImageTemplate } from "../../../src/components/BlogOGImageTemplate";
import { getOgFonts, OG_IMAGE_SIZE } from "../../../src/lib/og-helper"; import { getOgFonts, OG_IMAGE_SIZE } from "../../../src/lib/og-helper";
import * as fs from "node:fs/promises"; import * as fs from "node:fs/promises";
import * as path from "node:path"; import * as path from "node:path";
@@ -18,20 +18,21 @@ export default async function Image({
const { slug } = await params; const { slug } = await params;
const post = allPosts.find((p) => p.slug === slug); const post = allPosts.find((p) => p.slug === slug);
// If we have a custom generated thumbnail, serve it directly as the OG image let backgroundImageSrc: string | undefined = undefined;
// If we have a custom generated thumbnail, convert it to a data URI for Satori
if (post?.thumbnail) { if (post?.thumbnail) {
try { try {
const filePath = path.join(process.cwd(), "public", post.thumbnail); const filePath = path.join(process.cwd(), "public", post.thumbnail);
const fileBuffer = await fs.readFile(filePath); const fileBuffer = await fs.readFile(filePath);
return new Response(fileBuffer, {
headers: { const ext = path.extname(post.thumbnail).substring(1).toLowerCase();
"Content-Type": "image/png", const mimeType = ext === "jpg" || ext === "jpeg" ? "image/jpeg" : "image/png";
"Cache-Control": "public, max-age=31536000, immutable",
}, backgroundImageSrc = `data:${mimeType};base64,${fileBuffer.toString("base64")}`;
});
} catch (err) { } catch (err) {
console.warn(`[OG Image Generator] Could not read thumbnail file for ${slug}:`, err); console.warn(`[OG Image Generator] Could not read thumbnail file for ${slug} to use as background:`, err);
// Fall through to dynamic generation // Fall through to standard plain background
} }
} }
@@ -48,12 +49,13 @@ export default async function Image({
const fonts = await getOgFonts(); const fonts = await getOgFonts();
return new ImageResponse( return new ImageResponse(
<OGImageTemplate <BlogOGImageTemplate
title={title} title={title}
description={description} description={description}
label={label} label={label}
accentColor={accentColor} accentColor={accentColor}
keyword={keyword} keyword={keyword}
backgroundImageSrc={backgroundImageSrc}
/>, />,
{ {
...OG_IMAGE_SIZE, ...OG_IMAGE_SIZE,

258
apps/web/src/components/BlogOGImageTemplate.tsx Normal file
View File

@@ -0,0 +1,258 @@
import React from "react";
interface BlogOGImageTemplateProps {
title: string;
description?: string;
label?: string;
accentColor?: string;
keyword?: string;
backgroundImageSrc?: string;
}
export function BlogOGImageTemplate({
title,
description,
label,
accentColor,
keyword,
backgroundImageSrc,
}: BlogOGImageTemplateProps) {
const accent = accentColor || "#3b82f6";
const white = "#ffffff";
const slateLight = "#cbd5e1"; // slate-300 for readable descriptions on dark bg
const containerStyle: React.CSSProperties = {
height: "100%",
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
justifyContent: "center",
backgroundColor: "#0f172a", // base dark slate
padding: "80px",
position: "relative",
fontFamily: "Inter",
};
return (
<div style={containerStyle}>
{/* Primary Thumbnail Background Image */}
{backgroundImageSrc && (
<img
src={backgroundImageSrc}
width="1200"
height="630"
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
objectFit: "cover",
}}
/>
)}
{/* Dark overlay to make text highly legible */}
<div
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
display: "flex",
// Deep dark gradient that is almost solid on the left and fades out slightly on the right
backgroundImage: "linear-gradient(to right, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.88) 50%, rgba(15, 23, 42, 0.6) 100%)",
}}
/>
{/* Subtle Grid Pattern overlay */}
<div
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundImage: `linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)`,
backgroundSize: "40px 40px",
display: "flex",
}}
/>
{/* Accent geometric block (right side) */}
<div
style={{
position: "absolute",
top: "60px",
right: "80px",
width: "200px",
height: "200px",
borderRadius: "24px",
border: `3px solid ${accent}`,
opacity: 0.3,
display: "flex",
}}
/>
<div
style={{
position: "absolute",
top: "100px",
right: "120px",
width: "160px",
height: "160px",
borderRadius: "20px",
backgroundColor: accent,
opacity: 0.15,
display: "flex",
}}
/>
<div
style={{
display: "flex",
flexDirection: "column",
position: "relative",
zIndex: 10,
maxWidth: "850px",
}}
>
{/* Label / Category */}
{label && (
<div
style={{
fontSize: "18px",
fontWeight: 700,
color: accent,
textTransform: "uppercase",
letterSpacing: "0.2em",
marginBottom: "24px",
display: "flex",
}}
>
{label}
</div>
)}
{/* Title */}
<div
style={{
fontSize: title.length > 40 ? "56px" : "72px",
fontWeight: 700,
color: white,
lineHeight: "1.1",
marginBottom: "28px",
display: "flex",
letterSpacing: "-0.03em",
}}
>
{title}
</div>
{/* Description */}
{description && (
<div
style={{
fontSize: "26px",
color: slateLight,
lineHeight: "1.45",
display: "flex",
fontWeight: 400,
}}
>
{description.length > 120
? description.substring(0, 117) + "..."
: description}
</div>
)}
</div>
{/* Brand Footer */}
<div
style={{
position: "absolute",
bottom: "60px",
left: "80px",
display: "flex",
alignItems: "center",
}}
>
<div
style={{
width: "50px",
height: "3px",
backgroundColor: white,
borderRadius: "2px",
marginRight: "16px",
opacity: 0.8,
}}
/>
<div
style={{
fontSize: "20px",
fontWeight: 700,
color: white,
textTransform: "lowercase",
letterSpacing: "0.05em",
display: "flex",
opacity: 0.8,
}}
>
mintel.me
</div>
</div>
{/* Keyword badge (bottom-right) */}
{keyword && (
<div
style={{
position: "absolute",
bottom: "60px",
right: "80px",
display: "flex",
alignItems: "center",
gap: "8px",
}}
>
<div
style={{
width: "8px",
height: "8px",
borderRadius: "4px",
backgroundColor: accent,
display: "flex",
opacity: 0.8,
}}
/>
<div
style={{
fontSize: "14px",
fontWeight: 700,
color: white,
textTransform: "uppercase",
letterSpacing: "0.15em",
fontFamily: "ui-monospace, monospace",
display: "flex",
opacity: 0.6,
}}
>
{keyword}
</div>
</div>
)}
{/* Accent Strip */}
<div
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "5px",
backgroundColor: accent,
}}
/>
</div>
);
}