workinf_Blender_Wasm/tools/web/course/generate-full-course.mjs

#!/usr/bin/env node
/**
 * Generate the static 15-module Web Blender course from full-course.json.
 *
 * Usage:
 *   node tools/web/course/generate-full-course.mjs
 *
 * Outputs:
 *   web/app/public/tutorial/full/index.html
 *   web/app/public/tutorial/full/course.css
 *   web/app/public/tutorial/full/course.json
 */
import fs from "node:fs";
import path from "node:path";
import { fileURLToPath } from "node:url";

const HERE = path.dirname(fileURLToPath(import.meta.url));
const REPO = path.resolve(HERE, "../../..");
const DATA = path.join(HERE, "full-course.json");
const PUBLIC = path.join(REPO, "web/app/public");
const OUT = path.join(PUBLIC, "tutorial/full");
fs.mkdirSync(OUT, { recursive: true });

const escapeHtml = (value) => String(value)
  .replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;")
  .replaceAll('"', "&quot;").replaceAll("'", "&#39;");

const course = JSON.parse(fs.readFileSync(DATA, "utf8"));
const missing = [];
const exists = (relative) => {
  const file = relative.startsWith("/")
    ? path.join(PUBLIC, relative.slice(1))
    : path.join(OUT, relative);
  if (!fs.existsSync(file)) missing.push(relative);
  return fs.existsSync(file);
};

const nav = course.modules.map((module) => `<a href="#${escapeHtml(module.id)}"><span>${escapeHtml(module.id)}</span>${escapeHtml(module.title)}</a>`).join("\n        ");

const videos = (course.videos ?? []).map((video) => {
  exists(video.src);
  const poster = video.poster && exists(video.poster) ? ` poster="${escapeHtml(video.poster)}"` : "";
  const track = video.vtt && exists(video.vtt) ? `<track kind="subtitles" srclang="zh-Hans" label="中文" src="${escapeHtml(video.vtt)}" default />` : "";
  return `<section class="course-video" id="video-${escapeHtml(video.id)}">
      <h2>${escapeHtml(video.title)}</h2>
      <video controls preload="metadata" src="${escapeHtml(video.src)}"${poster} width="1280" height="720">${track}</video>
      <p>${escapeHtml(video.note)}</p>
    </section>`;
}).join("\n    ");

const modules = course.modules.map((module) => {
  const steps = module.steps.map((step, index) => {
    const image = step.image && exists(step.image) ? `<figure><img src="${escapeHtml(step.image)}" alt="${escapeHtml(module.title)} 第 ${index + 1} 步截图" loading="lazy" width="1600" height="900" /><figcaption>${escapeHtml(module.id)} · 步骤 ${index + 1}</figcaption></figure>` : "";
    return `<li><p>${escapeHtml(step.text)}</p>${image}</li>`;
  }).join("\n        ");
  const objectives = module.objectives.map((item) => `<li>${escapeHtml(item)}</li>`).join("");
  const moduleVideo = module.video ? (() => {
    const src = module.video.src; const poster = module.video.poster; const vtt = module.video.vtt;
    exists(src);
    const posterAttr = poster && exists(poster) ? ` poster="${escapeHtml(poster)}"` : "";
    const track = vtt && exists(vtt) ? `<track kind="subtitles" srclang="zh-Hans" label="中文" src="${escapeHtml(vtt)}" default />` : "";
    return `<section class="course-module-video" data-module-video="${escapeHtml(module.id)}"><h3>本模块操作录像</h3><video controls preload="metadata" src="${escapeHtml(src)}"${posterAttr} width="1280" height="720">${track}</video><p>${escapeHtml(module.video.note ?? "")}</p></section>`;
  })() : "";
  const tips = (module.tips ?? []).map((item) => `<li>${escapeHtml(item)}</li>`).join("");
  const warnings = (module.warnings ?? []).map((item) => `<li>${escapeHtml(item)}</li>`).join("");
  return `<article class="course-module" id="${escapeHtml(module.id)}">
      <header>
        <p class="course-module-id">${escapeHtml(module.id)} · ${escapeHtml(module.level)} · 约 ${module.minutes} 分钟</p>
        <h2>${escapeHtml(module.title)}</h2>
        <p class="course-summary">${escapeHtml(module.summary)}</p>
      </header>
      <div class="course-objectives"><h3>本模块目标</h3><ul>${objectives}</ul></div>
      ${moduleVideo}
      <ol class="course-steps">
        ${steps}
      </ol>
      ${tips ? `<div class="course-callout course-tips"><h3>提示</h3><ul>${tips}</ul></div>` : ""}
      ${warnings ? `<div class="course-callout course-warnings"><h3>注意</h3><ul>${warnings}</ul></div>` : ""}
    </article>`;
}).join("\n    ");

const rules = course.rules.map((rule) => `<li>${escapeHtml(rule)}</li>`).join("");

