continue on api docs

src/components/APIArguments.astro

@@ -28,34 +28,29 @@ const {args} = Astro.props;
 ) : ''}
 <style>
     .arguments {
-            border: 1px solid var(--tertiary-background);
+        border: 1px solid var(--tertiary-background);
-        }
+    }
 
-        .arguments .left, .arguments .right {
+    .arguments .argument {
-            display: flex;
+        background-color: var(--tertiary-background);
-            flex-direction: column;
+        border-bottom: 1px solid var(--tertiary-background);
-        }
+    }
 
-        .arguments .argument {
+    .arguments .argument th {
-            background-color: var(--tertiary-background);
+        text-align: left;
-            border-bottom: 1px solid var(--tertiary-background);
+        padding: 0.25rem 1rem;
-        }
+    }
 
-        .arguments .argument th {
+    .arguments .argument span {
-            text-align: left;
+        text-align: left;
-            padding: 0.25rem 1rem;
+        font-weight: normal;
-        }
+    }
 
-        .arguments .argument span {
+    .arguments .argument .left, .arguments .argument .right {
-            text-align: left;
+        padding: 0.5rem 1rem;
-            font-weight: normal;
+    }
-        }
 
-        .arguments .argument .left, .arguments .argument .right {
+    .arguments .argument:nth-child(2n) {
-            padding: 0.5rem 1rem;
+        background-color: var(--secondary-background);
-        }
+    }
-
-        .arguments .argument:nth-child(2n) {
-            background-color: var(--secondary-background);
-        }
 </style>

src/components/APIExamples.astro

@@ -1,5 +1,6 @@
 ---
 import { Code } from "astro/components";
+import Collapsible from "./Collapsible.astro";
 
 const {examples, cmd} = Astro.props;
 
@@ -11,27 +12,37 @@ const output = examples.output;
 delete examples.title;
 delete examples.output;
 
+const options = (Object.keys(examples).map(example=> `.${example}`)).join(', ');
+
 function setExample(example, cmd){
                 console.log(example, cmd);
                 document.body.classList.toggle(example);
             }
 
 ---
