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

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>
);
}