From bb40fc172521ebee1b77f4f06760b9b220052337 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?= =?UTF-8?q?=E3=83=96?= Date: Thu, 9 May 2019 17:37:52 -0500 Subject: [PATCH] lbrycrd examples are fixed and new functionality is added --- app/dist/scripts/api.js | 4 +++ app/views/api.js | 62 +++++++++++++++++++++--------------- documents/build.md | 70 ++++++++++++++++++++--------------------- package.json | 44 +++++++++++++------------- 4 files changed, 97 insertions(+), 83 deletions(-) diff --git a/app/dist/scripts/api.js b/app/dist/scripts/api.js index 3ebf9b2..5f12b27 100644 --- a/app/dist/scripts/api.js +++ b/app/dist/scripts/api.js @@ -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]"); diff --git a/app/views/api.js b/app/views/api.js index 6c0d659..db223b3 100644 --- a/app/views/api.js +++ b/app/views/api.js @@ -53,9 +53,7 @@ export default async(state) => {
${createApiHeader(state.params.wildcard)} @@ -68,7 +66,10 @@ export default async(state) => { `; } @@ -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) {

${apiDetail.description}

${apiDetail.arguments.length ? `

Arguments

` : ""} - -

Returns

${dedent(apiDetailsReturns)}
+ ${apiDetail.returns ? `

Returns

${dedent(apiDetailsReturns)}
` : ""}
${apiDetail.examples && apiDetail.examples.length ? renderExamples(apiDetail.examples).join("") : `
// example(s) for ${apiDetail.name} to come later
`}
`); - } + }); return apiContent; } @@ -150,7 +150,7 @@ function createApiHeader(slug) { function createApiSidebar(apiDetails) { const apiSidebar = []; - for (const apiDetail of apiDetails) { + apiDetails.forEach(apiDetail => { apiSidebar.push(`
  • @@ -158,7 +158,7 @@ function createApiSidebar(apiDetails) {
    • `); - } + }); 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 => `
  • ${command.name}
    • `)).join("")} `); - } + }); 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(`
  • @@ -265,7 +265,7 @@ function renderArguments(args) {
    ${typeof arg.description === "string" ? arg.description.replace(//g, ">") : ""}
    • `); - } + }); return argumentContent; } @@ -278,18 +278,21 @@ function renderExamples(args) { return exampleContent; } - for (const arg of args) { + args.forEach(arg => { exampleContent.push(` -

    ${arg.title}


    - 
    ${arg.curl}
    - 
    ${arg.lbrynet}
    - 
    ${arg.python}
    + ${arg.title ? `

    ${arg.title}


    ` : ""} + ${arg.cli ? `
    ${arg.cli}
    ` : ""} + ${arg.curl ? `
    ${arg.curl}
    ` : ""} + ${arg.lbrynet ? `
    ${arg.lbrynet}
    ` : ""} + ${arg.python ? `
    ${arg.python}
    ` : ""} -

    Output


    - 
    ${arg.output}
    -
    + ${arg.output ? ` +

    Output


    + 
    ${arg.output}
    +
    + ` : ""} `); - } + }); return exampleContent; } @@ -303,3 +306,12 @@ function renderReturns(args) { returnContent = dedent(JSON.parse(JSON.stringify(args))); return returnContent; } + +function renderToggles(onSdkPage) { + return [ + !onSdkPage ? "" : "", + "", + onSdkPage ? "" : "", + onSdkPage ? "" : "" + ]; +} diff --git a/documents/build.md b/documents/build.md index 59f259d..5efb82e 100644 --- a/documents/build.md +++ b/documents/build.md @@ -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. - - - diff --git a/package.json b/package.json index 427eb30..1731b8e 100755 --- a/package.json +++ b/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"