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 Markdown from '$/client/components/Markdown.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;
    console.log(docs_data);
    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;
  }

  right {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    padding: 0.5rem;

    width: calc(100vw - 300px);
    min-width: calc(100vw - 300px);
    max-width: calc(100vw - 300px);
  }

  export > heading {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--value3);
    width: 100%;
    padding: 0.5rem;
  }

  export > heading h4 {
    margin: 0px !important;
  }

  export > heading meta-data {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
  }

  export {
    margin-top: 1rem;
  }

  export > info {
    display: block;
    padding: 0.5rem;
  }

  export > info commment {
    display: block;
  }
</style>


<Layout footer={ false} header={ false } centered={ true } fullscreen={ true }>
  <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>
    <h1>{ url }</h1>
    {#if docs_data}
      {#each docs_data.exports as exp}
        {#if exp.isa === "class"}
          <h2>Class: { exp.name }</h2>
          <comment>
            {#if exp.comment}
              {@html exp.comment}
            {/if}
          </comment>
          <Code content={ exp.code } language="javascript" />

          {#each exp.methods as member}
            <export>
              <heading>
                <h4>{ member.name }</h4>
                <meta-data>
                  {docs_data.source}:{ member.line_start }
                  <em>{ member.isa }</em>
                  {#if member.static}<b>static</b>{/if}
                  {#if member.async}<b>async</b>{/if}
                  {#if member.generator}<b>generator</b>{/if}
                </meta-data>
              </heading>
              <info>
                {#if exp.comment}
                  <comment>
                    { @html exp.comment }
                  </comment>
                {/if}
                <h4>Signature</h4>
                <Code content={ member.code } language="javascript" />
              </info>
            </export>
          {/each}
        {:else}
          <export>
            <heading>
              <h4> {exp.name}</h4>
              <meta-data>
                {docs_data.source}:{ exp.line_start }
                <em>{ exp.isa }</em>
                {#if exp.static}<b>static</b>{/if}
                {#if exp.async}<b>async</b>{/if}
                {#if exp.generator}<b>generator</b>{/if}
                </meta-data>
              </heading>
            <info>
              {#if exp.comment}
                <comment>
                {@html exp.comment}
                </comment>
              {/if}
              <h4>Signature</h4>
              <Code content={ exp.code } language="javascript" />
            </info>
          </export>
        {/if}
      {/each}
    {/if}
  </right>
</Layout>