mirror of
https://github.com/amark/gun.git
synced 2025-06-07 14:46:44 +00:00
v0.1.0 release!
This commit is contained in:
Mark Nadal
parent
5e70d858a9
commit
1f4a5237d9
361
index.html
361
index.html
@ -3,12 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||||
<!--
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
|
||||||
<script src="../gun.js"></script>
|
|
||||||
<link id="style" rel="stylesheet" href="https://yandex.st/highlightjs/8.0/styles/sunburst.min.css">
|
|
||||||
<script src="https://yandex.st/highlightjs/8.0/highlight.min.js"></script>
|
|
||||||
<script src="https://dl.dropboxusercontent.com/u/4374976/random/phrase.js"></script>
|
|
||||||
-->
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<style>
|
<style>
|
||||||
@ -31,44 +26,6 @@ html, body {
|
|||||||
.crisp {
|
.crisp {
|
||||||
font-family: 'Oxygen', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
font-family: 'Oxygen', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
}
|
}
|
||||||
pre {
|
|
||||||
background-color: black;
|
|
||||||
border: 1px dashed white;
|
|
||||||
color: white;
|
|
||||||
line-height: 1.5em;
|
|
||||||
padding: 1em;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
background: skyblue;
|
|
||||||
padding: 1em;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
background: transparent;
|
|
||||||
border: 2px dashed grey;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
.step {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.step:target {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.grid {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.unit {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.learn {
|
|
||||||
min-width: 250px;
|
|
||||||
max-width: 400px;
|
|
||||||
width: 30%;
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
.svg {
|
.svg {
|
||||||
background: white url('./web/img/devices.svg') no-repeat 50% 50%;
|
background: white url('./web/img/devices.svg') no-repeat 50% 50%;
|
||||||
height: 40em;
|
height: 40em;
|
||||||
@ -103,16 +60,20 @@ input {
|
|||||||
}
|
}
|
||||||
.fold {
|
.fold {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 800px;
|
|
||||||
min-height: 800px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.behold {
|
||||||
|
margin-top: 8%;
|
||||||
|
padding:0;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
.grid {
|
.grid {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@media (max-width: 760px) {
|
@media (max-width: 760px) {
|
||||||
body {
|
body {
|
||||||
font-siz----e: 10pt;
|
font-size: 8pt;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 1279px) {
|
@media (max-width: 1279px) {
|
||||||
@ -120,20 +81,31 @@ input {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.screen {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.mouse {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 60%;
|
||||||
|
left: -6%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="fold">
|
<div class="fold">
|
||||||
|
|
||||||
<div class="behold" style="overflow: hidden; position: relative; width: 100%; min-height 400px; margin: -200px 0 0; padding:0; top: 40%; text-align: center;">
|
<div class="behold">
|
||||||
|
|
||||||
<div class="graphic grid" style="min-width: 300px; max-width: 600px; height: 400px;
|
<div class="graphic grid" style="min-width: 300px; max-width: 600px; height: 400px; position: relative; margin:0 auto; padding:0;">
|
||||||
position: relative; margin:0 auto; padding:0;">
|
|
||||||
|
|
||||||
<img src="./web/img/server.png" class="server" style="position: absolute; top: 2%; left: 35%; wid-th: 50%;">
|
<img src="./web/img/server.png" class="server" style="position: absolute; top: 2%; left: 35%; wid-th: 50%;">
|
||||||
|
|
||||||
<div class="desktop" style="height: 10em; width: 17em; position: absolute; top: 36%; left: 3%;">
|
<div class="desktop" style="height: 10em; width: 17em; position: absolute; top: 36%; left: 3%;">
|
||||||
<div class="monitor" style="height: 100%; width: 100%; background: #222; padding: .75em; margin-left: -.75em; border-radius: 1em;">
|
<div class="monitor" style="height: 100%; width: 100%; background: #222; padding: .75em; margin-left: -.75em; border-radius: 1em;">
|
||||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||||
|
<img class="mouse" src="./web/img/mouse.png">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stand" style="margin: 1px auto 0px;
|
<div class="stand" style="margin: 1px auto 0px;
|
||||||
@ -218,6 +190,7 @@ border-top: 1em solid FireBrick;">
|
|||||||
|
|
||||||
<span style="color: transparent">Distributed embedded graph database engine. The no pain, no cost, no backend, NoDB database, gun.</span>
|
<span style="color: transparent">Distributed embedded graph database engine. The no pain, no cost, no backend, NoDB database, gun.</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="graphic wide grid" style="min-width: 300px; max-width: 600px; height: 400px;
|
<div class="graphic wide grid" style="min-width: 300px; max-width: 600px; height: 400px;
|
||||||
position: relative; margin:0 auto; padding:0;">
|
position: relative; margin:0 auto; padding:0;">
|
||||||
|
|
||||||
@ -331,37 +304,308 @@ border-top: 1em solid FireBrick;">
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
console.log("hi!1");
|
|
||||||
$(function(){
|
$(function(){
|
||||||
var c = ['dull', 'blue', 'green']
|
var c = ['dull', 'blue', 'green']
|
||||||
, a = 'dull blue red green';
|
, a = 'dull blue red green', n = 0, to;
|
||||||
$(".screen").click(function(){
|
$(".screen").click(function(){
|
||||||
c.push(c.shift());
|
c.push(c.shift());
|
||||||
var to = c[0];
|
to = to || c[0];
|
||||||
$(this).removeClass(a).addClass(to);
|
$(this).removeClass(a).addClass(to);
|
||||||
$('.screen').not(this).each(function(){
|
$('.screen').not(this).each(function(){
|
||||||
var t = $(this);
|
var t = $(this); n++;
|
||||||
setTimeout(function(){
|
setTimeout(function(){
|
||||||
t.removeClass(a).addClass(to);
|
t.removeClass(a).addClass(to);
|
||||||
|
if(!(--n)){ to = null }
|
||||||
}, rand(400,700));
|
}, rand(400,700));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
function rand(min, max) {
|
function rand(min, max) {
|
||||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
$(function(){
|
||||||
|
var mouse = $('.mouse');
|
||||||
|
function show(i){
|
||||||
|
function to(){
|
||||||
|
mouse.animate({top: "60%", left: "55%"}, {
|
||||||
|
duration: 500,
|
||||||
|
specialEasing: {top: 'easeInQuad', left: 'easeOutQuad'},
|
||||||
|
complete: click
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function click(){
|
||||||
|
mouse.delay(230).animate({width: mouse.width() / 2}, {
|
||||||
|
duration: 60,
|
||||||
|
complete: function(){
|
||||||
|
mouse.closest('.screen').trigger('click');
|
||||||
|
mouse.animate({width: mouse.width() * 2}, {
|
||||||
|
duration: 120,
|
||||||
|
complete: fro
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function fro(){
|
||||||
|
mouse.delay(900).animate({top: "87%", left: "110%"}, {
|
||||||
|
duration: 700,
|
||||||
|
specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'},
|
||||||
|
complete: function(){
|
||||||
|
setTimeout(show, 4 * 1000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if(!i && $('.graphic').filter(function() { return $(this).is(":hover"); }).length){
|
||||||
|
setTimeout(show, 2000);
|
||||||
|
} else {
|
||||||
|
to();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
mouse.delay(1200).animate({top: "70%", left: "20%"}, {
|
||||||
|
duration: 400,
|
||||||
|
specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'},
|
||||||
|
complete: function(){ show(true) }
|
||||||
|
});
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="center" style="margin-top: 2%;">
|
<div class="center" style="margin: 2% 0;">
|
||||||
<div class="lean" style="font-size: 400%;">Easiest Database Ever</div>
|
<div class="lean" style="font-size: 400%;">Easiest Database Ever</div>
|
||||||
<div class="lean" style="font-size: 225%;">Sync state in a cinch at a distributed system scale.</div>
|
<div class="lean" style="font-size: 225%;">Sync state in a cinch at a distributed system scale.</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div> <!-- END FOLD -->
|
||||||
<a href="https://github.com/amark/gun" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
|
<a href="https://github.com/amark/gun" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
|
||||||
<!-- END FOLD -->
|
|
||||||
|
<!-- BEGIN TUTORIAL -->
|
||||||
|
<div class="tutorial">
|
||||||
|
<script src="https://gunjs.herokuapp.com/gun.js"></script>
|
||||||
|
<link id="style" rel="stylesheet" href="https://yandex.st/highlightjs/8.0/styles/ir_black.min.css">
|
||||||
|
<script src="https://yandex.st/highlightjs/8.0/highlight.min.js"></script>
|
||||||
|
<style>
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Dosis|Poiret+One|Oxygen);
|
||||||
|
.tutorial {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
he-ight: 100%;
|
||||||
|
font-family: 'Oxygen', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
|
background: #222;
|
||||||
|
color: #eee;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.lean {
|
||||||
|
font-family: 'Poiret One', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
.clean {
|
||||||
|
font-family: 'Dosis', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
.crisp {
|
||||||
|
font-family: 'Oxygen', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
background-color: black;
|
||||||
|
border: 1px dashed white;
|
||||||
|
color: white;
|
||||||
|
line-height: 1.5em;
|
||||||
|
padding: .5em;
|
||||||
|
margin: 0em;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
background: skyblue;
|
||||||
|
padding: 1em;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.grid {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.unit {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.main {
|
||||||
|
min-width: 250px;
|
||||||
|
max-width: 1024px;
|
||||||
|
width: 90%;
|
||||||
|
margin: 0% auto;
|
||||||
|
padding: 2% 5%;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.left { float: left;}
|
||||||
|
.teft { text-align: left; }
|
||||||
|
.middle {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.full {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="main">
|
||||||
|
<div style="font-size: 18pt; margin: 0 0 .75em;">Try it now</div>
|
||||||
|
|
||||||
|
<div class="step show step1">
|
||||||
|
|
||||||
|
<div class="full grid">
|
||||||
|
<div class="middle unit teft">
|
||||||
|
<pre style="max-width: 30.1em; margin: 0 1em 1em 0;">var gun = Gun('https://gunjs.herokuapp.com/gun');
|
||||||
|
gun.set({hello: "world"}).key('<span class="your-key">example/tutorial</span>');</pre>
|
||||||
|
</div>
|
||||||
|
<div class="middle unit teft" style="min-width: 20em; max-width: 28em; margin-bottom: 1em;">
|
||||||
|
<a href="#step2"><button class="left" style="margin-right: 1em;"><big>Run!</big></button></a>
|
||||||
|
In this <b>1 minute</b> tutorial, we will connect to a gun peer, create an object, and sync data in realtime.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="step hide step2">
|
||||||
|
|
||||||
|
<div class="full grid">
|
||||||
|
<div class="middle unit teft">
|
||||||
|
<pre style="max-width: 30.1em; margin: 0 1em 1em 0;">var ref = gun.load('<span class="your-key">example/tutorial</span>');
|
||||||
|
ref.on(function(data){
|
||||||
|
$('body').text(JSON.stringify(data));
|
||||||
|
});</pre>
|
||||||
|
</div>
|
||||||
|
<div class="middle unit teft" style="min-width: 34em; max-width: 28em; margin-bottom: 1em;">
|
||||||
|
<a href="#step3"><button class="left" style="margin-right: 1em; background: MediumSpringGreen;"><big>Next</big></button></a>
|
||||||
|
Congratulations! You just made an object and saved a reference to it.
|
||||||
|
In two tabs, we'll load that key to open a shared reference.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="step hide step3">
|
||||||
|
|
||||||
|
<div class="full grid">
|
||||||
|
<style>
|
||||||
|
.browser {
|
||||||
|
background: white;
|
||||||
|
border-radius: .25em;
|
||||||
|
width: 250px;
|
||||||
|
//height: 300px;
|
||||||
|
color: #222;
|
||||||
|
margin: .5em;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.b-bar {
|
||||||
|
background: #EEE;
|
||||||
|
border-radius: .25em .25em 0 0;
|
||||||
|
}
|
||||||
|
.b-but {
|
||||||
|
float: left;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
.browser a {
|
||||||
|
text-decoration: none;
|
||||||
|
background: white;
|
||||||
|
border-radius: .4em;
|
||||||
|
padding: 0 1em;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
.browser iframe { border: none; }
|
||||||
|
</style>
|
||||||
|
<div class="browser unit teft">
|
||||||
|
<div class="b-bar">
|
||||||
|
<div class="b-but">←</div>
|
||||||
|
<div class="b-but">→</div>
|
||||||
|
<div class="b-but"><small>↻</small></div>
|
||||||
|
<small><small><span>
|
||||||
|
<a href="https://gunjs.herokuapp.com/" target="_blank">https://gunjs.herokuapp.com/</a>
|
||||||
|
</span></small></small>
|
||||||
|
<small class="center" style="position: relative; top: -.14em;">x</small>
|
||||||
|
<span class="center">≡<span>
|
||||||
|
</div>
|
||||||
|
<iframe></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="browser unit teft">
|
||||||
|
<div class="b-bar">
|
||||||
|
<div class="b-but">←</div>
|
||||||
|
<div class="b-but">→</div>
|
||||||
|
<div class="b-but"><small>↻</small></div>
|
||||||
|
<small><small><span>
|
||||||
|
<a href="https://gunjs.herokuapp.com/" target="_blank">https://gunjs.herokuapp.com/</a>
|
||||||
|
</span></small></small>
|
||||||
|
<small class="center" style="position: relative; top: -.14em;">x</small>
|
||||||
|
<span class="center">≡<span>
|
||||||
|
</div>
|
||||||
|
<iframe></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="#step3" onsubmit="return false;">
|
||||||
|
<style>
|
||||||
|
#step3 input {
|
||||||
|
width: 6em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="middle unit teft">
|
||||||
|
<pre style="max-width: 40em; margin: 0 1em 1em 0;">ref.path('<input id="try-path" value="hello">').set("<input id="try-sync" value="sync">");</pre>
|
||||||
|
</div>
|
||||||
|
<div class="middle unit teft" style="min-width: 20em; max-width: 30em; margin-bottom: 1em;">
|
||||||
|
<button type="submit" class="left" style="margin-right: 1em;"><big>Update!</big></button>
|
||||||
|
Let's update the "hello" field with a different value.
|
||||||
|
We can path into any field, and set it directly.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(function(){
|
||||||
|
var gun, key = "random/" + Gun.text.random(9),
|
||||||
|
hili = function(){
|
||||||
|
$("pre").each(function(){
|
||||||
|
hljs.highlightBlock(this);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
$(".your-key").text(key);
|
||||||
|
hili();
|
||||||
|
|
||||||
|
location.hash = 'step1';
|
||||||
|
$(window).on('hashchange', function(){
|
||||||
|
$('.step').removeClass('show').addClass('hide')
|
||||||
|
$(location.hash.replace('#','.')).addClass('show');
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".step1").find('button').on('click', function(e){
|
||||||
|
if(gun){ return }
|
||||||
|
gun = Gun('https://gunjs.herokuapp.com/gun');
|
||||||
|
gun.set({hello: "world"}).key(key);
|
||||||
|
});
|
||||||
|
$(".step2").find('button').on('click', function(e){
|
||||||
|
$(".browser").find("iframe").attr("src", "./web/tabs.html?key=" + key);
|
||||||
|
});
|
||||||
|
$(".step3").find('form').on('submit', function(e){
|
||||||
|
var val = $("#try-sync").val() || null;
|
||||||
|
var path = $("#try-path").val();
|
||||||
|
gun.load(key).path(path).set(val);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- BEGIN TUTORIAL -->
|
||||||
|
|
||||||
<! OLD BLOG POST HERE -->
|
<! OLD BLOG POST HERE -->
|
||||||
|
|
||||||
@ -384,6 +628,7 @@ border-top: 1em solid FireBrick;">
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div id="main">
|
<div id="main">
|
||||||
|
|
||||||
<h3>The blog that started it all...</h3>
|
<h3>The blog that started it all...</h3>
|
||||||
<p>
|
<p>
|
||||||
Gun is a persisted distributed cache, part of a NoDB movement.
|
Gun is a persisted distributed cache, part of a NoDB movement.
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
{ "name": "gun"
|
{ "name": "gun"
|
||||||
, "version": "0.0.9-p"
|
, "version": "0.1.0"
|
||||||
, "author": "Mark Nadal"
|
, "author": "Mark Nadal"
|
||||||
, "description": "Graph engine."
|
, "description": "Graph engine."
|
||||||
, "engines": {
|
, "engines": {
|
||||||
|
|||||||
BIN
web/img/mouse.png
Normal file
BIN
web/img/mouse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 878 B |
737
web/index.html
Normal file
737
web/index.html
Normal file
@ -0,0 +1,737 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<style>
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Dosis|Poiret+One|Oxygen);
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
font-family: 'Oxygen', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.lean {
|
||||||
|
font-family: 'Poiret One', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
.clean {
|
||||||
|
font-family: 'Dosis', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
.crisp {
|
||||||
|
font-family: 'Oxygen', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
.svg {
|
||||||
|
background: white url('./img/devices.svg') no-repeat 50% 50%;
|
||||||
|
height: 40em;
|
||||||
|
}
|
||||||
|
.GUN {
|
||||||
|
background: transparent url('./img/gun.svg') no-repeat 50% 50%;
|
||||||
|
background-size: 60%;
|
||||||
|
}
|
||||||
|
.dull {
|
||||||
|
background-color: #EEE;
|
||||||
|
-webkit-transition: background-color 600ms linear;
|
||||||
|
-moz-transition: background-color 600ms linear;
|
||||||
|
transition: background-color 600ms linear;
|
||||||
|
}
|
||||||
|
.blue {
|
||||||
|
background-color: skyblue;
|
||||||
|
-webkit-transition: background-color 600ms linear;
|
||||||
|
-moz-transition: background-color 600ms linear;
|
||||||
|
transition: background-color 600ms linear;
|
||||||
|
}
|
||||||
|
.red {
|
||||||
|
background-color: red;
|
||||||
|
-webkit-transition: background-color 600ms linear;
|
||||||
|
-moz-transition: background-color 600ms linear;
|
||||||
|
transition: background-color 600ms linear;
|
||||||
|
}
|
||||||
|
.green {
|
||||||
|
background-color: MediumSpringGreen;
|
||||||
|
-webkit-transition: background-color 600ms linear;
|
||||||
|
-moz-transition: background-color 600ms linear;
|
||||||
|
transition: background-color 600ms linear;
|
||||||
|
}
|
||||||
|
.fold {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.behold {
|
||||||
|
margin-top: 8%;
|
||||||
|
padding:0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.grid {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
body {
|
||||||
|
font-size: 8pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 1279px) {
|
||||||
|
.wide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.mouse {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 60%;
|
||||||
|
left: -6%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="fold">
|
||||||
|
|
||||||
|
<div class="behold">
|
||||||
|
|
||||||
|
<div class="graphic grid" style="min-width: 300px; max-width: 600px; height: 400px; position: relative; margin:0 auto; padding:0;">
|
||||||
|
|
||||||
|
<img src="./img/server.png" class="server" style="position: absolute; top: 2%; left: 35%; wid-th: 50%;">
|
||||||
|
|
||||||
|
<div class="desktop" style="height: 10em; width: 17em; position: absolute; top: 36%; left: 3%;">
|
||||||
|
<div class="monitor" style="height: 100%; width: 100%; background: #222; padding: .75em; margin-left: -.75em; border-radius: 1em;">
|
||||||
|
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||||
|
<img class="mouse" src="./img/mouse.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stand" style="margin: 1px auto 0px;
|
||||||
|
border-bottom: 2.75em solid #888;
|
||||||
|
border-left: .5em solid transparent;
|
||||||
|
border-right: .5em solid transparent;
|
||||||
|
height: 0;
|
||||||
|
width: 3.2em;">
|
||||||
|
</div>
|
||||||
|
<div class="stand" style="width: 6em; height: .5em; background: #888; margin: 0px auto"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="laptop" style="height: 7em; width: 12em; position: absolute; top: 60%; left: 48%;">
|
||||||
|
<div class="lid" style="height: 100%; width: 100%; background: #222; padding: .6em; margin-left: -.6em; border-radius: .6em .6em 0em 0em;">
|
||||||
|
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="case" style="height: .75em; width: 140%; margin-left: -20%; background: #999; border-radius: 0em 0em 5em 5em;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="phone" style="height: 3.75em; width: 2.25em; position: absolute; top: 35%; left: 70%;">
|
||||||
|
<div class="case" style="height: 100%; width: 100%; background: #222; padding: .5em .2em; margin-left: -.2em; border-radius: 0.25em;">
|
||||||
|
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow desktop-server" style="width: 52px; height: 52px; border: dashed 0px FireBrick; border-radius: 50px 0 0 0;
|
||||||
|
position: absolute; left: 20%; top: 15%; border-width: 3px 0px 0px 3px;">
|
||||||
|
<div class="rarr" style="position: absolute; top: -.59em; right: -.7em;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: .5em solid transparent;
|
||||||
|
border-left: 1em solid FireBrick;
|
||||||
|
border-bottom: .5em solid transparent;">
|
||||||
|
</div>
|
||||||
|
<div class="darr" style="position: absolute; bottom: -.75em; left: -.59em;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: .5em solid transparent;
|
||||||
|
border-right: .5em solid transparent;
|
||||||
|
border-top: 1em solid FireBrick;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow phone-server" style="width: 26px; height: 52px; border: dashed 0px FireBrick; border-radius: 0 0 50px 0;
|
||||||
|
position: absolute; left: 80%; top: 35%; border-width: 0px 3px 3px 0px;">
|
||||||
|
<div class="uarr" style="position: absolute; top: -.9em; right: -.59em;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: .5em solid transparent;
|
||||||
|
border-right: .5em solid transparent;
|
||||||
|
border-bottom: 1em solid FireBrick;">
|
||||||
|
</div>
|
||||||
|
<div class="larr" style="position: absolute; bottom: -.55em; left: -.59em;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: .5em solid transparent;
|
||||||
|
border-right: 1em solid FireBrick;
|
||||||
|
border-bottom: .5em solid transparent;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow updown laptop-server" style="height: 50px; border: dashed 0px FireBrick; border-radius: 0;
|
||||||
|
position: absolute; left: 60%; top: 40%; border-width: 0px 3px 0px 0px;">
|
||||||
|
<div class="uarr" style="position: absolute; top: -1em; left: -.45em;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: .5em solid transparent;
|
||||||
|
border-right: .5em solid transparent;
|
||||||
|
border-bottom: 1em solid FireBrick;">
|
||||||
|
</div>
|
||||||
|
<div class="darr" style="position: absolute; bottom: -1em; left: -.45em;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: .5em solid transparent;
|
||||||
|
border-right: .5em solid transparent;
|
||||||
|
border-top: 1em solid FireBrick;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span style="color: transparent">Distributed embedded graph database engine. The no pain, no cost, no backend, NoDB database, gun.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="graphic wide grid" style="min-width: 300px; max-width: 600px; height: 400px;
|
||||||
|
position: relative; margin:0 auto; padding:0;">
|
||||||
|
|
||||||
|
<div class="arrow server-server" style="width: 100px; height: 0px; border: dashed 0px FireBrick; border-radius: 0;
|
||||||
|
position: absolute; left: -9%; top: 15%; border-width: 3px 0px 0px 0px;">
|
||||||
|
<div class="rarr" style="position: absolute; top: -.59em; left: -.5em;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: .5em solid transparent;
|
||||||
|
border-right: 1em solid FireBrick;
|
||||||
|
border-bottom: .5em solid transparent;">
|
||||||
|
</div>
|
||||||
|
<div class="larr" style="position: absolute; top: -.59em; right: -.6em;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 1em solid FireBrick;
|
||||||
|
border-bottom: .5em solid transparent;
|
||||||
|
border-top: .5em solid transparent;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="./img/server.png" class="server" style="position: absolute; top: 2%; right: 35%;">
|
||||||
|
|
||||||
|
<div class="desktop" style="height: 10em; width: 17em; position: absolute; top: 36%; right: 3%;">
|
||||||
|
<div class="monitor" style="height: 100%; width: 100%; background: #222; padding: .75em; margin-left: -.75em; border-radius: 1em;">
|
||||||
|
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stand" style="margin: 1px auto 0px;
|
||||||
|
border-bottom: 2.75em solid #888;
|
||||||
|
border-left: .5em solid transparent;
|
||||||
|
border-right: .5em solid transparent;
|
||||||
|
height: 0;
|
||||||
|
width: 3.2em;">
|
||||||
|
</div>
|
||||||
|
<div class="stand" style="width: 6em; height: .5em; background: #888; margin: 0px auto"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="laptop" style="height: 7em; width: 12em; position: absolute; top: 60%; right: 48%;">
|
||||||
|
<div class="lid" style="height: 100%; width: 100%; background: #222; padding: .6em; margin-left: -.6em; border-radius: .6em .6em 0em 0em;">
|
||||||
|
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="case" style="height: .75em; width: 140%; margin-left: -20%; background: #999; border-radius: 0em 0em 5em 5em;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="phone" style="height: 3.75em; width: 2.25em; position: absolute; top: 35%; right: 70%;">
|
||||||
|
<div class="case" style="height: 100%; width: 100%; background: #222; padding: .5em .2em; margin-left: -.2em; border-radius: 0.25em;">
|
||||||
|
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow desktop-server" style="width: 52px; height: 52px; border: dashed 0px FireBrick; border-radius: 0 50px 0 0;
|
||||||
|
position: absolute; right: 20%; top: 15%; border-width: 3px 3px 0px 0px;">
|
||||||
|
<div class="rarr" style="position: absolute; top: -.59em; left: -.5em;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: .5em solid transparent;
|
||||||
|
border-right: 1em solid FireBrick;
|
||||||
|
border-bottom: .5em solid transparent;">
|
||||||
|
</div>
|
||||||
|
<div class="darr" style="position: absolute; bottom: -.75em; right: -.59em;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: .5em solid transparent;
|
||||||
|
border-right: .5em solid transparent;
|
||||||
|
border-top: 1em solid FireBrick;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="arrow phone-server" style="width: 26px; height: 52px; border: dashed 0px FireBrick; border-radius: 0 0 0px 50px;
|
||||||
|
position: absolute; right: 80.3%; top: 34.3%; border-width: 0px 0px 3px 3px;">
|
||||||
|
<div class="uarr" style="position: absolute; top: -.8em; left: -.59em;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: .5em solid transparent;
|
||||||
|
border-right: .5em solid transparent;
|
||||||
|
border-bottom: 1em solid FireBrick;">
|
||||||
|
</div>
|
||||||
|
<div class="rarr" style="position: absolute; bottom: -.55em; right: -.7em;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: .5em solid transparent;
|
||||||
|
border-left: 1em solid FireBrick;
|
||||||
|
border-bottom: .5em solid transparent;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow updown laptop-server" style="height: 50px; border: dashed 0px FireBrick; border-radius: 0;
|
||||||
|
position: absolute; right: 60%; top: 40%; border-width: 0px 3px 0px 0px;">
|
||||||
|
<div class="uarr" style="position: absolute; top: -1em; left: -.45em;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: .5em solid transparent;
|
||||||
|
border-right: .5em solid transparent;
|
||||||
|
border-bottom: 1em solid FireBrick;">
|
||||||
|
</div>
|
||||||
|
<div class="darr" style="position: absolute; bottom: -1em; left: -.45em;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: .5em solid transparent;
|
||||||
|
border-right: .5em solid transparent;
|
||||||
|
border-top: 1em solid FireBrick;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span style="color: transparent">Distributed embedded graph database engine. The no pain, no cost, no backend, NoDB database, gun.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(function(){
|
||||||
|
var c = ['dull', 'blue', 'green']
|
||||||
|
, a = 'dull blue red green', n = 0, to;
|
||||||
|
$(".screen").click(function(){
|
||||||
|
c.push(c.shift());
|
||||||
|
to = to || c[0];
|
||||||
|
$(this).removeClass(a).addClass(to);
|
||||||
|
$('.screen').not(this).each(function(){
|
||||||
|
var t = $(this); n++;
|
||||||
|
setTimeout(function(){
|
||||||
|
t.removeClass(a).addClass(to);
|
||||||
|
if(!(--n)){ to = null }
|
||||||
|
}, rand(400,700));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
function rand(min, max) {
|
||||||
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
$(function(){
|
||||||
|
var mouse = $('.mouse');
|
||||||
|
function show(i){
|
||||||
|
function to(){
|
||||||
|
mouse.animate({top: "60%", left: "55%"}, {
|
||||||
|
duration: 500,
|
||||||
|
specialEasing: {top: 'easeInQuad', left: 'easeOutQuad'},
|
||||||
|
complete: click
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function click(){
|
||||||
|
mouse.delay(230).animate({width: mouse.width() / 2}, {
|
||||||
|
duration: 60,
|
||||||
|
complete: function(){
|
||||||
|
mouse.closest('.screen').trigger('click');
|
||||||
|
mouse.animate({width: mouse.width() * 2}, {
|
||||||
|
duration: 120,
|
||||||
|
complete: fro
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function fro(){
|
||||||
|
mouse.delay(900).animate({top: "87%", left: "110%"}, {
|
||||||
|
duration: 700,
|
||||||
|
specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'},
|
||||||
|
complete: function(){
|
||||||
|
setTimeout(show, 4 * 1000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if(!i && $('.graphic').filter(function() { return $(this).is(":hover"); }).length){
|
||||||
|
setTimeout(show, 2000);
|
||||||
|
} else {
|
||||||
|
to();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
mouse.delay(1200).animate({top: "70%", left: "20%"}, {
|
||||||
|
duration: 400,
|
||||||
|
specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'},
|
||||||
|
complete: function(){ show(true) }
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="center" style="margin: 2% 0;">
|
||||||
|
<div class="lean" style="font-size: 400%;">Easiest Database Ever</div>
|
||||||
|
<div class="lean" style="font-size: 225%;">Sync state in a cinch at a distributed system scale.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div> <!-- END FOLD -->
|
||||||
|
<a href="https://github.com/amark/gun" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
|
||||||
|
|
||||||
|
<!-- BEGIN TUTORIAL -->
|
||||||
|
<div class="tutorial">
|
||||||
|
<script src="https://gunjs.herokuapp.com/gun.js"></script>
|
||||||
|
<link id="style" rel="stylesheet" href="https://yandex.st/highlightjs/8.0/styles/ir_black.min.css">
|
||||||
|
<script src="https://yandex.st/highlightjs/8.0/highlight.min.js"></script>
|
||||||
|
<style>
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Dosis|Poiret+One|Oxygen);
|
||||||
|
.tutorial {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
he-ight: 100%;
|
||||||
|
font-family: 'Oxygen', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
|
background: #222;
|
||||||
|
color: #eee;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.lean {
|
||||||
|
font-family: 'Poiret One', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
.clean {
|
||||||
|
font-family: 'Dosis', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
.crisp {
|
||||||
|
font-family: 'Oxygen', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
background-color: black;
|
||||||
|
border: 1px dashed white;
|
||||||
|
color: white;
|
||||||
|
line-height: 1.5em;
|
||||||
|
padding: .5em;
|
||||||
|
margin: 0em;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
background: skyblue;
|
||||||
|
padding: 1em;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.grid {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.unit {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.main {
|
||||||
|
min-width: 250px;
|
||||||
|
max-width: 1024px;
|
||||||
|
width: 90%;
|
||||||
|
margin: 0% auto;
|
||||||
|
padding: 2% 5%;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.left { float: left;}
|
||||||
|
.teft { text-align: left; }
|
||||||
|
.middle {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.full {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="main">
|
||||||
|
<div style="font-size: 18pt; margin: 0 0 .75em;">Try it now</div>
|
||||||
|
|
||||||
|
<div class="step show step1">
|
||||||
|
|
||||||
|
<div class="full grid">
|
||||||
|
<div class="middle unit teft">
|
||||||
|
<pre style="max-width: 30.1em; margin: 0 1em 1em 0;">var gun = Gun('https://gunjs.herokuapp.com/gun');
|
||||||
|
gun.set({hello: "world"}).key('<span class="your-key">example/tutorial</span>');</pre>
|
||||||
|
</div>
|
||||||
|
<div class="middle unit teft" style="min-width: 20em; max-width: 28em; margin-bottom: 1em;">
|
||||||
|
<a href="#step2"><button class="left" style="margin-right: 1em;"><big>Run!</big></button></a>
|
||||||
|
In this <b>1 minute</b> tutorial, we will connect to a gun peer, create an object, and sync data in realtime.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="step hide step2">
|
||||||
|
|
||||||
|
<div class="full grid">
|
||||||
|
<div class="middle unit teft">
|
||||||
|
<pre style="max-width: 30.1em; margin: 0 1em 1em 0;">var ref = gun.load('<span class="your-key">example/tutorial</span>');
|
||||||
|
ref.on(function(data){
|
||||||
|
$('body').text(JSON.stringify(data));
|
||||||
|
});</pre>
|
||||||
|
</div>
|
||||||
|
<div class="middle unit teft" style="min-width: 34em; max-width: 28em; margin-bottom: 1em;">
|
||||||
|
<a href="#step3"><button class="left" style="margin-right: 1em; background: MediumSpringGreen;"><big>Next</big></button></a>
|
||||||
|
Congratulations! You just made an object and saved a reference to it.
|
||||||
|
In two tabs, we'll load that key to open a shared reference.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="step hide step3">
|
||||||
|
|
||||||
|
<div class="full grid">
|
||||||
|
<style>
|
||||||
|
.browser {
|
||||||
|
background: white;
|
||||||
|
border-radius: .25em;
|
||||||
|
width: 250px;
|
||||||
|
//height: 300px;
|
||||||
|
color: #222;
|
||||||
|
margin: .5em;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.b-bar {
|
||||||
|
background: #EEE;
|
||||||
|
border-radius: .25em .25em 0 0;
|
||||||
|
}
|
||||||
|
.b-but {
|
||||||
|
float: left;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
.browser a {
|
||||||
|
text-decoration: none;
|
||||||
|
background: white;
|
||||||
|
border-radius: .4em;
|
||||||
|
padding: 0 1em;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
.browser iframe { border: none; }
|
||||||
|
</style>
|
||||||
|
<div class="browser unit teft">
|
||||||
|
<div class="b-bar">
|
||||||
|
<div class="b-but">←</div>
|
||||||
|
<div class="b-but">→</div>
|
||||||
|
<div class="b-but"><small>↻</small></div>
|
||||||
|
<small><small><span>
|
||||||
|
<a href="https://gunjs.herokuapp.com/" target="_blank">https://gunjs.herokuapp.com/</a>
|
||||||
|
</span></small></small>
|
||||||
|
<small class="center" style="position: relative; top: -.14em;">x</small>
|
||||||
|
<span class="center">≡<span>
|
||||||
|
</div>
|
||||||
|
<iframe></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="browser unit teft">
|
||||||
|
<div class="b-bar">
|
||||||
|
<div class="b-but">←</div>
|
||||||
|
<div class="b-but">→</div>
|
||||||
|
<div class="b-but"><small>↻</small></div>
|
||||||
|
<small><small><span>
|
||||||
|
<a href="https://gunjs.herokuapp.com/" target="_blank">https://gunjs.herokuapp.com/</a>
|
||||||
|
</span></small></small>
|
||||||
|
<small class="center" style="position: relative; top: -.14em;">x</small>
|
||||||
|
<span class="center">≡<span>
|
||||||
|
</div>
|
||||||
|
<iframe></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="#step3" onsubmit="return false;">
|
||||||
|
<style>
|
||||||
|
#step3 input {
|
||||||
|
width: 6em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="middle unit teft">
|
||||||
|
<pre style="max-width: 40em; margin: 0 1em 1em 0;">ref.path('<input id="try-path" value="hello">').set("<input id="try-sync" value="sync">");</pre>
|
||||||
|
</div>
|
||||||
|
<div class="middle unit teft" style="min-width: 20em; max-width: 30em; margin-bottom: 1em;">
|
||||||
|
<button type="submit" class="left" style="margin-right: 1em;"><big>Update!</big></button>
|
||||||
|
Let's update the "hello" field with a different value.
|
||||||
|
We can path into any field, and set it directly.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(function(){
|
||||||
|
var gun, key = "random/" + Gun.text.random(9),
|
||||||
|
hili = function(){
|
||||||
|
$("pre").each(function(){
|
||||||
|
hljs.highlightBlock(this);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
$(".your-key").text(key);
|
||||||
|
hili();
|
||||||
|
|
||||||
|
location.hash = 'step1';
|
||||||
|
$(window).on('hashchange', function(){
|
||||||
|
$('.step').removeClass('show').addClass('hide')
|
||||||
|
$(location.hash.replace('#','.')).addClass('show');
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".step1").find('button').on('click', function(e){
|
||||||
|
if(gun){ return }
|
||||||
|
gun = Gun('https://gunjs.herokuapp.com/gun');
|
||||||
|
gun.set({hello: "world"}).key(key);
|
||||||
|
});
|
||||||
|
$(".step2").find('button').on('click', function(e){
|
||||||
|
$(".browser").find("iframe").attr("src", "./tabs.html?key=" + key);
|
||||||
|
});
|
||||||
|
$(".step3").find('form').on('submit', function(e){
|
||||||
|
var val = $("#try-sync").val() || null;
|
||||||
|
var path = $("#try-path").val();
|
||||||
|
gun.load(key).path(path).set(val);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- BEGIN TUTORIAL -->
|
||||||
|
|
||||||
|
<! OLD BLOG POST HERE -->
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#main {
|
||||||
|
min-width: 250px;
|
||||||
|
max-width: 700px;
|
||||||
|
width: 75%;
|
||||||
|
margin: 7% auto;
|
||||||
|
padding: 2% 5%;
|
||||||
|
background: white;
|
||||||
|
background: rgba(100%,100%,100%,.6);
|
||||||
|
font-family: Arial;
|
||||||
|
font-size: 18pt;
|
||||||
|
text-shadow: 0px 0px 7px #DDD;
|
||||||
|
line-height: 20pt;
|
||||||
|
}
|
||||||
|
#main p {
|
||||||
|
text-indent: 2em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="main">
|
||||||
|
|
||||||
|
<h3>The blog that started it all...</h3>
|
||||||
|
<p>
|
||||||
|
Gun is a persisted distributed cache, part of a NoDB movement.
|
||||||
|
It requires zero maintenance and runs on your own infrastructure.
|
||||||
|
Think of it as <i>"Dropbox for Databases"</i> or a <i>"Self-hosted Firebase"</i>.
|
||||||
|
This is an early preview, so check out the <a href="https://github.com/amark/gun" target="_blank">github</a> and read on.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Everything gets cached, so your users experience lightning fast response times.
|
||||||
|
Since gun can be embedded anywhere javascript can run,
|
||||||
|
that cache can optionally be right inside your user's browser using localstorage fallbacks.
|
||||||
|
Updates are then pushed up to the servers when the network is available.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
All conflict resolution happens locally in each peer using a deterministic algorithm.
|
||||||
|
Such that eventual consistency is guaranteed across all writes within the mesh,
|
||||||
|
with fault tolerant retries built in at each step. Data integrity is now a breeze.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Gun also establishes and repairs server to server communication across geographically separated machines,
|
||||||
|
with just the help of an initial IP from you.
|
||||||
|
It bridges the distance with a realtime connection,
|
||||||
|
so updates propagate at the speed of the raw pipes linking them.
|
||||||
|
However each server is intelligent enough to only subscribe to the necessary subsection of your data set that is in its working memory,
|
||||||
|
keeping things nimble for its connected users.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Data is then persisted to any S3 like service,
|
||||||
|
allowing you to save a truly webscale amount of "big data" without breaking your wallet.
|
||||||
|
Consistency across concurrency is achieved at this layer
|
||||||
|
by each parallel snapshot going through an idempotent transformation that is agreed upon.
|
||||||
|
The granularity and frequency of these snapshots can be tweaked by you,
|
||||||
|
easily tailor fitting it to your data needs and budget concerns.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>In summary,</b> this marks an important progression in web technologies.
|
||||||
|
Memory is getting cheap enough that we can now front load each connected user's active data
|
||||||
|
right into the application layer and manipulate it directly.
|
||||||
|
Networks are fast enough that if we get too many connected users we can just horizontally
|
||||||
|
redistribute them across different machines.
|
||||||
|
Conflict resolution algorithms are sophisticated enough to handle things immediately
|
||||||
|
in the majority of data cases, with the remaining few as transactions performed ontop.
|
||||||
|
<p>
|
||||||
|
This is will be a win for both developers and users,
|
||||||
|
because it makes things easier to build and faster to respond.
|
||||||
|
We are excited about this and working hard to finish the first release.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
If you would like to learn more, email <a href="mailto:hi@gunDB.io">hi@gunDB.io</a> -
|
||||||
|
or join the <a href="http://groups.google.com/forum/#!forum/g-u-n" target="_blank">Google Group</a>.
|
||||||
|
Plus we're hiring, so contact us!
|
||||||
|
</p>
|
||||||
|
<h2>FAQ</h2>
|
||||||
|
<h4>Why did you build this thing?</h4>
|
||||||
|
<p>
|
||||||
|
1. I love databases, especially new ones that keep the working set in memory.
|
||||||
|
But I was horrified to realize that if I use a Database as a Service (DaaS)
|
||||||
|
then I would have to rely on a network call to get that data, which is horribly slow.
|
||||||
|
I wanted something faster, and if possible, cheaper - because they start charging you
|
||||||
|
outrageous prices if you get past their incredibly tiny free tier.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
2. Hosting your own database is a pain because you have to maintain the hard drives.
|
||||||
|
Even the basic setup and configuration is nasty...
|
||||||
|
having to create a bunch of EBS volumes, attaching them, then mounting, formatting,
|
||||||
|
MDADM and LVM, striping, mirroring, and keeping fstab from locking on boot.
|
||||||
|
This is ignoring having to figure out how to resize them.
|
||||||
|
Even with SSDs you have problems that they are bound to one instance and
|
||||||
|
you get charged for the total volume size, not the amount used.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
I wanted something easy, needing no maintenance and be extremely portable
|
||||||
|
- allowing me to spin up an ephemeral server anywhere, on any cloud,
|
||||||
|
and my data "just work" there.
|
||||||
|
</p>
|
||||||
|
<h4>How are you different from every other database that is trying to reinvent the wheel?</h4>
|
||||||
|
<p>
|
||||||
|
1. Because gun is not a database (NoDB), it is a persisted distributed cache.
|
||||||
|
The fatal flaw with databases is that they assume some centralized authority.
|
||||||
|
While this may be the case initially when you are small,
|
||||||
|
it always ceases to be true when you become large enough that concurrency is unavoidable.
|
||||||
|
No amount of leader election and consensus algorithms can patch this
|
||||||
|
without facing an unjustified amount of complexity.
|
||||||
|
Gun resolves all this by biting the bullet -
|
||||||
|
it solves the hard problems first, not last.
|
||||||
|
It gets data synchronization and conflict resolution right from the beginning,
|
||||||
|
so it never has to rely on vulnerable leader election or consensus locking.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
2. Plus it embeds directly into your application,
|
||||||
|
so you can do your own custom queries with just pure programming logic.
|
||||||
|
Meaning you never have to learn some silly separate query language again.
|
||||||
|
A query language which just attempts to be some DSL to RPC another machine
|
||||||
|
into doing the same query you could have already written in half the time
|
||||||
|
it took to learn the query language. Because face it, any sufficiently capable
|
||||||
|
query language has to be Turing complete, and at that point -
|
||||||
|
why aren't you just writing your entire application logic in it?
|
||||||
|
Your app is nothing without your data.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- END OLD BLOG POST -->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
21
web/tabs.html
Normal file
21
web/tabs.html
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||||
|
<script src="https://gunjs.herokuapp.com/gun.js"></script>
|
||||||
|
</head>
|
||||||
|
<body style="white-space: pre;">
|
||||||
|
loading...
|
||||||
|
<script>
|
||||||
|
var key = decodeURIComponent((location.search.match(/key\=(.*?)(\&|$)/i)||[])[1]||'') || alert("Please provide a key in a query parameter, such as `?key=example/tutorial`.");
|
||||||
|
|
||||||
|
var gun = Gun('https://gunjs.herokuapp.com/gun');
|
||||||
|
var ref = gun.load(key);
|
||||||
|
ref.on(function(data){
|
||||||
|
delete data._;
|
||||||
|
$('body').text(JSON.stringify(data,0,2));
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
506
web/time.html
506
web/time.html
@ -1,506 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
||||||
<!--
|
|
||||||
<script src="../gun.js"></script>
|
|
||||||
<link id="style" rel="stylesheet" href="https://yandex.st/highlightjs/8.0/styles/sunburst.min.css">
|
|
||||||
<script src="https://yandex.st/highlightjs/8.0/highlight.min.js"></script>
|
|
||||||
<script src="https://dl.dropboxusercontent.com/u/4374976/random/phrase.js"></script>
|
|
||||||
-->
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
@import url(https://fonts.googleapis.com/css?family=Dosis|Poiret+One|Oxygen);
|
|
||||||
html, body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
height: 100%;
|
|
||||||
font-family: 'Oxygen', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
|
||||||
}
|
|
||||||
.center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.lean {
|
|
||||||
font-family: 'Poiret One', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
|
||||||
}
|
|
||||||
.clean {
|
|
||||||
font-family: 'Dosis', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
|
||||||
}
|
|
||||||
.crisp {
|
|
||||||
font-family: 'Oxygen', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
background-color: black;
|
|
||||||
border: 1px dashed white;
|
|
||||||
color: white;
|
|
||||||
line-height: 1.5em;
|
|
||||||
padding: 1em;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
background: skyblue;
|
|
||||||
padding: 1em;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
background: transparent;
|
|
||||||
border: 2px dashed grey;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
.step {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.step:target {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.grid {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.unit {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.learn {
|
|
||||||
min-width: 250px;
|
|
||||||
max-width: 400px;
|
|
||||||
width: 30%;
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
.svg {
|
|
||||||
background: white url('./img/devices.svg') no-repeat 50% 50%;
|
|
||||||
height: 40em;
|
|
||||||
}
|
|
||||||
.GUN {
|
|
||||||
background: transparent url('./img/gun.svg') no-repeat 50% 50%;
|
|
||||||
background-size: 60%;
|
|
||||||
}
|
|
||||||
.dull {
|
|
||||||
background-color: #EEE;
|
|
||||||
-webkit-transition: background-color 600ms linear;
|
|
||||||
-moz-transition: background-color 600ms linear;
|
|
||||||
transition: background-color 600ms linear;
|
|
||||||
}
|
|
||||||
.blue {
|
|
||||||
background-color: skyblue;
|
|
||||||
-webkit-transition: background-color 600ms linear;
|
|
||||||
-moz-transition: background-color 600ms linear;
|
|
||||||
transition: background-color 600ms linear;
|
|
||||||
}
|
|
||||||
.red {
|
|
||||||
background-color: red;
|
|
||||||
-webkit-transition: background-color 600ms linear;
|
|
||||||
-moz-transition: background-color 600ms linear;
|
|
||||||
transition: background-color 600ms linear;
|
|
||||||
}
|
|
||||||
.green {
|
|
||||||
background-color: MediumSpringGreen;
|
|
||||||
-webkit-transition: background-color 600ms linear;
|
|
||||||
-moz-transition: background-color 600ms linear;
|
|
||||||
transition: background-color 600ms linear;
|
|
||||||
}
|
|
||||||
.fold {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
min-height: 450px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.grid {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
@media (max-width: 760px) {
|
|
||||||
body {
|
|
||||||
font-siz----e: 10pt;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 1279px) {
|
|
||||||
.wide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="fold">
|
|
||||||
|
|
||||||
<div class="behold" style="overflow: hidden; position: relative; width: 100%; min-height 400px; margin: -200px 0 0; padding:0; top: 40%; text-align: center;">
|
|
||||||
|
|
||||||
<div class="graphic grid" style="min-width: 300px; max-width: 600px; height: 400px;
|
|
||||||
position: relative; margin:0 auto; padding:0;">
|
|
||||||
|
|
||||||
<img src="./img/server.png" class="server" style="position: absolute; top: 2%; left: 35%; wid-th: 50%;">
|
|
||||||
|
|
||||||
<div class="desktop" style="height: 10em; width: 17em; position: absolute; top: 36%; left: 3%;">
|
|
||||||
<div class="monitor" style="height: 100%; width: 100%; background: #222; padding: .75em; margin-left: -.75em; border-radius: 1em;">
|
|
||||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stand" style="margin: 1px auto 0px;
|
|
||||||
border-bottom: 2.75em solid #888;
|
|
||||||
border-left: .5em solid transparent;
|
|
||||||
border-right: .5em solid transparent;
|
|
||||||
height: 0;
|
|
||||||
width: 3.2em;">
|
|
||||||
</div>
|
|
||||||
<div class="stand" style="width: 6em; height: .5em; background: #888; margin: 0px auto"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="laptop" style="height: 7em; width: 12em; position: absolute; top: 60%; left: 48%;">
|
|
||||||
<div class="lid" style="height: 100%; width: 100%; background: #222; padding: .6em; margin-left: -.6em; border-radius: .6em .6em 0em 0em;">
|
|
||||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="case" style="height: .75em; width: 140%; margin-left: -20%; background: #999; border-radius: 0em 0em 5em 5em;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="phone" style="height: 3.75em; width: 2.25em; position: absolute; top: 35%; left: 70%;">
|
|
||||||
<div class="case" style="height: 100%; width: 100%; background: #222; padding: .5em .2em; margin-left: -.2em; border-radius: 0.25em;">
|
|
||||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="arrow desktop-server" style="width: 52px; height: 52px; border: dashed 0px FireBrick; border-radius: 50px 0 0 0;
|
|
||||||
position: absolute; left: 20%; top: 15%; border-width: 3px 0px 0px 3px;">
|
|
||||||
<div class="rarr" style="position: absolute; top: -.59em; right: -.7em;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-top: .5em solid transparent;
|
|
||||||
border-left: 1em solid FireBrick;
|
|
||||||
border-bottom: .5em solid transparent;">
|
|
||||||
</div>
|
|
||||||
<div class="darr" style="position: absolute; bottom: -.75em; left: -.59em;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: .5em solid transparent;
|
|
||||||
border-right: .5em solid transparent;
|
|
||||||
border-top: 1em solid FireBrick;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="arrow phone-server" style="width: 26px; height: 52px; border: dashed 0px FireBrick; border-radius: 0 0 50px 0;
|
|
||||||
position: absolute; left: 80%; top: 35%; border-width: 0px 3px 3px 0px;">
|
|
||||||
<div class="uarr" style="position: absolute; top: -.9em; right: -.59em;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: .5em solid transparent;
|
|
||||||
border-right: .5em solid transparent;
|
|
||||||
border-bottom: 1em solid FireBrick;">
|
|
||||||
</div>
|
|
||||||
<div class="larr" style="position: absolute; bottom: -.55em; left: -.59em;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-top: .5em solid transparent;
|
|
||||||
border-right: 1em solid FireBrick;
|
|
||||||
border-bottom: .5em solid transparent;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="arrow updown laptop-server" style="height: 50px; border: dashed 0px FireBrick; border-radius: 0;
|
|
||||||
position: absolute; left: 60%; top: 40%; border-width: 0px 3px 0px 0px;">
|
|
||||||
<div class="uarr" style="position: absolute; top: -1em; left: -.45em;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: .5em solid transparent;
|
|
||||||
border-right: .5em solid transparent;
|
|
||||||
border-bottom: 1em solid FireBrick;">
|
|
||||||
</div>
|
|
||||||
<div class="darr" style="position: absolute; bottom: -1em; left: -.45em;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: .5em solid transparent;
|
|
||||||
border-right: .5em solid transparent;
|
|
||||||
border-top: 1em solid FireBrick;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span style="color: transparent">Distributed embedded graph database engine. The no pain, no cost, no backend, NoDB database, gun.</span>
|
|
||||||
</div>
|
|
||||||
<div class="graphic wide grid" style="min-width: 300px; max-width: 600px; height: 400px;
|
|
||||||
position: relative; margin:0 auto; padding:0;">
|
|
||||||
|
|
||||||
<div class="arrow server-server" style="width: 100px; height: 0px; border: dashed 0px FireBrick; border-radius: 0;
|
|
||||||
position: absolute; left: -9%; top: 15%; border-width: 3px 0px 0px 0px;">
|
|
||||||
<div class="rarr" style="position: absolute; top: -.59em; left: -.5em;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-top: .5em solid transparent;
|
|
||||||
border-right: 1em solid FireBrick;
|
|
||||||
border-bottom: .5em solid transparent;">
|
|
||||||
</div>
|
|
||||||
<div class="larr" style="position: absolute; top: -.59em; right: -.6em;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: 1em solid FireBrick;
|
|
||||||
border-bottom: .5em solid transparent;
|
|
||||||
border-top: .5em solid transparent;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<img src="./img/server.png" class="server" style="position: absolute; top: 2%; right: 35%;">
|
|
||||||
|
|
||||||
<div class="desktop" style="height: 10em; width: 17em; position: absolute; top: 36%; right: 3%;">
|
|
||||||
<div class="monitor" style="height: 100%; width: 100%; background: #222; padding: .75em; margin-left: -.75em; border-radius: 1em;">
|
|
||||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stand" style="margin: 1px auto 0px;
|
|
||||||
border-bottom: 2.75em solid #888;
|
|
||||||
border-left: .5em solid transparent;
|
|
||||||
border-right: .5em solid transparent;
|
|
||||||
height: 0;
|
|
||||||
width: 3.2em;">
|
|
||||||
</div>
|
|
||||||
<div class="stand" style="width: 6em; height: .5em; background: #888; margin: 0px auto"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="laptop" style="height: 7em; width: 12em; position: absolute; top: 60%; right: 48%;">
|
|
||||||
<div class="lid" style="height: 100%; width: 100%; background: #222; padding: .6em; margin-left: -.6em; border-radius: .6em .6em 0em 0em;">
|
|
||||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="case" style="height: .75em; width: 140%; margin-left: -20%; background: #999; border-radius: 0em 0em 5em 5em;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="phone" style="height: 3.75em; width: 2.25em; position: absolute; top: 35%; right: 70%;">
|
|
||||||
<div class="case" style="height: 100%; width: 100%; background: #222; padding: .5em .2em; margin-left: -.2em; border-radius: 0.25em;">
|
|
||||||
<div class="dull screen GUN" style="height: 100%; width: 100%;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="arrow desktop-server" style="width: 52px; height: 52px; border: dashed 0px FireBrick; border-radius: 0 50px 0 0;
|
|
||||||
position: absolute; right: 20%; top: 15%; border-width: 3px 3px 0px 0px;">
|
|
||||||
<div class="rarr" style="position: absolute; top: -.59em; left: -.5em;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-top: .5em solid transparent;
|
|
||||||
border-right: 1em solid FireBrick;
|
|
||||||
border-bottom: .5em solid transparent;">
|
|
||||||
</div>
|
|
||||||
<div class="darr" style="position: absolute; bottom: -.75em; right: -.59em;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: .5em solid transparent;
|
|
||||||
border-right: .5em solid transparent;
|
|
||||||
border-top: 1em solid FireBrick;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="arrow phone-server" style="width: 26px; height: 52px; border: dashed 0px FireBrick; border-radius: 0 0 0px 50px;
|
|
||||||
position: absolute; right: 80.3%; top: 34.3%; border-width: 0px 0px 3px 3px;">
|
|
||||||
<div class="uarr" style="position: absolute; top: -.8em; left: -.59em;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: .5em solid transparent;
|
|
||||||
border-right: .5em solid transparent;
|
|
||||||
border-bottom: 1em solid FireBrick;">
|
|
||||||
</div>
|
|
||||||
<div class="rarr" style="position: absolute; bottom: -.55em; right: -.7em;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-top: .5em solid transparent;
|
|
||||||
border-left: 1em solid FireBrick;
|
|
||||||
border-bottom: .5em solid transparent;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="arrow updown laptop-server" style="height: 50px; border: dashed 0px FireBrick; border-radius: 0;
|
|
||||||
position: absolute; right: 60%; top: 40%; border-width: 0px 3px 0px 0px;">
|
|
||||||
<div class="uarr" style="position: absolute; top: -1em; left: -.45em;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: .5em solid transparent;
|
|
||||||
border-right: .5em solid transparent;
|
|
||||||
border-bottom: 1em solid FireBrick;">
|
|
||||||
</div>
|
|
||||||
<div class="darr" style="position: absolute; bottom: -1em; left: -.45em;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: .5em solid transparent;
|
|
||||||
border-right: .5em solid transparent;
|
|
||||||
border-top: 1em solid FireBrick;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span style="color: transparent">Distributed embedded graph database engine. The no pain, no cost, no backend, NoDB database, gun.</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
$(function(){
|
|
||||||
var c = ['dull', 'blue', 'green']
|
|
||||||
, a = 'dull blue red green';
|
|
||||||
$(".screen").click(function(){
|
|
||||||
c.push(c.shift());
|
|
||||||
var to = c[0];
|
|
||||||
$(this).removeClass(a).addClass(to);
|
|
||||||
$('.screen').not(this).each(function(){
|
|
||||||
var t = $(this);
|
|
||||||
setTimeout(function(){
|
|
||||||
t.removeClass(a).addClass(to);
|
|
||||||
}, rand(400,700));
|
|
||||||
});
|
|
||||||
});
|
|
||||||
function rand(min, max) {
|
|
||||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="center" style="margin-top: 2%;">
|
|
||||||
<div class="lean" style="font-size: 400%;">Easiest Database Ever</div>
|
|
||||||
<div class="lean" style="font-size: 225%;">Sync state in a cinch at a distributed system scale.</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div> <!-- END FOLD -->
|
|
||||||
|
|
||||||
<div style="display: none;">
|
|
||||||
<div class="svg">
|
|
||||||
AWESOME SAUCE COLOR SYNCING
|
|
||||||
</div>
|
|
||||||
<div id="steps">
|
|
||||||
<div id="step1">
|
|
||||||
As easy as 1, 2, 3!
|
|
||||||
<ol>
|
|
||||||
<li>Connect to a gun server.</li>
|
|
||||||
<li>Save some data.</li>
|
|
||||||
<li>Create a key to open it up later.</li>
|
|
||||||
</ol>
|
|
||||||
<pre>var gun = Gun('http://localhost:8888/gun');
|
|
||||||
gun.set({hello: 'world'}).key('<span class="random">my/first/data</span>');</pre>
|
|
||||||
<a href="#step2" class="run"><button>
|
|
||||||
Try it Now!
|
|
||||||
</button></a>
|
|
||||||
<small>Disclaimer: This is a demo only! Data is deleted every 24 hours.</small>
|
|
||||||
<!--
|
|
||||||
<div>
|
|
||||||
Already have a key? Then
|
|
||||||
<input placeholder="copy and paste it into here!">
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="step2" class="step">
|
|
||||||
Let's test to see if the data got saved.
|
|
||||||
<ol>
|
|
||||||
<li><a id="parallel" href="?key=" target="_blank">Open this page</a> in another browser tab.</li>
|
|
||||||
<li>Now you'll see <b class="random" style="color: crimson;">my/first/data</b> load over there.
|
|
||||||
<li>Meanwhile, this textarea will wait for realtime updates from the other tab:</li>
|
|
||||||
</ol>
|
|
||||||
<textarea style="width: 100%; height: 100px;">// Your data will log here!</textarea>
|
|
||||||
The next level will be unlocked when you complete the realtime sync between tabs.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="step3" class="step">
|
|
||||||
<pre>var gun = Gun('http://localhost:8888/gun');
|
|
||||||
gun.load('<span class="random">my/first/data</span>', function(err, data){
|
|
||||||
$('textarea').text(demo.print(data));
|
|
||||||
});</pre>
|
|
||||||
<a href="#step4" class="run"><button>
|
|
||||||
Run the Code!
|
|
||||||
</button></a> Does the key match from the previous tab?
|
|
||||||
<textarea style="width: 100%; height: 100px;">// Your data will log here!</textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="step4" class="step">
|
|
||||||
Now let's listen to realtime updates, and change the value on the 'hello' field.
|
|
||||||
<pre>gun.load('<span class="random">my/first/data</span>')
|
|
||||||
.on(function(updates){
|
|
||||||
$('textarea').text(demo.print(updates));
|
|
||||||
}).path('hello').set('You!');</pre>
|
|
||||||
<a class="run"><button>
|
|
||||||
Let's do This!
|
|
||||||
</button></a>
|
|
||||||
<textarea style="width: 100%; height: 100px;">// Your data will log here!</textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="grid">
|
|
||||||
<div class="learn unit center">
|
|
||||||
<h1 class="lean">Did you know?</h1>
|
|
||||||
<h2 class="lean">GUN is lightning fast, cause it runs in memory.</h2>
|
|
||||||
Click to <a href="#step2" class="run"><button>
|
|
||||||
See How
|
|
||||||
</button></a> persistence works.
|
|
||||||
</div>
|
|
||||||
<div class="learn unit center">
|
|
||||||
<h1 class="lean">Guess what!</h1>
|
|
||||||
<h2 class="lean">GUN is the only database with realtime push notifications.</h2>
|
|
||||||
Learn <a href="#step2" class="run"><button>
|
|
||||||
How it Works
|
|
||||||
</button></a>.
|
|
||||||
</div>
|
|
||||||
<div class="learn unit center">
|
|
||||||
<h1 class="lean">Have Big Data?</h1>
|
|
||||||
<h2 class="lean">GUN tranforms it into <i>meaningful data</i>, with regular JS.</h2>
|
|
||||||
Discover <a href="#step2" class="run"><button>
|
|
||||||
How To
|
|
||||||
</button></a> do a graph search.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
$(function(){
|
|
||||||
var demo = {}, gun;
|
|
||||||
window.demo = demo;
|
|
||||||
demo.key = location.search.split('=')[1];
|
|
||||||
demo.random = demo.key || random_phrase.noun() +'/'+ random_phrase.verb() +'/'+ random_phrase.adjective() +'/'+ random_phrase.noun() +'/'+ random_phrase.adverb();
|
|
||||||
$(".random").text(demo.random);
|
|
||||||
$('pre').each(function(){
|
|
||||||
$(this).html(hljs.highlight('javascript', $(this).text()).value);
|
|
||||||
});
|
|
||||||
$('#step1').addClass((demo.key || location.hash)? 'step' : '').find('a').first().click(function(){
|
|
||||||
$('#step1').addClass('step');
|
|
||||||
});
|
|
||||||
$('#parallel').attr('href', '?key=' + demo.random + '#step3');
|
|
||||||
$(".run").click(function(){
|
|
||||||
var code = $(this).closest('.step').attr('id');
|
|
||||||
if(!code || !demo[code]){ return } // something went wrong!
|
|
||||||
demo[code]();
|
|
||||||
});
|
|
||||||
demo.step0 = function(){
|
|
||||||
gun = window.gun = window.gun || Gun('http://localhost:8888/gun');
|
|
||||||
}
|
|
||||||
demo.step1 = function(){
|
|
||||||
demo.step0();
|
|
||||||
gun.set({hello: 'world'}).key(demo.random);
|
|
||||||
|
|
||||||
// and also do this, so we can unlock!
|
|
||||||
gun.load(demo.random)
|
|
||||||
.on(function(updates){
|
|
||||||
$('textarea').text(demo.print(updates));
|
|
||||||
// unlock level 5!
|
|
||||||
});
|
|
||||||
}
|
|
||||||
demo.step2 = function(){} // no step 2
|
|
||||||
demo.step3 = function(){
|
|
||||||
demo.step0();
|
|
||||||
gun.load(demo.random, function(err, data){
|
|
||||||
$('textarea').text(demo.print(data));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
demo.step4 = function(){
|
|
||||||
demo.step0();
|
|
||||||
gun.load(demo.random)
|
|
||||||
.on(function(updates){
|
|
||||||
$('textarea').text(demo.print(updates));
|
|
||||||
}).path('hello').set('You!');
|
|
||||||
}
|
|
||||||
demo.print = function(data){
|
|
||||||
if(!data){ return }
|
|
||||||
delete data._; // this is gun specific metadata that we don't want to print.
|
|
||||||
return JSON.stringify(data, null, 2);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</div>
|
|
||||||
<a href="https://github.com/amark/gun" target="_blank" class="wide"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
232
web/try.html
Normal file
232
web/try.html
Normal file
@ -0,0 +1,232 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||||
|
<script src="https://dl.dropboxusercontent.com/u/4374976/random/phrase.js"></script>
|
||||||
|
</head>
|
||||||
|
<body class="tutorial">
|
||||||
|
<script src="https://gunjs.herokuapp.com/gun.js"></script>
|
||||||
|
<link id="style" rel="stylesheet" href="https://yandex.st/highlightjs/8.0/styles/ir_black.min.css">
|
||||||
|
<script src="https://yandex.st/highlightjs/8.0/highlight.min.js"></script>
|
||||||
|
<style>
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Dosis|Poiret+One|Oxygen);
|
||||||
|
.tutorial {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
he-ight: 100%;
|
||||||
|
font-family: 'Oxygen', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
|
background: #222;
|
||||||
|
color: #eee;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.lean {
|
||||||
|
font-family: 'Poiret One', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
.clean {
|
||||||
|
font-family: 'Dosis', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
.crisp {
|
||||||
|
font-family: 'Oxygen', Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
background-color: black;
|
||||||
|
border: 1px dashed white;
|
||||||
|
color: white;
|
||||||
|
line-height: 1.5em;
|
||||||
|
padding: .5em;
|
||||||
|
margin: 0em;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
background: skyblue;
|
||||||
|
padding: 1em;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.grid {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.unit {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.main {
|
||||||
|
min-width: 250px;
|
||||||
|
max-width: 1024px;
|
||||||
|
width: 90%;
|
||||||
|
margin: 0% auto;
|
||||||
|
padding: 2% 5%;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.left { float: left;}
|
||||||
|
.teft { text-align: left; }
|
||||||
|
.middle {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.full {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="main">
|
||||||
|
<div style="font-size: 18pt; margin: 0 0 .75em;">Try it now</div>
|
||||||
|
|
||||||
|
<div class="step show step1">
|
||||||
|
|
||||||
|
<div class="full grid">
|
||||||
|
<div class="middle unit teft">
|
||||||
|
<pre style="max-width: 30.1em; margin: 0 1em 1em 0;">var gun = Gun('https://gunjs.herokuapp.com/gun');
|
||||||
|
gun.set({hello: "world"}).key('<span class="your-key">example/tutorial</span>');</pre>
|
||||||
|
</div>
|
||||||
|
<div class="middle unit teft" style="min-width: 20em; max-width: 28em; margin-bottom: 1em;">
|
||||||
|
<a href="#step2"><button class="left" style="margin-right: 1em;"><big>Run!</big></button></a>
|
||||||
|
In this <b>1 minute</b> tutorial, we will connect to a gun peer, create an object, and sync data in realtime.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="step hide step2">
|
||||||
|
|
||||||
|
<div class="full grid">
|
||||||
|
<div class="middle unit teft">
|
||||||
|
<pre style="max-width: 30.1em; margin: 0 1em 1em 0;">var ref = gun.load('<span class="your-key">example/tutorial</span>');
|
||||||
|
ref.on(function(data){
|
||||||
|
$('body').text(JSON.stringify(data));
|
||||||
|
});</pre>
|
||||||
|
</div>
|
||||||
|
<div class="middle unit teft" style="min-width: 34em; max-width: 28em; margin-bottom: 1em;">
|
||||||
|
<a href="#step3"><button class="left" style="margin-right: 1em; background: MediumSpringGreen;"><big>Next</big></button></a>
|
||||||
|
Congratulations! You just made an object and saved a reference to it.
|
||||||
|
In two tabs, we'll load that key to open a shared reference.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="step hide step3">
|
||||||
|
|
||||||
|
<div class="full grid">
|
||||||
|
<style>
|
||||||
|
.browser {
|
||||||
|
background: white;
|
||||||
|
border-radius: .25em;
|
||||||
|
width: 250px;
|
||||||
|
//height: 300px;
|
||||||
|
color: #222;
|
||||||
|
margin: .5em;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.b-bar {
|
||||||
|
background: #EEE;
|
||||||
|
border-radius: .25em .25em 0 0;
|
||||||
|
}
|
||||||
|
.b-but {
|
||||||
|
float: left;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
.browser a {
|
||||||
|
text-decoration: none;
|
||||||
|
background: white;
|
||||||
|
border-radius: .4em;
|
||||||
|
padding: 0 1em;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
.browser iframe { border: none; }
|
||||||
|
</style>
|
||||||
|
<div class="browser unit teft">
|
||||||
|
<div class="b-bar">
|
||||||
|
<div class="b-but">←</div>
|
||||||
|
<div class="b-but">→</div>
|
||||||
|
<div class="b-but"><small>↻</small></div>
|
||||||
|
<small><small><span>
|
||||||
|
<a href="https://gunjs.herokuapp.com/" target="_blank">https://gunjs.herokuapp.com/</a>
|
||||||
|
</span></small></small>
|
||||||
|
<small class="center" style="position: relative; top: -.14em;">x</small>
|
||||||
|
<span class="center">≡<span>
|
||||||
|
</div>
|
||||||
|
<iframe></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="browser unit teft">
|
||||||
|
<div class="b-bar">
|
||||||
|
<div class="b-but">←</div>
|
||||||
|
<div class="b-but">→</div>
|
||||||
|
<div class="b-but"><small>↻</small></div>
|
||||||
|
<small><small><span>
|
||||||
|
<a href="https://gunjs.herokuapp.com/" target="_blank">https://gunjs.herokuapp.com/</a>
|
||||||
|
</span></small></small>
|
||||||
|
<small class="center" style="position: relative; top: -.14em;">x</small>
|
||||||
|
<span class="center">≡<span>
|
||||||
|
</div>
|
||||||
|
<iframe></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="#step3" onsubmit="return false;">
|
||||||
|
<style>
|
||||||
|
#step3 input {
|
||||||
|
width: 6em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="middle unit teft">
|
||||||
|
<pre style="max-width: 40em; margin: 0 1em 1em 0;">ref.path('<input id="try-path" value="hello">').set("<input id="try-sync" value="sync">");</pre>
|
||||||
|
</div>
|
||||||
|
<div class="middle unit teft" style="min-width: 20em; max-width: 30em; margin-bottom: 1em;">
|
||||||
|
<button type="submit" class="left" style="margin-right: 1em;"><big>Update!</big></button>
|
||||||
|
Let's update the "hello" field with a different value.
|
||||||
|
We can path into any field, and set it directly.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(function(){
|
||||||
|
var gun, key = "random/" + Gun.text.random(9),
|
||||||
|
hili = function(){
|
||||||
|
$("pre").each(function(){
|
||||||
|
hljs.highlightBlock(this);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
$(".your-key").text(key);
|
||||||
|
hili();
|
||||||
|
|
||||||
|
location.hash = 'step1';
|
||||||
|
$(window).on('hashchange', function(){
|
||||||
|
$('.step').removeClass('show').addClass('hide')
|
||||||
|
$(location.hash.replace('#','.')).addClass('show');
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".step1").find('button').on('click', function(e){
|
||||||
|
if(gun){ return }
|
||||||
|
gun = Gun('https://gunjs.herokuapp.com/gun');
|
||||||
|
gun.set({hello: "world"}).key(key);
|
||||||
|
});
|
||||||
|
$(".step2").find('button').on('click', function(e){
|
||||||
|
$(".browser").find("iframe").attr("src", "./tabs.html?key=" + key);
|
||||||
|
});
|
||||||
|
$(".step3").find('form').on('submit', function(e){
|
||||||
|
var val = $("#try-sync").val() || null;
|
||||||
|
var path = $("#try-path").val();
|
||||||
|
gun.load(key).path(path).set(val);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user