Highlight current page in document tree I myself sometimes confused like "wait, where am I?". I could have add more eye-candy, but this is enough.

Changes

1 changed files (+13/-1)

• page_builder/default_theme/widgets/document_tree.tsx
  • @@ -62,6 +62,9 @@ }
    .${c.link}:hover { text-decoration: underline; } + .${c.link}[aria-current] { + font-weight: bold; + } .${c.directory} { display: flex;
  • @@ -112,9 +115,18 @@ // For trailing slash
    "", ]); + const isCurrent = currentPath.length === 1 && + currentPath[0] === value.metadata.name; + return ( <li lang={value.metadata.language ?? undefined}> - <a className={c.link} href={path.join("/")}>{value.metadata.title}</a> + <a + className={c.link} + href={path.join("/")} + aria-current={isCurrent ? "page" : undefined} + > + {value.metadata.title} + </a> </li> ); }