chore: generate screenshots with puppeteer

Author: SethFalco

README.md

@@ -60,4 +60,4 @@ This theme makes no external connections, doesn't embed scripts, and is lightwei
 
 ## Preview
 
-![Two screenshots of the Class theme for JSON Resume side-by-side. On the left-side, we see the light mode variant, while on the right-side is the dark mode variant.](./assets/preview.png)
+<img src="./assets/preview-light.png" width="49%" alt="The Class theme for JSON Resume rendered with mock data. Features a plain blue bar at the top containing the candidates name and role, then a plain white background with contact information, work experience, volunteer information, etc."/> <img src="./assets/preview-dark.png" width="49%" alt="The Class theme for JSON Resume rendered with mock data when dark mode is detected. Features a dark gray bar at the top containing the candidates name and role, then a slightly lighter gray background with contact information, work experience, volunteer information, etc."/>

assets/preview-dark.png

@@ -31,6 +31,7 @@
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "typecheck": "tsc --noEmit",
+    "generate-preview": "node scripts/generate-preview.js",
     "build:pdf": "resume export --theme . --resume ./test/fixture.resume.json resume.pdf",
     "build:html": "resume export --theme . --resume ./test/fixture.resume.json resume.html"
   },
@@ -48,7 +49,8 @@
     "@types/node": "^24.8.1",
     "eslint": "^9.38.0",
     "eslint-plugin-import": "^2.32.0",
-    "globals": "^16.4.0",
+    "globals": "^14.0.0",
+    "puppeteer": "^18.2.1",
     "resume-cli": "^3.1.2",
     "typescript": "^5.9.3"
   }

assets/preview-light.png

@@ -0,0 +1,27 @@
+import path from 'node:path';
+import puppeteer from 'puppeteer';
+import { render } from '../index.js';
+import resume from '../test/fixture.resume.json' with { type: 'json' };
+
+const html = await render(resume);
+
+const browser = await puppeteer.launch();
+const page = await browser.newPage();
+await page.setViewport({
+  width: 779,
+  height: 1054,
+});
+await page.setContent(html);
+await page.screenshot({
+  path: path.join('assets', 'preview-light.png'),
+});
+await page.emulateMediaFeatures([
+  {
+    name: 'prefers-color-scheme',
+    value: 'dark',
+  },
+]);
+await page.screenshot({
+  path: path.join('assets', 'preview-dark.png'),
+});
+await browser.close();

assets/preview.png

@@ -27,7 +27,7 @@
   },
   "work": [
     {
-      "company": "JSON Resume",
+      "name": "JSON Resume",
       "location": "Remote",
       "position": "Open Sourcerer 🧙‍♂️",
       "url": "https://jsonresume.org",

package.json

@@ -218,10 +218,11 @@ __metadata:
     "@types/node": "npm:^24.8.1"
     eslint: "npm:^9.38.0"
     eslint-plugin-import: "npm:^2.32.0"
-    globals: "npm:^16.4.0"
+    globals: "npm:^14.0.0"
     handlebars: "npm:^4.7.8"
     html-minifier: "npm:^4.0.0"
     marked: "npm:^16.4.1"
+    puppeteer: "npm:^18.2.1"
     resume-cli: "npm:^3.1.2"
     typescript: "npm:^5.9.3"
   languageName: unknown
@@ -2815,13 +2816,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globals@npm:^16.4.0":
-  version: 16.4.0
-  resolution: "globals@npm:16.4.0"
-  checksum: 10c0/a14b447a78b664b42f6d324e8675fcae6fe5e57924fecc1f6328dce08af9b2ca3a3138501e1b1f244a49814a732dc60cfc1aa24e714e0b64ac8bd18910bfac90
-  languageName: node
-  linkType: hard
-
 "globalthis@npm:^1.0.4":
   version: 1.0.4
   resolution: "globalthis@npm:1.0.4"