From dc643af3eeed3740533bdf2001b7778f97b603db Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Fri, 7 Jun 2024 17:12:15 +0800
Subject: [PATCH] github action to regenerate toc

---
 .github/workflows/gen-toc.yml | 36 +++++++++++++++++++++++++++++++++++
 README.md                     |  8 ++++----
 2 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 .github/workflows/gen-toc.yml

diff --git a/.github/workflows/gen-toc.yml b/.github/workflows/gen-toc.yml
new file mode 100644
index 00000000..3e95aaa9
--- /dev/null
+++ b/.github/workflows/gen-toc.yml
@@ -0,0 +1,36 @@
+name: Generate table of contents
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+env:
+  BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
+
+jobs:
+  gen-toc:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.head_ref }}
+      - name: Install dependencies
+        run: npm install
+      - name: Generate table of contents
+        run: npm run gen
+      - name: 'Commit changes if required'
+        run: |
+          if ! git diff --quiet README.md; then
+            git config user.email "github-actions[bot]@users.noreply.github.com"
+            git config user.name "GitHub Actions"
+            git add README.md
+            git commit -m "[auto] regenerate table of contents"
+            git push
+            echo "[info] Table of contents updated and committed."
+          else
+            echo "[info] No changes to table of contents."
+          fi
+        working-directory: ${{ github.workspace }}
diff --git a/README.md b/README.md
index b20c13c0..5f452f13 100644
--- a/README.md
+++ b/README.md
@@ -485,7 +485,7 @@
 | 457 | [What is the difference between map and forEach functions?](#what-is-the-difference-between-map-and-foreach-functions) |
 | 458 | [Give an example of statements affected by automatic semicolon insertion?](#give-an-example-of-statements-affected-by-automatic-semicolon-insertion) |
 | 459 | [What are the event phases on browser?](#what-are-the-event-phases-on-browser) |
-| 460 | [What are the real world usecases of proxy?](#what-are-the-real-world-usecases-of-proxy) |
+| 460 | [What are the real world use cases of proxy?](#what-are-the-real-world-use-cases-of-proxy) |
 <!-- TOC_END -->
 
 <!-- QUESTIONS_START -->
@@ -8602,7 +8602,7 @@ Here are some common use cases of closures:
 
 **[⬆ Back to Top](#table-of-contents)**
 
-459. ### What are the event phases on browser?
+459. ### What are the event phases of a browser?
      There are 3 phases in the lifecycle of an event propagation in JavaScript,
 
      1. **Capturing phase:** This phase goes down gradually from the top of the DOM tree to the target element when a nested element clicked. Before the click event reaching the final destination element, the click event of each parent's element must be triggered.
@@ -8617,8 +8617,8 @@ Here are some common use cases of closures:
 
   **[⬆ Back to Top](#table-of-contents)**
 
-460. ### What are the real world usecases of proxy?
-     Proxies are not used in regular day to day JavaScript work but they enabled many exciting programming patterns. Some of the real world usecases are listed below,
+460. ### What are the real world use cases of proxy?
+     Proxies are not used in regular day to day JavaScript work but they enabled many exciting programming patterns. Some of the real world use cases are listed below,
 
      1. Vue3 used proxy concept to implement reactive state 
      2. SolidJS implemented reactive stores