docs: add app demo gif and restructure README around the feature set - #1
Open
msmfa wants to merge 4 commits into
Open
docs: add app demo gif and restructure README around the feature set#1msmfa wants to merge 4 commits into
msmfa wants to merge 4 commits into
Conversation
Replaces the static-only page with the 960x540 screencast as the hero, committed into docs/ so the README no longer depends on a user-attachments upload. Rewrites the feature list against what the app actually ships: Monaco with real language services in both languages, the sandboxed test runner, the cumulative easy/medium/hard model, the Claude review panel, progress tracking and the Pomodoro timer. Adds the full 24-question list grouped by the three categories used in the source, plus keychain storage, autosave, auto-run and auto-update. Both existing screenshots are kept and moved next to the features they show.
Swaps the default blue and grey shields for the app's own palette: accent #40AC6C and surface #1C1F26, both sampled from the demo recording, so the header reads as part of the product rather than boilerplate. Adds the Apple mark to the download and platform badges so the macOS-only requirement is legible before the text is read, keeps the green on the download badge alone so the primary action carries the only colour, and lifts the two quiet badges to #2D323D so they stay visible against GitHub's dark theme.
shields.io's for-the-badge style has square corners and exposes no radius parameter, so the badges are now generated locally: same proportions (28px tall, uppercase, tracked) with a 6px radius that matches the rounding used in the app itself. Colours stay sampled from the product, #40AC6C on #1C1F26, and the green sits on the download badge alone. Serving them from docs/badges also drops the runtime dependency on shields.io. Puts all three on one markdown line, since GitHub turns single newlines into line breaks and was stacking them three deep under the title. Note: the version on the download badge is now static rather than read from the releases API, so it needs regenerating when a release ships.
The two feature screenshots were hotlinked from github.com/user-attachments, which 302s to a session-gated redirect. They therefore only resolved for a logged-in viewer on github.com and were broken everywhere else. Both are now committed under docs/screenshots, so every asset in the README is served from the repo and nothing depends on an external host. Downscaled from 3144px to 1572px on the way in, which is still roughly 1.75x for GitHub's content column and cuts the pair from 2.2MB to 872KB. Also fixes the captions, which described the wrong images. The first is the progress grid with a solved debounce and passing tests, not the question brief; the second is the Claude review panel with failing tests, not the progress tab. Each now sits under the feature it actually illustrates. Rewrites the progress section to match what the screenshot shows: three states per cell, practised, completed with help, and solved unaided.
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
1 participant
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 changed
The demo GIF is now the hero. The 960x540 screencast (
practice-pad-reddit-preview.gif) is committed todocs/practice-pad-demo.gifrather than linked from a user-attachments upload, so the README keeps working if that link ever rots.The feature list now matches what the app ships. Rewritten against the source in
msmfa/Practice-Pad:debounceas the worked exampleAdded the full question list, all 24, grouped into Foundations / Data and objects / Advanced to match the
starters/split in the source.Both existing screenshots are kept, moved next to the features they illustrate.
Note
Only one app GIF exists on disk, so that is the one used here. If the "red star" one is a different recording, point me at it and I will swap it.
🤖 Generated with Claude Code