app/data/redirects.json

@@ -9,11 +9,11 @@
   "/resources/schema": "/spec#metadata",
   "/resources/signing-claim": "/resources/claim-signing",
   "/resources/uri": "/spec#urls",
-  "/resources/video-lbrysdk": "https://spee.ch/967f99344308f1e90f0620d91b6c93e4dfb240e0/lbrynet-dev-setup",
+  "/resources/video-lbryandroid": "https://spee.ch/e781060bc708247f07afebc02d5f75cfba8e2c4b/video-2018-10-15053403",
   "/resources/video-lbrycrd": "https://spee.ch/5803b66dca7707584b36fe6b644f278fc39d1adf/intro-to-LBRYcrd",
   "/resources/video-lbrydesktop": "https://spee.ch/7da73fc508ffc4ff8b2711e3c3950110430b0c5f/LBRYAppDesign",
-  "/resources/video-lbryandroid": "https://spee.ch/e781060bc708247f07afebc02d5f75cfba8e2c4b/video-2018-10-15053403",
-  "/tour": "/playground",
+  "/resources/video-lbrysdk": "https://spee.ch/967f99344308f1e90f0620d91b6c93e4dfb240e0/lbrynet-dev-setup",
   "/specification": "/spec",
+  "/tour": "/playground",
   "/whitepaper": "/spec"
 }

app/dist/scripts/api.js

@@ -60,6 +60,10 @@ handleApiLanguageToggles("python");
 
 //  H E L P E R S
 
