mirror of
https://github.com/LBRYFoundation/lbry-tech.git
synced 2025-03-04 14:57:55 +00:00
Compare commits
No commits in common. "9ac470b1097f1dd60f34a8e21c48eeaf8145f62d" and "a208780abfdf98dccea76562df388a0351a8f60f" have entirely different histories.
9ac470b109
...
a208780abf
12 changed files with 116 additions and 569 deletions
|
|
@ -1,61 +0,0 @@
|
|||
---
|
||||
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 .left, .arguments .right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
---
|
||||
import { Code } from "astro/components";
|
||||
|
||||
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;
|
||||
|
||||
function setExample(example, cmd){
|
||||
console.log(example, cmd);
|
||||
document.body.classList.toggle(example);
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
<div class="examples">
|
||||
{examples ? (
|
||||
<div>
|
||||
<h3>Examples</h3>
|
||||
<h4>{title}</h4>
|
||||
{Object.keys(examples).map(example=>(
|
||||
<button data-example={example}>{example}</button>
|
||||
))}
|
||||
{Object.keys(examples).map(example=>(
|
||||
<div class:list={["example", cmd, example]}>
|
||||
<p>{example}</p>
|
||||
<Code lang={"bash"} code={`${examples[example]}`} />
|
||||
</div>
|
||||
))}
|
||||
</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>
|
||||
.example {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body:not(.curl, .lbrynet, .python) .examples .example:first-of-type {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.curl .example.curl {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.lbrynet .example.lbrynet {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.python .example.python {
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -8,7 +8,6 @@ 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"}
|
||||
]
|
||||
|
|
@ -17,10 +16,6 @@ const isActive = (href: string)=>{
|
|||
return href === pathname || href === pathname.split('/').slice(0,2).join('/');
|
||||
}
|
||||
|
||||
function handleMenu(e) {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
<header>
|
||||
|
|
@ -40,24 +35,7 @@ function handleMenu(e) {
|
|||
</div>
|
||||
<div class="right">
|
||||
<div class="search"><p>Search TODO</p></div>
|
||||
<btn id="menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</btn>
|
||||
<btn class="menu"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></btn>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<script>
|
||||
const btn = document.querySelector('#menu');
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
btn.classList.toggle('open');
|
||||
document.querySelectorAll('.sidebar').forEach(sidebar=>{
|
||||
sidebar.classList.toggle('active');
|
||||
})
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -3,10 +3,12 @@
|
|||
import TableOfContentsHeading from "./TableOfContentsHeading.astro";
|
||||
import TocItem from '../utils/generateToc.ts';
|
||||
const { headings, edit } = Astro.props;
|
||||
import { REPOSITORY } from "../config";
|
||||
import { REPOSITORY, edit_page } from "../config";
|
||||
|
||||
const toc = headings && headings.length ? TocItem(headings) : [];
|
||||
|
||||
console.log(edit);
|
||||
|
||||
---
|
||||
|
||||
<section class="toc">
|
||||
|
|
@ -21,19 +23,22 @@ const toc = headings && headings.length ? TocItem(headings) : [];
|
|||
</section>
|
||||
<style is:inline>
|
||||
.toc {
|
||||
width: calc(var(--sidebar-width) - 2rem);
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
/* max-height: 80%; */
|
||||
/* inset-block: 0; */
|
||||
position: fixed;
|
||||
width: var(--sidebar-width);
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
inset-block: 0;
|
||||
inset-inline-end: 0;
|
||||
padding-top: var(--nav-height);
|
||||
background-color: var(--secondary-background);
|
||||
transition: 0.3s;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.toc .container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem 1rem 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.toc .container summary {
|
||||
|
|
@ -55,15 +60,6 @@ const toc = headings && headings.length ? TocItem(headings) : [];
|
|||
|
||||
.toc ul li:hover {
|
||||
font-size: 0.785rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 750px) {
|
||||
/* .toc {
|
||||
margin-top: var(--nav-height);
|
||||
margin-bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: unset;
|
||||
transform: translateX(-100%);
|
||||
} */
|
||||
/* border-left: 1px solid var(--header-text); */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -39,7 +39,7 @@ const { heading } = Astro.props;
|
|||
}
|
||||
|
||||
li ul {
|
||||
list-style: none;
|
||||
/* list-style: none; */
|
||||
padding-inline-start: 1rem;
|
||||
/* border-left: 1px solid var(--secondary-background); */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,25 +72,20 @@ export const featured = [
|
|||
]
|
||||
|
||||
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": "docs/api.json",
|
||||
"lbrycrd": "contrib/devtools/generated/api_v1.json"
|
||||
"/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"
|
||||
}
|
||||
|
|
@ -35,11 +35,6 @@ const isActive = (href: string)=>{
|
|||
<Layout title={frontmatter.title}>
|
||||
<div class="wrapper">
|
||||
<section class="sidebar">
|
||||
{(headings && headings.length) ? (
|
||||
<aside id="toc">
|
||||
<TableOfContents headings={headings} />
|
||||
</aside>
|
||||
) : ''}
|
||||
<div class="container">
|
||||
{items.length ? (
|
||||
<summary>
|
||||
|
|
@ -55,17 +50,15 @@ const isActive = (href: string)=>{
|
|||
</section>
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
<!-- {headings && (
|
||||
<aside id="toc">
|
||||
<TableOfContents headings={headings} />
|
||||
<aside class="toc">
|
||||
<TableOfContents headings={headings} edit={'src/content' + pathname + '.md'} />
|
||||
</aside>
|
||||
)} -->
|
||||
<div class="markdown-body">
|
||||
<h1>{frontmatter.title}</h1>
|
||||
<h3><Fragment set:html={description}/></h3>
|
||||
<slot/>
|
||||
{!noedit && (
|
||||
<hr/>
|
||||
<hr>
|
||||
<a class="edit" href={`https://github.com/${REPOSITORY}/tree/master/src/content${pathname}.mdx`} target="_blank">{EDIT_PAGE}</a>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -75,29 +68,24 @@ const isActive = (href: string)=>{
|
|||
<style>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
/* max-width: 1000px; */
|
||||
}
|
||||
|
||||
.wrapper .sidebar {
|
||||
position: fixed;
|
||||
width: var(--sidebar-width);
|
||||
height: 100%;
|
||||
max-height: calc(100% - var(--nav-height));
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
inset-block: 0;
|
||||
inset-inline-start: 0;
|
||||
margin-top: var(--nav-height);
|
||||
padding-bottom: var(--nav-height);
|
||||
/* padding: 20px; */
|
||||
// padding: var(--nav-height) 0;
|
||||
padding-top: var(--nav-height);
|
||||
background-color: var(--secondary-background);
|
||||
transition: 0.3s;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.wrapper .sidebar .container {
|
||||
position: relative;
|
||||
padding: 1rem 1rem 0;
|
||||
// height: calc(100vh - var(--nav-height)*2);
|
||||
}
|
||||
|
||||
.wrapper .sidebar summary .title {
|
||||
|
|
@ -160,56 +148,32 @@ const isActive = (href: string)=>{
|
|||
margin: 1rem;
|
||||
}
|
||||
|
||||
.wrapper .main aside {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
order: 2;
|
||||
width: fit-content;
|
||||
max-width: 25%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wrapper .markdown-body {
|
||||
// padding: 10px 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.wrapper .toc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 750px) {
|
||||
.wrapper .sidebar {
|
||||
transform: translateX(-100%);
|
||||
transform: translateX(-80%);
|
||||
}
|
||||
|
||||
.wrapper .sidebar.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
|
||||
.wrapper .main {
|
||||
padding-inline-start: unset;
|
||||
padding-inline-start: calc(var(--sidebar-width) * 0.2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,15 +17,13 @@ const description = await markdown.parse(frontmatter.description);
|
|||
|
||||
<Layout title={frontmatter.title}>
|
||||
<div class="wrapper">
|
||||
<section class="sidebar">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
{headings && (
|
||||
<aside id="toc">
|
||||
<aside class="toc">
|
||||
<TableOfContents headings={headings} />
|
||||
</aside>
|
||||
)}
|
||||
</section>
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
<div class="markdown-body">
|
||||
<h1>{frontmatter.title}</h1>
|
||||
<h3><Fragment set:html={description}/></h3>
|
||||
|
|
@ -52,75 +50,32 @@ const description = await markdown.parse(frontmatter.description);
|
|||
margin: 1rem;
|
||||
}
|
||||
|
||||
.wrapper .main aside {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
order: 2;
|
||||
/* max-width: 25%; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wrapper .markdown-body {
|
||||
/* margin: 10px 20px; */
|
||||
/* max-width: 75%; */
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.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 .sidebar {
|
||||
position: fixed;
|
||||
width: var(--sidebar-width);
|
||||
height: 100%;
|
||||
max-height: calc(100% - var(--nav-height));
|
||||
overflow-y: auto;
|
||||
inset-block: 0;
|
||||
inset-inline-start: 0;
|
||||
margin-top: var(--nav-height);
|
||||
padding-bottom: var(--nav-height);
|
||||
/* padding: 20px; */
|
||||
// padding: var(--nav-height) 0;
|
||||
background-color: var(--secondary-background);
|
||||
transition: 0.3s;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 100%;
|
||||
padding-inline-start: var(--sidebar-width);
|
||||
}
|
||||
.wrapper .toc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 750px) {
|
||||
.wrapper .sidebar {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.wrapper .sidebar.active {
|
||||
transform: translateX(0);
|
||||
transform: translateX(-80%);
|
||||
}
|
||||
|
||||
.wrapper .main {
|
||||
width: 100%;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-start: calc(400px * 0.2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
|
||||
import * as config from "../config.js";
|
||||
|
||||
---
|
||||
|
||||
|
||||
<Layout title="API">
|
||||
<div class="wrapper">
|
||||
<ul>
|
||||
{Object.keys(config.API_REPOS).map(repo=>(
|
||||
<li>
|
||||
<a href={`/api/${repo}`}>{repo}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
@ -1,15 +1,14 @@
|
|||
---
|
||||
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 * as config from "../../config.js";
|
||||
import { Code } from 'astro:components';
|
||||
|
||||
export function getStaticPaths() {
|
||||
const repos = [
|
||||
"lbry-sdk",
|
||||
]
|
||||
|
||||
const paths = Object.keys(config.API_REPOS).map(repo=>{
|
||||
const paths = repos.map(repo=>{
|
||||
return {params: {repo}};
|
||||
});
|
||||
|
||||
|
|
@ -21,168 +20,44 @@ 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];
|
||||
const docs = (await (await fetch(`https://cdn.jsdelivr.net/gh/${config.GITHUB_ORG}/${repo}/docs/api.json`)).json());
|
||||
console.log(docs);
|
||||
|
||||
let docs = (await (await fetch(`https://cdn.jsdelivr.net/gh/${config.GITHUB_ORG}/${repo}@${tag.version}/${config.API_REPOS[repo]}`)).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} /> -->
|
||||
<div>Looking at repo: {repo}!</div>
|
||||
<div class="sidebar">
|
||||
<ul>
|
||||
{Object.keys(docs).map(header=>(
|
||||
<li>
|
||||
<a href={`#${header}`}>{header}</a>
|
||||
{docs[header].commands.map(cmd=>(
|
||||
<p><a href={`#${cmd.name}`}>{cmd.name}</a></p>
|
||||
))}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<select>
|
||||
{tags.map(tag=>(
|
||||
<option>{tag.version}</option>
|
||||
))}
|
||||
</select>
|
||||
<div class="main">
|
||||
<h1>{repo} {tag.version}</h1>
|
||||
<p>Methods and signatures provided by {repo} 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 class="commands">
|
||||
<div>
|
||||
{Object.keys(docs).map(header=>(
|
||||
<section>
|
||||
<h1 id={header}>{header}</h1>
|
||||
<h2 id={header}>{header}</h2>
|
||||
{docs[header].commands.map(cmd=>(
|
||||
<div class:list={["command", cmd.name]}>
|
||||
<h2 id={cmd.name}>{cmd.name}</h2>
|
||||
<h3 id={cmd.name}>{cmd.name}</h3>
|
||||
<p>{cmd.description}</p>
|
||||
<APIArguments args={cmd.arguments}/>
|
||||
<APIExamples cmd={cmd.name} examples={cmd.examples[0]}/>
|
||||
<h3>Returns</h3>
|
||||
<Code lang={"json"} code={`${cmd.returns || "Not available."}`} class:list={["returns"]} />
|
||||
</div>
|
||||
<hr/>
|
||||
<Code lang={"json"} code={cmd.returns} />
|
||||
<code>
|
||||
</code>
|
||||
))}
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.wrapper {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.wrapper .main {
|
||||
/* width: calc(100vw - var(--sidebar-width)); */
|
||||
padding-inline-end: var(--sidebar-width);
|
||||
transition: 0.3s;
|
||||
overflow-x: hidden;
|
||||
max-width: 1750px;
|
||||
width: calc(100%);
|
||||
}
|
||||
|
||||
.commands {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.commands section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.commands section .command {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
@ -41,74 +41,17 @@ header ul li:hover a {
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
header .right #menu {
|
||||
header .right .menu {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#menu {
|
||||
flex-direction: column;
|
||||
/* justify-content: space-between; */
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 1.5rem;
|
||||
position: relative;
|
||||
/* margin: 50px auto; */
|
||||
-webkit-transition: .5s ease-in-out;
|
||||
-moz-transition: .5s ease-in-out;
|
||||
-o-transition: .5s ease-in-out;
|
||||
transition: .5s ease-in-out;
|
||||
cursor: pointer;
|
||||
/* border:1px solid red; */
|
||||
}
|
||||
|
||||
#menu span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
background: var(--header-text);
|
||||
border-radius: 9px;
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
transform: rotate(0deg);
|
||||
transition: .2s ease-in-out;
|
||||
/* border:4px solid black; */
|
||||
}
|
||||
|
||||
#menu span:nth-child(1) {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#menu span:nth-child(3) {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#menu.open span:nth-child(1) {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
#menu.open span:nth-child(2) {
|
||||
width: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
#menu.open span:nth-child(3) {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 750px) {
|
||||
@media only screen and (max-width: 600px) {
|
||||
header .left ul, header .right .search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header .right #menu {
|
||||
display: flex;
|
||||
/* width: 25px; */
|
||||
header .right .menu {
|
||||
display: block;
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
|
|
@ -30,20 +30,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 750px) {
|
||||
:root {
|
||||
--sidebar-width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*:target{
|
||||
scroll-margin-top: calc(var(--nav-height) + 1em);
|
||||
}
|
||||
*:target{ padding-top: 100px;margin-top: -100px}
|
||||
|
||||
html {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
|
|
|
|||
Loading…
Reference in a new issue