Facilitate other contributors to add translation content in other national languages to the project

README.zh-CN.md

@@ -0,0 +1,33 @@
+# Website
+
+该网站是使用现代静态网站生成器 [Docusaurus 2](https://v2.docusaurus.io/) 构建的。
+
+### 自动安装依赖
+
+```
+$ yarn
+```
+
+### 本地开发
+
+```
+$ yarn start
+```
+
+此命令启动本地开发服务器并打开浏览器窗口。大多数更改都会实时反映，无需重新启动服务器。
+
+### 构建
+
+```
+$ yarn build
+```
+
+此命令将静态内容生成到`build`目录中，并且可以使用任何静态内容托管服务提供服务。
+
+### 部署
+
+```
+$ GIT_USER=<您的 GitHub 用户名> USE_SSH=true yarn deploy
+```
+
+如果您使用 GitHub Pages 进行托管，此命令是构建网站并将其推送到 `gh-pages` 分支的便捷方法。

blog/2022-08-03-control-refs.md

@@ -12,7 +12,7 @@ Flet controls are objects and to access their properties we need to keep referen
 
 Consider the following example:
 
-```python {6-8,18,19,21}
+```python {6-7,18,19,21}
 import flet as ft
 
 def main(page):
@@ -84,7 +84,7 @@ All Flet controls have `ref` property.
 
 We could re-write our program to use references:
 
-```python {7-9,21-24}
+```python {7-8,21-23}
 import flet as ft
 
 
@@ -117,4 +117,4 @@ Now we can clearly see in `page.add()` the structure of the page and all the con
 
 Yes, the logic becomes a little bit more verbose as you need to add `.current.` to access ref's control, but it's a matter of personal preference :)
 
