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

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>