From a79b73e112ddfe3e1c9fda15bc3d86908ac3f74b Mon Sep 17 00:00:00 2001
From: Dan <dan@energysavvy.com>
Date: Sat, 9 Dec 2017 23:06:25 -0800
Subject: [PATCH] Got basic IPFS file contents load and rendering working.

---
 .gitignore   |  3 ++-
 index.html   | 28 +++--------------------
 package.json |  2 +-
 src/index.js | 63 +++++++++++-----------------------------------------
 4 files changed, 19 insertions(+), 77 deletions(-)
diff --git a/.gitignore b/.gitignore
index 802ddd2..938365e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+dist
 node_modules
 npm-debug.log
-dist
+package-lock.json
diff --git a/index.html b/index.html
index 6b10fae..d2c7372 100644
--- a/index.html
+++ b/index.html
@@ -1,31 +1,9 @@
 <html>
   <head>
-    <title>Sample App</title>
+    <title>IPFS JavaScript gateway</title>
+    <style type="text/css">body {margin: 0}</style>
   </head>
   <body>
-    <script>
-        // From https://github.com/LZMA-JS/LZMA-JS (lzma-d.js)
-        /*var e=function(){"use ...*/
-
-        // Data portion made with: webpack && cat dist/bundle.js | lzma | base64 -w 0
-        // IDEA: Load this from a CDN (unpkg.com?), and only resort to the local copy if the CDN copy doesn't load.
-        var compressed_javascript = "data:application/octet-stream;base64,XQAAgAD..."
-        document.body.insertAdjacentHTML('beforeend', new Date() + 'start<br />');
-
-        fetch(compressed_javascript).then(response => {
-            document.body.insertAdjacentHTML('beforeend', new Date() + 'decompressed<br />');
-            compressed_javascript = null
-            return response.arrayBuffer()
-        }).then(buffer => {
-            LZMA.decompress(new Uint8Array(buffer), function(result, error) {
-                document.body.insertAdjacentHTML('beforeend', new Date() + 'starting eval<br />');
-                buffer = null
-                eval(result)
-            })
-        })
-
-        // For conversion of this file to data URI, run: cat index.html | python -c "import urllib, sys; print urllib.quote(sys.stdin.read())"
-        // Then prepend with: "data:text/html;charset=utf-8,"
-    </script>
+    <script type="text/javascript" src="/dist/bundle.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
index 97f8e16..d182772 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,6 @@
     "webpack-dev-server": "^2.4.5"
   },
   "dependencies": {
-    "ipfs": "file:../../"
+    "ipfs": "0.27.1"
   }
 }
diff --git a/src/index.js b/src/index.js
index 5c70989..f103117 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,65 +1,28 @@
 'use strict'
 
 const IPFS = require('ipfs')
-const Repo = require('ipfs-repo')
-const LevelStore = require('datastore-level')
-
-function MemoryLevelStore() {
-    return new LevelStore('/memory', {db: require('memdown')})
-}
-MemoryLevelStore.prototype = new LevelStore('/memory', {db: require('memdown')})
-MemoryLevelStore.prototype.constructor = MemoryLevelStore
-
-const stringToUse = 'Hello world from self-contained, self-hosted js-ipfs!!!'
 
 function App() {
     let node
 
     create()
 
-    function create () {
-      // Create the IPFS node instance
+    function create() {
+        node = new IPFS()
 
-      var repo_name = String(Math.random() + Date.now())
-      var storage_backends = {
-        root: MemoryLevelStore,
-        blocks: MemoryLevelStore,
-        datastore: MemoryLevelStore,
-      }
+        node.on('ready', () => {
+            console.log('IPFS node is ready')
+            console.log('loading IPFS content for ' + window.location.pathname)
 
-      node = new IPFS({ repo: new Repo(repo_name, {storageBackends: storage_backends}) })
-
-      node.once('ready', () => {
-        console.log('IPFS node is ready')
-        ops()
-      })
-    }
-
-    function ops () {
-      node.id((err, res) => {
-          if (err) {
-              throw err
-          }
-
-          document.body.insertAdjacentHTML('beforeend',
-              "<h1>Everything is working!</h1>" +
-              "<p>Your ID is <strong>" + res.id + "</strong></p>" +
-              "<p>Your IPFS version is <strong>" + res.agentVersion + "</strong></p>" +
-              "<p>Your IPFS protocol version is <strong>" + res.protocolVersion + "</strong></p>"
-          )
-      })
-
-      node.files.add([Buffer.from(stringToUse)], (err, filesAdded) => {
-        if (err) { console.log("ERROR"); throw err }
-
-        const hash = filesAdded[0].hash
-        document.body.insertAdjacentHTML('beforeend', "<hr /><div>Added a file!<br /><a href=\"https://gateway.ipfs.io/ipfs/" + hash + "\">" + hash + "</a></div>")
-
-        node.files.cat(hash, (err, data) => {
-          if (err) { console.log("ERROR 2"); throw err }
-          document.body.insertAdjacentHTML('beforeend', "<p>Contents of this file: <br />" + data + "</p>")
+            // Load the page contents for the IPFS hash.
+            node.files.cat(window.location.pathname, (err, file) => {
+                if (err) { throw err }
+                var iframe = document.createElement('iframe')
+                iframe.style = 'width: 100%; height: 100%; border: 0; overflow: hidden'
+                iframe.src = URL.createObjectURL(new Blob([file]))
+                document.body.appendChild(iframe)
+            })
         })
-      })
     }
 }
 