-
-<div class="examples">
     {examples ? (
-        <div>
+        <div class="examples">
             <h3>Examples</h3>
             <h4>{title}</h4>
-            {Object.keys(examples).map(example=>(
+            <div class="buttons">
-                <button data-example={example}>{example}</button>
+                {Object.keys(examples).map(example=>(
-            ))}
+                    <button data-example={example}>{example}</button>
-            {Object.keys(examples).map(example=>(
+                ))}
-                <div class:list={["example", cmd, example]}>
+            </div>
-                    <p>{example}</p>
+            <div class="commands">
-                    <Code lang={"bash"} code={`${examples[example]}`} />
+                {Object.keys(examples).map(example=>(
-                </div>
+                    <div class:list={["example", cmd, example]}>
-            ))}
+                        {/* <p>{example}</p> */}
+                        <Code lang={"bash"} code={`${examples[example]}`} />
+                    </div>
+                ))}
+            </div>
+            {output && (
+                <Collapsible>
+                    <span slot="head">Output:</span>
+                    <Code slot="body" lang={"json"} code={`${output}`} />
+                </Collapsible>
+            )}
         </div>
         <script define:vars={{examples, cmd}}>
             
@@ -48,24 +59,43 @@ function setExample(example, cmd){
     ) : ''}
 </div>
 <style>
+
+    .examples {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        padding: 1rem;
+        border-radius: 8px;
+        border: 3px solid var(--secondary-background);
+    }
+
+    .commands {
+        display: flex;
+        flex-direction: column;
+        gap: 25px;
+    }
+
     .example {
         display: none;
     }
 
-    body:not(.curl, .lbrynet, .python) .examples .example:first-of-type {
+    .buttons {
-        display: block;
+        display: flex;
+        gap: 0.75rem;
     }
 
-    body.curl .example.curl {
+    button {
-        display: block;
+        color: var(--primary);
+        padding: 0.5em 0.75rem;
+        border-radius: 8px;
+        border: none;
+        background-color: var(--secondary-background);
     }
 
-    body.lbrynet .example.lbrynet {
+    body:not(.curl, .lbrynet, .python, .cli) button:first-of-type, body.curl button[data-example=curl], body.lbrynet button[data-example=lbrynet], body.python button[data-example=python], body.cli button[data-example=cli] {
-        display: block;
+        font-weight: bold;
+        color: var(--accent);
+        outline: 1px solid var(--accent);
+        /* background-color: var(--accent); */
     }
-
-    body.python .example.python {
-        display: block;
-    }
-
 </style>

src/components/Collapsible.astro

@@ -0,0 +1,49 @@
+---
+const {open} = Astro.props;
+---
+
+<details class="collapsible" {open}>
+    <summary>
+        <p><slot name="head"></p>
+        <p class="arrow">&#8595;</p>
+    </summary>
+    <div>
+        <slot name="body"/>
+    </div>
+</details>
+<style>
+    .collapsible summary::-webkit-details-marker {
+        display: none;
+    }
+
+    .collapsible {
+        /* width: 90%; */
+        /* padding: 1rem; */
+        border-radius: 1rem;
+        overflow: hidden;
+        outline: 2px solid var(--tertiary-background);
+        background-color: var(--secondary-background);
+    }
+
+    .collapsible summary {
+        display: flex;
+        cursor: pointer;
+        font-weight: bold;
+        justify-content: space-between;
+        padding: 1rem;
+        user-select: none;
+        background-color: var(--tertiary-background);
+    }
+    
+    .collapsible summary p.arrow {
+        transition: transform 0.3s;
+    }
+
+    .collapsible:not([open]) summary {
+        margin-bottom: 1rem;
+    }
+
+    .collapsible[open] summary p.arrow {
+        transform: rotate(180deg);
+    }
+</style>

src/config.js

@@ -91,6 +91,13 @@ export const REDIRECTS = {
 }
 
 export const API_REPOS = {
-  "lbry-sdk": "docs/api.json",
+  "lbry-sdk": {
-  "lbrycrd": "contrib/devtools/generated/api_v1.json"
+    "api": "docs/api.json",
+    "description":  "The LBRY SDK for building decentralized, censorship resistant, monetized, digital content apps.",
+    "playground": true
+  },
+  "lbrycrd": {
+    "api": "contrib/devtools/generated/api_v1.json",
+    "description": "The blockchain that provides the digital content namespace for the LBRY protocol"
+  }
 }

src/pages/api.astro

@@ -8,12 +8,88 @@ import * as config from "../config.js";
 
 <Layout title="API">
     <div class="wrapper">
-        <ul>
+        <h1>Exlore the APIs</h1>
+        <ul class="apis">
             {Object.keys(config.API_REPOS).map(repo=>(
-                <li>
+                <li class="api">
-                    <a href={`/api/${repo}`}>{repo}</a>
+                    <h2>{repo}</h2>
+                    <hr/>
+                    <p>{config.API_REPOS[repo].description}</p>
+                    <div class="button-primary"><a href={`/api/${repo}`}>{repo.toUpperCase()} APIs</a></div>
+                    {config.API_REPOS[repo].playground && (
+                        <p class="playground">Available in <a href="/playground">Playground</a></p>
+                    )}
                 </li>
             ))}
         </ul>
     </div>
+    <style>
+        .wrapper {
+            margin: 1rem;
+        }
+
+        h1 {
+            text-align: center;
+            padding-bottom: 1rem;
+        }
+
+        hr {
+            color: var(--accent);
+        }
+
+        .apis {
+            display: flex;
+            justify-content: center;
+            /* align-items: center; */
+            gap: 25px;
+            padding: 0;
+        }
+
+        .apis .api {
+            display: flex;
+            flex-direction: column;
+            max-width: 30%;
+            height: max-content;
+            gap: 1rem;
+            padding: 1rem;
+            border-radius: 1rem;
+        }
+
+        .apis .api h2 {
+            text-align: center;
+            text-transform: uppercase;
+            /* border-bottom: 1px solid var(--accent); */
+        }
+        
+        .apis .api p {
+            text-align: center;
+        }
+
+        .apis .api .button-primary {
+            margin: auto;
+        }
+
+        .apis .api .playground a {
+            color: var(--accent);
+        }
+
+        @media only screen and (max-width: 1000px) {
+            .apis .api {
+                max-width: 50%;
+            }
+        }
+
+        @media only screen and (max-width: 750px) {
+            .apis {
+                flex-direction: column;
+                padding: 0;
+                width: 80%;
+                margin: auto;
+            }
+
+            .apis .api {
+                max-width: unset;
+            }
+        }
+    </style>
 </Layout>

src/pages/api/[repo].astro

@@ -3,6 +3,7 @@ import Layout from '../../layouts/Layout.astro';
 import TableOfContents from '../../components/TableOfContents.astro';
 import APIArguments from '../../components/APIArguments.astro';
 import APIExamples from '../../components/APIExamples.astro';
+import Collapsible from '../../components/Collapsible.astro';
 
 import * as config from "../../config.js";
 import { Code } from 'astro:components';
@@ -23,7 +24,7 @@ tags.unshift({version: "master"});
 
 const tag = tags[0];
 
-let docs = (await (await fetch(`https://cdn.jsdelivr.net/gh/${config.GITHUB_ORG}/${repo}@${tag.version}/${config.API_REPOS[repo]}`)).json());
+let docs = (await (await fetch(`https://cdn.jsdelivr.net/gh/${config.GITHUB_ORG}/${repo}@${tag.version}/${config.API_REPOS[repo].api}`)).json());
 
 
 // Convert lbrycrd docs to the same structure as lbry-sdk
@@ -82,22 +83,27 @@ Object.keys(docs).forEach(group=>{
             ))}
         </select>
         <div class="main">
-            <h1>{repo} {tag.version}</h1>
+            <div class="description">
-            <p>Methods and signatures provided by {repo} are documented below. To build, download, or run the daemon, see the project
+                <h1>{repo} {tag.version}</h1>
-                <a href={`https://github.com/${config.GITHUB_ORG}/${repo}/blob/${tag.version}/README.md`}>README</a>.
+                <p>Methods and signatures provided by <a href={`https://github.com/${config.GITHUB_ORG}/${repo}`}>{repo}</a> are documented below. To build, download, or run the daemon, see the project
-            </p>
+                    <a href={`https://github.com/${config.GITHUB_ORG}/${repo}/blob/${tag.version}/README.md`}>README</a>.
+                </p>
+            </div>
+            <hr/>
             <div class="commands">
                 {Object.keys(docs).map(header=>(
                     <section>
-                        <h1 id={header}>{header}</h1>
+                        <p class="header" id={header}>{header}</p>
                         {docs[header].commands.map(cmd=>(
                             <div class:list={["command", cmd.name]}>
                                 <h2 id={cmd.name}>{cmd.name}</h2>
                                 <p>{cmd.description}</p>
                                 <APIArguments args={cmd.arguments}/>
                                 <APIExamples cmd={cmd.name} examples={cmd.examples[0]}/>
-                                <h3>Returns</h3>
+                                <Collapsible open>
-                                <Code lang={"json"} code={`${cmd.returns || "Not available."}`} class:list={["returns"]} />
+                                    <span slot="head">Returns:</span>
+                                    <Code slot="body" lang={"json"} code={`${cmd.returns || "Not available."}`} class:list={["returns"]} />
+                                </Collapsible>
                                 </div>
                             <hr/>
                         ))}
@@ -107,12 +113,16 @@ Object.keys(docs).forEach(group=>{
         </div>
     </div>
     <style>
+        /* Should we have version selector? */
+        select {
+            display: none;
+        }
+
         .wrapper {
-            padding: 1rem;
+            padding: 0 1rem;
         }
 
         .wrapper .main {
-            /* width: calc(100vw - var(--sidebar-width)); */
             padding-inline-end: var(--sidebar-width);
             transition: 0.3s;
             overflow-x: hidden;
@@ -120,10 +130,24 @@ Object.keys(docs).forEach(group=>{
             width: calc(100%);
         }
 
+        .description {
+            padding: 2rem;
+        }
+
+        .description a {
+            color: var(--accent);
+        }
+
         .commands {
             display: flex;
             flex-direction: column;
             gap: 25px;
+            padding: 1rem;
+        }
+
+        .commands .header {
+            font-size: 1.75rem;
+            font-weight: bold;
         }
 
         .commands section {
@@ -131,11 +155,12 @@ Object.keys(docs).forEach(group=>{
             flex-direction: column;
             gap: 25px;
         }
-
+        
         .commands section .command {
             display: flex;
             flex-direction: column;
             gap: 1em;
+            padding: 0 1rem;
         }
 
         .wrapper #toc {

src/styles/global.scss

@@ -107,4 +107,13 @@ a {
 
 .button-primary:hover {
     transform: scale(1.1);
+}
+
+// API Docs Examples
+body:not(.curl, .lbrynet, .python, .cli) .commands .example:first-of-type {
+    display: block;
+}
+
+body.curl .example.curl, body.lbrynet .example.lbrynet, body.python .example.python, body.cli .example.cli {
+    display: block;
 }