Repository navigation
Add the demo GIF to the GitHub and npm READMEs - #60
Merged
Merged
Conversation
Puts the square demo loop above the fold on the repo front page and on the npm-published cli/README, so the flip is the first thing a visitor sees. Referenced by absolute raw.githubusercontent URL because npm does not resolve relative repo paths — a relative link renders on GitHub and breaks on npm. docs/assets/README.md records the size budget for future exports. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013C7UqvNjCKLf4CXwBER97j
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
Both READMEs open with text. The product's whole argument is visual — the flip — so this puts a square demo loop above the fold on the repo front page and on the npm-published
cli/README.md.This matters for the launch: link-style posts (r/coolgithubprojects, HN comments, newsletter submissions) send people straight to the README, and the flip has to be the first thing they see rather than a paragraph.
Three files:
README.md— GIF + "watch the full demo" link under the taglinecli/README.md— same, above the intro (this is the README npm publishes)docs/assets/font-lab-demo.gif— 1:1, 6.8MB, cropped to the site + panelAbsolute URL, deliberately. The image is referenced as
https://raw.githubusercontent.com/jmg698/Font-Lab/main/docs/assets/font-lab-demo.gifrather than a relative path. npm doesn't reliably resolve relative repo paths, so a relative link renders on GitHub and shows a broken image on the npm page.Consequence worth knowing: the image 404s in this PR's preview, because it points at
mainand the file isn't there until this merges. It resolves everywhere once merged.docs/assets/README.mdrecords the size budget (≤5MB, 480p/720p, 15fps, 5–8s) so future exports don't land a 45MB file in git history.The invariants (Font Lab lives or dies on these — confirm your change keeps them)
Tests
Notes for the reviewer
Two things to eyeball after merge:
mainis the path the READMEs actually use).The GIF is 6.8MB, a bit above the 5MB budget in the notes file. Acceptable for a one-off, but it's permanent in git history, so future re-cuts should come in under it.
Generated by Claude Code