feat: add indentations for "on this page" nav (#97)

remix-run · Mar 26, 2024 · 00af5da · 00af5da
1 parent 7d534e4
commit 00af5da
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/app/components/doc-route.tsx b/app/components/doc-route.tsx
@@ -137,7 +137,10 @@ function LargeOnThisPage({ doc }: { doc: SerializeFrom<Doc> }) {
       <nav className="mb-3 flex items-center font-semibold">On this page</nav>
       <ul className="md-toc flex flex-col flex-wrap gap-3 leading-[1.125]">
         {doc.headings.map((heading, i) => (
-          <li key={i}>
+          <li
+            key={i}
+            className={heading.headingLevel === "h2" ? "ml-0" : "ml-4"}
+          >
             <Link
               to={`#${heading.slug}`}
               dangerouslySetInnerHTML={{ __html: heading.html || "" }}
@@ -166,7 +169,10 @@ function SmallOnThisPage({ doc }: { doc: SerializeFrom<Doc> }) {
       </summary>
       <ul className="pl-9">
         {doc.headings.map((heading, i) => (
-          <li key={i}>
+          <li
+            key={i}
+            className={heading.headingLevel === "h2" ? "ml-0" : "ml-4"}
+          >
             <Link
               to={`#${heading.slug}`}
               dangerouslySetInnerHTML={{ __html: heading.html || "" }}

diff --git a/app/modules/gh-docs/docs.ts b/app/modules/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 {
@@ -109,6 +113,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,
   }));