feat: generate thumbnails and enhance documentation selector

package.json

@@ -18,7 +18,7 @@
     "@lucide/astro": "^0.488.0",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-navigation-menu": "^1.2.5",
     "@radix-ui/react-slot": "^1.2.3",
     "@scalar/api-reference-react": "^0.6.19",
@@ -52,6 +52,8 @@
     "rehype-mermaid": "^3.0.0",
     "remark-directive": "^4.0.0",
     "remark-toc": "^9.0.0",
+    "roboto": "link:@types/@fontsource/roboto",
+    "satori": "^0.18.3",
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.17",
     "tw-animate-css": "^1.2.5",

src/lib/components/content/thumbnail.tsx

@@ -0,0 +1,124 @@
+import { readFileSync } from "fs";
+import { resolve } from "path";
+import satori from "satori";
+
+export function loadFont(name: string) {
+  return readFileSync(resolve(`src/assets/${name}.ttf`));
+}
+
+function extractCSSVariables() {
+  const css = readFileSync("src/assets/css/global.css", "utf8");
+  const vars: Record<string, string> = {};
+  const regex = /--([^:]+):\s*([^;]+)/g;
+  let match;
+  while ((match = regex.exec(css))) {
+    vars[`--${match[1]}`] = match[2].trim();
+  }
+  return vars;
+}
+
+function resolveTailwindColor(value: string): string {
+  if (/^\d+\s+\d+\s+\d+$/.test(value)) {
+    return `rgb(${value})`;
+  }
+
+  // Cas: #00dc82 ou hsl() → OK
+  return value;
+}
+
+const montserrat = loadFont("Montserrat-Medium");
+const cssVars = extractCSSVariables();
+
+export async function generateThumbnail(
+  headline: string,
+  title: string,
+  description: string,
+) {
+  const primaryColor = resolveTailwindColor(cssVars["--primary"]);
+  return satori(
+    <div tw="w-full h-full flex flex-col justify-center bg-[#020420]">
+      <svg
+        tw="absolute right-0 top-0"
+        width="629"
+        height="593"
+        viewBox="0 0 629 593"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g filter="url(#filter0_f_199_94966)">
+          <path
+            d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
+            fill={primaryColor}
+          />
+        </g>
+        <defs>
+          <filter
+            id="filter0_f_199_94966"
+            x="0.873535"
+            y="-659"
+            width="1255.25"
+            height="1251.52"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              stdDeviation="40.5"
+              result="effect1_foregroundBlur_199_94966"
+            />
+          </filter>
+        </defs>
+      </svg>
+
+      <div tw="flex flex-col w-[600px] pl-[100px]">
+        <p
+          v-if="headline"
+          tw="uppercase text-[24px] mb-4 font-semibold"
+          style={{ color: primaryColor }}
+        >
+          {headline}
+        </p>
+        <h1
+          tw="w-[600px] m-0 text-[75px] font-semibold mb-4"
+          style={{
+            display: "block",
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden",
+            color: "white",
+          }}
+        >
+          {title}
+        </h1>
+        <p
+          tw="text-[32px] text-[#E4E4E7] leading-tight"
+          style={{
+            display: "block",
+            WebkitLineClamp: 3,
+            textOverflow: "ellipsis",
+          }}
+        >
+          {description}
+        </p>
+      </div>
+    </div>,
+    {
+      width: 960,
+      height: 540,
+      fonts: [
+        {
+          name: "Montserrat",
+          data: montserrat,
+          weight: 400,
+          style: "normal",
+        },
+      ],
+    },
+  );
+}