Changes from working on the documentation website. Lots of little fixes all over as I found things that could be improved.

admin/App.svelte

@@ -7,7 +7,7 @@
 
 <Router {routes}/>
 
-{#if process.env.DANGER_ADMIN}
+{#if process.env.DANGER_ADMIN === "1"}
   <Reloader />
   <Bandolier shown={ false }/>
 {/if}

admin/Header.svelte

@@ -4,6 +4,7 @@
   import Darkmode from '$/client/components/Darkmode.svelte';
   import {link} from 'svelte-spa-router';
   import { user } from "$/client/stores.js";
+  import { register_enabled } from "$/client/config.js";
 
   export let fixed = false;
 </script>
@@ -13,15 +14,39 @@
       {#if $user.authenticated}
         <a href="/client/#/"><Icon name="home" tooltip="Back to app." size="36" /></a>
         <ul>
+          <li><a href="/" on:click|preventDefault={ logout_user } data-testid="logout-link"><Icon name="log-out" tooltip="Log out."/></a></li>
+          <li><a data-testid="user-profile-button" href="/profile/" use:link><Icon name="settings" tooltip="Settings."/></a></li>
+          <li><a href="/feed.rss"><Icon name="rss" tooltip="RSS Feed." tip_position="bottom-left" /></a></li>
+          <li><a href="https://learnjsthehardway.com/blog/"><Icon name="book" tooltip="Blog posts." /></a></li>
           {#if $user.admin }
-            <li><a href="/" use:link><Icon name="keyboard" tooltip="Admin Dashboard."/></a></li>
+            <li><a href="/admin/#/"><Icon name="keyboard" tooltip="Admin Dashboard."/></a></li>
           {/if}
-
+          <li><a href="/" on:click|preventDefault={ logout_user } data-testid="logout-link"><Icon name="log-out" tooltip="Log out
-          <li><a href="/" on:click|preventDefault={ logout_user } data-testid="logout-link"><Icon name="log-out" tooltip="Log out."/></a></li>
+."/></a></li>
           <li><Darkmode /></li>
       </ul>
       {:else}
-        <a href="/client/#/">Login</a>
+        <!-- don't use:link because we want them to go to the landing page if they aren't logged in. -->
+        <a href="/"><Icon name="home" size="36" /></a>
+        <ul>
+          {#if register_enabled}
+            <li>
+              <a id="register-button" href="/register/top/">
+                <span class="mobile">
+                  <Icon name="dollar-sign" tooltip="Register."/>
+                </span>
+
+                <span class="mobile-hide">
+                  <button type="button">Register</button>
+                </span>
+              </a>
+            </li>
+          {/if}
+          <li><a href="/login/" use:link><Icon name="log-in" tooltip="Log in." /></a></li>
+          <li><a href="https://learnjsthehardway.com/blog/"><Icon name="book" tooltip="Blog posts." /></a></li>
+          <li><a href="/live/" use:link><Icon name="video" tooltip="Livestreams." /></a></li>
+          <li><Darkmode /></li>
+        </ul>
       {/if}
   </nav>
 </header>

admin/Layout.svelte

@@ -21,7 +21,7 @@
     <Header fixed={fixed}/>
   {/if}
 
-  <LoggedIn optional={ auth_optional } redirect="/login" show_required_page={ false }>
+  <LoggedIn optional={ auth_optional } redirect="/client/#/login" show_required_page={ false }>
     <main class:horizontal class:fullwidth class:fullscreen class:centered slot="yes" data-testid={ testid }>
       <slot></slot>
     </main>

admin/pages/DocsBrowser.svelte

@@ -4,20 +4,20 @@
   import Layout from '$/client/Layout.svelte';
   import Icon from '$/client/components/Icon.svelte';
   import Code from "$/client/components/Code.svelte";
+  import HTML from "$/client/components/HTML.svelte";
   import api from "$/client/api.js";
 
   let index = {};
   let docs_data;
-  let url;
+  let url = "/docs/";
-  let readme_docs;
   export let params;
 
   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) => {
@@ -25,9 +25,7 @@
     if(node) node.scrollIntoView();
   }
 
-  const jump_top = () => {
+  const jump_top = () => jump("top-scroll");
-    jump("top-scroll");
-  }
 
   const load_docs = async (to_load) => {
     // only load if the URL changed
@@ -42,26 +40,9 @@
 
   const load_index = async () => {
     const [status, data] = await api.get("/docs/api/index.json");
-
     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 = {
     "callexpression": "()",
     "objectexpression": "{}",
@@ -70,17 +51,13 @@
     "method": "()"
   }
 
-  onMount(async () => {
+  onMount(load_index);
-    await load_readme();
-    await load_index();
-  });
 
   $: if(params.wild) {
+    // load_docs will ignore any calls where params.wild doesn't change url
     load_docs(params.wild)
-    url = url;  // the most irritating thing about Svelte
   } else {
-    load_readme();
+    url = "/docs/";
-    url = url;
   }
 </script>
 
@@ -206,7 +183,7 @@
   <sidebar>
   <top><h4><a href="/" use:link><Icon name="arrow-left-circle" /> API Docs</a> </h4></top>
     <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}
       <a class:active={ item === url } href="/docs/{item}" use:link>{item}</a>
     {/each}
@@ -216,9 +193,7 @@
   <right>
     {#if url === "/docs/"}
       <div id="top-scroll">
-        {#if readme_docs}
+        <HTML url="/docs/api/index.html" />
-          {@html readme_docs}
-        {/if}
       </div>
     {:else if docs_data}
         <toc id="top-scroll">

admin/pages/Home.svelte

@@ -1,12 +1,12 @@
 <script>
   import { onMount } from 'svelte';
   import Sidebar from "$/client/components/Sidebar.svelte";
-  import TableIndex from "$admin/pages/TableIndex.svelte";
+  import TableIndex from "$/admin/pages/TableIndex.svelte";
-  import EmailDNS from "$admin/pages/EmailDNS.svelte";
+  import EmailDNS from "$/admin/pages/EmailDNS.svelte";
-  import EmailSend from "$admin/pages/EmailSend.svelte";
+  import EmailSend from "$/admin/pages/EmailSend.svelte";
-  import Stats from "$admin/pages/Stats.svelte";
+  import Stats from "$/admin/pages/Stats.svelte";
-  import IconFinder from "$admin/bando/IconFinder.svelte";
+  import IconFinder from "$/admin/bando/IconFinder.svelte";
-  import Djenterator from "$admin/bando/Djenterator.svelte";
+  import Djenterator from "$/admin/bando/Djenterator.svelte";
   import Layout from "$/admin/Layout.svelte";
   import { replace } from "svelte-spa-router";
 

client/components/LoggedIn.svelte

@@ -43,14 +43,14 @@
 
         if(needs_redirect) {
           // BUG: not sure if this should go here and only on 401/403
-          push(redirect);
+          window.location = redirect;
         }
       }
     } else if(optional && !$user.authenticated) {
       $user.authenticated = false; // nothing else needed
     } else if(redirect && !$user.authenticated) {
       log.debug("User not authenticated and redirection", redirect);
-      push(redirect);
+      window.location = redirect;
     } else {
       log.debug("User authentication state", $user);
     }

commands/templates/client/Header.svelte

@@ -17,7 +17,6 @@
           <li><a href="/" on:click|preventDefault={ logout_user } data-testid="logout-link"><Icon name="log-out" tooltip="Log out."/></a></li>
           <li><a data-testid="user-profile-button" href="/profile/" use:link><Icon name="settings" tooltip="Settings."/></a></li>
           <li><a href="/live/" use:link><Icon name="video" tooltip="Past/Present streams."/></a></li>
-          <li><a href="/activity/" use:link><Icon name="activity" tooltip="Your activity." /></a></li>
           <li><a href="/feed.rss"><Icon name="rss" tooltip="RSS Feed." tip_position="bottom-left" /></a></li>
           {#if $user.admin }
             <li><a href="/admin/#/"><Icon name="keyboard" tooltip="Admin database."/></a></li>
@@ -29,7 +28,7 @@
         <a href="/"><Icon name="home" size="36" /></a>
         <ul>
           {#if register_enabled}
-            <a id="register-button" href="/register/top/">
+            <li><a id="register-button" href="/register/top/">
               <span class="mobile">
                 <Icon name="dollar-sign" tooltip="Register."/>
               </span>
@@ -38,6 +37,7 @@
                 <button type="button">Register</button>
               </span>
               </a>
+            </li>
           {/if}
           <li><a href="/login/" use:link><Icon name="log-in" tooltip="Log in." /></a></li>
           <li><a href="/blog/"><Icon name="book" tooltip="Blog posts." /></a></li>

commands/templates/client/Layout.svelte

@@ -21,7 +21,7 @@
     <Header fixed={fixed}/>
   {/if}
 
-  <LoggedIn optional={ auth_optional } redirect="/login" show_required_page={ false }>
+  <LoggedIn optional={ auth_optional } redirect="/client/#/login" show_required_page={ false }>
     <main class:horizontal class:fullwidth class:fullscreen class:centered slot="yes" data-testid={ testid }>
       <slot></slot>
     </main>

commands/templates/client/routes.js

@@ -1,3 +1,8 @@
+/*
+  The routes for the [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router)
+  used for multiple "pages".  It's easy to use.  Just import the `.svelte` file directly
+  then place it in the default export listing.
+ */
 import Register from "./pages/Register.svelte";
 import Payment from "./pages/Payment.svelte";
 import Login from "./pages/Login.svelte";

lib/blog.js

@@ -46,7 +46,7 @@ export const load = (source) => {
         const {content, toc, metadata} = render_with_code(source_path, post);
         assert(content && toc && metadata, `Rendering ${source} failed.`);
 
-        // so many Svelte builders (like 7ty) need slug that we should so it here
+        // so many Svelte builders (like 7ty) need slug that we should do it here
         cache.push({content, toc, metadata, slug: metadata.slug});
       } catch(error) {
         console.error(error, `Failure processing post: ${post}`);

rendered/index.svelte

@@ -56,10 +56,15 @@
     margin-bottom: 0px;
   }
 
-  hero cover {
+  hero.main:hover {
+    filter: brightness(1.05);
+  }
+
+  hero > cover {
     background: none;
     color: black;
     text-shadow: none;
+    opacity: 1;
   }
 
   main h2 {
@@ -77,10 +82,6 @@
     flex-direction: row;
   }
 
-  hero.quote div {
-    width: 50%;
-  }
-
   span#slogan {
     font-family: var(--font-computer);
     font-size: 1.5em;
@@ -123,24 +124,6 @@
     components {
       grid-template-columns: repeat(3, 1fr);
     }
-
-    #zed-image {
-      display: none;
-    }
-  }
-
-  hero > cover {
-    opacity: 1;
-    color: var(--value0);
-  }
-
-  hero > cover a i {
-    color: var(--value8);
-    background-color: var(--value2);
-  }
-
-  hero:hover > cover {
-    z-index: 1;
   }
 </style>
 
@@ -176,10 +159,6 @@
 <blockquote>
   All of these components are extracted from real websites I created for real businesses or creative ideas.  I also made copies of common components found in other UI component collections so <b>you</b> can learn how they're made.
 </blockquote>
-
-<div>
-  <img src="/images/zed.png" id="zed-image"/>
-</div>
 </hero>
 
 <h2>The Components</h2>
@@ -213,9 +192,6 @@
 <blockquote>
   The "Bandolier" is a belt that holds all your ammo so you can quickly load them when you need to get something done.
 </blockquote>
-<div>
-  <IconImage name="tool" />
-</div>
 </hero>
 
 

static/global.css

@@ -91,6 +91,7 @@ main {
 
 header.fixed + main {
   margin-top: var(--fixed-header-height) !important;
+  min-height: unset;
 }
 
 footer {
@@ -931,6 +932,16 @@ callout a {
   color: var(--color-text-inverted);
 }
 
+callout.info a {
+  color: var(--color-text);
+}
+
+callout.info a:hover {
+  color: var(--color-text-inverted);
+  text-decoration: underline;
+  filter: unset;
+}
+
 callout a:hover {
   color: var(--color-text-inverted);
   text-decoration: underline;