-[Give Flet a try](/docs/guides/python/getting-started) and [let us know](https://discord.gg/dzWXP8SHG8) what you think!
+[Give Flet a try](/docs/guides/python/getting-started) and [let us know](https://discord.gg/dzWXP8SHG8) what you think!

make_lang

@@ -0,0 +1,50 @@
+#!/usr/bin/env bash
+# coding=utf-8
+# Powered by https://github.com/alan3344/website
+# Automatically create translation directory structure, files to be translated,
+# and `React Translate/translate()` tags for the project
+
+lang=$1
+override=$2
+color() {
+    echo "\033[0;$1m${@:2}\033[0m"
+}
+
+if [[ "$@" =~ "-h" ]] || [[ "$@" =~ "--help" ]]; then
+    echo Usage: "$(color 33 ./mkdir_lang) <$(color 32 language)> [$(color 31 --override)]"
+    echo "  $(color 32 language) \t$(color 33 Required)  The language name."
+    echo "  $(color 31 --override) \t$(color 33 Optional)  Override the existing files."
+    echo "  $(color 33 -h --help) \t$(color 33 Optional)  Show this help message."
+    echo
+    echo "$(color 33 Example): $(color 32 ./mkdir_lang) $(color 31 zh-CN)"
+    exit 0
+fi
+
+if [ -z "$lang" ]; then
+    echo "$(color 31 Error): $(color 33 language) is required."
+    echo "Try '$(color 32 ./mkdir_lang --help)' for more information."
+    exit 1
+fi
+
+if [ "$override" = "--override" ]; then
+    override="--override"
+else
+    override=""
+fi
+
+mkdir -p i18n/$lang/docusaurus-plugin-content-blog/
+mkdir -p i18n/$lang/docusaurus-plugin-content-docs/
+mkdir -p i18n/$lang/docusaurus-plugin-content-pages/
+mkdir -p i18n/$lang/docusaurus-theme-classic/
+npx docusaurus write-translations --locale $lang $override
+
+if [ "$override" = "--override" ]; then
+    override=""
+else
+    override="-n"
+fi
+
+cp -r $override blog/* i18n/$lang/docusaurus-plugin-content-blog/
+cp -r $override docs/* i18n/$lang/docusaurus-plugin-content-docs/
+cp -r $override src/pages/* i18n/$lang/docusaurus-plugin-content-pages/
+cp -r $override src/theme/* i18n/$lang/docusaurus-theme-classic/

src/components/signup-form/index.js

@@ -1,77 +1,118 @@
-import React, { useEffect, useRef, useState } from "react";
-import BrowserOnly from '@docusaurus/BrowserOnly';
-import HCaptcha from "@hcaptcha/react-hcaptcha";
-import styles from './styles.module.css';
+import React, { useEffect, useRef, useState } from 'react'
+import BrowserOnly from '@docusaurus/BrowserOnly'
+import HCaptcha from '@hcaptcha/react-hcaptcha'
+import styles from './styles.module.css'
+import Translate, { translate } from '@docusaurus/Translate'
 
 export default function SignupForm() {
-    const [token, setToken] = useState(null);
-    const [email, setEmail] = useState("");
-    const captchaRef = useRef(null);
+  const [token, setToken] = useState(null)
+  const [email, setEmail] = useState('')
+  const captchaRef = useRef(null)
 
-    const onSubmit = (event) => {
-        event.preventDefault();
-        captchaRef.current.execute();
-    };
+  const onSubmit = event => {
+    event.preventDefault()
+    captchaRef.current.execute()
+  }
 
-    const onExpire = () => {
-        console.log("hCaptcha Token Expired");
-    };
+  const onExpire = () => {
+    console.log('hCaptcha Token Expired')
+  }
 
-    const onError = (err) => {
-        console.log(`hCaptcha Error: ${err}`);
-    };
+  const onError = err => {
+    console.log(`hCaptcha Error: ${err}`)
+  }
 
-    useEffect(async () => {
-        if (token) {
-            var data = {
-                email: email,
-                captchaToken: token
-            };
+  useEffect(async () => {
+    if (token) {
+      var data = {
+        email: email,
+        captchaToken: token,
+      }
 
-            // send message
-            const response = await fetch("/api/email-signup", {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(data),
-            });
-            const results = await response.json();
-            console.log(`Results:`, results);
-        }
-    }, [token, email]);
+      // send message
+      const response = await fetch('/api/email-signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      })
+      const results = await response.json()
+      console.log(`Results:`, results)
+    }
+  }, [token, email])
 
-    return (
-        <div id="signup" className={styles.signupForm}>
-            <BrowserOnly fallback={<div>Loading...</div>}>
-                {() => {
-                    if (token) {
-                        // signup submitted
-                        return <div>Thank you! You will receive the confirmation email shortly.</div>
-                    } else if (window.location.href.endsWith('?signup-confirmed')) {
-                        // signup confirmed
-                        return <div><span style={{ fontSize: '25px', marginRight: '10px' }}>🎉</span>Congratulations! You have successfully subscribed to Flet newsletter.</div>
-                    } else {
-                        // signup form
-                        return <form onSubmit={onSubmit}>
-                            <h3>Subscribe to Flet newsletter for project updates and tutorials!</h3>
-                            <input
-                                type="email"
-                                value={email}
-                                placeholder="Your email address"
-                                onChange={(evt) => setEmail(evt.target.value)}
-                            />
-                            <input type="submit" value="Submit" />
-                            <HCaptcha
-                                sitekey="db49a301-288d-491b-9746-ebd3354dc5ff"
-                                size="invisible"
-                                onVerify={setToken}
-                                onError={onError}
-                                onExpire={onExpire}
-                                ref={captchaRef}
-                            />
-                        </form>
-                    }
-                }}
-            </BrowserOnly>
-        </div>
-    );
+  return (
+    <div id='signup' className={styles.signupForm}>
+      <BrowserOnly fallback={<div>Loading...</div>}>
+        {() => {
+          if (token) {
+            // signup submitted
+            return (
+              <div>
+                <Translate
+                  id='indexPage.text.sendEmailTip'
+                  description='Send email notification description'>
+                  Thank you! You will receive the confirmation email shortly.
+                </Translate>
+              </div>
+            )
+          } else if (window.location.href.endsWith('?signup-confirmed')) {
+            // signup confirmed
+            return (
+              <div>
+                <span style={{ fontSize: '25px', marginRight: '10px' }}>
+                  🎉
+                </span>
+                <Translate
+                  id='indexPage.text.subscribedTip'
+                  description='Subscription success notification description'>
+                  Congratulations! You have successfully subscribed to Flet
+                  newsletter.
+                </Translate>
+              </div>
+            )
+          } else {
+            // signup form
+            return (
+              <form onSubmit={onSubmit}>
+                <h3>
+                  <Translate
+                    id='indexPage.text.subscribedSuccessTip'
+                    description='Get update notification success description'>
+                    Subscribe to Flet newsletter for project updates and
+                    tutorials!
+                  </Translate>
+                </h3>
+                <input
+                  type='email'
+                  value={email}
+                  placeholder={translate({
+                    id: 'indexPage.input.emailPlaceholder',
+                    message: 'Your email address',
+                    description: 'Email placeholder text description',
+                  })}
+                  onChange={evt => setEmail(evt.target.value)}
+                />
+                <input
+                  type='submit'
+                  value={translate({
+                    id: 'indexPage.input.submit',
+                    message: 'Submit',
+                    description: 'Submit button text description',
+                  })}
+                />
+                <HCaptcha
+                  sitekey='db49a301-288d-491b-9746-ebd3354dc5ff'
+                  size='invisible'
+                  onVerify={setToken}
+                  onError={onError}
+                  onExpire={onExpire}
+                  ref={captchaRef}
+                />
+              </form>
+            )
+          }
+        }}
+      </BrowserOnly>
+    </div>
+  )
 }