forked from lobehub/lobe-chat
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/lobehub/lobe-chat
- Loading branch information
Showing
19 changed files
with
627 additions
and
81 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| # Code Style and Contribution Guidelines | ||
|
|
||
| Welcome to the Code Style and Contribution Guidelines for LobeChat. This guide will help you understand our code standards and contribution process, ensuring code consistency and smooth project progression. | ||
|
|
||
| ## TOC | ||
|
|
||
| - [Code Style](#code-style) | ||
| - [ESLint](#eslint) | ||
| - [Prettier](#prettier) | ||
| - [remarklint](#remarklint) | ||
| - [stylelint](#stylelint) | ||
| - [Contribution Process](#contribution-process) | ||
| - [Gitmoji](#gitmoji) | ||
| - [Semantic Release](#semantic-release) | ||
| - [Commitlint](#commitlint) | ||
| - [How to Contribute](#how-to-contribute) | ||
|
|
||
| ## Code Style | ||
|
|
||
| In LobeChat, we use the `@lobehub/lint` package to maintain a unified code style. This package incorporates configurations for `ESLint`, `Prettier`, `remarklint`, and `stylelint` to ensure that our JavaScript, Markdown, and CSS files adhere to the same coding standards. | ||
|
|
||
| ### ESLint | ||
|
|
||
| We use ESLint to check for issues in our JavaScript code. You can find the `.eslintrc.js` file in the project's root directory, which contains our extensions and custom rules for the ESLint configuration of `@lobehub/lint`. | ||
|
|
||
| To ensure your code aligns with the project's standards, run ESLint before committing your code. | ||
|
|
||
| ### Prettier | ||
|
|
||
| Prettier is responsible for code formatting to maintain consistency. Our Prettier configuration can be found in `.prettierrc.js`, imported from `@lobehub/lint`. | ||
|
|
||
| It's recommended to configure your editor to run Prettier automatically upon saving files or manually run it before committing. | ||
|
|
||
| ### remarklint | ||
|
|
||
| For Markdown files, we use remarklint to ensure consistent document formatting. You can find the corresponding configuration file in the project. | ||
|
|
||
| ### stylelint | ||
|
|
||
| We utilize stylelint to standardize the style of our CSS code. In the configuration file for stylelint, we have made some custom rule adjustments based on `@lobehub/lint` configuration. | ||
|
|
||
| Ensure that your style code passes stylelint checks before committing. | ||
|
|
||
| ## Contribution Process | ||
|
|
||
| LobeChat follows the gitmoji and semantic release as our code submission and release process. | ||
|
|
||
| ### Gitmoji | ||
|
|
||
| When committing code, please use gitmoji to label your commit messages. This helps other contributors quickly understand the content and purpose of your submission. | ||
|
|
||
| Gitmoji commit messages use specific emojis to represent the type or intent of the commit. Here's an example: | ||
|
|
||
| ``` | ||
| 📝 Update README with contribution guidelines | ||
| - Added section about code style preferences | ||
| - Included instructions for running tests | ||
| - Corrected typos and improved formatting | ||
| ``` | ||
|
|
||
| In this example, the 📝 emoji represents a documentation update. The commit message clearly describes the changes and provides specific details. | ||
|
|
||
| ### Semantic Release | ||
|
|
||
| We use semantic release to automate version control and release processes. Ensure that your commit messages adhere to the semantic release specifications so that when the code is merged into the main branch, the system can automatically create a new version and release it. | ||
|
|
||
| ### Commitlint | ||
|
|
||
| To ensure consistency in commit messages, we use `commitlint` to check the format of commit messages. You can find the relevant rules in the `.commitlintrc.js` configuration file. | ||
|
|
||
| Before committing your code, ensure that your commit messages adhere to our standards. | ||
|
|
||
| ### How to Contribute | ||
|
|
||
| 1. Fork the project to your account. | ||
| 2. Create a new branch for development. | ||
| 3. After completing the development, ensure that your code passes the aforementioned code style checks. | ||
| 4. Commit your changes and use appropriate gitmoji to label your commit message. | ||
| 5. Create a Pull Request to the main branch of the original project. | ||
| 6. Await code review and make necessary modifications based on feedback. | ||
|
|
||
| Thank you for following these guidelines, as they help us maintain the quality and consistency of the project. We look forward to your contributions! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
125 changes: 125 additions & 0 deletions
125
docs/Development/Internationalization-Implementation.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| # Internationalization Implementation Guide | ||
|
|
||
| Welcome to the LobeChat Internationalization Implementation Guide. This document will guide you through understanding the internationalization mechanism of LobeChat, including file structure and how to add new languages. LobeChat uses `i18next` and `lobe-i18n` as the internationalization solution, aiming to provide users with seamless multilingual support. | ||
|
|
||
| ## TOC | ||
|
|
||
| - [Internationalization Overview](#internationalization-overview) | ||
| - [File Structure](#file-structure) | ||
| - [Core Implementation Logic](#core-implementation-logic) | ||
| - [Adding Support for New Languages](#adding-support-for-new-languages) | ||
| - [Resources and Further Reading](#resources-and-further-reading) | ||
|
|
||
| ## Internationalization Overview | ||
|
|
||
| Internationalization (i18n for short) is the process of enabling an application to adapt to different languages and regions. In LobeChat, we support multiple languages and achieve dynamic language switching and content localization through the `i18next` library. Our goal is to provide a localized experience for global users. | ||
|
|
||
| ## File Structure | ||
|
|
||
| In the LobeChat project, internationalization-related files are organized as follows: | ||
|
|
||
| - `src/locales/default`: Contains translation files for the default development language (Chinese), which we use as Chinese. | ||
| - `locales`: Contains folders for all supported languages, with each language folder containing the respective translation files generated by lobe-i18n. | ||
|
|
||
| In the directory structure of `src/locales`, the `default` folder contains the original translation files (Chinese), while each other language folder contains JSON translation files for the respective language. The files in each language folder correspond to the TypeScript files in the `default` folder, ensuring consistency in the structure of translation files across languages. | ||
|
|
||
| ``` | ||
| src/locales | ||
| ├── create.ts | ||
| ├── default | ||
| │ ├── chat.ts | ||
| │ ├── common.ts | ||
| │ ├── error.ts | ||
| │ ├── index.ts | ||
| │ ├── market.ts | ||
| │ ├── migration.ts | ||
| │ ├── plugin.ts | ||
| │ ├── setting.ts | ||
| │ ├── tool.ts | ||
| │ └── welcome.ts | ||
| └── resources.ts | ||
| ``` | ||
|
|
||
| The file structure generated by lobe-i18n is as follows: | ||
|
|
||
| ``` | ||
| locales | ||
| ├── ar | ||
| │ ├── chat.json | ||
| │ ├── common.json | ||
| │ ├── error.json | ||
| │ └── ... (other translation files) | ||
| ├── de-DE | ||
| │ ├── chat.json | ||
| │ ├── common.json | ||
| │ ├── error.json | ||
| │ └── ... (other translation files) | ||
| ├── en-US | ||
| ├── ... (other language directories) | ||
| ├── zh-CN | ||
| └── zh-TW | ||
| ``` | ||
|
|
||
| ## Core Implementation Logic | ||
|
|
||
| The internationalization core implementation logic of LobeChat is as follows: | ||
|
|
||
| - Initialize and configure using the `i18next` library. | ||
| - Automatically detect the user's language preference using `i18next-browser-languagedetector`. | ||
| - Dynamically load translation resources using `i18next-resources-to-backend`. | ||
| - Set the direction of the HTML document (LTR or RTL) based on the user's language preference. | ||
|
|
||
| Here is a simplified pseudo code example to illustrate the core implementation logic of internationalization in LobeChat: | ||
|
|
||
| ```ts | ||
| import i18n from 'i18next'; | ||
| import LanguageDetector from 'i18next-browser-languagedetector'; | ||
| import resourcesToBackend from 'i18next-resources-to-backend'; | ||
| import { isRtlLang } from 'rtl-detect'; | ||
|
|
||
| // Create i18n instance and configure | ||
| const createI18nInstance = (lang) => { | ||
| const i18nInstance = i18n | ||
| .use(LanguageDetector) // Use language detection | ||
| .use( | ||
| resourcesToBackend((language, namespace) => { | ||
| // Dynamically load translation resources for the corresponding language | ||
| return import(`path/to/locales/${language}/${namespace}.json`); | ||
| }), | ||
| ); | ||
|
|
||
| // Listen for language change events and dynamically set document direction | ||
| i18nInstance.on('languageChanged', (language) => { | ||
| const direction = isRtlLang(language) ? 'rtl' : 'ltr'; | ||
| document.documentElement.dir = direction; // Set HTML document direction | ||
| }); | ||
|
|
||
| // Initialize i18n instance | ||
| i18nInstance.init({ | ||
| // Relevant configurations | ||
| }); | ||
|
|
||
| return i18nInstance; | ||
| }; | ||
| ``` | ||
|
|
||
| In this example, we demonstrate how to use `i18next` and related plugins to initialize internationalization settings. We dynamically import translation resources and respond to language change events to adjust the text direction of the page. This process provides LobeChat with flexible multilingual support capabilities. | ||
|
|
||
| ## Adding Support for New Languages | ||
|
|
||
| We have already supported a variety of languages globally through the following efforts: | ||
|
|
||
| - [✨ feat: adding Arabic Language Support #1049](https://github.com/lobehub/lobe-chat/pull/1049) | ||
| - [🌐 style: Add Vietnamese files and add the vi-VN option in the General Settings #860](https://github.com/lobehub/lobe-chat/pull/860) | ||
| - [🌐 style: support it-IT nl-NL and pl-PL locales #759](https://github.com/lobehub/lobe-chat/pull/759) | ||
| - [🌐 feat(locale): Add fr-FR (#637) #645](https://github.com/lobehub/lobe-chat/pull/645) | ||
| - [🌐 Add russian localy #137](https://github.com/lobehub/lobe-chat/pull/137) | ||
|
|
||
| To add support for new languages, please refer to the detailed steps in the [New Locale Addition Guide](Add-New-Locale.en-US). | ||
|
|
||
| ## Resources and Further Reading | ||
|
|
||
| - [i18next Official Documentation](https://www.i18next.com/) | ||
| - [lobe-i18n Tool Description](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n) | ||
|
|
||
| By following this guide, you can better understand and participate in the internationalization work of LobeChat, providing a seamless multilingual experience for global users. |
10 changes: 9 additions & 1 deletion
10
docs/Development/Internationalization-Implementation.zh-CN.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.