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>
+  `;
+};

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>
+  `;
+};

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;

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">
-      <section class="api__content" id="toc-content">${createApiContent(response)}</section>
+        ${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 = [];