Merge branch 'fix/og-image-public'

Author: HelgeSverre

website/llms.txt

@@ -40,7 +40,7 @@ make install  # Installs binary + shell completions + man pages
 
 ```bash
 sql-splitter --version
-# sql-splitter 1.14.0
+# sql-splitter 1.14.1
 ```
 
 ## Commands Overview

website/og-image.png

@@ -10,6 +10,7 @@
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
+    "og": "tsx scripts/generate-og-image.ts",
     "test": "playwright test",
     "format": "bunx prettier . --write",
     "test:ui": "playwright test --ui",
@@ -23,7 +24,7 @@
     "@resvg/resvg-js": "^2.6.2",
     "@types/react": "^18.3.31",
     "@types/react-dom": "^18.3.7",
-    "astro": "^7.0.7",
+    "astro": "^7.0.9",
     "astro-indexnow": "^2.3.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -38,6 +39,6 @@
     "ajv-cli": "^5.0.0",
     "ajv-formats": "^3.0.1",
     "tailwindcss": "^4.3.2",
-    "tsx": "^4.23.0"
+    "tsx": "^4.23.1"
   }
 }

website/package.json

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+/**
+ * Renders og-image.html to public/og-image.png (1200x630).
+ *
+ * The homepage BaseLayout references a static image at /og-image.png, which
+ * Astro serves from public/. Generating straight into public/ keeps the
+ * committed image and its HTML source from drifting apart.
+ *
+ * Usage: bun run og   (or: npx tsx scripts/generate-og-image.ts)
+ */
+
+import { resolve, dirname } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { chromium } from "playwright";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const source = resolve(__dirname, "../og-image.html");
+const output = resolve(__dirname, "../public/og-image.png");
+
+const browser = await chromium.launch();
+const page = await browser.newPage({
+  viewport: { width: 1200, height: 630 },
+  deviceScaleFactor: 1,
+});
+await page.goto(pathToFileURL(source).href);
+// Wait for the webfont to load so text renders with the intended face.
+await page.evaluate(() => document.fonts.ready);
+await page.screenshot({
+  path: output,
+  clip: { x: 0, y: 0, width: 1200, height: 630 },
+});
+await browser.close();
+
+console.log(`Rendered ${output}`);

website/public/og-image.png

@@ -23,6 +23,7 @@ const { title, description = 'High-performance SQL dump toolkit. Split, merge, c
   <meta property="og:image" content="https://sql-splitter.dev/og-image.png">
   <meta property="og:image:width" content="1200">
   <meta property="og:image:height" content="630">
+  <meta property="og:image:type" content="image/png">
 
   <!-- Twitter Card -->
   <meta name="twitter:card" content="summary_large_image">

website/scripts/generate-og-image.ts

@@ -23,6 +23,27 @@ export const onRequest = defineRouteMiddleware((context, next) => {
         content: ogImageUrl,
       },
     },
+    {
+      tag: "meta",
+      attrs: {
+        property: "og:image:width",
+        content: "1200",
+      },
+    },
+    {
+      tag: "meta",
+      attrs: {
+        property: "og:image:height",
+        content: "630",
+      },
+    },
+    {
+      tag: "meta",
+      attrs: {
+        property: "og:image:type",
+        content: "image/png",
+      },
+    },
     {
       tag: "meta",
       attrs: {