add english doc support

apps/doc/README.md

@@ -1,55 +1,4 @@
-# WTF Starknet
-Todo list of WTF Starknet during Starknet Building Hacker House Tel Aviv, 31st Jan-7th Feb, 2023.
-
-## Background
-1. WTF Academy is a web3 open-source university for developers.
-  - WTF Solidity (5,700 ⭐): https://github.com/AmazingAng/WTF-Solidity
-  - WTF Ethers (1,100 ⭐): https://github.com/WTFAcademy/WTF-Ethers
-  - Integrated Education Platform (3,300 users): https://wtf.academy
-
-2. WTF Starknet is a platform to onboard developers to Starknet, which includes tutorial, examples, and on-chain certificates.
-
-## Todo and Progress
-
-### 1. Tutorials
-Minimal tutorials on Starknet, assuming the learners have Ethereum development experience.
-- Account Abstraction: @ocandocrypto
-- Cairo: @hasselalcala [Draft] [Quiz]
-- Tooling: @hasselalcala [Draft]
-- Starknet.js @AmazingAng [Draft]
-- Build a minimal Dapp
-
-### 2. Frontend
-
-Build a website for WTF StarkWare based on Docusaurus.
-  - dashboard page
-  - tutorial page
-  - quiz page
-  - certificate page
-
-### 3. Backend
-  - quiz backend @stoneworld @reborn-sama(huashui)
-  - certificate backend
-
-### 4. Contract 
-Build a SBT contract for certificates on starknet.
-  - certificate contract
-
-### 5. Design
-  - web design ([Figma](https://www.figma.com/file/dZiNEsfG5Nkc1uQFy3agEk)): [@tankxu](https://github.com/tankxu)
-  - logo design
-
-### 6. Project Management
-  - github todo list [x]
-
-## How to contribute
-
-We will manage the project on Github (yes, this repo), so you can see all the tasks and contributors here.
-
-1. Read [Project Brief](https://onlydust.notion.site/WTF-Academy-Starknet-cec45bfe02694dbc895eb42e8f3f1c31)
-2. Contact project lead 0xAA's Telegram (@not0xAA) or [Twitter](https://twitter.com/0xAA_Science), briefly introduce yourself and which part you want to contribute to.
-3. You can create a PR update your github ID after corresponding tasks, or I will do it for you.
-
+# SoLive Doc
 ## Website
 
 This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.

apps/doc/docs/expansion/docusaurus-plugins/guide.mdx → apps/doc/docs/extension/docusaurus-plugins/guide.mdx

@@ -1,27 +1,26 @@
 ---
-title: 引导
+title: Guide
 hide_title: true
 slug: /docusaurus-plugins
 ---
 
+# SoLive Doc: a Docusaurus Extension for SoLive
 
-## Docusaurus 插件
+> You can quickly integrate a lightweight Solidity Editor into your documentation using the `solive-docusaurus-theme-code` plugin. (Currently being improved)
 
-> 你可以使用 `solive-docusaurus-theme-code` 插件快速集成一个轻量级Solidity Editor嵌入你的文档. （完善中）
+## Installation
 
-### 安装
-
-1. 首先我们需要安装 `solive-docusaurus-theme-code` 插件：
+1. First, we need to install the `solive-docusaurus-theme-code` plugin:
 ```bash npm2yarn
 npm install --save solive-docusaurus-theme-code
 ```
 
-2. 安装一些配置需要的依赖项(暂未找到较好的方案内置)：
+2. Install some required dependencies for configuration (currently no better solution is available):
 ```bash npm2yarn
 npm install -D stream-http https-browserify stream-browserify crypto-browserify stream-browserify path-browserify events os-browserify buffer url assert tty-browserify util browserify-zlib
 ```
 
-2. 其次你需要在你的 `docusaurus.config.js` 中配置 `solive` 插件.
+3. Next, you need to configure the `solive` plugin in your `docusaurus.config.js`.
 
 ```js {3}
 module.exports = {
@@ -31,23 +30,23 @@ module.exports = {
 };
 ```
 
-### 快速使用
+## Quick Start
 
-1. 你需要注意在代码块标记solive，和配置solive的属性：
+1. To import SoLive in your document, you need to mark the Solidity code block with `solive` and its attributes:
 ````md
   ```solidity solive height=500px
     // your code
   ```
 ````
 
-2. 你可以在代码块中配置solive相关属性 `height`（具体参考[属性表](/docs/docusaurus-plugins/props)）：
+2. You can configure solive attributes like `height` in the code block (refer to the [Properties Table](/docs/docusaurus-plugins/props)):
 ````md
   ```solidity solive height=300px
     // your code
   ```
 ````
 
-3. 配置代码块文件名（可多文件）：
+3. Configure the file name in the code block (supports multiple files), please note that duplicated file name in one page will result in error:
 ````md
   ```solidity solive height=500px
     /**
@@ -64,7 +63,7 @@ module.exports = {
   ```
 ````
 
-3. 完整的代码块示例：
+4. A complete SoLive code block example:
 ````md
 ```solidity solive height=500px
 /**
@@ -104,7 +103,7 @@ contract Storage {
 ```
 ````
 
-5. 你将看到：
+5. You will see:
 
 ```solidity solive height=500px
   /**
@@ -142,25 +141,3 @@ contract Storage {
   }
 ```
 
-### 极简模式
-
-在部分场景下可能只需要展示代码块，而不需要编辑器，你可以使用极简模式（这将关闭语法校验，部署，编译，文件导航功能）：
-
-````md
-  ```solidity solive simple=true height=160px
-    // SPDX-License-Identifier: MIT
-    pragma solidity ^0.8.4;
-    contract HelloWeb3{
-        string public _string = "Hello Web3!";
-    }
-  ```
-````
-
-```solidity solive simple=true height=160px
-
-   // SPDX-License-Identifier: MIT
-   pragma solidity ^0.8.4;
-   contract HelloWeb3{
-       string public _string = "Hello Web3!";
-   }
-```

apps/doc/docs/extension/docusaurus-plugins/props.mdx

@@ -0,0 +1,22 @@
+---
+title: Properties
+slug: /docusaurus-plugins/props
+hide_title: true
+---
+
+# Properties
+
+> Note: properties may change the default values and new properties will be added in the future.
+
+| Property | Type | Default Value | Description |
+| --- | --- | --- | --- |
+| width | string | 90% | Container width |
+| height | string | 500px | Container height |
+| simple | boolean | false | Is it minimal mode? |
+| consoleOpen | boolean | true | Display console? |
+| consoleTriggerControl | boolean | false | Show console trigger button? |
+| consoleDefaultVisible | boolean | false | Is console visible by default? |
+| deployOpen | boolean | true | Display deploy module? |
+| deployDefaultVisible | boolean | false | Is deploy module visible by default? |
+| fileNavOpen | boolean | true | Display file navigation bar? |
+| fileNavDefaultVisible | boolean | false | Is file navigation bar visible by default? |

apps/doc/docs/expansion/index.mdx → apps/doc/docs/extension/index.mdx

@@ -1,10 +1,10 @@
 ---
-title: 扩展
+title: Extension
 sidebar_position: 3
 hide_title: true
 ---
 
-## 扩展
+# Extension
 
 import DocCardList from '@theme/DocCardList';
 

apps/doc/docs/get-started.mdx

@@ -1,15 +1,15 @@
 ---
-title: 开始
+title: Getting Started
 sidebar_position: 1
 hide_title: true
 ---
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-## 开始
+# Getting Started
 
-### 安装
+## Installation
 
 <Tabs>
 <TabItem value="npm" label="Npm">
@@ -35,9 +35,9 @@ pnpm install solive-core
 </TabItem>
 </Tabs>
 
-### 使用
+## Import SoLive to your website
 
-#### 1. 配置webpack
+### 1. Configure Webpack
 
 <Tabs>
 <TabItem value="react" label="React">
@@ -132,13 +132,13 @@ module.exports = nextConfig
 </TabItem>
 </Tabs>
 
-#### 2. 引入样式
+### 2. Import Styles
 
 ```js
 import 'solive-core/dist/index.css';
 ```
 
-#### 3. 使用
+### 3. Usage
 
 ```react
 <Editor
@@ -153,7 +153,7 @@ import 'solive-core/dist/index.css';
 />
 ```
 
-即可看到效果：
+Now you can see the SoLive Component on your page:
 
 ```solidity solive height="500px" consoleDefaultVisible="true" deployDefaultVisible="true"
 /**

apps/doc/docs/introduction.mdx

@@ -1,21 +1,20 @@
 ---
-title: 介绍
+title: Introduction
 sidebar_position: 0
 slug: /introduction
 hide_title: true
 ---
 
-## 介绍
-Solive是一个灵活的在线Solidity智能合约的试验场，受到了remix-IDE和react-live的启发。 Solive可让您在一个React组件中编辑、编译、部署和交互Solidity智能合约。 您可以将solive嵌入您的网站或教程，并让用户在浏览器中运行Solidity代码。 Solive也兼容移动浏览器。
+# Introduction
+SoLive is a lightweight and fleaxible online Solidity playground, inspired by remix-IDE and react-live. SoLive enables you to edit, compile, deploy, and interact with Solidity smart contracts within a React component. You can integrate SoLive into your website or tutorial, allowing users to execute Solidity code directly in their browsers. Moreover, SoLive is compatible with mobile browsers.
 
-### 使用场景：
-1. 教育：我们将在WTF Solidity教程中使用solive替换代码块，让学生能够阅读和运行代码。
-2. 开发人员入门：Layer2项目可以使用Solive来招募以太坊开发人员。
+## Use cases:
+1. Education: In the [WTF Solidity](https://github.com/AmazingAng/WTF-Solidity) tutorials, we will utilize SoLive to replace conventional code blocks, enabling students to read and run the code concurrently.
+2. Developer Onboarding: Layer2 projects can leverage SoLive to attract and recruit Ethereum developers.
 
-### 这是如何做的
-1. 参考remix-ide：一个在线IDE，用于开发智能合约
-2. 参考react-live：一个灵活的React代码实时编辑器。我们建立solive的原因是希望学生在阅读WTF Solidity教程的同时能运行示例代码。Solive的设计很轻便，只包含必要的模块以便编辑、编译、部署和与智能合约进行交互。
-3. 编辑模块：我们使用代码编辑器Monaco Editor。
-4. 编译模块：我们使用`solcjs`根据选定的Solidity版本进行编译智能合约。
-5. 部署：我们使用`ethersjs V5`和`ethereumjs vm`两者结合，将编译后的合约部署到本地EVM上。
-6. 交互：我们使用`ethersjs V5`和一个自定义的ABI-UI转换器来与部署的合约进行交互。
+## How it works
+SoLive is lightweight and flexible by design. It includes only the essential modules needed for editing, compiling, deploying, and interacting with smart contracts.
+1. Edit Module: We employ the Monaco Editor as the code editor.
+2. Compile Module: We utilize `solcjs` to compile smart contracts based on the chosen Solidity version.
+3. Deploy Module: We deploy the compiled contracts to the local EVM using a combination of `ethersjs V5` and `ethereumjs vm`.
+4. Interact Module: To interact with the deployed contracts, we use `ethersjs V5` and a custom ABI-UI converter.

apps/doc/docs/qa.mdx

@@ -1,5 +1,5 @@
 ---
-title: 常见问题
+title: FAQ
 sidebar_position: 4
 hide_title: true
 ---