Fix footer & add guideline (#739)

* fix & udpate footer

* update guides

* complete add footer guide

* update branch doc

* specify function

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

docs/contribute/localization-program/how-it-works.md

@@ -27,14 +27,17 @@ The `dev` branch runs GitHub Actions to handle synchronization tasks. You can fi
 - **`sync-fork.yml`**: This workflow synchronizes documentation from the upstream repository. It runs daily at 00:00.
 - **`sync-translations.yml`**: This workflow synchronizes updated translations to the respective language branches for preview purposes on the corresponding language websites.
 
-#### 2. `localization`
+#### 2. `main`
 This branch stays in sync with the upstream repository through GitHub Actions running on the `dev` branch. It is also used for updating certain codes that we intend to propose to the original repository.
 
-#### 3. `l10n_localization`
-This branch includes all changes from the `localization` branch and translations from Crowdin. All modifications in this branch are committed to the upstream repository.
+#### 3. `l10n_main`
+This branch includes all changes from the `main` branch and translations from Crowdin. All modifications in this branch are periodically committed to the upstream repository by using a new sub-branch named `l10n_main_[some data]`.
 
-#### 4. `[lang]_localization`
-These branches are designated for specific language previews, such as `ko_localization` for Korean and `ja_localization` for Japanese. They allow us to preview the website in different languages.
+#### 4. `l10n_feat` or `l10n_feat_[specific functions]`
+This branch will include changes to code or documentation related to the translation system. Once all content is finalized, the changes in this branch will be merged into `l10_main`.
+
+#### 5. `[lang]_preview`
+These branches are designated for specific language previews, such as `ko_preview` for Korean and `ja_preview` for Japanese. They allow us to preview the website in different languages.
 
 By maintaining these branches and using GitHub Actions, we efficiently manage the synchronization of our documentation and translation updates, ensuring that our multilingual content is always up to date.
 

docs/contribute/localization-program/how-to-contribute.md

@@ -43,6 +43,17 @@ All tasks are performed in **side-by-side** mode in the Crowdin Editor. To enabl
   ![create-tasks](/img/localizationProgramGuideline/create-tasks.png)
 
 ### Developer
+- **Update Footer Configuration for Your Language :**
+  1. Fork our [**repository**](https://github.com/TownSquareXYZ/ton-docs/tree/i18n_feat).
+  2. Locate the file [**`src/theme/Footer/config.ts`**](https://github.com/TownSquareXYZ/ton-docs/blob/main/src/theme/Footer/config.ts).
+  3. Copy the value of the variable **`FOOTER_COLUMN_LINKS_EN`** to **`FOOTER_COLUMN_LINKS_[YOUR_LANG]`**.
+  4. Translate the values of the keys **`headerLangKey`** and **`langKey`** to your language, as we did for Mandarin in **`FOOTER_COLUMN_LINKS_CN`**.
+  5. Add a new property to **`FOOTER_LINKS_TRANSLATIONS`**:
+      - Set **the key** as your [**ISO language code**](https://www.andiamo.co.uk/resources/iso-language-codes/) (**two letters**, **lowercase**).
+      - **The value** should be the new variable you just created for your language.
+  6. Run the command **`yarn start:local [YOUR_IOS_LANG_CODE]`** to preview the new footer in your language.   
+        (e.g., **`yarn start:local ru`** for a preview of the **Russian** footer)
+  7. If everything looks good, create a pull request to the **`i18n_feat`** branch.
 - **Upload files**
 - **Edit translatable text**
 - **Connect integrations** (e.g., add GitHub integration)

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
+    "start:local": "docusaurus start --locale",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",

src/theme/Footer/config.ts

@@ -192,4 +192,14 @@ export const FOOTER_COLUMN_LINKS_CN = [
       { langKey: "联系我们", url: PAGE_CONTACT_US },
     ],
   },
-];
+];
+
+export function footerLinkExporter(lang?: string) {
+  const FOOTER_LINKS_TRANSLATIONS = {
+    mandarin: FOOTER_COLUMN_LINKS_CN,
+  };
+
+  return (
+    FOOTER_LINKS_TRANSLATIONS?.[lang?.toLowerCase()] ?? FOOTER_COLUMN_LINKS_EN
+  );
+}

src/theme/Footer/index.tsx

@@ -4,7 +4,7 @@ import { NetworkIcon } from "./NetworkIcon";
 import { Caption, Text } from "./Typography";
 import { Logo } from "./Logo";
 import { Separator } from "./Separator";
-import { FOOTER_COLUMN_LINKS_EN, FOOTER_COLUMN_LINKS_CN, NETWORKS } from "./config";
+import { FOOTER_COLUMN_LINKS_EN, footerLinkExporter, NETWORKS } from "./config";
 import { NewRow, NewCol } from "./GridSystem";
 import { useThemeConfig } from "@docusaurus/theme-common";
 import { useColorMode } from "@docusaurus/theme-common";
@@ -24,7 +24,11 @@ const FooterColumnContent: FC<IFooterColumnContentProps> = ({
       <Text className="CustomFooter__colHeader">{column.headerLangKey}</Text>
       <div className="CustomFooter__colLinks">
         {column.links.map((link) => (
-          <a className="CustomFooter__colLink" href={link.url} key={link.langKey}>
+          <a
+            className="CustomFooter__colLink"
+            href={link.url}
+            key={link.langKey}
+          >
             <Caption scheme={scheme}>{link.langKey}</Caption>
           </a>
         ))}
@@ -53,22 +57,18 @@ function Footer() {
   const { colorMode } = useColorMode();
   const [style, setStyle] = useState<typeof colorMode>("dark");
   const [FOOTER_COLUMN_LINKS, setFOOTER_COLUMN_LINKS] = useState(
-    FOOTER_COLUMN_LINKS_EN
+    footerLinkExporter()
   );
   const { siteConfig, i18n } = useDocusaurusContext();
 
-
   useEffect(() => {
-    if (i18n.currentLocale === "zh-CN") {
-      setFOOTER_COLUMN_LINKS(FOOTER_COLUMN_LINKS_CN);
-    }
+    setFOOTER_COLUMN_LINKS(footerLinkExporter(i18n.currentLocale));
   }, [i18n.currentLocale]);
-  
+
   if (!footer) {
     return null;
   }
 
-
   useEffect(() => {
     const docColorMode = document.documentElement.getAttribute(
       "data-theme"
@@ -84,7 +84,9 @@ function Footer() {
   }, [colorMode]);
 
   return (
-    <footer className={`CustomFooter CustomFooter--m-scheme-${style} bootstrap-wrapper`}>
+    <footer
+      className={`CustomFooter CustomFooter--m-scheme-${style} bootstrap-wrapper`}
+    >
       <div className="container">
         <div className="CustomFooter__links">
           <NewRow