feat(site): redesign promotion experience

apps/site/tools/capture-site-og.mjs

@@ -0,0 +1,53 @@
+import fs from "node:fs";
+import path from "node:path";
+import url from "node:url";
+
+import puppeteer from "puppeteer-core";
+
+const here = path.dirname(url.fileURLToPath(import.meta.url));
+const siteRoot = path.resolve(here, "..");
+const origin = process.env.DESIGNPACA_PREVIEW_ORIGIN || "http://localhost:4321";
+const chromeCandidates = [
+  process.env.CHROME_PATH,
+  "C:/Program Files/Google/Chrome/Application/chrome.exe",
+  "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
+  "/usr/bin/google-chrome",
+  "/usr/bin/chromium",
+];
+const executablePath = chromeCandidates.find((candidate) => candidate && fs.existsSync(candidate));
+
+if (!executablePath) {
+  throw new Error("Chrome/Chromium executable not found. Set CHROME_PATH before capturing site OG images.");
+}
+
+const captures = [
+  { path: "/", output: "src/assets/og-designpaca-ko.png" },
+  { path: "/en/", output: "src/assets/og-designpaca-en.png" },
+];
+
+const browser = await puppeteer.launch({
+  executablePath,
+  headless: true,
+  args: ["--force-color-profile=srgb", "--no-first-run", "--no-default-browser-check"],
+});
+
+try {
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1200, height: 630, deviceScaleFactor: 1 });
+  await page.emulateMediaFeatures([{ name: "prefers-reduced-motion", value: "reduce" }]);
+
+  for (const capture of captures) {
+    const target = new URL(capture.path, origin).href;
+    const response = await page.goto(target, { waitUntil: "networkidle0", timeout: 30_000 });
+    if (!response?.ok()) throw new Error(`Failed to load ${target}: ${response?.status() ?? "no response"}`);
+    await page.evaluate(() => document.fonts.ready);
+    await page.screenshot({
+      path: path.join(siteRoot, capture.output),
+      type: "png",
+      captureBeyondViewport: false,
+    });
+    console.log(`${capture.output} · 1200x630`);
+  }
+} finally {
+  await browser.close();
+}