lbrycrd examples are fixed and new functionality is added

This commit is contained in:
ポール ウェッブ 2019-05-09 17:37:52 -05:00
parent 50ebc277d9
commit bb40fc1725
4 changed files with 97 additions and 83 deletions

View file

@ -35,6 +35,7 @@ document.querySelector(".api-toc__search-clear").addEventListener("click", () =>
// Code toggles // Code toggles
handleApiLanguageToggles("cli");
handleApiLanguageToggles("curl"); handleApiLanguageToggles("curl");
handleApiLanguageToggles("lbrynet"); handleApiLanguageToggles("lbrynet");
handleApiLanguageToggles("python"); handleApiLanguageToggles("python");
@ -44,6 +45,9 @@ handleApiLanguageToggles("python");
// H E L P E R S // H E L P E R S
function handleApiLanguageToggles(language) { function handleApiLanguageToggles(language) {
if (!document.getElementById(`toggle-${language}`))
return;
document.getElementById(`toggle-${language}`).addEventListener("click", () => { document.getElementById(`toggle-${language}`).addEventListener("click", () => {
const codeExamples = document.querySelectorAll(`[data-api-example-type="${language}"]`); const codeExamples = document.querySelectorAll(`[data-api-example-type="${language}"]`);
const examples = document.querySelectorAll("[data-api-example-type]"); const examples = document.querySelectorAll("[data-api-example-type]");

View file

@ -53,9 +53,7 @@ export default async(state) => {
<div class="api-documentation" id="toc-content"> <div class="api-documentation" id="toc-content">
<div></div> <div></div>
<nav class="api-content__items"> <nav class="api-content__items">
<button class="api-content__item" id="toggle-curl" type="button">curl</button> ${renderToggles(apilabel === "SDK")}
<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> </nav>
${createApiHeader(state.params.wildcard)} ${createApiHeader(state.params.wildcard)}
@ -68,7 +66,10 @@ export default async(state) => {
<script src="/assets/scripts/api.js"></script> <script src="/assets/scripts/api.js"></script>
<script> <script>
document.getElementById("toggle-curl").click(); if (window.location.pathname === "/api/blockchain")
document.getElementById("toggle-cli").click();
else
document.getElementById("toggle-curl").click();
</script> </script>
`; `;
} }
@ -109,7 +110,7 @@ export default async(state) => {
function createApiContent(apiDetails) { function createApiContent(apiDetails) {
const apiContent = []; const apiContent = [];
for (const apiDetail of apiDetails) { apiDetails.forEach(apiDetail => {
let apiDetailsReturns = ""; let apiDetailsReturns = "";
if (apiDetail.returns) if (apiDetail.returns)
@ -121,15 +122,14 @@ function createApiContent(apiDetails) {
<p>${apiDetail.description}</p> <p>${apiDetail.description}</p>
${apiDetail.arguments.length ? `<h3>Arguments</h3><ul class="api-content__body-arguments">${renderArguments(apiDetail.arguments).join("")}</ul>` : ""} ${apiDetail.arguments.length ? `<h3>Arguments</h3><ul class="api-content__body-arguments">${renderArguments(apiDetail.arguments).join("")}</ul>` : ""}
${apiDetail.returns ? `<h3>Returns</h3><pre><code>${dedent(apiDetailsReturns)}</code></pre>` : ""}
<h3>Returns</h3><pre><code>${dedent(apiDetailsReturns)}</code></pre>
</div> </div>
<div class="api-content__example"> <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>`} ${apiDetail.examples && apiDetail.examples.length ? renderExamples(apiDetail.examples).join("") : `<pre><code>// example(s) for ${apiDetail.name} to come later</code></pre>`}
</div> </div>
`); `);
} });
return apiContent; return apiContent;
} }
@ -150,7 +150,7 @@ function createApiHeader(slug) {
function createApiSidebar(apiDetails) { function createApiSidebar(apiDetails) {
const apiSidebar = []; const apiSidebar = [];
for (const apiDetail of apiDetails) { apiDetails.forEach(apiDetail => {
apiSidebar.push(` apiSidebar.push(`
<li class="api-toc__command"> <li class="api-toc__command">
<a href="#${apiDetail.name}" title="Go to ${apiDetail.name} section"> <a href="#${apiDetail.name}" title="Go to ${apiDetail.name} section">
@ -158,7 +158,7 @@ function createApiSidebar(apiDetails) {
</a> </a>
</li> </li>
`); `);
} });
return apiSidebar; return apiSidebar;
} }
@ -167,7 +167,7 @@ function createSdkContent(apiDetails) {
const apiContent = []; const apiContent = [];
const sectionTitles = Object.keys(apiDetails); const sectionTitles = Object.keys(apiDetails);
for (const title of sectionTitles) { sectionTitles.forEach(title => {
const commands = apiDetails[title].commands; const commands = apiDetails[title].commands;
const description = apiDetails[title].doc; const description = apiDetails[title].doc;
@ -176,7 +176,7 @@ function createSdkContent(apiDetails) {
commands.map(command => createSdkContentSections(title, description, command)).join("") : commands.map(command => createSdkContentSections(title, description, command)).join("") :
"" ""
); );
} });
return apiContent; return apiContent;
} }
@ -206,7 +206,7 @@ function createSdkSidebar(apiDetails) {
const sectionTitles = Object.keys(apiDetails); const sectionTitles = Object.keys(apiDetails);
const apiSidebar = []; const apiSidebar = [];
for (const title of sectionTitles) { sectionTitles.forEach(title => {
const commands = apiDetails[title].commands; const commands = apiDetails[title].commands;
apiSidebar.push(` apiSidebar.push(`
@ -215,7 +215,7 @@ function createSdkSidebar(apiDetails) {
${(commands.map(command => `<li class="api-toc__command"><a href="#${command.name}" title="Go to ${command.name} section">${command.name}</a></li>`)).join("")} ${(commands.map(command => `<li class="api-toc__command"><a href="#${command.name}" title="Go to ${command.name} section">${command.name}</a></li>`)).join("")}
</ul> </ul>
`); `);
} });
return apiSidebar; return apiSidebar;
} }
@ -254,7 +254,7 @@ function renderArguments(args) {
if (!args || args.length === 0) if (!args || args.length === 0)
return argumentContent; return argumentContent;
for (const arg of args) { args.forEach(arg => {
argumentContent.push(` argumentContent.push(`
<li class="api-content__body-argument"> <li class="api-content__body-argument">
<div class="left"> <div class="left">
@ -265,7 +265,7 @@ function renderArguments(args) {
<div class="right">${typeof arg.description === "string" ? arg.description.replace(/</g, "&lt;").replace(/>/g, "&gt;") : ""}</div> <div class="right">${typeof arg.description === "string" ? arg.description.replace(/</g, "&lt;").replace(/>/g, "&gt;") : ""}</div>
</li> </li>
`); `);
} });
return argumentContent; return argumentContent;
} }
@ -278,18 +278,21 @@ function renderExamples(args) {
return exampleContent; return exampleContent;
} }
for (const arg of args) { args.forEach(arg => {
exampleContent.push(` exampleContent.push(`
<h3>${arg.title}</h3><br/> ${arg.title ? `<h3>${arg.title}</h3><br/>` : ""}
<pre data-api-example-type="curl"><code>${arg.curl}</code></pre> ${arg.cli ? `<pre data-api-example-type="cli"><code>${arg.cli}</code></pre>` : ""}
<pre data-api-example-type="lbrynet"><code>${arg.lbrynet}</code></pre> ${arg.curl ? `<pre data-api-example-type="curl"><code>${arg.curl}</code></pre>` : ""}
<pre data-api-example-type="python"><code>${arg.python}</code></pre> ${arg.lbrynet ? `<pre data-api-example-type="lbrynet"><code>${arg.lbrynet}</code></pre>` : ""}
${arg.python ? `<pre data-api-example-type="python"><code>${arg.python}</code></pre>` : ""}
<h3>Output</h3><br/> ${arg.output ? `
<pre><code>${arg.output}</code></pre> <h3>Output</h3><br/>
<hr/> <pre><code>${arg.output}</code></pre>
<hr/>
` : ""}
`); `);
} });
return exampleContent; return exampleContent;
} }
@ -303,3 +306,12 @@ function renderReturns(args) {
returnContent = dedent(JSON.parse(JSON.stringify(args))); returnContent = dedent(JSON.parse(JSON.stringify(args)));
return returnContent; return returnContent;
} }
function renderToggles(onSdkPage) {
return [
!onSdkPage ? "<button class='api-content__item' id='toggle-cli' type='button'>cli</button>" : "",
"<button class='api-content__item' id='toggle-curl' type='button'>curl</button>",
onSdkPage ? "<button class='api-content__item' id='toggle-lbrynet' type='button'>lbrynet</button>" : "",
onSdkPage ? "<button class='api-content__item' id='toggle-python' type='button'>python</button>" : ""
];
}

View file

@ -27,53 +27,54 @@ If you want to read a more general overview on application building (or you don'
## Hello Satoshi ## Hello Satoshi
This section will guide you through creating a basic [Electron](https://electronjs.org/) application that calls to the LBRY network and renders an image returned by the network. This section will guide you through creating a basic [Electron](https://electronjs.org) application that calls to the LBRY network and renders an image returned by the network.
Electron is nice because it allows you to easily create web apps that don't rely on any centralized web servers, but you can absolutely use any tooling or language you would like. Electron is nice because it allows you to easily create web apps that don't rely on any centralized web servers, but you can absolutely use any tooling or language you would like.
### The Steps ### The Steps
_These steps require [npm](https://www.npmjs.com/). Learn how to install it [here](https://www.npmjs.com/get-npm)._ _These steps require [npm](https://www.npmjs.com). Learn how to install it [here](https://www.npmjs.com/get-npm)._
#### 1. Download and build the starter app #### 1. Download and build the starter app
[electron-starter](https://github.com/lbryio/electron-starter) is the `create-react-app` of LBRY application building. [electron-starter](https://github.com/lbryio/electron-starter) is the `create-react-app` of LBRY application building.
``` ```
git clone https://github.com/lbryio/electron-starter git clone https://github.com/lbryio/electron-starter
cd electron-starter cd electron-starter
npm install npm install
npm run dev npm run dev
``` ```
#### 2. Verify the app works #### 2. Verify the app works
Type a word into the text input and click the button to [resolve](https://lbry.tech/api/sdk#resolve) it. This performs a [[claim]] lookup, which retrieves metadata the title, thumbnail, and file type from the LBRY blockchain. Type a word into the text input and click the button to [resolve](https://lbry.tech/api/sdk#resolve) it. This performs a [[claim]] lookup, which retrieves metadata the title, thumbnail, and file type from the LBRY blockchain.
Try resolving `lbry://doitlive`. Try resolving `lbry://doitlive`.
#### 3. Modify the code #### 3. Modify the code
Now that we have the metadata, let's [get](https://lbry.tech/api/sdk#get) the actual file! The code to do this is already there, just un-comment these lines in the app's [renderer/index.js](https://github.com/lbryio/electron-starter/blob/master/src/renderer/index.js) file. Now that we have the metadata, let's [get](https://lbry.tech/api/sdk#get) the actual file! The code to do this is already there, just un-comment these lines in the app's [renderer/index.js](https://github.com/lbryio/electron-starter/blob/master/src/renderer/index.js) file.
``` ```js
claimData.innerText = "Loading..."; claimData.innerText = "Loading...";
Lbry.get({ uri: `lbry://${value}` })
.then(result => {
const filePath = result.download_path;
const image = document.createElement("img");
image.src = filePath; Lbry.get({ uri: `lbry://${value}` })
imageWrapper.appendChild(image); .then(result => {
const filePath = result.download_path;
const image = document.createElement("img");
claimData.innerText = JSON.stringify(result, null, 2); image.src = filePath;
}) imageWrapper.appendChild(image);
.catch(error => {
claimData.innerText = JSON.stringify(error, null, 2);
});
```
This is the code that actually downloads a file. There are more robust ways to handle the download progress, but this will work fine for images. After you added that code back, try `get`ing `lbry://doitlive`. claimData.innerText = JSON.stringify(result, null, 2);
})
.catch(error => {
claimData.innerText = JSON.stringify(error, null, 2);
});
```
This is the code that actually downloads a file. There are more robust ways to handle the download progress, but this will work fine for images. After you added that code back, try `get`ing `lbry://doitlive`.
### You Did It! ### You Did It!
@ -127,9 +128,9 @@ It is also possible to create a browser extension similar to Joule and Metamask.
1. Have the user run a local copy of the [SDK](#sdk) on their computer and send commands from the browser that interact with the user's personal wallet. 1. Have the user run a local copy of the [SDK](#sdk) on their computer and send commands from the browser that interact with the user's personal wallet.
2. Run the [SDK](#sdk) on a centrally hosted server and manage keys or funds for each user. If you're doing this, you'll want to read [Full Web Applications](#full-web-applications). 1. Run the [SDK](#sdk) on a centrally hosted server and manage keys or funds for each user. If you're doing this, you'll want to read [Full Web Applications](#full-web-applications).
Going through a centralized server makes it easier on users, but comes with more responsibility to keep your user's funds secure. It also requires creating business logic on your server to associate user accounts with common types like claims and files. Going through a centralized server makes it easier on users, but comes with more responsibility to keep your user's funds secure. It also requires creating business logic on your server to associate user accounts with common types like claims and files.
#### Desktop Applications #### Desktop Applications
@ -178,7 +179,7 @@ We do not currently have tooling available to build LBRY apps on iOS.
### SDK ### SDK
The [LBRY SDK](https://github.com/lbryio/lbry) provides an API that enables easy access to all functionality of the LBRY network. Most applications will choose to use the SDK. The [LBRY SDK](https://github.com/lbryio/lbry) provides an API that enables easy access to all functionality of the LBRY network. Most applications will choose to use the SDK.
You can download the latest version from the [releases page](https://github.com/lbryio/lbry/releases) or via the following URLs, which will always download the latest SDK for each operating system: You can download the latest version from the [releases page](https://github.com/lbryio/lbry/releases) or via the following URLs, which will always download the latest SDK for each operating system:
@ -195,10 +196,10 @@ Once that is downloaded, there are two steps to get it integrated into your app.
First, run `lbrynet start` in the directory you downloaded the SDK. This starts the API server and connects to the LBRY network. First, run `lbrynet start` in the directory you downloaded the SDK. This starts the API server and connects to the LBRY network.
Then, use an API wrapper to talk to the SDK or write your own. There are a number of simple [api wrappers](https://lbry.tech/resources/api-wrappers) available in several different languages, created by LBRY community members! These allow you to easily send commands to the SDK in the language of your choice. Then, use an API wrapper to talk to the SDK or write your own. There are a number of simple [api wrappers](https://lbry.tech/resources/api-wrappers) available in several different languages, created by LBRY community members! These allow you to easily send commands to the SDK in the language of your choice.
If a wrapper for the language you would like to use doesn't exist, it is still fairly easy to interact with. The SDK provides a JSON-RPC server at `localhost:5279` for interaction. You can call it via `cURL` or the HTTP functionality provided by the language you are using. You can look at an existing wrapper in another language for more detail. If a wrapper for the language you would like to use doesn't exist, it is still fairly easy to interact with. The SDK provides a JSON-RPC server at `localhost:5279` for interaction. You can call it via `cURL` or the HTTP functionality provided by the language you are using. You can look at an existing wrapper in another language for more detail.
The API provided by the SDK is documented [here](https://lbry.tech/api/sdk). The API provided by the SDK is documented [here](https://lbry.tech/api/sdk).
### Chainquery ### Chainquery
@ -245,10 +246,7 @@ A full list of methods is available [here](https://lbry.tech/api/blockchain).
## Community and Support ## Community and Support
Trouble? Questions? Want to share your progress? Interact with other devs! Trouble? Questions? Want to share your progress? Interact with other devs!
- Join the #dev channel [in our chat](https://chat.lbry.com) - Join the #dev channel [in our chat](https://chat.lbry.com)
- Introduce yourself or ask a question in [the forum](https://forum.lbry.tech/). - Introduce yourself or ask a question in [the forum](https://forum.lbry.tech).
- Every LBRY repository on our [GitHub](https://github.com/lbryio) contains contact information for the maintainer. - Every LBRY repository on our [GitHub](https://github.com/lbryio) contains contact information for the maintainer.

View file

@ -10,10 +10,10 @@
}, },
"author": "LBRY Team", "author": "LBRY Team",
"dependencies": { "dependencies": {
"@babel/polyfill": "^7.4.3", "@babel/polyfill": "^7.4.4",
"@inc/fastify-ws": "^1.1.0", "@inc/fastify-ws": "^1.1.0",
"@octokit/rest": "^16.23.4", "@octokit/rest": "^16.25.3",
"@slack/client": "^5.0.0", "@slack/client": "^5.0.1",
"async": "^2.6.2", "async": "^2.6.2",
"async-es": "^2.6.2", "async-es": "^2.6.2",
"choo": "^6.13.3", "choo": "^6.13.3",
@ -23,16 +23,16 @@
"choo-websocket": "^2.0.0", "choo-websocket": "^2.0.0",
"colorette": "^1.0.7", "colorette": "^1.0.7",
"cors": "^2.8.5", "cors": "^2.8.5",
"cron": "^1.7.0", "cron": "^1.7.1",
"date-format-lite": "^17.7.0", "date-format-lite": "^17.7.0",
"decamelize": "^3.2.0", "decamelize": "^3.2.0",
"dedent": "^0.7.0", "dedent": "^0.7.0",
"dotenv": "^7.0.0", "dotenv": "^8.0.0",
"fastify": "~2.2.0", "fastify": "~2.3.0",
"fastify-compress": "^0.8.1", "fastify-compress": "^0.9.0",
"fastify-helmet": "^3.0.0", "fastify-helmet": "^3.0.0",
"fastify-static": "^2.4.0", "fastify-static": "^2.4.0",
"front-matter": "^3.0.1", "front-matter": "^3.0.2",
"fs-exists-sync": "^0.1.0", "fs-exists-sync": "^0.1.0",
"got": "^9.6.0", "got": "^9.6.0",
"graceful-fs": "^4.1.15", "graceful-fs": "^4.1.15",
@ -48,11 +48,11 @@
}, },
"description": "Documentation for the LBRY protocol and associated projects", "description": "Documentation for the LBRY protocol and associated projects",
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.4.3", "@babel/cli": "^7.4.4",
"@babel/core": "^7.4.3", "@babel/core": "^7.4.4",
"@babel/plugin-external-helpers": "7.2.0", "@babel/plugin-external-helpers": "7.2.0",
"@babel/plugin-proposal-class-properties": "7.4.0", "@babel/plugin-proposal-class-properties": "7.4.4",
"@babel/plugin-proposal-decorators": "7.4.0", "@babel/plugin-proposal-decorators": "7.4.4",
"@babel/plugin-proposal-export-namespace-from": "7.2.0", "@babel/plugin-proposal-export-namespace-from": "7.2.0",
"@babel/plugin-proposal-function-sent": "7.2.0", "@babel/plugin-proposal-function-sent": "7.2.0",
"@babel/plugin-proposal-json-strings": "7.2.0", "@babel/plugin-proposal-json-strings": "7.2.0",
@ -60,22 +60,22 @@
"@babel/plugin-proposal-throw-expressions": "7.2.0", "@babel/plugin-proposal-throw-expressions": "7.2.0",
"@babel/plugin-syntax-dynamic-import": "7.2.0", "@babel/plugin-syntax-dynamic-import": "7.2.0",
"@babel/plugin-syntax-import-meta": "7.2.0", "@babel/plugin-syntax-import-meta": "7.2.0",
"@babel/preset-env": "^7.4.3", "@babel/preset-env": "^7.4.4",
"@babel/register": "^7.4.0", "@babel/register": "^7.4.4",
"@inc/eslint-config": "^1.1.3", "@inc/eslint-config": "^1.1.3",
"@inc/sasslint-config": "^1.2.0", "@inc/sasslint-config": "^2019.5.7",
"@lbry/color": "^1.1.1", "@lbry/color": "^1.1.1",
"@lbry/components": "^2.4.0", "@lbry/components": "^2.7.1",
"eslint": "^5.16.0", "eslint": "^5.16.0",
"husky": "^1.3.1", "husky": "^2.2.0",
"nodemon": "^1.18.11", "nodemon": "^1.19.0",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"pino-pretty": "^2.6.0", "pino-pretty": "^3.0.0",
"sass": "^1.18.0", "sass": "^1.20.1",
"sass-lint": "^1.12.1", "sass-lint": "^1.13.1",
"snazzy": "^8.0.0", "snazzy": "^8.0.0",
"standardx": "^3.0.1", "standardx": "^3.0.1",
"updates": "^8.0.1" "updates": "^8.0.3"
}, },
"engines": { "engines": {
"node": "10.2.x" "node": "10.2.x"