Skip to content

docs: revamp README with badges, screenshots, icons, and collapsible troubleshooting#3

Draft
Copilot wants to merge 2 commits into
mainfrom
copilot/update-readme-file-engagement
Draft

docs: revamp README with badges, screenshots, icons, and collapsible troubleshooting#3
Copilot wants to merge 2 commits into
mainfrom
copilot/update-readme-file-engagement

Conversation

Copilot AI commented Apr 2, 2026

Copy link
Copy Markdown

Summary

Rewrites the README to make it far more visually engaging and easier to scan at a glance.

Changes

  • Hero header — centered logo, project tagline, and a row of shields.io badges (Node.js ≥18, Playwright, ffmpeg, MIT license, CI status)
  • Screenshot gallery — 2×3 responsive grid of real screenshots committed in e2e/screenshots/, each with a caption
  • Emoji section headings — every major section gets an icon (🚀 Quick start, 🛠️ Prerequisites, 📦 Scripts, 🗂️ Layout, 🏗️ Architecture, ⚙️ Config, 🎨 Customising, 🤖 CI, 🔧 Troubleshooting, 🛡️ Tech stack)
  • Prerequisites table — inline tech badges (Node.js, ffmpeg, Chromium) alongside version info
  • npm scripts table — descriptive emoji prefixes for each script
  • Troubleshooting — flat ### sections converted to collapsible <details> blocks to reduce noise
  • Tech stack section — large for-the-badge shields for Playwright, React, Vite, TypeScript, ffmpeg, Node.js, and GitHub Actions
  • Responsive screenshots — images use width="100%" instead of a fixed 400 px to scale across screen sizes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants