Browse Source

Got basic IPFS file contents load and rendering working.

master
Dan 1 year ago
parent
commit
a79b73e112
4 changed files with 21 additions and 79 deletions
  1. 2
    1
      .gitignore
  2. 3
    25
      index.html
  3. 1
    1
      package.json
  4. 15
    52
      src/index.js

+ 2
- 1
.gitignore View File

@@ -1,3 +1,4 @@
1
+dist
1 2
 node_modules
2 3
 npm-debug.log
3
-dist
4
+package-lock.json

+ 3
- 25
index.html View File

@@ -1,31 +1,9 @@
1 1
 <html>
2 2
   <head>
3
-    <title>Sample App</title>
3
+    <title>IPFS JavaScript gateway</title>
4
+    <style type="text/css">body {margin: 0}</style>
4 5
   </head>
5 6
   <body>
6
-    <script>
7
-        // From https://github.com/LZMA-JS/LZMA-JS (lzma-d.js)
8
-        /*var e=function(){"use ...*/
9
-
10
-        // Data portion made with: webpack && cat dist/bundle.js | lzma | base64 -w 0
11
-        // IDEA: Load this from a CDN (unpkg.com?), and only resort to the local copy if the CDN copy doesn't load.
12
-        var compressed_javascript = "data:application/octet-stream;base64,XQAAgAD..."
13
-        document.body.insertAdjacentHTML('beforeend', new Date() + 'start<br />');
14
-
15
-        fetch(compressed_javascript).then(response => {
16
-            document.body.insertAdjacentHTML('beforeend', new Date() + 'decompressed<br />');
17
-            compressed_javascript = null
18
-            return response.arrayBuffer()
19
-        }).then(buffer => {
20
-            LZMA.decompress(new Uint8Array(buffer), function(result, error) {
21
-                document.body.insertAdjacentHTML('beforeend', new Date() + 'starting eval<br />');
22
-                buffer = null
23
-                eval(result)
24
-            })
25
-        })
26
-
27
-        // For conversion of this file to data URI, run: cat index.html | python -c "import urllib, sys; print urllib.quote(sys.stdin.read())"
28
-        // Then prepend with: "data:text/html;charset=utf-8,"
29
-    </script>
7
+    <script type="text/javascript" src="/dist/bundle.js"></script>
30 8
   </body>
31 9
 </html>

+ 1
- 1
package.json View File

@@ -17,6 +17,6 @@
17 17
     "webpack-dev-server": "^2.4.5"
18 18
   },
19 19
   "dependencies": {
20
-    "ipfs": "file:../../"
20
+    "ipfs": "0.27.1"
21 21
   }
22 22
 }

+ 15
- 52
src/index.js View File

@@ -1,65 +1,28 @@
1 1
 'use strict'
2 2
 
3 3
 const IPFS = require('ipfs')
4
-const Repo = require('ipfs-repo')
5
-const LevelStore = require('datastore-level')
6
-
7
-function MemoryLevelStore() {
8
-    return new LevelStore('/memory', {db: require('memdown')})
9
-}
10
-MemoryLevelStore.prototype = new LevelStore('/memory', {db: require('memdown')})
11
-MemoryLevelStore.prototype.constructor = MemoryLevelStore
12
-
13
-const stringToUse = 'Hello world from self-contained, self-hosted js-ipfs!!!'
14 4
 
15 5
 function App() {
16 6
     let node
17 7
 
18 8
     create()
19 9
 
20
-    function create () {
21
-      // Create the IPFS node instance
22
-
23
-      var repo_name = String(Math.random() + Date.now())
24
-      var storage_backends = {
25
-        root: MemoryLevelStore,
26
-        blocks: MemoryLevelStore,
27
-        datastore: MemoryLevelStore,
28
-      }
29
-
30
-      node = new IPFS({ repo: new Repo(repo_name, {storageBackends: storage_backends}) })
31
-
32
-      node.once('ready', () => {
33
-        console.log('IPFS node is ready')
34
-        ops()
35
-      })
36
-    }
37
-
38
-    function ops () {
39
-      node.id((err, res) => {
40
-          if (err) {
41
-              throw err
42
-          }
43
-
44
-          document.body.insertAdjacentHTML('beforeend',
45
-              "<h1>Everything is working!</h1>" +
46
-              "<p>Your ID is <strong>" + res.id + "</strong></p>" +
47
-              "<p>Your IPFS version is <strong>" + res.agentVersion + "</strong></p>" +
48
-              "<p>Your IPFS protocol version is <strong>" + res.protocolVersion + "</strong></p>"
49
-          )
50
-      })
51
-
52
-      node.files.add([Buffer.from(stringToUse)], (err, filesAdded) => {
53
-        if (err) { console.log("ERROR"); throw err }
54
-
55
-        const hash = filesAdded[0].hash
56
-        document.body.insertAdjacentHTML('beforeend', "<hr /><div>Added a file!<br /><a href=\"https://gateway.ipfs.io/ipfs/" + hash + "\">" + hash + "</a></div>")
57
-
58
-        node.files.cat(hash, (err, data) => {
59
-          if (err) { console.log("ERROR 2"); throw err }
60
-          document.body.insertAdjacentHTML('beforeend', "<p>Contents of this file: <br />" + data + "</p>")
10
+    function create() {
11
+        node = new IPFS()
12
+
13
+        node.on('ready', () => {
14
+            console.log('IPFS node is ready')
15
+            console.log('loading IPFS content for ' + window.location.pathname)
16
+
17
+            // Load the page contents for the IPFS hash.
18
+            node.files.cat(window.location.pathname, (err, file) => {
19
+                if (err) { throw err }
20
+                var iframe = document.createElement('iframe')
21
+                iframe.style = 'width: 100%; height: 100%; border: 0; overflow: hidden'
22
+                iframe.src = URL.createObjectURL(new Blob([file]))
23
+                document.body.appendChild(iframe)
24
+            })
61 25
         })
62
-      })
63 26
     }
64 27
 }
65 28
 

Loading…
Cancel
Save