71 lines
2.1 KiB
JavaScript
71 lines
2.1 KiB
JavaScript
import puppeteer from 'puppeteer';
|
|
import path from 'path';
|
|
import { fileURLToPath } from 'url';
|
|
|
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
|
|
const fragments = [
|
|
{
|
|
file: 'fragments/fragment-exploration.html',
|
|
output: 'screenshots/screenshot-exploration.png',
|
|
viewport: { width: 780, height: 460 },
|
|
clip: null
|
|
},
|
|
{
|
|
file: 'fragments/fragment-splitting.html',
|
|
output: 'screenshots/screenshot-splitting.png',
|
|
viewport: { width: 780, height: 600 },
|
|
clip: null
|
|
},
|
|
{
|
|
file: 'fragments/fragment-collecting.html',
|
|
output: 'screenshots/screenshot-collecting.png',
|
|
viewport: { width: 794, height: 1123 }, // A4 at 96dpi
|
|
clip: null
|
|
},
|
|
{
|
|
// Full A4 page, clip to top 4 cards (skip header, take cards area)
|
|
file: 'fragments/fragment-cargo-full.html',
|
|
output: 'screenshots/screenshot-cargo.png',
|
|
viewport: { width: 794, height: 1123 }, // A4 at 96dpi
|
|
clip: { x: 0, y: 95, width: 794, height: 610 } // cards area below header
|
|
}
|
|
];
|
|
|
|
async function main() {
|
|
const browser = await puppeteer.launch({ headless: 'new', args: ['--no-sandbox'] });
|
|
|
|
for (const frag of fragments) {
|
|
const page = await browser.newPage();
|
|
await page.setViewport(frag.viewport);
|
|
|
|
const filePath = path.resolve(__dirname, frag.file);
|
|
await page.goto(`file://${filePath}`, { waitUntil: 'networkidle0', timeout: 30000 });
|
|
|
|
// Wait for Tailwind to process
|
|
await new Promise(r => setTimeout(r, 2000));
|
|
|
|
const outputPath = path.resolve(__dirname, frag.output);
|
|
|
|
if (frag.clip) {
|
|
await page.screenshot({ path: outputPath, clip: frag.clip });
|
|
} else {
|
|
// Capture just the content (not grey background)
|
|
const bodyHandle = await page.$('body > div, body > .card-grid, body > .grid');
|
|
if (bodyHandle) {
|
|
await bodyHandle.screenshot({ path: outputPath });
|
|
} else {
|
|
await page.screenshot({ path: outputPath, fullPage: false });
|
|
}
|
|
}
|
|
|
|
console.log(`✓ ${frag.output}`);
|
|
await page.close();
|
|
}
|
|
|
|
await browser.close();
|
|
console.log('Done!');
|
|
}
|
|
|
|
main().catch(console.error);
|