From 1663bc49f8e70ac802cda421d2a8eab9dd7211e8 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: Wed, 30 Jan 2019 16:15:10 -0600 Subject: [PATCH 1/4] Closes #139 --- app/components/api/header-blockchain.js | 9 +- app/components/api/header-sdk.js | 9 +- app/components/markdown.js | 7 +- app/dist/scripts/api.js | 36 ++++++-- app/index.js | 3 +- app/sass/pages/_api.scss | 96 ++++++++++++++++----- app/views/api.js | 66 ++++++++++---- app/views/redirect.js | 20 ++++- documents/build.md | 8 +- documents/glossary.md | 4 +- documents/partials/overview/applications.md | 2 +- documents/partials/overview/lbrysdk.md | 2 +- documents/resources/api-wrappers.md | 2 +- documents/resources/daemon-settings.md | 2 +- documents/resources/download-overview.md | 30 +++---- package.json | 6 +- 16 files changed, 219 insertions(+), 83 deletions(-) diff --git a/app/components/api/header-blockchain.js b/app/components/api/header-blockchain.js index ec05019..8b88eb3 100644 --- a/app/components/api/header-blockchain.js +++ b/app/components/api/header-blockchain.js @@ -11,8 +11,13 @@ import html from "choo/html"; // E X P O R T export default () => html` -
-

lbrycrd APIs

+
+

lbrycrd APIs

Methods and signatures provided by the lbrycrd blockchain daemon are documented below. To build, download, or run lbrycrd, see the project README.

+ +
+

You can find the repo for this API on GitHub:

+ 
https://github.com/lbryio/lbry
+
`; diff --git a/app/components/api/header-sdk.js b/app/components/api/header-sdk.js index 5e4dd50..890b02e 100644 --- a/app/components/api/header-sdk.js +++ b/app/components/api/header-sdk.js @@ -11,8 +11,13 @@ import html from "choo/html"; // E X P O R T export default () => html` -
-

lbry-sdk APIs

+
+

lbry-sdk APIs

Methods and signatures provided by the lbry-sdk daemon are documented below. To build, download, or run the daemon, see the project README.

+ +
+

You can find the repo for this API on GitHub:

