fix(blog): optimize component share logic, typography, and modal layouts

apps/web/scripts/generate-thumbnail.ts

@@ -0,0 +1,45 @@
+import { ThumbnailGenerator } from '@mintel/thumbnail-generator';
+import * as path from 'node:path';
+import * as fs from 'node:fs/promises';
+
+async function run() {
+    const apiKey = process.env.REPLICATE_API_KEY;
+    if (!apiKey) {
+        console.error("❌ Missing REPLICATE_API_KEY in environment.");
+        process.exit(1);
+    }
+
+    const targetFile = process.argv[2];
+    if (!targetFile) {
+        console.error("❌ Usage: npx tsx scripts/generate-thumbnail.ts <file-or-topic>");
+        process.exit(1);
+    }
+
+    let topic = targetFile;
+    let filename = "thumbnail.png";
+
+    // Try to parse the topic from the MDX frontmatter if a file is provided
+    if (targetFile.endsWith('.mdx')) {
+        try {
+            const content = await fs.readFile(targetFile, 'utf8');
+            const titleMatch = content.match(/title:\s*"?([^"\n]+)"?/);
+            topic = titleMatch ? titleMatch[1] : path.basename(targetFile, '.mdx');
+            filename = `${path.basename(targetFile, '.mdx')}-thumb.png`;
+        } catch (e) {
+            console.warn(`⚠️ Could not read ${targetFile} as a file. Using literal argument as topic.`);
+            topic = targetFile;
+        }
+    }
+
+    console.log(`Generating abstract thumbnail for topic: "${topic}"`);
+
+    const generator = new ThumbnailGenerator({ replicateApiKey: apiKey });
+    const outputPath = path.join(process.cwd(), 'public', 'blog', filename);
+
+    await generator.generateImage(topic, outputPath);
+}
+
+run().catch((e) => {
+    console.error("❌ Thumbnail generation failed:", e);
+    process.exit(1);
+});