chore: docs, handbok, 404 page

- Condense left-hand nav #417
- Hide TOC in handbook if empty
- Buttons 404 page

Author: ronggur

astro.config.mjs

@@ -109,38 +109,47 @@ export default defineConfig({
         {
           label: 'Datum Documentation',
           autogenerate: { directory: 'docs/overview' },
+          collapsed: false, // First group is expanded by default
         },
         {
           label: 'Quickstart',
           autogenerate: { directory: 'docs/quickstart' },
+          collapsed: true, // All other groups are collapsed by default
         },
         {
           label: 'Platform',
           autogenerate: { directory: 'docs/platform' },
+          collapsed: true,
         },
         {
           label: 'API',
           autogenerate: { directory: 'docs/api' },
+          collapsed: true,
         },
         {
           label: 'Runtime',
           autogenerate: { directory: 'docs/runtime' },
+          collapsed: true,
         },
         {
           label: 'Workflows',
           autogenerate: { directory: 'docs/workflows' },
+          collapsed: true,
         },
         {
           label: 'Assets',
           autogenerate: { directory: 'docs/assets' },
+          collapsed: true,
         },
         {
           label: 'For Alt Clouds',
           autogenerate: { directory: 'docs/alt-cloud' },
+          collapsed: true,
         },
         {
           label: 'Guides',
           autogenerate: { directory: 'docs/guides' },
+          collapsed: true,
         },
         {
           label: 'Glossary',

src/components/TableOfContents.astro

@@ -13,11 +13,10 @@ const {
 const filteredHeadings = headings.filter((heading: MarkdownHeading) => heading.depth <= 3);
 ---
 
-<aside class={`toc-container ${className || ''} ${sticky ? 'sticky top-0' : ''}`}>
-  {showTitle && <h3 class="toc-title">{title}</h3>}
-
-  {
-    filteredHeadings.length > 0 ? (
+{
+  filteredHeadings.length > 0 && (
+    <aside class={`toc-container ${className || ''} ${sticky ? 'sticky top-0' : ''}`}>
+      {showTitle && <h3 class="toc-title">{title}</h3>}
       <nav class={`toc-nav`}>
         <ul class="toc-list">
           {filteredHeadings.map((heading: MarkdownHeading) => (
@@ -29,54 +28,52 @@ const filteredHeadings = headings.filter((heading: MarkdownHeading) => heading.d
           ))}
         </ul>
       </nav>
-    ) : (
-      <div class="toc-empty">
-        <p>No table of contents available</p>
-      </div>
-    )
-  }
-</aside>
+    </aside>
+  )
+}
 
 <script>
-  // Add active link highlighting based on scroll position
-  function updateActiveTOCLink() {
+  // Check if TOC exists before running the script
+  document.addEventListener('DOMContentLoaded', () => {
     const tocLinks = document.querySelectorAll('.toc-link');
-    const sections = document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]');
+    if (tocLinks.length === 0) return;
 
-    let current = '';
+    // Add active link highlighting based on scroll position
+    function updateActiveTOCLink() {
+      const sections = document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]');
+      let current = '';
 
-    sections.forEach((section) => {
-      const element = section as HTMLElement;
-      const sectionTop = element.offsetTop;
-      if (window.scrollY >= sectionTop - 200) {
-        current = section.getAttribute('id') || '';
-      }
-    });
+      sections.forEach((section) => {
+        const element = section as HTMLElement;
+        const sectionTop = element.offsetTop;
+        if (window.scrollY >= sectionTop - 200) {
+          current = section.getAttribute('id') || '';
+        }
+      });
 
-    tocLinks.forEach((link) => {
-      link.classList.remove('active');
-      if (link.getAttribute('href') === `#${current}`) {
-        link.classList.add('active');
-      }
-    });
-  }
+      tocLinks.forEach((link) => {
+        link.classList.remove('active');
+        if (link.getAttribute('href') === `#${current}`) {
+          link.classList.add('active');
+        }
+      });
+    }
 
-  // Throttle scroll events
-  let ticking = false;
-  function requestTick() {
-    if (!ticking) {
-      requestAnimationFrame(updateActiveTOCLink);
-      ticking = true;
+    // Throttle scroll events
+    let ticking = false;
+    function requestTick() {
+      if (!ticking) {
+        requestAnimationFrame(updateActiveTOCLink);
+        ticking = true;
+      }
     }
-  }
 
-  function handleScroll() {
-    ticking = false;
-    requestTick();
-  }
+    function handleScroll() {
+      ticking = false;
+      requestTick();
+    }
 
-  // Add scroll listener and initialize
-  document.addEventListener('DOMContentLoaded', () => {
+    // Initialize and add scroll listener
     updateActiveTOCLink();
     window.addEventListener('scroll', handleScroll);
   });

src/components/starlight/TableOfContents.astro

@@ -5,8 +5,8 @@ import '@v1/styles/global.css';
 import Layout from '@layouts/Layout.astro';
 import Hero from '@components/Hero.astro';
 import Footer from '@components/Footer.astro';
+import Button from '@components/Button.astro';
 import Image404 from '@v1/assets/images/404.png';
-import Icon from '@components/Icon.astro';
 import { Image } from 'astro:assets';
 
 const title = "Sorry, we can't find that page";
@@ -22,14 +22,18 @@ const description = 'The page you are looking for does not exist.';
         <Image src={Image404} alt="404" class="mx-auto mb-12 h-auto w-full max-w-[423px]" />
         <article class="prose prose-xl mx-auto text-center">
           <p class="mb-12">Please check the URL and try again.</p>
-          <a href="/" class="btn btn--glacier-mist-700 btn--large mr-1">
-            Return to homepage
-            <Icon name="arrow-right" size="md" />
-          </a>
-          <a href="/docs/" class="btn btn--glacier-mist-700 btn--large ml-1">
-            Browse our Docs
-            <Icon name="arrow-right" size="md" />
-          </a>
+          <Button
+            text="Return to homepage"
+            href="/"
+            class="btn btn--alpha mr-1"
+            icon={{ name: 'arrow-right', size: 'md' }}
+          />
+          <Button
+            text="Browse our Docs"
+            href="/docs/"
+            class="btn btn--alpha ml-1"
+            icon={{ name: 'arrow-right', size: 'md' }}
+          />
         </article>
       </main>
     </div>

src/pages/404.astro

@@ -44,6 +44,10 @@
 
   .handbook-toc {
     @apply border-glacier-mist-900 relative hidden w-full flex-col gap-y-4 border-l-1 pt-9 pb-12 pl-7 md:mb-0 md:max-w-60.25 lg:flex;
+
+    .article-aside {
+      @apply mb-6;
+    }
   }
 
   .handbook-toc .toc-container {