Add og images for blog entries

CodeDoctorDE · CodeDoctorDE · commit 09b84ebf2ad4 · 2026-05-04T23:46:33.000+02:00
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -19,6 +19,13 @@ jobs:
         with:
           node-version: 24
           cache: "pnpm"
+      - name: Restore generated image cache
+        uses: actions/cache@v4
+        with:
+          path: .astro/og-cache
+          key: ${{ runner.os }}-og-images-${{ hashFiles('src/pages/og/**', 'src/content/blog/**', 'src/content/authors/**', 'src/content/projects/**', 'public/logos/**', 'pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-og-images-
       - name: Install dependencies
         run: pnpm install
       - name: Build
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -52,6 +52,8 @@ const imageURL = image ? new URL(image, Astro.site) : undefined;
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
 {imageURL && <meta property="og:image" content={imageURL} />}
+{imageURL && <meta property="og:image:width" content="1200" />}
+{imageURL && <meta property="og:image:height" content="630" />}
 {imageURL && <meta property="og:image:alt" content={title} />}
 {publishedTime && <meta property="article:published_time" content={publishedTime.toISOString()} />}
 {modifiedTime && <meta property="article:modified_time" content={modifiedTime.toISOString()} />}
diff --git a/src/content.config.ts b/src/content.config.ts
@@ -30,6 +30,10 @@ const projects = defineCollection({
     translation: z.string().optional(),
     unlisted: z.boolean().default(false),
     logo: z.string().optional(),
+    color: z
+      .string()
+      .regex(/^#[0-9A-Fa-f]{6}$/)
+      .optional(),
     order: z.number().optional(),
   }),
 });
diff --git a/src/content/projects/butterfly.json b/src/content/projects/butterfly.json
@@ -4,5 +4,6 @@
   "description": "🎨 Powerful, minimalistic, cross-platform, opensource note-taking app",
   "website": "https://docs.butterfly.linwood.dev",
   "translation": "https://translate.linwood.dev/butterfly/",
+  "color": "#EBB733",
   "order": 1
 }
diff --git a/src/content/projects/dev-doctor.json b/src/content/projects/dev-doctor.json
@@ -3,5 +3,6 @@
   "source": "https://github.com/LinwoodDev/dev_doctor",
   "description": "Free, opensource, serverless learning platform",
   "website": "https://docs.dev-doctor.linwood.dev",
+  "color": "#5C3070",
   "unlisted": true
 }
diff --git a/src/content/projects/flow.json b/src/content/projects/flow.json
@@ -3,5 +3,6 @@
   "source": "https://github.com/LinwoodDev/Flow",
   "description": "WIP: Feature rich event, group and time managment system",
   "website": "https://docs.flow.linwood.dev",
+  "color": "#35CDEF",
   "order": 2
 }
diff --git a/src/content/projects/launcher.json b/src/content/projects/launcher.json
@@ -3,5 +3,6 @@
   "source": "https://github.com/LinwoodDev/Launcher",
   "description": "WIP: 🚀 A simple, minimalistic, cross-platform, opensource launcher",
   "website": "https://docs.launch.linwood.dev",
+  "color": "#2196F3",
   "unlisted": true
 }
diff --git a/src/content/projects/luna.json b/src/content/projects/luna.json
@@ -4,5 +4,6 @@
   "description": "WIP: Library for Universal Networking Assets",
   "website": "https://luna.linwood.dev",
   "logo": "luna",
+  "color": "#D9C38B",
   "order": 5
 }
diff --git a/src/content/projects/setonix.json b/src/content/projects/setonix.json
@@ -3,5 +3,6 @@
   "source": "https://github.com/LinwoodDev/Setonix",
   "description": "WIP: Powerful, customizable, cross-platform, opensource table sandbox game",
   "website": "https://setonix.world",
+  "color": "#B46B43",
   "order": 3
 }
