From 21863c687cf9e95473a4cde9a62dc9e16a872ffc Mon Sep 17 00:00:00 2001
From: Ben C <bwc9876@gmail.com>
Date: Mon, 3 Jul 2023 02:42:58 -0400
Subject: [PATCH] Fix Best Practices, Add 404 Page, Remove Light Theme

---
 docs/public/icon.webp                         | Bin 660 -> 2712 bytes
 docs/src/components/Header/AstroLogo.astro    |   2 +-
 .../components/RightSidebar/MoreMenu.astro    |   4 -
 .../RightSidebar/ThemeToggleButton.css        |  37 --------
 .../RightSidebar/ThemeToggleButton.tsx        |  82 ------------------
 docs/src/components/Schemas/Content.astro     |  34 +++++---
 docs/src/pages/404.astro                      |  13 +++
 .../schemas/[schema]/defs/[...def].astro      |   2 +-
 .../pages/schemas/[schema]/defs/index.astro   |   9 +-
 docs/src/pages/schemas/[schema]/index.astro   |   2 +-
 docs/src/styles/index.css                     |   2 +-
 docs/src/styles/theme.css                     |  26 +-----
 12 files changed, 46 insertions(+), 167 deletions(-)
 delete mode 100644 docs/src/components/RightSidebar/ThemeToggleButton.css
 delete mode 100644 docs/src/components/RightSidebar/ThemeToggleButton.tsx
 create mode 100644 docs/src/pages/404.astro

diff --git a/docs/public/icon.webp b/docs/public/icon.webp
index 8a33143779a4dddf18232a8622950fb8d5ae74d9..d04280844c530149f4a83538076f6f2217d3bc11 100644
GIT binary patch
literal 2712
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

