Skip to content

Commit dc713cd

Browse files
吴师兄claude
andcommitted
[readme-conversion] English README 升级二期版式 + index-by-topic 漂移校正
英文 README-En 同步二期版式(徽章按钮/2026近况/GIF直达UTM·_en slots/折叠/Star区); build-readme.js 扩展为中英双注入(STATS-EN 标记区), 英文数字也归脚本接管; index-by-topic.md 按当前渲染器重排(纯等大专题组排序漂移, 内容无增减), sync --check-generated 转绿。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 0b36a61 commit dc713cd

5 files changed

Lines changed: 547 additions & 399 deletions

File tree

docs/README-En.md

Lines changed: 101 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,43 @@
11
# LeetCodeAnimation
22

3+
> LeetCode solutions explained with animations: how pointers move, how states change, how recursion unfolds, and why boundary cases hold.
4+
> This GitHub copy is the public index and historical assets; **full step-through, replay, speed control, and voice walkthroughs live in the website version.**
5+
6+
<!-- Conversion layer: badges (hand-maintained). The problem-count badge reads docs/data/stats.json — number is script-managed, do not edit. -->
37
[![GitHub stars](https://img.shields.io/github/stars/MisterBooo/LeetCodeAnimation?style=social)](https://github.com/MisterBooo/LeetCodeAnimation)
8+
[![last commit](https://img.shields.io/github/last-commit/MisterBooo/LeetCodeAnimation?color=7c3aed)](https://github.com/MisterBooo/LeetCodeAnimation/commits/master)
9+
[![LeetCode animations](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FMisterBooo%2FLeetCodeAnimation%2Fmaster%2Fdocs%2Fdata%2Fstats.json&query=%24.count&label=LeetCode%20animations&color=7c3aed)](leetcode-animation-index.md)
10+
11+
<!-- Three conversion buttons: all carry utm_source=github. Link list: docs/readme-revamp/utm-links.md -->
12+
[![🎬 Interactive version](https://img.shields.io/badge/🎬_Interactive_version-step·speed·voice-7c3aed?style=for-the-badge)](https://www.algomooc.com/leetcode-animation?utm_source=github&utm_medium=readme&utm_campaign=lca_revamp&utm_content=hero_interactive_en)
13+
[![📚 Browse by topic](https://img.shields.io/badge/📚_Browse_by_topic-arrays·lists·DP·graphs…-1f6feb?style=for-the-badge)](https://www.algomooc.com/topics?utm_source=github&utm_medium=readme&utm_campaign=lca_revamp&utm_content=hero_topics_en)
14+
[![🤖 AI tutor Xiao Ou](https://img.shields.io/badge/🤖_AI_tutor-ask_anytime-16a34a?style=for-the-badge)](https://www.algomooc.com/ai-tutor?utm_source=github&utm_medium=readme&utm_campaign=lca_revamp&utm_content=hero_ai_xiaoou_en)
15+
16+
If this project helps you, a **Star** keeps it visible and supports continued updates.
17+
18+
---
19+
20+
## 🚧 2026 Major Version In Progress
421

5-
LeetCode solutions explained with animations and visual notes.
22+
This repo is not a one-off archive. A major 2026 upgrade is underway — **only shipped / in-progress facts are listed**:
623

7-
Instead of only storing code, this project focuses on the process behind each solution: how pointers move, how states change, how recursion unfolds, and why boundary cases work. The repository keeps earlier GIFs, notes, code, and article assets, while also syncing the current website-side LeetCode animation index.
24+
-**Three-language reference code**: every solution ships **Python / C++ / Java** implementations, Python by default.
25+
-**AI tutor "Xiao Ou"**: an AI algorithm tutor that answers follow-up questions on ideas and edge cases while you solve.
26+
-**Voice walkthroughs in Wu Shixiong's voice**: the animation narrates as it plays; the voice is **AI-synthesized (Wu Shixiong's voice, authorized)**. Hit 🔊 in the player.
27+
- 🚧 **Full quality pass over 299 problems**: a problem-by-problem quality review and remake, shipping in batches and synced back into this repo's index.
828

9-
If this project helps you, a GitHub Star is appreciated and helps the project stay visible. For the best animation playback experience, use the website version; GitHub is better for indexes, historical assets, and sync history.
29+
> Progress flows into the "Current Index" below and [`sync-log.md`](sync-log.md) via the sync scripts.
1030
11-
[Website animations](https://www.algomooc.com/leetcode-animation) · [Problem index](leetcode-animation-index.md) · [Structured data](data/manifest.json)
31+
---
1232

1333
## Website-Style Animation Previews
1434

15-
These GIFs are captured from the current website player. GitHub is good for a fast preview and search; use the website version for full step playback, code walkthroughs, and the interactive reading experience.
35+
These GIFs are captured from the website player. **Click any image to jump straight to its problem page** (full step playback, three-language code, and voice walkthrough are all in the website version).
1636

1737
<table>
1838
<tr>
1939
<td width="50%">
20-
<a href="https://www.algomooc.com/leetcode-animation/two-sum">
40+
<a href="https://www.algomooc.com/leetcode-animation/two-sum?utm_source=github&utm_medium=readme&utm_campaign=lca_revamp&utm_content=preview_two_sum_en">
2141
<img src="assets/previews/two-sum.gif" alt="Two Sum animation preview" width="420">
2242
</a>
2343
<br>
@@ -26,7 +46,7 @@ These GIFs are captured from the current website player. GitHub is good for a fa
2646
Scan the array while the hash table grows, then see exactly where the complement is found.
2747
</td>
2848
<td width="50%">
29-
<a href="https://www.algomooc.com/leetcode-animation/trapping-rain-water">
49+
<a href="https://www.algomooc.com/leetcode-animation/trapping-rain-water?utm_source=github&utm_medium=readme&utm_campaign=lca_revamp&utm_content=preview_trapping_rain_water_en">
3050
<img src="assets/previews/trapping-rain-water.gif" alt="Trapping Rain Water animation preview" width="420">
3151
</a>
3252
<br>
@@ -37,7 +57,7 @@ These GIFs are captured from the current website player. GitHub is good for a fa
3757
</tr>
3858
<tr>
3959
<td width="50%">
40-
<a href="https://www.algomooc.com/leetcode-animation/number-of-islands">
60+
<a href="https://www.algomooc.com/leetcode-animation/number-of-islands?utm_source=github&utm_medium=readme&utm_campaign=lca_revamp&utm_content=preview_number_of_islands_en">
4161
<img src="assets/previews/number-of-islands.gif" alt="Number of Islands animation preview" width="420">
4262
</a>
4363
<br>
@@ -46,7 +66,7 @@ These GIFs are captured from the current website player. GitHub is good for a fa
4666
The DFS coloring process unfolds cell by cell, making connected components easier to inspect.
4767
</td>
4868
<td width="50%">
49-
<a href="https://www.algomooc.com/leetcode-animation/linked-list-cycle">
69+
<a href="https://www.algomooc.com/leetcode-animation/linked-list-cycle?utm_source=github&utm_medium=readme&utm_campaign=lca_revamp&utm_content=preview_linked_list_cycle_en">
5070
<img src="assets/previews/linked-list-cycle.gif" alt="Linked List Cycle animation preview" width="420">
5171
</a>
5272
<br>
@@ -57,99 +77,117 @@ These GIFs are captured from the current website player. GitHub is good for a fa
5777
</tr>
5878
</table>
5979

80+
**↑ The website version also lets you step, replay, change speed, and listen**[open the interactive version →](https://www.algomooc.com/leetcode-animation?utm_source=github&utm_medium=readme&utm_campaign=lca_revamp&utm_content=preview_cta_en)
81+
82+
---
83+
6084
## Highlights
6185

62-
- **Animation-first notes**: many problems keep GIFs or step-by-step animation assets.
63-
- **256 LeetCode animation entries**: the current website-side index is synced into this repository, covering arrays, linked lists, stacks, binary trees, dynamic programming, graphs, backtracking, greedy methods, binary search, and more.
64-
- **Historical assets**: earlier notes, code, article files, and animation files remain available.
65-
- **Structured data**: `data/manifest.json` can be consumed by scripts for indexing, link checks, or downstream tooling.
66-
- **Continuous sync**: when the website-side animation index changes, the repository index can be regenerated.
86+
- **Animation-first**: understand the process first, then return to the code. Many problems keep GIFs or step-by-step animation assets.
87+
- **Three-language code**: each solution ships Python / C++ / Java reference implementations.
88+
- **Structured data**: [`data/manifest.json`](data/manifest.json) can be consumed by scripts for indexing, link checks, or downstream tooling.
89+
- **Continuous sync**: when the website adds or adjusts animations, scripts sync them back to GitHub — the repo is not a static archive.
6790

91+
<!-- LCA-AUTOGEN:STATS-EN START — do not edit by hand; injected by tools/scripts/build-readme.js -->
6892
## Current Index
6993

94+
> The numbers below are injected by `tools/scripts/build-readme.js` from `docs/data/manifest.json`. **Do not edit by hand.**
95+
7096
| Item | Count / Path |
7197
| :-- | :-- |
72-
| LeetCode animation items | 256 |
98+
| LeetCode animation items | **256** |
7399
| Easy | 71 |
74100
| Medium | 160 |
75101
| Hard | 25 |
76102
| Data file | [`data/manifest.json`](data/manifest.json) |
77-
| Markdown index | [`docs/leetcode-animation-index.md`](leetcode-animation-index.md) |
78-
| Topic index | [`docs/index-by-topic.md`](index-by-topic.md) |
79-
| Sync log | [`docs/sync-log.md`](sync-log.md) |
80-
| Website path | [`https://www.algomooc.com/leetcode-animation`](https://www.algomooc.com/leetcode-animation) |
103+
| Index by number | [`leetcode-animation-index.md`](leetcode-animation-index.md) |
104+
| Index by topic | [`index-by-topic.md`](index-by-topic.md) |
105+
| Website path | <https://www.algomooc.com/leetcode-animation> |
106+
107+
<!-- LCA-AUTOGEN:STATS-EN END -->
108+
109+
> **What the numbers mean**: **256** is the number of **LeetCode animations already synced into this repo** (computed by scripts from the website-side `study_index.js``manifest.json`).
110+
> The **299** mentioned above is **algomooc.com's full animation catalog** (including advanced problems and topic sets, from the site's `content-stats` single source) — a larger set than this repo's synced LeetCode subset.
111+
> Both numbers are **script-managed and never hand-typed**: 256 comes from this repo's manifest; 299 is backfilled from the site's content-stats (see the `siteTotal` field in [`data/stats.json`](data/stats.json)).
112+
113+
---
81114

82115
## Content Map
83116

84117
| Goal | Start Here |
85118
| :-- | :-- |
86-
| Search animations by problem number | [`docs/leetcode-animation-index.md`](leetcode-animation-index.md) |
87-
| Search animations by topic | [`docs/index-by-topic.md`](index-by-topic.md) |
119+
| Search animations by problem number | [`leetcode-animation-index.md`](leetcode-animation-index.md) |
120+
| Search animations by topic | [`index-by-topic.md`](index-by-topic.md) |
88121
| Process problem data with scripts | [`data/manifest.json`](data/manifest.json) |
89-
| Read earlier notes | [`docs/notes/`](notes) or each problem's `Article/` folder under [`problems/`](../problems) |
122+
| Read earlier notes | [`notes/`](notes) or each problem's `Article/` folder under [`problems/`](../problems) |
90123
| Check earlier animation assets | Each problem's `Animation/` folder under [`problems/`](../problems) |
91-
| View README preview GIFs | [`docs/assets/previews/`](assets/previews) |
92-
| Read sync history | [`docs/sync-log.md`](sync-log.md) |
93-
| Sync the website-side index | [`tools/scripts/sync-algomooc-index.js`](../tools/scripts/sync-algomooc-index.js) |
124+
| Read sync history | [`sync-log.md`](sync-log.md) |
94125

95-
## Usage
126+
---
96127

97-
1. Search by problem number in [`docs/leetcode-animation-index.md`](leetcode-animation-index.md).
98-
2. Use [`data/manifest.json`](data/manifest.json) for scripts or downstream tooling.
99-
3. Check `docs/notes/` and each problem folder under `problems/` for historical `Article/` and `Animation/` assets.
100-
4. Run the sync script after the website-side index changes.
128+
<details>
129+
<summary><strong>🛠 Maintainers: sync & data notes</strong> (click to expand — readers can skip)</summary>
101130

102-
## Repository And Website
131+
### Repository and website
103132

104-
GitHub stores historical content, the public index, and sync scripts. The website maintains the current animation pages, including the playback and step-by-step reading experience. The sync script writes the website-side problem list back into this repository for review, search, and versioning.
133+
GitHub stores historical content, the public index, and sync scripts; the website maintains the current animation pages. Playback, step-through, and reading experience are authoritative on the website. The sync scripts write the website's problem list back into this repo for review, search, and versioning.
105134

106-
## Sync
135+
### Sync
107136

108-
The website-side problem index comes from `study_index.js`. Review first:
137+
The website's problem index comes from `study_index.js`. Review first:
109138

110139
```bash
111140
npm run review:site
112141
```
113142

114-
If the review says a sync is needed:
143+
Once a sync is confirmed:
115144

116145
```bash
117-
npm run sync
118-
npm run validate
146+
npm run sync # update manifest / number index / topic index / sync log
147+
npm run validate # validate the manifest
148+
node tools/scripts/build-readme.js --write # re-inject README number blocks + stats.json
119149
```
120150

121-
The sync script updates:
151+
This updates:
122152

123153
- `data/manifest.json`
124-
- `docs/leetcode-animation-index.md`
125-
- `docs/index-by-topic.md`
126-
- `docs/sync-log.md`
154+
- `leetcode-animation-index.md`
155+
- `index-by-topic.md`
156+
- `sync-log.md`
157+
- `data/stats.json` and the `Current Index` marker blocks in both READMEs
127158

128-
See [`docs/sync-workflow.md`](sync-workflow.md) for the full workflow and commit-message rules.
159+
See [`sync-workflow.md`](sync-workflow.md) and [`HOW-TO-INTERACT.md`](HOW-TO-INTERACT.md) for the full workflow, commit rules, and number-ownership mechanism.
129160

130-
## Layout
161+
### Layout
131162

132163
| Path | Notes |
133164
| :-- | :-- |
134-
| `data/manifest.json` | Structured LeetCode animation index |
135-
| `docs/leetcode-animation-index.md` | Markdown index generated from the manifest |
136-
| `docs/index-by-topic.md` | Topic index generated from the manifest |
137-
| `docs/sync-log.md` | Sync history |
138-
| `docs/sync-workflow.md` | Website-to-GitHub workflow |
139-
| `tools/scripts/review-site-changes.js` | Review whether website changes should be synced |
140-
| `tools/scripts/sync-algomooc-index.js` | Sync script for the website-side index |
141-
| `tools/scripts/validate-manifest.js` | Manifest validator |
142-
| `docs/assets/previews/` | Website-style animation preview GIFs used by the README |
143-
| `docs/notes/` | Historical notes |
144-
| `problems/` | Historical per-problem notes, code, and animation assets |
145-
| `problems/*/Animation/` | Historical animation assets |
146-
| `problems/*/Article/` | Historical article assets |
147-
| `tools/` | Sync scripts, schema, animation helpers, and templates |
148-
149-
## Feedback
150-
151-
Issues are used for broken links, mismatched index entries, and title or category corrections. I will keep syncing website-side animation updates back into this repository so the index remains searchable and versioned.
152-
153-
## Chinese
165+
| `data/manifest.json` | Structured LeetCode animation index (single source of truth for numbers) |
166+
| `data/stats.json` | Script-computed counts read by the README badge |
167+
| `leetcode-animation-index.md` | Markdown index generated from the manifest |
168+
| `index-by-topic.md` | Topic index generated from the manifest |
169+
| `sync-log.md` | Sync history |
170+
| `sync-workflow.md` | Website-to-GitHub workflow |
171+
| `../tools/scripts/review-site-changes.js` | Review whether website changes should be synced |
172+
| `../tools/scripts/sync-algomooc-index.js` | Sync script for the website-side index |
173+
| `../tools/scripts/validate-manifest.js` | Manifest validator |
174+
| `../tools/scripts/build-readme.js` | Inject README number blocks + generate `stats.json` |
175+
| `assets/previews/` | Website-style animation preview GIFs used by the READMEs |
176+
| `notes/` · `../problems/` | Historical notes, code, and animation assets |
177+
178+
</details>
179+
180+
---
181+
182+
## ⭐ Star to witness the 299 campaign land
183+
184+
[![Star History Chart](https://api.star-history.com/svg?repos=MisterBooo/LeetCodeAnimation&type=Date)](https://star-history.com/#MisterBooo/LeetCodeAnimation&Date)
185+
186+
This project grew from hand-drawn animations to where it is today on the encouragement of every Star.
187+
If it helped you truly understand a problem, **a Star** is the most concrete support for continued updates.
188+
189+
> 📌 Content is continuously synced from **[algomooc.com](https://www.algomooc.com/leetcode-animation?utm_source=github&utm_medium=readme&utm_campaign=lca_revamp&utm_content=footer_site_en)** — when the website updates, the repo index follows via scripts.
190+
191+
## 中文
154192

155193
See [`../README.md`](../README.md).

0 commit comments

Comments
 (0)