lbrycrd examples are fixed and new functionality is added
This commit is contained in:
ポール ウェッブ
parent
50ebc277d9
commit
bb40fc1725
4 changed files with 97 additions and 83 deletions
4
app/dist/scripts/api.js
vendored
4
app/dist/scripts/api.js
vendored
|
|
@ -35,6 +35,7 @@ document.querySelector(".api-toc__search-clear").addEventListener("click", () =>
|
|||
|
||||
|
||||
// Code toggles
|
||||
handleApiLanguageToggles("cli");
|
||||
handleApiLanguageToggles("curl");
|
||||
handleApiLanguageToggles("lbrynet");
|
||||
handleApiLanguageToggles("python");
|
||||
|
|
@ -44,6 +45,9 @@ handleApiLanguageToggles("python");
|
|||
// H E L P E R S
|
||||
|
||||
function handleApiLanguageToggles(language) {
|
||||
if (!document.getElementById(`toggle-${language}`))
|
||||
return;
|
||||
|
||||
document.getElementById(`toggle-${language}`).addEventListener("click", () => {
|
||||
const codeExamples = document.querySelectorAll(`[data-api-example-type="${language}"]`);
|
||||
const examples = document.querySelectorAll("[data-api-example-type]");
|
||||
|
|
|
|||
|
|
@ -53,9 +53,7 @@ export default async(state) => {
|
|||
<div class="api-documentation" id="toc-content">
|
||||
<div></div>
|
||||
<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>
|
||||
${renderToggles(apilabel === "SDK")}
|
||||
</nav>
|
||||
|
||||
${createApiHeader(state.params.wildcard)}
|
||||
|
|
@ -68,7 +66,10 @@ export default async(state) => {
|
|||
<script src="/assets/scripts/api.js"></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>
|
||||
`;
|
||||
}
|
||||
|
|
@ -109,7 +110,7 @@ export default async(state) => {
|
|||
function createApiContent(apiDetails) {
|
||||
const apiContent = [];
|
||||
|
||||
for (const apiDetail of apiDetails) {
|
||||
apiDetails.forEach(apiDetail => {
|
||||
let apiDetailsReturns = "";
|
||||
|
||||
if (apiDetail.returns)
|
||||
|
|
@ -121,15 +122,14 @@ function createApiContent(apiDetails) {
|
|||
<p>${apiDetail.description}</p>
|
||||
|
||||
${apiDetail.arguments.length ? `<h3>Arguments</h3><ul class="api-content__body-arguments">${renderArguments(apiDetail.arguments).join("")}</ul>` : ""}
|
||||
|
||||
<h3>Returns</h3><pre><code>${dedent(apiDetailsReturns)}</code></pre>
|
||||
${apiDetail.returns ? `<h3>Returns</h3><pre><code>${dedent(apiDetailsReturns)}</code></pre>` : ""}
|
||||
</div>
|
||||
|
||||
<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>`}
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
||||
return apiContent;
|
||||
}
|
||||
|
|
@ -150,7 +150,7 @@ function createApiHeader(slug) {
|
|||
function createApiSidebar(apiDetails) {
|
||||
const apiSidebar = [];
|
||||
|
||||
for (const apiDetail of apiDetails) {
|
||||
apiDetails.forEach(apiDetail => {
|
||||
apiSidebar.push(`
|
||||
<li class="api-toc__command">
|
||||
<a href="#${apiDetail.name}" title="Go to ${apiDetail.name} section">
|
||||
|
|
@ -158,7 +158,7 @@ function createApiSidebar(apiDetails) {
|
|||
</a>
|
||||
</li>
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
||||
return apiSidebar;
|
||||
}
|
||||
|
|
@ -167,7 +167,7 @@ function createSdkContent(apiDetails) {
|
|||
const apiContent = [];
|
||||
const sectionTitles = Object.keys(apiDetails);
|
||||
|
||||
for (const title of sectionTitles) {
|
||||
sectionTitles.forEach(title => {
|
||||
const commands = apiDetails[title].commands;
|
||||
const description = apiDetails[title].doc;
|
||||
|
||||
|
|
@ -176,7 +176,7 @@ function createSdkContent(apiDetails) {
|
|||
commands.map(command => createSdkContentSections(title, description, command)).join("") :
|
||||
""
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return apiContent;
|
||||
}
|
||||
|
|
@ -206,7 +206,7 @@ function createSdkSidebar(apiDetails) {
|
|||
const sectionTitles = Object.keys(apiDetails);
|
||||
const apiSidebar = [];
|
||||
|
||||
for (const title of sectionTitles) {
|
||||
sectionTitles.forEach(title => {
|
||||
const commands = apiDetails[title].commands;
|
||||
|
||||
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("")}
|
||||
</ul>
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
||||
return apiSidebar;
|
||||
}
|
||||
|
|
@ -254,7 +254,7 @@ function renderArguments(args) {
|
|||
if (!args || args.length === 0)
|
||||
return argumentContent;
|
||||
|
||||
for (const arg of args) {
|
||||
args.forEach(arg => {
|
||||
argumentContent.push(`
|
||||
<li class="api-content__body-argument">
|
||||
<div class="left">
|
||||
|
|
@ -265,7 +265,7 @@ function renderArguments(args) {
|
|||
<div class="right">${typeof arg.description === "string" ? arg.description.replace(/</g, "<").replace(/>/g, ">") : ""}</div>
|
||||
</li>
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
||||
return argumentContent;
|
||||
}
|
||||
|
|
@ -278,18 +278,21 @@ function renderExamples(args) {
|
|||
return exampleContent;
|
||||
}
|
||||
|
||||
for (const arg of args) {
|
||||
args.forEach(arg => {
|
||||
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>
|
||||
${arg.title ? `<h3>${arg.title}</h3><br/>` : ""}
|
||||
${arg.cli ? `<pre data-api-example-type="cli"><code>${arg.cli}</code></pre>` : ""}
|
||||
${arg.curl ? `<pre data-api-example-type="curl"><code>${arg.curl}</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/>
|
||||
<pre><code>${arg.output}</code></pre>
|
||||
<hr/>
|
||||
${arg.output ? `
|
||||
<h3>Output</h3><br/>
|
||||
<pre><code>${arg.output}</code></pre>
|
||||
<hr/>
|
||||
` : ""}
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
||||
return exampleContent;
|
||||
}
|
||||
|
|
@ -303,3 +306,12 @@ function renderReturns(args) {
|
|||
returnContent = dedent(JSON.parse(JSON.stringify(args)));
|
||||
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>" : ""
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,53 +27,54 @@ If you want to read a more general overview on application building (or you don'
|
|||
|
||||
## 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.
|
||||
|
||||
### 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
|
||||
|
||||
[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
|
||||
cd electron-starter
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
```
|
||||
git clone https://github.com/lbryio/electron-starter
|
||||
cd electron-starter
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
#### 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.
|
||||
|
||||
Try resolving `lbry://doitlive`.
|
||||
Try resolving `lbry://doitlive`.
|
||||
|
||||
#### 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.
|
||||
|
||||
```
|
||||
claimData.innerText = "Loading...";
|
||||
Lbry.get({ uri: `lbry://${value}` })
|
||||
.then(result => {
|
||||
const filePath = result.download_path;
|
||||
const image = document.createElement("img");
|
||||
```js
|
||||
claimData.innerText = "Loading...";
|
||||
|
||||
image.src = filePath;
|
||||
imageWrapper.appendChild(image);
|
||||
Lbry.get({ uri: `lbry://${value}` })
|
||||
.then(result => {
|
||||
const filePath = result.download_path;
|
||||
const image = document.createElement("img");
|
||||
|
||||
claimData.innerText = JSON.stringify(result, null, 2);
|
||||
})
|
||||
.catch(error => {
|
||||
claimData.innerText = JSON.stringify(error, null, 2);
|
||||
});
|
||||
```
|
||||
image.src = filePath;
|
||||
imageWrapper.appendChild(image);
|
||||
|
||||
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!
|
||||
|
||||
|
|
@ -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.
|
||||
|
||||
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
|
||||
|
||||
|
|
@ -178,7 +179,7 @@ We do not currently have tooling available to build LBRY apps on iOS.
|
|||
|
||||
### 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:
|
||||
|
||||
|
|
@ -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.
|
||||
|
||||
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.
|
||||
|
||||
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
|
||||
|
||||
|
|
@ -245,10 +246,7 @@ A full list of methods is available [here](https://lbry.tech/api/blockchain).
|
|||
## Community and Support
|
||||
|
||||
Trouble? Questions? Want to share your progress? Interact with other devs!
|
||||
|
||||
|
||||
- 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.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
44
package.json
44
package.json
|
|
@ -10,10 +10,10 @@
|
|||
},
|
||||
"author": "LBRY Team",
|
||||
"dependencies": {
|
||||
"@babel/polyfill": "^7.4.3",
|
||||
"@babel/polyfill": "^7.4.4",
|
||||
"@inc/fastify-ws": "^1.1.0",
|
||||
"@octokit/rest": "^16.23.4",
|
||||
"@slack/client": "^5.0.0",
|
||||
"@octokit/rest": "^16.25.3",
|
||||
"@slack/client": "^5.0.1",
|
||||
"async": "^2.6.2",
|
||||
"async-es": "^2.6.2",
|
||||
"choo": "^6.13.3",
|
||||
|
|
@ -23,16 +23,16 @@
|
|||
"choo-websocket": "^2.0.0",
|
||||
"colorette": "^1.0.7",
|
||||
"cors": "^2.8.5",
|
||||
"cron": "^1.7.0",
|
||||
"cron": "^1.7.1",
|
||||
"date-format-lite": "^17.7.0",
|
||||
"decamelize": "^3.2.0",
|
||||
"dedent": "^0.7.0",
|
||||
"dotenv": "^7.0.0",
|
||||
"fastify": "~2.2.0",
|
||||
"fastify-compress": "^0.8.1",
|
||||
"dotenv": "^8.0.0",
|
||||
"fastify": "~2.3.0",
|
||||
"fastify-compress": "^0.9.0",
|
||||
"fastify-helmet": "^3.0.0",
|
||||
"fastify-static": "^2.4.0",
|
||||
"front-matter": "^3.0.1",
|
||||
"front-matter": "^3.0.2",
|
||||
"fs-exists-sync": "^0.1.0",
|
||||
"got": "^9.6.0",
|
||||
"graceful-fs": "^4.1.15",
|
||||
|
|
@ -48,11 +48,11 @@
|
|||
},
|
||||
"description": "Documentation for the LBRY protocol and associated projects",
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.4.3",
|
||||
"@babel/core": "^7.4.3",
|
||||
"@babel/cli": "^7.4.4",
|
||||
"@babel/core": "^7.4.4",
|
||||
"@babel/plugin-external-helpers": "7.2.0",
|
||||
"@babel/plugin-proposal-class-properties": "7.4.0",
|
||||
"@babel/plugin-proposal-decorators": "7.4.0",
|
||||
"@babel/plugin-proposal-class-properties": "7.4.4",
|
||||
"@babel/plugin-proposal-decorators": "7.4.4",
|
||||
"@babel/plugin-proposal-export-namespace-from": "7.2.0",
|
||||
"@babel/plugin-proposal-function-sent": "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-syntax-dynamic-import": "7.2.0",
|
||||
"@babel/plugin-syntax-import-meta": "7.2.0",
|
||||
"@babel/preset-env": "^7.4.3",
|
||||
"@babel/register": "^7.4.0",
|
||||
"@babel/preset-env": "^7.4.4",
|
||||
"@babel/register": "^7.4.4",
|
||||
"@inc/eslint-config": "^1.1.3",
|
||||
"@inc/sasslint-config": "^1.2.0",
|
||||
"@inc/sasslint-config": "^2019.5.7",
|
||||
"@lbry/color": "^1.1.1",
|
||||
"@lbry/components": "^2.4.0",
|
||||
"@lbry/components": "^2.7.1",
|
||||
"eslint": "^5.16.0",
|
||||
"husky": "^1.3.1",
|
||||
"nodemon": "^1.18.11",
|
||||
"husky": "^2.2.0",
|
||||
"nodemon": "^1.19.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"pino-pretty": "^2.6.0",
|
||||
"sass": "^1.18.0",
|
||||
"sass-lint": "^1.12.1",
|
||||
"pino-pretty": "^3.0.0",
|
||||
"sass": "^1.20.1",
|
||||
"sass-lint": "^1.13.1",
|
||||
"snazzy": "^8.0.0",
|
||||
"standardx": "^3.0.1",
|
||||
"updates": "^8.0.1"
|
||||
"updates": "^8.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": "10.2.x"
|
||||
|
|
|
|||
Loading…
Reference in a new issue