Adding support for custom links target

6 files changed, 8 insertions, 4 deletions

diff --git a/README.md b/README.md
index f149549..fe188b7 100644
--- a/README.md
+++ b/README.md
@@ -37,6 +37,7 @@ links:
   - name: "ansible"
     icon: "fa-github"
     url: "https://github.com/xxxxx/ansible/"
+    target: '_blank' # optionnal html a tag target attribute
   - name: "Wiki"
     icon: "fa-book"
     url: "https://wiki.xxxxxx.com/"
@@ -55,6 +56,7 @@ services:
         subtitle: "Continuous integration server"
         tag: "CI"
         url: "#"
+        target: '_blank' # optionnal html a tag target attribute
       - name: "RabbitMQ Management"
         logo: "/assets/tools/rabbitmq.png"
         subtitle: "Manage & monitor RabbitMQ server"
diff --git a/app.css b/app.css
index 27617de..9b2453a 100644
--- a/app.css
+++ b/app.css
@@ -139,7 +139,7 @@ body {
       background-color: #4285f4; }
       body #bighead .navbar a {
         color: #ffffff; }
-        body #bighead .navbar a:hover {
+        body #bighead .navbar a:hover, body #bighead .navbar a:focus {
           color: #ffffff;
           background-color: #5a95f5; }
   body #main-section {
diff --git a/app.js b/app.js
index 6c2ba90..0cd75b5 100644
--- a/app.js
+++ b/app.js
@@ -87,7 +87,7 @@ Vue.component('service', {
     props: ['item'],
     template: `<div>
     <div class="card">
-        <a :href="item.url">
+        <a :href="item.url" :target="item.target">
             <div class="card-content">
                 <div class="media">
                     <div v-if="item.logo" class="media-left">
diff --git a/app.scss b/app.scss
index defd931..ade72f3 100644
--- a/app.scss
+++ b/app.scss
@@ -160,7 +160,7 @@ body {
 
       a {
         color: #ffffff;
-        &:hover {
+        &:hover, &:focus {
           color: #ffffff;
           background-color: lighten( $secondary-color, 5% );
         }
diff --git a/config.yml b/config.yml
index 7288da6..3d87016 100644
--- a/config.yml
+++ b/config.yml
@@ -20,6 +20,7 @@ links:
   - name: "ansible"
     icon: "fab fa-github"
     url: "https://github.com/xxxxx/ansible/"
+    target: '_blank' # optionnal html a tag target attribute
   - name: "Wiki"
     icon: "fas fa-book"
     url: "https://wiki.xxxxxx.com/"
@@ -36,6 +37,7 @@ services:
         subtitle: "Continuous integration server"
         tag: "CI"
         url: "#"
+        target: '_blank' # optionnal html a tag target attribute
       - name: "RabbitMQ Management"
         logo: "assets/tools/rabbitmq.png"
         subtitle: "Manage & monitor RabbitMQ server"
diff --git a/index.html b/index.html
index 1883223..2d88daa 100644
--- a/index.html
+++ b/index.html
@@ -33,7 +33,7 @@
           <div class="container">
             <div class="navbar-menu">
               <div class="navbar-start">
-                <a v-for="link in config.links" class="navbar-item" :href="link.url">
+                <a v-for="link in config.links" class="navbar-item" :href="link.url" :target="link.target">
                   <i v-if="link.icon" style="margin-right: 6px;" :class="link.icon"></i>
                   {{ link.name }}
                 </a>