const html = `<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>${escapeHtml(course.title)}</title>
  <link rel="stylesheet" href="./course.css" />
</head>
<body>
  <header class="course-hero">
    <p class="course-kicker">Web Blender · ${escapeHtml(course.version)}</p>
    <h1>${escapeHtml(course.title)}</h1>
    <p class="course-subtitle">${escapeHtml(course.subtitle)}</p>
    <p class="course-audience">${escapeHtml(course.audience)}</p>
    <p class="course-first-load">${escapeHtml(course.firstLoadNote)}</p>
  </header>
  <div class="course-layout">
    <nav class="course-nav" aria-label="课程目录">
      <strong>15 个模块</strong>
      ${nav}
    </nav>
    <main class="course-main">
      <section class="course-rules">
        <h2>开始之前</h2>
        <ul>${rules}</ul>
      </section>
      ${videos}
      ${modules}
      <footer class="course-footer">
        <p>课程截图来自本机有头 Chromium + RTX 4060 的实际操作。功能边界与最新进度见 docs/status/WEB_BLENDER_FULL_COURSE_20261113.md。</p>
        <p><a href="/">返回 Web Blender</a></p>
      </footer>
    </main>
  </div>
</body>
</html>
`;

const css = `:root{color-scheme:dark;--bg:#181818;--panel:#232323;--panel-2:#2b2b2b;--line:#3c3c3c;--text:#e6e6e6;--muted:#a9a9a9;--accent:#6aa1d8;--accent-2:#d8a45a}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.7 "Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--accent)}
.course-hero{padding:52px clamp(20px,5vw,72px) 34px;background:linear-gradient(135deg,#1d2833,#242424 60%,#2a2318);border-bottom:1px solid var(--line)}
.course-kicker{margin:0 0 10px;color:var(--accent-2);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.course-hero h1{margin:0 0 12px;font-size:clamp(30px,4vw,52px);line-height:1.15}
.course-subtitle{margin:0 0 10px;max-width:900px;color:#c8d8e6;font-size:clamp(16px,2vw,21px)}
.course-audience{margin:0 0 16px;color:var(--muted)}
.course-first-load{margin:0;max-width:900px;padding:10px 14px;border-left:3px solid var(--accent-2);background:#2b2620;color:#e8d4b6}
.course-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:0;align-items:start}
.course-nav{position:sticky;top:0;max-height:100vh;overflow:auto;padding:18px 14px;border-right:1px solid var(--line);background:#1d1d1d}
.course-nav strong{display:block;margin:0 0 10px;color:var(--muted);font-size:12px;letter-spacing:.08em}
.course-nav a{display:flex;gap:9px;padding:7px 8px;border-radius:5px;color:#d4d4d4;text-decoration:none;font-size:13px;line-height:1.35}
.course-nav a:hover{background:#2c2c2c}
.course-nav a span{flex:none;color:var(--accent-2);font-family:monospace}
.course-main{min-width:0;padding:26px clamp(18px,4vw,56px) 60px}
.course-rules,.course-video,.course-module{max-width:1180px;margin:0 auto 34px;padding:22px clamp(16px,2.5vw,30px);background:var(--panel);border:1px solid var(--line);border-radius:8px}
.course-rules h2,.course-video h2,.course-module h2{margin-top:0;line-height:1.25}
.course-video video,.course-module-video video{width:100%;height:auto;background:#000;border-radius:6px}
.course-module-video{margin:16px 0 20px;padding:14px 16px;background:#262626;border:1px solid #3d4a3f;border-radius:6px}
.course-module-video h3{margin:0 0 8px;font-size:15px;color:#cfe0ef}
.course-module-video p{margin:8px 0 0;color:#aaa;font-size:13px}
.course-video p{margin:10px 0 0;color:var(--muted)}
.course-module-id{margin:0 0 4px;color:var(--accent-2);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.course-summary{margin:0;color:#cfcfcf}
.course-objectives{margin:18px 0}
.course-objectives h3,.course-callout h3{margin:0 0 6px;font-size:15px;color:#cfe0ef}
.course-objectives ul{margin:0;padding-left:22px}
.course-steps{margin:20px 0 0;padding:0;list-style:none;counter-reset:step}
.course-steps>li{counter-increment:step;position:relative;margin:0 0 22px;padding:0 0 0 40px}
.course-steps>li::before{content:counter(step);position:absolute;left:0;top:0;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#36506a;color:#e8f2fb;font-size:13px;font-weight:700}
.course-steps p{margin:2px 0 10px}
.course-steps figure{margin:0}
.course-steps img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#111}
.course-steps figcaption{margin-top:5px;color:#8f9aa4;font-size:12px}
.course-callout{margin-top:18px;padding:12px 16px;border-radius:6px;background:var(--panel-2);border-left:3px solid #57708a}
.course-callout ul{margin:0;padding-left:20px}
.course-warnings{border-left-color:#c98e5a;background:#2d2720}
.course-footer{max-width:1180px;margin:0 auto;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
@media(max-width:900px){.course-layout{grid-template-columns:1fr}.course-nav{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.course-nav strong{grid-column:1/-1}.course-main{padding-top:18px}}
`;

fs.mkdirSync(OUT, { recursive: true });
fs.writeFileSync(path.join(OUT, "index.html"), html, "utf8");
fs.writeFileSync(path.join(OUT, "course.css"), css, "utf8");
fs.writeFileSync(path.join(OUT, "course.json"), JSON.stringify(course, null, 2) + "\n", "utf8");

console.log(JSON.stringify({ status: missing.length === 0 ? "PASS" : "MISSING_ASSETS", modules: course.modules.length, videos: course.videos.length, missing, output: OUT }, null, 2));
if (missing.length > 0) process.exitCode = 1;