From 38c09ce24eb49f672aadf9f99eafc2c00c404726 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: Fri, 12 Apr 2019 15:08:35 -0400 Subject: [PATCH] Well this was fun --- app/components/feature-links.js | 4 +- app/components/glossary-toc.js | 4 +- app/components/head.js | 13 ++++- app/dist/scripts/api.js | 12 ++-- app/sass/pages/_api.scss | 13 ++++- app/views/api.js | 98 ++++++++++++++++++++++++++++++--- 6 files changed, 126 insertions(+), 18 deletions(-) diff --git a/app/components/feature-links.js b/app/components/feature-links.js index ce7c906..7cf119a 100644 --- a/app/components/feature-links.js +++ b/app/components/feature-links.js @@ -51,7 +51,9 @@ export default () => { let imageLink = ""; for (const link of links) { - if (link.image) imageLink = `${link.title}`; + if (link.image) + imageLink = `${link.title}`; + renderedLinks.push(returnLinkTemplate(link.href, link.title, imageLink)); } diff --git a/app/components/glossary-toc.js b/app/components/glossary-toc.js index 5f30b82..499e932 100644 --- a/app/components/glossary-toc.js +++ b/app/components/glossary-toc.js @@ -50,6 +50,8 @@ function slugify(stringToSlugify) { .replace(/\)/g, "") .replace(/,/g, ""); - if (finalString.match(numberRegex)) finalString = `_${finalString}`; + if (finalString.match(numberRegex)) + finalString = `_${finalString}`; + return `#${finalString}`; } diff --git a/app/components/head.js b/app/components/head.js index ed91fa4..cad408d 100644 --- a/app/components/head.js +++ b/app/components/head.js @@ -16,10 +16,17 @@ import config from "@root/config"; export default (state, emit) => { const newMetadata = state.lbry; - const description = newMetadata && newMetadata.description ? newMetadata.description : config.meta.description; - const title = newMetadata && newMetadata.title ? newMetadata.title + " - lbry.tech" : "lbry.tech - " + config.meta.tagline; + const description = newMetadata && newMetadata.description ? + newMetadata.description : + config.meta.description; + + const title = newMetadata && newMetadata.title ? + newMetadata.title + " - lbry.tech" : + "lbry.tech - " + config.meta.tagline; + + if (state.title !== title) + emit(state.events.DOMTITLECHANGE, title); - if (state.title !== title) emit(state.events.DOMTITLECHANGE, title); state.page = state.page || { }; return html` diff --git a/app/dist/scripts/api.js b/app/dist/scripts/api.js index f9869a7..3ebf9b2 100644 --- a/app/dist/scripts/api.js +++ b/app/dist/scripts/api.js @@ -1,10 +1,14 @@ -"use strict"; /* global document, Jets */ +"use strict"; /* global document, Jets, window */ // Initiate search functionality +const contentTag = window.location.pathname.split("/").pop() === "sdk" ? + ".api-toc__section" : + "#toc"; + let jets = new Jets({ - contentTag: "#toc", + contentTag, searchTag: "#input-search" }); @@ -15,7 +19,6 @@ document.getElementById("input-search").value = ""; document.getElementById("input-search").addEventListener("keyup", () => { if (document.getElementById("input-search").value) document.querySelector(".api-toc__search-clear").classList.add("active"); - else document.querySelector(".api-toc__search-clear").classList.remove("active"); }); @@ -24,6 +27,7 @@ document.getElementById("input-search").addEventListener("keyup", () => { document.querySelector(".api-toc__search-clear").addEventListener("click", () => { document.getElementById("input-search").value = ""; document.querySelector(".api-toc__search-clear").classList.remove("active"); + jets.destroy(); reinitJets(); }); @@ -55,7 +59,7 @@ function handleApiLanguageToggles(language) { function reinitJets() { jets = new Jets({ - contentTag: "#toc", + contentTag, searchTag: "#input-search" }); diff --git a/app/sass/pages/_api.scss b/app/sass/pages/_api.scss index 515b024..473bfcd 100644 --- a/app/sass/pages/_api.scss +++ b/app/sass/pages/_api.scss @@ -77,7 +77,14 @@ } } -.api-toc__items { +.api-toc__title { + padding: 0.25rem 0.5rem 0.25rem 0.75rem; + opacity: 0.3; + pointer-events: none; + text-transform: uppercase; +} + +.api-toc__commands { font-size: 0.8rem; line-height: 1.33; list-style-type: none; @@ -85,7 +92,7 @@ padding-bottom: 1rem; } -.api-toc__item { +.api-toc__command { &:hover { background-color: $lbry-gray-2; } @@ -215,6 +222,8 @@ } .api-content__body-argument { + display: flex; + &:not(:last-of-type) { border-bottom: 1px solid $lbry-gray-2; } diff --git a/app/views/api.js b/app/views/api.js index d2e13fb..5c469d0 100644 --- a/app/views/api.js +++ b/app/views/api.js @@ -16,9 +16,7 @@ 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 = 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"; +const sdkApi = "https://cdn.jsdelivr.net/gh/lbryio/lbry@api_doc_categories/docs/api.json"; @@ -26,7 +24,9 @@ const sdkApi = process.env.NODE_ENV === "development" ? export default async(state) => { // below is evil, I just inherited it -- Jeremy - const apilabel = state.params.wildcard == "sdk" ? "SDK" : state.params.wildcard.charAt(0).toLocaleUpperCase() + state.params.wildcard.substring(1); + const apilabel = state.params.wildcard === "sdk" ? + "SDK" : + state.params.wildcard.charAt(0).toLocaleUpperCase() + state.params.wildcard.substring(1); state.lbry = { title: apilabel + " API Documentation", @@ -45,7 +45,9 @@ export default async(state) => { - +
@@ -57,7 +59,7 @@ export default async(state) => { ${createApiHeader(state.params.wildcard)} - ${createApiContent(apiResponse)} + ${apilabel === "SDK" ? createSdkContent(apiResponse) : createApiContent(apiResponse)}
@@ -150,7 +152,7 @@ function createApiSidebar(apiDetails) { for (const apiDetail of apiDetails) { apiSidebar.push(` -
  • +
  • ${apiDetail.name} @@ -161,6 +163,69 @@ function createApiSidebar(apiDetails) { return apiSidebar; } +function createSdkContent(apiDetails) { + const apiContent = []; + const sectionTitles = Object.keys(apiDetails); + + for (const title of sectionTitles) { + const commands = apiDetails[title].commands; + const description = apiDetails[title].doc; + + apiContent.push( + commands.length ? + commands.map(command => createSdkContentSections(title, description, command)).join("") : + "" + ); + } + + return apiContent; +} + +function createSdkContentSections(sectionTitle, sectionDescription, sectionDetails) { + /* +

    ${sectionTitle}

    +

    ${sectionDescription}

    +
    + */ + + return ` +
    +

    ${sectionDetails.name}

    +

    ${sectionDetails.description}

    + +

    Arguments

    +
      + ${renderArguments(sectionDetails.arguments).join("")} +
    + +

    Returns

    + 
    ${renderReturns(sectionDetails.returns)}
    +
    + +
    + ${renderExamples(sectionDetails.examples).join("")} +
    + `; +} + +function createSdkSidebar(apiDetails) { + const sectionTitles = Object.keys(apiDetails); + const apiSidebar = []; + + for (const title of sectionTitles) { + const commands = apiDetails[title].commands; + + apiSidebar.push(` + + `); + } + + return apiSidebar; +} + async function parseApiFile(urlSlug) { let apiFileLink; @@ -192,6 +257,9 @@ async function parseApiFile(urlSlug) { function renderArguments(args) { const argumentContent = []; + if (!args || args.length === 0) + return argumentContent; + for (const arg of args) { argumentContent.push(`
  • @@ -211,6 +279,11 @@ function renderArguments(args) { function renderExamples(args) { const exampleContent = []; + if (!args || args.length === 0) { + exampleContent.push("
    // example(s) to come later
    "); + return exampleContent; + } + for (const arg of args) { exampleContent.push(`

    ${arg.title}


    @@ -220,8 +293,19 @@ function renderExamples(args) {

    Output


    ${arg.output}
    +
    `); } return exampleContent; } + +function renderReturns(args) { + let returnContent = []; + + if (!args || args.length === 0) + return returnContent; + + returnContent = dedent(JSON.parse(JSON.stringify(args))); + return returnContent; +}