feat: add icon to external links

templates/.stylelintrc.json

@@ -5,6 +5,11 @@
     "**/docfx.scss"
   ],
   "rules": {
-    "selector-class-pattern": null
+    "selector-class-pattern": null,
+    "font-family-no-missing-generic-family-keyword": [ true, {
+      "ignoreFontFamilies": [
+        "bootstrap-icons"
+      ]
+    }]
   }
 }

templates/modern/layout/_master.tmpl

@@ -23,7 +23,6 @@
       <meta name="docfx:tocrel" content="{{_tocRel}}">
       {{#_noindex}}<meta name="searchOption" content="noindex">{{/_noindex}}
       {{#_enableSearch}}<meta name="docfx:rel" content="{{_rel}}">{{/_enableSearch}}
-      {{#_enableNewTab}}<meta name="docfx:newtab" content="true">{{/_enableNewTab}}
       {{#docurl}}<meta name="docfx:docurl" content="{{docurl}}">{{/docurl}}
       {{#yamlmime}}<meta name="docfx:yamlmime" content="{{yamlmime}}">{{/yamlmime}}
     {{/redirect_url}}

templates/modern/src/docfx.scss

@@ -81,7 +81,7 @@ article {
 }
 
 @mixin adjust-icon {
-  font-family: bootstrap-icons, sans-serif;
+  font-family: bootstrap-icons;
   position: relative;
   margin-right: 0.5em;
   top: 0.2em;

templates/modern/src/markdown.scss

@@ -3,6 +3,15 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
 */
 
+/* External link icon */
+a.external[href]::after {
+  font-family: bootstrap-icons;
+  content: "\F1C5";
+  font-size: .6rem;
+  margin: 0 .2em;
+  display: inline-block;
+}
+
 /* Alerts */
 .alert h5 {
   text-transform: uppercase;

templates/modern/src/markdown.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { breakWord, meta } from './helper'
+import { breakWord } from './helper'
 import AnchorJs from 'anchor-js'
 import { html, render } from 'lit-html'
 
@@ -67,8 +67,8 @@ function renderClickableImage() {
 
     function shouldMakeClickable(): boolean {
       return img.naturalWidth > MIN_CLICKABLE_IMAGE_SIZE &&
-             img.naturalHeight > MIN_CLICKABLE_IMAGE_SIZE &&
-             !imageLinks.includes(img)
+        img.naturalHeight > MIN_CLICKABLE_IMAGE_SIZE &&
+        !imageLinks.includes(img)
     }
   })
 }
@@ -100,15 +100,13 @@ function renderAlerts() {
  * Open external links to different host in a new window.
  */
 function renderLinks() {
-  if (meta('docfx:newtab') === 'true') {
-    const links = document.links
-    for (let i = 0; i < links.length; i++) {
-      const link = links.item(i)
-      if (link.hostname !== window.location.hostname) {
-        link.target = '_blank'
-      }
+  document.querySelectorAll<HTMLAnchorElement>('article a[href]').forEach(a => {
+    if (a.hostname !== window.location.hostname && a.innerText.trim() !== '') {
+      a.target = '_blank'
+      a.rel = 'noopener noreferrer nofollow'
+      a.classList.add('external')
     }
-  }
+  })
 }
 
 /**

templates/modern/src/toc.scss

@@ -44,7 +44,7 @@ $expand-stub-width: 1.2rem;
     display: inline-block;
     width: $expand-stub-width;
     cursor: pointer;
-    font-family: bootstrap-icons, sans-serif;
+    font-family: bootstrap-icons;
     content: "\F285";
     position: absolute;
     margin-left: -$expand-stub-width;