112 lines
3.4 KiB
JavaScript
112 lines
3.4 KiB
JavaScript
#!/usr/bin/env node
|
|
// Render each slide of a ThothII-style HTML deck to a high-res PNG.
|
|
// Assumes the deck exposes .slide sections navigable via #N hash routes.
|
|
//
|
|
// Usage:
|
|
// node render.mjs <deck.html> <outdir> [--hide "sel1,sel2"] [--scale 2] [--width 1600] [--height 900]
|
|
//
|
|
// Output: <outdir>/01.png .. NN.png + <outdir>/notes.json (slide number -> title text)
|
|
import { createRequire } from 'node:module';
|
|
import {
|
|
existsSync,
|
|
mkdirSync,
|
|
readdirSync,
|
|
unlinkSync,
|
|
writeFileSync,
|
|
} from 'node:fs';
|
|
import path from 'node:path';
|
|
import { pathToFileURL } from 'node:url';
|
|
|
|
const require = createRequire(import.meta.url);
|
|
const { chromium } = require('playwright');
|
|
|
|
const args = process.argv.slice(2);
|
|
if (!args[0] || !args[1]) {
|
|
console.error(
|
|
'usage: node render.mjs <deck.html> <outdir> [--hide "sel1,sel2"] [--scale 2] [--width 1600] [--height 900]',
|
|
);
|
|
process.exit(1);
|
|
}
|
|
|
|
const invocationDir = process.env.INIT_CWD || process.cwd();
|
|
const html = path.resolve(invocationDir, args[0]);
|
|
const outdir = path.resolve(invocationDir, args[1]);
|
|
if (!existsSync(html)) {
|
|
console.error('HTML deck not found: ' + html);
|
|
process.exit(1);
|
|
}
|
|
|
|
const opt = (flag, fallback) => {
|
|
const index = args.indexOf(flag);
|
|
return index >= 0 ? args[index + 1] : fallback;
|
|
};
|
|
const hide = (opt('--hide', '') || '')
|
|
.split(',')
|
|
.map(selector => selector.trim())
|
|
.filter(Boolean);
|
|
const scale = Number(opt('--scale', '2'));
|
|
const width = Number(opt('--width', '1600'));
|
|
const height = Number(opt('--height', '900'));
|
|
|
|
mkdirSync(outdir, { recursive: true });
|
|
|
|
let browser;
|
|
try {
|
|
browser = await chromium.launch();
|
|
const page = await browser.newPage({
|
|
viewport: { width, height },
|
|
deviceScaleFactor: scale,
|
|
reducedMotion: 'reduce',
|
|
});
|
|
await page.goto(pathToFileURL(html).href, { waitUntil: 'networkidle' });
|
|
await page.evaluate(() => document.fonts.ready);
|
|
if (hide.length) {
|
|
await page.addStyleTag({
|
|
content: hide
|
|
.map(selector => `${selector}{display:none!important}`)
|
|
.join('\n'),
|
|
});
|
|
}
|
|
|
|
const count = await page.locator('.slide').count();
|
|
if (count === 0) {
|
|
throw new Error('no .slide elements found in ' + html);
|
|
}
|
|
|
|
for (const entry of readdirSync(outdir)) {
|
|
if (/^\d+\.png$/.test(entry)) {
|
|
unlinkSync(path.join(outdir, entry));
|
|
}
|
|
}
|
|
|
|
const notes = {};
|
|
for (let index = 1; index <= count; index++) {
|
|
await page.evaluate(slideNumber => {
|
|
location.hash = '#' + slideNumber;
|
|
}, index);
|
|
await page.waitForFunction(slideNumber => {
|
|
const slide = document.querySelectorAll('.slide')[slideNumber - 1];
|
|
return Boolean(slide) && slide.classList.contains('on');
|
|
}, index);
|
|
await page.waitForTimeout(450); // let the crossfade settle
|
|
|
|
const file = path.join(outdir, String(index).padStart(2, '0') + '.png');
|
|
await page.screenshot({ path: file });
|
|
notes[index] = await page.evaluate(slideNumber => {
|
|
const slide = document.querySelectorAll('.slide')[slideNumber - 1];
|
|
const title = slide.querySelector('.title, .cover-mark');
|
|
const text = title ? title.innerText.trim().replace(/\s+/g, ' ') : '';
|
|
return text || slide.getAttribute('aria-label') || '';
|
|
}, index);
|
|
console.log('rendered', file);
|
|
}
|
|
|
|
writeFileSync(
|
|
path.join(outdir, 'notes.json'),
|
|
JSON.stringify(notes, null, 2),
|
|
);
|
|
console.log('done:', count, 'slides ->', outdir);
|
|
} finally {
|
|
await browser?.close();
|
|
}
|