Add docs + example code on how to produce dashboard images from a webpage

Author: pascalw

docs/screenshotter/.dockerignore

@@ -0,0 +1 @@
+/node_modules

docs/screenshotter/.gitignore

@@ -0,0 +1 @@
+/node_modules

docs/screenshotter/Dockerfile

@@ -0,0 +1,30 @@
+FROM node:12-buster-slim
+
+RUN apt-get update \
+    && apt-get install -y wget gnupg \
+    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
+    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
+    && apt-get update \
+    && apt-get install -y google-chrome-stable fonts-freefont-ttf libxss1 fonts-noto-color-emoji \
+      --no-install-recommends \
+    && rm -rf /var/lib/apt/lists/*
+
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD 1
+ENV PUPPETEER_EXECUTABLE_PATH /usr/bin/google-chrome-stable
+
+ADD package.json yarn.lock /app/
+
+RUN cd /app && yarn install \
+    # Add user so we don't need --no-sandbox.
+    # same layer as npm install to keep re-chowned files from using up several hundred MBs more space
+    && groupadd -r pptruser && useradd -r -g pptruser -G audio,video pptruser \
+    && mkdir -p /home/pptruser/Downloads \
+    && chown -R pptruser:pptruser /home/pptruser \
+    && chown -R pptruser:pptruser /app/node_modules
+
+ADD . /app/
+
+# Run everything after as non-privileged user.
+USER pptruser
+
+CMD ["node", "/app/screenshot.js"]

docs/screenshotter/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "screenshotter",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "pngjs": "^6.0.0",
+    "puppeteer": "^5.5.0"
+  }
+}

docs/screenshotter/screenshot.js

@@ -0,0 +1,38 @@
+const puppeteer = require("puppeteer");
+const fs = require("fs");
+const PNG = require("pngjs").PNG;
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+const URL = process.env.URL || "CHANGEME";
+
+(async () => {
+  const browser = await puppeteer.launch({
+    args: ["--no-sandbox", "--disable-setuid-sandbox"],
+  });
+
+  const page = await browser.newPage();
+
+  /* Kindle 4 NT resolution */
+  await page.setViewport({ width: 600, height: 800 });
+
+  /* Might want to use networkidle0 here, depending on the type of page */
+  /* See https://github.com/puppeteer/puppeteer/blob/main/docs/api.md */
+  await page.goto(URL, { waitUntil: "networkidle2" });
+
+  /* This is a bit silly. ¯\_(ツ)_/¯
+  Networkidle2 doesn't always seem to wait long enough. */
+  await sleep(3000);
+
+  await page.screenshot({ path: "dash.png" });
+
+  await fs.createReadStream("dash.png")
+    .pipe(new PNG({ colorType: 0 }))
+    .on("parsed", function () {
+      this.pack().pipe(fs.createWriteStream("dash.png"));
+    });
+
+  browser.close();
+})();