fix conflicts

Bump @astrojs/mdx from 2.0.3 to 3.0.1

astro.config.mjs

@@ -1,15 +1,25 @@
 import { defineConfig } from 'astro/config';
 import codeblocks from "@thewebforge/astro-code-blocks";
 import preload from "astro-preload";
+import orama from '@orama/plugin-astro';
+import * as config from './src/config.js';
 
 import mdx from "@astrojs/mdx";
 
 // https://astro.build/config
 export default defineConfig({
   prefetch: true,
-  integrations: [preload(), codeblocks({
-    // Copy Button Options
-    copyButtonTitle: 'Copy',
-    copyButtonTooltip: 'Copied to clipboard',
-}), mdx()]
+  integrations: [preload(),
+  orama({
+    // We can generate more than one DB, with different configurations
+    mydb: {
+      // Required. Only pages matching this path regex will be indexed
+      pathMatcher: /resources|turorials|api\/[0-9]{4}\/[0-9]{2}\/[0-9]{2}\/.+|spec|\/overview$/,
+
+      // Optional. ['body'] by default. Use it to constraint what is used to
+      // index a page.
+      contentSelectors: ['.content'],
+    },
+    }), mdx()],
+  redirects: config.REDIRECTS,
 });

package.json

@@ -2,15 +2,17 @@
   "name": "lbry-tech",
   "version": "0.0.1",
   "dependencies": {
-    "@astrojs/mdx": "^2.0.3",
+    "@astrojs/mdx": "^3.0.1",
     "@lbry/components": "^4.2.5",
+    "@orama/plugin-astro": "^2.0.7",
     "@thewebforge/astro-code-blocks": "^0.2.0",
-    "astro": "^4.1.1",
+    "astro": "^4.8.6",
+    "astro-loading-indicator": "^0.4.0",
     "astro-preload": "^1.1.2",
     "markdown-wasm": "^1.2.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "sass": "^1.69.7"
+    "sass": "^1.77.2"
   },
   "scripts": {
     "dev": "astro dev",

src/components/APIArguments.astro

@@ -0,0 +1,56 @@
+---
+const {args} = Astro.props;
+---
+
+{(args && args.length) ? (
+    <h3>Arguments</h3>
+    <table class="arguments">
+        <tbody>
+            {args.map(arg=>(
+                <tr class="argument">
+                    <th>
+                        <strong>{arg.name}</strong>
+                        <br/>
+                        <span>
+                            {!arg.is_required && (
+                                "optional "
+                            )}
+                            {arg.type}
+                        </span>
+                    </th>
+                    <th>
+                        <span>{arg.description}</span>
+                    </th>
+                </tr>
+        ))}
+        </tbody>
+    </table>
+) : ''}
+<style>
+    .arguments {
+        border: 1px solid var(--tertiary-background);
+    }
+
+    .arguments .argument {
+        background-color: var(--tertiary-background);
+        border-bottom: 1px solid var(--tertiary-background);
+    }
+
+    .arguments .argument th {
+        text-align: left;
+        padding: 0.25rem 1rem;
+    }
+
+    .arguments .argument span {
+        text-align: left;
+        font-weight: normal;
+    }
+
+    .arguments .argument .left, .arguments .argument .right {
+        padding: 0.5rem 1rem;
+    }
+
+    .arguments .argument:nth-child(2n) {
+        background-color: var(--secondary-background);
+    }
+</style>

src/components/APIExamples.astro

@@ -0,0 +1,101 @@
+---
+import { Code } from "astro/components";
+import Collapsible from "./Collapsible.astro";
+
+const {examples, cmd} = Astro.props;
+
+if (!examples) return;
+
+// Treat title and output as metadata and remove from examples
+const title = examples.title;
+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);
+            }
+
+---
+    {examples ? (
+        <div class="examples">
+            <h3>Examples</h3>
+            <h4>{title}</h4>
+            <div class="buttons">
+                {Object.keys(examples).map(example=>(
+                    <button data-example={example}>{example}</button>
+                ))}
+            </div>
+            <div class="commands">
+                {Object.keys(examples).map(example=>(
+                    <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}}>
+            
+            document.querySelectorAll(`.${cmd} button`).forEach(btn=>{
+                btn.addEventListener('click', (e)=>{
+                    Object.keys(examples).map(example=>{
+                        document.body.classList.remove(example);
+                    });
+                    document.body.classList.add(btn.getAttribute('data-example'));
+                })
+            })
+            
+        </script>
+    ) : ''}
+</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;
+    }
+
+    .buttons {
+        display: flex;
+        gap: 0.75rem;
+    }
+
+    button {
+        color: var(--primary);
+        padding: 0.5em 0.75rem;
+        border-radius: 8px;
+        border: none;
+        background-color: var(--secondary-background);
+    }
+
+    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] {
+        font-weight: bold;
+        color: var(--accent);
+        outline: 1px solid var(--accent);
+        /* background-color: var(--accent); */
+    }
+</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/components/Footer.astro

