feat: add more content for contribution docs (#175)

Signed-off-by: yuluo-yx <[email protected]>

Author: yuluo-yx

tools/make/linter.mk

@@ -2,11 +2,11 @@
 # =  Everything For Project Linter, markdown, yaml, code spell etc.  =
 # =============================== linter.mk ==========================
 
-docs-lint:
+docs-lint: docs-install
 	@$(LOG_TARGET)
 	cd website && npm run lint
 
-docs-lint-fix:
+docs-lint-fix: docs-install
 	@$(LOG_TARGET)
 	cd website && npm run lint:fix
 

website/src/pages/community/community-page.module.css

@@ -130,6 +130,16 @@
   margin-top: 0.25rem;
 }
 
+.stepNumberTips {
+  display: flex;
+  flex-direction: column;
+  margin: 0 0 0 1rem;
+}
+
+.stepNumberTips p {
+    line-height: 1.5;
+}
+
 .step h4 {
   margin: 0 0 0.5rem 0;
   color: var(--ifm-color-primary);

website/src/pages/community/contributing.js

@@ -103,6 +103,16 @@ export default function Contributing() {
                   <div>
                     <h4>Test</h4>
                     <p>Run tests and ensure your changes don't break existing functionality.</p>
+                    <div className={styles.stepNumberTips}>
+                      <p>1. Run precommit hooks, ensure compliance with the project submission guidelines;</p>
+                      <p>
+                        2. You can refer to
+                        {' '}
+                        <a href="/docs/getting-started/installation">Install the local</a>
+                        {' '}
+                        to start semantic-router locally.
+                      </p>
+                    </div>
                   </div>
                 </div>
 
@@ -117,6 +127,64 @@ export default function Contributing() {
             </div>
           </section>
 
+          <section className={styles.section}>
+            <h2>⚙️ Precommit hooks</h2>
+            <p>The Semantic-router project provides a precommit hook to standardize the entire project, including Go, Python, Rust, Markdown, and spelling error checking.</p>
+            <p>Although these measures may increase the difficulty of contributions, they are necessary. We are currently building a portable Docker precommit environment to reduce the difficulty of contributions, allowing you to focus on functional pull requests.</p>
+
+            <div className={styles.card}>
+              <h3>Manual</h3>
+
+              <h4>Some Tips: </h4>
+              <div className={styles.stepNumberTips}>
+                <p>1. If the precommit check fails, don't worry. You can also get more information by executing "make help". </p>
+                <p>2. For the pip installation tool, we recommend that you use venv for installation.</p>
+                <p>3. You can also directly submit the PR and let GitHub CI test it for you, but this will take a lot of time!</p>
+              </div>
+
+              <div className={styles.steps}>
+                <div className={styles.step}>
+                  <span className={styles.stepNumber}>1</span>
+                  <div>
+                    <h4>Install precommit</h4>
+                    <p>Run pip install --user precommit</p>
+                  </div>
+                </div>
+                <div className={styles.step}>
+                  <span className={styles.stepNumber}>2</span>
+                  <div>
+                    <h4>Install check tools</h4>
+                    <div className={styles.stepNumberTips}>
+                      <p>Markdown: npm install -g markdownlint-cli</p>
+                      <p>Yaml: pip install --user yamllint</p>
+                      <p>CodeSpell: pip install --user codespell</p>
+                      <p>JavaScript: cd website && npm lint</p>
+                    </div>
+                  </div>
+                </div>
+                <div className={styles.step}>
+                  <span className={styles.stepNumber}>3</span>
+                  <div>
+                    <h4>Install precommit to git</h4>
+                    <p>Run pre-commit install, then pre-commit installed at .git/hooks/pre-commit</p>
+                  </div>
+                </div>
+                <div className={styles.step}>
+                  <span className={styles.stepNumber}>4</span>
+                  <div>
+                    <h4>Run</h4>
+                    <p>Run make precommit-check to check.</p>
+                  </div>
+                </div>
+
+                <hr />
+
+                <h3>Docker</h3>
+                <p>Coming soon!</p>
+              </div>
+            </div>
+          </section>
+
           <section className={styles.section}>
             <h2>🏷️ Working Group Areas</h2>
             <p>