fix(modern-template): nav & toc active state breaks with external urls

samples/seed/articles/toc.yml

@@ -10,3 +10,5 @@
     href: csharp_coding_standards.md
 - name: Markdown
   href: markdown.md
+- name: Microsoft Docs
+  href: https://docs.microsoft.com/en-us/

templates/modern/src/helper.ts

@@ -45,3 +45,12 @@ export function breakWordLit(text: string): TemplateResult {
   })
   return html`${result}`
 }
+
+/**
+ * Check if the url is external.
+ * @param url The url to check.
+ * @returns True if the url is external.
+ */
+export function isExternalHref(url: URL): boolean {
+  return url.hostname !== window.location.hostname || url.protocol !== window.location.protocol
+}

templates/modern/src/nav.ts

@@ -2,7 +2,7 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 
 import { render, html, TemplateResult } from 'lit-html'
-import { breakWordLit, meta } from './helper'
+import { breakWordLit, meta, isExternalHref } from './helper'
 import { themePicker } from './theme'
 import { TocNode } from './toc'
 
@@ -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 (isExternalHref(item.href)) {
+      continue
+    }
     const prefix = commonUrlPrefix(url, item.href)
     if (prefix > maxPrefix) {
       maxPrefix = prefix

templates/modern/src/toc.ts

@@ -3,7 +3,7 @@
 
 import { TemplateResult, html, render } from 'lit-html'
 import { classMap } from 'lit-html/directives/class-map.js'
-import { breakWordLit, meta } from './helper'
+import { breakWordLit, meta, isExternalHref } from './helper'
 
 export type TocNode = {
   name: string
@@ -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 = isExternalHref(url) ? false : normalizeUrlPath(url) === normalizeUrlPath(window.location)
       if (active) {
         if (node.items) {
           node.expanded = true

test/docfx.Snapshot.Tests/SamplesTest.Seed/toc.html.view.verified.json

@@ -44,6 +44,15 @@
       "topicHref": null,
       "tocHref": null,
       "level": 2.0
+    },
+    {
+      "name": "Microsoft Docs",
+      "href": "https://docs.microsoft.com/en-us/",
+      "topicHref": "https://docs.microsoft.com/en-us/",
+      "tocHref": null,
+      "level": 2.0,
+      "items": [],
+      "leaf": true
     }
   ],
   "_appName": "Seed",
@@ -65,4 +74,4 @@
   "leaf": false,
   "title": "Table of Content",
   "_disableToc": true
-}
+}

test/docfx.Snapshot.Tests/SamplesTest.Seed/toc.json.view.verified.json

@@ -1,3 +1,3 @@
 {
-  "content": "{\"items\":[{\"name\":\"Home\",\"href\":\"index.html\",\"topicHref\":\"index.html\"},{\"name\":\"Articles\",\"href\":\"articles/docfx_getting_started.html\",\"tocHref\":\"articles/toc.html\",\"topicHref\":\"articles/docfx_getting_started.html\"},{\"name\":\"API Documentation\",\"items\":[{\"name\":\".NET API\",\"href\":\"api/BuildFromAssembly.html\",\"tocHref\":\"api/toc.html\",\"topicHref\":\"api/BuildFromAssembly.html\",\"topicUid\":\"BuildFromAssembly\"},{\"name\":\"REST API\",\"href\":\"restapi/petstore.html\",\"tocHref\":\"restapi/toc.html\",\"topicHref\":\"restapi/petstore.html\"}]}]}"
-}
+  "content": "{\"items\":[{\"name\":\"Home\",\"href\":\"index.html\",\"topicHref\":\"index.html\"},{\"name\":\"Articles\",\"href\":\"articles/docfx_getting_started.html\",\"tocHref\":\"articles/toc.html\",\"topicHref\":\"articles/docfx_getting_started.html\"},{\"name\":\"API Documentation\",\"items\":[{\"name\":\".NET API\",\"href\":\"api/BuildFromAssembly.html\",\"tocHref\":\"api/toc.html\",\"topicHref\":\"api/BuildFromAssembly.html\",\"topicUid\":\"BuildFromAssembly\"},{\"name\":\"REST API\",\"href\":\"restapi/petstore.html\",\"tocHref\":\"restapi/toc.html\",\"topicHref\":\"restapi/petstore.html\"}]},{\"name\":\"Microsoft Docs\",\"href\":\"https://docs.microsoft.com/en-us/\",\"topicHref\":\"https://docs.microsoft.com/en-us/\"}]}"
+}

test/docfx.Snapshot.Tests/SamplesTest.Seed/toc.verified.json

@@ -28,6 +28,11 @@
           "topicHref": "restapi/petstore.html"
         }
       ]
+    },
+    {
+      "name": "Microsoft Docs",
+      "href": "https://docs.microsoft.com/en-us/",
+      "topicHref": "https://docs.microsoft.com/en-us/"
     }
   ]
-}
+}