literal 660
zcmV;F0&D$JNk&GD0ssJ4MM6+kP&il$0000G0000S000~S06|PpNHGBb00EFg+uE^5
z&l}seo!)lR*|s}7sck2N)~syXw(a@wJfrXZr%D|W698*u#{Pq*M`%otw^cx5UQJy|
zvWGU8M#So!cW+-mzwz{ojEG<FO?fjVoz7<x62E-NMM0zE6OuB1|0WX2UmO3$l3pTl
zer*ZOI6)*&{6i<>E^*82v<&tW3eA66kA5J2>9qT>M0ht4fcfkZNJZh`CW-J{iv}>i
zV<>)8LH>b6!n_%P-A*KY`4YK^2!E_t18DXNM9&J&sv^G~GzI|A2Si^|)dwX$@m!`h
z06?Qabi!QQ`-05#X~>1a-^~J&^x)8;7pR0!GBn}e?vD|P8-MN%W1z@VF9<0A{2>y`
zUmjmQvN6p9c$t0i>VeZ|4sRbV4|B0J(ganRrk=TlftCh?H822HP&gno0RRB-1^}G_
zDjfhF06vX2nMb7}qM<Mt3;>`JiEIG74kJC~BD@c6XrMLhvGyH*`dF(~;<+FIB@B%Z
z_>lRG1hfDE{{NkE{-<1oXGS^fP6EFYXnQWyd3nq5a7@epuKmN{>665CgA!aH$Nu=c
z{pbJl#_mooM}Md6{)HL&g#tMI+1+4hF`XGQ2*!k+v4G%9pFC#N=(*|qAGOz3=0MKO
z7ZrX7*rAr~Xx55UuL5hsrc3iL4u1QgoeSnPqoi!+E$vyFCm9btXkuhD`D`U5=y)n-
za(K`#Z_6t}1I|I)&mN%Cs!`ul@ok^H4NTtGwEyjX@cpbM=~yl2h??6Gyi@<rs9FA*
uzWW~lgzPVTP5sQGM7WUBvnEh~1@#*@YDxa%x9kob861YWQ5jPB0001P<2B6y

diff --git a/docs/src/components/Header/AstroLogo.astro b/docs/src/components/Header/AstroLogo.astro
index 0d440297..b732044a 100644
--- a/docs/src/components/Header/AstroLogo.astro
+++ b/docs/src/components/Header/AstroLogo.astro
@@ -5,4 +5,4 @@ type Props = {
 const { size } = Astro.props;
 ---
 
-<img src="/icon.webp" width="40" height="40" />
+<img alt="New Horizons Icon" src="/icon.webp" width="40" height="40" />
diff --git a/docs/src/components/RightSidebar/MoreMenu.astro b/docs/src/components/RightSidebar/MoreMenu.astro
index 261e9a79..cafaf482 100644
--- a/docs/src/components/RightSidebar/MoreMenu.astro
+++ b/docs/src/components/RightSidebar/MoreMenu.astro
@@ -1,5 +1,4 @@
 ---
-import ThemeToggleButton from "./ThemeToggleButton";
 import { COMMUNITY_INVITE_URL } from "../../consts";
 
 type Props = {
@@ -66,9 +65,6 @@ const showMoreSection = Boolean(COMMUNITY_INVITE_URL);
         )
     }
 </ul>
-<div style="margin: 2rem 0; text-align: center;">
-    <ThemeToggleButton client:visible />
-</div>
 
 <style>
     .edit-on-github {
diff --git a/docs/src/components/RightSidebar/ThemeToggleButton.css b/docs/src/components/RightSidebar/ThemeToggleButton.css
deleted file mode 100644
index 2c0eacd0..00000000
--- a/docs/src/components/RightSidebar/ThemeToggleButton.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.theme-toggle {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25em;
-    padding: 0.33em 0.67em;
-    border-radius: 99em;
-    background-color: var(--theme-code-inline-bg);
-}
-
-.theme-toggle > label:focus-within {
-    outline: 2px solid transparent;
-    box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
-}
-
-.theme-toggle > label {
-    color: var(--theme-code-inline-text);
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0.5;
-}
-
-.theme-toggle .checked {
-    color: var(--theme-accent);
-    opacity: 1;
-}
-
-input[name="theme-toggle"] {
-    position: absolute;
-    opacity: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: -1;
-}
diff --git a/docs/src/components/RightSidebar/ThemeToggleButton.tsx b/docs/src/components/RightSidebar/ThemeToggleButton.tsx
deleted file mode 100644
index dc8ee925..00000000
--- a/docs/src/components/RightSidebar/ThemeToggleButton.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { FunctionalComponent } from "preact";
-import { useState, useEffect } from "preact/hooks";
-import "./ThemeToggleButton.css";
-
-const themes = ["light", "dark"];
-
-const icons = [
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-    >
-        <path
-            fillRule="evenodd"
-            d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-            clipRule="evenodd"
-        />
-    </svg>,
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-    >
-        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-    </svg>
-];
-
-const ThemeToggle: FunctionalComponent = () => {
-    const [theme, setTheme] = useState(() => {
-        if (import.meta.env.SSR) {
-            return undefined;
-        }
-        if (typeof localStorage !== undefined && localStorage.getItem("theme")) {
-            return localStorage.getItem("theme");
-        }
-        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-            return "dark";
-        }
-        return "light";
-    });
-
-    useEffect(() => {
-        const root = document.documentElement;
-        if (theme === "light") {
-            root.classList.remove("theme-dark");
-        } else {
-            root.classList.add("theme-dark");
-        }
-    }, [theme]);
-
-    return (
-        <div className="theme-toggle">
-            {themes.map((t, i) => {
-                const icon = icons[i];
-                const checked = t === theme;
-                return (
-                    <label className={checked ? " checked" : ""}>
-                        {icon}
-                        <input
-                            type="radio"
-                            name="theme-toggle"
-                            checked={checked}
-                            value={t}
-                            title={`Use ${t} theme`}
-                            aria-label={`Use ${t} theme`}
-                            onChange={() => {
-                                localStorage.setItem("theme", t);
-                                setTheme(t);
-                            }}
-                        />
-                    </label>
-                );
-            })}
-        </div>
-    );
-};
-
-export default ThemeToggle;
diff --git a/docs/src/components/Schemas/Content.astro b/docs/src/components/Schemas/Content.astro
index e694bf6a..8c561ccd 100644
--- a/docs/src/components/Schemas/Content.astro
+++ b/docs/src/components/Schemas/Content.astro
@@ -44,6 +44,21 @@ const HeadingTag = levelMap[level] ?? "h6";
             {SchemaTools.getAdditionalBadges(schema).map((b) => <span>{b}</span>)}
         </div>
     </div>
+    {
+        level === 0 && !isDef && (
+            <div class="tool-links">
+                <p>
+                    <a href={`/schemas/${schema.slug}/defs`}>View Definitions</a>
+                </p>
+                <p>|</p>
+                <p>
+                    <a rel="noreferer" target="_blank" href={link}>
+                        View Raw
+                    </a>
+                </p>
+            </div>
+        )
+    }
     {description && <p>{description}</p>}
     {
         enumVals.length !== 0 && (
@@ -64,20 +79,6 @@ const HeadingTag = levelMap[level] ?? "h6";
             <a href={`/schemas/${schema.rootSlug}/defs/${refSlug}`}>See Definitions/{refSlug}</a>
         )
     }
-    {
-        level === 0 && !isDef && (
-            <div>
-                <p>
-                    <a href={`/schemas/${schema.slug}/defs`}>View Definitions</a>
-                </p>
-                <p>
-                    <a rel="noreferer" target="_blank" href={link}>
-                        View Raw
-                    </a>
-                </p>
-            </div>
-        )
-    }
     {
         props.length !== 0 && (
             <div class="children">
@@ -140,6 +141,11 @@ const HeadingTag = levelMap[level] ?? "h6";
         gap: 2rem;
     }
 
+    div.tool-links {
+        display: flex;
+        gap: 1rem;
+    }
+
     ul {
         margin-top: 0.5rem;
     }
diff --git a/docs/src/pages/404.astro b/docs/src/pages/404.astro
new file mode 100644
index 00000000..ffa303af
--- /dev/null
+++ b/docs/src/pages/404.astro
@@ -0,0 +1,13 @@
+---
+import MainLayout from "../layouts/MainLayout.astro";
+---
+
+<MainLayout
+    headings={[]}
+    title="Page Not Found"
+    description="Page Not Found"
+    dir="ltr"
+    lang="en-us"
+>
+    The page you requested could not be found.
+</MainLayout>
diff --git a/docs/src/pages/schemas/[schema]/defs/[...def].astro b/docs/src/pages/schemas/[schema]/defs/[...def].astro
index d303dd0c..ed76fd6c 100644
--- a/docs/src/pages/schemas/[schema]/defs/[...def].astro
+++ b/docs/src/pages/schemas/[schema]/defs/[...def].astro
@@ -44,7 +44,7 @@ const headings = SchemaTools.getHeaders(def);
     dir="ltr"
     headings={headings}
     title={title ?? "??"}
-    description={""}
+    description={`New Horizons ${def.rootTitle} Definition For ${title}`}
 >
     <Breadcrumb schema={def} />
     <Content level={0} schema={def} isDef />
diff --git a/docs/src/pages/schemas/[schema]/defs/index.astro b/docs/src/pages/schemas/[schema]/defs/index.astro
index d8fb8b60..2707937b 100644
--- a/docs/src/pages/schemas/[schema]/defs/index.astro
+++ b/docs/src/pages/schemas/[schema]/defs/index.astro
@@ -29,7 +29,14 @@ const title = `${SchemaTools.getTitle(schema) ?? "??"} Definitions`;
 const defs = SchemaTools.getDefs(schema).map((d) => d.slug);
 ---
 
-<MainLayout noFileEdit lang="en-us" dir="ltr" headings={[]} title={title} description={""}>
+<MainLayout
+    noFileEdit
+    lang="en-us"
+    dir="ltr"
+    headings={[]}
+    title={title}
+    description={`New Horizons ${title}`}
+>
     <Breadcrumb schema={schema} onlyDefs />
     <ul>
         {
diff --git a/docs/src/pages/schemas/[schema]/index.astro b/docs/src/pages/schemas/[schema]/index.astro
index d1eafbb7..2ca87f22 100644
--- a/docs/src/pages/schemas/[schema]/index.astro
+++ b/docs/src/pages/schemas/[schema]/index.astro
@@ -34,7 +34,7 @@ const headings = SchemaTools.getHeaders(schema);
     dir="ltr"
     headings={headings}
     title={title ?? "??"}
-    description={""}
+    description={`New Horizons ${title} Reference`}
 >
     <Content level={0} schema={schema} />
 </MainLayout>
diff --git a/docs/src/styles/index.css b/docs/src/styles/index.css
index 03ac7395..9d9b4351 100644
--- a/docs/src/styles/index.css
+++ b/docs/src/styles/index.css
@@ -322,7 +322,7 @@ h2.heading {
     gap: 0.5em;
     width: 100%;
     font: inherit;
-    padding: 0.4rem 0;
+    padding: 0.6rem 0;
     line-height: 1.3;
     color: inherit;
     text-decoration: none;
diff --git a/docs/src/styles/theme.css b/docs/src/styles/theme.css
index 55208a81..9db0db62 100644
--- a/docs/src/styles/theme.css
+++ b/docs/src/styles/theme.css
@@ -56,36 +56,12 @@
     --color-yellow: var(--color-base-yellow), 59%;
 }
 
-:root {
-    color-scheme: light;
-    --theme-accent: hsla(var(--color-green), 1);
-    --theme-text-accent: hsla(var(--color-green), 1);
-    --theme-accent-opacity: 0.15;
-    --theme-divider: hsla(var(--color-gray-95), 1);
-    --theme-text: hsla(var(--color-gray-10), 1);
-    --theme-text-light: hsla(var(--color-gray-40), 1);
-    /* @@@: not used anywhere */
-    --theme-text-lighter: hsla(var(--color-gray-80), 1);
-    --theme-bg: hsla(var(--color-base-white), 100%, 1);
-    --theme-bg-hover: hsla(var(--color-gray-95), 1);
-    --theme-bg-offset: hsla(var(--color-gray-90), 1);
-    --theme-bg-accent: hsla(var(--color-green), var(--theme-accent-opacity));
-    --theme-code-inline-bg: hsla(var(--color-gray-95), 1);
-    --theme-code-inline-text: var(--theme-text);
-    --theme-code-bg: hsla(217, 19%, 27%, 1);
-    --theme-code-text: hsla(var(--color-gray-95), 1);
-    --theme-navbar-bg: hsla(var(--color-base-white), 100%, 1);
-    --theme-navbar-height: 6rem;
-    --theme-selection-color: hsla(var(--color-green), 1);
-    --theme-selection-bg: hsla(var(--color-purple), var(--theme-accent-opacity));
-}
-
 body {
     background: var(--theme-bg);
     color: var(--theme-text);
 }
 
-:root.theme-dark {
+:root {
     color-scheme: dark;
     --theme-accent-opacity: 0.15;
     --theme-accent: hsla(var(--color-green), 1);