feat(blog): add peerchat blog post

Author: 0x77dev

docs/README.md

@@ -14,9 +14,11 @@ DStack was created to bring together some of the popular libraries for the decen
 
 ## What DStack offers
 
-Currently you can use DStack as a peer-to-peer distributed KV/Graph database
+DStack simplifies IPFS JavaScript API for application development usage
 
-_**[See milestones](https://github.com/0x77dev/dstack/milestones)**_
+Also provides relay node and Store API
+
+Checkout [Peerchat](https://dstack.0x77.dev/blog/peerchat) demo
 
 [license]: https://github.com/0x77dev/dstack/blob/main/LICENSE
 [license-badge]: https://img.shields.io/github/license/0x77dev/dstack

docs/blog/hello-world.md

@@ -14,9 +14,18 @@ DStack was created to bring together some of the popular libraries for the decen
 
 ## What DStack offers
 
-Currently you can use DStack as a globally distributed GraphQL cache system built on top of [IPFS DAG API](https://github.com/ipfs/js-ipfs/blob/master/docs/core-api/DAG.md#dag-api-)
+DStack simplifies IPFS JavaScript API for application development usage
+
+DStack provides:
+
+- Store API
+- PubSub API
+- Relay
+
+Checkout [Peerchat](/blog/peerchat) demo
+
+Play with DStack in a [Playground](https://dstack-playground.netlify.app)
 
 ## Getting started
 
 See [Tutorial](/docs/intro) to get started using DStack in your app
-

docs/blog/peerchat.md

@@ -0,0 +1,76 @@
+---
+slug: peerchat
+title: Peerchat
+authors:
+  - 0x77dev
+tags: [dstack, example, demo, peerchat]
+---
+
+## Introduction
+
+Peerchat is a CLI app that allows to chat via DStack PubSub API without any configuration
+
+## Demo
+
+![Demo](https://github.com/dstack-js/chat/raw/main/docs/demo.svg)
+
+_Recording looks ugly, but in terminal it seems to be fine_
+
+## Try it out!
+
+### Install
+
+```console
+$ npm i -g peerchar
+```
+
+```console
+$ yarn global add peerchar
+```
+
+```console
+$ npx peerchar
+```
+
+### Usage
+
+```console
+$ # peerchat [channel] [nickname]
+$ peerchat dstack steve
+```
+
+## How it works?
+
+DStack provides PubSub API
+
+Peerchat uses it to communicate between users
+
+### Code Examples
+
+#### Listening to messages
+
+```javascript
+await stack.pubsub.subscribe(room, (event) => {
+  const username = event.data.nickname
+    ? `${event.data.nickname} (${event.from.slice(-5)})`
+    : event.from.slice(-5);
+
+  messageList.addItem(`${username}: ${event.data.message}`);
+  messageList.scrollTo(100);
+  screen.render();
+});
+```
+
+#### Sending message
+
+```javascript
+await pubsub.publish(room, { nickname, message });
+```
+
+---
+
+[Peerchat repository](https://github.com/dstack-js/chat)
+
+## Get started with DStack
+
+See [Tutorial](/docs/intro) to get started using DStack in your app

docs/src/css/custom.css

@@ -7,7 +7,7 @@
 /* You can override the default Infima variables here. */
 :root {
   --docusaurus-btt-color: black;
-  --ifm-color-primary: #25c2a0;
+  --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);
@@ -16,7 +16,8 @@
   --ifm-color-primary-lightest: rgb(146, 224, 208);
   --ifm-code-font-size: 95%;
   --ifm-navbar-link-color: black;
-  --ifm-color-primary: #FCF9E8;
+  --ifm-link-color: #d8d2b5;
+  --ifm-color-primary: #fcf9e8;
   --ifm-navbar-shadow: none;
   --ifm-color-secondary: white;
   --ifm-footer-background-color: black;
@@ -25,7 +26,7 @@
   --ifm-font-color-base-inverse: black;
   --ifm-background-color: black;
   --ifm-background-surface-color: black;
-  --ifm-navbar-link-hover-color: rgba(0, 0, 0, .90);
+  --ifm-navbar-link-hover-color: rgba(0, 0, 0, 0.9);
 }
 
 .docusaurus-highlight-code-line {
@@ -48,6 +49,6 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 }
 
 nav.navbar {
-  background-color: #FCF9E8;
+  background-color: #fcf9e8;
   color: black;
 }