+function changeDocumentationVersion(value) {
+  console.log(value);
+}
+
 function handleApiLanguageToggles(language) {
   if (!document.getElementById(`toggle-${language}`))
     return;

app/modules/relative-date.js

@@ -4,7 +4,7 @@
 
 //  P R O G R A M
 
-const relativeDate = (undefined => {
+const relativeDate = (() => {
   const SECOND = 1000;
   const MINUTE = 60 * SECOND;
   const HOUR = 60 * MINUTE;
@@ -53,6 +53,5 @@ const relativeDate = (undefined => {
 
 //  E X P O R T
 
-if (typeof module !== "undefined" && module.exports) {
+if (typeof module !== "undefined" && module.exports)
   module.exports = exports = relativeDate;
-}

app/sass/pages/_api.scss

@@ -55,18 +55,27 @@
   }
 }
 
-.api-toc__search {
-  position: relative;
-}
-
+.api-toc__select,
 .api-toc__search-field {
   width: 100%;
-  padding: 0.25rem calc(2rem + 4px) 0.25rem 0.75rem;
 
   border-top: none;
   border-right: none;
   border-bottom: 1px solid $lbry-gray-1;
   border-left: none;
+}
+
+.api-toc__select {
+  background-position-x: 95%;
+}
+
+.api-toc__search {
+  position: relative;
+}
+
+.api-toc__search-field {
+  padding: 0.25rem calc(2rem + 4px) 0.25rem 0.75rem;
+
   border-radius: 0; // TODO: Put this rule in components on inputs
   font-size: 0.8rem;
   line-height: 2rem;

app/views/api.js

@@ -7,6 +7,7 @@
 import asyncHtml from "choo-async/html";
 import dedent from "dedent";
 import got from "got";
+import Octokit from "@octokit/rest";
 
 //  U T I L S
 
@@ -14,31 +15,45 @@ import headerBlockchain from "~component/api/header-blockchain";
 import headerSdk from "~component/api/header-sdk";
 import redirects from "~data/redirects.json";
 
-const blockchainApi = "https://raw.githubusercontent.com/lbryio/lbrycrd/master/contrib/devtools/generated/api_v1.json";
 const cache = new Map();
-const sdkApi = "https://raw.githubusercontent.com/lbryio/lbry-sdk/master/lbry/docs/api.json";
+const filePathBlockchain = "/contrib/devtools/generated/api_v1.json";
+const filePathSdk = "/lbry/docs/api.json";
+const rawGitHubBase = "https://raw.githubusercontent.com/lbryio/";
+
+if (!process.env.GITHUB_OAUTH_TOKEN) // No point in rendering this page
+  throw new Error("Missing GitHub token");
+
+const octokit = new Octokit({
+  auth: `token ${process.env.GITHUB_OAUTH_TOKEN}`
+});
 
 
 
 //  E X P O R T
 
 export default async(state) => {
-  // below is evil, I just inherited it -- Jeremy
-  const apilabel = state.params.wildcard === "sdk" ?
-    "SDK" :
-    state.params.wildcard.charAt(0).toLocaleUpperCase() + state.params.wildcard.substring(1);
-
   state.lbry = {
-    title: apilabel + " API Documentation",
-    description: "See API documentation, signatures, and sample calls for the LBRY " + apilabel + " APIs."
+    title: "API Documentation",
+    description: "See API documentation, signatures, and sample calls for the LBRY APIs."
   };
 
+  const { wildcard } = state.params;
+
+  const repository = wildcard === "sdk" ?
+    "lbry-sdk" :
+    "lbrycrd";
+
+  const tags = await getTags(repository);
+
   try {
-    const apiResponse = await parseApiFile(state.params.wildcard);
+    const apiResponse = await parseApiFile({ repo: repository, tag: tags[0] });
 
     return asyncHtml`
       <div class="__slate">
         <aside class="api-toc">
+          <select class="api-toc__select" onchange="changeDocumentationVersion(value);">
+            ${renderVersionSelector(wildcard, tags)}
+          </select>
           <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>
@@ -46,18 +61,18 @@ export default async(state) => {
           </div>
 
           <ul class="api-toc__commands" id="toc" role="navigation">
-            ${apilabel === "SDK" ? createSdkSidebar(apiResponse) : createApiSidebar(apiResponse)}
+            ${wildcard === "sdk" ? createSdkSidebar(apiResponse) : createApiSidebar(apiResponse)}
           </ul>
         </aside>
         <section class="api-content">
           <div class="api-documentation" id="toc-content">
             <div></div>
             <nav class="api-content__items">
-              ${renderToggles(apilabel === "SDK")}
+              ${renderCodeLanguageToggles(wildcard)}
             </nav>
 
-            ${createApiHeader(state.params.wildcard)}
-            ${apilabel === "SDK" ? createSdkContent(apiResponse) : createApiContent(apiResponse)}
+            ${createApiHeader(wildcard)}
+            ${wildcard === "sdk" ? createSdkContent(apiResponse) : createApiContent(apiResponse)}
           </div>
         </section>
       </div>
@@ -220,24 +235,70 @@ function createSdkSidebar(apiDetails) {
   return apiSidebar;
 }
 
-async function parseApiFile(urlSlug) {
-  let apiFileLink;
+async function getTags(repositoryName) {
+  const { data } = await octokit.repos.listTags({
+    owner: "lbryio",
+    repo: repositoryName
+  });
+
+  const tags = [];
+
+  // NOTE:
+  // The versioning in our repos do not make sense so extra
+  // exclusion code is needed to make this work.
+  //
+  // Documentation is only available after specific versions.
 
   switch(true) {
-    case (urlSlug === "blockchain"):
-      apiFileLink = blockchainApi;
+    case repositoryName === "lbry-sdk":
+      data.forEach(tag => {
+        if (
+          tag.name >= "v0.38.0" &&
+          tag.name !== "v0.38.0rc7" &&
+          tag.name !== "v0.38.0rc6" &&
+          tag.name !== "v0.38.0rc5" &&
+          tag.name !== "v0.38.0rc4" &&
+          tag.name !== "v0.38.0rc3" &&
+          tag.name !== "v0.38.0rc2" &&
+          tag.name !== "v0.38.0rc1"
+        ) tags.push(tag.name);
+      });
       break;
 
-    case (urlSlug === "sdk"):
-      apiFileLink = sdkApi;
+    case repositoryName === "lbrycrd":
+      data.forEach(tag => {
+        if (
+          tag.name >= "v0.17.1.0" &&
+          tag.name !== "v0.3.16" &&
+          tag.name !== "v0.3.15" &&
+          tag.name !== "v0.3-osx" &&
+          tag.name !== "v0.2-alpha"
+        ) tags.push(tag.name);
+      });
       break;
 
     default:
       break;
   }
 
-  if (!apiFileLink)
-    return Promise.reject(new Error("Failed to fetch API docs"));
+  return tags;
+}
+
+async function parseApiFile({ repo, tag }) {
+  let apiFileLink = `${rawGitHubBase}${repo}/${tag}`;
+
+  switch(true) {
+    case (repo === "lbrycrd"):
+      apiFileLink = `${apiFileLink}${filePathBlockchain}`;
+      break;
+
+    case (repo === "lbry-sdk"):
+      apiFileLink = `${apiFileLink}${filePathSdk}`;
+      break;
+
+    default:
+      return Promise.reject(new Error("Failed to fetch API docs"));
+  }
 
   const response = await got(apiFileLink, { cache, json: true });
 
@@ -307,7 +368,21 @@ function renderReturns(args) {
   return returnContent;
 }
 
-function renderToggles(onSdkPage) {
+function renderVersionSelector(pageSlug, versions) {
+  const options = [
+    "<option disabled>Select a version</option>"
+  ];
+
+  versions.forEach(version => {
+    options.push(`<option value="${pageSlug}-${version}">${version}</option>`);
+  });
+
+  return options;
+}
+
+function renderCodeLanguageToggles(pageSlug) {
+  const onSdkPage = pageSlug === "sdk";
+
   return [
     "<button class='api-content__item menu' id='toggle-menu'>menu</button>",
     !onSdkPage ? "<button class='api-content__item' id='toggle-cli' type='button'>cli</button>" : "",

app/views/redirect.js

@@ -37,7 +37,7 @@ export default (state, emit) => { // eslint-disable-line
     const customMetadata = {};
 
     for (const key in markdownFileDetails.attributes.meta) {
-      if (markdownFileDetails.attributes.meta.hasOwnProperty(key)) {
+      if (Object.prototype.hasOwnProperty.call(markdownFileDetails.attributes.meta, key)) {
         customMetadata[Object.keys(markdownFileDetails.attributes.meta[key])[0]] =
           markdownFileDetails.attributes.meta[key][Object.keys(markdownFileDetails.attributes.meta[key])[0]];
       }