feat(blog): implement dynamic SVG thumbnails and specialized OG images for blog posts

apps/web/app/api/og/[[...slug]]/route.tsx

@@ -1,5 +1,6 @@
 import { ImageResponse } from "next/og";
 import { blogPosts } from "../../../../src/data/blogPosts";
+import { blogThumbnails } from "../../../../src/data/blogThumbnails";
 import { OGImageTemplate } from "../../../../src/components/OGImageTemplate";
 import { getOgFonts, OG_IMAGE_SIZE } from "../../../../src/lib/og-helper";
 
@@ -15,6 +16,8 @@ export async function GET(
   let title: string;
   let description: string;
   let label: string | undefined;
+  let accentColor: string | undefined;
+  let keyword: string | undefined;
 
   if (slug === "home") {
     title = "Marc Mintel";
@@ -23,17 +26,26 @@ export async function GET(
     label = "Engineering";
   } else {
     const post = blogPosts.find((p) => p.slug === slug);
+    const thumbnail = blogThumbnails[slug];
     title = post?.title || "Marc Mintel";
     description =
       post?.description ||
       "Technical problem solver's blog - practical insights and learning notes";
     label = post ? "Blog Post" : "Engineering";
+    accentColor = thumbnail?.accent;
+    keyword = thumbnail?.keyword;
   }
 
   const fonts = await getOgFonts();
 
   return new ImageResponse(
-    <OGImageTemplate title={title} description={description} label={label} />,
+    <OGImageTemplate
+      title={title}
+      description={description}
+      label={label}
+      accentColor={accentColor}
+      keyword={keyword}
+    />,
     {
       ...OG_IMAGE_SIZE,
       fonts: fonts as any,

apps/web/app/blog/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { blogPosts } from "../../../src/data/blogPosts";
 import { BlogPostHeader } from "../../../src/components/blog/BlogPostHeader";
@@ -15,6 +16,41 @@ export async function generateStaticParams() {
   }));
 }
 
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const post = blogPosts.find((p) => p.slug === slug);
+
+  if (!post) return {};
+
+  return {
+    title: post.title,
+    description: post.description,
+    openGraph: {
+      title: post.title,
+      description: post.description,
+      type: "article",
+      images: [
+        {
+          url: `/api/og/${slug}`,
+          width: 1200,
+          height: 630,
+          alt: post.title,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: post.title,
+      description: post.description,
+      images: [`/api/og/${slug}`],
+    },
+  };
+}
+
 export default async function BlogPostPage({
   params,
 }: {

apps/web/src/components/MediumCard.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import Link from "next/link";
 import { Card } from "./Layout";
 import { ArrowRight } from "lucide-react";
+import { BlogThumbnailSVG } from "./blog/BlogThumbnailSVG";
 
 interface Post {
   title: string;
@@ -31,35 +32,46 @@ export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
         techBorder={false}
         className="relative overflow-hidden transition-all duration-300 border-slate-100 hover:border-slate-300 bg-white/30 backdrop-blur-sm p-5 md:p-6"
       >
-        <div className="space-y-3 md:space-y-4">
+        <div className="flex gap-4 md:gap-5 items-center">
-          <div className="flex items-center justify-between">
+          {/* Thumbnail */}
-            <time className="text-[9px] md:text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
+          <div className="flex-shrink-0 w-[56px] h-[56px] md:w-[80px] md:h-[80px] rounded-lg overflow-hidden border border-slate-100 group-hover:border-slate-200 transition-colors">
-              {formattedDate}
+            <BlogThumbnailSVG
-            </time>
+              slug={slug}
-            <div className="flex gap-1.5 md:gap-2">
+              variant="square"
-              {tags?.slice(0, 2).map((tag) => (
+              className="w-full h-full"
-                <span
+            />
-                  key={tag}
+          </div>
-                  className="text-[8px] md:text-[9px] font-mono text-slate-300 uppercase"
+
-                >
+          <div className="flex-1 space-y-3 md:space-y-4 min-w-0">
-                  #{tag}
+            <div className="flex items-center justify-between">
-                </span>
+              <time className="text-[9px] md:text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
-              ))}
+                {formattedDate}
+              </time>
+              <div className="flex gap-1.5 md:gap-2">
+                {tags?.slice(0, 2).map((tag) => (
+                  <span
+                    key={tag}
+                    className="text-[8px] md:text-[9px] font-mono text-slate-300 uppercase"
+                  >
+                    #{tag}
+                  </span>
+                ))}
+              </div>
             </div>
-          </div>
 
-          <div className="space-y-1.5 md:space-y-2">
+            <div className="space-y-1.5 md:space-y-2">
-            <h3 className="text-xl md:text-2xl font-bold text-slate-900 tracking-tight leading-tight group-hover:text-black transition-colors">
+              <h3 className="text-xl md:text-2xl font-bold text-slate-900 tracking-tight leading-tight group-hover:text-black transition-colors">
-              {title}
+                {title}
-            </h3>
+              </h3>
-            <p className="text-sm md:text-base text-slate-500 font-serif italic leading-relaxed line-clamp-2">
+              <p className="text-sm md:text-base text-slate-500 font-serif italic leading-relaxed line-clamp-2">
-              {description}
+                {description}
-            </p>
+              </p>
-          </div>
+            </div>
 
-          <div className="pt-1 md:pt-2 flex items-center gap-2 text-[9px] md:text-[10px] font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-all">
+            <div className="pt-1 md:pt-2 flex items-center gap-2 text-[9px] md:text-[10px] font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-all">
-            <span>Beitrag öffnen</span>
+              <span>Beitrag öffnen</span>
-            <ArrowRight className="w-3 h-3 translate-x-0 group-hover:translate-x-1 transition-transform" />
+              <ArrowRight className="w-3 h-3 translate-x-0 group-hover:translate-x-1 transition-transform" />
+            </div>
           </div>
         </div>
       </Card>

apps/web/src/components/OGImageTemplate.tsx

@@ -4,16 +4,19 @@ interface OGImageTemplateProps {
   title: string;
   description?: string;
   label?: string;
+  accentColor?: string;
+  keyword?: string;
 }
 
 export function OGImageTemplate({
   title,
   description,
   label,
+  accentColor,
+  keyword,
 }: OGImageTemplateProps) {
-  const accentBlue = "#3b82f6";
+  const accent = accentColor || "#3b82f6";
   const slateDark = "#0f172a";
-  const slateText = "#1e293b";
   const slateLight = "#64748b";
 
   const containerStyle: React.CSSProperties = {
@@ -31,16 +34,71 @@ export function OGImageTemplate({
 
   return (
     <div style={containerStyle}>
-      {/* Background Technographic Accent */}
+      {/* Background Grid Pattern */}
       <div
         style={{
           position: "absolute",
-          top: "-100px",
+          top: 0,
-          right: "-100px",
+          left: 0,
-          width: "500px",
+          right: 0,
-          height: "500px",
+          bottom: 0,
-          borderRadius: "250px",
+          backgroundImage: `linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px)`,
-          backgroundColor: "#f1f5f9",
+          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.15,
+          display: "flex",
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          top: "100px",
+          right: "120px",
+          width: "160px",
+          height: "160px",
+          borderRadius: "20px",
+          backgroundColor: accent,
+          opacity: 0.08,
+          display: "flex",
+        }}
+      />
+      {/* Small accent circles */}
+      <div
+        style={{
+          position: "absolute",
+          top: "80px",
+          right: "100px",
+          width: "16px",
+          height: "16px",
+          borderRadius: "8px",
+          backgroundColor: accent,
+          opacity: 0.5,
+          display: "flex",
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          top: "240px",
+          right: "90px",
+          width: "10px",
+          height: "10px",
+          borderRadius: "5px",
+          backgroundColor: accent,
+          opacity: 0.3,
           display: "flex",
         }}
       />
@@ -51,15 +109,16 @@ export function OGImageTemplate({
           flexDirection: "column",
           position: "relative",
           zIndex: 10,
+          maxWidth: "850px",
         }}
       >
         {/* Label / Category */}
         {label && (
           <div
             style={{
-              fontSize: "20px",
+              fontSize: "18px",
               fontWeight: 700,
-              color: accentBlue,
+              color: accent,
               textTransform: "uppercase",
               letterSpacing: "0.2em",
               marginBottom: "24px",
@@ -73,14 +132,13 @@ export function OGImageTemplate({
         {/* Title */}
         <div
           style={{
-            fontSize: title.length > 40 ? "64px" : "82px",
+            fontSize: title.length > 40 ? "56px" : "72px",
             fontWeight: 700,
             color: slateDark,
             lineHeight: "1.1",
-            maxWidth: "950px",
+            marginBottom: "28px",
-            marginBottom: "32px",
             display: "flex",
-            letterSpacing: "-0.025em",
+            letterSpacing: "-0.03em",
           }}
         >
           {title}
@@ -90,16 +148,15 @@ export function OGImageTemplate({
         {description && (
           <div
             style={{
-              fontSize: "30px",
+              fontSize: "26px",
               color: slateLight,
-              maxWidth: "850px",
+              lineHeight: "1.45",
-              lineHeight: "1.4",
               display: "flex",
               fontWeight: 400,
             }}
           >
-            {description.length > 160
+            {description.length > 120
-              ? description.substring(0, 157) + "..."
+              ? description.substring(0, 117) + "..."
               : description}
           </div>
         )}
@@ -109,7 +166,7 @@ export function OGImageTemplate({
       <div
         style={{
           position: "absolute",
-          bottom: "80px",
+          bottom: "60px",
           left: "80px",
           display: "flex",
           alignItems: "center",
@@ -117,16 +174,16 @@ export function OGImageTemplate({
       >
         <div
           style={{
-            width: "60px",
+            width: "50px",
-            height: "4px",
+            height: "3px",
             backgroundColor: slateDark,
             borderRadius: "2px",
-            marginRight: "20px",
+            marginRight: "16px",
           }}
         />
         <div
           style={{
-            fontSize: "22px",
+            fontSize: "20px",
             fontWeight: 700,
             color: slateDark,
             textTransform: "lowercase",
@@ -138,15 +195,52 @@ export function OGImageTemplate({
         </div>
       </div>
 
-      {/* Blue Brand Strip */}
+      {/* 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",
+            }}
+          />
+          <div
+            style={{
+              fontSize: "14px",
+              fontWeight: 700,
+              color: "#94a3b8",
+              textTransform: "uppercase",
+              letterSpacing: "0.15em",
+              fontFamily: "ui-monospace, monospace",
+              display: "flex",
+            }}
+          >
+            {keyword}
+          </div>
+        </div>
+      )}
+
+      {/* Accent Strip */}
       <div
         style={{
           position: "absolute",
           top: 0,
-          right: 0,
+          left: 0,
-          width: "12px",
+          width: "100%",
-          height: "100%",
+          height: "5px",
-          backgroundColor: accentBlue,
+          backgroundColor: accent,
         }}
       />
     </div>

apps/web/src/data/blogThumbnails.ts

@@ -0,0 +1,139 @@
+export type ThumbnailIcon =
+  | "gauge"
+  | "bottleneck"
+  | "plugin"
+  | "shield"
+  | "cookie"
+  | "cloud"
+  | "lock"
+  | "chart"
+  | "leaf"
+  | "price"
+  | "prototype"
+  | "gear"
+  | "hourglass"
+  | "code"
+  | "responsive"
+  | "server"
+  | "template"
+  | "sync";
+
+export interface BlogThumbnailConfig {
+  icon: ThumbnailIcon;
+  accent: string;
+  keyword: string;
+}
+
+/**
+ * Mapping of blog post slugs to their unique thumbnail configuration.
+ * Each entry defines the abstract SVG illustration style for a given post.
+ */
+export const blogThumbnails: Record<string, BlogThumbnailConfig> = {
+  // Group 1: Pain Points & Troubleshooting
+  "why-pagespeed-fails": {
+    icon: "gauge",
+    accent: "#ef4444",
+    keyword: "SPEED",
+  },
+  "slow-loading-costs-customers": {
+    icon: "gauge",
+    accent: "#f97316",
+    keyword: "LATENCY",
+  },
+  "why-agencies-are-slow": {
+    icon: "bottleneck",
+    accent: "#8b5cf6",
+    keyword: "PROCESS",
+  },
+  "hidden-costs-of-wordpress-plugins": {
+    icon: "plugin",
+    accent: "#ec4899",
+    keyword: "PLUGINS",
+  },
+  "why-websites-break-after-updates": {
+    icon: "shield",
+    accent: "#f59e0b",
+    keyword: "STABILITY",
+  },
+
+  // Group 2: Sovereignty & Law
+  "website-without-cookie-banners": {
+    icon: "cookie",
+    accent: "#10b981",
+    keyword: "PRIVACY",
+  },
+  "no-us-cloud-platforms": {
+    icon: "cloud",
+    accent: "#3b82f6",
+    keyword: "SOVEREIGN",
+  },
+  "gdpr-conformity-system-approach": {
+    icon: "shield",
+    accent: "#06b6d4",
+    keyword: "DSGVO",
+  },
+  "builder-systems-threaten-independence": {
+    icon: "lock",
+    accent: "#f43f5e",
+    keyword: "LOCK-IN",
+  },
+  "analytics-without-tracking": {
+    icon: "chart",
+    accent: "#8b5cf6",
+    keyword: "ANALYTICS",
+  },
+
+  // Group 3: Efficiency & Investment
+  "fast-website-carbon-footprint": {
+    icon: "leaf",
+    accent: "#22c55e",
+    keyword: "GREEN",
+  },
+  "fixed-price-vs-hourly-rate": {
+    icon: "price",
+    accent: "#0ea5e9",
+    keyword: "PRICING",
+  },
+  "build-first-talk-later": {
+    icon: "prototype",
+    accent: "#a855f7",
+    keyword: "PROTOTYPE",
+  },
+  "maintenance-without-cms": {
+    icon: "gear",
+    accent: "#64748b",
+    keyword: "MAINTAIN",
+  },
+  "timeless-websites": {
+    icon: "hourglass",
+    accent: "#0d9488",
+    keyword: "LONGEVITY",
+  },
+
+  // Group 4: Tech & Craft
+  "clean-code-success": {
+    icon: "code",
+    accent: "#2563eb",
+    keyword: "QUALITY",
+  },
+  "responsive-design-scaling": {
+    icon: "responsive",
+    accent: "#7c3aed",
+    keyword: "ADAPTIVE",
+  },
+  "hosting-and-operation": {
+    icon: "server",
+    accent: "#475569",
+    keyword: "INFRA",
+  },
+  "no-ready-made-templates": {
+    icon: "template",
+    accent: "#e11d48",
+    keyword: "CUSTOM",
+  },
+  "seamless-crm-sync": {
+    icon: "sync",
+    accent: "#0891b2",
+    keyword: "SYNC",
+  },
+};