From a1a21a91ed596c4b6c80d09003741b995f072b5e Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 22 Jun 2017 14:31:49 +0200
Subject: [PATCH] prototype all content blocks
---
_src/_assets/styles/_page-getstarted.scss | 24 ++-
.../styles/bigchain/_mixins/_backgrounds.scss | 5 +-
_src/_data/drivers.yml | 41 +++++
_src/start.html | 143 ++++++++++++++++--
4 files changed, 192 insertions(+), 21 deletions(-)
create mode 100644 _src/_data/drivers.yml
diff --git a/_src/_assets/styles/_page-getstarted.scss b/_src/_assets/styles/_page-getstarted.scss
index cbb6f35..2a32b7a 100644
--- a/_src/_assets/styles/_page-getstarted.scss
+++ b/_src/_assets/styles/_page-getstarted.scss
@@ -12,6 +12,7 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
+ box-shadow: none;
&:hover,
&:focus {
@@ -32,15 +33,16 @@
}
.driver__logo {
- width: 3rem;
- height: 3rem;
+ width: 2rem;
+ height: 2rem;
background: $brand-primary;
}
.driver__title {
+ @extend .h5;
color: $brand-primary;
- margin: 0;
- font-size: $font-size-h3;
+ margin-top: 0;
+ margin-bottom: $spacer;
}
.driver__meta {
@@ -58,6 +60,20 @@
opacity: .75;
}
+.driver--community {
+ text-align: center;
+ justify-content: center;
+
+ .driver__title {
+ width: 100%;
+ margin-bottom: 0;
+ }
+
+ .driver__logo {
+ margin-bottom: $spacer / 2;
+ }
+}
+
.section--community {
text-align: center;
position: relative;
diff --git a/_src/_assets/styles/bigchain/_mixins/_backgrounds.scss b/_src/_assets/styles/bigchain/_mixins/_backgrounds.scss
index b98f3cd..adbc8f3 100644
--- a/_src/_assets/styles/bigchain/_mixins/_backgrounds.scss
+++ b/_src/_assets/styles/bigchain/_mixins/_backgrounds.scss
@@ -13,7 +13,10 @@
background: $brand-main-gray-lighter;
.section-title,
- p {
+ p,
+ h1,
+ h2,
+ h3 {
color: $brand-main-gray;
}
}
diff --git a/_src/_data/drivers.yml b/_src/_data/drivers.yml
new file mode 100644
index 0000000..ae9a812
--- /dev/null
+++ b/_src/_data/drivers.yml
@@ -0,0 +1,41 @@
+official:
+ - title: Python
+ repo: bigchaindb-driver
+ version: v0.2.2
+
+ - title: JavaScript
+ repo: js-bigchaindb-driver
+ version: v0.1.1
+
+ - title: CLI
+ repo: bdb-transaction-cli
+ version: v0.2.2
+
+community:
+ - title: Haskell
+ repo: bigchaindb-hs
+
+ - title: Ruby
+ repo: bigchaindb_ruby
+
+ - title: Go
+ repo: bigchaindb-driver-golang
+
+ - title: Java
+ repo: bigchaindb-java
+
+ - title: Swift
+ repo: bigchaindb-swift
+
+tools:
+ - title: Crypto-Conditions
+ repo: cryptoconditions
+ version: v0.5.1
+
+ - title: ILP ledger plugin
+ repo: ilp-plugin-bigchaindb
+ version: v0.1.1
+
+ - title: COALA IP ledger plugin
+ repo: pycoalaip-bigchaindb
+ version: v0.0.4
diff --git a/_src/start.html b/_src/start.html
index ccd5d11..32cfd4f 100644
--- a/_src/start.html
+++ b/_src/start.html
@@ -10,10 +10,29 @@ redirect_from:
- /community/
---
+<section class="section section--firsttransaction">
+ <div class="row">
+ <header class="section-header">
+ <h1 class="section-title">Get your first transaction into BigchainDB</h1>
+ <p class="section-description">Never wrote something into a blockchain? Now’s your chance: add your message and send off your first transaction to BigchainDB running within IPDB.</p>
+ </header>
+ </div>
+ <div class="row row--wide">
+ <div class="grid grid--full grid-small--half grid--gutters">
+ <div class="grid__col">
+ <h3>Request</h3>
+ </div>
+ <div class="grid__col">
+ <h3>Response</h3>
+ </div>
+ </div>
+ </div>
+</section>
+
<section class="section section--architecture">
<div class="row">
<header class="section-header">
- <p class="section-description">Get started quickly by installing BigchainDB.</p>
+ <p class="section-description">Architecture overview</p>
</header>
</div>
<div class="row">
@@ -35,30 +54,122 @@ redirect_from:
</nav>
<section class="section section--server" id="server">
- <div class="row">
-
+ <div class="row row--wide">
+ <header class="section-header text-left">
+ <h1 class="section-title">Get Server</h1>
+ </header>
+ </div>
+ <div class="row row--wide">
+ <div class="grid grid--full grid-small--half grid--gutters">
+ <div class="grid__col">
+ <h3>IPDB: the public BigchainDB network</h3>
+ <p>No need for any installation. Sign up and connect instantly, we handle running a BigchainDB production node for you.</p>
+ <a class="btn btn-primary" href="">Get IPDB</a>
+ </div>
+ <div class="grid__col">
+ <h3>BigchainDB Server</h3>
+ <p>If you want to run your own BigchainDB instance you can either install on Linux or with Docker on any system.</p>
+ <a class="btn btn-secondary" href="">Install BigchainDB Server</a>
+ </div>
+ </div>
</div>
</section>
<section class="section section--drivers background--darker" id="drivers">
- <div class="row">
- <a class="driver" href="https://github.com/bigchaindb/bigchaindb-driver">
- <h2 class="driver__title">Python</h2>
- <svg class="driver__logo">
- <use></use>
- </svg>
+ <div class="row row--wide">
+ <header class="section-header text-left">
+ <h1 class="section-title">Get Drivers & Tools</h1>
+ </header>
+ </div>
+ <div class="row row--wide">
+ <h3>BigchainDB in your language</h3>
+ <p>Get one of the drivers to connect to IPDB or your BigchainDB server instance.</p>
+ </div>
+ <div class="row row--wide">
+ <h3>Officially supported drivers</h3>
+ <div class="grid grid--full grid-small--half grid-medium--fit grid--gutters">
- <p class="driver__meta">
- <span class="driver__repo">bigchaindb-driver</span>
- <span class="driver__version">v0.1.1</span>
- </p>
- </a>
+ {% 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></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="row row--wide">
+ <h3>Officially supported tools</h3>
+ <div class="grid grid--full grid-small--half grid-medium--fit 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 class="row row--wide">
+ <h3>Community supported drivers</h3>
+ <div class="grid grid--full grid-small--half grid-medium--fit grid--gutters">
+
+ {% for driver in site.data.drivers.community %}
+ <div class="grid__col">
+ <a class="driver driver--community" href="https://github.com/bigchaindb/{{ driver.repo }}">
+ <svg class="driver__logo">
+ <use></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 class="section section--docs" id="docs">
+<section class="section section--docs background--light" id="docs">
<div class="row">
-
+ <header class="section-header">
+ <h1 class="section-title">Next Up</h1>
+ <p class="section-description">Dive into our documentation or learn or code.</p>
+ </header>
+ </div>
+ <div class="row">
+ <div class="grid grid--full grid-small--fit grid--gutters">
+ <div class="grid__col">
+ <h3>Tutorials</h3>
+ </div>
+ <div class="grid__col">
+ <h3>Code examples</h3>
+ </div>
+ <div class="grid__col">
+ <h3>Documentation</h3>
+ </div>
+ </div>
</div>
</section>