A visual study guide for understanding algorithms, discrete mathematics, and complexity.
npm ci
npm run devOpen the local URL printed by Vite. To verify the production build:
npm run buildBefore publishing, check the rendered walkthroughs in a browser:
npx playwright install chromium
npm run test:walkthroughsThese checks cover every sorting walkthrough at desktop, tablet, and phone widths, including navigation, reloads, animations, and recovery from a failed load. They run against development and the production preview; GitHub Pages deployment waits for them to pass.
Publishing is automatic: push or merge changes to develop. The Pages workflow builds the site and deploys it. Check the Actions runs for the result; the live site updates after a successful run.
To deploy the current develop branch again without a new change, open Actions → Build and publish Sorting Walkthroughs → Run workflow. GitHub Pages should use GitHub Actions as its source under Settings → Pages. No release tag is needed for a site deployment.
Problems is available in production by default. Sixteen pattern directories include original decision traces and practice. The existing Two Pointers films and implementation variants remain available. Set VITE_ENABLE_PROBLEMS=false only when deliberately hiding the domain in a custom build.
Exported videos are cached between deployments. Each film is checked against its scene data, shared renderer, capture code, dependencies, and file checksum. Missing, changed, or damaged videos are regenerated; narration and site-only edits reuse unchanged films. A cold or expired cache still needs a full render. The build and walkthrough checks always run.
Use npm run test:film-cache to check cache invalidation and npm run test:film-rendering for a short browser recording test (with the dev server running). To deliberately re-record a film locally, run npm run render:films -- --force selection.
src/ # Feature-owned presentation, view-models, and pure models
docs/adr/ # Accepted architecture decisions
public/walkthroughs/ # walkthroughs plus simple/typed Python, JS, and TS examples
public/study-mark.svg # site favicon
.github/workflows/ # GitHub Pages build and deployment
The walkthrough pages are standalone HTML so they also work independently. Tim Sort's Python file is an educational implementation, not CPython's production sort.
See the source map and ADR 0001 before contributing. Views use one colocated CSS module; reactive behavior belongs in .svelte.ts view-models and pure rules in models. Hand-maintained source files stay at 500 lines or fewer. npm run test:architecture and npm run format:check enforce the key boundaries before deployment.
Each algorithm page starts with a plain Python version for learning the core idea, then offers typed Python, JavaScript, and TypeScript examples. These are teaching references; some, including Tim Sort, intentionally favor clarity over production-level optimizations.
Sorting Play tabs offer optional Echo narration, loaded one scene at a time. Students need no speech service or API key. To regenerate the recordings locally with Lemonade, see the narration guide.
This project is designed to be forked, adapted for future classes, and improved by students. See CONTRIBUTING.md for the small local workflow and teaching-focused guidelines, and CONTRIBUTORS.md for attribution. The project is licensed under the MIT License.
Fifteen study palettes are available in the theme menu. Ten are study adaptations inspired by VS Code/editor themes, rather than imported extensions: Dark+, Light+, Monokai, Dracula, Nord, Solarized Dark/Light, One Dark, Tokyo Night, and High Contrast. The original five palettes remain available. See VS Code themes, Dracula, and the named theme projects for their original editor versions. No third-party theme code or artwork is bundled.