Merge pull request #1062 from jenks-guo-filecoin/minor-improvements-t…

…o-how-to-create-simple-chat-app

Small improvements to Chat App tutorial

docs/how-to/create-simple-chat-app.md

@@ -5,7 +5,7 @@ description: Learn how to deploy a minimal chat app entirely in the browser usin
 
 # Create a simple chat app
 
-This how-to demonstrates a minimal chat example in `js-ipfs` entirely in the browser. It uses WebRTC to achieve browser-to-browser connectivity where possible, and a circuit relay to connect browser nodes where not. Message passing is done with libp2p's pubsub.
+This how-to demonstrates a minimal chat example in `js-ipfs` entirely in the browser. It uses WebRTC to achieve browser-to-browser connectivity where possible, and a circuit relay to connect browser nodes where not. Message passing is done with [libp2p](https://libp2p.io/)'s pubsub.
 
 ## Getting the code
 
@@ -15,6 +15,9 @@ You can see the live demo [here](https://ipfs.io/ipfs/bafybeia5f2yk6td7ciroeped2
 
 Then simply open `index.html` in your web browser and you'll immediately begin automatically connecting to nodes and looking for peers!
 
+A quick demo of the app: 
+![A quick demo of the browser chat app](https://ipfs.io/ipfs/bafkreiguhhdgbivdzzzmohhdgilw2nk3d73idz4zjlciv6uws5ovfxm5xu "A quick demo of the browser chat app")
+
 You can also fork [TheDiscordian/browser-ipfs-chat](https://github.com/TheDiscordian/browser-ipfs-chat) on GitHub, and it'll be ready to test right away. If you want to deploy your own version, simply edit `index.html` and follow the setup information below.
 
 The libraries used in this example are [`js-ipfs`](https://github.com/ipfs/js-ipfs/blob/master/docs/BROWSERS.md) and Bootstrap (just their minified CSS). If you want a newer version of `js-ipfs`, you can use the [latest version available](https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js) from JSDelivr.
@@ -25,19 +28,23 @@ Let's take a look at how this works.
 
 In a browser, discovering and connecting to peers can be very hard, as we can't listen for new peers and we don't have access to the DHT. In order to have the best experience working in a browser, it's important to understand how to both find peers and stay connected with them.
 
-The chat example achieves this in two ways. Using WebRTC-Star, we achieve direct browser-to-browser communication, and with a circuit relay, we have a relay in the middle. The chat application also has a status indicator in the top left to let you know  what kind of connection you have. Green means you're connected to the relay, even if it's via another peer; yellow means you're only seeing direct peers; and red means you have no peers (at least none using the chat application).
+The chat example achieves this in two ways. Using WebRTC-Star, we achieve direct browser-to-browser communication, and with a circuit relay, we have a relay in the middle. The chat application also has a status indicator in the top left to let you know what kind of connection you have.
+
+![Where the status indicator is](https://ipfs.io/ipfs/bafkreibtzxsr5pn2sqy6eipa3tz7vxgvlbpyavlivskr5x6zzsnkuqx7ia "The status indicator on the app")
+
+Green means you're connected to the relay, even if it's via another peer; yellow means you're only seeing direct peers; and red means you have no peers (at least none using the chat application).
 
 ![Network graph showing the paths nodes can use to discover and communicate with each other](https://ipfs.io/ipfs/QmX2og5BKJCMVaebEm9ZGsACEYExoGqxhJjePKNc2mZ2pE "Browser IPFS network graph")
 
 ::: tip
 The diagram above demonstrates what a three-user network can look like. It's worth noting that the browser nodes can communicate with `go-ipfs` as well, so BrowserC doesn't have to be a browser at all, but instead could be a `go-ipfs` node!
 :::
 
-### Docker (optional)
+### Docker
 
-If you don't want to use Docker, skip to the [**WebRTC-Star**](#webrtc-star) section.
+This step is optional. If you are not using Docker skip to the [**WebRTC-Star**](#webrtc-star) section.
 
-After this section we'll go over what WebRTC-Star and circuit relay do, and how to set them up. However, if you'd like to quickly roll your own kit using Docker, this example includes an image you can use. It might not be the best long-term solution, but it should be great if you want to quickly get rolling and experiment.
+After this section we'll go over what WebRTC-Star and circuit relay do, and how to set them up. However, if you'd like to quickly roll your own kit using Docker, this example includes a Docker image you can use. It might not be the best long-term solution, but it should be great if you want to quickly get rolling and experiment.
 
 #### Create a volume
 
@@ -229,7 +236,7 @@ Restart your `go-ipfs` node however you normally do (possibly `systemctl --user
 
 Using `p2p-circuit` can be a bit tricky. Once we connect to the relay from a browser, we're not advertising that we're able to be reached through it! For this purpose, this how-to includes a Python script that runs alongside `go-ipfs` and advertises the browser `js-ipfs` peers it encounters over [PubSub](https://docs.libp2p.io/concepts/publish-subscribe/) with a `p2p-circuit` [multiaddress](https://docs.libp2p.io/concepts/addressing/).
 
-You can find the Python script [here](https://gist.github.com/TheDiscordian/51962fea72f8d5a5c3bba79dd7009e1c). It can be run with a simple `python ipfs_peeradvertiser.py`. However, ensure you first edit `CIRCUIT` with your own node's information, or you won't announce the peers correctly, and they won't know how to use your relay to connect to other peers.
+You can find the Python script [here](https://gist.github.com/TheDiscordian/51962fea72f8d5a5c3bba79dd7009e1c). It can be run with a simple `python ipfs_peeradvertiser.py`. However, ensure you first edit `CIRCUIT` with your own node's information, or you won't announce peers correctly, and they won't know how to use your relay to connect to other peers.
 
 You can retrieve your own circuit info quite easily. Simply run `ipfs id` on your `go-ipfs` node to get your PeerID, then form the circuit URL like so:
 
@@ -327,7 +334,7 @@ Nginx is now operating as a reverse proxy, giving you secured WebSockets!
 
 ## Communication
 
-Whew! Since you made it this far, you might be wondering "what is communication like?" Luckily the answer is that it's _very_ easy in comparison to finding the peers, with only minor pitfalls. We're going to simply cover how we're using [PubSub](https://docs.libp2p.io/concepts/publish-subscribe/) in the chat example, and exactly what pitfalls were found while it was developed.
+Whew! Since you made it this far, you might be wondering "what is communication like?" Luckily the answer is that it's _very_ easy in comparison to finding peers, with only minor pitfalls. We're going to simply cover how we're using [PubSub](https://docs.libp2p.io/concepts/publish-subscribe/) in the chat example, and exactly what pitfalls were found while it was developed.
 
 ### PubSub