feat: file listing

AElfProject · Aug 28, 2024 · 32f9edb · 32f9edb
1 parent 5080c15
commit 32f9edb
Show file tree

Hide file tree

Showing 10 changed files with 453 additions and 8 deletions.
diff --git a/docs/quick-start/developers/dao-dapp/_tree.json b/docs/quick-start/developers/dao-dapp/_tree.json
@@ -0,0 +1,63 @@
+{
+  "type": "directory",
+  "uri": "2-dapp",
+  "expanded": true,
+  "children": [
+    {
+      "type": "directory",
+      "uri": "app"
+    },
+    {
+      "type": "directory",
+      "uri": "assets"
+    },
+    {
+      "type": "directory",
+      "uri": "public"
+    },
+    {
+      "type": "directory",
+      "uri": "src"
+    },
+    {
+      "type": "file",
+      "uri": ".gitignore"
+    },
+    {
+      "type": "file",
+      "uri": "components.json"
+    },
+    {
+      "type": "file",
+      "uri": "index.html"
+    },
+    {
+      "type": "file",
+      "uri": "package.json"
+    },
+    {
+      "type": "file",
+      "uri": "postcss.config.js"
+    },
+    {
+      "type": "file",
+      "uri": "README.md"
+    },
+    {
+      "type": "file",
+      "uri": "tailwind.config.js"
+    },
+    {
+      "type": "file",
+      "uri": "tsconfig.json"
+    },
+    {
+      "type": "file",
+      "uri": "tsconfig.node.json"
+    },
+    {
+      "type": "file",
+      "uri": "vite.config.ts"
+    }
+  ]
+}
diff --git a/docs/quick-start/developers/dao-dapp/index.md b/docs/quick-start/developers/dao-dapp/index.md
@@ -687,8 +687,71 @@ cd aelf-samples/vote/2-dapp
 
 - Once you're in the `2-dapp` directory, open the project with your preferred IDE (e.g., VSCode). You should see the project structure as shown below.
 
-  ![result](/img/nft-fe-directory.jpg)
+export const tree = {
+  "type": "directory",
+  "uri": "2-dapp",
+  "expanded": true,
+  "children": [
+    {
+      "type": "directory",
+      "uri": "app"
+    },
+    {
+      "type": "directory",
+      "uri": "assets"
+    },
+    {
+      "type": "directory",
+      "uri": "public"
+    },
+    {
+      "type": "directory",
+      "uri": "src"
+    },
+    {
+      "type": "file",
+      "uri": ".gitignore"
+    },
+    {
+      "type": "file",
+      "uri": "components.json"
+    },
+    {
+      "type": "file",
+      "uri": "index.html"
+    },
+    {
+      "type": "file",
+      "uri": "package.json"
+    },
+    {
+      "type": "file",
+      "uri": "postcss.config.js"
+    },
+    {
+      "type": "file",
+      "uri": "README.md"
+    },
+    {
+      "type": "file",
+      "uri": "tailwind.config.js"
+    },
+    {
+      "type": "file",
+      "uri": "tsconfig.json"
+    },
+    {
+      "type": "file",
+      "uri": "tsconfig.node.json"
+    },
+    {
+      "type": "file",
+      "uri": "vite.config.ts"
+    }
+  ]
+}
 
+<div style={{height: 500}}><FileTree tree={tree} /></div>
 
 #### Install necessary libraries
 

diff --git a/docs/quick-start/developers/nft-dapp/index.md b/docs/quick-start/developers/nft-dapp/index.md
@@ -61,7 +61,71 @@ cd aelf-samples/nft/2-dapp
 ```
 - Once you're in the `2-dapp` directory, open the project with your preferred IDE (e.g., VSCode). You should see the project structure as shown below.
 
-  ![result](/img/nft-fe-directory.jpg)
+export const tree = {
+  "type": "directory",
+  "uri": "2-dapp",
+  "expanded": true,
+  "children": [
+    {
+      "type": "directory",
+      "uri": "app"
+    },
+    {
+      "type": "directory",
+      "uri": "assets"
+    },
+    {
+      "type": "directory",
+      "uri": "public"
+    },
+    {
+      "type": "directory",
+      "uri": "src"
+    },
+    {
+      "type": "file",
+      "uri": ".gitignore"
+    },
+    {
+      "type": "file",
+      "uri": "components.json"
+    },
+    {
+      "type": "file",
+      "uri": "index.html"
+    },
+    {
+      "type": "file",
+      "uri": "package.json"
+    },
+    {
+      "type": "file",
+      "uri": "postcss.config.js"
+    },
+    {
+      "type": "file",
+      "uri": "README.md"
+    },
+    {
+      "type": "file",
+      "uri": "tailwind.config.js"
+    },
+    {
+      "type": "file",
+      "uri": "tsconfig.json"
+    },
+    {
+      "type": "file",
+      "uri": "tsconfig.node.json"
+    },
+    {
+      "type": "file",
+      "uri": "vite.config.ts"
+    }
+  ]
+}
+
+<div style={{height: 500}}><FileTree tree={tree} /></div>
 
 #### Install necessary packages and libraries
 

diff --git a/docs/quick-start/developers/nft-tutorial/index.md b/docs/quick-start/developers/nft-tutorial/index.md
@@ -53,7 +53,7 @@ cd nft_aelf
 - Clone the NFT tutorial github project using the following command inside the `nft_aelf` directory:
 
 ```bash title="Terminal"
