bandolier-template/admin/pages/DocsBrowser.svelte

<script>
  import { push, link } from 'svelte-spa-router';
  import Validator from 'Validator';
  import { onMount } from 'svelte';
  import Layout from '$/client/Layout.svelte';
  import Icon from '$/client/components/Icon.svelte';
  import Blockstart from "$/client/components/Blockstart.svelte";
  import Code from "$/client/components/Code.svelte";
  import api from "$/client/api.js";

  let index = {};
  let docs_data;
  let url;
  export let params;

  const load_docs = async (to_load) => {
    const [status, data] = await api.get(`/docs/api/${to_load}.json`);

    docs_data = status === 200 ? data : {};
    url = to_load;
    window.scrollTo(0, 0);
  }

  const load_index = async () => {
    const [status, data] = await api.get("/docs/api/index.json");

    index = status === 200 ? data : {};
  }

  onMount(async () => {
    await load_index();
  });

  $: console.log("params", params);

  $: if(params.wild && params.wild !== url) {
    load_docs(params.wild);
  }
</script>

<style>
  sidebar {
    max-width: 300px;
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    margin: unset;
  }

  sidebar items {
    overflow-y: auto;
  }

  #content {
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
  }
</style>


<Layout footer={ false} header={ false } centered={ true } fullscreen={ true }>
  <Blockstart>
    <block class="horizontal">
      <sidebar>
      <top><h4><a href="/" use:link><Icon name="chevrons-up" /> Docs</a></h4></top>
      <items>
        {#each Object.keys(index) as item}
          <a class:active={ item === url } href="/docs/{item}" use:link>{item}</a>
        {/each}
      </items>
      </sidebar>

      <right id="content" style="--pad: 0.5rem;">
        {#if docs_data}
          {#each docs_data.exports as exp}
            <h1>{ url }</h1>
            <h2>{exp.name}</h2>
            {#if exp.comment}
              <pre>
{ exp.comment.value }
              </pre>
            {/if}
            {#if exp.isa === "class"}
              {#each exp.methods as method}
                <h4>{ method.name }</h4>
                {#if exp.comment}
                  <pre>
{ exp.comment.value }
                  </pre>
                {/if}
              <Code content={ method.code } language="javascript" />
              {/each}
            {:else}
              <Code content={ exp.code } language="javascript" />
            {/if}
          {/each}
        {/if}
      </right>
    </block>
  </Blockstart>
</Layout>