feat(docs): update intro and landing

Author: 0x77dev

docs/docs/connectivity.md

@@ -0,0 +1,22 @@
+---
+title: Connectivity
+sidebar_position: 2
+---
+
+# Connectivity
+
+No need to connect peers manually, DStack will handle it by itself
+
+if you want to ensure that some peers is connected
+
+### Connect to peer manually
+
+```javascript
+await stack.connect('/some/addr');
+```
+
+### Get connected Peers
+
+```javascript
+const peers = await stack.peers();
+```

docs/docs/intro.md

@@ -0,0 +1,115 @@
+---
+title: Quick Look
+sidebar_position: 1
+---
+
+import Flowchart from '../src/components/Flowchart.js';
+
+_DStack is under heavy development, currently some docs is not finished yet_
+
+Let's discover **DStack in less than 15 minutes**.
+
+### Architecture
+
+<Flowchart
+  snapToGrid={true}
+  elements={[
+    {
+      id: 'ipfs',
+      type: 'input',
+      data: { label: 'IPFS' },
+      position: { x: 400, y: 25 },
+    },
+    {
+      id: 'stack',
+      data: { label: 'Stack' },
+      position: { x: 400, y: 100 },
+    },
+    {
+      id: 'pubsub',
+      type: 'output',
+      data: { label: 'PubSub' },
+      style: { borderColor: '#000' },
+      position: { x: 200, y: 300 },
+    },
+    {
+      id: 'store',
+      data: { label: 'Store' },
+      position: { x: 500, y: 250 },
+    },
+    {
+      id: 'shard',
+      type: 'output',
+      style: { borderColor: '#000' },
+      data: { label: 'Shard' },
+      position: { x: 500, y: 350 },
+    },
+    // animated edge
+    { id: 'e1-2', source: 'ipfs', target: 'stack', animated: true },
+    { id: 'e2-3', source: 'stack', target: 'pubsub' },
+    { id: 'e3-4', source: 'stack', target: 'store' },
+    {
+      id: 'e4-5',
+      source: 'store',
+      target: 'shard',
+      animated: true,
+    },
+  ]}
+/>
+
+## Add DStack to your project
+
+Using Yarn:
+
+```shell
+yarn add @dstack-js/lib
+```
+
+Using NPM:
+
+```shell
+npm i -S @dstack-js/lib
+```
+
+You also need IPFS, can use `@dstack-js/ipfs` or `ipfs-core@^0.13.0`, `@dstack-js/ipfs` provides zero configuration package for DStack.
+
+### Initialize Stack
+
+```javascript
+import { create } from '@dstack-js/ipfs';
+import { Stack } from '@dstack-js/lib';
+
+// Browser:
+const ipfs = await create();
+// In Node.js environment you need to provide WebRTC implementation
+// const wrtc = require('wrtc');
+// const ipfs = await create({}, wrtc);
+
+const stack = await Stack.create('namespace', ipfs);
+
+console.log('My Peer ID is:', stack.id);
+```
+
+### Interact with PubSub
+
+```javascript
+stack.pubsub.subscribe('topic', (msg) => {
+  console.log('Received a message', msg.from, msg.data);
+});
+
+stack.pubsub.publish('topic', 'Hello, DStack!');
+```
+
+### Interact with Store
+
+```javascript
+const shard = await stack.store.set('hello', 'world');
+
+// Set value
+await shard.set('dstack');
+
+// Get fresh value
+await shard.get();
+
+const shard = await stack.store.get('hello');
+```

docs/docs/intro.mdx

@@ -23,6 +23,7 @@
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-flow-renderer": "^9.7.3",
     "url-loader": "^4.1.1"
   },
   "name": "docs",

docs/package.json

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactFlow, { Background } from 'react-flow-renderer';
+
+export default ({ elements, style, ...props }) => (
+  <div
+    style={{
+      height: 425,
+      background: 'white',
+      borderRadius: '4px',
+      padding: '4px',
+      ...style,
+    }}
+  >
+    <ReactFlow
+      elements={elements}
+      grid={true}
+      nodesDraggable={false}
+      nodesConnectable={false}
+      elementsSelectable={false}
+      {...props}
+    >
+      <Background variant="dots" gap={10} size={0.5} />
+    </ReactFlow>
+  </div>
+);

docs/src/components/Flowchart.js

@@ -8,32 +8,32 @@ const FeatureList = [
     Svg: require('../../static/img/logo_white.svg').default,
     description: (
       <>
-        DStack was designed from the ground up to be easily installed and
-        used to built semi-decentralized apps quickly, where your product infrastructure is single source of truth
+        DStack was designed from the ground up to be easily installed and used
+        zero configuration
       </>
     ),
   },
   {
-    title: 'Powered by GraphQL',
-    Svg: require('../../static/img/graphql.svg').default,
+    title: 'Powered by IPFS',
+    Svg: require('../../static/img/ipfs.svg').default,
     description: (
       <>
-        DStack provides a set of graphql elements (scalars, directives, etc) to store and fetch your data on decentralized web
+        DStack simplifies IPFS JavaScript API for application development usage
       </>
     ),
   },
   {
-    title: 'TypeScript Support',
-    Svg: require('../../static/img/Typescript_logo_2020.svg').default,
+    title: 'Under construction',
+    Svg: require('../../static/img/Under_construction.svg').default,
     description: (
       <>
-        Built using TypeScript and includes type definition in every module
+        In an active development <br /> Highly experimental as of a moment
       </>
     ),
   },
 ];
 
-function Feature({Svg, title, description}) {
+function Feature({ Svg, title, description }) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">