A basic-ish HTML slide to image generator.

html-slides.js

const puppeteer = require('puppeteer');

const content = `
/* this injected CSS allows me to hide elememts on the page */
`;

const total = 142; // total number of slides

// pages is an array of numbers, unless you need
// a single page, which can be passed through on
// the command line, ie. node index.js 120
// otherwise pages will be an array [0 ... 141]
const pages = process.argv[2]
  ? [parseInt(process.argv[2], 10)]
  : [...Array(total).keys()];

// generate the url for the slide number, in this
// case, the slides start at index 1 so I'm
// returning the correct url for the slide.
const url = n => `https://talks.zx.isthe.link/#${n + 1}`;

const getPage = async (page, n) => {
  await page.goto(url(n), {
    waitUntil: ['load', 'domcontentloaded', 'networkidle2'],
  });
  await page.addStyleTag({ content }); // add the CSS
  console.log('capture #%s', n);
  await page.screenshot({
    path: `slides-${n}.jpg`,
    type: 'jpeg',
    quality: 100,
  });
};

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  page.setViewport({
    width: 1280,
    height: 800,
    deviceScaleFactor: 2,
  });

  // a promise waterfall, will get one page
  // at a time, waiting for the promise to
  // settle before running the next
  await pages.reduce((acc, curr) => {
    return acc.then(async () => await getPage(page, curr))
  }, Promise.resolve());

  await browser.close();
})();