improve TOC style somewhat

Author: outfoxxed

src/components/Header.astro

@@ -39,25 +39,21 @@ if (!data) {
   sidebarData = undefined;
 }
 
-const { headings } = Astro.props;
+const {
+  title = null,
+  headings = [],
+} = Astro.props;
 ---
 <div class="header">
   <div class="header-item header-left">
-    {url.length > 2 ?
-      <Nav mobile={true}/>
-      <div class="nav-collapsed-spacer header-spacer"/>
-    : null}
+    <Nav mobile={true}/>
     <h3 class="header-title">
       <a href="/">Quickshell</a>
     </h3>
   </div>
   <div class="header-item header-right">
     <Search/>
-    <div class="header-spacer"/>
     <ThemeSelect client:load />
-    {url.length > 2 ?
-			<div class="toc-collapsed-spacer header-spacer"/>
-      <TOC headings={headings} types={sidebarData} mobile={true}/>
-    : null}
+    <TOC title={title} headings={headings} types={sidebarData} mobile={true}/>
   </div>
 </div>

src/components/hooks/TOCIntersectionObserver.astro

@@ -4,7 +4,7 @@
   window.addEventListener('DOMContentLoaded', () => {
     const observer = new IntersectionObserver(entries => {
       entries.forEach(entry => {
-        const heading = entry.target.querySelector('h2, h3, h4, h5, h6')
+        const heading = entry.target.querySelector('h1, h2, h3, h4, h5, h6')
         if(heading) {
           const id = heading.id
           if (entry.intersectionRatio > 0) {

src/components/marquee/Marquee.astro

@@ -52,7 +52,7 @@ const videos = [
         </video>
         <p>
           Configuration by <Fragment set:html={author}/>
-          {source ? <Fragment>(<a href={source}>source code</a>)</Fragment> : null}
+          {source && <>(<a href={source}>source code</a>)</>}
         </p>
       </div>
     </div>)}

src/components/navigation/sidebars/TOC.astro

@@ -3,19 +3,22 @@ import TableOfContents from "./toc";
 import type { ConfigHeading, TypeTOC } from "./types.d.ts";
 
 export interface Props {
+  title?: string;
   headings?: ConfigHeading[];
   types?: TypeTOC;
   mobile: boolean;
 }
 
-const { headings, types, mobile } = Astro.props;
+const { title, headings, types, mobile } = Astro.props;
 ---
-
-<div id="toc" aria-mobile={mobile} class=`toc-wrapper${mobile ? "-mobile":""}`>
-  <TableOfContents
-    config={headings}
-    type={types}
-    mobile={mobile}
-    client:idle
-  />
-</div>
+{((headings?.length ?? 0) != 0 || types) &&
+  <div id="toc" aria-mobile={mobile} class=`toc-wrapper${mobile ? "-mobile":""}`>
+    <TableOfContents
+      title={title}
+      config={headings}
+      type={types}
+      mobile={mobile}
+      client:idle
+    />
+  </div>
+}

src/components/navigation/sidebars/toc/Table.tsx

@@ -11,15 +11,19 @@ import {
 import { Heading } from "./Heading";
 
 export const Table: Component<{
+  title?: string;
   typeTOC?: TypeTOC;
   configTOC?: ConfigTOC[];
 }> = props => {
-  const { typeTOC, configTOC } = props;
+  const { title, typeTOC, configTOC } = props;
 
   if (configTOC) {
     return (
       <div class="toc-content">
-        <p>Contents</p>
+        {title && <>
+          <p>{title}</p>
+          <hr/>
+        </>}
         <For each={configTOC}>
           {heading => (
             <Heading

src/components/navigation/sidebars/toc/index.tsx

@@ -15,7 +15,7 @@ const TableOfContents: Component<TOCProps> = props => {
   const [open, setOpen] = createSignal<boolean>(false);
   const [clientWidth, setClientWidth] = createSignal<number>(0);
   const [screenWidth, setScreenWidth] = createSignal<number>(0);
-  const { mobile, config, type } = props;
+  const { mobile, title, config, type } = props;
   let tocRef: HTMLDivElement;
 
   function toggle(e: MouseEvent) {
@@ -27,9 +27,10 @@ const TableOfContents: Component<TOCProps> = props => {
     return type ? (
       <Table typeTOC={type} />
     ) : (
-      <Table configTOC={buildHierarchy(config!)} />
+      <Table title={title} configTOC={buildHierarchy(config!)} />
     );
   }
+
   const handleClickOutside = (event: MouseEvent) => {
     const isLink = "href" in (event.target || {});
     const isInBody = document.body.contains(event.target as Node);
@@ -97,7 +98,7 @@ const TableOfContents: Component<TOCProps> = props => {
         {type ? (
           <Table typeTOC={type} />
         ) : (
-          <Table configTOC={buildHierarchy(config!)} />
+          <Table title={title} configTOC={buildHierarchy(config!)} />
         )}
       </div>
     </div>

src/components/navigation/sidebars/types.d.ts

@@ -17,6 +17,7 @@ export interface TreeProps {
 
 // Right
 export interface TOCProps {
+  title?: string;
   config?: ConfigHeading[];
   type?: TypeTableProps;
   mobile: boolean;

src/config/io/helpers.ts

@@ -28,9 +28,16 @@ export function buildHierarchy(headings: ConfigHeading[]) {
     if (heading.depth === 1) {
       toc.push(heading);
     } else {
-      parentHeadings
-        .get(heading.depth - 1)
-        .subheadings.push(heading);
+      let depth = heading.depth - 1;
+      let parent = null;
+
+      while (!parent && depth != 0) {
+        parent = parentHeadings.get(depth);
+        depth -= 1;
+      }
+
+      if (parent) parent.subheadings.push(heading);
+      else toc.push(heading);
     }
   }
   return toc;

src/guide/faq.mdx

@@ -3,8 +3,6 @@ title: "FAQ"
 description: "Frequently Asked Questions"
 index: 1000
 ---
-# {frontmatter.title}
-
 This page is being actively expanded as common questions come up again.
 
 Make sure to also read the [Item Size and Position](/docs/guide/size-position) and

src/guide/index.mdx

@@ -3,8 +3,6 @@ title: "Usage Guide"
 description: "Configuring the shell"
 index: -1
 ---
-# {frontmatter.title}
-
 See the [Installation and Setup](/docs/guide/install-setup) page to get started.
 
 To write a Quickshell config, start by following the

src/guide/install-setup.mdx

@@ -2,7 +2,6 @@
 title: "Installation & Setup"
 index: 0
 ---
-# {frontmatter.title}
 > [!NOTE]
 > Quickshell is still in a somewhat early stage of development.
 > There will be breaking changes before 1.0, however a migration guide will be provided.

src/guide/introduction.mdx

@@ -2,9 +2,6 @@
 title: "Introduction"
 index: 2
 ---
-
-# {frontmatter.title}
-
 This page will walk you through the process of creating a simple bar/panel, and
 introduce you to all the basic concepts involved. You can use the
 [QML Language Reference](/docs/guide/qml-language) to learn about the syntax

src/guide/qml-language.mdx

@@ -4,8 +4,6 @@ index: 10
 ---
 import Collapsible from "@components/Collapsible.astro";
 
-# {frontmatter.title}
-
 Quickshell is configured using the Qt Modeling Language, or QML.
 This page explains what you need to know about QML to start using quickshell.
 

src/guide/size-position.mdx

@@ -2,8 +2,6 @@
 title: "Item Size and Position"
 index: 2
 ---
-# {frontmatter.title}
-
 > [!TIP]
 > Read the entire page, understanding this is critical to building a well designed shell.
 

src/layouts/DocsLayout.astro

@@ -59,7 +59,7 @@ if (url[2]) {
     <CreateCopyButtons />
   </head>
   <body class="docslayout">
-    <Header headings={headings}/>
+    <Header title={title} headings={headings}/>
     <div class="docslayout-root">
       <Nav mobile={false}/>
       <div class="docslayout-inner" data-pagefind-body>
@@ -89,10 +89,11 @@ if (url[2]) {
             ></path></svg
           >
         </Breadcrumbs>
-          <slot />
+        <slot/>
       </div>
+      <slot name="alongside-content"/>
     </div>
-    <Footer />
+    <Footer/>
   </body>
 </html>
 

src/layouts/GuideLayout.astro

@@ -5,8 +5,8 @@ import TOCIntersectionObserver from "@src/components/hooks/TOCIntersectionObserv
 import type { ConfigHeading } from "@src/components/navigation/sidebars/types";
 
 export interface Props {
-  headings: ConfigHeading[];
   title: string;
+  headings: ConfigHeading[];
   description: string;
 }
 
@@ -15,11 +15,12 @@ const { title, description, headings } = Astro.props;
 <DocsLayout title={title} description={description} headings={headings}>
   <div class="docs">
     <div class="docs-content">
-      <hr>
+      <hr/>
+      <h1>{title}</h1>
       <slot/>
     </div>
-    <TOC mobile={false} headings={headings} data-pagefind-ignore/>
   </div>
+  <TOC slot="alongside-content" mobile={false} title={title} headings={headings} data-pagefind-ignore/>
 </DocsLayout>
 
 <TOCIntersectionObserver/>

src/pages/docs/about.mdx

@@ -2,7 +2,6 @@
 layout: "@layouts/GuideMdLayout.astro"
 title: "About Quickshell"
 ---
-# {frontmatter.title}
 Quickshell is a toolkit for building a desktop shell, which is to say components
 of your desktop like bars, widgets, lock screens, display managers, and the like.
 
@@ -27,4 +26,4 @@ Quickshell is actively developed and will still receive breaking changes.
 A tagged release is planned soon, however there will be breakage before
 that point.
 
-See the [Usage Guide](/docs/guide) to learn how to set up and use Quickshell
+See the [Usage Guide](/docs/guide) to learn how to set up and use Quickshell

src/styles/docs/toc/intro-toc.css

@@ -22,8 +22,8 @@
     margin: 0;
     margin-block: 0.618rem;
 
-    & * {
-      margin-left: 0.348rem;
+    & li {
+      margin-left: 0.618rem;
     }
   }
 }

src/styles/docs/toc/toc.css

@@ -17,6 +17,11 @@
   background-color: transparent;
 }
 
+.toc-content > p {
+  margin-top: calc(0.94rem - 6px);
+  margin-bottom: 0.318rem;
+}
+
 .toc-toggle {
   --width: 80svw;
   display: block;
@@ -132,8 +137,8 @@
       margin: 0;
       margin-block: 0.618rem;
 
-      & * {
-        margin-left: 0.348rem;
+      & li {
+        margin-left: 0.618rem;
       }
     }
   }