Bring back the docs for components and improve the Icon demo.

admin/bando/Components.svelte

@@ -204,11 +204,14 @@
     </tabs>
     <component data-testid="demo-{ selected.title }">
       {#if show == "CODE"}
-        <Code src={ selected.code } />
+        <Code src={ selected.code } language="javascript" />
       {:else if show == "DOCS"}
         {#await load_docs(selected) then docs }
           {#if docs}
             <Markdown content={ docs } />
+          {:else}
+            <h1>No Docs</h1>
+            <p>This component is not documented yet.</p>
           {/if}
         {/await}
       {:else}

admin/bando/demos/Icon.svelte

@@ -1,114 +1,46 @@
 <script>
   import Icon from "$/client/components/Icon.svelte";
-  import { onMount } from "svelte";
+  let size = 64;
-  import api from "$/client/api.js";
+  let fill = "none";
-  import { log } from "$/client/logging.js";
+  let color = "var(--color)";
-
+  let width = "2px";
-  let all_icons = [];
+  let shadow = "";
-  let inactive = false;
+  let tooltip = "This is a tip!";
-  let icons = [];
+  let tip_position = "bottom";
-  export let size=48;
-  let search = "";
-  export let labels=true;
-  export let tight=false;
-  let message = "";
-
-  const search_icons = (pattern) => {
-    icons = all_icons.filter(i => i.includes(pattern));
-  }
-
-  $: search_icons(search);
-
-  const gen_code = (name) => {
-    let results = `<Icon name="${name}" size="${size}" />`;
-
-    navigator.clipboard.writeText(results).then(() => {
-      message = `${name} copied to clipboard.`;
-    }, () => {
-      message = `${name} copy FAILED.`;
-    });
-  }
-
-  onMount(async () => {
-    const [status, data] = await api.get("/icons/index.json");
-
-    if(status === 200) {
-      icons = data;
-      all_icons = icons;
-    } else {
-      log.error("Invalid response", status, data);
-    }
-  });
 </script>
 
 <style>
   icons {
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-    grid-template-rows: auto;
-    row-gap: 1rem;
-  }
-
-  icons.tight {
-    grid-template-columns: repeat(10, 1fr);
-  }
-
-  icons icon {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
   }
 
-  search-bar {
+  icons div {
     display: flex;
-    justify-content: space-evenly;
+    flex-direction: row;
-    flex-wrap: nowrap;
+    font-size: 2em;
-  }
-
-  search-bar input#size {
-    width: 6ch;
-  }
-
-  search-bar input#search {
-    min-width: 30ch;
-    max-wdith: 30ch;
-    width: 30ch;
-  }
-
-  search-bar span {
-    padding-right: 1rem;
-  }
-
-  @media only screen and (max-width: 900px) {
-    icons {
-      grid-template-columns: repeat(4, 1fr);
-    }
   }
 
-  @media only screen and (max-width: 600px) {
+  icons div input {
-    icons {
+    font-size: 1em;
-      grid-template-columns: repeat(3, 1fr);
-    }
   }
-
 </style>
 
-<search-bar>
+<icons>
-  <span on:click={ () => inactive = !inactive }><Icon name={ inactive ? 'eye' : 'eye-off'} size="24" /></span>
+  <div>size: <input name="size" bind:value={ size } /></div>
-  <input bind:value={ search } id="search" > <Icon name="x" size="24" /> <input bind:value={ size } id="size" >
+  <div>fill: <input name="fill" bind:value={ fill } /></div>
-  <span>{ message }</span>
+  <div>width: <input name="width" bind:value={ width } /></div>
-</search-bar>
+  <div>color: <input name="color" bind:value={ color } /></div>
-
+  <div>shadow: <input name="shadow" type="checkbox" bind:checked={ shadow } /></div>
-<icons class:tight={ tight }>
+  <div>tooltip: <input name="tooltip" bind:value={ tooltip } /></div>
-{#each icons as name}
+  <div>tip_position: <input name="tip_position" bind:value={ tip_position } /></div>
-  <icon on:click={ () => gen_code(name) }>
+  <Icon name="keyboard"    color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
-  <Icon name={ name } size={ size } inactive={inactive}/>
+  <Icon name="alarm-clock" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
-  {#if labels}
+  <Icon name="activity"    color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
-    <span>{ name }</span>
+  <Icon name="apple"       color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
-  {/if}
+  <Icon name="angry"       color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
-  </icon>
+  <Icon name="anchor"      color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
-{:else}
-  <h1>No Icons</h1>
-{/each}
 </icons>
+
+<hr>
+<a href="/admin/#/icons"><button type="button">See all icons and search them.</button></a>

admin/bando/demos/Icon.svelte.md

@@ -0,0 +1,5 @@
+# Icons by <a href="https://lucide.dev">lucide</a>
+
+The Bandolier includes the great icon collection from <a href="https://lucide.dev">lucide</a> to get you started.  Probably every icon you could possibly need is in this collection, and there's a nice Icon Finder tool to find what you need at <a href="/admin/#/icons/">/admin/#/icons/</a>.
+
+Using `Icon` is very simple.  You find the name, and can set a size, whether it's inactive or not, and a few other options to control the appearance.  In the Icon Finder you can click on an icon to copy the code for it.