From 702c5ebe96c386ad91be989824d3eef566dab48b Mon Sep 17 00:00:00 2001
From: Saurav Panda <sgp65@cornell.edu>
Date: Tue, 10 Dec 2024 07:27:15 -0800
Subject: [PATCH 1/3] fix: table of content indentation based on heading level

---
 .../src/components/layout/TableOfContents.tsx | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/akiradocs/src/components/layout/TableOfContents.tsx b/packages/akiradocs/src/components/layout/TableOfContents.tsx
index 30e470e..5386510 100644
--- a/packages/akiradocs/src/components/layout/TableOfContents.tsx
+++ b/packages/akiradocs/src/components/layout/TableOfContents.tsx
@@ -17,7 +17,7 @@ export function TableOfContents({ publishDate, modifiedDate, author, locale }: T
   const t = getTranslation(locale as keyof typeof locales);
 
   useEffect(() => {
-    const elements = Array.from(document.querySelectorAll('h2:not([data-toc-ignore]), h3:not([data-toc-ignore]), h4:not([data-toc-ignore])'));
+    const elements = Array.from(document.querySelectorAll('h2:not([data-toc-ignore]), h3:not([data-toc-ignore]), h4:not([data-toc-ignore]), h5:not([data-toc-ignore])'));
     setHeadings(elements as HTMLHeadingElement[]);
 
     const observer = new IntersectionObserver(
@@ -106,19 +106,35 @@ export function TableOfContents({ publishDate, modifiedDate, author, locale }: T
 
           <ul className="space-y-2">
             {headings.map((heading) => {
-              const level = parseInt(heading.tagName[1]) - 2;
+              const level = parseInt(heading.tagName[1]) - 1;
+              const indentClass = {
+                0: '',
+                1: 'ml-3',  // h2
+                2: 'ml-6', // h3
+                3: 'ml-9', // h4
+                4: 'ml-12', // h5
+                5: 'ml-15', // h6
+              }[level] || '';
+
+              console.log(heading.textContent, level, indentClass);
               return (
                 <li key={heading.id}>
                   <a
                     href={`#${heading.id}`}
                     onClick={(e) => handleClick(e, heading.id)}
                     className={`
-                      text-sm block px-3 py-2 transition-colors duration-200 rounded-md
-                      ${level > 0 ? 'pl-' + (level * 4 + 3) : ''}
+                      text-sm block px-3 py-2 rounded-md
+                      ${indentClass}
+                      transition-all duration-200 ease-in-out
+                      relative
+                      before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 
+                      before:h-4 before:w-0.5 before:bg-primary before:opacity-0
+                      before:transition-all before:duration-200
+                      hover:before:opacity-100
                       ${
                         activeId === heading.id
-                          ? 'text-primary font-medium bg-primary/5'
-                          : 'text-muted-foreground hover:text-foreground hover:bg-muted/40'
+                          ? 'text-primary font-medium bg-primary/5 before:opacity-100'
+                          : 'text-muted-foreground hover:text-foreground hover:bg-muted/40 hover:translate-x-1'
                       }
                     `}
                   >

From 6bf09fd2bdca0376723ce20aa29c5f8e89010cf0 Mon Sep 17 00:00:00 2001
From: Saurav Panda <sgp65@cornell.edu>
Date: Tue, 10 Dec 2024 12:24:37 -0500
Subject: [PATCH 2/3] Update
 packages/akiradocs/src/components/layout/TableOfContents.tsx

Co-authored-by: kaizen-bot[bot] <150987473+kaizen-bot[bot]@users.noreply.github.com>
---
 packages/akiradocs/src/components/layout/TableOfContents.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/akiradocs/src/components/layout/TableOfContents.tsx b/packages/akiradocs/src/components/layout/TableOfContents.tsx
index 5386510..87fc72a 100644
--- a/packages/akiradocs/src/components/layout/TableOfContents.tsx
+++ b/packages/akiradocs/src/components/layout/TableOfContents.tsx
@@ -17,7 +17,7 @@ export function TableOfContents({ publishDate, modifiedDate, author, locale }: T
   const t = getTranslation(locale as keyof typeof locales);
 
   useEffect(() => {
-    const elements = Array.from(document.querySelectorAll('h2:not([data-toc-ignore]), h3:not([data-toc-ignore]), h4:not([data-toc-ignore]), h5:not([data-toc-ignore])'));
+    const elements = Array.from(containerRef.current.querySelectorAll('h2:not([data-toc-ignore]), h3:not([data-toc-ignore]), h4:not([data-toc-ignore]), h5:not([data-toc-ignore])'));
     setHeadings(elements as HTMLHeadingElement[]);
 
     const observer = new IntersectionObserver(

From 3da032137fb66cc7dd111ba772aaec3eb49c5ab6 Mon Sep 17 00:00:00 2001
From: Saurav Panda <sgp65@cornell.edu>
Date: Tue, 10 Dec 2024 09:27:40 -0800
Subject: [PATCH 3/3] fix: container portion not found

---
 packages/akiradocs/src/components/layout/TableOfContents.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/akiradocs/src/components/layout/TableOfContents.tsx b/packages/akiradocs/src/components/layout/TableOfContents.tsx
index 87fc72a..5386510 100644
--- a/packages/akiradocs/src/components/layout/TableOfContents.tsx
+++ b/packages/akiradocs/src/components/layout/TableOfContents.tsx
@@ -17,7 +17,7 @@ export function TableOfContents({ publishDate, modifiedDate, author, locale }: T
   const t = getTranslation(locale as keyof typeof locales);
 
   useEffect(() => {
-    const elements = Array.from(containerRef.current.querySelectorAll('h2:not([data-toc-ignore]), h3:not([data-toc-ignore]), h4:not([data-toc-ignore]), h5:not([data-toc-ignore])'));
+    const elements = Array.from(document.querySelectorAll('h2:not([data-toc-ignore]), h3:not([data-toc-ignore]), h4:not([data-toc-ignore]), h5:not([data-toc-ignore])'));
     setHeadings(elements as HTMLHeadingElement[]);
 
     const observer = new IntersectionObserver(