Fix Best Practices, Add 404 Page, Remove Light Theme

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" />

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 {

docs/src/components/RightSidebar/ThemeToggleButton.css

@@ -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;
-}

docs/src/components/RightSidebar/ThemeToggleButton.tsx

@@ -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;

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;
     }

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>

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 />

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>
         {

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>

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;

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);