feat(docs): improve the install step (Project-DARC#12)

xzxass · May 13, 2023 · 52750ea · 52750ea
1 parent d3826ea
commit 52750ea
Show file tree

Hide file tree

Showing 6 changed files with 5,566 additions and 475 deletions.
diff --git a/README.md b/README.md
diff --git a/README_cn.md b/README_cn.md
diff --git a/darc-docs/docs/darc.js/Getting Started.md b/darc-docs/docs/darc.js/Getting Started.md
@@ -2,59 +2,53 @@
 sidebar_position: 1
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # Getting Started
 
 ## What is darc.js?
 
-**darc.js** is a TypeScript/JavaScript library for interacting with the DARC virtual machine for node.js and the browser environment.
+**darc.js** is a TypeScript/JavaScript library for interacting with the DARC virtual machine for node.js and the browser
+environment.
 
 ## Installation
 
-If you are using npm:
-
-```bash
-npm install darcjs
-```
-
-If you are using yarn:
+You need to install **ethers.js** with version 5.7.2 or 5.x.x toghether with **darc.js**.
 
-```bash
-yarn add darcjs
-```
-
-If you are using pnpm:
+<Tabs>
+  <TabItem value="npm" label="NPM" default>
 
-```bash
-pnpm add darcjs
+```shell
+npm install darcjs [email protected]
 ```
 
-Also you need to install **ethers.js** with version 5.7.2 or 5.x.x:
+  </TabItem>
+  <TabItem value="yarn" label="YARN">
 
-```bash
-npm install [email protected]
+```shell
+yarn add darcjs [email protected]
 ```
 
-or with yarn:
+  </TabItem>
+  <TabItem value="pnpm" label="PNPM">
 
-```bash
-yarn add [email protected]
+```shell
+pnpm install darcjs [email protected]
 ```
 
-or with pnpm:
-
-```bash
-pnpm add [email protected]
-```
+  </TabItem>
+</Tabs>
 
 ## Usage
 
-To use darc.js in your TypeScript project, import it as follows:
+To use darc.js supports ESM, import it as follows:
 
 ```ts
-import { darcjs } from 'darcjs';
+import {darcjs} from 'darcjs';
 ```
 
-Or if you are using JavaScript:
+Or if you are using CommonJS:
 
 ```js
 const darcjs = require('darcjs');

diff --git a/darc-docs/src/pages/index.js b/darc-docs/src/pages/index.js
@@ -1,7 +1,20 @@
 import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
-import {Box, Button, Card, Container, CssVarsProvider, Grid, Input, Sheet, Stack, styled, Typography} from "@mui/joy";
+import {
+    Badge,
+    Box,
+    Button,
+    Card,
+    Container,
+    CssVarsProvider,
+    Grid,
+    Input,
+    Sheet,
+    Stack,
+    styled,
+    Typography
+} from "@mui/joy";
 import {
     AiOutlineSafety,
     FaFileContract,
@@ -66,15 +79,20 @@ function HomepageHeader() {
 
 
                     <Stack direction={{xs: 'column', sm: 'row'}} spacing={2}>
-                        <Button size={'lg'} endDecorator={<FiChevronRight/>}
-                                component={PlainLink} to={'/docs/Overview/'}
-                                sx={{
-                                    '&:hover': {
-                                        color: 'var(--joy-palette-common-white, #FFF)',
-                                    },
-                                    maxWidth: '300px'
-                                }}
-                        >Get started</Button>
+                        <Badge badgeContent={'Early test'} color={'warning'} anchorOrigin={{
+                            vertical: 'top',
+                            horizontal: 'right',
+                        }}>
+                            <Button size={'lg'} endDecorator={<FiChevronRight/>}
+                                    component={PlainLink} to={'https://app.darc.app/'}
+                                    sx={{
+                                        '&:hover': {
+                                            color: 'var(--joy-palette-common-white, #FFF)',
+                                        },
+                                        maxWidth: '300px'
+                                    }}
+                            >Launch dApp</Button>
+                        </Badge>
                         <Box sx={{
                             cursor: 'pointer',
                         }}>

diff --git a/darc-protocol/package.json b/darc-protocol/package.json
@@ -6,6 +6,12 @@
   "dependencies": {
     "@openzeppelin/contracts": "^4.8.0"
   },
+  "scripts": {
+    "test": "hardhat test",
+    "compile": "hardhat compile",
+    "start": "hardhat node",
+    "deploy": "hardhat run scripts/deployDARC.ts"
+  },
   "devDependencies": {
     "@nomicfoundation/hardhat-toolbox": "^2.0.0",
     "@nomiclabs/hardhat-ethers": "^2.2.2",