From a416be6e8e2c37c139aae1177e3275c4b2d6d7ba Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <kauffj@gmail.com>
Date: Mon, 1 Oct 2018 00:40:24 -0400
Subject: [PATCH] api headers

---
 app/components/api/header-blockchain.js | 15 +++++++++++++++
 app/components/api/header-sdk.js        | 15 +++++++++++++++
 app/sass/pages/_api.scss                | 25 ++++++-------------------
 app/views/api.js                        | 19 +++++++++++++++++--
 4 files changed, 53 insertions(+), 21 deletions(-)
 create mode 100644 app/components/api/header-blockchain.js
 create mode 100644 app/components/api/header-sdk.js

diff --git a/app/components/api/header-blockchain.js b/app/components/api/header-blockchain.js
new file mode 100644
index 0000000..301b016
--- /dev/null
+++ b/app/components/api/header-blockchain.js
@@ -0,0 +1,15 @@
+"use strict";
+
+import html from "choo/html";
+
+export default () => {
+  return html`
+    <div class="api__header page__markup">
+      <h1>lbrycrd APIs</h1>
+      <p>
+        Methods and signatures provided by the <a href="/glossary#lbrycrd">lbrycrd</a> blockchain daemon are documented below. 
+        To build, download, or run lbrycrd, see the project <a href="https://github.com/lbryio/lbrycrd/blob/master/README.md">README</a>.
+        </p>
+    </div>
+  `;
+};
diff --git a/app/components/api/header-sdk.js b/app/components/api/header-sdk.js
new file mode 100644
index 0000000..694a66e
--- /dev/null
+++ b/app/components/api/header-sdk.js
@@ -0,0 +1,15 @@
+"use strict";
+
+import html from "choo/html";
+
+export default () => {
+  return html`
+    <div class="api__header page__markup">
+      <h1>lbry-sdk APIs</h1>
+      <p>
+        Methods and signatures provided by the <a href="/glossary#lbry-sdk">lbry-sdk</a> daemon are documented below. 
+        To build, download, or run the daemon, see the project <a href="https://github.com/lbryio/lbry/blob/master/README.md">README</a>.
+        </p>
+    </div>
+  `;
+};
diff --git a/app/sass/pages/_api.scss b/app/sass/pages/_api.scss
index 51fd43b..1533a8c 100644
--- a/app/sass/pages/_api.scss
+++ b/app/sass/pages/_api.scss
@@ -17,7 +17,7 @@
 
 .api__header
 {
-  color: red;
+  padding: 2rem;
 }
 
 
@@ -107,27 +107,14 @@
 }
 
 
-
-/**
- * API | Main Content
- *
- * @class     .api__content
- * @class     .api__content__body
- * @class     .api__content__body__arguments
- *
- * @class     .api__content__body__argument
- * @selector  {::after}
- * @selector  {:last-of-type}
- * @selector  {:nth-child}
- *
- * @class     .api__content__example
- */
-
 .api__content {
-  display: grid;
   float: right;
-  grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
   width: calc(100% - 200px);
+}
+
+.api__documentation {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
 
   h1 {
     font-size: 1.5rem;
diff --git a/app/views/api.js b/app/views/api.js
index eec4d23..b135a0e 100644
--- a/app/views/api.js
+++ b/app/views/api.js
@@ -7,6 +7,8 @@
 import asyncHtml from "choo-async/html";
 import dedent from "dedent";
 import redirectOr404 from "../modules/redirectOr404";
+import headerBlockchain from "../components/api/header-blockchain";
+import headerSdk from "../components/api/header-sdk";
 
 const fetch = require("make-fetch-happen").defaults({ cacheManager: "./cache" });
 
@@ -53,8 +55,12 @@ module.exports = exports = state => parseApiFile(state.params.wildcard).then(res
 
         <ul class="api__toc__items" id="toc" role="navigation">${createApiSidebar(response)}</ul>
       </aside>
-
-      <section class="api__content" id="toc-content">${createApiContent(response)}</section>
+      <section class="api__content">
+        ${createApiHeader(state.params.wildcard)}
+        <div class="api__documentation" id="toc-content">
+          ${createApiContent(response)}
+        </div>
+      </section>
     </div>
 
     <script src="/assets/scripts/plugins/jets.js"></script>
@@ -69,6 +75,15 @@ module.exports = exports = state => parseApiFile(state.params.wildcard).then(res
 
 //  H E L P E R S
 
+function createApiHeader(slug) {
+  switch (slug) {
+    case "sdk":
+      return headerSdk();
+    case "blockchain":
+      return headerBlockchain();
+  }
+}
+
 function createApiContent(apiDetails) {
   const apiContent = [];