+ 
https://github.com/lbryio/lbrycrd
+
`; diff --git a/app/components/markdown.js b/app/components/markdown.js index dfb7262..08d8014 100644 --- a/app/components/markdown.js +++ b/app/components/markdown.js @@ -9,6 +9,7 @@ import exists from "fs-exists-sync"; import fm from "front-matter"; import fs from "graceful-fs"; import html from "choo/html"; +import m from "markdown-it"; import markdownAnchor from "markdown-it-anchor"; import markdownSup from "@module/markdown-it-sup"; import path from "path"; @@ -17,7 +18,7 @@ import raw from "choo/html/raw"; // U T I L S const numberRegex = /^[0-9]/g; -const md = require("markdown-it")({ +const md = m({ html: true, typographer: true }).use(markdownSup) @@ -32,7 +33,9 @@ const md = require("markdown-it")({ .replace(/\)/g, "") .replace(/,/g, ""); - if (finalString.match(numberRegex)) finalString = `_${finalString}`; + if (finalString.match(numberRegex)) + finalString = `_${finalString}`; + return finalString; } }); diff --git a/app/dist/scripts/api.js b/app/dist/scripts/api.js index d16921c..bb6f8d2 100644 --- a/app/dist/scripts/api.js +++ b/app/dist/scripts/api.js @@ -14,23 +14,49 @@ document.getElementById("input-search").value = ""; // Activate search document.getElementById("input-search").addEventListener("keyup", () => { if (document.getElementById("input-search").value) - document.querySelector(".api__toc__search__clear").classList.add("active"); + document.querySelector(".api-toc__search-clear").classList.add("active"); else - document.querySelector(".api__toc__search__clear").classList.remove("active"); + document.querySelector(".api-toc__search-clear").classList.remove("active"); }); // Cancel search -document.querySelector(".api__toc__search__clear").addEventListener("click", () => { +document.querySelector(".api-toc__search-clear").addEventListener("click", () => { document.getElementById("input-search").value = ""; - document.querySelector(".api__toc__search__clear").classList.remove("active"); + document.querySelector(".api-toc__search-clear").classList.remove("active"); jets.destroy(); reinitJets(); }); -// H E L P E R +// Code toggles +handleApiLanguageToggles("curl"); +handleApiLanguageToggles("lbrynet"); +handleApiLanguageToggles("python"); + + + +// H E L P E R S + +function handleApiLanguageToggles(language) { + document.getElementById(`toggle-${language}`).addEventListener("click", () => { + const codeExamples = document.querySelectorAll(`[data-api-example-type="${language}"]`); + const examples = document.querySelectorAll("[data-api-example-type]"); + const toggles = document.querySelectorAll("*[id^='toggle-']"); + + for (const example of examples) + example.classList.remove("active"); + + for (const example of codeExamples) + example.classList.add("active"); + + for (const toggle of toggles) + toggle.classList.remove("active"); + + document.getElementById(`toggle-${language}`).classList.add("active"); + }); +} function reinitJets() { jets = new Jets({ diff --git a/app/index.js b/app/index.js index 5e33c60..5a28487 100755 --- a/app/index.js +++ b/app/index.js @@ -61,7 +61,8 @@ server next(); }) .ready(err => { - if (err) throw err; + if (err) + throw err; server.ws.on("connection", socket => { socket.on("message", data => { diff --git a/app/sass/pages/_api.scss b/app/sass/pages/_api.scss index f256a49..98aa798 100644 --- a/app/sass/pages/_api.scss +++ b/app/sass/pages/_api.scss @@ -15,7 +15,7 @@ } } -.api__header { +.api-header { padding: 2rem; position: relative; @@ -33,20 +33,20 @@ /*! * API | Table of Contents * - * @class .api__toc - * @class .api__toc__search - * @class .api__toc__search__field + * @class .api-toc + * @class .api-toc__search + * @class .api-toc__search-field * - * @class .api__toc__search__clear + * @class .api-toc__search-clear * @state {.active} * - * @class .api__toc__items + * @class .api-toc__items * - * @class .api__toc__item + * @class .api-toc__item * @state {:hover} **/ -.api__toc { +.api-toc { width: 200px; height: calc(100vh - 4rem); // navigation is 4rem tall bottom: 0; left: 0; @@ -59,11 +59,11 @@ z-index: 3; } -.api__toc__search { +.api-toc__search { position: relative; } -.api__toc__search__field { +.api-toc__search-field { width: 100%; padding: 0.25rem calc(2rem + 4px) 0.25rem 0.75rem; @@ -72,7 +72,7 @@ line-height: 2rem; } -.api__toc__search__clear { +.api-toc__search-clear { width: 1.25rem; height: 1.25rem; top: 0.6rem; right: 0.75rem; @@ -97,7 +97,7 @@ } } -.api__toc__items { +.api-toc__items { font-size: 0.8rem; line-height: 1.33; list-style-type: none; @@ -105,7 +105,7 @@ padding-bottom: 1rem; } -.api__toc__item { +.api-toc__item { &:hover { background-color: $lbry-gray-2; } @@ -116,12 +116,12 @@ } } -.api__content { +.api-content { width: calc(100% - 200px); float: right; } -.api__documentation { +.api-documentation { display: grid; grid-template-columns: repeat(auto-fit, minmax(50%, 1fr)); @@ -182,18 +182,30 @@ } } -.api__content__body { +.api-content__body { padding: 2rem; - border-bottom: 1px solid $lbry-gray-1; // rgba($lbry-gray-1, 0.3); + border-bottom: 1px solid $lbry-gray-1; + + a { + transition: color 0.2s; + + &:not(:hover) { + color: $lbry-teal-3; + } + + &:hover { + color: $lbry-teal-5; + } + } } -.api__content__body__arguments { +.api-content__body-arguments { border: 1px solid $lbry-gray-2; border-radius: 3px; list-style-type: none; } -.api__content__body__argument { +.api-content__body-argument { &:not(:last-of-type) { border-bottom: 1px solid $lbry-gray-2; } @@ -234,14 +246,56 @@ } } -.api__content__example { +.api-content__example, +.api-content__intro { padding: 2rem; - background-color: rgba($lbry-black, 0.9); border-bottom: 1px solid rgba($lbry-white, 0.1); color: $lbry-white; + position: relative; pre { background-color: $lbry-black; } } + + + +.api-content__items { + width: 100%; + padding: 1rem 2rem; + top: 4rem; right: 0; + + background-color: $lbry-black; + position: sticky; + z-index: 10; +} + +.api-content__item { + padding: 0.25rem 0.75rem; + border-radius: 0.2rem; + display: inline-block; + font-size: 0.8rem; + transition: background-color 0.2s; + + &:not(:last-of-type) { + margin-right: 0.5rem; + } + + &:not(:hover) { + background-color: $lbry-gray-5; + } + + &.active, + &:hover { + background-color: $lbry-teal-4; + } +} + +pre { + &[data-api-example-type] { + &:not(.active) { + display: none; + } + } +} diff --git a/app/views/api.js b/app/views/api.js index e1aea10..a06bf46 100644 --- a/app/views/api.js +++ b/app/views/api.js @@ -16,7 +16,9 @@ import redirects from "@data/redirects.json"; const blockchainApi = "https://cdn.jsdelivr.net/gh/lbryio/lbrycrd@master/contrib/devtools/generated/api_v1.json"; const cache = new Map(); -const sdkApi = "https://cdn.jsdelivr.net/gh/lbryio/lbry@master/docs/api.json"; +const sdkApi = process.env.NODE_ENV === "development" ? + "https://cdn.jsdelivr.net/gh/lbryio/lbry@generate_examples/docs/api.json" : // TODO: Remove when `generate_examples` is merged into master + "https://cdn.jsdelivr.net/gh/lbryio/lbry@master/docs/api.json"; @@ -36,18 +38,25 @@ export default async(state) => { return asyncHtml`
-