chore: generate screenshots with puppeteer

[SethFalco]

Finally gets around to generating the preview screenshots instead of creating them manually via GIMP.

• I chose to use Puppeteer simply because it was already in our node_modules. Since resume-cli was already using it, we don't have to download any additional packages.
• I split the screenshot up into two separate images for responsiveness. However… currently we don't get the benefits of it as I put in the widths as 49%. Ideally, I wanted them to be side-by-side on desktop, but stacked on mobile. I couldn't see how to achieve this where GitHub and npm display the images, though.
  • On the side, a benefit to this is that the preview(s) went from 6 MB down to 0.2 MB each. 🎉
  • The previews no longer have the curves decorations I added, but these were optional anyway. I'll reconsider this in future, but didn't think it was worth the additional effort/tooling.
  • I think it's acceptable to already use this approach despite the lack of stacking, because it's still better than what we had before. The images are larger, it's clearer to read on desktop, and they never stacked on mobile before anyway.

Chores

• I had accidentally committed a change that renamed work.name to work.company in the demo JSON Resume file. This changes it back.
• Downgrades globals to avoid the duplicate dependency, since we didn't actually need the latest version anyway.

Summary by CodeRabbit

• Documentation

  • Updated preview section to display light and dark theme variants side by side.

• Chores

  • Added preview generation tooling.
  • Updated development dependencies.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

A new preview generation system has been introduced that uses Puppeteer to render theme-aware screenshots of a resume. The README was updated to display these images, package.json was modified to include the generate-preview script and Puppeteer dependency, and a test fixture field was renamed from "company" to "name".

Changes

Cohort / File(s)	Summary
Documentation README.md	Changed preview image rendering from Markdown reference to inline HTML img elements displaying light and dark theme variants with explicit width attributes
Dependencies and Scripts package.json	Added generate-preview npm script, added puppeteer v18.2.1 as devDependency, and downgraded globals from ^16.4.0 to ^14.0.0
Build Automation scripts/generate-preview.js	New script that renders resume HTML using Puppeteer, captures screenshots in light and dark themes, and saves them to assets/preview-light.png and assets/preview-dark.png
Test Fixtures test/fixture.resume.json	Renamed field work[0].company to work[0].name in the first work entry

Sequence Diagram(s)

sequenceDiagram
    participant Script as generate-preview.js
    participant Puppeteer as Puppeteer Browser
    participant Page as Page Instance
    participant FileSystem as File System

    Script->>Script: Import resume fixture & render to HTML
    Script->>Puppeteer: Launch browser instance
    Puppeteer-->>Script: Browser ready
    
    Script->>Page: Create new page
    Script->>Page: Set viewport (1280x720)
    Script->>Page: Inject rendered HTML content
    
    rect rgb(200, 220, 255)
    Note over Page: Light Theme Capture
    Script->>Page: Screenshot (default theme)
    Page-->>Script: Screenshot data
    Script->>FileSystem: Save to preview-light.png
    end
    
    rect rgb(220, 200, 255)
    Note over Page: Dark Theme Capture
    Script->>Page: Emulate media: prefers-color-scheme=dark
    Script->>Page: Screenshot (dark theme)
    Page-->>Script: Screenshot data
    Script->>FileSystem: Save to preview-dark.png
    end
    
    Script->>Puppeteer: Close browser
    Puppeteer-->>Script: Closed

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

The changes span multiple file types with varied purposes (documentation, configuration, new script, fixtures). While each individual change is straightforward, the new Puppeteer script introduces moderate logic density requiring verification of browser automation correctness, screenshot capture reliability, and proper cleanup.

Possibly related PRs

• jsonresume/jsonresume-theme-class#65: Also modifies the globals devDependency version in package.json, though in the opposite direction (adding vs. downgrading).

Poem

🐰 A preview script hops into view,
Puppeteer captures light and dark theme too,
Screenshots rendered in dual design,
Resume showcase now looks so fine!
README updated with HTML delight, ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 489df61 and cfd9f73.

⛔ Files ignored due to path filters (4)

• assets/preview-dark.png is excluded by !**/*.png
• assets/preview-light.png is excluded by !**/*.png
• assets/preview.png is excluded by !**/*.png
• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (4)

• README.md (1 hunks)
• package.json (2 hunks)
• scripts/generate-preview.js (1 hunks)
• test/fixture.resume.json (1 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}