-git clone https://github.com/AElfProject/nft-tutorial.git
+git clone https://github.com/AElfProject/nft-tutorial.git nft-tutorial
 ```
 
 - Next, navigate to the frontend project directory, `nft-tutorial` with the following command:
@@ -64,7 +64,71 @@ cd nft-tutorial
 
 - Once you're inside the `nft-tutorial` directory, open the project with your preferred IDE (e.g., VSCode). You should see the project structure as shown below.
 
-  ![result](/img/nft-fe-directory.png)
+export const tree = {
+  "type": "directory",
+  "uri": "nft-tutorial",
+  "expanded": true,
+  "children": [
+    {
+      "type": "directory",
+      "uri": "app"
+    },
+    {
+      "type": "directory",
+      "uri": "assets"
+    },
+    {
+      "type": "directory",
+      "uri": "public"
+    },
+    {
+      "type": "directory",
+      "uri": "src"
+    },
+    {
+      "type": "file",
+      "uri": ".gitignore"
+    },
+    {
+      "type": "file",
+      "uri": "components.json"
+    },
+    {
+      "type": "file",
+      "uri": "index.html"
+    },
+    {
+      "type": "file",
+      "uri": "package.json"
+    },
+    {
+      "type": "file",
+      "uri": "postcss.config.js"
+    },
+    {
+      "type": "file",
+      "uri": "README.md"
+    },
+    {
+      "type": "file",
+      "uri": "tailwind.config.js"
+    },
+    {
+      "type": "file",
+      "uri": "tsconfig.json"
+    },
+    {
+      "type": "file",
+      "uri": "tsconfig.node.json"
+    },
+    {
+      "type": "file",
+      "uri": "vite.config.ts"
+    }
+  ]
+}
+
+<div style={{height: 500}}><FileTree tree={tree} /></div>
 
 #### Install necessary packages and libraries
 

diff --git a/docs/quick-start/developers/todo-app/index.md b/docs/quick-start/developers/todo-app/index.md
@@ -299,7 +299,71 @@ cd aelf-samples/todo/2-dapp
 
 - Once you're inside the `2-dapp` directory, open the project with your preferred IDE (e.g., VSCode). You should see the project structure as shown below.
 
-  ![result](/img/nft-fe-directory.png)
+export const tree = {
+  "type": "directory",
+  "uri": "2-dapp",
+  "expanded": true,
+  "children": [
+    {
+      "type": "directory",
+      "uri": "app"
+    },
+    {
+      "type": "directory",
+      "uri": "assets"
+    },
+    {
+      "type": "directory",
+      "uri": "public"
+    },
+    {
+      "type": "directory",
+      "uri": "src"
+    },
+    {
+      "type": "file",
+      "uri": ".gitignore"
+    },
+    {
+      "type": "file",
+      "uri": "components.json"
+    },
+    {
+      "type": "file",
+      "uri": "index.html"
+    },
+    {
+      "type": "file",
+      "uri": "package.json"
+    },
+    {
+      "type": "file",
+      "uri": "postcss.config.js"
+    },
+    {
+      "type": "file",
+      "uri": "README.md"
+    },
+    {
+      "type": "file",
+      "uri": "tailwind.config.js"
+    },
+    {
+      "type": "file",
+      "uri": "tsconfig.json"
+    },
+    {
+      "type": "file",
+      "uri": "tsconfig.node.json"
+    },
+    {
+      "type": "file",
+      "uri": "vite.config.ts"
+    }
+  ]
+}
+
+<div style={{height: 500}}><FileTree tree={tree} /></div>
 
 #### Install necessary libraries