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

apps/web/scripts/verify-embeds.ts

@@ -0,0 +1,61 @@
+import puppeteer from 'puppeteer';
+
+(async () => {
+    try {
+        console.log("Starting Chrome...");
+        const browser = await puppeteer.launch({
+            headless: 'new',
+            args: ['--no-sandbox', '--disable-setuid-sandbox']
+        });
+
+        const page = await browser.newPage();
+
+        // Pass any console logs from the browser to our terminal
+        page.on('console', msg => console.log('BROWSER LOG:', msg.text()));
+
+        console.log("Navigating to http://localhost:3000/blog/why-pagespeed-fails ...");
+        await page.goto('http://localhost:3000/blog/why-pagespeed-fails', { waitUntil: 'networkidle0' });
+
+        // Wait a bit just in case
+        await new Promise(r => setTimeout(r, 2000));
+
+        console.log("--- Inspecting Mermaid ---");
+        const mermaidLabels = await page.evaluate(() => {
+            const labels = Array.from(document.querySelectorAll('.mermaid svg text, .mermaid svg .nodeLabel'));
+            return labels.map(l => l.textContent).filter(Boolean);
+        });
+        console.log(`Found ${mermaidLabels.length} mermaid labels.`);
+        if (mermaidLabels.length > 0) {
+            console.log("Sample labels:", mermaidLabels.slice(0, 5));
+        } else {
+            console.log("FAIL: No SVG labels found inside Mermaid containers!");
+        }
+
+        console.log("\n--- Inspecting Twitter Embed ---");
+        const tweets = await page.evaluate(() => {
+            const tweetContainers = Array.from(document.querySelectorAll('.react-tweet-theme'));
+            return tweetContainers.map(container => ({
+                html: container.outerHTML.substring(0, 150) + "..."
+            }));
+        });
+
+        console.log(`Found ${tweets.length} Tweet containers.`);
+        if (tweets.length > 0) {
+            console.log("Success! Tweet container snippet:", tweets[0].html);
+
+            // Further inspection of react-tweet - it sometimes renders an error div if not found
+            const tweetErrors = await page.evaluate(() => {
+                return Array.from(document.querySelectorAll('.react-tweet-theme [data-testid="tweet-not-found"]')).length;
+            });
+            if (tweetErrors > 0) {
+                console.log(`FAIL: Found ${tweetErrors} 'Tweet not found' error states inside the container.`);
+            }
+        } else {
+            console.log("FAIL: No react-tweet containers found on page. It might be completely crashing or skipped.");
+        }
+
+        await browser.close();
+    } catch (e) {
+        console.error("Script failed:", e);
+    }
+})();