fix: nav & toc active state breaks with external urls

dotnet · Aug 2, 2023 · 310d471 · 310d471
1 parent adb5614
commit 310d471
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/templates/modern/src/nav.ts b/templates/modern/src/nav.ts
@@ -35,21 +35,20 @@ export async function renderNavbar(): Promise<NavItem[]> {
   }
 
   const menu = html`
-    <ul class='navbar-nav'>${
-      navItems.map(item => {
-        if ('items' in item) {
-          const active = item.items.some(i => i === activeItem) ? 'active' : null
-          return html`
+    <ul class='navbar-nav'>${navItems.map(item => {
+    if ('items' in item) {
+      const active = item.items.some(i => i === activeItem) ? 'active' : null
+      return html`
             <li class='nav-item dropdown'>
               <a class='nav-link dropdown-toggle ${active}' href='#' role='button' data-bs-toggle='dropdown' aria-expanded='false'>
                 ${breakWordLit(item.name)}
               </a>
               <ul class='dropdown-menu'>${item.items.map(menuItem)}</ul>
             </li>`
-        } else {
-          return menuItem(item)
-        }
-      })
+    } else {
+      return menuItem(item)
+    }
+  })
     }</ul>`
 
   function renderCore() {
@@ -119,10 +118,10 @@ function inThisArticleForManagedReference(): TemplateResult {
     return html`
       <h5 class="border-bottom">In this article</h5>
       <ul>${headings.map(h => {
-        return h.tagName === 'H2'
-          ? html`<li><h6>${breakWordLit(h.innerText)}</h6></li>`
-          : html`<li><a class="link-secondary" href="#${h.id}">${breakWordLit(h.innerText)}</a></li>`
-      })}</ul>`
+      return h.tagName === 'H2'
+        ? html`<li><h6>${breakWordLit(h.innerText)}</h6></li>`
+        : html`<li><a class="link-secondary" href="#${h.id}">${breakWordLit(h.innerText)}</a></li>`
+    })}</ul>`
   }
 }
 
@@ -131,6 +130,9 @@ function findActiveItem(items: (NavItem | NavItemContainer)[]): NavItem {
   let activeItem: NavItem
   let maxPrefix = 0
   for (const item of items.map(i => 'items' in i ? i.items : i).flat()) {
+    if (item.href.hostname !== window.location.hostname || item.href.port !== window.location.port) {
+      continue
+    }
     const prefix = commonUrlPrefix(url, item.href)
     if (prefix > maxPrefix) {
       maxPrefix = prefix

diff --git a/templates/modern/src/toc.ts b/templates/modern/src/toc.ts
@@ -54,7 +54,7 @@ export async function renderToc(): Promise<TocNode[]> {
     if (node.href) {
       const url = new URL(node.href, tocUrl)
       node.href = url.href
-      active = normalizeUrlPath(url) === normalizeUrlPath(window.location)
+      active = isExternal(url) ? false : normalizeUrlPath(url) === normalizeUrlPath(window.location)
       if (active) {
         if (node.items) {
           node.expanded = true
@@ -79,6 +79,10 @@ export async function renderToc(): Promise<TocNode[]> {
     return false
   }
 
+  function isExternal(url: URL): boolean {
+    return url.hostname !== window.location.hostname || url.port !== window.location.port
+  }
+
   function renderToc() {
     render(html`${renderTocFilter()} ${renderTocNodes(items) || renderNoFilterResult()}`, tocContainer)
   }
@@ -96,8 +100,8 @@ export async function renderToc(): Promise<TocNode[]> {
       const dom = href
         ? html`<a class='${classMap({ 'nav-link': !activeNodes.includes(node) })}' href=${href}>${breakWordLit(name)}</a>`
         : (isLeaf
-            ? html`<span class='text-body-tertiary name-only'>${breakWordLit(name)}</a>`
-            : html`<a class='${classMap({ 'nav-link': !activeNodes.includes(node) })}' href='#' @click=${toggleExpand}>${breakWordLit(name)}</a>`)
+          ? html`<span class='text-body-tertiary name-only'>${breakWordLit(name)}</a>`
+          : html`<a class='${classMap({ 'nav-link': !activeNodes.includes(node) })}' href='#' @click=${toggleExpand}>${breakWordLit(name)}</a>`)
 
       const isExpanded = (tocFilter !== '' && expanded !== false && children != null) || expanded === true