API page is coming along

.gitignore

@@ -4,4 +4,5 @@
 *.log
 
 # Directories
+cache/*
 node_modules

client.js

@@ -45,6 +45,7 @@ function main() {
   ));
 
   app.route("/", page(require("./views/pages/home")(app)));
+  app.route("/api", page(require("./views/pages/api")(app)));
   app.route("/resources", page(require("./views/pages/resources")(app)));
   app.route("/resources/*", page(require("./views/pages/page")(app)));
   app.route("/tour", page(require("./views/pages/tour")(app)));

package.json

@@ -30,6 +30,7 @@
     "fs-exists-sync": "^0.1.0",
     "graceful-fs": "^4.1.11",
     "heroku-ssl-redirect": "0.0.4",
+    "make-fetch-happen": "^4.0.1",
     "make-promises-safe": "^1.1.0",
     "markdown-it": "^8.4.2",
     "markdown-it-anchor": "^5.0.2",

public/css/pages/api.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"api.css"}

sass/pages/_api.scss

@@ -0,0 +1,197 @@
+.__slate {
+  width: 100%; height: 100%;
+  position: relative;
+
+  &::after {
+    @include clearfix;
+  }
+}
+
+
+
+.api__toc {
+  width: 200px; height: calc(100vh - 4rem); // navigation is 4rem tall
+  top: 4rem; left: 0; bottom: 0;
+
+  background-color: $white;
+  border-right: 1px solid rgba($gray, 0.3);
+  float: left;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+  z-index: 3;
+}
+
+.api__toc__search {
+  position: relative;
+}
+
+.api__toc__search__field {
+  border-bottom: 1px solid rgba($gray, 0.3);
+  font-size: 1rem;
+  line-height: 2rem;
+  padding: 0.25rem calc(2rem + 4px) 0.25rem 0.5rem;
+  width: 100%;
+}
+
+.api__toc__search__clear {
+  width: 1.25rem; height: 1.25rem;
+  top: 0.6rem; right: 0.75rem;
+
+  background-color: $black;
+  border-radius: 50%;
+  color: $white;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1.3;
+  position: absolute;
+  text-align: center;
+  transition: opacity 0.2s;
+
+  &:not(.active) {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  &.active {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+
+
+.api__toc__search__results,
+.api__toc__items {
+  font-size: 0.8rem;
+  line-height: 1.33;
+}
+
+.api__toc__search__results {
+  list-style-type: none;
+
+  &:not(.active) {
+    display: none;
+  }
+
+  &.active {
+    background-color: rgba($gray, 0.3);
+    border-bottom: 1px solid rgba($gray, 0.3);
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+
+  a {
+    display: block;
+    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
+
+    &:hover {
+      background-color: rgba($gray, 0.3);
+    }
+  }
+}
+
+.api__toc__items {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+
+  ul {
+    list-style-type: none;
+
+    &:hover {
+      background-color: rgba($gray, 0.3);
+    }
+
+    li {
+      padding: 0.25rem 0.5rem 0.25rem 0.75rem;
+    }
+  }
+}
+
+.tocify-focus {
+  background-color: rgba($gray, 0.3);
+}
+
+
+
+.api__content {
+  display: grid;
+  float: right;
+  grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
+  width: calc(100% - 200px);
+
+  h1 {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  h2 {
+    font-size: 1.25rem;
+    margin-bottom: 0.5rem;
+  }
+
+  h3 {
+    font-size: 1.15rem;
+    margin-bottom: 0.25rem;
+  }
+
+  p, ol, ul {
+    font-size: 1rem;
+    line-height: 1.5;
+    margin-bottom: 1rem;
+  }
+
+  ol, ul {
+    padding-left: 1rem;
+  }
+
+  table {
+    border: 1px solid rgba($white, 0.1);
+    border-radius: 0.3rem;
+    border-spacing: 0;
+    font-size: 0.8rem;
+    line-height: 1.33;
+    width: 100%;
+  }
+
+  thead {
+    display: none;
+  }
+
+  th, td {
+    padding: 0.5rem 1rem 0.5rem 0.5rem;
+  }
+
+  th {
+    border-bottom: 1px solid rgba($white, 0.1);
+  }
+
+  tr:nth-child(even) {
+    background-color: rgba($white, 0.1);
+  }
+}
+
+.api__content__body,
+.api__content__example {
+  padding: 2rem;
+}
+
+.api__content__body {
+  border-bottom: 1px solid rgba($gray, 0.3);
+}
+
+.api__content__example {
+  background-color: mix($gray, $black, 10%);
+  border-bottom: 1px solid rgba($white, 0.1);
+  color: $white;
+
+  pre {
+    margin-bottom: 1rem; padding: 1rem;
+
+    background-color: $black;
+    border-radius: 0.3rem;
+    line-height: 1.33;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+}

sass/style.scss

@@ -22,9 +22,10 @@
 
   "layout",
 
-  "pages/home",
+  "pages/api",
   "pages/contributing",
   "pages/documentation",
+  "pages/home",
   "pages/page",
   "pages/tour"
 ;

views/pages/_api.js

@@ -1,5 +0,0 @@
-// https://github.com/lbryio/lbry/blob/master/docs/api.json
-// https://rawgit.com/lbryio/lbry/master/docs/api.json
-// https://cdn.rawgit.com/lbryio/lbry/5b3103e4/docs/api.json
-
-// https://www.npmjs.com/package/make-fetch-happen

views/pages/api.js

@@ -0,0 +1,111 @@
+"use strict";
+
+
+
+//  P A C K A G E S
+
+const dedent = require("dedent");
+const fetch = require("make-fetch-happen").defaults({ cacheManager: "./cache" });
+const html = require("choo-async/html");
+const raw = require("nanohtml/raw");
+
+//  V A R I A B L E
+
+const apiFileLink = process.env.NODE_ENV === "development" ?
+  "https://rawgit.com/lbryio/lbry/master/docs/api.json" :
+  "https://cdn.rawgit.com/lbryio/lbry/5b3103e4/docs/api.json"
+;
+
+
+
+//  E X P O R T
+
+module.exports = exports = () => async () => parseApiFile().then(response => html`
+  <div class="__slate">
+    <aside class="api__toc">
+      <div class="api__toc__search">
+        <input class="api__toc__search__field" id="input-search" placeholder="Search" type="search"/>
+        <div class="api__toc__search__clear" id="clear-search" title="Clear search query">&times;</div>
+        <ul class="api__toc__search__results"></ul>
+      </div>
+
+      <ul class="api__toc__items" id="toc" role="navigation">${raw(createApiSidebar(response).join(""))}</ul>
+    </aside>
+
+    <section class="api__content" id="toc-content">${raw(createApiContent(response).join(""))}</section>
+  </div>
+`);
+
+
+
+//  H E L P E R S
+
+function createApiContent(apiDetails) {
+  const apiContent = [];
+
+  for (const apiDetail of apiDetails) {
+    const apiDetailsReturns = JSON.parse(JSON.stringify(apiDetail.returns));
+
+    apiContent.push(`
+      <div class="api__content__body">
+        <h2 id="#${apiDetail.name}">${apiDetail.name}</h2>
+        <p>${apiDetail.description}</p>
+
+        <h3>Returns</h3>
+        <pre><code>${dedent(apiDetailsReturns)}</code></pre>
+
+        <h3>Arguments</h3>
+        <ul class="api__content__body__arguments">${renderArguments(apiDetail.arguments).join("")}</ul>
+      </div>
+
+      <div class="api__content__example">
+        <pre><code>// example(s) for ${apiDetail.name} to come later</code></pre>
+      </div>
+    `);
+  }
+
+  return apiContent;
+}
+
+function createApiSidebar(apiDetails) {
+  const apiSidebar = [];
+
+  for (const apiDetail of apiDetails) {
+    apiSidebar.push(`
+      <li class="api__toc__item">
+        <a href="#${apiDetail.name}" title="Go to ${apiDetail.name} section">
+          ${apiDetail.name}
+        </a>
+      </li>
+    `);
+  }
+
+  return apiSidebar;
+}
+
+function parseApiFile() {
+  return fetch(apiFileLink).then(() => fetch(apiFileLink, {
+    cache: "no-cache" // forces a conditional request
+  })).then(res => res.json().then(body => body)); // res.status 304 = cache validated
+}
+
+function renderArguments(args) {
+  const argumentContent = [];
+
+  for (const arg of args) {
+    argumentContent.push(`
+      <li class="api__content__body__argument">
+        <div class="__left">
+          <strong>${arg.name}</strong><br/>
+          ${arg.is_required === true ? "" : "<span>optional</span>" }<span>${arg.type}</span>
+        </div>
+
+        <div class="__right">
+          <p>${arg.description}</p>
+        </div>
+      </li>
+    `);
+  }
+
+  return argumentContent;
+}

views/partials/head.js

@@ -21,6 +21,8 @@ module.exports = exports = () => async (state) => {
   if (state.route && state.route !== "/" && state.route !== "*") pageTitle = state.route.charAt(0).toUpperCase() + state.route.slice(1);
   if (state.params.wildcard) pageTitle = state.params.wildcard.charAt(0).toUpperCase() + state.params.wildcard.slice(1);
 
+  if (pageTitle === "Api") pageTitle = "API";
+
   return html`${[
     html`<meta charset="utf-8"/>`,
     html`<title>${pageTitle.length ? pageTitle + " | " : ""}${config.meta.title} &middot; ${config.meta.tagline}</title>`,