feat: Visual indicator for External link in the sidebar

Resolves #240

Author: philwebb

gulp.d/tasks/generate-octicons.js

@@ -16,6 +16,7 @@ const icons = [
   'info',
   'law',
   'light-bulb',
+  'link-external',
   'moon',
   'question',
   'rocket',

preview-src/ui-model.yml

@@ -104,6 +104,10 @@ shared:
                   url: '/samples/edge-cases/index.html'
                 - content: 404
                   url: '/404.html'
+                - content: External Link
+                  url: 'https://spring.io'
+                  roles: 'link-external'
+                  target: '_blank'
   baz:
     1.0.0:
       home: true

src/css/nav.css

@@ -80,6 +80,16 @@ html.is-clipped--nav {
   margin: 0 0 0 0.75rem;
 }
 
+.nav-list a.link-external::after {
+  content: url(../img/octicons-16.svg#view-link-external);
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 0 2px 5px;
+  filter: opacity(0.5);
+}
+
 .nav-menu > .nav-list + .nav-list {
   margin-top: 0.5rem;
 }