diff --git a/src/content/projects/swamp.json b/src/content/projects/swamp.json
@@ -3,5 +3,6 @@
   "source": "https://github.com/LinwoodDev/Swamp",
   "description": "WIP: Universal Secure Web-Socket Application Messaging Proxy for Linwood Apps",
   "website": "https://swamp.linwood.dev",
+  "color": "#4D55D8",
   "order": 4
 }
diff --git a/src/content/projects/vulpine.json b/src/content/projects/vulpine.json
@@ -3,5 +3,6 @@
   "source": "https://github.com/LinwoodDev/Vulpine",
   "description": "WIP: A user friendly gui for command line tools",
   "website": "https://vulpine.linwood.dev",
+  "color": "#FBAC11",
   "order": 6
 }
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -18,10 +18,10 @@ const { title, description, date, heroImage, project, author, tags, url } =
 const currentAuthor = await getEntry("authors", author.id);
 const authorName = currentAuthor?.data.name;
 const absoluteUrl = new URL(url, Astro.site).toString();
+const ogImagePath = `/og${url}.png`;
 const imageUrl = heroImage
   ? new URL(heroImage, Astro.site).toString()
-  : new URL(project ? `/logos/${project}.png` : "/logos/logo.png", Astro.site)
-      .toString();
+  : new URL(ogImagePath, Astro.site).toString();
 const structuredData = {
   "@context": "https://schema.org",
   "@type": "BlogPosting",
diff --git a/src/pages/og/[...slug].png.ts b/src/pages/og/[...slug].png.ts
@@ -0,0 +1,190 @@
+import type { APIContext } from "astro";
+import { getCollection, getEntry } from "astro:content";
+import { createHash } from "node:crypto";
+import {
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  writeFileSync,
+} from "node:fs";
+import sharp from "sharp";
+import { getEntryProject, getEntryUrl } from "../../blog";
+
+const WIDTH = 1200;
+const HEIGHT = 630;
+const CACHE_DIR = new URL("../../../.astro/og-cache/", import.meta.url);
+
+const escapeXml = (value: string) =>
+  value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+
+const hexToRgb = (hex: string) => {
+  const normalized = hex.replace("#", "");
+  return {
+    r: parseInt(normalized.slice(0, 2), 16),
+    g: parseInt(normalized.slice(2, 4), 16),
+    b: parseInt(normalized.slice(4, 6), 16),
+  };
+};
+
+const mix = (hex: string, target: string, amount: number) => {
+  const sourceRgb = hexToRgb(hex);
+  const targetRgb = hexToRgb(target);
+  const channel = (source: number, destination: number) =>
+    Math.round(source + (destination - source) * amount)
+      .toString(16)
+      .padStart(2, "0");
+
+  return `#${channel(sourceRgb.r, targetRgb.r)}${channel(sourceRgb.g, targetRgb.g)}${channel(sourceRgb.b, targetRgb.b)}`;
+};
+
+const logoDataUri = (logo: string) => {
+  const file = readFileSync(
+    new URL(`../../../public/logos/${logo}.svg`, import.meta.url)
+  );
+  return `data:image/svg+xml;base64,${file.toString("base64")}`;
+};
+
+const wrapText = (text: string, maxChars: number, maxLines: number) => {
+  const words = text.split(/\s+/);
+  const lines: string[] = [];
+  let current = "";
+
+  for (const word of words) {
+    const next = current ? `${current} ${word}` : word;
+    if (next.length > maxChars && current) {
+      lines.push(current);
+      current = word;
+    } else {
+      current = next;
+    }
+
+    if (lines.length === maxLines) break;
+  }
+
+  if (current && lines.length < maxLines) lines.push(current);
+  if (lines.length === maxLines && words.join(" ").length > lines.join(" ").length) {
+    lines[maxLines - 1] = `${lines[maxLines - 1].replace(/[.,;:!?]+$/, "")}...`;
+  }
+
+  return lines;
+};
+
+const formatDate = (date: Date) =>
+  date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+
+const imageCacheKey = (svgContent: string) =>
+  createHash("sha256").update(svgContent).digest("hex");
+
+const renderPng = async (svgContent: string) => {
+  const cacheKey = imageCacheKey(svgContent);
+  const cacheFile = new URL(`${cacheKey}.png`, CACHE_DIR);
+
+  if (existsSync(cacheFile)) {
+    return readFileSync(cacheFile);
+  }
+
+  const image = await sharp(Buffer.from(svgContent)).png().toBuffer();
+  mkdirSync(CACHE_DIR, { recursive: true });
+  writeFileSync(cacheFile, image);
+  return image;
+};
+
+const svg = ({
+  title,
+  date,
+  author,
+  project,
+  logo,
+  color,
+}: {
+  title: string;
+  date: Date;
+  author: string;
+  project?: string;
+  logo: string;
+  color: string;
+}) => {
+  const accent = color;
+  const deepAccent = mix(accent, "#111820", 0.72);
+  const midAccent = mix(accent, "#111820", 0.45);
+  const softAccent = mix(accent, "#ffffff", 0.72);
+  const logoUri = logoDataUri(logo);
+  const titleLines = wrapText(title, 18, 3);
+  const projectName = (project ?? "Blog").replace(/^Linwood\s+/i, "");
+  const titleSize = titleLines.length > 2 ? 58 : 66;
+  const titleLineHeight = titleLines.length > 2 ? 66 : 74;
+
+  return `
+<svg width="${WIDTH}" height="${HEIGHT}" viewBox="0 0 ${WIDTH} ${HEIGHT}" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0%" stop-color="#111820"/>
+      <stop offset="56%" stop-color="${deepAccent}"/>
+      <stop offset="100%" stop-color="${midAccent}"/>
+    </linearGradient>
+    <radialGradient id="glow" cx="72%" cy="42%" r="60%">
+      <stop offset="0%" stop-color="${accent}" stop-opacity="0.44"/>
+      <stop offset="58%" stop-color="${accent}" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="${accent}" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="logoShadow" x="-30%" y="-30%" width="160%" height="160%">
+      <feDropShadow dx="0" dy="24" stdDeviation="22" flood-color="#000" flood-opacity="0.28"/>
+    </filter>
+  </defs>
+  <rect width="${WIDTH}" height="${HEIGHT}" fill="url(#bg)"/>
+  <rect width="${WIDTH}" height="${HEIGHT}" fill="url(#glow)"/>
+  <path d="M760 -40C880 112 922 254 884 386C855 488 879 568 956 670H1200V-40H760Z" fill="${accent}" opacity="0.2"/>
+  <path d="M906 -40C1008 116 1038 260 996 392C963 497 990 584 1074 670H1200V-40H906Z" fill="${softAccent}" opacity="0.15"/>
+  <circle cx="95" cy="542" r="248" fill="${accent}" opacity="0.09"/>
+  <image href="${logoUri}" x="774" y="117" width="330" height="330" preserveAspectRatio="xMidYMid meet" filter="url(#logoShadow)" opacity="1"/>
+  <text x="96" y="112" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="900" fill="${accent}">${escapeXml(projectName)}</text>
+  <line x1="96" y1="144" x2="246" y2="144" stroke="${accent}" stroke-width="7" stroke-linecap="round"/>
+  <text x="96" y="250" font-family="Inter, Arial, sans-serif" font-size="${titleSize}" font-weight="950" fill="#ffffff">
+    ${titleLines.map((line, index) => `<tspan x="96" dy="${index === 0 ? 0 : titleLineHeight}">${escapeXml(line)}</tspan>`).join("")}
+  </text>
+  <text x="96" y="520" font-family="Inter, Arial, sans-serif" font-size="25" font-weight="850" fill="#ffffff">${escapeXml(author)}</text>
+  <text x="96" y="554" font-family="Inter, Arial, sans-serif" font-size="22" fill="#b7bec9">${escapeXml(formatDate(date))}</text>
+  <text x="1104" y="526" text-anchor="end" font-family="Inter, Arial, sans-serif" font-size="24" font-weight="900" fill="#ffffff">linwood.dev</text>
+  <text x="1104" y="556" text-anchor="end" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="800" fill="${accent}">Blog</text>
+</svg>`;
+};
+
+export async function getStaticPaths() {
+  const posts = await getCollection("blog");
+  return posts
+    .filter((post) => !post.data.unlisted)
+    .map((post) => ({
+      params: { slug: getEntryUrl(post) },
+      props: { post },
+    }));
+}
+
+export async function GET({ props }: APIContext) {
+  const post = props.post as Awaited<ReturnType<typeof getCollection<"blog">>>[number];
+  const author = await getEntry("authors", post.data.author.id);
+  const project = await getEntryProject(post);
+  const svgContent = svg({
+    title: post.data.title,
+    date: post.data.date,
+    author: author?.data.name ?? "Linwood",
+    project: project?.data.title,
+    logo: project?.data.logo ?? project?.id ?? "logo",
+    color: project?.data.color ?? "#35EF53",
+  });
+  const image = await renderPng(svgContent);
+
+  return new Response(new Uint8Array(image), {
+    headers: {
+      "Content-Type": "image/png",
+      "Cache-Control": "public, max-age=31536000, immutable",
+    },
+  });
+}

Original file line number	Diff line number	Diff line change
`@@ -4,5 +4,6 @@`
`4`	`4`	`"description": "🎨 Powerful, minimalistic, cross-platform, opensource note-taking app",`
`5`	`5`	`"website": "https://docs.butterfly.linwood.dev",`
`6`	`6`	`"translation": "https://translate.linwood.dev/butterfly/",`
	`7`	`+ "color": "#EBB733",`
`7`	`8`	`"order": 1`
`8`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,5 +3,6 @@`
`3`	`3`	`"source": "https://github.com/LinwoodDev/dev_doctor",`
`4`	`4`	`"description": "Free, opensource, serverless learning platform",`
`5`	`5`	`"website": "https://docs.dev-doctor.linwood.dev",`
	`6`	`+ "color": "#5C3070",`
`6`	`7`	`"unlisted": true`
`7`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,5 +3,6 @@`
`3`	`3`	`"source": "https://github.com/LinwoodDev/Flow",`
`4`	`4`	`"description": "WIP: Feature rich event, group and time managment system",`
`5`	`5`	`"website": "https://docs.flow.linwood.dev",`
	`6`	`+ "color": "#35CDEF",`
`6`	`7`	`"order": 2`
`7`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,5 +3,6 @@`
`3`	`3`	`"source": "https://github.com/LinwoodDev/Launcher",`
`4`	`4`	`"description": "WIP: 🚀 A simple, minimalistic, cross-platform, opensource launcher",`
`5`	`5`	`"website": "https://docs.launch.linwood.dev",`
	`6`	`+ "color": "#2196F3",`
`6`	`7`	`"unlisted": true`
`7`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,5 +4,6 @@`
`4`	`4`	`"description": "WIP: Library for Universal Networking Assets",`
`5`	`5`	`"website": "https://luna.linwood.dev",`
`6`	`6`	`"logo": "luna",`
	`7`	`+ "color": "#D9C38B",`
`7`	`8`	`"order": 5`
`8`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,5 +3,6 @@`
`3`	`3`	`"source": "https://github.com/LinwoodDev/Setonix",`
`4`	`4`	`"description": "WIP: Powerful, customizable, cross-platform, opensource table sandbox game",`
`5`	`5`	`"website": "https://setonix.world",`
	`6`	`+ "color": "#B46B43",`
`6`	`7`	`"order": 3`
`7`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,5 +3,6 @@`
`3`	`3`	`"source": "https://github.com/LinwoodDev/Swamp",`
`4`	`4`	`"description": "WIP: Universal Secure Web-Socket Application Messaging Proxy for Linwood Apps",`
`5`	`5`	`"website": "https://swamp.linwood.dev",`
	`6`	`+ "color": "#4D55D8",`
`6`	`7`	`"order": 4`
`7`	`8`	`}`