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

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 items-center justify-between">
-            <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 className="flex gap-4 md:gap-5 items-center">
+          {/* Thumbnail */}
+          <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">
+            <BlogThumbnailSVG
+              slug={slug}
+              variant="square"
+              className="w-full h-full"
+            />
+          </div>
+
+          <div className="flex-1 space-y-3 md:space-y-4 min-w-0">
+            <div className="flex items-center justify-between">
+              <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">
-            <h3 className="text-xl md:text-2xl font-bold text-slate-900 tracking-tight leading-tight group-hover:text-black transition-colors">
-              {title}
-            </h3>
-            <p className="text-sm md:text-base text-slate-500 font-serif italic leading-relaxed line-clamp-2">
-              {description}
-            </p>
-          </div>
+            <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">
+                {title}
+              </h3>
+              <p className="text-sm md:text-base text-slate-500 font-serif italic leading-relaxed line-clamp-2">
+                {description}
+              </p>
+            </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">
-            <span>Beitrag öffnen</span>
-            <ArrowRight className="w-3 h-3 translate-x-0 group-hover:translate-x-1 transition-transform" />
+            <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>
+              <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",
-          right: "-100px",
-          width: "500px",
-          height: "500px",
-          borderRadius: "250px",
-          backgroundColor: "#f1f5f9",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundImage: `linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.06) 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.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: "32px",
+            marginBottom: "28px",
             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.4",
+              lineHeight: "1.45",
               display: "flex",
               fontWeight: 400,
             }}
           >
-            {description.length > 160
-              ? description.substring(0, 157) + "..."
+            {description.length > 120
+              ? 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",
-            height: "4px",
+            width: "50px",
+            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,
-          width: "12px",
-          height: "100%",
-          backgroundColor: accentBlue,
+          left: 0,
+          width: "100%",
+          height: "5px",
+          backgroundColor: accent,
         }}
       />
     </div>