DEV Community

Ondrej Machala
Ondrej Machala

Posted on

Heroshot Features for Docusaurus: Viewports, Retina, CI/CD

#react #documentation #docusaurus #webdev

Already using Heroshot with Docusaurus? Here's what else it can do.

Responsive screenshots

Need desktop and mobile versions? Add viewports to your config:

{
  "name": "dashboard",
  "url": "http://localhost:3000/dashboard",
  "selector": ".main-content",
  "viewports": ["desktop", "mobile"]
}
Enter fullscreen mode Exit fullscreen mode

One config entry, four screenshots: desktop-light, desktop-dark, mobile-light, mobile-dark.

The component handles srcset automatically:

<Heroshot name="dashboard" alt="Dashboard" />
Enter fullscreen mode Exit fullscreen mode

Readers get the right size for their device.

Retina support

For crisp screenshots on high-DPI displays:

{
  "name": "dashboard",
  "url": "http://localhost:3000/dashboard",
  "deviceScaleFactor": 2
}
Enter fullscreen mode Exit fullscreen mode

Captures at 2x resolution. The component serves them properly scaled.

CI/CD automation

Screenshots can regenerate on every deploy. Add to your GitHub Action:

- name: Update screenshots
  run: npx heroshot --headless

- name: Commit if changed
  run: |
    git diff --quiet static/heroshots/ || \
    (git add static/heroshots/ && git commit -m "Update screenshots")
Enter fullscreen mode Exit fullscreen mode

Or schedule weekly updates:

on:
  schedule:
    - cron: '0 0 * * 0'
Enter fullscreen mode Exit fullscreen mode

No more stale screenshots.

Theme detection

The component watches <html data-theme="dark"> for changes. When users toggle Docusaurus's theme, screenshots swap instantly. No page reload, no flash.

This works because heroshot renders a <picture> element with media queries:

<picture>
  <source srcset="dashboard-dark.png" media="(prefers-color-scheme: dark)" />
  <source srcset="dashboard-dark.png" media="[data-theme=dark]" />
  <img src="dashboard-light.png" alt="Dashboard" />
</picture>
Enter fullscreen mode Exit fullscreen mode

One-off captures

Need a quick screenshot without touching config?

npx heroshot https://your-app.com --dark --light --mobile
Enter fullscreen mode Exit fullscreen mode

Three flags, six files. Done.

New to Heroshot? Start with the setup guide.

Full docs: heroshot.sh/docs/integrations/docusaurus

Top comments (0)