Add indenting for the headers nav

remix-run · Mar 20, 2024 · e82107d · e82107d
1 parent dc60389
commit e82107d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git 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
@@ -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>
           );