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

2026-02-17 11:49:38 +01:00
parent 3de163276c
commit e2c9ec507f
6 changed files with 1461 additions and 57 deletions
--- a/apps/web/src/components/MediumCard.tsx
+++ b/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>
--- a/apps/web/src/components/OGImageTemplate.tsx
+++ b/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>
--- a/apps/web/src/components/blog/BlogThumbnailSVG.tsx
+++ b/apps/web/src/components/blog/BlogThumbnailSVG.tsx
--- a/apps/web/src/data/blogThumbnails.ts
+++ b/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",
+  },
+};