webkubor/writing-standard-skills/talk-visual-review

node scripts/check-slide-overflow.mjs dist-share/<slug>/talk.html
node scripts/check-slide-overflow.mjs https://share.webkubor.online/<slug>/talk --size 1920x1080

() => {
  const slides = [...document.querySelectorAll('.slide')];   // 换成目标页的屏选择器
  const saved = slides.map(s => s.className);
  const vh = window.innerHeight;
  const rows = [];
  slides.forEach((s, i) => {
    slides.forEach(x => x.classList.remove('active'));       // 逐个临时激活
    s.classList.add('active');
    const body = s.querySelector('.slide-body') || s;        // 量真正的内容容器
    const r = body.getBoundingClientRect();
    rows.push({
      i: i + 1,
      fill: Math.round(body.scrollHeight / vh * 100),
      cutTop: r.top < -1,
      cutBottom: r.bottom > vh + 1
    });
  });
  slides.forEach((x, i) => x.className = saved[i]);
  return rows;
}

// 1. 硬编码色值：绕过主题变量的地方，换主题时会不跟着变
[...document.querySelectorAll('style')].map(s => s.textContent)
  .join('').match(/#[0-9a-f]{3,8}(?![^{]*\})/gi)
// 2. 正文对比度：投影环境比显示器暗，对比度不足后排看不清
getComputedStyle(document.querySelector('.slide-body p')).color
// 3. 代码块字号：正文与代码字号差距过大是投影上最常见的「看不清」来源
getComputedStyle(document.querySelector('.slide pre')).fontSize