@ -4,20 +4,20 @@
import Layout from '$/client/Layout.svelte'; import Layout from '$/client/Layout.svelte';
import Icon from '$/client/components/Icon.svelte'; import Icon from '$/client/components/Icon.svelte';
import Code from "$/client/components/Code.svelte"; import Code from "$/client/components/Code.svelte";
import HTML from "$/client/components/HTML.svelte";
import api from "$/client/api.js"; import api from "$/client/api.js";
let index = {} ; let index = {} ;
let docs_data; let docs_data;
let url; let url = "/docs/";
let readme_docs;
export let params; export let params;
const caps_to_icon = { const caps_to_icon = {
"_ BUG_ ": "bug", "BUG": "bug",
"_ TODO_ ": "clipboard-check", "TODO": "clipboard-check",
"_ WARNING_ ": "alert-triangle", "WARNING": "alert-triangle",
"_ FOOTGUN_ ": "bomb", "FOOTGUN": "bomb",
"_ DEPRECATED_ ": "axe" "DEPRECATED": "axe"
} }
const jump = (id) => { const jump = (id) => {
@ -25,9 +25,7 @@
if(node) node.scrollIntoView(); if(node) node.scrollIntoView();
} }
const jump_top = () => { const jump_top = () => jump("top-scroll");
jump("top-scroll");
}
const load_docs = async (to_load) => { const load_docs = async (to_load) => {
// only load if the URL changed // only load if the URL changed
@ -42,26 +40,9 @@
const load_index = async () => { const load_index = async () => {
const [status, data] = await api.get("/docs/api/index.json"); const [status, data] = await api.get("/docs/api/index.json");
index = status === 200 ? data : {} ; index = status === 200 ? data : {} ;
} }
const load_readme = async () => {
if(!readme_docs) {
console.log("LOAD README");
const [status, data] = await api.blob("/docs/api/index.html");
if(status === 200) {
readme_docs = await data.text();
} else {
readme_docs = `< callout class = "error" > ERROR LOADING README: ${ status } </ callout > `
}
}
url = "/docs/";
console.log("URL", url, "README", readme_docs !== undefined, "PARAMS", params);
}
const type_to_syntax = { const type_to_syntax = {
"callexpression": "()", "callexpression": "()",
"objectexpression": "{} ", "objectexpression": "{} ",
@ -70,17 +51,13 @@
"method": "()" "method": "()"
} }
onMount(async () => { onMount(load_index);
await load_readme();
await load_index();
});
$: if(params.wild) { $: if(params.wild) {
// load_docs will ignore any calls where params.wild doesn't change url
load_docs(params.wild) load_docs(params.wild)
url = url; // the most irritating thing about Svelte
} else { } else {
load_readme(); url = "/docs/";
url = url;
} }
< / script > < / script >
@ -204,9 +181,9 @@
< Layout footer = { false } header= { false } centered = { true } fullscreen= { true } > < Layout footer = { false } header= { false } centered = { true } fullscreen= { true } >
< sidebar > < sidebar >
< top > < h4 > < a href = "/" use:link > < Icon name = "arrow-left-circle" / > API Docs< / a > < / h4 > < / top > < top > < h4 > < a href = "/" use:link > < Icon name = "arrow-left-circle" / > API Docs< / a > < / h4 > < / top >
< items > < items >
< a class:active = { url === "/docs/" } href="/docs/" use:link > README </ a > < a class:active = { url === "/docs/" } href="/docs/" use:link > Introduction </ a >
{ #each Object . keys ( index ) as item } { #each Object . keys ( index ) as item }
< a class:active = { item === url } href="/docs/ { item } " use:link > { item } </ a > < a class:active = { item === url } href="/docs/ { item } " use:link > { item } </ a >
{ /each } { /each }
@ -216,9 +193,7 @@
< right > < right >
{ #if url === "/docs/" } { #if url === "/docs/" }
< div id = "top-scroll" > < div id = "top-scroll" >
{ #if readme_docs } < HTML url = "/docs/api/index.html" / >
{ @html readme_docs }
{ /if }
< / div > < / div >
{ :else if docs_data } { :else if docs_data }
< toc id = "top-scroll" > < toc id = "top-scroll" >
