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

307 lines
12 KiB
HTML

---
layout: page
title: Get started
description: ""
js: page-getstarted.min.js
redirect_from:
- /community/
- /start/
---
{% assign content = site.data.getstarted %}
<section class="section section--firsttransaction">
<div class="row row--wide">
<div class="grid grid--full grid-small--half grid--gutters">
<div class="grid__col">
<h4>Get your first transaction into BigchainDB</h4>
<form id="form-transaction" class="form form--transaction js-parsley">
<fieldset class="form--transaction__content">
<p class="form-group">
<input id="message" class="form-control" type="text" name="message" required>
<label class="form-label" for="message">Message</label>
</p>
<p class="form-group message">
A transaction can contain a digital asset along with a message. Type something to be sent along the asset.
</p>
<button class="btn btn-primary" id="post" disabled>Off you go</button>
</fieldset>
</form>
</div>
<div class="grid__col">
<h4>&nbsp;</h4>
<div class="waiting">
<pre>
<code class="waiting">Beep, boop, waiting for your input...</code>
</pre>
</div>
<div class="response highlight hide">
<pre>
<code class="output language-json">{
"asset": {
"data": {
"msg": "Blockchain all the things!"
}
},
"id": "04c00267af82c161b4bf2ad4a47d1ddbfeb47eef1a14b8d51",
...</code>
</pre>
</div>
<div class="message message--success hide">
<p>
Nicely done! You have just created an asset, sent it along in a signed transaction and retrieved the result of that transaction. Phew.
</p>
<p><a class="transaction-link" href="https://test.ipdb.io/api/v1/transactions/">Check out your transaction on IPDB</a></p>
</div>
<p class="message message--fail hide">Shenanigans! Something's off. Would you mind trying again?</p>
</div>
</div>
</div>
</section>
<nav class="menu--sub" data-gumshoe-header>
<div class="row row--wide">
<div class="menu-overflow" data-gumshoe>
<a class="menu__link scroll" href="#server"><span class="number">1</span> {{ content.server.title }}</a>
<a class="menu__link scroll" href="#drivers"><span class="number">2</span> {{ content.drivers.title }}</a>
<a class="menu__link scroll" href="#docs"><span class="number">3</span> {{ content.docs.title }}</a>
<a class="menu__link scroll" href="#community"><span class="number">4</span> {{ content.community.title }}</a>
</div>
</div>
</nav>
<section class="section section--architecture">
<div class="row row--wide">
<figure class="architecture">
<img class="img--responsive" src="/assets/img/architecture.svg" alt="BigchainDB Overview">
</figure>
</div>
</section>
<section class="section section--server background--darker" id="server">
<div class="row row--wide">
<header class="section-header text-left">
<h1 class="section-title section-title--numbered"><span class="number">1</span> {{ content.server.title }}</h1>
<p class="section-description">{{ content.server.description }}</p>
</header>
</div>
<aside class="starbase starbase--server">
<div class="row row--wide">
<figure class="starbase__image">
<img class="img--responsive" src="/assets/img/starbase.svg" alt="Starbase" width="1111" height="343">
</figure>
</div>
</aside>
<section class="choice">
<div class="row row--wide">
<div class="grid grid--full grid-small--half grid--gutters">
<div class="grid__col">
<span class="pretitle">{{ content.server.ipdb.pretitle }}</span>
<h2 class="choice__title">{{ content.server.ipdb.title }}</h2>
<p>{{ content.server.ipdb.description }}</p>
<a class="btn btn-primary" href="">{{ content.server.ipdb.button }}</a>
</div>
<div class="grid__col">
<span class="pretitle">{{ content.server.bdb.pretitle }}</span>
<h2 class="choice__title">{{ content.server.bdb.title }}</h2>
<p>{{ content.server.bdb.description }}</p>
<a class="btn btn-secondary" href="">{{ content.server.bdb.button }}</a>
</div>
</div>
</div>
</section>
</section>
<section class="section section--drivers background--darker" id="drivers">
<div class="row row--wide">
<header class="section-header text-left">
<h1 class="section-title section-title--numbered"><span>2</span> {{ content.drivers.title }}</h1>
<p class="section-description">{{ content.drivers.description }}</p>
</header>
</div>
<aside class="starbase starbase--drivers">
<div class="row row--wide">
<figure class="starbase__image">
<img class="img--responsive" src="/assets/img/starbase-drivers.svg" alt="Starbase" width="1060" height="166">
</figure>
</div>
</aside>
<section class="choice">
<div class="row row--wide">
<div class="grid grid--full grid-small--half grid--gutters">
<div class="grid__col">
<h3 class="choice__title">{{ content.drivers.title_official }}</h3>
<div class="grid grid--full grid-small--half grid--gutters">
{% for driver in site.data.drivers.official %}
<div class="grid__col">
<a class="driver" href="https://github.com/bigchaindb/{{ driver.repo }}">
<h2 class="driver__title">{{ driver.title }}</h2>
<svg class="driver__logo">
<use xlink:href="/assets/img/sprite.svg#{{ driver.icon }}"></use>
</svg>
<p class="driver__meta">
<span class="driver__repo">{{ driver.repo }}</span>
<span class="driver__version">{{ driver.version }}</span>
</p>
</a>
</div>
{% endfor %}
</div>
</div>
<div class="grid__col">
<h3 class="choice__title">{{ content.drivers.title_tools }}</h3>
<div class="grid grid--full grid-small--half grid--gutters">
{% for driver in site.data.drivers.tools %}
<div class="grid__col">
<a class="driver" href="https://github.com/bigchaindb/{{ driver.repo }}">
<h2 class="driver__title">{{ driver.title }}</h2>
<p class="driver__meta">
<span class="driver__repo">{{ driver.repo }}</span>
<span class="driver__version">{{ driver.version }}</span>
</p>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="row row--wide">
<h3 class="choice__title">{{ content.drivers.title_community }}</h3>
<div class="grid grid--half grid-medium--fit grid--gutters">
{% for driver in site.data.drivers.community %}
<div class="grid__col">
<a class="driver driver--community" href="{{ driver.link }}">
<svg class="driver__logo">
<use xlink:href="/assets/img/sprite.svg#{{ driver.icon }}"></use>
</svg>
<h2 class="driver__title">{{ driver.title }}</h2>
<p class="driver__meta">
<span class="driver__repo">{{ driver.repo }}</span>
</p>
</a>
</div>
{% endfor %}
</div>
</div>
</section>
</section>
<section class="section section--docs background--light" id="docs">
<div class="row row--wide">
<header class="section-header">
<h1 class="section-title section-title--numbered"><span>3</span> {{ content.docs.title }}</h1>
<p class="section-description">{{ content.docs.description }}</p>
</header>
</div>
<div class="row row--wide">
<div class="grid grid--full grid-small--fit grid--gutters">
{% for category in content.docs.categories %}
<div class="grid__col">
<h2 class="docs__title">{{ category.title }}</h2>
<ul class="docs__list">
{% for item in category.items %}
<li><a href="{{ item.link }}">{{ item.title }}</a></li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</div>
<div class="row row--wide text-center">
<div class="docs__actions">
<a class="btn btn-secondary" href="https://docs.bigchaindb.com">{{ content.docs.button }}</a>
</div>
</div>
</section>
<section class="section section--community" id="community">
<div class="row">
<header class="section-header">
<h1 class="section-title section-title--numbered"><span>4</span> {{ content.community.title }}</h1>
<p class="section-description">{{ content.community.description }}</p>
</header>
</div>
<div class="row community__actions">
<div class="grid grid--full grid-small--fit grid--gutters">
<div class="grid__col">
<svg class="icon icon--social icon--gitter">
<use xlink:href="/assets/img/sprite.svg#gitter"></use>
</svg>
<p>{{ content.community.gitter.text }}</p>
<a href="{{ site.social.gitter.url }}" class="btn btn-primary btn-sm">{{ content.community.gitter.button }}</a>
</div>
<div class="grid__col">
<svg class="icon icon--social icon--github">
<use xlink:href="/assets/img/sprite.svg#github"></use>
</svg>
<p>{{ content.community.github.text }}</p>
<a href="{{ site.social.github.url }}/{{ site.social.github.repo }}" class="btn btn-primary btn-sm">{{ content.community.github.button }}</a>
</div>
<div class="grid__col">
<svg class="icon icon--social icon--github">
<use xlink:href="/assets/img/sprite.svg#icon-book"></use>
</svg>
<p>{{ content.community.guidelines.text }}</p>
<a href="{{ site.social.github.url }}/{{ site.social.github.repo }}/blob/master/CONTRIBUTING.md" class="btn btn-primary btn-sm">{{ content.community.guidelines.button }}</a>
</div>
</div>
</div>
<div class="row">
<div class="grid grid--full grid-small--fit grid--gutters">
<div class="grid__col">
<h5>{{ content.community.follow.title }}</h5>
<p>{{ content.community.follow.description }}</p>
{% for link in site.social %}
<a class="social-link js-social-link" href="{{ link[1].url }}" title="{{ link[1].title }}">
<svg class="icon icon--social icon--{{ link[0] }}" aria-labelledby="title">
<title>{{ link.title }}</title>
<use xlink:href="/assets/img/sprite.svg#{{ link[0] }}"></use>
</svg>
<span class="social-link__title">{{ link[1].title }}</span>
</a>
{% endfor %}
</div>
</div>
</div>
</section>
{% include sections/section-newsletter.html %}