693f6b774b
Generate a static beginner course from course data with real Chromium screenshots for every module, and record a narrated walkthrough of UV, Texture Paint, Compositor, Geometry Nodes, Spreadsheet and OPFS reopen. The render lesson video covers M08/M09; the course page is linked from the tutorial landing. Co-Authored-By: Claude Code <noreply@anthropic.com>
161 lines
8.8 KiB
JavaScript
161 lines
8.8 KiB
JavaScript
#!/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("&", "&").replaceAll("<", "<").replaceAll(">", ">")
|
|
.replaceAll('"', """).replaceAll("'", "'");
|
|
|
|
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 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>
|
|
<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{width:100%;height:auto;background:#000;border-radius:6px}
|
|
.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;
|