diff --git a/docs/quick-start/developers/dao-dapp/_tree.json b/docs/quick-start/developers/dao-dapp/_tree.json new file mode 100644 index 0000000..6aa5fb3 --- /dev/null +++ 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 index 01f0ab5..ea3363b 100644 --- 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" + } + ] +} +
#### Install necessary libraries diff --git a/docs/quick-start/developers/nft-dapp/index.md b/docs/quick-start/developers/nft-dapp/index.md index 8a8bb10..d1fed28 100644 --- 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" + } + ] +} + +
#### 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 index 244639b..f63cbfb 100644 --- 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" + } + ] +} + +
#### 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 index 4221fc2..e150baf 100644 --- 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" + } + ] +} + +
#### Install necessary libraries diff --git a/package-lock.json b/package-lock.json index a1e1a0d..1cfcb50 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@docusaurus/core": "3.4.0", "@docusaurus/preset-classic": "3.4.0", "@mdx-js/react": "^3.0.0", + "@sinm/react-file-tree": "^1.1.1", "chaingpt-component": "^0.2.0-beta.3", "clsx": "^2.0.0", "docusaurus-theme-search-typesense": "^0.20.0-0", @@ -2992,6 +2993,16 @@ "url": "https://github.com/sindresorhus/is?sponsor=1" } }, + "node_modules/@sinm/react-file-tree": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@sinm/react-file-tree/-/react-file-tree-1.1.1.tgz", + "integrity": "sha512-XlHLLNV18zWx7mYEH5gtlBb7jYFX7GaBA5jmhsG9YXhgwyyK33JgymrbU+IHDDBakAoZ+xISLKzu2ldzKbA/wg==", + "license": "MIT", + "dependencies": { + "@types/react-virtualized": "^9.21.15", + "react-virtualized": "^9.22.3" + } + }, "node_modules/@slorber/remark-comment": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@slorber/remark-comment/-/remark-comment-1.0.0.tgz", @@ -3524,6 +3535,16 @@ "@types/react-router": "*" } }, + "node_modules/@types/react-virtualized": { + "version": "9.21.30", + "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.21.30.tgz", + "integrity": "sha512-4l2TFLQ8BCjNDQlvH85tU6gctuZoEdgYzENQyZHpgTHU7hoLzYgPSOALMAeA58LOWua8AzC6wBivPj1lfl6JgQ==", + "license": "MIT", + "dependencies": { + "@types/prop-types": "*", + "@types/react": "*" + } + }, "node_modules/@types/retry": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", @@ -5655,6 +5676,16 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", @@ -12243,6 +12274,12 @@ "react": "^16.13.1 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", + "license": "MIT" + }, "node_modules/react-loadable": { "name": "@docusaurus/react-loadable", "version": "6.0.0", @@ -12318,6 +12355,33 @@ "react": ">=15" } }, + "node_modules/react-virtualized": { + "version": "9.22.5", + "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.5.tgz", + "integrity": "sha512-YqQMRzlVANBv1L/7r63OHa2b0ZsAaDp1UhVNEdUaXI8A5u6hTpA5NYtUueLH2rFuY/27mTGIBl7ZhqFKzw18YQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.7.2", + "clsx": "^1.0.4", + "dom-helpers": "^5.1.3", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0", + "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-virtualized/node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", diff --git a/package.json b/package.json index b4abd61..9045a2d 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@docusaurus/core": "3.4.0", "@docusaurus/preset-classic": "3.4.0", "@mdx-js/react": "^3.0.0", + "@sinm/react-file-tree": "^1.1.1", "chaingpt-component": "^0.2.0-beta.3", "clsx": "^2.0.0", "docusaurus-theme-search-typesense": "^0.20.0-0", diff --git a/src/theme/FileTree/index.tsx b/src/theme/FileTree/index.tsx new file mode 100644 index 0000000..977a363 --- /dev/null +++ b/src/theme/FileTree/index.tsx @@ -0,0 +1,13 @@ +import FileItemWithFileIcon from "@sinm/react-file-tree/lib/FileItemWithFileIcon"; +import "@sinm/react-file-tree/icons.css"; +import "@sinm/react-file-tree/styles.css"; +import { FileTree as FileTreeLib, TreeNode } from "@sinm/react-file-tree"; +const itemRenderer = (treeNode: TreeNode) => ( + +); + +const FileTree = ({ tree }: { tree?: TreeNode }) => { + return ; +}; + +export default FileTree; diff --git a/src/theme/MDXComponents.tsx b/src/theme/MDXComponents.tsx index 9c1da88..d1f27ec 100644 --- a/src/theme/MDXComponents.tsx +++ b/src/theme/MDXComponents.tsx @@ -4,6 +4,7 @@ import MDXComponents from "@theme-original/MDXComponents"; import DocCardListLinks from "@site/src/theme/DocCardListLinks"; import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; +import FileTree from "./FileTree"; export default { // Re-use the default mapping @@ -13,4 +14,5 @@ export default { DocCardListLinks, Tabs, TabItem, + FileTree, }; diff --git a/yarn.lock b/yarn.lock index 9b0f775..e10696f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1196,7 +1196,7 @@ core-js-pure "^3.30.2" regenerator-runtime "^0.14.0" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.2", "@babel/runtime@^7.22.6", "@babel/runtime@^7.23.2", "@babel/runtime@^7.8.4": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.2", "@babel/runtime@^7.22.6", "@babel/runtime@^7.23.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": version "7.24.7" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz" integrity sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw== @@ -1878,6 +1878,14 @@ resolved "https://registry.npmjs.org/@sindresorhus/is/-/is-5.6.0.tgz" integrity sha512-TV7t8GKYaJWsn00tFDqBw8+Uqmr8A0fRU1tvTQhyZzGv0sJCGRQL3JGMI3ucuKo3XIZdUP+Lx7/gh2t3lewy7g== +"@sinm/react-file-tree@^1.1.1": + version "1.1.1" + resolved "https://registry.npmjs.org/@sinm/react-file-tree/-/react-file-tree-1.1.1.tgz" + integrity sha512-XlHLLNV18zWx7mYEH5gtlBb7jYFX7GaBA5jmhsG9YXhgwyyK33JgymrbU+IHDDBakAoZ+xISLKzu2ldzKbA/wg== + dependencies: + "@types/react-virtualized" "^9.21.15" + react-virtualized "^9.22.3" + "@slorber/remark-comment@^1.0.0": version "1.0.0" resolved "https://registry.npmjs.org/@slorber/remark-comment/-/remark-comment-1.0.0.tgz" @@ -2241,6 +2249,14 @@ "@types/history" "^4.7.11" "@types/react" "*" +"@types/react-virtualized@^9.21.15": + version "9.21.30" + resolved "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.21.30.tgz" + integrity sha512-4l2TFLQ8BCjNDQlvH85tU6gctuZoEdgYzENQyZHpgTHU7hoLzYgPSOALMAeA58LOWua8AzC6wBivPj1lfl6JgQ== + dependencies: + "@types/prop-types" "*" + "@types/react" "*" + "@types/react@*", "@types/react@>= 16.8.0 < 19.0.0", "@types/react@>=16": version "18.3.3" resolved "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz" @@ -2674,6 +2690,7 @@ autoprefixer@^10.4.14, autoprefixer@^10.4.19: normalize-range "^0.1.2" picocolors "^1.0.0" postcss-value-parser "^4.2.0" + axios@^1.6.0: version "1.7.5" resolved "https://registry.npmjs.org/axios/-/axios-1.7.5.tgz" @@ -3061,6 +3078,11 @@ clone-deep@^4.0.1: kind-of "^6.0.2" shallow-clone "^3.0.0" +clsx@^1.0.4: + version "1.2.1" + resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz" + integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== + clsx@^1.2.1: version "1.2.1" resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz" @@ -3665,6 +3687,14 @@ dom-converter@^0.2.0: dependencies: utila "~0.4" +dom-helpers@^5.1.3: + version "5.2.1" + resolved "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz" + integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^3.0.2" + dom-serializer@^1.0.1: version "1.4.1" resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz" @@ -7101,7 +7131,7 @@ react-dev-utils@^12.0.1: strip-ansi "^6.0.1" text-table "^0.2.0" -react-dom@*, "react-dom@^16.6.0 || ^17.0.0 || ^18.0.0", react-dom@^18.0.0, react-dom@^18.3.1, "react-dom@>= 16.8.0 < 19.0.0": +react-dom@*, "react-dom@^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0", "react-dom@^16.6.0 || ^17.0.0 || ^18.0.0", react-dom@^18.0.0, react-dom@^18.3.1, "react-dom@>= 16.8.0 < 19.0.0": version "18.3.1" resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz" integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw== @@ -7140,6 +7170,11 @@ react-json-view-lite@^1.2.0: resolved "https://registry.npmjs.org/react-json-view-lite/-/react-json-view-lite-1.4.0.tgz" integrity sha512-wh6F6uJyYAmQ4fK0e8dSQMEWuvTs2Wr3el3sLD9bambX1+pSWUVXIz1RFaoy3TI1mZ0FqdpKq9YgbgTTgyrmXA== +react-lifecycles-compat@^3.0.4: + version "3.0.4" + resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + react-loadable-ssr-addon-v5-slorber@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/react-loadable-ssr-addon-v5-slorber/-/react-loadable-ssr-addon-v5-slorber-1.0.1.tgz" @@ -7189,7 +7224,19 @@ react-router@^5.3.4, react-router@>=5, react-router@5.3.4: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" -react@*, "react@^16.13.1 || ^17.0.0 || ^18.0.0", "react@^16.6.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.3.1, "react@>= 16.8.0 < 19.0.0", react@>=15, react@>=16, react@>=16.0.0: +react-virtualized@^9.22.3: + version "9.22.5" + resolved "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.5.tgz" + integrity sha512-YqQMRzlVANBv1L/7r63OHa2b0ZsAaDp1UhVNEdUaXI8A5u6hTpA5NYtUueLH2rFuY/27mTGIBl7ZhqFKzw18YQ== + dependencies: + "@babel/runtime" "^7.7.2" + clsx "^1.0.4" + dom-helpers "^5.1.3" + loose-envify "^1.4.0" + prop-types "^15.7.2" + react-lifecycles-compat "^3.0.4" + +react@*, "react@^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0", "react@^16.13.1 || ^17.0.0 || ^18.0.0", "react@^16.6.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.3.1, "react@>= 16.8.0 < 19.0.0", react@>=15, react@>=16, react@>=16.0.0: version "18.3.1" resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz" integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==