About.vue: beautify link icons

dmstern · Nov 26, 2018 · 9b23017 · 9b23017
1 parent 3c1682c
commit 9b23017
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/src/components/About.vue b/src/components/About.vue
@@ -28,14 +28,14 @@
             Version: {{data.meta.version}}
           </p>
           <p>
-            <ExternalLink href="https://github.com/dmstern/npmfrog/releases" text="Changelog"></ExternalLink>
+            <ExternalLink href="https://github.com/dmstern/npmfrog/releases" text="Changelog" :icon="$vuetify.icons.changelog"></ExternalLink>
           </p>
           <p>
             This tool requests meta data of npm packages that were published to jFrog's npm registry on {{data.config.artifactory.host}} for integration into another front-end project or for deployment as a back-end dependency.
             It and aims to display them in a way that should help front-end developers to discover the best in-house javascript solutions to solve a specific problem.
           </p>
           <p>
-            It's code is developed as open source and published on <ExternalLink :href="data.meta.repository.url" text="GitHub"></ExternalLink>.
+            It's code is developed as open source and published on <ExternalLink :href="data.meta.repository.url" text="GitHub" :icon="$vuetify.icons.github"></ExternalLink>.
             If you discover any bugs or would like to have a feature being added, feel free to file an <ExternalLink :href="data.meta.bugs.url" text="issue"></ExternalLink> or contribute to this project.
           </p>
           <h2 class="subheading">Technologies</h2>
@@ -93,7 +93,7 @@
           <v-divider />
           <p>
             Created with 🦄 and ☕ in 2018 by <a href="https://github.com/dmstern" target="_blank">Daniel Morgenstern</a> for ]init[ Pixelschubser Unit<br/>
-            Logo icons designed by Freepik and Dimitry Miroliubov from <a href="//www.flaticon.com" target="_blank">Flaticon</a>
+            Logo icons designed by Freepik and Dimitry Miroliubov from <ExternalLink href="//www.flaticon.com" text="Flaticon"></ExternalLink>
           </p>
         </v-card-text>
 

diff --git a/src/components/ExternalLink.vue b/src/components/ExternalLink.vue
@@ -6,8 +6,7 @@
   >
     <img :src="img" v-if="img">
     <v-icon v-else>{{icon || $vuetify.icons.externalLink}}</v-icon>
-    {{text || href}}
-  </a>
+    {{text || href}}</a>
 </template>
 
 <script lang="ts">

diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -38,6 +38,9 @@ const icons = {
   home: 'fas fa-home',
   upload: 'fas fa-upload',
   transfer: 'fas fa-exchange-alt',
+  newspaper: 'far fa-newspaper',
+  new: 'mdi-new-box',
+  bullhorn: 'fas fa-bullhorn',
 };
 
 icons.keywords = icons.tags;
@@ -46,6 +49,7 @@ icons.repository = icons.code;
 icons.modified = icons.updated;
 icons.homepage = icons.website;
 icons.crafter = icons.author;
+icons.changelog = icons.newspaper;
 
 Vue.use(Vuetify, {
   iconfont: 'fa', // 'md' || 'mdi' || 'fa' || 'fa4'