Repository navigation
Docs/interactive learning experience - #1
Merged
Merged
Conversation
Adds a lightweight, dependency-free JS/CSS layer applied across every page via the existing head-custom.html hook, so it benefits all 8 modules immediately without touching their content: - Light/dark theme (system-aware, manual toggle, persisted via localStorage) with a consistent color-token system - Fixes a real bug: GFM [!NOTE]/[!TIP]/[!WARNING]/etc. alerts were rendering as broken, literal "[!NOTE]" text on the live Pages site (confirmed via curl) despite rendering correctly on github.com — now upgraded into styled callout boxes on both - New callout component classes (concept, important, pro-tip, mistake, try-it, challenge, remember, recovery, real-world, sdet) for content work to use going forward - Copy-to-clipboard buttons on every code block, keyboard accessible - Auto-generated, sticky table of contents on long pages - Breadcrumb navigation built from the URL path - Back-to-top button, respects prefers-reduced-motion - Mermaid diagrams re-theme automatically with light/dark mode - localStorage-only progress tracker (mark modules complete, no login) - Focus-visible outlines and reduced-motion support throughout Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Every module page previously shared one identical, generic <title> tag (verified live via curl) regardless of which page you were on — bad for sharing and search. Each page now has its own unique title and description, feeding the Open Graph/Twitter card tags added in head-custom.html. Confirmed via the live site's existing markup that this repo's pages render without a theme-injected title heading, so this only affects <title>/meta tags, not visible page content. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- Added a start-here action-button row (Start Learning / Course Roadmap / Practice Labs / Cheat Sheet), matching the existing badge style already used elsewhere in this README - Converted "The Path" from a plain-text diagram into a clickable Mermaid flowchart + a table with level badges per module - Linked resources/interactive-cheatsheet.html, which had a fully built, working interactive Git sandbox + searchable command matrix but was completely unlinked from the README (verified via grep — the only reference to it anywhere was from resources/cheatsheet.md) - Added the localStorage-only progress tracker mount point Note: the "Practice Labs" button points at a 04-undo-and-recovery anchor that will exist once that module's recovery scenarios are reformatted into the labs structure (next piece of work on this branch) — not yet live. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Module 00 was read-only explanation with no action until git init at the very end. Added the interactive pattern that will carry through every module from here: - A persistent "safe sandbox" (~/git-playground) introduced in this first module specifically so every later module can just say "in your playground" without re-explaining - Try It Yourself blocks after install, config, and git init/status - Your Turn challenges with hidden <details> solutions — local vs. global config override, and a "predict git status before running it" exercise - One SDET scenario tying git init to a real automation-repo moment - Explicit "What You'll Learn" / "You can now" bookends Content, examples, and tone preserved — nothing removed, only the missing "now you try" loop added around it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Same pattern as Module 00, applied to the module the course itself calls "the one you'll actually use every single working day": - Try It blocks after staging, commit, log, tag, stash, branch, and merge — every major command now gets run, not just read - Your Turn challenges with hidden solutions for unstaging a file, creating a second branch, and running the full branch -> commit -> merge -> delete loop end to end - A Common Mistake callout on mega-commits, tied forward to why it breaks revert/cherry-pick/bisect later in the course - An SDET scenario for stash (switching to investigate a flaky CI test mid-feature) — the single most common real reason to use it - A Quick Check on fast-forward vs. three-way merge right after the Try It that demonstrates a fast-forward live Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Same pattern as Modules 00-01, adapted for the fact that this module genuinely needs a real GitHub account and an empty repo (said so explicitly up front, rather than pretending it's as sandboxed as the first two modules): - Try It blocks for checking/generating an SSH key, wiring up a real remote, pushing, and pushing a feature branch - A Your Turn that proves fetch vs. pull by editing via GitHub's web editor and watching origin/main update before local main does - An SDET scenario tying GitHub Flow's "CI passes" step to a real Playwright/Selenium suite running on every PR Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- Try It for forking + wiring up origin/upstream remotes - A Quick Check on the safe-vs-dangerous direction of an origin/ upstream mix-up - A real Your Turn: find an actual good-first-issue (or a typo in this course's own docs) and open a genuine pull request, not a simulated one Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The biggest structural change so far. Previously this module had 3
loosely-formatted "Recovery Scenarios" at the end; reformatted and
expanded into the full "Disaster Labs" structure the course roadmap
promises, with the root README's "Practice Labs" button now pointing
at a real section:
Lab 1 — Wrong Branch (existing scenario, now hands-on)
Lab 2 — Lost Commit (existing scenario, now hands-on, with an
explicit callout on the one thing reflog can't recover)
Lab 3 — Merge Conflict (new to this module; cross-links Module 05
for full marker-by-marker mechanics rather than duplicating)
Lab 4 — Detached HEAD (genuinely new content — this concept didn't
exist anywhere in the course before)
Lab 5 — Bad Commit Message (the Amend section's realistic framing)
Lab 6 — Wrong Commit, Wrong Branch (cherry-pick for this exact
purpose; cross-links Module 05's fuller treatment)
Lab 7 — Production Hotfix (new; branches from a tag instead of
main's tip specifically so unfinished work never ships)
Also added Try It blocks for revert, reset (--soft/--mixed/--hard run
back to back so the difference is visible, not just described),
amend (corrected an earlier draft that wrongly implied the hash stays
the same), rebase (fixed a sequencing bug in an earlier draft where
the branches wouldn't have actually diverged), and reflog.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- New section: git bisect — this concept didn't exist anywhere in the course before, despite being an explicit course differentiator. Covers the manual good/bad loop and git bisect run for automated, test-driven regression hunting, with an SDET scenario tying it directly to an actual failing-test investigation - Try It blocks for .gitignore, cherry-pick, and a real pre-commit hook that actually blocks a commit (and can be flipped to allow it) - The CI/CD example YAML now runs an actual Playwright suite instead of a generic "npm test" placeholder, with an SDET callout on why CI-only flakiness is usually a real environment difference, not a ghost - A Quick Check on reading merge-conflict markers correctly, plus a pointer to Module 04's new hands-on conflict lab Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Module 06 is a review of earlier modules, so this adds coverage for the two concepts Module 05/04 just gained (bisect, detached HEAD) that weren't in the checklist or exam-style questions yet. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Previous capstone was a flat 10-step list with no reveal progression and no bisect/reflog coverage. Rebuilt per the course's own stated philosophy (struggle first, then hints, then partial, then complete, then explanation): - Scenario given first, hints hidden separately from the solution - Added rebase-before-PR, reflog recovery, and git bisect as explicit steps (the original 10 steps predated this branch's bisect/detached HEAD additions) - A dedicated "why these 10 steps" explanation tying each one back to the module that taught it - Added 2 quiz questions (detached HEAD, bisect run) to the existing 20-question bank Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Module 03 now explicitly invites readers to open a real PR against this repo as practice — this backs that invitation with the actual mechanism: - CONTRIBUTING.md: the fork/branch/PR flow specific to this repo, plus what makes a good contribution here (preserve the teaching philosophy, hands-on over read-only, dummy data only) - CODE_OF_CONDUCT.md: short, specific to a learning-resource context - .github/ISSUE_TEMPLATE/: bug-or-broken-content and content-suggestion - .github/pull_request_template.md - .github/scripts/check_docs.py: formalizes the exact fence-balance / broken-link / unbalanced-div check I've been running by hand throughout this branch, now runnable by anyone locally - .github/workflows/validate-docs.yml: runs that same script in CI on every push/PR — this repo had zero CI before this commit Verified: the script correctly catches a real broken link I introduced in CONTRIBUTING.md's first draft (a forward-reference to this exact workflow file, before it existed) and reports clean now; the workflow YAML parses correctly via Ruby's YAML parser (no jekyll/actions runner available locally to go further than that). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Needed this to actually test the branch locally with a real Jekyll server (_site/ was showing as untracked). GitHub Pages builds the site itself in CI, so this output never needed to be committed. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Found while actually running this branch locally for the first time (previous validation was curl-against-production + static analysis only, since the system Ruby was too old to run Jekyll at all). Two real, separate issues this surfaced: 1. No _config.yml existed. Jekyll doesn't apply a layout to a page unless told to, so any page WITH front matter (every page now has some, added for SEO) rendered as a bare content fragment locally — no header, no CSS, no nav. Added defaults: to force layout: default site-wide, plus jekyll-readme-index + readme_index.with_frontmatter (the plugin otherwise skips README files that have front matter, which is now all of them). 2. _includes/head-custom.html — the file this whole design-system branch builds on — was never actually being included by minima locally. Confirmed via curl that it DOES run on the live production site today, so GitHub Pages' build is doing this via its own supported-theme customization behavior (or a different pinned minima version) rather than minima's current published gem, which doesn't have the include line. Added an explicit local override of minima's head.html (copied from the installed gem, one line added) so this doesn't depend on that implicit behavior — matches GitHub's own documented pattern for this exact customization point. Verified locally end-to-end after both fixes: per-page <title> tags differ correctly, custom.css/custom.js/mermaid now load, README files serve as directory indexes, and the doc-validation script still passes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Lost when I switched off the github-pages gem earlier (its old pinned Liquid version was incompatible with modern Ruby). Without it, any .md-style link in markdown content 404s on the built site instead of resolving to the real .html output - confirmed this broke the cheatsheet's own cross-link to itself.
Replaces minima's default theme chrome entirely - custom header/ footer layout, dark-first zinc/emerald/amber/rose palette matching resources/interactive-cheatsheet.html's existing look instead of inheriting minima's plain blog styling. Also moves the 'On this page' TOC into a sticky left sidebar on desktop instead of an inline box that pushed content down, and adds scroll-padding-top/scroll- margin-top so jumping to a heading no longer hides it behind the sticky header.
All three guessed the site's baseurl by blindly dropping the first URL path segment, assuming the site always lives under a /reponame/ prefix. Breaks the moment it's served from root (e.g. local jekyll serve with no --baseurl), which is exactly how the breadcrumb's home link ended up pointing at /resources/ instead of /. Now reads the real Jekyll-rendered baseurl from a data attribute instead of guessing. Also updates initTOC() to mount into the new sidebar container from the previous commit's layout change.
Page was dark-only with every color hardcoded. Retrofitted with Tailwind's dark: variant system plus a theme toggle that reads/ writes the same localStorage key as the rest of the site, so theme choice carries over between pages. Also made the canvas-drawn sandbox graph colors theme-aware since those are set via JS, not CSS. Separately fixed the 'Flat reference' button linking to ./cheatsheet.md, which 404s on the built site - the real output is cheatsheet.html.
All 33 color-coded diagram nodes across the course (green=safe, red=danger, yellow=warning, etc.) used light pastel fills with no explicit text color, so they inherited whatever mermaid's active theme assigned - which goes white in dark mode, landing white text on a pale pastel background. Pinned explicit dark text on every one so they stay readable in both themes.
Owner
Author
|
tested and verified |
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.
No description provided.