Repository navigation
Raise contrast in both themes, stop idle repaints, show code as typed, and fix print - #15
Conversation
JSX trims each line of a text block and joins the lines with one space.
The Chinese copy is wrapped across source lines throughout the course, so
it rendered with spaces between Chinese characters and around full-width
punctuation: 1,572 of them in 36 files.
- 1,548 line breaks are joined by a script that walks the TypeScript
syntax tree and touches only JSX text and JSX attribute strings, never
code samples, template literals or comments. Breaks next to Latin
letters, digits, expressions, "——" or operators keep their space.
- 24 more spaces go: 20 after full-width punctuation, 3 between Chinese
text and a tag whose text is Chinese, and one {" "} between a
full-width mark and Chinese text.
- test/zh-copy-spacing.test.ts, the check DataData and AlgoAlgo use,
scans every TSX file and fails on any new stray space; CLAUDE.md states
the rule.
Apart from the one {" "}, the diff changes nothing but whitespace. The
text every edited file renders differs from master only by deleted
spaces, each next to Chinese text, so the English copy is unchanged.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…, fix print - Tokens: tertiary text, code comments and line numbers meet WCAG AA in both themes; the light theme's status colours are darkened (the same values as AlgoAlgo); primary buttons use --on-fill, so the dark theme's bright gradient gets dark text instead of 2:1 white. - Visualisations drawn on the always-dark code background keep the dark theme's text, border, status and accent colours in the light theme, where the darker values had dropped to 1.1–2.5:1. Syntax colours used on light panels have -ink variants for the light theme. - Callouts use auto minmax(0, 1fr), so a code window or a long inline error inside them scrolls in place instead of pushing the callout off a phone screen; the same for the narrowing guards grid, and the Chinese typeof list may wrap anywhere. - Turn off JetBrains Mono's contextual ligatures, so => and !== look as typed. - Code windows: highlighted lines reach the end of the line after scrolling, file names show in full on phones (and as a tooltip), and scrollable stages fade at the side that hides more content. - The hero gradient and the chapter hero glows play a few times and stop instead of repainting idle pages every frame; useStepper stops at the last frame in an effect, not in a state updater. - Printing hides the shell, shows every section and prints in light colours with the code windows kept dark; the hero section links have a navigation label; long hero titles fit 360px screens. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
Deployment failed for project tser with the following error: Learn More: https://vercel.com/renrenmimis-projects?upgradeToPro=build-rate-limit |
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ab1cd6e3a5
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| --text: #171c28; | ||
| --text-2: #4d5871; | ||
| --text-3: #5a6479; |
There was a problem hiding this comment.
When the currently selected theme is dark (the default), this print rule replaces --text, --text-2, --text-3, status colors, and --acc-ink with light-page values globally, while the later print list merely preserves dark panel backgrounds and does not restore their foreground tokens. Consequently elements such as .nr-fn-type render #171c28 text on --code-bg: #0a0d16, and panels such as .ut-machine have similarly unreadable labels in print/PDF output. The light-theme restoration selector does not apply because the root still has data-theme="dark"; apply the dark-panel token overrides within the print block as well.
Useful? React with 👍 / 👎.
Branches from #9 (commit
2148ad8), so it can be merged before or after it, and independently of #10–#14. Inapp/globals.cssit only touches the rules outside the ranges the other PRs own: the shell, the fonts,.reveal, quiz, task list and lab rules are left alone.Summary
Fixes from the 2026-10-09 audit (
04-TSer-代码与体验.md):/narrowingguards grid ran past the viewport on phones, and one callout did on a 1440 px desktop.html, body { overflow-x: clip }then cut the text off./narrowingfunnel type was 1.09:1, and type chips were 1.5–2.5:1.=>,!==,<=and->as ligatures.background-positionanimation re-styled every idle page about 60 times a second.<nav>.useStepper)useSteppercalledsetPlayinginside asetStepupdater.Changes
app/globals.css, tokens:--text-3is#858fa7in the dark theme and#5a6479in the light theme.--tk-comis#808a9f, and--code-lnis 54%.--ok,--warn,--riskand--infoare darkened. These are the values from AlgoAlgo Match chapter 05's preset text to the compiler, align its examples, and tidy chapter 04 #19.--on-fillsets the text colour on primary buttons.--tk-*-inkvariants are added for syntax colours on light panels.--code-accand--code-inkare accents for the dark code background.app/globals.css, rules:[data-theme="light"] :is(.codewin, .ut-machine, …)rule restores the dark theme's text, panel, border, status and accent tokens inside the 26 always-dark panels.font-variant-ligatures: no-contextualis set onbodyand on form controls..calloutusesauto minmax(0, 1fr), and inline code in callouts may wrap.minmax(max-content, 1fr)grid column, so a highlighted line's band reaches the end of the line.app/home.css:-inkcolours./classes)..nr-gxusesminmax(0, 1fr), and the zh typeof list may break anywhere.lib/code.tsx: the file name has atitle, and the spacer is a class.lib/kit.tsx:aria-label"On this page" / 本页目录.lib/stepper.tsx: autoplay is one timeout per frame and stops in an effect at the last frame.test/visual-css.test.tscovers token contrast in both themes, endless non-compositable animations, ligatures, the callout grid and print.Verification
npx tsc --noEmit --incremental false: clean.npm test: 7 files, 47 tests pass.npm run build: succeeds.next start. Colours are resolved by painting on a canvas, sooklchandcolor-mixare measured correctly./types, 390): 0 of 11 file names are truncated, highlighted lines span the full scroll width, and at mid-scroll the fades are 28 px on both sides. Ligatures areno-contextual./narrowingshows 11 of 11 sections, the sidebar is hidden, body text isrgb(77, 88, 113), and code windows useprint-color-adjust: exact./typesreaches 7 / 7 and switches to "↻ Replay".🤖 Generated with Claude Code