docs: indent ToC based on heading levels (#475)

apps/documentation/src/components/TableOfContents/TableOfContents.module.css

@@ -13,12 +13,6 @@
   }
 }
 
-.inner {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
 .link {
   white-space: normal;
   word-wrap: break-word;
@@ -27,7 +21,6 @@
   border-left: 1px solid transparent;
   padding: 8px var(--mantine-spacing-md);
   margin-left: -1px;
-  padding-left: calc(1 * var(--mantine-spacing-lg));
   border-top-right-radius: var(--mantine-radius-sm);
   border-bottom-right-radius: var(--mantine-radius-sm);
 
@@ -72,6 +65,12 @@
   }
 }
 
+.inner {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
 .title {
   margin-left: var(--mantine-spacing-md);
 

apps/documentation/src/components/TableOfContents/TableOfContents.tsx

@@ -99,7 +99,6 @@ export function TableOfContents(): JSX.Element | null {
                 key={heading.id}
                 component="a"
                 fz="sm"
-                px={8}
                 w="fit-content"
                 py={4}
                 className={classes.link}
@@ -108,7 +107,9 @@ export function TableOfContents(): JSX.Element | null {
                 onClick={(e) => {
                   handleHeadingClick(e, heading.id)
                 }}
-                __vars={{ '--toc-link-offset': `${heading.depth - 1}` }}
+                style={{
+                  paddingLeft: `calc(${heading.order - 1} * var(--mantine-spacing-md))`,
+                }}
               >
                 {heading.content}
               </Text>

apps/documentation/src/components/TableOfContents/getHeadings.ts

@@ -2,7 +2,7 @@
  * Component inspired by: https://github.com/mantinedev/mantine/tree/master/apps/mantine.dev/src/components/TableOfContents
  */
 export interface Heading {
-  depth: number
+  order: number
   content: string
   id: string
   getNode: () => HTMLHeadingElement
@@ -23,11 +23,11 @@ function getHeadingsData(headings: Array<HTMLHeadingElement>): Array<Heading> {
   const result: Array<Heading> = []
 
   for (const heading of headings) {
-    const depth = parseInt(heading.getAttribute('data-order') || '1', 10)
+    const order = parseInt(heading.getAttribute('data-order') || '1', 10)
 
-    if (depth <= 3 && heading.id) {
+    if (order <= 3 && heading.id) {
       result.push({
-        depth,
+        order,
         content: getCleanedText(heading),
         id: heading.id,
         getNode: () =>

apps/documentation/src/routes/documentation/configuration.mdx

@@ -62,7 +62,7 @@ Useful for extending vite's functionality
 
 The following options configure the server.
 
-### server.host
+### `server.host`
 
 - Type: `string`
 - Default: `'localhost'`