Add learner tools, About page, and responsive search#8
Merged
Conversation
adewale
changed the title
adewale
changed the title
adewale
changed the title
adewale
changed the title
Capture where the project stands after rubric saturation and the discoverability round, define the success scorecard, and lay out four thrusts (close the demand loop, cover searched-for topics, deepen the on-page loop, earn distribution) with essence guardrails and sequencing. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PJDjKbt3EyWPEThak9WQXp
Copy buttons inject client-side onto .cell-source wrappers so Shiki's pre replacement leaves them intact and no-JS pages render no dead buttons; Shiki now loads via dynamic import so a CDN failure degrades to plain code while copying keeps working. Left/right arrows follow the existing rel=prev/next links, guarded against modifiers and any editable focus. The /about page explains the verified-output pipeline, runner sandbox, figure grammar, and quality gates, and renders the design language from the live CSS tokens — counts derive from the catalog at render time. Nav links About on every page; /about joins the sitemap. Review fixes folded in: execCommand's boolean failure now routes to the Copy failed state, the copied class clears on failure, the about prose rule no longer overrides cell-label accent, the rail sample's Output label keeps production spacing, and the copy button drops its opacity dimming so idle contrast passes WCAG AA without hover. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PJDjKbt3EyWPEThak9WQXp
Smoke deployment now checks /about, the README features list names the three new affordances, and the elevation-strategy sequencing records what shipped on 2026-07-10 versus what stays open (share link, edit-on-GitHub links, journey breadcrumbs, sitemap submission). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PJDjKbt3EyWPEThak9WQXp
The runner toolbar gains a quiet Copy link tool-button, injected by the inline script so no-JS pages render no dead chrome. It copies a URL embedding the editor's current code as the #code= fragment the page has decoded since the first commit, mirroring that decoder's encoding exactly; unedited code shares the clean page URL. The decoder now calls resizeEditor() so a shared payload renders fully sized in the textarea fallback. The early no-clipboard playground lesson is deliberately reversed: clipboard code is allowed, server markup still renders only Run and Reset. Verified end to end in headless Chromium against the built assets: click yields Link copied, the copied URL round-trips the edited unicode code back into the editor, unedited code copies the clean URL, and with the module CDN unreachable the share, resize, and copy-button paths all still work. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PJDjKbt3EyWPEThak9WQXp
The text Copy pill becomes an icon pill: the Lucide copy glyph drawn as a currentColor CSS mask so muted, hover, accent-on-copied, and dark-mode states flow through with no icon-specific color rules. On success the mask swaps to the checkmark with a reduced-motion-gated pop; on failure it swaps to the x. A visually hidden aria-live region announces Copied or Copy failed, and a ::before overlay expands the tap target to 48x44 while the visible pill stays 30x26. Toolbar actions stay text; lessons-learned records the icon vocabulary as deliberately minimal and README credits Lucide. Verified in headless Chromium at desktop and 390px touch emulation: three icon buttons inject, the clicked state carries the real cell code with the copied class and live status, the blocked-clipboard path shows the x with Copy failed, and the effective tap target measures 48x44. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PJDjKbt3EyWPEThak9WQXp
The copy button gains the same press response as every other button. Arrow navigation only fires while the editor is unedited, so a slip can never discard work, and the prev/next links carry title hints naming the shortcut. A shared-link recipient now sees a notice that the editor holds edited code instead of the example's expected output. The Copy link button moves to the toolbar's far edge: Run and Reset act on the code, the share action exports it, and the spacing now says so. Verified in headless Chromium: the notice renders for #code= links, arrows do not navigate while shared code is loaded but do on a clean page, and the share button sits right-aligned in the toolbar. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PJDjKbt3EyWPEThak9WQXp
The home header no longer hides on landing: the scroll entrance is scoped to the brand, and the emerging veil moved to a pseudo-element that animates opacity only, so the nav reads from first paint and scrolling stops repainting background and shadow every frame. Body type is 100%/1.6 so browser text-size settings apply, and the /about specimen now describes the stack as it actually renders — no font-face ships, so the system face is the real product, recorded in lessons-learned. prefers-reduced-transparency and prefers-contrast gain solid-chrome and defined-border fallbacks. Cards press down on tap, header links carry ~43px tap targets via padding with cancelling negative margins, search exposes combobox and listbox semantics to match its keyboard behavior, and the runner chip's navy is tokenized as --terminal-bg/--terminal-ink with swatches on /about. The silent arrow-key dead-end at catalog edges stays by design: feedback only where it earns its place. Verified in headless Chromium at 1160, 390x844, and 844x390: the nav renders at first paint on home at all three, and About's tap target measures 43px tall ending inside the 390px viewport. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PJDjKbt3EyWPEThak9WQXp
Found while verifying the rebased branch end to end: module scripts without async execute in document order, each waiting for the previous module to settle, and runner.js sits behind the highlighter (top-level await on the esm.sh Shiki import) and the CodeMirror graph. Through a slow proxy the Run/Reset/share/keyboard wiring attached late or never. runner.js imports nothing and already guards its own DOM readiness, so it now loads async and attaches as soon as it arrives. Verified in headless Chromium: share round-trips, the shared-code notice, the pristine-editor arrow guard, and the copy buttons all work with the CDN both reachable and dead. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PJDjKbt3EyWPEThak9WQXp
adewale
force-pushed
the
claude/website-elevation-strategy-7q0npz
branch
from
8e83f4e to
44b5c00
Compare
FT Kunst Grotesk and Apercu Mono Pro led the font stacks from the first commit, but no font-face ever shipped and the faces are not installed anywhere — not on visitors' machines, not on the maintainer's Mac, not on the build machine that rasterizes the social cards. Every human has always seen the fallbacks. The stacks now declare what actually renders: system-ui leads prose (dropping the obsolete BlinkMacSystemFont alias) and ui-monospace leads the editor, matching the inline-code rule and giving Mac users SF Mono properly. The /about type specimen, CHANGELOG, and lessons-learned record the decision; the lesson is now: never lead a stack with a face nobody has. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PJDjKbt3EyWPEThak9WQXp
adewale
changed the title
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
2 participants
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
Adds learner-facing tools and discoverability foundations: an
/aboutpage, source-copy and code-share controls, arrow-key example navigation, resilient runner startup, and a full-width responsive home-page search field.This is a deliberate 30-file (+1,305/−84) implementation of the elevation strategy’s immediate learner-experience work, including generated fingerprinted assets and its audit follow-ups.
Why
No linked issue. This implements the “Now” tranche in
docs/elevation-strategy.md: help learners move between examples, reuse code, understand the site’s teaching/runtime model, and find concepts in the 109-example catalog.The follow-up audit found that
/aboutwas not deployed by the Worker, lacked a social card, and that runner controls could still wait behind CDN-backed editor imports. Those gaps are resolved here.How
/aboutpage with a generatedog:imagecard and Worker/FastAPI delivery.Testing
make verifypassed: 213 tests, generated-file checks, SEO/cache lint, quality gates, search ranking, Ruff, social-card provenance, and browser checks.verifypassed on the final head (29e0c1a).992/992px, mobile portrait362/362px, and mobile landscape796/796px(search/main)./aboutWorker paths, its canonical/social metadata, generated social card, and SEO-lint inclusion.Visual validation
Reproduce the responsive browser checks with a local Worker:
The browser contract runs against the rendered page at desktop, 390×844 portrait, and 844×390 landscape viewports; it validates the responsive search width along with the interactive learner tools.
Risk
make check-generatedprevent stale HTML/assets.