docs: replace README screenshot with demo video#20
Conversation
jevin98
changed the title
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: d09bd93625
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| </div> | ||
|
|
||
|  | ||
| <video src="./img/css-diff-demo.mp4" controls muted loop playsinline preload="metadata" width="100%" aria-label="CSS-Diff DevTools workflow demo"> |
There was a problem hiding this comment.
This README is primarily viewed on GitHub, but GitHub sanitizes repository README HTML and does not render a playable <video> element here; with img/screenshot.png removed in the same change, the landing page loses the inline visual demo rather than replacing it. In this context, use a GitHub-supported pattern such as a linked thumbnail/GIF or an uploaded video asset link so visitors still see or can access the workflow demo.
Useful? React with 👍 / 👎.
css-diff-demo.mp4 |
|
@codex review |
|
Codex Review: Didn't find any major issues. Another round soon, please! ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
1 participant
Summary
img/css-diff-demo.mp4, the generated CSS-Diff workflow demo video used for the uploaded asset.img/screenshot.pngasset.Why
A video better demonstrates the everyday CSS-Diff workflow than a static screenshot, including selecting two similar buttons, inspecting the diff table, filtering properties, and copying a value. Using the GitHub
user-attachmentsasset URL keeps the demo visible in the rendered repository README.Verification
https://github.com/user-attachments/assets/1766e65e-fa31-4095-93d1-f247daa0e8e7returns200withvideo/mp4hyperframes linthyperframes inspect --samples 5img/css-diff-demo.mp4at 1440x900pnpm exec eslint . --fixpnpm compile