From ac99a4c28d517df6a13493feffb9620570faef00 Mon Sep 17 00:00:00 2001
From: Henry Zhang <haininghenryzh@vmware.com>
Date: Tue, 12 Jul 2016 16:21:22 +0800
Subject: [PATCH] add i18n guide

---
 docs/developer_guide_i18n.md | 58 ++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 docs/developer_guide_i18n.md

diff --git a/docs/developer_guide_i18n.md b/docs/developer_guide_i18n.md
new file mode 100644
index 000000000..c6cb16ccb
--- /dev/null
+++ b/docs/developer_guide_i18n.md
@@ -0,0 +1,58 @@
+## Developer's Guide for Internationalization (i18n)
+
+*NOTE: All the files you created should use UTF-8 encoding.*
+
+### Steps to localize the UI in your language
+
+1. Copy the file `static/resources/js/services/i18n/locale_messages_en-US.js` to a new file in the same directory named `locale_messages_<language>_<locale>.js` .
+
+    The file contains a JSON object named `locale_messages`, which consists of key-value pairs of UI strings:
+    ```
+    var local_messages = {
+       'sign_in': 'Sign In',
+       'sign_up': 'Sign Up',
+          ...
+     };
+    ```  
+    In the file `locale_messages_<language>_<locale>.js`, translate all the values into your language. Do not change any keys.
+
+2. After creating your locale file, you should include it from the HTML page header template.
+
+    In the file `views/sections/header-include.htm`, look for a `if` statement which switch langauges based on the current language (`.Lang`) value. Add in a `else if` statement for your language:
+    ```
+    {{ if eq .Lang "zh-CN" }}
+	   <script src="/static/resources/js/services/i18n/locale_messages_zh-CN.js"></script>
+	{{ else if eq .Lang "en-US"}}
+	   <script src="/static/resources/js/services/i18n/locale_messages_en-US.js"></script>
+    {{ else if eq .Lang "<language>-<locale>"}}
+       <script src="/static/resources/js/services/i18n/locale_messages_<language>-<locale>.js"></script>
+	{{ end }}
+    ```
+3. Add the new coming language to the `I18nService` module.
+
+    In the file `static/resources/js/services/i18n/services.i18n.js`, append a new key-value item to the `supportLanguages` object. This value will be displayed in the language dropdown list in the UI.
+    ```
+     var supportLanguages = {
+      'en-US': 'English',
+      'zh-CN': '中文',
+      '<language>-<locale>': '<language_name>'
+     };
+    ```
+    **NOTE: Don't miss the comma before the new key-value item you've added.**
+
+
+4. In the directory `static/i18n/`, copy the file `locale_en-US.ini` to a new file named  `locale_<language>-<locale>.ini`. In this file, translate all the values on the right hand side into your language. Do not change any keys.
+
+5. Add the new language to the `app.conf` file.
+    
+    In the file `Deploy/config/ui/app.conf`, append a new item to the configuration section.
+    ```
+		 [lang]
+		 types = en-US|zh-CN|<language>-<locale>
+		 names = en-US|zh-CN|<language>-<locale>
+    ```
+
+6. Next, change to `Deploy/` directory, rebuild and start the Harbor  by the below command: 
+    ```
+        docker-compose up --build -d
+    ```