chore(docs): update metadata and docs/intro,stack

Author: 0x77dev

docs/docs/intro.mdx

@@ -94,9 +94,6 @@ console.log('My Peer ID is:', stack.id);
   </TabItem>
 </Tabs>
 
-
-
-
 ### Interact with PubSub
 
 ```javascript

docs/docs/stack.md

@@ -3,8 +3,78 @@ title: Stack
 sidebar_position: 1
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+Stack is facade that provides provides IPFS and Relay communications for components such as Storage, PubSub and etc...
+
+## Create
+
+<Tabs>
+  <TabItem value="public-relay" label="Public Relay">
+
+```javascript
+import { Stack } from '@dstack-js/lib';
+
+const stack = await Stack.create({
+  namespace: 'namespace',
+});
+
+console.log('My Peer ID is:', stack.id);
+```
+
+  </TabItem>
+  <TabItem value="custom-relay" label="Custom Relay">
+
+```javascript
+import { Stack } from '@dstack-js/lib';
+
+const stack = await Stack.create({
+  namespace: 'namespace',
+  relay: 'https://relay.dstack.dev:443/graphql',
+});
+
+console.log('My Peer ID is:', stack.id);
+```
+
+  </TabItem>
+
+  <TabItem value="non-browser" label="Non-browser environment">
+
+```javascript
+import { Stack } from '@dstack-js/lib';
+import wrtc from '@dstack-js/wrtc';
+
+const stack = await Stack.create({
+  namespace: 'namespace',
+  wrtc,
+});
+
+console.log('My Peer ID is:', stack.id);
+```
+
+  </TabItem>
+</Tabs>
+
 ## Identity
 
+### Providing private key
+
+```javascript
+import { Stack } from '@dstack-js/lib';
+
+const privateKey = '...';
+
+const stack = await Stack.create({
+  namespace: 'namespace',
+  privateKey,
+});
+
+console.log('My Peer ID is:', stack.id);
+```
+
+You can generate a private key using [`peer-id`](https://www.npmjs.com/package/peer-id) module.
+
 ### Peer object
 
 ```javascript
@@ -14,7 +84,7 @@ sidebar_position: 1
 }
 ```
 
-### Get my information
+### Get my identity
 
 ```javascript
 const peer = await stack.id();
@@ -85,12 +155,3 @@ console.log(ms, 'ms');
 ```javascript
 await stack.stop();
 ```
-
-Will terminate pubsub events and store replication
-
-Also you can stop IPFS:
-
-```javascript
-await stack.stop();
-await stack.ipfs.stop();
-```

docs/docusaurus.config.js

@@ -3,8 +3,7 @@
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
   title: 'DStack',
-  tagline:
-    'Technology stack as a library for developing semi-decentralized web applications',
+  tagline: 'A library for developing semi-decentralized web applications',
   url: 'https://dstack.dev',
   baseUrl: '/',
   onBrokenLinks: 'throw',

docs/sidebars.js

@@ -18,14 +18,13 @@ module.exports = {
     },
     {
       type: 'category',
-      label: 'Relay',
-      items: ['relay', 'deploy-relay'],
+      label: 'Core Library',
+      items: ['stack', 'pubsub', 'shard', 'store'],
     },
-
     {
       type: 'category',
-      label: 'Core Library',
-      items: ['stack', 'pubsub', 'shard', 'store'],
+      label: 'Relay',
+      items: ['relay', 'deploy-relay'],
     },
   ],
 };

docs/src/css/custom.css

@@ -14,6 +14,12 @@
   --ifm-color-primary-lightest: #2a232b;
   --ifm-background-color: #fffefa;
   --ifm-footer-background-color: var(--ifm-background-color);
+  --ifm-link-color: #93703a;
+  --ifm-button-background-color: #fff;
+}
+
+.button--secondary:not(.button--outline) {
+  background-color: #fff;
 }
 
 .hero {
@@ -31,6 +37,7 @@
   --ifm-color-primary-lightest: #ffffff;
   --ifm-background-color: #201b21;
   --ifm-footer-link-color: black;
+  --ifm-link-color: var(--ifm-color-primary-darker);
 }
 
 .footer,

docs/src/pages/index.tsx

@@ -8,32 +8,30 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import Logo from '../../static/img/logo.svg';
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
-    <div className="container">
-      <Logo className={clsx('hero--logo', styles.heroLogo)} />
-      <h1 className="hero__title">{siteConfig.title}</h1>
-      <p className="hero__subtitle">{siteConfig.tagline}</p>
-      <div className={styles.buttons}>
-        <Link
-          className="button button--secondary button--lg"
-          to="/docs/intro"
-        >
-          Tutorial 🧑‍💻
-        </Link>
+      <div className="container">
+        <Logo className={clsx('hero--logo', styles.heroLogo)} />
+        <h1 className="hero__title">{siteConfig.title}</h1>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link
+            className="button button--secondary button--lg"
+            to="/docs/intro"
+          >
+            Get started ⚡️
+          </Link>
+        </div>
       </div>
-    </div>
-  </header>
+    </header>
   );
 }
 
 export default function Home(): JSX.Element {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
-    <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+    <Layout title="Get Started" description={siteConfig.tagline}>
       <HomepageHeader />
       <main>
         <HomepageFeatures />