@homie-rocks/studio 0.6.0 → 0.8.0

package/lib/look.mjs

@@ -0,0 +1,101 @@
+/**
+ * `homie-studio look [<path>...] --url <site> [--shots <dir>]` — the studio's pages as a stranger sees them:
+ * each page on a computer (1440 x 900), a phone held upright (390 x 844) and the phone turned sideways
+ * (844 x 390), scrolled to the end so everything that rises into view has, then shot whole and above the fold.
+ * Measured on every shot: the answer's status, anything wider than the screen, whether the Play button is on the
+ * first screen (Home and a game's landing), pictures that did not load, footage that did not play, and script errors. Pictures go to
+ * `--shots` (default .studio/look/), which git ignores. One Chrome, closed at the end; its visits are house QA
+ * (the studio's stats leave them out).
+ */
+import { existsSync, mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+const CHROMES = [
+  process.env.CHROME_PATH,
+  '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+  '/Applications/Chromium.app/Contents/MacOS/Chromium',
+  '/usr/bin/google-chrome', '/usr/bin/chromium', '/usr/bin/chromium-browser',
+].filter(Boolean);
+
+export const LOOK_DEVICES = {
+  computer: { width: 1440, height: 900, deviceScaleFactor: 1 },
+  phone: { width: 390, height: 844, deviceScaleFactor: 2, isMobile: true, hasTouch: true },
+  sideways: { width: 844, height: 390, deviceScaleFactor: 2, isMobile: true, hasTouch: true },
+};
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const nameOf = (path) => path.replace(/^\/+|\/+$/g, '').replace(/[^a-z0-9]+/gi, '-') || 'home';
+
+export async function look({ url, paths, shots, devices = Object.keys(LOOK_DEVICES), log = () => {} }) {
+  if (!url) return { ok: false, command: 'look', why: 'give --url (the local dev address or the live site)' };
+  const chrome = CHROMES.find((p) => existsSync(p));
+  if (!chrome) return { ok: false, command: 'look', why: 'no Chrome found (set CHROME_PATH)' };
+  let puppeteer;
+  try { puppeteer = (await import('puppeteer-core')).default; } catch { return { ok: false, command: 'look', why: 'puppeteer-core is not installed (it comes with @homie-rocks/studio; run npm install)' }; }
+  const base = String(url).replace(/\/+$/, '');
+  mkdirSync(shots, { recursive: true });
+  const profile = mkdtempSync(join(tmpdir(), 'homie-studio-look-'));
+  const browser = await puppeteer.launch({
+    executablePath: chrome, headless: true, userDataDir: profile,
+    args: ['--use-angle=metal', '--enable-gpu-rasterization', '--ignore-gpu-blocklist', '--autoplay-policy=no-user-gesture-required', '--no-first-run', '--no-default-browser-check'],
+  });
+  const rows = [];
+  try {
+    for (const path of paths) {
+      for (const device of devices) {
+        const page = await browser.newPage();
+        const errors = [];
+        page.on('pageerror', (e) => errors.push(String(e?.message ?? e).slice(0, 200)));
+        page.on('console', (m) => { if (m.type() === 'error') errors.push(m.text().slice(0, 200)); });
+        await page.setViewport(LOOK_DEVICES[device]);
+        await page.setUserAgent(`${await browser.userAgent()} homie-studio-check look`);
+        const t0 = Date.now();
+        const res = await page.goto(`${base}${path}`, { waitUntil: 'networkidle2', timeout: 45_000 }).catch((e) => { errors.push(`open: ${e.message}`); return null; });
+        const ms = Date.now() - t0;
+        await sleep(900);
+        const fold = await page.evaluate(() => {
+          // Home and a game's landing lead with Play; other pages (a post, the rooms) are not judged on it.
+          if (!['home', 'landing'].includes(document.body?.dataset?.page ?? '')) return { play: null };
+          const play = [...document.querySelectorAll('.play')].find((a) => { const r = a.getBoundingClientRect(); return r.width > 0 && r.height > 0; });
+          const r = play?.getBoundingClientRect();
+          return { play: r ? r.bottom <= innerHeight && r.top >= 0 : false };
+        });
+        const foldFile = join(shots, `${nameOf(path)}-${device}-fold.png`);
+        await page.screenshot({ path: foldFile });
+        await page.evaluate(async () => { for (let y = 0; y < document.documentElement.scrollHeight; y += Math.round(innerHeight * 0.7)) { window.scrollTo({ top: y, behavior: 'instant' }); await new Promise((r) => setTimeout(r, 110)); } window.scrollTo({ top: 0, behavior: 'instant' }); });
+        await sleep(900);
+        const facts = await page.evaluate(() => ({
+          title: document.title,
+          wide: [...document.querySelectorAll('body *')].filter((e) => { const b = e.getBoundingClientRect(); return b.width > 0 && b.right > innerWidth + 1 && !e.closest('[data-hero-media],.nav,pre,.hero-media'); }).slice(0, 5).map((e) => `${e.tagName.toLowerCase()}${e.className ? `.${String(e.className).split(' ')[0]}` : ''}`),
+          brokenImages: [...document.images].filter((i) => i.complete && i.naturalWidth === 0 && i.getAttribute('src')).map((i) => i.getAttribute('src')).slice(0, 5),
+          footage: [...document.querySelectorAll('[data-hero-media] video')].map((v) => ({ playing: !v.paused && v.readyState >= 2, src: (v.currentSrc || '').split('/').pop() })),
+          height: document.documentElement.scrollHeight,
+        }));
+        const file = join(shots, `${nameOf(path)}-${device}.png`);
+        await page.screenshot({ path: file, fullPage: true });
+        const row = {
+          path, device, status: res?.status() ?? null, ms, title: facts.title, height: facts.height, playAboveFold: fold.play,
+          tooWide: facts.wide, brokenImages: facts.brokenImages, footage: facts.footage, errors, shot: file, fold: foldFile,
+        };
+        const bad = [];
+        if (!row.status || row.status >= 400) bad.push(`answered ${row.status}`);
+        if (row.tooWide.length) bad.push(`wider than the screen: ${row.tooWide.join(', ')}`);
+        if (row.playAboveFold === false && device !== 'sideways') bad.push('Play is not on the first screen');
+        if (row.brokenImages.length) bad.push(`pictures that did not load: ${row.brokenImages.join(', ')}`);
+        if (row.footage.some((f) => !f.playing)) bad.push('the hero footage did not play');
+        if (errors.length) bad.push(`${errors.length} script error(s): ${errors[0]}`);
+        row.ok = bad.length === 0;
+        row.problems = bad;
+        rows.push(row);
+        log(`${row.ok ? 'ok  ' : 'LOOK'} ${path} ${device}: ${row.status} in ${ms} ms${bad.length ? ` · ${bad.join(' · ')}` : ''}`);
+        await page.close();
+      }
+    }
+  } finally {
+    await browser.close().catch(() => {});
+    rmSync(profile, { recursive: true, force: true });
+  }
+  writeFileSync(join(shots, 'look.json'), `${JSON.stringify(rows, null, 2)}\n`);
+  return { ok: rows.every((r) => r.ok), command: 'look', url: base, shots, rows };
+}

package/lib/markdown.mjs

@@ -0,0 +1,121 @@
+/**
+ * Markdown for a studio's posts, rendered once at build time into HTML the site serves as it is.
+ *
+ * A small, safe subset (site/SITE.md lists it): headings, paragraphs, **bold**, *italic*, ~~struck~~,
+ * `code`, fenced code blocks, links, images, lists, quotes and rules. Everything else is text: raw HTML in
+ * a post is escaped, never passed through, and a link or image goes only to an https:// address or a path
+ * on the studio's own site (`/…`), so a post can never run a script or point at `javascript:`.
+ */
+
+const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+export const escapeHtml = (value) => String(value ?? '').replace(/[&<>"']/g, (c) => ESC[c]);
+
+/** A link or image address a post may use: https://…, or a path on this site. Anything else is null. */
+export function safeUrl(value, { images = false } = {}) {
+  const url = String(value ?? '').trim();
+  if (!url || /[\s<>"'`\\]/.test(url)) return null;
+  if (url.startsWith('/') && !url.startsWith('//')) return url;
+  if (!images && /^#[A-Za-z0-9_-]{1,64}$/.test(url)) return url;
+  try {
+    const u = new URL(url);
+    return u.protocol === 'https:' ? u.href : null;
+  } catch { return null; }
+}
+
+const HOLD = /\u0000(\d+)\u0000/g;
+const unescapeHtml = (v) => v.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, '&');
+
+function emphasis(s) {
+  return s
+    .replace(/\*\*([^*]+)\*\*|__([^_]+)__/g, (m, a, b) => `<strong>${a ?? b}</strong>`)
+    .replace(/(^|[^*\w])\*([^*\s][^*]*?)\*(?!\w)/g, (m, pre, t) => `${pre}<em>${t}</em>`)
+    .replace(/(^|[^_\w])_([^_\s][^_]*?)_(?!\w)/g, (m, pre, t) => `${pre}<em>${t}</em>`)
+    .replace(/~{2}([^~]+)~{2}/g, '<s>$1</s>');
+}
+
+/* Inline: code spans, images and links are held aside as finished HTML (so emphasis never reaches inside an
+   address), then emphasis and line breaks, then the held pieces go back. */
+function inline(text) {
+  const kept = [];
+  const hold = (html) => { kept.push(html); return `\u0000${kept.length - 1}\u0000`; };
+  let s = String(text).replace(/\u0000/g, '').replace(/`([^`\n]+)`/g, (_, code) => hold(`<code>${escapeHtml(code)}</code>`));
+  s = escapeHtml(s);
+  s = s.replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+&quot;([^&]*)&quot;)?\)/g, (m, alt, src, title) => {
+    const url = safeUrl(unescapeHtml(src), { images: true });
+    return url ? hold(`<img src="${escapeHtml(url)}" alt="${alt}" loading="lazy" decoding="async"${title ? ` title="${title}"` : ''}>`) : alt;
+  });
+  s = s.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (m, label, href) => {
+    const url = safeUrl(unescapeHtml(href));
+    if (!url) return label;
+    return hold(`<a href="${escapeHtml(url)}"${/^https:/.test(url) ? ' rel="noopener"' : ''}>${emphasis(label)}</a>`);
+  });
+  s = s.replace(/&lt;(https:\/\/[^\s&]+)&gt;/g, (m, href) => {
+    const url = safeUrl(href);
+    return url ? hold(`<a href="${escapeHtml(url)}" rel="noopener">${escapeHtml(url.replace(/^https:\/\//, '').replace(/\/$/, ''))}</a>`) : m;
+  });
+  s = emphasis(s).replace(/ {2,}\n|\\\n/g, '<br>').replace(/\n/g, ' ');
+  for (let guard = 0; guard < 8 && HOLD.test(s); guard++) s = s.replace(HOLD, (_, i) => kept[Number(i)]);
+  return s;
+}
+
+/**
+ * Markdown to HTML. Headings shift down one level (a post's page has its title as the one h1), so `#` is h2.
+ * Returns the HTML and the plain text (for a feed's summary and the post record's text).
+ */
+export function renderMarkdown(source) {
+  const lines = String(source ?? '').replace(/\r\n?/g, '\n').split('\n');
+  const out = [];
+  let para = [];
+  const flush = () => { if (para.length) { out.push(`<p>${inline(para.join('\n'))}</p>`); para = []; } };
+  const LIST = /^\s{0,3}([-*+]|\d{1,3}[.)])\s+(.*)$/;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const fence = /^(```|~~~)\s*([A-Za-z0-9_+-]{0,20})\s*$/.exec(line);
+    if (fence) {
+      flush();
+      const body = [];
+      for (i += 1; i < lines.length && !lines[i].startsWith(fence[1]); i++) body.push(lines[i]);
+      out.push(`<pre><code${fence[2] ? ` data-lang="${escapeHtml(fence[2])}"` : ''}>${escapeHtml(body.join('\n'))}</code></pre>`);
+      continue;
+    }
+    if (!line.trim()) { flush(); continue; }
+    const h = /^(#{1,5})\s+(.+?)\s*#*\s*$/.exec(line);
+    if (h) { flush(); const n = Math.min(6, h[1].length + 1); out.push(`<h${n}>${inline(h[2])}</h${n}>`); continue; }
+    if (/^\s{0,3}([-*_])(\s*\1){2,}\s*$/.test(line)) { flush(); out.push('<hr>'); continue; }
+    const img = /^!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)\s*$/.exec(line.trim());
+    if (img) {
+      flush();
+      const url = safeUrl(img[2], { images: true });
+      if (url) out.push(`<figure><img src="${escapeHtml(url)}" alt="${escapeHtml(img[1])}" loading="lazy" decoding="async">${img[3] ? `<figcaption>${inline(img[3])}</figcaption>` : ''}</figure>`);
+      continue;
+    }
+    if (/^\s{0,3}>/.test(line)) {
+      flush();
+      const quote = [];
+      for (; i < lines.length && /^\s{0,3}>/.test(lines[i]); i++) quote.push(lines[i].replace(/^\s{0,3}>\s?/, ''));
+      i -= 1;
+      out.push(`<blockquote>${renderMarkdown(quote.join('\n')).html}</blockquote>`);
+      continue;
+    }
+    const item = LIST.exec(line);
+    if (item) {
+      flush();
+      const ordered = /\d/.test(item[1]);
+      const items = [];
+      for (; i < lines.length; i++) {
+        const m = LIST.exec(lines[i]);
+        if (m && /\d/.test(m[1]) === ordered) items.push([m[2]]);
+        else if (items.length && /^\s{2,}\S/.test(lines[i])) items[items.length - 1].push(lines[i].trim());
+        else break;
+      }
+      i -= 1;
+      out.push(`<${ordered ? 'ol' : 'ul'}>${items.map((parts) => `<li>${inline(parts.join('\n'))}</li>`).join('')}</${ordered ? 'ol' : 'ul'}>`);
+      continue;
+    }
+    para.push(line);
+  }
+  flush();
+  const html = out.join('\n');
+  const text = unescapeHtml(html.replace(/<\/?(?:p|h\d|li|ul|ol|blockquote|pre|figure|figcaption|hr|br)\b[^>]*>/g, ' ').replace(/<[^>]+>/g, '')).replace(/\s+/g, ' ').trim();
+  return { html, text };
+}

package/lib/port-check.mjs

@@ -379,7 +379,19 @@ async function ownerTests(h, how, log) {
 
 /* ------------------------------------------------------------------ the check */
 
-export async function portCheck({ url, game, root, only = null, shots = null, log = () => {}, roundTimeoutMs = 240_000 }) {
+/** What a progress feed calls each port check row. */
+export const PORT_CHECK_LABELS = {
+  'owner-desk': 'Moves on a computer', 'owner-phone': 'Moves on a phone', 'owner-iphone': 'Moves on an iPhone (WebKit)',
+  audio: 'Sound starts on the first touch', sandbox: 'Runs in the sandbox', 'ui-cover': 'UI stays out of the middle',
+  round: 'Two browsers finish a round', 'host-kill': 'The host leaves, the round goes on', 'late-join': 'A late joiner takes a bot\'s seat',
+  tv: 'The big screen watches', errors: 'No errors in the game',
+};
+
+/**
+ * `report` (optional; the open progress feed, lib/progress.mjs) hears each row as it runs, passes or fails, gets a
+ * small picture after each screenshot, and can ask the check to stop between rows. Without it nothing changes.
+ */
+export async function portCheck({ url, game, root, only = null, shots = null, log = () => {}, roundTimeoutMs = 240_000, report = null }) {
   if (!url || !game) throw new Error('usage: homie-studio port check <game> --url <site>');
   const base = String(url).replace(/\/+$/, '');
   const want = new Set((only ? String(only).split(',') : ALL).map((s) => s.trim()).filter(Boolean));
@@ -393,13 +405,21 @@ export async function portCheck({ url, game, root, only = null, shots = null, lo
   mkdirSync(out, { recursive: true });
   if (root) { try { writeFileSync(join(root, 'games', game, '.port', '.gitignore'), '*\n'); } catch { /* fine */ } }
   const rows = [];
-  const row = (name, ok, detail) => { rows.push({ name, ok, ...detail }); log(`${ok === null ? 'SKIP' : ok ? 'PASS' : 'FAIL'} ${name}${detail?.why ? `: ${detail.why}` : ''}`); };
+  const tell = (name, state, note) => { try { report?.check?.(name, state, { label: PORT_CHECK_LABELS[name] ?? name, ...(note ? { note } : {}) }); } catch { /* a feed never breaks a check */ } };
+  const row = (name, ok, detail) => { rows.push({ name, ok, ...detail }); log(`${ok === null ? 'SKIP' : ok ? 'PASS' : 'FAIL'} ${name}${detail?.why ? `: ${detail.why}` : ''}`); tell(name, ok === null ? 'skip' : ok ? 'pass' : 'fail', detail?.why); };
   const open_ = [];
   const launch = async (kind) => { const h = await chrome(puppeteer, kind, exe); open_.push(h); return h; };
   const close = async (h) => { const i = open_.indexOf(h); if (i >= 0) open_.splice(i, 1); await h.close(); };
-  const shot = async (h, name) => { await T(h.page.screenshot({ path: join(out, `${name}.png`) }), 15_000); };
+  const shot = async (h, name) => {
+    await T(h.page.screenshot({ path: join(out, `${name}.png`) }), 15_000);
+    if (report?.preview && h.vp) {
+      const b64 = await T(h.page.screenshot({ type: 'jpeg', quality: 60, clip: { x: 0, y: 0, width: h.vp.width, height: h.vp.height, scale: Math.min(1, 480 / h.vp.width) }, encoding: 'base64' }), 15_000, null);
+      if (b64) { try { report.preview({ url: `${base}/${game}/play`, image: `data:image/jpeg;base64,${b64}`, caption: PORT_CHECK_LABELS[name.replace(/-(?:before|after|playing|over|\d+)$/, '')] ?? name }); } catch { /* too big: no picture */ } }
+    }
+  };
   const privateRoom = (tag) => `chk-${stamp.slice(-6)}-${tag}`.slice(0, 32);
   const errorsSeen = [];
+  let stoppedAt = null;
   const collect = (h) => { for (const e of h.errors) errorsSeen.push(`${h.engine}-${h.kind}: ${e}`); for (const r of h.badResponses) errorsSeen.push(`${h.engine}-${h.kind}: HTTP ${r}`); };
   const started = Date.now();
   // The site must answer before each row: a dev server that died mid-check made every later row fail as "no game
@@ -408,6 +428,8 @@ export async function portCheck({ url, game, root, only = null, shots = null, lo
     try { const r = await fetch(`${base}/${game}/play`, { signal: AbortSignal.timeout(8000) }); return r.ok; } catch { return false; }
   };
   const gate = async (name) => {
+    if (report?.stopped?.()) { row(name, null, { why: 'stopped by the person' }); stoppedAt ??= name; return false; }
+    tell(name, 'running');
     if (await alive()) return true;
     row(name, false, { why: `${base} stopped answering: is the dev server still running? (restart it as a background task that outlives this command, then rerun the check)` });
     return false;
@@ -631,7 +653,7 @@ export async function portCheck({ url, game, root, only = null, shots = null, lo
   }
   const failed = rows.filter((r) => r.ok === false);
   const skipped = rows.filter((r) => r.ok === null);
-  const result = { ok: failed.length === 0 && rows.length > 0, command: 'port check', game, url: base, out, totalMs: Date.now() - started, passed: rows.filter((r) => r.ok === true).map((r) => r.name), failed: failed.map((r) => `${r.name}: ${r.why ?? 'failed'}`), skipped: skipped.map((r) => `${r.name}: ${r.why ?? ''}`), rows };
+  const result = { ok: failed.length === 0 && rows.length > 0 && !stoppedAt, command: 'port check', game, url: base, out, totalMs: Date.now() - started, ...(stoppedAt ? { stopped: true, why: `stopped by the person (before ${stoppedAt})` } : {}), passed: rows.filter((r) => r.ok === true).map((r) => r.name), failed: failed.map((r) => `${r.name}: ${r.why ?? 'failed'}`), skipped: skipped.map((r) => `${r.name}: ${r.why ?? ''}`), rows };
   writeFileSync(join(out, 'receipt.json'), `${JSON.stringify(result, null, 1)}\n`);
   return result;
 }