@@ -17,6 +17,10 @@
         background-color: var(--tertiary-background);
     }
 
+    footer a {
+        color: var(--body-color);
+    }
+
     footer ul {
         display: flex;
         gap: 25px;

src/components/Header.astro

@@ -8,6 +8,7 @@ const links = [
   { name: "Overview", href: "/overview" },
   { name: "Playground", href: "/playground" },
   { name: "Resources", href: "/resources"},
+  { name: "API", href: "/api"},
   { name: "Tutorials", href: "/tutorials"},
   { name: "Community", href: "/community"}
 ]
@@ -38,7 +39,19 @@ function handleMenu(e) {
       </ul>
     </div>
     <div class="right">
-        <div class="search"><p>Search TODO</p></div>
+        <div class="search"><p>Search TODO</p><script>
+          // Astro will do the job of bundling everything for you
+          import { getOramaDB, search } from "@orama/plugin-astro/client"
+      
+          // We load the DB that we generated at build time, this is an asynchronous
+          // operation, so we must either await, or rely on `.then` calls.
+          const db = await getOramaDB('mydb')
+      
+          // Now we can search inside our DB. Of course, feel free to use it in more
+          // interesting ways.
+          console.log('Search Results')
+          console.log(await search(db, { term: 'blob' }))
+        </script></div>
         <btn id="menu">
             <span></span>
             <span></span>

src/components/Hero.astro

@@ -7,12 +7,65 @@
         </div>
     </div>
     <div class="right">
-        <figure><img src="https://picsum.photos/750/420" /></figure>
-        <div class="body">
-            <a class="button-primary" href="/playground">Explore our Playground</a>
-        </div>
+        <figure>
+            <div class="card">
+                <img src="https://picsum.photos/750/420" />
+                <div class="glow" />
+                <div class="body">
+                    <a class="button-primary" href="/playground">Explore our Playground</a>
+                </div>
+            </div>
+        </figure>
     </div>
 </div>
+<script>
+  const card = document.querySelector('.card');
+  let bounds;
+
+  function rotateToMouse(e) {
+  const mouseX = e.clientX;
+  const mouseY = e.clientY;
+  const leftX = mouseX - bounds.x;
+  const topY = mouseY - bounds.y;
+  const center = {
+    x: leftX - bounds.width / 2,
+    y: topY - bounds.height / 2
+  }
+  const distance = Math.sqrt(center.x**2 + center.y**2);
+  
+  card.style.transform = `
+    scale3d(1.07, 1.07, 1.07)
+    rotate3d(
+      ${center.y / 100},
+      ${-center.x / 100},
+      0,
+      ${Math.log(distance)* 2}deg
+    )
+    translate(0, -50%)
+  `;
+  
+  card.querySelector('.glow').style.backgroundImage = `
+    radial-gradient(
+      circle at
+      ${center.x * 2 + bounds.width/2}px
+      ${center.y * 2 + bounds.height/2}px,
+      #ffffff55,
+      #0000000f
+    )
+  `;
+  }
+
+  card.addEventListener('mouseenter', () => {
+    bounds = card.getBoundingClientRect();
+        document.addEventListener('mousemove', rotateToMouse);
+    });
+
+    card.addEventListener('mouseleave', () => {
+        document.removeEventListener('mousemove', rotateToMouse);
+        card.style.transform = '';
+        card.style.background = '';
+    });
+</script>
 <style>
 
 	.hero {
@@ -61,7 +114,13 @@
 
     .hero .right .body {
         position: absolute;
+        top: 50%;
+        left: 50%;
+        display: flex;
+        width: 100%;
         align-items: center;
+        justify-content: center;
+        transform: translate(-50%, -50%);
     }
 
     .hero .right .body a {
@@ -84,38 +143,61 @@
 
     .hero .right figure {
         position: absolute;
-        top: 0;
+        top: 50%;
         left: 0;
-        width: 100%;
-        height: 100%;
+        width: 90%;
+        max-width: 600px;
+        padding-top: 56.25%;
+        margin: auto;
         display: flex;
         align-items: center;
         justify-content: center;
         /* max-height: 90%; */
-        overflow: hidden;
+        /* overflow: hidden; */
+        transform: translate(0, -50%);
     }
 
     .hero .right img {
-        /* position: absolute; */
-        width: 70%;
-        align-self: center;
-        /* top: 25%; */
-        /* left: 85px; */
-        /* top: 92px; */
-        transform: rotate(-2deg);
+        min-width: 100%;
+        height: 100%;
         transform-origin: 0 0;
         box-shadow: 2px 2px 2px;
-        border-radius: 16px;
-        filter: blur(1px);
+        /* border-radius: 16px; */
+        /* filter: blur(1px); */
     }
 
-    /* img {
+    .card {
         position: absolute;
-        width: 70%;
-        transform: translateY(-40%);
-        border-radius: 1em;
-        box-shadow: inset 0 0 10px 10px #000;
-    } */
+        top: 50%;
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        max-height: 337.5px;
+        box-shadow: 0 1px 5px #00000099;
+        transform: rotate3d(0);
+        transform: translate(0, -50%);
+        border-radius: 16px;
+        overflow: hidden;
+        transition-duration: 300ms;
+        transition-property: transform, box-shadow;
+        transition-timing-function: ease-out;
+    }
+
+    .hero .right figure:hover .card {
+        box-shadow: 0 5px 20px 5px #00000044;
+        transition-duration: 150ms;
+    }
+
+    .card .glow {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        
+        background-image: radial-gradient(circle at 50% -20%, #ffffff22, #0000000f);
+    }
 
     @media only screen and (max-width: 1000px) {
         .hero {
@@ -136,6 +218,45 @@
             width: 80%;
         }
 
+        .hero .right figure {
+            position: relative;
+            width: 90%;
+            display: flex;
+            padding-top: 0;
+            align-items: center;
+            justify-content: center;
+            /* max-height: 90%; */
+            /* overflow: hidden; */
+            transform: translate(0, 0);
+        }
+
+        .hero .right figure .card {
+            position: relative;
+            width: 100%;
+            height: unset;
+            max-width: 600px;
+            box-shadow: 0 1px 5px #00000099;
+            transform: rotate3d(0);
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: none;
+        }
+
+        .hero .right figure .card:hover {
+            box-shadow: none;
+        }
+
+        .hero .right figure .card .body {
+            position: relative;
+            transform: translate(0, 0);
+            top: 0;
+            left: 0;
+        }
+
+        .hero .right figure img, .hero .right figure .glow {
+            display: none;
+        }
+
         .hero .body {
             width: fit-content;
         }

src/components/Resources.astro

@@ -11,7 +11,7 @@ import { resources } from '../config';
         {resources.map((resource: object) => (
             <div class="resource">
                 <div class="text">
-                    <p class="title">{resource.title}</p>
+                    <h2 class="title">{resource.title}</h2>
                     <p class="description">{resource.description}</p>
                 </div>
                 <div class="button-primary"><a href={resource.href}>Study {resource.title}</a></div>

src/components/TableOfContents.astro

@@ -57,6 +57,10 @@ const toc = headings && headings.length ? TocItem(headings) : [];
         font-size: 0.785rem;
     }
 
+    .toc ul li a {
+        color: var(--body-text);
+    }
+
     @media only screen and (max-width: 750px) {
         /* .toc {
             margin-top: var(--nav-height);

src/config.js

@@ -1,6 +1,7 @@
 export const AWESOME_LBRY = "https://github.com/LBRYFoundation/Awesome-LBRY";
 export const EDIT_PAGE = "Edit this page";
 export const REPOSITORY = "LBRYFoundation/lbry-tech";
+export const GITHUB_ORG = "LBRYFoundation";
 
 export const features = [
     {
@@ -69,3 +70,39 @@ export const featured = [
     description: "Audio media crawler for lbry."
   }
 ]
+
+export const meta = {
+  title: "LBRY Tech",
+  color: "#27E4EB"
+}
+
+export const REDIRECTS = {
+  // "/api/blockchain": "/api/lbrycrd",
+  // "/api/lbry": "/api/sdk",
+  // "/api/protocol": "/api/sdk",
+  // "/play": "/playground",
+  // "/repository-standards": "/resources/repository-standards",
+  // "/resources/lbry-claimtrie": "/spec#claimtrie",
+  // "/resources/schema": "/spec#metadata",
+  // "/resources/signing-claim": "/resources/claim-signing",
+  // "/resources/uri": "/spec#urls",
+  // "/resources/video-lbryandroid": "https://odysee.com/video-2018-10-15053403:e",
+  // "/resources/video-lbrycrd": "https://odysee.com/intro-to-LBRYcrd:5",
+  // "/resources/video-lbrydesktop": "https://odysee.com/LBRYAppDesign:7",
+  // "/resources/video-lbrysdk": "https://odysee.com/@lbrytech:1/lbrynet-dev-setup:9",
+  // "/specification": "/spec",
+  // "/tour": "/playground",
+  // "/whitepaper": "/spec"
+}
+
+export const API_REPOS = {
+  "lbry-sdk": {
+    "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/layouts/Collections.astro

@@ -94,6 +94,10 @@ const isActive = (href: string)=>{
             z-index: 10;
         }
 
+        .wrapper .sidebar a {
+            color: var(--body-text);
+        }
+        
         .wrapper .sidebar .container {
             position: relative;
             padding: 1rem 1rem 0;
@@ -173,7 +177,7 @@ const isActive = (href: string)=>{
             inset-block: 0;
             inset-inline-end: 2rem;
             margin: calc(2rem + var(--nav-height)) 0;
-            // background-color: var(--secondary-background);
+            /* background-color: var(--secondary-background); */
             transition: 0.3s;
             z-index: 10;
             overflow-y: auto;

src/layouts/Layout.astro

@@ -4,12 +4,17 @@ import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 
 import { ViewTransitions } from 'astro:transitions';
+import LoadingIndicator from "astro-loading-indicator/component"
+
+import * as config from '../config.js';
+
 
 interface Props {
 	title?: string;
+	description?: string;
 }
 
-const { title } = Astro.props;
+const { title, description } = Astro.props;
 ---
 
 <!doctype html>
@@ -19,10 +24,10 @@ const { title } = Astro.props;
 		<title>{title || 'LBRY Tech'}</title>
 
 		<meta name="apple-mobile-web-app-capable" content="yes"/>
-		<meta name="author" content="${config.meta.title}"/>
-		<meta name="description" content="${description}"/>
-		<meta name="title" content="${config.meta.title}"/>
-		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
+		<meta name="author" content={config.meta.title}/>
+		<meta name="description" content={description || config.meta.title}/>
+		<meta name="title" content={config.meta.title}/>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 		<!-- / Open Graph / -->
 		<meta property="og:title" content={title}/>
@@ -33,20 +38,21 @@ const { title } = Astro.props;
 		<meta property="og:locale" content="en_US"/>
 		<meta property="og:site_name" content="LBRY.tech"/>
 		<meta property="og:type" content="website"/>
-		<meta property="og:url" content="https://lbry.tech${state.href}"/>
+		<meta property="og:url" content={`https://lbry.tech${Astro.url.href}`}/>
 
 		<!-- / Social/App Stuff / -->
-		<meta name="apple-mobile-web-app-title" content="${config.meta.title}"/>
-		<meta name="application-name" content="${config.meta.title}"/>
-		<meta name="msapplication-TileColor" content="${config.meta.color}"/>
+		<meta name="apple-mobile-web-app-title" content={config.meta.title}/>
+		<meta name="application-name" content={config.meta.title}/>
+		<meta name="msapplication-TileColor" content={config.meta.color}/>
 		<meta name="msapplication-TileImage" content="/assets/apple-touch-icon.png"/>
-		<meta name="theme-color" content="${config.meta.color}"/>
+		<meta name="theme-color" content={config.meta.color}/>
 
 		<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png"/>
 		<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml"/>
-		<link rel="mask-icon" href="/assets/favicon.svg" color="${config.meta.color}"/>
+		<link rel="mask-icon" href="/assets/favicon.svg" color={config.meta.color}/>
 		<link rel="shortcut icon" href="/assets/favicon.ico"/>
 		<ViewTransitions />
+		<LoadingIndicator color="#27E4EB" />
 	</head>
 	<body>
 		<Header/>

src/pages/api.astro

@@ -0,0 +1,95 @@
+---
+import Layout from '../layouts/Layout.astro';
+
+import * as config from "../config.js";
+
+---
+
+
+<Layout title="API">
+    <div class="wrapper">
+        <h1>Exlore the APIs</h1>
+        <ul class="apis">
+            {Object.keys(config.API_REPOS).map(repo=>(
+                <li class="api">
+                    <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

@@ -0,0 +1,213 @@
+---
+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';
+
+export function getStaticPaths() {
+    
+    const paths = Object.keys(config.API_REPOS).map(repo=>{
+        return {params: {repo}};
+    });
+
+    return paths; 
+}
+
+const { repo } = Astro.params;
+
+const tags = (await (await fetch(`https://data.jsdelivr.com/v1/packages/gh/${config.GITHUB_ORG}/${repo}`)).json()).versions;
+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].api}`)).json());
+
+
+// Convert lbrycrd docs to the same structure as lbry-sdk
+if (repo === 'lbrycrd') {
+    const crd = {};
+    for (let i in docs) {
+        if (!crd[docs[i].namespace]) crd[docs[i].namespace] = {
+            doc: docs[i].namespace,
+            commands: []
+        };
+        crd[docs[i].namespace].commands.push(docs[i]);
+        console.log(docs[i]);
+        
+        //docs.main[i].command = docs.main[i].name;
+    }
+    docs = crd;
+}
+
+const headings: Array<object> = [];
+
+// Generate headings
+Object.keys(docs).forEach(group=>{
+    headings.push({
+        slug: group,
+        text: group.charAt(0).toUpperCase() + group.substr(1).toLowerCase(),
+        depth: 2
+    });
+
+    docs[group].commands.forEach(cmd=>{
+        headings.push({
+            slug: cmd.name,
+            text: cmd.name,
+            depth: 3
+        });
+    })
+    
+});
+
+---
+
+
+<Layout title={repo}>
+    <div class="wrapper">
+        <section class="sidebar">
+            {(headings && headings.length) ? (
+                <aside id="toc">
+                    <TableOfContents headings={headings} />
+                </aside>
+            ) : ''}
+        </section>
+        
+        <!-- <TableOfContents headings={headings} /> -->
+        <select>
+            {tags.map(tag=>(
+                <option>{tag.version}</option>
+            ))}
+        </select>
+        <div class="main">
+            <div class="description">
+                <h1>{repo} {tag.version}</h1>
+                <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
+                    <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>
+                        <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]}/>
+                                <Collapsible open>
+                                    <span slot="head">Returns:</span>
+                                    <Code slot="body" lang={"json"} code={`${cmd.returns || "Not available."}`} class:list={["returns"]} />
+                                </Collapsible>
+                                </div>
+                            <hr/>
+                        ))}
+                    </section>
+                ))}
+            </div>
+        </div>
+    </div>
+    <style>
+        /* Should we have version selector? */
+        select {
+            display: none;
+        }
+
+        .wrapper {
+            padding: 0 1rem;
+        }
+
+        .wrapper .main {
+            padding-inline-end: var(--sidebar-width);
+            transition: 0.3s;
+            overflow-x: hidden;
+            max-width: 1750px;
+            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 {
+            display: flex;
+            flex-direction: column;
+            gap: 25px;
+        }
+        
+        .commands section .command {
+            display: flex;
+            flex-direction: column;
+            gap: 1em;
+            padding: 0 1rem;
+        }
+
+        .wrapper #toc {
+            position: fixed;
+            width: calc(var(--sidebar-width) - 2rem);
+            height: fit-content;
+            max-height: calc(100vh - var(--nav-height)*2 - 2rem * 2);
+            inset-block: 0;
+            inset-inline-end: 2rem;
+            margin: calc(2rem + var(--nav-height)) 0;
+            // background-color: var(--secondary-background);
+            transition: 0.3s;
+            z-index: 10;
+            overflow-y: auto;
+            border-radius: 1em;
+            background-color: var(--secondary-background);
+        }
+
+        @media only screen and (max-width: 1000px) {
+            .wrapper #toc {
+                position: relative;
+                width: var(--sidebar-width);
+                max-height: unset;
+                inset-block: unset;
+                inset-inline-end: unset;
+                margin-top: 0;
+                z-index: 1;
+                background-color: transparent;
+            }
+
+            .wrapper .main {
+                padding-inline-end: unset;
+            }
+        }
+        
+    </style>
+
+    <style is:inline>
+        .commands > section pre {
+            padding: 1em;
+            border-radius: 9px;
+            max-width: 80%;
+            background-color: var(--secondary-background) !important;
+        }
+
+        .commands > section pre code span {
+            white-space: break-spaces;
+        }
+    </style>
+</Layout>

src/styles/Header.css

@@ -3,6 +3,10 @@ header {
     background-color: var(--tertiary-background);
 }
 
+header a {
+    color: var(--body-text);
+}
+
 header nav {
     display: flex;
     justify-content: space-between;

src/styles/global.scss

@@ -85,7 +85,7 @@ p {
 }
 
 a {
-    color: var(--body-text);
+    color: var(--accent);
     text-decoration: none;
 }
 
@@ -103,8 +103,18 @@ a {
     border-radius: 0.5em;
     padding: 10px 20px;
     background-color: var(--tertiary-background);
+    color: var(--body-text);
 }
 
 .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;
+}

src/styles/markdown.css

@@ -50,7 +50,7 @@ h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
       /* --color-border-muted: #21262d; */
       --color-border-muted: var(--tertiary-background);
       --color-neutral-muted: rgba(110,118,129,0.4);
-      --color-accent-fg: #2f81f7;
+      --color-accent-fg: var(--accent);
       --color-accent-emphasis: #1f6feb;
       --color-attention-fg: #d29922;
       --color-attention-subtle: rgba(187,128,9,0.15);
@@ -59,7 +59,7 @@ h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
 }
   
   .markdown-body {
-    font-size: 16px;
+    font-size: 1rem;
     line-height: 1.5;
     word-wrap: break-word;
   }
@@ -252,6 +252,8 @@ h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
     width: max-content;
     max-width: 100%;
     overflow: auto;
+    border-radius: 0.5em;
+    background-color: var(--tertiary-background);
   }
   
   .markdown-body td,
@@ -403,6 +405,7 @@ h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
     font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
     font-size: 12px;
     word-wrap: normal;
+    background-color: var(--secondary-background) !important;
   }
   
   .markdown-body .octicon {