About.vue: add logos to tech list

dmstern · Nov 26, 2018 · 1a95fea · 1a95fea
1 parent 937ae02
commit 1a95fea
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 9 deletions.
diff --git a/src/assets/img/express.png b/src/assets/img/express.png
diff --git a/src/assets/img/node-icon.png b/src/assets/img/node-icon.png
diff --git a/src/assets/img/node.png b/src/assets/img/node.png
diff --git a/src/assets/img/ts.png b/src/assets/img/ts.png
diff --git a/src/assets/img/vue.png b/src/assets/img/vue.png
diff --git a/src/assets/img/vuetify.svg b/src/assets/img/vuetify.svg
diff --git a/src/components/About.vue b/src/components/About.vue
@@ -39,14 +39,56 @@
             If you discover any bugs or would like to have a feature being added, feel free to file an <a :href="data.meta.bugs.url" target="_blank">issue</a> or contribute to this project.
           </p>
           <h2 class="subheading">Technologies</h2>
-          <ul>
-            <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>
+          <v-list>
+            <v-list-tile>
+              <v-list-tile-avatar>
+                <img :src="require('@/assets/img/vue.png')">
+              </v-list-tile-avatar>
+              <v-list-tile-content>
+                <ExternalLink href="https://vuejs.org" text="Vue.js"></ExternalLink>
+              </v-list-tile-content>
+            </v-list-tile>
+            <v-list-tile>
+              <v-list-tile-avatar>
+                <img :src="require('@/assets/img/ts.png')">
+              </v-list-tile-avatar>
+              <v-list-tile-content>
+              <ExternalLink href="https://www.typescriptlang.org/" text="TypeScript"></ExternalLink>
+              </v-list-tile-content>
+            </v-list-tile>
+            <v-list-tile>
+              <v-list-tile-avatar>
+                <img :src="require('@/assets/img/vuetify.svg')">
+              </v-list-tile-avatar>
+              <v-list-tile-content>
+              <ExternalLink href="http://vuetifyjs.com" text="Vuetify"></ExternalLink>
+              </v-list-tile-content>
+            </v-list-tile>
+            <v-list-tile>
+              <v-list-tile-avatar>
+                <img :src="require('@/assets/img/node-icon.png')">
+              </v-list-tile-avatar>
+              <v-list-tile-content>
+              <ExternalLink href="https://nodejs.org/" text="node.js"></ExternalLink>
+              </v-list-tile-content>
+            </v-list-tile>
+            <v-list-tile>
+              <v-list-tile-avatar>
+                <img :src="require('@/assets/img/express.png')">
+              </v-list-tile-avatar>
+              <v-list-tile-content>
+              <ExternalLink href="http://expressjs.com/" text="Express"></ExternalLink>
+              </v-list-tile-content>
+            </v-list-tile>
+            <v-list-tile>
+              <v-list-tile-avatar>
+                <v-icon>{{$vuetify.icons.transfer}}</v-icon>
+              </v-list-tile-avatar>
+              <v-list-tile-content>
+              <ExternalLink href="https://github.com/axios/axios" text="Axios"></ExternalLink>
+              </v-list-tile-content>
+            </v-list-tile>
+          </v-list>
           <br>
           <v-divider />
           <p>

diff --git a/src/components/ExternalLink.vue b/src/components/ExternalLink.vue
@@ -4,7 +4,8 @@
     target="_blank"
     :title="title"
   >
-    <v-icon>{{icon || $vuetify.icons.arrowTopRight}}</v-icon>
+    <img :src="img" v-if="img">
+    <v-icon v-else>{{icon || $vuetify.icons.arrowTopRight}}</v-icon>
     {{text || href}}
   </a>
 </template>
@@ -20,6 +21,7 @@ export default class ExternalLink extends Vue {
   @Prop() private href!: string;
   @Prop() private text?: string;
   @Prop() private icon?: string;
+  @Prop() private img?: string;
 }
 </script>
 
@@ -30,4 +32,9 @@ export default class ExternalLink extends Vue {
   line-height: inherit;
 }
 
+img {
+  width: auto;
+  height: 1em;
+}
+
 </style>
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -37,6 +37,7 @@ const icons = {
   email: 'far fa-envelope',
   home: 'fas fa-home',
   upload: 'fas fa-upload',
+  transfer: 'fas fa-exchange-alt',
 };
 
 icons.keywords = icons.tags;