Adding support for custom links target

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"

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 {

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">

app.scss

@@ -160,7 +160,7 @@ body {
 
       a {
         color: #ffffff;
-        &:hover {
+        &:hover, &:focus {
           color: #ffffff;
           background-color: lighten( $secondary-color, 5% );
         }

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"

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>