Beautify External Links, add Change log link to about dialog

fixes #26
dmstern · Nov 26, 2018 · 8196b49 · 8196b49
1 parent b2dc3da
commit 8196b49
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 28 deletions.
diff --git a/src/components/About.vue b/src/components/About.vue
@@ -27,6 +27,9 @@
           <p>
             Version: {{data.meta.version}}
           </p>
+          <p>
+            <ExternalLink href="https://github.com/dmstern/npmfrog/releases" text="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.
@@ -37,12 +40,12 @@
           </p>
           <h2 class="subheading">Technologies</h2>
           <ul>
-            <li><a href="https://vuejs.org" target="_blank">Vue.js</a></li>
-            <li><a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a></li>
-            <li><a href="http://vuetifyjs.com" target="_blank">Vuetify</a></li>
-            <li><a href="https://nodejs.org/" target="_blank">node.js</a></li>
-            <li><a href="http://expressjs.com/" target="_blank">Express</a></li>
-            <li><a href="https://github.com/axios/axios" target="_blank">Axios</a></li>
+            <li><ExternalLink href="https://vuejs.org" text="Vue.js"></ExternalLink></li>
+            <li><ExternalLink href="https://www.typescriptlang.org/" text="TypeScript"></ExternalLink></li>
+            <li><ExternalLink href="http://vuetifyjs.com" text="Vuetify"></ExternalLink></li>
+            <li><ExternalLink href="https://nodejs.org/" text="node.js"></ExternalLink></li>
+            <li><ExternalLink href="http://expressjs.com/" text="Express"></ExternalLink></li>
+            <li><ExternalLink href="https://github.com/axios/axios" text="Axios"></ExternalLink></li>
           </ul>
           <br>
           <v-divider />
@@ -73,9 +76,13 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 import DataStore from '@/services/DataStore';
 import Config from '../../types/Config';
 import { IPackageJSON } from '../../types/package-json';
