Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

fix: table of content indentation based on heading level #203

Merged
merged 3 commits into from
Dec 10, 2024
Merged

fix: table of content indentation based on heading level #203

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
702c5eb
fix: table of content indentation based on heading level
sauravpanda Dec 10, 2024
6bf09fd
Update packages/akiradocs/src/components/layout/TableOfContents.tsx
sauravpanda Dec 10, 2024
3da0321
fix: container portion not found
sauravpanda Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 22 additions & 6 deletions packages/akiradocs/src/components/layout/TableOfContents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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])'));
Copy link
Contributor

@kaizen-bot kaizen-bot bot Dec 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment: Inefficient DOM querying in useEffect.

Solution: Consider using a more efficient method to track headings or optimize the way headings are queried.
!! Make sure the following suggestion is correct before committing it !!

Suggested change
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(document.querySelectorAll('h2, h3, h4, h5')).filter(heading => !heading.hasAttribute('data-toc-ignore'));

setHeadings(elements as HTMLHeadingElement[]);

const observer = new IntersectionObserver(
Expand Down Expand Up @@ -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'
}
`}
>
Expand Down
Loading