feat: Visual indicator for External link in the sidebar

Resolves #240
spring-io · May 16, 2024 · de1a789 · de1a789
1 parent 3301549
commit de1a789
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 18 deletions.
diff --git a/gulp.d/tasks/generate-octicons.js b/gulp.d/tasks/generate-octicons.js
@@ -16,6 +16,7 @@ const icons = [
   'info',
   'law',
   'light-bulb',
+  'link-external',
   'moon',
   'question',
   'rocket',

diff --git a/preview-src/ui-model.yml b/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

diff --git a/src/css/nav.css b/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;
 }

diff --git a/src/img/octicons-16.svg b/src/img/octicons-16.svg