├── .gitignore
├── .travis.yml
├── README.md
├── dist.js
├── index.html
├── index.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | .DS_Store
4 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | cache:
3 | directories:
4 | - node_modules
5 | notifications:
6 | email: false
7 | node_js:
8 | - '8'
9 | before_script:
10 | - npm prune
11 | after_success:
12 | - npm run semantic-release
13 | branches:
14 | except:
15 | - /^v\d+\.\d+\.\d+$/
16 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # IPFS Elements
2 |
3 | HTML elements you can use to display content from IPFS.
4 |
5 |
6 |
7 | 
8 |
9 |
10 |
11 | Usage:
12 |
13 | ```html
14 |
15 |
16 |
19 |
20 |
21 | ```
22 |
--------------------------------------------------------------------------------
/dist.js:
--------------------------------------------------------------------------------
1 | /* globals CustomEvent */
2 | const loadjs = require('load-js')
3 |
4 | window.addEventListener('WebComponentsReady', () => {
5 | let opts = require('./')
6 | let event = new CustomEvent('IPFSReady', opts)
7 | window.dispatchEvent(event)
8 | })
9 | const polyfill = 'https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.12/webcomponents-loader.js'
10 | loadjs([{async: true, url: polyfill}])
11 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | IPFS TEST
7 |
12 |
13 |
14 |
15 | File
16 |
21 |
22 | Text
23 |
27 |
28 | Image
29 |
32 |
33 | Directory
34 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const ZComponent = require('zcomponent')
2 | const api = require('ipfs-api')
3 | const render = require('render-media')
4 | const through2 = require('through2')
5 | // const IPFS = require('ipfs')
6 |
7 | class IPFSElement extends ZComponent {
8 | set src (value) {
9 | this.render(value)
10 | }
11 | set api (value) {
12 | if (this._ipfs) throw new Error('IPFS already set.')
13 | this._ipfs = api(value)
14 | }
15 | get ipfs () {
16 | return new Promise(resolve => {
17 | if (!this._ipfs) {
18 | this._ipfs = this._getIPFS()
19 | this._ipfs.on('ready', () => resolve(this._ipfs))
20 | return
21 | }
22 | resolve(this._ipfs)
23 | })
24 | }
25 | _getIPFS () {
26 | throw new Error('Not implemented.')
27 | // return new IPFS()
28 | }
29 | append (file) {
30 | render.append(file, this)
31 | }
32 | }
33 |
34 | class IPFSDirectory extends IPFSElement {
35 | async render (src) {
36 | let ipfs = await this.ipfs
37 | let list = await ipfs.ls(src)
38 | list.Objects[0].Links.filter(f => f.Type === 2)
39 | .forEach(file => {
40 | let name = src + '/' + file.Name
41 | let createReadStream = opts => {
42 | if (!opts) opts = {}
43 | // let offset = opts.start
44 | // let count = opts.end - opts.start
45 | let stream = through2()
46 | ipfs.files.cat(name).then(_stream => {
47 | _stream.pipe(stream)
48 | })
49 | return stream
50 | }
51 | this.append({name, createReadStream})
52 | })
53 | }
54 | }
55 |
56 | class IPFSFile extends IPFSElement {
57 | async render (src) {
58 | let ipfs = await this.ipfs
59 | let name = this.getAttribute('name')
60 | if (!name) throw new Error('Missing required name attribute.')
61 | let createReadStream = opts => {
62 | if (!opts) opts = {}
63 | // let offset = opts.start
64 | // let count = opts.end - opts.start
65 | // TODO: handle offsets
66 | let stream = through2()
67 | console.log(src)
68 | ipfs.files.cat(src).then(_stream => {
69 | _stream.pipe(stream)
70 | })
71 | return stream
72 | }
73 | this.append({name, createReadStream})
74 | }
75 | }
76 |
77 | class IPFSImage extends IPFSFile {
78 | render (src) {
79 | this.setAttribute('name', 'file.png')
80 | return super.render(src)
81 | }
82 | }
83 | class IPFSText extends IPFSFile {
84 | render (src) {
85 | this.setAttribute('name', 'file.txt')
86 | return super.render(src)
87 | }
88 | }
89 |
90 | window.customElements.define('ipfs-dir', IPFSDirectory)
91 | window.customElements.define('ipfs-file', IPFSFile)
92 | window.customElements.define('ipfs-img', IPFSImage)
93 | window.customElements.define('ipfs-txt', IPFSText)
94 |
95 | exports.IPFSDirectory = IPFSDirectory
96 | exports.IPFSFile = IPFSFile
97 | exports.IPFSImage = IPFSImage
98 | exports.IPFSText = IPFSText
99 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ipfs-elements",
3 | "version": "0.0.0-development",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "commit": "git-cz",
8 | "test": "standard",
9 | "start": "budo dist.js:bundle.js",
10 | "precommit": "npm test",
11 | "prepush": "npm test",
12 | "prepublishOnly": "mkdir -p dist && browserify dist.js > dist/ipfs-elements.js && cat dist/ipfs-elements.js | minify > dist/ipfs-elements.min.js",
13 | "commitmsg": "validate-commit-msg",
14 | "semantic-release": "semantic-release pre && npm publish && semantic-release post"
15 | },
16 | "standard": {
17 | "ignore": [
18 | "dist"
19 | ]
20 | },
21 | "config": {
22 | "commitizen": {
23 | "path": "./node_modules/cz-conventional-changelog"
24 | }
25 | },
26 | "keywords": [],
27 | "author": "Mikeal Rogers (http://www.mikealrogers.com)",
28 | "license": "Apache-2.0",
29 | "devDependencies": {
30 | "babel-minify": "^0.2.0",
31 | "browserify": "^14.4.0",
32 | "budo": "^10.0.4",
33 | "cz-conventional-changelog": "^2.0.0",
34 | "husky": "^0.14.3",
35 | "load-js": "^2.0.0",
36 | "standard": "^10.0.3",
37 | "semantic-release": "^8.0.3"
38 | },
39 | "dependencies": {
40 | "ipfs-api": "^14.3.5",
41 | "render-media": "^2.10.0",
42 | "through2": "^2.0.3",
43 | "zcomponent": "^1.0.4"
44 | },
45 | "repository": {
46 | "type": "git",
47 | "url": "https://github.com/mikeal/ipfs-elements.git"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------