ZacharyZhang-NY/omarchycn
2
2
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 3 Wiki Activity

Bring the landing site into the repo as site/

Browse Source 
Vite 8 vanilla page for omarchycn.zacharyzhang.com: kami palette on a
12-col Swiss grid, self-hosted Fusion Pixel zh_hans (OFL shipped),
GSAP ScrollSmoother/ScrollTrigger with reduced-motion opt-out, reicon
icons, ISO download plus one-click convert command copy, real
installer screenshot. shots.mjs is the rendered-state harness; deploy
is npx wrangler deploy from site/ (custom domain + workers.dev).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019hLK3wsDuKVAC37GgDqg6H
This commit is contained in:
ZacharyZhang-NY
2026-08-27 20:07:43 -04:00
co-authored by Claude Fable 5
parent f72a48f747
commit f9c9b3c364
14 changed files with 2044 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/shots.mjs
+70
View File
@@ -0,0 +1,70 @@
// Rendered-state verification: full-page shots at key widths + interaction states
import puppeteer from "puppeteer-core";
import { mkdirSync } from "node:fs";
const CHROME = process.env.CHROME;
const BASE = process.env.BASE ?? "http://localhost:4173";
if (!CHROME) throw new Error("CHROME env (chrome.exe path) is required");
mkdirSync("shots", { recursive: true });
const browser = await puppeteer.launch({ executablePath: CHROME, headless: "new" });
const page = await browser.newPage();
// Layout passes: reduced motion = static truth of the full page
await page.emulateMediaFeatures([{ name: "prefers-reduced-motion", value: "reduce" }]);
for (const w of [1440, 1280, 960, 375]) {
await page.setViewport({ width: w, height: 900 });
await page.goto(BASE, { waitUntil: "networkidle0" });
await page.evaluate(() => document.fonts.ready);
await new Promise((r) => setTimeout(r, 1400));
await page.screenshot({ path: `shots/w${w}.png`, fullPage: true });
console.log(`shot w${w}`);
}
// Motion pass: real scroll, reveals must land every section at opacity 1
await page.emulateMediaFeatures([{ name: "prefers-reduced-motion", value: "no-preference" }]);
await page.setViewport({ width: 1440, height: 900 });
await page.goto(BASE, { waitUntil: "networkidle0" });
await new Promise((r) => setTimeout(r, 1200));
await page.evaluate(async () => {
for (let y = 0; y <= document.body.scrollHeight; y += 300) {
window.scrollTo(0, y);
await new Promise((r) => setTimeout(r, 60));
}
});
await new Promise((r) => setTimeout(r, 1200));
const opacities = await page.evaluate(() =>
[".shot", ".feat", ".verify h2", ".foot p"].map(
(s) => `${s}=${getComputedStyle(document.querySelector(s)).opacity}`,
),
);
console.log("post-scroll opacities:", opacities.join(" "));
await page.screenshot({ path: "shots/motion-bottom.png" });
await page.setViewport({ width: 1440, height: 900 });
await page.goto(BASE, { waitUntil: "networkidle0" });
await new Promise((r) => setTimeout(r, 1400));
await page.keyboard.press("g");
await new Promise((r) => setTimeout(r, 300));
await page.screenshot({ path: "shots/grid-overlay.png", fullPage: false });
console.log("shot grid-overlay");
await page.keyboard.press("g");
const ctx = browser.defaultBrowserContext();
await ctx.overridePermissions(BASE, ["clipboard-read", "clipboard-write", "clipboard-sanitized-write"]).catch(() => {});
await page.hover(".cmd");
await new Promise((r) => setTimeout(r, 200));
await page.screenshot({ path: "shots/cmd-hover.png" });
await page.click("#copy-btn");
await new Promise((r) => setTimeout(r, 400));
const state = await page.evaluate(() => ({
label: document.querySelector(".copy-text").textContent,
clip: navigator.clipboard.readText ? undefined : "n/a",
}));
const clip = await page.evaluate(() => navigator.clipboard.readText().catch(() => "READ-FAIL"));
console.log("copy label:", state.label, "| clipboard:", clip.slice(0, 60) + "…");
await page.screenshot({ path: "shots/cmd-copied.png" });
await browser.close();
console.log("SHOTS-DONE");