LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

lbrycrd examples are fixed and new functionality is added

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/dist/scripts/api.js vendored
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]");

62
app/views/api.js
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>" : ""
];
}

58
documents/build.md
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,7 +128,7 @@ 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.
@ -247,8 +248,5 @@ A full list of methods is available [here](https://lbry.tech/api/blockchain).
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.

44
package.json
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"