+import ExternalLink from './ExternalLink.vue';
 
 @Component({
   name: 'About',
+  components: {
+    ExternalLink,
+  },
 })
 export default class About extends Vue {
   @Prop() private dialogOpen!: boolean;
@@ -126,9 +133,19 @@ export default class About extends Vue {
 </script>
 
 <style lang="scss" scoped>
+
 blockquote {
   padding-top: 0;
   margin: 0;
 }
+
+ul {
+  list-style: none;
+
+  li {
+    margin-left: -1em;
+  }
+}
+
 </style>
 
diff --git a/src/components/ExternalLink.vue b/src/components/ExternalLink.vue
@@ -0,0 +1,32 @@
+<template>
+  <a
+    :href="href"
+    target="_blank"
+    :title="title"
+  >
+    <v-icon>{{$vuetify.icons.arrowTopRight}}</v-icon>
+    {{text || href}}
+  </a>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component({
+  name: 'ExternalLink',
+})
+export default class ExternalLink extends Vue {
+  @Prop() private title?: string;
+  @Prop() private href!: string;
+  @Prop() private text?: string;
+}
+</script>
+
+<style lang="scss" scoped>
+
+.v-icon {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+</style>
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -13,6 +13,7 @@ const icons = {
   search: 'fas fa-search',
   send: 'fas fa-share-square',
   arrowTopLeft: 'mdi-arrow-top-left',
+  arrowTopRight: 'mdi-arrow-top-right',
   goTo: 'fas fa-arrow-circle-right',
   tag: 'fas fa-tag',
   tags: 'fas fa-tags',

diff --git a/src/views/HowTo.vue b/src/views/HowTo.vue
@@ -12,8 +12,8 @@
       <pre v-highlightjs v-if="data.artifactoryUrl"><code class="bash">npm set registry {{data.companyScope ? `@${data.companyScope}:` : ''}}{{data.artifactoryUrl}}</code></pre>
       <v-subheader>More info:</v-subheader>
       <v-list :class="`link-list`">
-        <v-list-tile><a href="https://docs.npmjs.com/cli/config" target="_blank">https://docs.npmjs.com/cli/config</a></v-list-tile>
-        <v-list-tile><a href="https://docs.npmjs.com/misc/config#registry" target="_blank">https://docs.npmjs.com/misc/config#registry</a></v-list-tile>
+        <v-list-tile><ExternalLink href="https://docs.npmjs.com/cli/config"></ExternalLink></v-list-tile>
+        <v-list-tile><ExternalLink href="https://docs.npmjs.com/misc/config#registry"></ExternalLink></v-list-tile>
       </v-list>
       <h3>Alternative 2) Only for your npm package</h3>
       <pre v-highlightjs v-if="data.artifactoryUrl"><code class="json">
@@ -25,7 +25,7 @@
   ...</code></pre>
       <v-subheader>More info:</v-subheader> 
       <v-list :class="`link-list`">
-        <v-list-tile><a href="https://docs.npmjs.com/files/package.json#publishconfig" target="_blank">https://docs.npmjs.com/files/package.json#publishconfig</a></v-list-tile>
+        <v-list-tile><ExternalLink href="https://docs.npmjs.com/files/package.json#publishconfig"></ExternalLink></v-list-tile>
       </v-list>
       <h2>Define files that should be included in your npm package</h2>
       <pre v-highlightjs><code class="json">
@@ -46,21 +46,21 @@
 'npm ls' to inspect current package/dependency versions</code></pre>
       <v-subheader>More info:</v-subheader> 
       <v-list :class="`link-list`">
-        <v-list-tile><a href="https://docs.npmjs.com/cli/version" target="_blank">https://docs.npmjs.com/cli/version</a></v-list-tile>
-        <v-list-tile><a href="https://semver.org/" target="_blank">semver.org</a></v-list-tile>
+        <v-list-tile><ExternalLink href="https://docs.npmjs.com/cli/version"></ExternalLink></v-list-tile>
+        <v-list-tile><ExternalLink text="semver.org" href="https://semver.org/"></ExternalLink></v-list-tile>
       </v-list>
       <h2>Publish package</h2>
       <pre v-highlightjs><code class="bash">npm publish</code></pre>
       <v-subheader>More info:</v-subheader> 
       <v-list :class="`link-list`">
-        <v-list-tile><a href="https://docs.npmjs.com/cli/publish" target="_blank">https://docs.npmjs.com/cli/publish</a></v-list-tile>
+        <v-list-tile><ExternalLink  href="https://docs.npmjs.com/cli/publish"></ExternalLink></v-list-tile>
       </v-list>
       <h2>Useful references</h2>
       <v-list :class="`link-list`">
-        <v-list-tile><a href="https://www.npmjs.com/package/release-it" target="_blank">release-it</a></v-list-tile>
-        <v-list-tile><a href="https://github.com/geddski/grunt-release" target="_blank">grunt-release</a></v-list-tile>
-        <v-list-tile><a href="https://docs.npmjs.com/misc/scripts#description" target="_blank">How npm handles the "scripts" field</a></v-list-tile>
-        <v-list-tile><a href="https://semver.org/" target="_blank">semver.org</a></v-list-tile>
+        <v-list-tile><ExternalLink text="release-it" href="https://www.npmjs.com/package/release-it"></ExternalLink></v-list-tile>
+        <v-list-tile><ExternalLink text="grunt-release" href="https://github.com/geddski/grunt-release"></ExternalLink></v-list-tile>
+        <v-list-tile><ExternalLink text="How npm handles the 'scripts' field" href="https://docs.npmjs.com/misc/scripts#description"></ExternalLink></v-list-tile>
+        <v-list-tile><ExternalLink text="semver.org" href="https://semver.org/"></ExternalLink></v-list-tile>
       </v-list>
     </v-container>
   </div>
@@ -69,8 +69,13 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import DataStore from '@/services/DataStore';
+import ExternalLink from '../components/ExternalLink.vue';
 
-@Component
+@Component({
+  components: {
+    ExternalLink,
+  },
+})
 export default class HowTo extends Vue {
   private data: {
     artifactoryUrl: string,
@@ -103,17 +108,6 @@ export default class HowTo extends Vue {
 
 .v-list.link-list {
   background-color: transparent;
-
-  a[target="_blank"] {
-
-    &::before {
-      content: "↗";
-      display: inline-block;
-      vertical-align: baseline;
-      margin-right: .7em;
-      font-weight: bold;
-    }
-  }
 }