Proposed example for IPNS publish interop (address questions in Discuss)

examples/browser-ipns-publish/.gitignore

@@ -0,0 +1,3 @@
+bundle.js
+.cache
+/node_modules/

examples/browser-ipns-publish/README.md

@@ -0,0 +1,85 @@
+# Publish to IPNS from the browser
+
+> Use ipns from the browser!
+
+This example is a demo web application that allows you to connect to a go-IPFS node, and publish your IPNS record to the go-DHT network but using your js-ipfs private key. We'll start two IPFS nodes; one in the browser and one on a go-Server. We'll use `ipfs-http-client` to connect to the go-Node to ensure our pubsub messages are getting through, and confirm the IPNS record resolves on the go-Node. We're aiming for something like this:
+
+```
+   +-----------+     websocket     +-----------+
+   |           +------------------->           |
+   |  js-ipfs  |      pubsub       |  go-ipfs  |
+   |           <-------------------+           |
+   +-----^-----+                   +-----^-----+
+         |                               |
+         | IPFS in browser               | HTTP API
+         |                               |
++-------------------------------------------------+
+|                     Browser                     |
++-------------------------------------------------+
+|                   |         |                   |
+|                   |         |                   |
+|  IPFS direct      |         |  js-http-client   |
+|  a.k.a. ipfsNode  |         |  a.k.a. ipfsAPI   |
+|                   |         |                   |
++-------------------------------------------------+
+```
+
+## 1. Get started
+
+With Node.js and git installed, clone the repo and install the project dependencies:
+
+```sh
+git clone https://github.com/ipfs/js-ipfs.git
+cd js-ipfs
+npm install # Installs ipfs-http-client dependencies
+cd examples/browser-ipns-publish
+npm install # Installs browser-pubsub app dependencies
+```
+
+Start the example application:
+
+```sh
+npm start
+```
+
+You should see something similar to the following in your terminal and the web app should now be available if you navigate to http://127.0.0.1:1234 using your browser:
+
+```sh
+Starting up http-server, serving ./
+Available on:
+  http://127.0.0.1:1234
+```
+
+## 2. Start two IPFS nodes
+
+The first node is the js-ipfs made in the browser and the demo does that for you.
+
+The second is a go-ipfs node on a server. To get our IPNS record to the DHT, we'll need [a server running go-IPFS](https://blog.ipfs.io/22-run-ipfs-on-a-vps/) with the API enabled on port 5001.
+
+Right now the easiest way to do this is to install and start a `go-ipfs` node. 
+
+### Install and start the Go IPFS node
+
+Head over to https://dist.ipfs.io/#go-ipfs and hit the "Download go-ipfs" button. Extract the archive and read the instructions to install.
+
+After installation:
+
+```sh
+ipfs init
+# Configure CORS to allow ipfs-http-client to access this IPFS node
+ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["http://127.0.0.1:1234"]'
+# Start the IPFS node, enabling pubsub
+ipfs daemon --enable-pubsub-experiment
+```
+
+## 3. Open the demo in a browser and connect to the go-node
+
+Now, open up the demo in a browser window. 
+
+In the "CONNECT TO GO-IPFS VIA API MULTIADDRESS" field enter `/ip4/YourServerIP/tcp/5001` (where `YourSeverIP` is your server's IP address or use `/dns4/yourdomain.com/tcp/5001`) and click connect. Once it connects, put your go-IPFS websocket address in the next field `/dns4/yourdomain.com/tcp/4003/wss/p2p/QmPeerIDHash` and hit the second "Connect" button.
+
+This connects the API to the go-Node and connects your js-IPFS node via websocket to the go-Node so pubsub will work. 
+
+You can choose whether to publish this record under the PeerId of the node that is running in the browser ('self') or choose to add a custom key to the IPFS keychain and publish under that instead. Either should work.
+
+Finally, enter `/ipfs/QmSomeHash` as the content you want to publish to IPNS. You should see the messages sent from the browser to the server appear in the logs below, ending with "Success, reolved" if it all worked.

examples/browser-ipns-publish/index.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Publish to IPNS from the browser</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"
+    />
+    <link rel="stylesheet" href="https://unpkg.com/ipfs-css@0.12.0/ipfs.css" />
+  </head>
+  <body class="sans-serif">
+    <header class="pv3 ph2 ph3-l bg-navy cf mb4">
+      <a href="https://ipfs.io/" title="ipfs.io">
+        <img
+          src="https://ipfs.io/images/ipfs-logo.svg"
+          class="v-mid"
+          style="height: 50px;"
+        />
+      </a>
+      <h1 class="aqua fw2 montserrat dib ma0 pv2 ph1 v-mid fr f3 lh-copy">
+        IPNS Publish from JS to Go Peer
+      </h1>
+    </header>
+    <div class="ph3 mb3">
+      <div class="fw2 tracked ttu f6 teal-muted mb2">
+        IPNS PUBLISH SET-UP STEPS
+      </div>
+      <main class="page" data-v-4f5abb4a="">
+        <div class="theme-default-content content__default" data-v-4f5abb4a="">
+          <div
+            class="custom-block callout"
+            style="font-size: 0.75em; width: 75%; margin: 1em;"
+          >
+            <p>
+              Code repo for this demo
+              <a
+                href="https://github.com/js-ipfs/examples/browser-ipns-publish/"
+                >on Github</a
+              >
+            </p>
+            <p>
+              The idea is to publish from js-ipfs so you control your own
+              private keys, but publish to go-ipfs to benefit from the DHT.
+              Since the DHT in js-ipfs isn't working yet, we need to use PubSub
+              and have a go-ipfs node subscribed to that PubSub to get our IPNS
+              record onto the DHT. In order to use PubSub between these two
+              nodes, you'll need a websocket to connect them.
+            </p>
+            <div>
+              To make this demo work, you're going to need:
+              <ul>
+                <li style="list-style-type: none;">
+                  <b>1. Access to a go-ipfs node and it's API</b>, a-la
+                  <pre>/dns4/domain.com/tcp/5001</pre>
+                </li>
+                <li>
+                  This is how the demo talks to the server, to ensure things
+                  like:
+                </li>
+                <ul>
+                  <li>
+                    A) pubsub is enabled, { EXPERIMENTAL: { ipnsPubsub: true } }
+                    and --enable-pubsub-experiment
+                  </li>
+                  <li>
+                    B) go-ipfs is connected to the js-ipfs node in the browser,
+                    via node.swarm.peers(),
+                  </li>
+                  <li>
+                    C) the pubsub messages are getting through to the go node,
+                    via node.pubsub.subscribe().
+                  </li>
+                </ul>
+              </ul>
+              <ul>
+                <li style="list-style-type: none;">
+                  <b>2. Access to a go-ipfs Websocket port</b>, a-la
+                  <pre>/dns4/domain.com/tcp/4003/wss/p2p/QmTheDomainPeerId</pre>
+                </li>
+                <li>
+                  Since we need PubSub for IPNS to reach the go-IPFS node (and
+                  further replicate through the go-DHT network) we need to
+                  connect our pubsub enabled JS-IPFS node in the browser to our
+                  go-IPFS node on the server. The way we connect is via
+                  Websocket. See
+                  <a
+                    href="https://github.com/ipfs/js-ipfs/tree/master/packages/ipfs-http-client/examples/browser-pubsub"
+                    >this example</a
+                  >
+                  for reference.
+                </li>
+              </ul>
+              <p>
+                Once we can talk to go-IPFS and we're connected via Websocket,
+                then we can publish in our browser node, have the pubsub push it
+                to the go-IPFS server, and then check with the server that it's
+                confirmed as published. Once it's on the go-IPFS node it should
+                replicate throughout the rest of the DHT amongst the go-Nodes.
+              </p>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+    <div class="ph3 mb3">
+      <div class="fw2 tracked ttu f6 teal-muted mb2">
+        1. Connect to Go-IPFS via API MultiAddress
+      </div>
+      <input
+        id="api-url"
+        class="dib w-50 ph1 pv2 monospace input-reset ba b--black-20 border-box"
+        placeholder="/dns4/yourdomain.com/tcp/5001"
+        disabled="disabled"
+      />
+      <button
+        id="node-connect"
+        class="dib ph3 pv2 input-reset ba b--black-20 border-box"
+        disabled="disabled"
+      >
+        Connect
+      </button>
+    </div>
+    <div class="ph3 mb3">
+      <div class="fw2 tracked ttu f6 teal-muted mb2">
+        2. Connect to Go-IPFS via Websocket MultiAddress (for PubSub to work)
+      </div>
+      <input
+        id="peer-addr"
+        class="dib w-50 ph1 pv2 monospace input-reset ba b--black-20 border-box"
+        placeholder="/dns4/yourdomain.com/tcp/4003/wss/p2p/QmTheirServerPeerId"
+        disabled="disabled"
+      />
+      <button
+        id="peer-connect"
+        class="dib ph3 pv2 input-reset ba b--black-20 border-box"
+        disabled="disabled"
+      >
+        Connect
+      </button>
+    </div>
+
+    <div class="ph3 mb3">
+      <div class="fw2 tracked ttu f6 teal-muted mb2">
+        3. Choose a key:
+      </div>
+      <form>
+        <ul style="list-style-type: none;">
+          <li>
+            <input type="radio" id="male" name="keyName" value="self" checked />
+            <label for="male"
+              >Self (the
+              <a
+                href="https://github.com/ipfs/js-ipfs/blob/master/docs/core-api/KEY.md#ipfskeylistoptions"
+                target="_blank"
+                >PeerId of the runing node</a
+              >)</label
+            ><br />
+          </li>
+          <li>
+            <input type="radio" id="female" name="keyName" value="custom-key" disabled="disabled" />
+            <label for="female"
+              >Custom Key (<a
+                href="https://github.com/ipfs/js-ipfs/blob/master/docs/core-api/KEY.md#ipfskeyimportname-pem-password-options"
+                target="_blank"
+                >imported</a
+              >
+              onto the keychain) [waiting for <a href="https://github.com/ipfs/go-ipfs/issues/6360">#6360</a> to work]</label
+            ><br />
+          </li>
+        </ul>
+      </form>
+    </div>
+    <div class="ph3 mb3">
+      <div class="fw2 tracked ttu f6 teal-muted mb2">
+        4. IPFS hash to publish
+      </div>
+      <input
+        id="topic"
+        class="dib w-50 ph1 pv2 monospace input-reset ba b--black-20 border-box"
+        disabled="disabled"
+      />
+      <button
+        id="publish"
+        class="dib ph3 pv2 input-reset ba b--black-20 border-box"
+        disabled="disabled"
+      >
+        Publish to IPNS
+      </button>
+    </div>
+
+    <div class="ph3 mb3">
+      <div class="fw2 tracked ttu f6 teal-muted mb2">Browser Console</div>
+      <div
+        id="console"
+        class="f7 db w-100 ph1 pv2 monospace input-reset ba b--black-20 border-box overflow-scroll"
+        style="height: 300px;"
+      ></div>
+    </div>
+    <div class="ph3 mb3">
+      <div class="fw2 tracked ttu f6 teal-muted mb2">Server Console</div>
+      <div
+        id="server-console"
+        class="f7 db w-100 ph1 pv2 monospace input-reset ba b--black-20 border-box overflow-scroll"
+        style="height: 300px;"
+      ></div>
+    </div>
+    <script src="index.js"></script>
+  </body>
+</html>