Skip to content

Commit

Permalink
📝 docs: Add text-to-image feat (lobehub#1089)
Browse files Browse the repository at this point in the history
* 📝 docs: Add text-to-image feat

* 🔧 chore: Fix readmeWorkflow

* 📝 docs: Update readme

* 📝 docs: Update readme

* 🔧 chore: Replace ts-node, bun with tsx

* 📝 docs: Sync latest plugin list

* 📝 docs: Fix emoji

* 📝 docs: Update docs
  • Loading branch information
canisminor1990 authored Jan 18, 2024
1 parent f665a93 commit 7253fd5
Show file tree
Hide file tree
Showing 19 changed files with 627 additions and 81 deletions.
66 changes: 44 additions & 22 deletions README.md

Large diffs are not rendered by default.

76 changes: 50 additions & 26 deletions README.zh-CN.md

Large diffs are not rendered by default.

10 changes: 8 additions & 2 deletions docs/Deployment/Upstream-Sync.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
# Upstream Sync

# A. Vercel / Zeabur Deployment
## TOC

- [`A` Vercel / Zeabur Deployment](#a-vercel--zeabur-deployment)
- [Enabling Automatic Updates](#enabling-automatic-updates)
- [`B` Docker Deployment](#b-docker-deployment)

## `A` Vercel / Zeabur Deployment

If you have deployed your own project following the one-click deployment steps in the README, you might encounter constant prompts indicating "updates available". This is because Vercel defaults to creating a new project instead of forking this one, resulting in an inability to accurately detect updates. We suggest you redeploy using the following steps:

Expand All @@ -19,7 +25,7 @@ Once you have forked the project, due to Github restrictions, you will need to m
![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/266985117-4d48fe7b-0412-4667-8129-b25ebcf2c9de.png)
![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/266985177-7677b4ce-c348-4145-9f60-829d448d5be6.png)

# B. Docker Deployment
## `B` Docker Deployment

Upgrading the Docker deployment version is very simple, just redeploy the latest image of LobeChat. Here are the instructions to perform these steps:

Expand Down
12 changes: 9 additions & 3 deletions docs/Deployment/Upstream-Sync.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
# 自部署保持更新

# `A` Vercel / Zeabur 部署
## TOC

- [`A` Vercel\`\` / Zeabur 部署](#a-vercel--zeabur-部署)
- [启动自动更新](#启动自动更新)
- [`B` Docker 部署](#b-docker-部署)

## `A` Vercel\`\` / Zeabur 部署

如果你根据 README 中的一键部署步骤部署了自己的项目,你可能会发现总是被提示 “有可用更新”。这是因为 Vercel 默认为你创建新项目而非 fork 本项目,这将导致无法准确检测更新。我们建议按照以下步骤重新部署:

- 删除原有的仓库;
- 使用页面右上角的 <kbd>Fork</kbd> 按钮,Fork 本项目;
-`Vercel` 上重新选择并部署。

## 启动自动更新
### 启动自动更新

> \[!NOTE]
>
Expand All @@ -19,7 +25,7 @@
![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/266985117-4d48fe7b-0412-4667-8129-b25ebcf2c9de.png)
![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/266985177-7677b4ce-c348-4145-9f60-829d448d5be6.png)

# `B` Docker 部署
## `B` Docker 部署

Docker 部署版本的升级非常简单,只需要重新部署 LobeChat 的最新镜像即可。 以下是执行这些步骤所需的指令:

Expand Down
10 changes: 9 additions & 1 deletion docs/Development/Add-New-Locale.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
# LobeChat New Locale Guide
# New Locale Guide

LobeChat uses [lobe-i18n](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n) as the i18n solution, which allows for quick addition of new language support in the application.

## TOC

- [Adding New Language Support](#adding-new-language-support)
- [Step 1: Update the Internationalization Configuration File](#step-1-update-the-internationalization-configuration-file)
- [Step 2: Automatically Translate Language Files](#step-2-automatically-translate-language-files)
- [Step 3: Submit and Review Your Changes](#step-3-submit-and-review-your-changes)
- [Additional Information](#additional-information)

## Adding New Language Support

To add new language internationalization support in LobeChat (for example, adding Vietnamese `vi-VN`), please follow the steps below:
Expand Down
10 changes: 9 additions & 1 deletion docs/Development/Add-New-Locale.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
# LobeChat 新语种添加指南
# 新语种添加指南

LobeChat 使用 [lobe-i18n](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n) 作为 i18n 解决方案,可以在应用中快速添加新的语言支持。

## TOC

- [添加新的语言支持](#添加新的语言支持)
- [步骤 1: 更新国际化配置文件](#步骤-1-更新国际化配置文件)
- [步骤 2: 自动翻译语言文件](#步骤-2-自动翻译语言文件)
- [步骤 3: 提交和审查你的更改](#步骤-3-提交和审查你的更改)
- [附加信息](#附加信息)

## 添加新的语言支持

为了在 LobeChat 中添加新的语言国际化支持,(例如添加越南语 `vi-VN`),请按照以下步骤操作:
Expand Down
83 changes: 83 additions & 0 deletions docs/Development/Contributing-Guidelines.md
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!
13 changes: 13 additions & 0 deletions docs/Development/Contributing-Guidelines.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,19 @@

欢迎来到 LobeChat 的代码风格与贡献指南。本指南将帮助您理解我们的代码规范和贡献流程,确保代码的一致性和项目的顺利进行。

## TOC

- [代码风格](#代码风格)
- [ESLint](#eslint)
- [Prettier](#prettier)
- [remarklint](#remarklint)
- [stylelint](#stylelint)
- [贡献流程](#贡献流程)
- [Gitmoji](#gitmoji)
- [Semantic Release](#semantic-release)
- [Commitlint](#commitlint)
- [如何贡献](#如何贡献)

## 代码风格

在 LobeChat 中,我们使用 `@lobehub/lint` 程序包来统一代码风格。该程序包内置了 `ESLint``Prettier``remarklint``stylelint` 的配置,以确保我们的 JavaScript、Markdown 和 CSS 文件遵循相同的编码标准。
Expand Down
125 changes: 125 additions & 0 deletions docs/Development/Internationalization-Implementation.md
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 docs/Development/Internationalization-Implementation.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
# LobeChat 国际化实现指南
# 国际化实现指南

欢迎阅读 LobeChat 国际化实现指南。本文档将指导你了解 LobeChat 的国际化机制,包括文件结构、如何添加新语种。LobeChat 采用 `i18next``lobe-i18n` 作为国际化解决方案,旨在为用户提供流畅的多语言支持。

## TOC

- [国际化概述](#国际化概述)
- [文件结构](#文件结构)
- [核心实现逻辑](#核心实现逻辑)
- [添加新的语言支持](#添加新的语言支持)
- [资源和进一步阅读](#资源和进一步阅读)

## 国际化概述

国际化(Internationalization,简称为 i18n)是一个让应用能够适应不同语言和地区的过程。在 LobeChat 中,我们支持多种语言,并通过 `i18next` 库来实现语言的动态切换和内容的本地化。我们的目标是让 LobeChat 能够为全球用户提供本地化的体验。
Expand Down
Loading

0 comments on commit 7253fd5

Please sign in to comment.