Self-updating screenshots
a day ago
- #documentation
- #screenshots
- #automation
- An automated system for self-updating screenshots in Jelly's help centre that captures screenshots from the running application whenever the documentation is rebuilt.
- Markdown articles include special HTML comments (SCREENSHOT) that serve as instructions for capturing specific elements or page states using a headless Chrome browser via Capybara and Cuprite.
- The system supports various capture modes: 'element' for specific DOM elements, 'full_page' for entire pages (with optional cropping), and 'viewport' for visible browser content.
- Options like 'click', 'wait', 'crop', 'hide', and 'torn' allow handling interactive elements, animations, and visual effects to capture dynamic UI states automatically.
- Running a single command ('rails manual:build') updates all screenshots and rebuilds help pages, eliminating manual effort and ensuring documentation stays in sync with UI changes.
- Markdown files are organized by section in a directory, processed into ERB views with generated navigation, enabling code and documentation to be updated together in the same PR or commit.
- Despite initial complexity, the system reduces friction significantly, encouraging more frequent documentation updates and maintaining accurate, up-to-date screenshots without manual intervention.