chore(docs): Quick start doc (#420)

doc-site/docs/getting-started/quick-start.mdx

@@ -0,0 +1,115 @@
+---
+id: quick-start
+sidebar_position: 3
+---
+
+import Image from '@theme/IdealImage';
+
+# Quick Start
+
+We provide templates that can run `React` ([Next.js](https://nextjs.org/), [Vite](https://vitejs.dev/) and [CRA](https://create-react-app.dev/) etc) directly.
+
+You can use [`create-gnfd-app`](https://github.com/bnb-chain/greenfield-js-sdk/tree/main/packages/create-gnfd-app) to create a app quickly:
+
+```bash
+> npx @bnb-chain/create-gnfd-app
+```
+
+![create-gnfd-app](/img/quick-start/gnfd-template.gif)
+
+## Using Template
+
+### 1. Fill Application name
+
+Here I take `my-gnfd-app` as an example:
+
+```bash
+> npx @bnb-chain/create-gnfd-app
+# highlight-start
+? What is your project named? my-gnfd-app
+# highlight-end
+```
+
+### 2. Select a template
+
+Here I take `nextjs` as an example:
+
+```bash
+> npx @bnb-chain/create-gnfd-app
+? What is your project named? my-gnfd-app
+? select a template? (Use arrow keys)
+# highlight-start
+❯ nextjs
+  create-react-app
+  vite
+# highlight-end
+```
+
+### 3. Select a package manager
+
+Here I take `pnpm` as an example:
+
+```bash
+> npx @bnb-chain/create-gnfd-app
+? What is your project named? my-gnfd-app
+? select a template? nextjs
+# highlight-start
+? select a package manager?
+  npm
+  yarn
+❯ pnpm
+# highlight-end
+```
+
+### 4. Download template
+
+Now downloading template:
+
+```bash
+? What is your project named? my-gnfd-app
+? select a template? nextjs
+? select a package manager? pnpm
+# highlight-start
+Creating a new Greenfield app in my-gnfd-app.
+🎉 download template - nextjs success
+
+⠧ Installing dependencies with pnpm......
+# highlight-end
+```
+
+After a while you will see this line:
+
+```bash
+? What is your project named? my-gnfd-app
+? select a template? nextjs
+? select a package manager? pnpm
+Creating a new Greenfield app in my-gnfd-app.
+# highlight-start
+🎉 download template - nextjs success
+
+🎉 Install dependencies successfully.
+# highlight-end
+```
+
+## Run Application
+
+```bash
+> cd my-gnfd-app
+> npm run dev
+```
+
+### 1. You can see `Connect Wallet` button
+
+  ![init](/img/quick-start/init.png)
+
+### 2. Click the button and select a wallet
+
+  <Image img={require('/img/quick-start/select-wallet.png')} width="500" />
+
+### 3. You can this page
+
+  <Image img={require('/img/quick-start/details.png')} width="500" />
+
+### 4. Create a Bucket
+
+  <Image img={require('/img/quick-start/create-bucket.png')} />

doc-site/docusaurus.config.js

@@ -11,6 +11,7 @@ const config = {
   title: 'Greenfield JavaScript SDK',
   tagline: `An easy-to-use tool designed to help developers build decentralized applications (DApps) on the Greenfield blockchain.`,
   favicon: 'img/favicon.ico',
+  staticDirectories: ['static'],
 
   // Set the production url of your site here
   url: 'https://greenfield-js-sdk.netlify.app',
@@ -26,6 +27,17 @@ const config = {
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
 
+  plugins: [
+    '@docusaurus/plugin-ideal-image',
+    // {
+    //   quality: 70,
+    //   max: 1030, // max resized image's size.
+    //   min: 640, // min resized image's size. if original is lower, use that size.
+    //   steps: 2, // the max number of images generated between min and max (inclusive)
+    //   disableInDev: false,
+    // },
+  ],
+
   // Even if you don't use internalization, you can use this field to set useful
   // metadata like html lang. For example, if your site is Chinese, you may want
   // to replace "en" with "zh-Hans".

doc-site/package.json

@@ -14,8 +14,9 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "3.0.0",
-    "@docusaurus/preset-classic": "3.0.0",
+    "@docusaurus/core": "3.0.1",
+    "@docusaurus/plugin-ideal-image": "^3.0.1",
+    "@docusaurus/preset-classic": "3.0.1",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^2.2.0",

examples/nextjs/src/components/object/create/index.tsx

@@ -60,9 +60,9 @@ export const CreateObject = () => {
               return;
             }
 
-            const checksumWorker = getCheckSumsWorker();
-            const multiCal = await checksumWorker.generateCheckSumV2(file);
-            console.log('multiCal', multiCal);
+            // const checksumWorker = getCheckSumsWorker();
+            // const multiCal = await checksumWorker.generateCheckSumV2(file);
+            // console.log('multiCal', multiCal);
 
             const fileBytes = await file.arrayBuffer();
             const hashResult = await (window as any).FileHandle.getCheckSums(