Merge pull request #165 from jgierer12/favicons

Add site favicons next to titles

components/Card.vue

@@ -1,6 +1,8 @@
 <template lang="pug">
   .card(:class="{ cardActive: isActive }")
-    p.card--title {{resource.title}}
+    .card--meta
+      img.card--favicon(:src="'https://www.google.com/s2/favicons?domain=' + resource.url" aria-hidden="true")
+      p.card--title {{resource.title}}
     p.card--description {{resource.desc}}
     .card--links
       a.card--reference(@click='createCopyUrl(resource)') Copy
@@ -33,6 +35,17 @@ export default {
     box-shadow:inset 0px 0px 0px 3px #08e5ff;
   }
 
+  &--meta {
+    display: flex;
+    align-items: center;
+  }
+
+  &--favicon {
+    height: 16px;
+    width: 16px;
+    margin-right: .5rem;
+  }
+
   &--reference {
     cursor: pointer;
     display: flex;

components/TableRow.vue

@@ -1,5 +1,7 @@
 <template lang="pug">
   tr.tableRow(:class="{ rowActive: isActive }")
+    td.tableRow--favicon
+      img(:src="'https://www.google.com/s2/favicons?domain=' + resource.url" aria-hidden="true")
     td.tableRow--title {{resource.title}}
     td.tableRow--description {{resource.desc}}
     td.tableRow--links
@@ -33,7 +35,7 @@ export default {
   transition: 0.2s ease-in-out;
   width: 1fr;
   display: grid;
-  grid-template-columns: minmax(150px, 2fr) 8fr 125px;
+  grid-template-columns: 1.5rem minmax(150px, 2fr) 8fr 125px;
 
   &--title {
     color: white;