add og image

docs/astro.config.mjs

@@ -15,6 +15,10 @@ export default defineConfig({
         // PNG fallbacks for browsers that don't use the SVG favicon, plus the Apple touch icon.
         { tag: 'link', attrs: { rel: 'icon', href: '/favicon-32.png', type: 'image/png', sizes: '32x32' } },
         { tag: 'link', attrs: { rel: 'apple-touch-icon', href: '/favicon.png', sizes: '180x180' } },
+        // Social-preview card for shared links.
+        { tag: 'meta', attrs: { property: 'og:image', content: 'https://mokkit.net/og.png' } },
+        { tag: 'meta', attrs: { name: 'twitter:image', content: 'https://mokkit.net/og.png' } },
+        { tag: 'meta', attrs: { name: 'twitter:card', content: 'summary_large_image' } },
       ],
       social: [
         { icon: 'github', label: 'GitHub', href: 'https://github.com/GrafGenerator/mokkit' },

docs/scripts/gen-icon.mjs

@@ -6,19 +6,26 @@ import { fileURLToPath } from 'node:url';
 import { dirname, join } from 'node:path';
 
 const root = join(dirname(fileURLToPath(import.meta.url)), '..', '..');
-const svg = readFileSync(join(root, 'assets', 'icon.svg'));
+const icon = readFileSync(join(root, 'assets', 'icon.svg'));
+const og = readFileSync(join(root, 'assets', 'og.svg'));
 
-const jobs = [
+// Square, transparent icons/favicons.
+const squares = [
   ['assets/icon.png', 128],            // NuGet PackageIcon
   ['assets/icon-256.png', 256],        // higher-res spare (social, README)
   ['docs/public/favicon.png', 180],    // apple-touch + PNG fallback
   ['docs/public/favicon-32.png', 32],  // classic favicon fallback
 ];
-
-for (const [rel, size] of jobs) {
-  await sharp(svg, { density: 512 })
+for (const [rel, size] of squares) {
+  await sharp(icon, { density: 512 })
     .resize(size, size, { fit: 'contain', background: { r: 0, g: 0, b: 0, alpha: 0 } })
     .png()
     .toFile(join(root, rel));
   console.log(`wrote ${rel} (${size}px)`);
 }
+
+// Open Graph / social-preview banner (1280x640), rendered 2x then downsampled for crisp text.
+for (const rel of ['assets/og.png', 'docs/public/og.png']) {
+  await sharp(og, { density: 192 }).resize(1280, 640).png().toFile(join(root, rel));
+  console.log(`wrote ${rel} (1280x640)`);
+}