From e82107de6255bb95d93c6536e8c6e99498cdd742 Mon Sep 17 00:00:00 2001
From: Brooks Lybrand <brookslybrand@gmail.com>
Date: Wed, 20 Mar 2024 13:04:26 -0500
Subject: [PATCH] Add indenting for the headers nav

---
 app/lib/gh-docs/docs.ts          |  7 ++++++-
 app/routes/docs.$lang.$ref.$.tsx | 11 +++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/lib/gh-docs/docs.ts b/app/lib/gh-docs/docs.ts
index b229d89b..56aca0ec 100644
--- a/app/lib/gh-docs/docs.ts
+++ b/app/lib/gh-docs/docs.ts
@@ -24,7 +24,11 @@ export interface MenuDoc {
 
 export interface Doc extends Omit<MenuDoc, "hasContent"> {
   html: string;
-  headings: { html: string | null; slug: string | undefined }[];
+  headings: {
+    headingLevel: string;
+    html: string | null;
+    slug: string | undefined;
+  }[];
 }
 
 declare global {
@@ -112,6 +116,7 @@ function createTableOfContentsFromHeadings(html: string) {
   let $headings = $(html)("h2,h3");
 
   let headings = $headings.toArray().map((heading) => ({
+    headingLevel: heading.name,
     html: $(heading)("a").remove().end().children().html(),
     slug: heading.attributes.find((attr) => attr.name === "id")?.value,
   }));
diff --git a/app/routes/docs.$lang.$ref.$.tsx b/app/routes/docs.$lang.$ref.$.tsx
index 936468ce..ac78e015 100644
--- a/app/routes/docs.$lang.$ref.$.tsx
+++ b/app/routes/docs.$lang.$ref.$.tsx
@@ -164,13 +164,16 @@ function LargeOnThisPage({ doc }: { doc: SerializeFrom<Doc> }) {
       <ul className="md-toc flex flex-col flex-wrap gap-3 leading-[1.125]">
         {doc.headings.map((heading, i) => {
           return (
-            <li key={i}>
+            <li
+              key={i}
+              className={heading.headingLevel === "h2" ? "ml-0" : "ml-4"}
+            >
               <Link
                 to={`#${heading.slug}`}
                 dangerouslySetInnerHTML={{ __html: heading.html || "" }}
-                className={cx(
-                  "group relative py-1 text-sm text-gray-500 decoration-gray-200 underline-offset-4 hover:underline dark:text-gray-400 dark:decoration-gray-500",
-                )}
+                className={
+                  "group relative py-1 text-sm text-gray-500 decoration-gray-200 underline-offset-4 hover:underline dark:text-gray-400 dark:decoration-gray-500"
+                }
               />
             </li>
           );