Repository: noffle/hyperpad
Branch: master
Commit: b6a46b83c064
Files: 6
Total size: 9.7 KB

Directory structure:
gitextract_3sukyqe9/

├── .gitignore
├── README.md
├── index.html
├── index.js
├── package.json
└── style.css

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
node_modules
.*.swp
bundle.js




================================================
FILE: README.md
================================================
# hyperpad

> A peer-to-peer collaborative text editor for humans and communities.

## What is it?

Hyperpad is a free, open source, peer-to-peer text editor for people and their
communities. Authors control who gets access, and data is hosted by the peers
who are interested in it.

## Current Status

I've paused work on the web client in favour of building out an Electron-based
native client, [hyperpad-desktop](https://github.com/noffle/hyperpad-desktop).
This lets me dodge some difficult problems around web tech (indexed-db
performance; webrtc) and focus on making the core
[hyper-string](https://github.com/noffle/hyper-string) primitive robust and
durable.

## Why another collaborative editor?

Some of the most popular collaborative document editors today include [Google
Docs](https://www.google.com/docs/about/) and [Etherpad](http://etherpad.org/).

Google Docs gets the fundamental piece right: real-time text editing. However,
all of your data is stored by and readable by Google, Inc. It is closed source
proprietary software.

Etherpad takes this a step further in multiple directions: it is [open
source](https://github.com/ether/etherpad-lite), and can be deployed by anyone
on any server. This lets any individual or group run etherpad and keep ownership
and privacy to their data.

Etherpad is most of the way there, but Hyperpad goes the rest of the way in two
crucial aspects:

### 1. No servers required

In peer-to-peer networks, all users are equal.

Nobody needs the monetary resources and technical know-how to run a server.

Unlike centralized services, you own each pad you create. Turn on encryption,
and your data becomes unreadable to anyone but those you grant access to. There
are no service providers to go out of business and lose your data.

Everything is client-side HTML and Javascript: you can just save the Hyperpad
website and run it locally on your computer, and it will function just fine!

### 2. Works great offline

Not everybody in the world is online. Among those who are, many do not have
consistent, broadband connections. People-respecting software must work
excellently offline; no exceptions.

Forgetting this is the *The Silicon Valley Privilege* (TODO: link to article).

Hyperpad uses an *eventually consistent* data structure called
[hyperlog](https://github.com/mafintosh/hyperlog), which operates happily
offline and will sync with other users whenever a network connection is
available.

## How does it work?

Hyperpad relies on the browser itself for storing documents, and powerful
peer-to-peer primitives like
[WebRTC](https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC) and
[hyperlog](https://github.com/mafintosh/hyperlog) to organize and transfer
documents to those with access.

The act of having a document open in your browser immediately lets a user act
as a host for that document's data, sharing it in real-time with others with
others. In the case that a user is offline, they can still freely make edits
locally, which will propagate to others storing the document when they
re-establish a network connection.

Hyperpad is built in a modular fashion atop a set of do-one-thing-well modules:

- [hyper-textarea](https://github.com/noffle/hyper-textarea): back a textarea
  with a hyper-string for conflict-free p2p replication
- [hyper-string](https://github.com/noffle/hyper-string): a conflict-free p2p
  string data structure
- [textarea-op-stream](https://github.com/noffle/textarea-op-stream): readable
  stream of a textarea's inserts and deletes
- lots of great modules from [mafintosh](https://github.com/mafintosh/):
  [hyperlog](https://github.com/mafintosh/hyperlog),
  [signalhub](https://github.com/mafintosh/signalhub), and others!

## Coming Soon(tm)

- [hyperpad-desktop](https://github.com/noffle/hyperpad-desktop)
- ~Faster operations (batching in the `hyper-string` layer)~
- Encryption (with separate read/write privileges)
- Secure app delivery (maybe [hyperboot](https://github.com/substack/hyperboot))

## License

[ISC](https://en.wikipedia.org/wiki/ISC_license)


================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>hyperpad</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="wrap">
    <h1 id="title">Initializing..</h1>
    <input id="new-pad" type="button" value="New Pad" onclick="onNewPad()"/>
    <div id="hint">Share this URL to let others edit this pad!</div>
    <textarea id="pad" placeholder="A shining, brand new document."></textarea>
    <div class="logo">hyper<span class="logo2">PAD</span></div>
  </div>
  <script src="bundle.js"></script>
</body>
</html>


================================================
FILE: index.js
================================================
var swarm = require('webrtc-swarm')
var signalhub = require('signalhub')
var hyperize = require('hyper-textarea')
var hstring = require('hyper-string')
var memdown = require('memdown')
var down = require('level-js')
var levelup = require('levelup')
var query = require('query-string')
var debug = console.log//require('debug')('hyperpad')
var eos = require('end-of-stream')
var hyperlog = require('hyperlog')

var ta = document.getElementById('pad')

onNewPad = function () {
  window.open(window.location.href.substring(0, window.location.href.indexOf('?')))
}

var q = query.parse(location.search)
var doc = 'Untitled_' + (''+Math.random()).substring(2, 25)
if (q.doc) {
  doc = q.doc
} else {
  window.location.href += '?doc=' + doc
}

// var string = hstring(levelup('hyperpad-'+doc, { db: down }))
// var string = hstring(levelup('hyperpad-'+doc, { db: memdown }))
var indexDb = levelup('hyperpad-'+doc, { db: down })
var string = hstring(indexDb)
var storageLog = hyperlog(indexDb, string.log.valueEncoding)

var r = storageLog.replicate({ live: true })
var s = string.log.replicate({ live: true })
r.pipe(s).pipe(r)

r.on('end', function () {
  console.log('replication /w indexeddb log ended!')
})
r.on('error', function (err) {
  console.log('replication /w indexeddb log ended: ' + err)
})

hyperize(ta, string)

document.getElementById('title').innerHTML = doc

var hub = signalhub('hyperpad-' + doc, [
  'http://eight45.net:9400',
  // 'http://localhost:2500'
  // 'https://signalhub.mafintosh.com'
])

var rtcConfig = {
  "iceServers": [
    {
      "urls": "stun:23.21.150.121"
    },
    {
      "username": "a03c3482a5ac94f85f98bf6478c7b779ed1c45756798f5246e870741ef0cda04",
      "credential": "EIveHo0aA0i8WuCepOoWNGopB4LYxI72013GBv35ZGA=",
      "urls": "turn:global.turn.twilio.com:3478?transport=udp"
    },
    {
      "username": "a03c3482a5ac94f85f98bf6478c7b779ed1c45756798f5246e870741ef0cda04",
      "credential": "EIveHo0aA0i8WuCepOoWNGopB4LYxI72013GBv35ZGA=",
      "urls": "turn:global.turn.twilio.com:3478?transport=tcp"
    },
    {
      "username": "a03c3482a5ac94f85f98bf6478c7b779ed1c45756798f5246e870741ef0cda04",
      "credential": "EIveHo0aA0i8WuCepOoWNGopB4LYxI72013GBv35ZGA=",
      "urls": "turn:global.turn.twilio.com:443?transport=tcp"
    }
  ]
}

var sw = swarm(hub, {
  config: rtcConfig
})
sw.on('peer', function (peer, id) {
  debug('replicating to a new peer:', id)

  var r = string.createReplicationStream({ live: true })
  eos(r, end)
  eos(peer, end)
  r.pipe(peer).pipe(r)

  function end (err) {
    debug('replication stream ended:', err)
  }
})

sw.on('disconnect', function (peer, id) {
  debug('disconnected from a peer:', id)
})

sw.on('close', function () {
  debug('signalhub connection lost')
})


================================================
FILE: package.json
================================================
{
  "name": "hyperpad",
  "description": "p2p collaborative text editor",
  "version": "0.0.10",
  "author": "Stephen Whitmore <stephen.whitmore@gmail.com>",
  "repository": {
    "url": "git://github.com/noffle/hyperpad.git"
  },
  "main": "index.js",
  "scripts": {
    "start": "browserify index.js > bundle.js && ecstatic -p 7000"
  },
  "dependencies": {
    "debug": "^2.2.0",
    "end-of-stream": "^1.1.0",
    "hyper-string": "^2.0.1",
    "hyper-textarea": "^1.0.0",
    "hyperlog": "^4.12.1",
    "level-js": "^2.2.4",
    "levelup": "^1.3.2",
    "memdown": "^1.2.4",
    "query-string": "^4.2.2",
    "signalhub": "^4.7.4",
    "webrtc-swarm": "^2.6.1"
  },
  "devDependencies": {
    "browserify": "^13.1.1",
    "ecstatic": "^3.1.1"
  },
  "license": "ISC"
}


================================================
FILE: style.css
================================================
html {
  background: #fafafa;
  font-family: -apple-system, BlinkMacSystemFont, /* MacOS and iOS */
               'avenir next', avenir, /* MacOS and iOS */
               'Segoe UI', /* Windows */
               'lucida grande', /* Older MacOS */
               'helvetica neue', helvetica, /* Older MacOS */
               'Fira Sans', /* Firefox OS */
               roboto, noto, /* Google stuff */
               'Droid Sans', /* Old Google stuff */
               cantarell, oxygen, ubuntu, /* Linux stuff */
               'franklin gothic medium', 'century gothic', /* Windows stuff */
               'Liberation Sans', /* Linux */
               sans-serif; /* Everything else */
  font-size: 16px;
}
html, body {
  margin: 0;
  padding: 0;
}
#wrap {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 5px 10px;
  position: relative;
}
#hint {
  font-size: 0.85em;
  margin-bottom: 5px;
  font-style: italic;
  text-align: right;
}
.logo {
  color: #aaa;
  margin-top: 5px;
  text-align: right;
}
.logo2 {
  font-weight: 900;
}
#title {
  font-weight: 300;
  margin: 0;
}
#new-pad {
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 4px;
  color: #444;
  cursor: pointer;
  font-size: 13px;
  padding: .25em .75em .3em;
  position: absolute;
  right: 10px;
  top: 10px;
}
#new-pad:hover,
#new-pad:active,
#new-pad:focus {
  background: #eee;
  border-color: #777;
  color: #222;
}
#pad {
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
  font-size: 16px;
  flex-grow: 1;
  outline: none;
  padding: 1em;
  resize: none;
}
#pad:focus {
  border-color: #aaa;
  color: #111;
}