From 306d66b0a08d4909565bccf4e2cbc22e653e66b9 Mon Sep 17 00:00:00 2001 From: "Li, Amazing Ang" Date: Tue, 2 May 2023 23:14:12 +0800 Subject: [PATCH] add english doc support --- apps/doc/README.md | 53 +-------------- .../expansion/docusaurus-plugins/props.mdx | 22 ------ .../docusaurus-plugins/guide.mdx | 49 ++++--------- .../extension/docusaurus-plugins/props.mdx | 22 ++++++ .../docs/{expansion => extension}/index.mdx | 4 +- apps/doc/docs/get-started.mdx | 16 ++--- apps/doc/docs/introduction.mdx | 25 ++++--- apps/doc/docs/qa.mdx | 2 +- apps/doc/docs/solive-props.mdx | 68 +++++++++---------- .../docusaurus-plugins.mdx | 8 +-- .../{expansion => extension}/index.mdx | 0 .../current/get-started.mdx | 12 ++-- .../current/introduction.mdx | 24 +++---- 13 files changed, 114 insertions(+), 191 deletions(-) delete mode 100644 apps/doc/docs/expansion/docusaurus-plugins/props.mdx rename apps/doc/docs/{expansion => extension}/docusaurus-plugins/guide.mdx (61%) create mode 100644 apps/doc/docs/extension/docusaurus-plugins/props.mdx rename apps/doc/docs/{expansion => extension}/index.mdx (79%) rename apps/doc/i18n/zh/docusaurus-plugin-content-docs/current/{expansion => extension}/docusaurus-plugins.mdx (97%) rename apps/doc/i18n/zh/docusaurus-plugin-content-docs/current/{expansion => extension}/index.mdx (100%) diff --git a/apps/doc/README.md b/apps/doc/README.md index 8a928d6..6ddabae 100644 --- a/apps/doc/README.md +++ b/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. diff --git a/apps/doc/docs/expansion/docusaurus-plugins/props.mdx b/apps/doc/docs/expansion/docusaurus-plugins/props.mdx deleted file mode 100644 index 5d2c3bc..0000000 --- a/apps/doc/docs/expansion/docusaurus-plugins/props.mdx +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: 属性 -slug: /docusaurus-plugins/props -hide_title: true ---- - -## 属性 - -> 注意：考虑对参数匹配的准确性和文档UI适应性，部分Solive的属性默认值有所变动，并增加和变动一些新的属性 - -| 属性 | 类型 | 默认值 | 说明 | -| --- | --- | --- | --- | -| width | string | 90% | 容器宽度 | -| height | string | 500px | 容器高度 | -| simple | boolean | false | 是否极简模式 | -| consoleOpen | boolean | true | 是否显示控制台 | -| consoleTriggerControl | boolean | false | 是否显示控制台触发按钮 | -| consoleDefaultVisible | boolean | false | 控制台默认是否可见 | -| deployOpen | boolean | true | 是否显示部署 | -| deployDefaultVisible | boolean | false | 部署默认是否可见 | -| fileNavOpen | boolean | true | 是否显示文件导航栏 | -| fileNavDefaultVisible | boolean | false | 文件导航栏默认是否可见 | diff --git a/apps/doc/docs/expansion/docusaurus-plugins/guide.mdx b/apps/doc/docs/extension/docusaurus-plugins/guide.mdx similarity index 61% rename from apps/doc/docs/expansion/docusaurus-plugins/guide.mdx rename to apps/doc/docs/extension/docusaurus-plugins/guide.mdx index 170df80..e6223e4 100644 --- a/apps/doc/docs/expansion/docusaurus-plugins/guide.mdx +++ b/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!"; - } -``` diff --git a/apps/doc/docs/extension/docusaurus-plugins/props.mdx b/apps/doc/docs/extension/docusaurus-plugins/props.mdx new file mode 100644 index 0000000..8040072 --- /dev/null +++ b/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? | \ No newline at end of file diff --git a/apps/doc/docs/expansion/index.mdx b/apps/doc/docs/extension/index.mdx similarity index 79% rename from apps/doc/docs/expansion/index.mdx rename to apps/doc/docs/extension/index.mdx index 5c446a8..2ae7091 100644 --- a/apps/doc/docs/expansion/index.mdx +++ b/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'; diff --git a/apps/doc/docs/get-started.mdx b/apps/doc/docs/get-started.mdx index cdd4b1f..c7b4d00 100644 --- a/apps/doc/docs/get-started.mdx +++ b/apps/doc/docs/get-started.mdx @@ -1,5 +1,5 @@ --- -title: 开始 +title: Getting Started sidebar_position: 1 hide_title: true --- @@ -7,9 +7,9 @@ hide_title: true import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -## 开始 +# Getting Started -### 安装 +## Installation @@ -35,9 +35,9 @@ pnpm install solive-core -### 使用 +## Import SoLive to your website -#### 1. 配置webpack +### 1. Configure Webpack @@ -132,13 +132,13 @@ module.exports = nextConfig -#### 2. 引入样式 +### 2. Import Styles ```js import 'solive-core/dist/index.css'; ``` -#### 3. 使用 +### 3. Usage ```react ``` -即可看到效果： +Now you can see the SoLive Component on your page: ```solidity solive height="500px" consoleDefaultVisible="true" deployDefaultVisible="true" /** diff --git a/apps/doc/docs/introduction.mdx b/apps/doc/docs/introduction.mdx index 05e1522..b99cb22 100644 --- a/apps/doc/docs/introduction.mdx +++ b/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. \ No newline at end of file diff --git a/apps/doc/docs/qa.mdx b/apps/doc/docs/qa.mdx index b0cc48b..6d363f1 100644 --- a/apps/doc/docs/qa.mdx +++ b/apps/doc/docs/qa.mdx @@ -1,5 +1,5 @@ --- -title: 常见问题 +title: FAQ sidebar_position: 4 hide_title: true --- diff --git a/apps/doc/docs/solive-props.mdx b/apps/doc/docs/solive-props.mdx index 87477db..9c1af68 100644 --- a/apps/doc/docs/solive-props.mdx +++ b/apps/doc/docs/solive-props.mdx @@ -1,53 +1,53 @@ --- -title: 组件属性 +title: Component Properties sidebar_position: 2 hide_title: true --- -# 组件属性 +# Component Properties -## 属性表 +## Property Table -| 属性名 | 介绍 | 类型 | 默认值 | 是否必填 | -| ----- | ----- | ----- | ----- | ----- | -| id | 表单唯一标志 | string | - | ✅ | -| modelInfos | 文件信息 | array | [] | ✅ | -| height | 高度 | string | - | ✅ | -| rounded | 窗口弧度 | string | 12px | - | -| disableValidation | 是否禁用校验 | boolean | false | - | -| monacoEditorOptions | monaco编辑器配置 | (参考 [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html)) | - | - | -| fileNav | 顶部文件导航 | TFileNav | (参考 [TFileNav](/docs/solive-props#tfilenav)) | - | -| console | 日志块 | TConsole | (参考 [TConsole](/docs/solive-props#tconsole)) | - | -| deploy | 部署块 | TDeploy | (参考 [TDeploy](/docs/solive-props#tdeploy)) | - | +| Property Name | Description | Type | Default Value | Required | +| ------------- | ----------- | ---- | ------------- | -------- | +| id | Unique form identifier | string | - | ✅ | +| modelInfos | File information | array | [] | ✅ | +| height | Height | string | - | ✅ | +| rounded | Window corner radius | string | 12px | - | +| disableValidation | Whether to disable validation | boolean | false | - | +| monacoEditorOptions | Monaco editor configuration | (Refer to [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html)) | - | - | +| fileNav | Top file navigation | TFileNav | (Refer to [TFileNav](/docs/solive-props#tfilenav)) | - | +| console | Log block | TConsole | (Refer to [TConsole](/docs/solive-props#tconsole)) | - | +| deploy | Deployment block | TDeploy | (Refer to [TDeploy](/docs/solive-props#tdeploy)) | - | ## TFileNav -顶部文件导航属性表 +Top file navigation property table -| 属性名 | 介绍 | 类型 | 默认值 | 是否必填 | -| ----- | ----- | ----- | ----- | ----- | -| open | 是否开启功能 | boolean | true | - | +| Property Name | Description | Type | Default Value | Required | +| ------------- | ----------- | ---- | ------------- | -------- | +| open | Whether to enable the feature | boolean | true | - | ## TConsole -日志块属性表 +Log block property table -| 属性名 | 介绍 | 类型 | 默认值 | 是否必填 | -| ----- | ----- | ----- | ----- | ----- | -| defaultVisible | 默认是否显示 | boolean | true | - | -| defaultHeight | 默认高度 | string | "30%" | - | -| minHeight | 最小高度 | number | 78 | - | -| triggerControl | 是否开启控制 | boolean | true | - | -| open | 是否开启功能 | boolean | true | - | +| Property Name | Description | Type | Default Value | Required | +| ------------- | ----------- | ---- | ------------- | -------- | +| defaultVisible | Default visibility | boolean | true | - | +| defaultHeight | Default height | string | "30%" | - | +| minHeight | Minimum height | number | 78 | - | +| triggerControl | Whether to enable control | boolean | true | - | +| open | Whether to enable the feature | boolean | true | - | ## TDeploy -部署块属性表 +Deployment block property table -| 属性名 | 介绍 | 类型 | 默认值 | 是否必填 | -| ----- | ----- | ----- | ----- | ----- | -| defaultVisible | 默认是否显示 | boolean | true | - | -| defaultWidth | 默认宽度 | string | "200px" | - | -| minWidth | 最小宽度 | number | 140 | - | -| maxWidth | 最大宽度 | number | 240 | - | -| open | 是否开启功能 | boolean | true | - | +| Property Name | Description | Type | Default Value | Required | +| ------------- | ----------- | ---- | ------------- | -------- | +| defaultVisible | Default visibility | boolean | true | - | +| defaultWidth | Default width | string | "200px" | - | +| minWidth | Minimum width | number | 140 | - | +| maxWidth | Maximum width | number | 240 | - | +| open | Whether to enable the feature | boolean | true | - | \ No newline at end of file diff --git a/apps/doc/i18n/zh/docusaurus-plugin-content-docs/current/expansion/docusaurus-plugins.mdx b/apps/doc/i18n/zh/docusaurus-plugin-content-docs/current/extension/docusaurus-plugins.mdx similarity index 97% rename from apps/doc/i18n/zh/docusaurus-plugin-content-docs/current/expansion/docusaurus-plugins.mdx rename to apps/doc/i18n/zh/docusaurus-plugin-content-docs/current/extension/docusaurus-plugins.mdx index 402a6a5..8848173 100644 --- a/apps/doc/i18n/zh/docusaurus-plugin-content-docs/current/expansion/docusaurus-plugins.mdx +++ b/apps/doc/i18n/zh/docusaurus-plugin-content-docs/current/extension/docusaurus-plugins.mdx @@ -3,11 +3,11 @@ title: Docusaurus 插件 hide_title: true --- -## Docusaurus 插件 +# Docusaurus 插件 > 你可以使用 `solive-docusaurus-theme-code` 插件快速集成一个轻量级Solidity Editor嵌入你的文档. -### 安装 +## 安装 1. 首先我们需要安装 `solive-docusaurus-theme-code` 插件： ```bash npm2yarn @@ -24,7 +24,7 @@ module.exports = { }; ``` -### 快速使用 +## 快速使用 1. 你需要注意在代码块标记solive，和配置solive的属性： ```md @@ -97,7 +97,7 @@ contract Storage { ```\ ```` -### 展示结果： +## 展示结果： ```solidity solive height=300px /** diff --git a/apps/doc/i18n/zh/docusaurus-plugin-content-docs/current/expansion/index.mdx b/apps/doc/i18n/zh/docusaurus-plugin-content-docs/current/extension/index.mdx similarity index 100% rename from apps/doc/i18n/zh/docusaurus-plugin-content-docs/current/expansion/index.mdx rename to apps/doc/i18n/zh/docusaurus-plugin-content-docs/current/extension/index.mdx diff --git a/apps/doc/i18n/zh/docusaurus-plugin-content-docs/current/get-started.mdx b/apps/doc/i18n/zh/docusaurus-plugin-content-docs/current/get-started.mdx index a47d28e..dd5e41e 100644 --- a/apps/doc/i18n/zh/docusaurus-plugin-content-docs/current/get-started.mdx +++ b/apps/doc/i18n/zh/docusaurus-plugin-content-docs/current/get-started.mdx @@ -7,9 +7,9 @@ hide_title: true import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -## 开始 +# 开始 -### 安装 +## 安装 @@ -35,9 +35,9 @@ pnpm install solive -### 使用 +## 使用 -#### 1. 配置webpack +### 1. 配置webpack @@ -132,13 +132,13 @@ module.exports = nextConfig -#### 2. 引入样式 +### 2. 引入样式 ```js import 'solive-core/dist/index.css'; ``` -#### 3. 使用 +### 3. 使用 ```react