improve puppeteer performance, change screenshots to (smaller) jpg

.gitignore

@@ -18,5 +18,6 @@ pnpm-debug.log*
 # macOS-specific files
 .DS_Store
 .idea/
-.eslintcache
-.vercel
+.eslintcache
+.vercel
+.puppeteer

build-scripts/social-previews/index.ts

@@ -14,21 +14,61 @@ import { Layout } from "./base";
 let browser: puppeteer.Browser;
 let page: puppeteer.Page;
 
+const browser_args = [
+	"--autoplay-policy=user-gesture-required",
+	"--disable-background-networking",
+	"--disable-background-timer-throttling",
+	"--disable-backgrounding-occluded-windows",
+	"--disable-breakpad",
+	"--disable-client-side-phishing-detection",
+	"--disable-component-update",
+	"--disable-default-apps",
+	"--disable-dev-shm-usage",
+	"--disable-domain-reliability",
+	"--disable-extensions",
+	"--disable-features=AudioServiceOutOfProcess",
+	"--disable-hang-monitor",
+	"--disable-ipc-flooding-protection",
+	"--disable-notifications",
+	"--disable-offer-store-unmasked-wallet-cards",
+	"--disable-popup-blocking",
+	"--disable-print-preview",
+	"--disable-prompt-on-repost",
+	"--disable-renderer-backgrounding",
+	"--disable-setuid-sandbox",
+	"--disable-speech-api",
+	"--disable-sync",
+	"--hide-scrollbars",
+	"--ignore-gpu-blacklist",
+	"--metrics-recording-only",
+	"--mute-audio",
+	"--no-default-browser-check",
+	"--no-first-run",
+	"--no-pings",
+	"--no-sandbox",
+	"--no-zygote",
+	"--password-store=basic",
+	"--use-gl=swiftshader",
+	"--use-mock-keychain",
+	"--disable-web-security",
+];
+
 const createPostSocialPreviewPng = async (layout: Layout, post: PostInfo) => {
 	if (!browser) {
 		browser = await chromium.puppeteer.launch({
-			args: [...chromium.args, "--hide-scrollbars", "--disable-web-security"],
+			args: [...chromium.args, ...browser_args],
 			defaultViewport: chromium.defaultViewport,
 			executablePath: await chromium.executablePath,
 			headless: true,
 			ignoreHTTPSErrors: true,
+			userDataDir: "./.puppeteer",
 		});
 		page = await browser.newPage();
 		await page.setViewport(heightWidth);
 	}
 
 	await page.setContent(await renderPostPreviewToString(layout, post));
-	return (await page.screenshot()) as Buffer;
+	return (await page.screenshot({ type: "jpeg" })) as Buffer;
 };
 
 const build = async () => {
@@ -47,10 +87,11 @@ const build = async () => {
 			const png = await createPostSocialPreviewPng(layout, post);
 
 			await fsPromises.writeFile(
-				resolve(outDir, `${post.slug}.${layout.name}.png`),
+				resolve(outDir, `${post.slug}.${layout.name}.jpg`),
 				png
 			);
 		}
+		console.log(post.slug);
 	}
 
 	await browser.close();

src/pages/[locale]/posts/[postid].astro

@@ -59,7 +59,7 @@ const otherLangs = translations
 			otherLangs,
 			currentLang: post.locale,
 		}}
-		shareImage={`/generated/${post.slug}.twitter-preview.png`}
+		shareImage={`/generated/${post.slug}.twitter-preview.jpg`}
 	/>
 	<BlogPost Content={Content} post={post} posts={posts} />
 </Document>

src/pages/posts/[postid].astro

@@ -55,7 +55,7 @@ const otherLangs = translations
 			otherLangs,
 			currentLang: post.locale,
 		}}
-		shareImage={`/generated/${post.slug}.twitter-preview.png`}
+		shareImage={`/generated/${post.slug}.twitter-preview.jpg`}
 	/>
 	<BlogPost Content={Content} post={post} posts={posts} />
 </Document>