1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-12-24 18:36:11 +01:00

code examples and message typing interaction

This commit is contained in:
Matthias Kretschmann 2017-06-28 15:57:38 +02:00
parent 322fc2a71b
commit dc8310e2f7
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 134 additions and 1 deletions

View File

@ -1,5 +1,6 @@
//=require gumshoe/dist/js/gumshoe.js
//=include bigchain/tab.js
//=include bigchain/smoothscroll.js
//=include bigchain/newsletter.js
@ -55,12 +56,32 @@ window.addEventListener('DOMContentLoaded', function domload(event) {
const postButton = document.getElementById('post')
const messageInput = document.getElementById('message')
// quick form validation
// nasty jquery inside of here, YOLO
$(".highlight code:contains('Blockchain all the things!')").html(function(_, html) {
return html.replace(/(Blockchain all the things!)/g, '<strong class="code-example__message">$1</strong>');
})
const codeMessages = document.querySelectorAll('.code-example__message')
function updateMessage(content) {
for (var codeMessage of codeMessages) {
codeMessage.textContent = content
}
}
// empty default message
updateMessage('')
// quick form validation, live update code example with user input
messageInput.addEventListener('input', function() {
if (messageInput.value === '') {
postButton.setAttribute('disabled', '')
// empty message again
updateMessage('')
} else {
postButton.removeAttribute('disabled')
// update code message
updateMessage(messageInput.value)
}
})

View File

@ -71,6 +71,48 @@
font-size: $font-size-base;
}
.code-example {
@include transition;
opacity: .5;
&:hover {
opacity: 1;
}
.nav-link,
pre {
font-size: $font-size-xs;
}
.nav-tabs {
border-bottom-color: $gray-light;
}
.nav-link {
padding-top: $spacer / 4;
padding-bottom: $spacer / 4;
margin-bottom: -2px;
&:hover,
&:focus {
background: none;
}
&.active {
border-bottom: 2px solid $gray-light;
}
}
pre {
background: none;
padding: $spacer * 1.5 0;
}
}
.code-example__message {
font-weight: $font-weight-bold;
}
.section-title--numbered {
span {
text-align: center;

View File

@ -43,6 +43,76 @@ redirect_from:
</fieldset>
</form>
<aside class="code-example">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#curl" data-toggle="tab" role="tab">cURL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#python" data-toggle="tab" role="tab">Python</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#nodejs" data-toggle="tab" role="tab">Node.js</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="curl" role="tabpanel">
{% capture curl %}
```bash
curl -X "POST" "https://test.ipdb.io/api/v1/transactions/" \
-d $'{ message: "Blockchain all the things!" }'
```
{% endcapture %}{{ curl | markdownify }}
</div>
<div class="tab-pane highlight" id="python" role="tabpanel">
{% capture python %}
```python
from bigchaindb_driver import BigchainDB
from bigchaindb_driver.crypto import generate_keypair
bdb = BigchainDB('https://test.ipdb.io/api/v1/')
alice = generate_keypair()
tx = bdb.transactions.prepare(
metadata={ "message": "Blockchain all the things!" }
)
txSigned = bdb.transactions.fulfill(
tx,
private_keys=alice.private_key
)
bdb.transactions.send(txSigned)
```
{% endcapture %}{{ python | markdownify }}
</div>
<div class="tab-pane highlight" id="nodejs" role="tabpanel">
{% capture nodejs %}
```js
const driver = require('bigchaindb-driver')
const conn = new driver.Connection('https://test.ipdb.io/api/v1/')
const alice = new driver.Ed25519Keypair()
const tx = driver.Transaction.makeCreateTransaction(
{ message: "Blockchain all the things!" }
)
const txSigned = driver.Transaction.signTransaction(tx, alice.privateKey)
conn.postTransaction(txSigned)
```
{% endcapture %}{{ nodejs | markdownify }}
</div>
</div>
</aside>
</div>
<div class="grid__col">
<div class="waiting">