Skip to content
This repository has been archived by the owner on Feb 12, 2024. It is now read-only.

Commit

Permalink
docs(example: transfer-files): Improve the UI
Browse files Browse the repository at this point in the history
  • Loading branch information
victorb authored and daviddias committed Jan 30, 2017
1 parent 9d318d0 commit e88a73a
Show file tree
Hide file tree
Showing 76 changed files with 833 additions and 1,011 deletions.
1 change: 0 additions & 1 deletion .aegir.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,3 @@ module.exports = {
}]
}
}

24 changes: 12 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
</a>
<br>
<a href="https://waffle.io/ipfs/js-ipfs">
<img src="https://img.shields.io/badge/pm-waffle-yellow.svg?style=flat-square" />
<img src="https://img.shields.io/badge/pm-waffle-blue.svg?style=flat-square" />
</a>
<a href="https://github.com/ipfs/interface-ipfs-core">
<img src="https://img.shields.io/badge/interface--ipfs--core-API%20Docs-blue.svg">
Expand Down Expand Up @@ -137,7 +137,7 @@ The CLI is available by using the command `jsipfs` in your terminal. This is ali

### Use in the browser with browserify, webpack or any bundler

Simply require it as you would do for Node.js, but when transpiling+minifying with your bundler, make sure to swap `zlib` with a full replacement for the browser: `zlib: 'browserify-zlib-next'`. We have submited PR's to browserify and WebPack to make this as part of the standard node libraries that are transpiled, you can follow this development in [browserify](https://github.com/substack/node-browserify/issues/1672), [webpack](https://github.com/webpack/node-libs-browser/issues/51).
Simply require it as you would do for Node.js, but when transpiling+minifying with your bundler, make sure to swap `zlib` with a full replacement for the browser: `zlib: 'browserify-zlib-next'`. We have submitted PR's to browserify and WebPack to make this as part of the standard node libraries that are transpiled, you can follow this development in [browserify](https://github.com/substack/node-browserify/issues/1672), [webpack](https://github.com/webpack/node-libs-browser/issues/51).

You can also find examples of how to do this bundling at: `https://github.com/ipfs/js-ipfs/tree/master/examples`

