Merge pull request #32 from ipdb/feature/toolslinks

Community tools links

_src/_assets/scss/page-front.scss

@@ -183,7 +183,8 @@
     }
 }
 
-.getstarted-bigchaindb {
+.getstarted-bigchaindb,
+.getstarted-tools {
     padding-top: $spacer * 3;
     margin-top: $spacer * 3;
     border-top: .1rem solid darken($brand-05, 8%);
@@ -261,6 +262,27 @@
     opacity: .9;
 }
 
+// Community tools
+.tool {
+    margin-bottom: $spacer * 2;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.tool__title {
+    font-size: $font-size-h5;
+    margin-bottom: $spacer / 4;
+
+    .icon {
+        fill: inherit;
+        opacity: .5;
+        margin-left: $spacer / 2;
+        width: $font-size-mini;
+        margin-bottom: -.2rem;
+    }
+}
 
 //
 // Connect

_src/_data/content-front.yml

@@ -78,7 +78,15 @@ getstarted:
         - title: "Get drivers & tools"
           link: "https://www.bigchaindb.com/getstarted/#drivers"
           text: "Point your apps to `test.ipdb.io` and code along. →"
-
+    tools:
+        - title: "BigchainDB Explorer"
+          description: "Use BigchainDB's HTTP API to explore assets, accounts and transactions."
+          link: "http://www.nileshtrivedi.com/bigchaindb-explorer/"
+          github: "https://github.com/nileshtrivedi/bigchaindb-explorer"
+        - title: "IPDB Explorer"
+          description: "Tool for exploring IPDB txs based on asset ids and public keys."
+          link: "https://ipdb-explorer.license.rocks/"
+          github: "https://github.com/LicenseRocks/ipdb-explorer"
 
 connect:
     title: "Stay connected"

_src/index.html

@@ -223,6 +223,39 @@ css: page-front
                 </div>
             </div>
         </div>
+
+        <div class="getstarted-tools">
+            <div class="grid grid--full grid-small--half grid-medium--columns grid--gutters">
+                <div class="grid__col grid__col--2">
+                    <h2 class="feature__title">Community Tools</h2>
+                </div>
+
+                <div class="grid__col grid__col--4">
+
+                    {% for tool in content.getstarted.tools %}
+                        <div class="tool">
+                            <h3 class="tool__title">
+                                <a href="{{ tool.link }}">{{ tool.title }}</a>
+
+                                {% if tool.github %}
+                                <a href="{{ tool.github }}" title="GitHub">
+                                    <svg class="icon" aria-labelledby="title">
+                                        <title>GitHub</title>
+                                        <use xlink:href="/assets/img/sprite.svg#icon-github"></use>
+                                    </svg>
+                                </a>
+                                {% endif %}
+                            </h3>
+
+                            <p class="tool__description">
+                                 {{ tool.description }}
+                            </p>
+                        </div>
+                    {% endfor %}
+
+                </div>
+            </div>
+        </div>
     </div>
 </section>