lbry.tech/app/views/api.js

306 lines
8.1 KiB
JavaScript
Raw Normal View History

2018-08-29 01:57:18 +02:00
"use strict";
2018-10-01 22:47:10 +02:00
2018-11-30 21:46:22 +01:00
// I M P O R T S
2018-10-01 22:47:10 +02:00
2018-08-29 18:58:55 +02:00
import asyncHtml from "choo-async/html";
2018-08-29 01:57:18 +02:00
import dedent from "dedent";
2019-01-08 18:25:34 +01:00
import got from "got";
2018-10-01 22:47:10 +02:00
2018-10-10 19:56:35 +02:00
// U T I L S
2018-08-29 01:57:18 +02:00
import headerBlockchain from "~component/api/header-blockchain";
import headerSdk from "~component/api/header-sdk";
import redirects from "~data/redirects.json";
2018-11-30 21:46:22 +01:00
const blockchainApi = "https://cdn.jsdelivr.net/gh/lbryio/lbrycrd@master/contrib/devtools/generated/api_v1.json";
2019-04-16 21:52:51 +02:00
const cache = new Map();
2019-04-15 04:37:09 +02:00
const sdkApi = "https://cdn.jsdelivr.net/gh/lbryio/lbry@master/docs/api.json";
2018-10-01 22:47:10 +02:00
// E X P O R T
2018-08-29 01:57:18 +02:00
2018-11-30 21:46:22 +01:00
export default async(state) => {
2019-02-15 17:50:56 +01:00
// below is evil, I just inherited it -- Jeremy
2019-04-12 21:08:35 +02:00
const apilabel = state.params.wildcard === "sdk" ?
"SDK" :
state.params.wildcard.charAt(0).toLocaleUpperCase() + state.params.wildcard.substring(1);
2019-02-15 17:50:56 +01:00
state.lbry = {
title: apilabel + " API Documentation",
description: "See API documentation, signatures, and sample calls for the LBRY " + apilabel + " APIs."
};
2018-11-30 21:46:22 +01:00
try {
const apiResponse = await parseApiFile(state.params.wildcard);
return asyncHtml`
<div class="__slate">
2019-01-30 23:15:10 +01:00
<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>
2018-11-30 21:46:22 +01:00
</div>
2019-04-12 21:08:35 +02:00
<ul class="api-toc__commands" id="toc" role="navigation">
${apilabel === "SDK" ? createSdkSidebar(apiResponse) : createApiSidebar(apiResponse)}
</ul>
2018-11-30 21:46:22 +01:00
</aside>
2019-01-30 23:15:10 +01:00
<section class="api-content">
<div class="api-documentation" id="toc-content">
2019-02-20 00:42:52 +01:00
<div></div>
2019-01-30 23:15:10 +01:00
<nav class="api-content__items">
<button class="api-content__item" id="toggle-curl" type="button">curl</button>
<button class="api-content__item" id="toggle-lbrynet" type="button">lbrynet</button>
<button class="api-content__item" id="toggle-python" type="button">python</button>
</nav>
${createApiHeader(state.params.wildcard)}
2019-04-12 21:08:35 +02:00
${apilabel === "SDK" ? createSdkContent(apiResponse) : createApiContent(apiResponse)}
2018-11-30 21:46:22 +01:00
</div>
</section>
</div>
<script src="/assets/scripts/plugins/jets.js"></script>
<script src="/assets/scripts/api.js"></script>
2019-01-30 23:15:10 +01:00
<script>
document.getElementById("toggle-curl").click();
</script>
2018-11-30 21:46:22 +01:00
`;
}
2019-01-08 18:25:34 +01:00
catch(error) {
2018-10-06 22:53:01 +02:00
const redirectUrl = redirects[state.href];
2018-08-29 01:57:18 +02:00
2018-10-06 22:53:01 +02:00
return asyncHtml`
2018-10-06 22:59:46 +02:00
<article class="page" itemtype="http://schema.org/BlogPosting">
<header class="page__header">
<div class="page__header-wrap">
<div class="inner-wrap">
<h1 class="page__header__title" itemprop="name headline">404</h1>
</div>
2018-10-01 22:47:10 +02:00
</div>
2018-10-06 22:59:46 +02:00
</header>
2018-08-29 01:57:18 +02:00
2018-10-06 22:59:46 +02:00
<section class="page__content page__markup" itemprop="articleBody">
<div class="inner-wrap">
<p>Redirecting you to <strong>${redirectUrl}</strong></p>
</div>
</section>
</article>
<script>
setTimeout(() => {
window.location.href = "${redirectUrl}";
}, 2000);
</script>
`;
2018-11-30 21:46:22 +01:00
}
};
2018-09-30 19:34:29 +02:00
2018-08-29 01:57:18 +02:00
2018-10-01 22:47:10 +02:00
// H E L P E R S
2018-10-01 06:40:24 +02:00
2018-08-29 01:57:18 +02:00
function createApiContent(apiDetails) {
const apiContent = [];
for (const apiDetail of apiDetails) {
let apiDetailsReturns = "";
2018-10-06 22:53:01 +02:00
2018-11-30 21:46:22 +01:00
if (apiDetail.returns)
apiDetailsReturns = JSON.parse(JSON.stringify(apiDetail.returns));
2018-08-29 01:57:18 +02:00
apiContent.push(`
2019-01-30 23:15:10 +01:00
<div class="api-content__body">
2018-08-29 01:57:18 +02:00
<h2 id="${apiDetail.name}">${apiDetail.name}</h2>
<p>${apiDetail.description}</p>
2019-01-30 23:15:10 +01:00
${apiDetail.arguments.length ? `<h3>Arguments</h3><ul class="api-content__body-arguments">${renderArguments(apiDetail.arguments).join("")}</ul>` : ""}
2018-08-29 01:57:18 +02:00
2019-04-06 22:53:17 +02:00
<h3>Returns</h3><pre><code>${dedent(apiDetailsReturns)}</code></pre>
2018-08-29 01:57:18 +02:00
</div>
2019-01-30 23:15:10 +01:00
<div class="api-content__example">
${apiDetail.examples && apiDetail.examples.length ? renderExamples(apiDetail.examples).join("") : `<pre><code>// example(s) for ${apiDetail.name} to come later</code></pre>`}
2018-08-29 01:57:18 +02:00
</div>
`);
}
return apiContent;
}
2018-10-01 22:47:10 +02:00
function createApiHeader(slug) {
switch(slug) {
case "blockchain":
return headerBlockchain();
case "sdk":
return headerSdk();
default:
break;
}
}
2018-08-29 01:57:18 +02:00
function createApiSidebar(apiDetails) {
const apiSidebar = [];
for (const apiDetail of apiDetails) {
apiSidebar.push(`
2019-04-12 21:08:35 +02:00
<li class="api-toc__command">
2018-08-29 01:57:18 +02:00
<a href="#${apiDetail.name}" title="Go to ${apiDetail.name} section">
${apiDetail.name}
</a>
</li>
`);
}
return apiSidebar;
}
2019-04-12 21:08:35 +02:00
function createSdkContent(apiDetails) {
const apiContent = [];
const sectionTitles = Object.keys(apiDetails);
for (const title of sectionTitles) {
const commands = apiDetails[title].commands;
const description = apiDetails[title].doc;
apiContent.push(
commands.length ?
commands.map(command => createSdkContentSections(title, description, command)).join("") :
""
);
}
return apiContent;
}
function createSdkContentSections(sectionTitle, sectionDescription, sectionDetails) {
return `
<div class="api-content__body">
<h2 id="${sectionDetails.name}">${sectionDetails.name}</h2>
<p>${sectionDetails.description}</p>
<h3>Arguments</h3>
<ul class="api-content__body-arguments">
${renderArguments(sectionDetails.arguments).join("")}
</ul>
<h3>Returns</h3>
<pre><code>${renderReturns(sectionDetails.returns)}</code></pre>
</div>
<div class="api-content__example">
${renderExamples(sectionDetails.examples).join("")}
</div>
`;
}
function createSdkSidebar(apiDetails) {
const sectionTitles = Object.keys(apiDetails);
const apiSidebar = [];
for (const title of sectionTitles) {
const commands = apiDetails[title].commands;
apiSidebar.push(`
<ul class="api-toc__section">
<li class="api-toc__title">${title}</li>
${(commands.map(command => `<li class="api-toc__command"><a href="#${command.name}" title="Go to ${command.name} section">${command.name}</a></li>`)).join("")}
</ul>
`);
}
return apiSidebar;
}
2019-01-08 18:25:34 +01:00
async function parseApiFile(urlSlug) {
2018-08-29 01:57:18 +02:00
let apiFileLink;
2018-10-01 22:47:10 +02:00
switch(true) {
case (urlSlug === "blockchain"):
2018-12-12 19:32:05 +01:00
apiFileLink = blockchainApi;
2018-10-01 22:47:10 +02:00
break;
2018-08-29 01:57:18 +02:00
2018-10-01 22:47:10 +02:00
case (urlSlug === "sdk"):
2018-12-12 19:32:05 +01:00
apiFileLink = sdkApi;
2018-10-01 22:47:10 +02:00
break;
default:
break;
}
2018-08-29 01:57:18 +02:00
2019-01-08 18:25:34 +01:00
if (!apiFileLink)
return Promise.reject(new Error("Failed to fetch API docs"));
2019-04-16 21:52:51 +02:00
const response = await got(apiFileLink, { cache, json: true });
2019-01-08 18:25:34 +01:00
try {
return response.body;
} catch(error) {
return "Issue loading API documentation";
}
2018-08-29 01:57:18 +02:00
}
function renderArguments(args) {
const argumentContent = [];
2019-04-12 21:08:35 +02:00
if (!args || args.length === 0)
return argumentContent;
2018-08-29 01:57:18 +02:00
for (const arg of args) {
argumentContent.push(`
2019-01-30 23:15:10 +01:00
<li class="api-content__body-argument">
2018-08-29 01:57:18 +02:00
<div class="left">
<strong>${arg.name}</strong><br/>
${arg.is_required === true ? "" : "<span>optional</span>" }<span>${arg.type}</span>
</div>
<div class="right">${typeof arg.description === "string" ? arg.description.replace(/</g, "&lt;").replace(/>/g, "&gt;") : ""}</div>
</li>
`);
}
return argumentContent;
}
2019-01-30 23:15:10 +01:00
function renderExamples(args) {
const exampleContent = [];
2019-04-12 21:08:35 +02:00
if (!args || args.length === 0) {
exampleContent.push("<pre><code>// example(s) to come later</code></pre>");
return exampleContent;
}
2019-01-30 23:15:10 +01:00
for (const arg of args) {
exampleContent.push(`
<h3>${arg.title}</h3><br/>
<pre data-api-example-type="curl"><code>${arg.curl}</code></pre>
<pre data-api-example-type="lbrynet"><code>${arg.lbrynet}</code></pre>
<pre data-api-example-type="python"><code>${arg.python}</code></pre>
<h3>Output</h3><br/>
<pre><code>${arg.output}</code></pre>
2019-04-12 21:08:35 +02:00
<hr/>
2019-01-30 23:15:10 +01:00
`);
}
return exampleContent;
}
2019-04-12 21:08:35 +02:00
function renderReturns(args) {
let returnContent = [];
if (!args || args.length === 0)
return returnContent;
returnContent = dedent(JSON.parse(JSON.stringify(args)));
return returnContent;
}