Expand All @@ -151,18 +151,18 @@ The last published version of the package become [available for download](https:


```html
<!-- loading the minified version -->
<!-- loading the minified version -->
<script src="https://unpkg.com/ipfs/dist/index.min.js"></script>

<!-- loading the human-readable (not minified) version -->
<!-- loading the human-readable (not minified) version -->
<script src="https://unpkg.com/ipfs/dist/index.js"></script>
```

## Usage

### CLI

The `jsipfs` CLI, available when `js-ipfs` is installed globably, follows(should, it is a WIP) the same interface defined by `go-ipfs`, you can always use the `help` command for help menus.
The `jsipfs` CLI, available when `js-ipfs` is installed globally, follows(should, it is a WIP) the same interface defined by `go-ipfs`, you can always use the `help` command for help menus.

```sh
# Install js-ipfs globally
Expand Down Expand Up @@ -285,7 +285,7 @@ Every IPFS instance also exposes the libp2p API at `ipfs.libp2p`. The formal int
## Development
### Clone and install dependnecies
### Clone and install dependencies
```sh
> git clone https://github.com/ipfs/js-ipfs.git
Expand All @@ -297,7 +297,7 @@ Every IPFS instance also exposes the libp2p API at `ipfs.libp2p`. The formal int
```sh
# run all the unit tsts
> npm test
> npm test

# run just IPFS tests in Node.js
> npm run test:unit:node:core
Expand All @@ -319,7 +319,7 @@ Every IPFS instance also exposes the libp2p API at `ipfs.libp2p`. The formal int
```sh
# run all the interop tsts
> npm run test:interop
> npm run test:interop

# run just IPFS interop tests in Node.js using one go-ipfs daemon and one js-ipfs daemon
> npm run test:interop:node
Expand All @@ -332,7 +332,7 @@ Every IPFS instance also exposes the libp2p API at `ipfs.libp2p`. The formal int
```sh
# run all the interop tsts
> npm run test:benchmark
> npm run test:benchmark

# run just IPFS benchmarks in Node.js
> npm run test:benchmark:node
Expand Down Expand Up @@ -373,11 +373,11 @@ Every IPFS instance also exposes the libp2p API at `ipfs.libp2p`. The formal int
> tree src -L 2
src # Main source code folder
├── cli # Implementation of the IPFS CLI
   └── ...
└── ...
├── http-api # The HTTP-API implementation of IPFS as defined by http-api-spec
├── core # IPFS implementation, the core (what gets loaded in browser)
   ├── components # Each of IPFS subcomponent
   └── ...
├── components # Each of IPFS subcomponent
└── ...
└── ...
```
Expand Down
7 changes: 5 additions & 2 deletions examples/basics/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,17 @@

const fs = require('fs')
const os = require('os')
const path = require('path')
const series = require('async/series')
const IPFS = require('../../src/core') // replace this by line below
const IPFS = require('../../src/core')
// replace this by line below if you are using ipfs as a dependency of your
// project
// const IPFS = require('ipfs')

/*
* Create a new IPFS instance, using default repo (fs) on default path (~/.ipfs)
*/
const node = new IPFS(os.tmpDir() + '/' + new Date().toString())
const node = new IPFS(path.join(os.tmpDir() + '/' + new Date().toString()))

const fileToAdd = {
path: 'hello.txt',
Expand Down
2 changes: 1 addition & 1 deletion examples/bundle-browserify/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,4 @@ You should see the following:
## Special note

In order to use js-ipfs in the browser, you need to replace the default `zlib` library by `browserify-zlib-next`, a full implementation of the native `zlib` package, full in Node.js.
See the package.json to learn how to do this and avoid this pitfall. More context on: https://github.com/ipfs/js-ipfs#use-in-the-browser-with-browserify-webpack-or-any-bundler
See the package.json to learn how to do this and avoid this pitfall (see the `browser` key). More context on: https://github.com/ipfs/js-ipfs#use-in-the-browser-with-browserify-webpack-or-any-bundler
1 change: 1 addition & 0 deletions examples/transfer-files/complete/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
js/ipfs.js
248 changes: 248 additions & 0 deletions examples/transfer-files/complete/css/app.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,248 @@
body {
height: 100vh;
font-family: sans-serif;
color: white;
background: linear-gradient(to bottom,#041727 0%,#062b3f 100%);
pointer-events: auto;
}

.dragover-popup {
position: absolute;
top: 10px; right: 10px; bottom: 10px; left: 10px;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
padding-top: 30%;
display: none;
pointer-events: none;
}

.wrapper {
width: 900px;
margin: 0 auto;
/* filter: blur(5px); */
}

.header {
text-align: center;
/* filter: blur(5px); */
}

#filesStatus {
padding: 10px;
}

h1, h2, h3 {
margin: 0px;
}

h1 {
font-size: 2em;
font-weight: 300;
}

h2 {
font-size: 1.25em;
font-weight: 700;
}

h3 {
font-size: 1.0em;
font-weight: 700;
}


.header h1 {
margin-top: 20px;
margin-bottom: 20px;
}

.hidden {
display: none;
}

.visible {
display: inherit;
font-size: 0.8em;
}

.error {
font-style: italic;
color: red;
}

.ipfs {
padding-bottom: 50px;
border-radius: 1px;
box-sizing: border-box;
}

#details {
padding: 10px;
width: 100%;
box-sizing: border-box;
}

ul {
margin: 0px; padding: 0px;
list-style: none;
font-size: 11px;
}

ul li {
margin-top: 10px;
margin-bottom: 10px;
font-size: 9px;
word-wrap: break-word;
}

button {
background-color: rgba(0,0,0,0.2);
color: #6acad1;
border: 2px solid #6acad1;
font-size: 15px;
padding: 10px 25px 10px 25px;
border-radius: 2px;
margin: 5px;
}

.multihash-wrapper input {
width: 80%;
float: left;
height: 40px;
margin-left: 1%;
font-size: 16px;
box-sizing: border-box;
}

.multihash-wrapper button {
width: 17%;
float: left;
height: 40px;
margin: 0px;
margin-left: 1%;
}

.file-list {
display: block;
margin: 10px;
}

.file-list a {
font-size: 16px;
color: white;
display: block;
}

button.connect-peer {
margin: 0px;
margin-top: 2px;
width: 100%;
}

button:hover {
color: white;
border: 2px solid white;
cursor: pointer;
}

.address {
font-family: monospace
}

button:disabled {
opacity: 0.2;
}
input:disabled {
opacity: 0.2;
}
.disabled {
opacity: 0.2;
}

input {
width: 100%;
border: 2px solid #444;
color: black;
padding: 7px;
border-radius: 2px;
font-size: 9px;
}

textarea, input, button {
outline: none;
}

button:focus, input:focus {
outline: 3px solid #6acad1;
}

.picture {
margin-top: 1em;
width: 100%;
background-color: rgba(196, 196, 196, 0.1);
/*padding: 0.25em;*/
/*font-size: 1.2em;*/
}

.settings {
padding: 15px;
}

.left {
box-sizing: border-box;
/* background-color: red; */
}

.right {
/* background-color: green; */
}

.setting-item {
margin-top: 20px;
}

.left, .right {
width: 48%;
float: left;
background-color: rgba(255, 255, 255, 0.05);
box-sizing: border-box;
margin: 1%;
padding: 10px;
}



#files {
padding-top: 10px;
background-color: rgba(255, 255, 255, 0.05);
margin: 1%;
}

.left.centered {
float: none;
margin: 0px auto;
text-align: center;
}

.clear {
clear: both;
}

.note {
position: absolute;
top: 10px;
right: 10px;
font-size: 10px;
font-size: 10px;
}

#peers i {
display: block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 14px;
}

.error {
font-size: 18px;
}
Loading

0 comments on commit e88a73a

Please sign in to comment.