Adding support for custom links target

diff --git a/README.md b/README.md
index f1495495486ad80f6a44dd85572aa743ea100e26..fe188b7d4c4a7a3c093d31a8184e5dd8808fcc4e 100644 (file)
--- 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 27617dea394032a1d75daf4262ccc81e8dda837a..9b2453a3b62222b8314c842c3a932a0d804181b8 100644 (file)
--- 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 6c2ba9078ef73da8214034e360530a33e7a3a55c..0cd75b53724263cf7c0d3d5f1fb959038db226a2 100644 (file)
--- 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 defd931ef078d5e779ff6e03fdecf5f2e0eb35bd..ade72f3bc9018327229a848446458a043ee1c3d3 100644 (file)
--- 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 7288da6dd2c857221bc4450f50dd7b0e447cdb5f..3d870168e06b394b1456c012e1f6160a601aa891 100644 (file)
--- 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 1883223d73002e5ffd27780d23d006497914e1d2..2d88daa1f434120321c26d68a53ca94944f4b251 100644 (file)
--- 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>