chore(docs): update intro, relay, deploy relay and move changelog

Author: 0x77dev

docs/docs/deploy-relay.mdx

@@ -13,8 +13,6 @@ It is accesible here: https://relay.dstack.dev
 
 You can check status and uptime here: https://status.dstack.dev
 
-[![Better Uptime Badge](https://betteruptime.com/status-badges/v1/monitor/d3wq.svg)](https://betteruptime.com/?utm_source=status_badge)
-
 ---
 
 Docker is only maintained way to run relay

docs/docs/intro.mdx

@@ -19,8 +19,14 @@ or Shard API to share temporary/preview files or structured data between clients
 
 For example, you can create a collaborative real-time WYSIWYG editor with file preview support where all events and file previews are handled without your server infrastructure.
 
+<details>
+
+<summary> WYSIWYG Demo </summary>
+
 ![Demo](https://i.imgur.com/cKjBrge.gif)
 
+</details>
+
 ## Play with DStack in browser console
 
 https://explorer.dstack.dev/
@@ -46,16 +52,51 @@ npm i -S @dstack-js/lib
 
 ### Initialize Stack
 
+<Tabs>
+  <TabItem value="public-relay" label="Public Relay">
+
+```javascript
+import { Stack } from '@dstack-js/lib';
+
+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';
-// In non-browser environment you need to provide WebRTC implementation
-// import wrtc from '@dstack-js/wrtc';
-// const stack = await Stack.create({ namespace: 'namespace', wrtc });
-const stack = await Stack.create({ namespace: 'namespace' });
+import wrtc from '@dstack-js/wrtc';
+
+const stack = await Stack.create({
+  namespace: 'namespace',
+  wrtc
+});
 
 console.log('My Peer ID is:', stack.id);
 ```
 
+  </TabItem>
+</Tabs>
+
+
+
+
 ### Interact with PubSub
 
 ```javascript
@@ -79,10 +120,13 @@ const shard = await stack.store.get('hello');
 
 ## Tell others that you use DStack
 
-Badge:
+Here is an badge for you:
 
 [![dstack](https://dstack.dev/img/badge.svg)](https://dstack.dev)
 
 ```markdown
 [![dstack](https://dstack.dev/img/badge.svg)](https://dstack.dev)
 ```
+---
+
+We are searching for projects who are interested to use DStack in production to collect feedback, bug reports and feature requests, [you can apply here](https://6l3fibt6mac.typeform.com/to/NZL0qDN2)

docs/docs/relay.mdx

@@ -16,8 +16,6 @@ It is accesible here: https://relay.dstack.dev
 
 You can check status and uptime here: https://status.dstack.dev
 
-[![Better Uptime Badge](https://betteruptime.com/status-badges/v1/monitor/d3wq.svg)](https://betteruptime.com/?utm_source=status_badge)
-
 ## Getting Bootstrap data
 
 As of version v0.2.46 no need to bootstrap

docs/docusaurus.config.js

@@ -1,6 +1,4 @@
 // @ts-check
-// Note: type annotations allow type checking and IDEs autocompletion
-const darkCodeTheme = require('prism-react-renderer/themes/vsDark');
 
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
@@ -46,24 +44,22 @@ module.exports = {
         indexName: 'dstack',
       },
       announcementBar: {
-        id: 'announcement',
+        id: '2022-q1',
         content:
-          '<a style="text-decoration: none; color: white" href="https://savelife.in.ua/">Support Ukraine <img width="14px" src="https://upload.wikimedia.org/wikipedia/commons/4/49/Flag_of_Ukraine.svg" /></a>',
+          '<a style="text-decoration: none; color: white" href="https://savelife.in.ua/">Support Ukraine <img width="14px" src="https://upload.wikimedia.org/wikipedia/commons/4/49/Flag_of_Ukraine.svg" /></a> | <a style="color: white" href="/blog/2022-Q1">What\'s new in DStack 2022-Q1</a>',
         backgroundColor: 'black',
         textColor: 'white',
         isCloseable: true,
       },
       colorMode: {
-        defaultMode: 'dark',
-        disableSwitch: true,
-        respectPrefersColorScheme: false,
+        respectPrefersColorScheme: true,
+      },
+      prism: {
+        theme: require('prism-react-renderer/themes/github'),
+        darkTheme: require('prism-react-renderer/themes/dracula'),
       },
       navbar: {
         title: 'DStack',
-        logo: {
-          alt: 'DStack Logo',
-          src: 'img/logo.svg',
-        },
         items: [
           {
             type: 'doc',
@@ -73,7 +69,7 @@ module.exports = {
           },
           { to: '/blog', label: 'Blog', position: 'left' },
           {
-            href: '/changelog',
+            href: 'https://github.com/dstack-js/dstack/blob/main/CHANGELOG.md',
             label: 'Changelog',
             position: 'right',
           },
@@ -150,9 +146,5 @@ module.exports = {
         ],
         copyright: `Copyright © ${new Date().getFullYear()} <a href="https://github.com/dstack-js/dstack/graphs/contributors">DStack Contributors</a>`,
       },
-      prism: {
-        theme: darkCodeTheme,
-        darkTheme: darkCodeTheme,
-      },
     }),
 };

docs/package.json

@@ -12,17 +12,17 @@
     ]
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.17",
-    "@docusaurus/preset-classic": "2.0.0-beta.17",
-    "@mdx-js/react": "1.6.22",
-    "clsx": "1.1.1",
-    "prism-react-renderer": "1.3.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "usehooks-ts": "^2.4.2"
+    "@docusaurus/core": "latest",
+    "@docusaurus/preset-classic": "latest",
+    "@mdx-js/react": "^1.6.22",
+    "clsx": "^1.1.1",
+    "markdown-to-jsx": "^7.1.7",
+    "prism-react-renderer": "^1.2.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.17",
+    "@docusaurus/module-type-aliases": "latest",
     "@tsconfig/docusaurus": "^1.0.4",
     "typescript": "^4.6.2"
   },

docs/src/css/custom.css

@@ -4,55 +4,44 @@
  * work well for content-centric websites.
  */
 
-/* You can override the default Infima variables here. */
 :root {
-  --docusaurus-btt-color: black;
-  --ifm-color-primary: #fcf9e8;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
-  --ifm-color-primary-darker: rgb(31, 165, 136);
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
-  --ifm-color-primary-light: rgb(70, 203, 174);
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
-  --ifm-color-primary-lightest: rgb(146, 224, 208);
-  --ifm-code-font-size: 95%;
-  --ifm-navbar-link-color: black;
-  --ifm-link-color: #d8d2b5;
-  --ifm-color-primary: #fcf9e8;
-  --ifm-navbar-shadow: none;
-  --ifm-color-secondary: white;
-  --ifm-footer-background-color: black;
-  --ifm-hover-overlay: black;
-  --ifm-navbar-link-hover-color: gray;
-  --ifm-font-color-base-inverse: black;
-  --ifm-background-color: black;
-  --ifm-background-surface-color: black;
-  --ifm-navbar-link-hover-color: rgba(0, 0, 0, 0.9);
-}
-
-.docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.1);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
-html[data-theme='dark'] .docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.3);
+  --ifm-color-primary: #201b21;
+  --ifm-color-primary-dark: #1d181e;
+  --ifm-color-primary-darker: #1b171c;
+  --ifm-color-primary-darkest: #161317;
+  --ifm-color-primary-light: #231e24;
+  --ifm-color-primary-lighter: #251f26;
+  --ifm-color-primary-lightest: #2a232b;
+  --ifm-background-color: #fffefa;
+  --ifm-footer-background-color: var(--ifm-background-color);
 }
 
-.clean-btn > svg {
+.hero {
+  background-color: #fcf9e8;
   color: black;
 }
 
-.footer {
-  background-color: black;
+[data-theme='dark'] {
+  --ifm-color-primary: #fcf9e8;
+  --ifm-color-primary-dark: #f6eebd;
+  --ifm-color-primary-darker: #f4e8a8;
+  --ifm-color-primary-darkest: #ebd768;
+  --ifm-color-primary-light: #ffffff;
+  --ifm-color-primary-lighter: #ffffff;
+  --ifm-color-primary-lightest: #ffffff;
+  --ifm-background-color: #201b21;
+  --ifm-footer-link-color: black;
 }
 
-nav.navbar {
-  background-color: #fcf9e8;
-  color: black;
+.footer,
+.footer__copyright,
+.footer__title,
+.footer__link-item,
+.footer__copyright > a {
+  background-color: var(--ifm-font-color-base-inverse);
+  color: var(--ifm-font-color-base);
 }
 
-.navbar-sidebar__brand > .navbar__brand {
-  color: white;
+.clean-btn.close {
+  color: var(--ifm-font-color-base);
 }