Added rudimentary tags page. Improved social match behavior.

assets/components/tile/release.vue

@@ -2,19 +2,19 @@
     <div class="tile">
         <span class="banner">
             <span class="details">
-                <a
+                <router-link
                     v-if="release.site.independent"
-                    :href="`/network/${release.network.slug}`"
+                    :to="`/network/${release.network.slug}`"
                     class="site site-link"
-                >{{ release.network.name }}</a>
+                >{{ release.network.name }}</router-link>
 
-                <a
+                <router-link
                     v-else
                     v-tooltip.bottom="`Part of ${release.network.name}`"
                     :title="`Part of ${release.network.name}`"
-                    :href="`/site/${release.site.slug}`"
+                    :to="`/site/${release.site.slug}`"
                     class="site site-link"
-                >{{ release.site.name }}</a>
+                >{{ release.site.name }}</router-link>
 
                 <a
                     v-if="release.date"
@@ -38,8 +38,8 @@
                 >{{ `(${formatDate(release.dateAdded, 'MMM D, YYYY')})` }}`</a>
             </span>
 
-            <a
-                :href="`/scene/${release.id}`"
+            <router-link
+                :to="`/scene/${release.id}`"
                 class="link"
             >
                 <img
@@ -61,12 +61,12 @@
                     :title="release.title"
                     class="thumbnail"
                 >No thumbnail available</div>
-            </a>
+            </router-link>
         </span>
 
         <div class="info">
-            <a
-                :href="`/scene/${release.id}`"
+            <router-link
+                :to="`/scene/${release.id}`"
                 class="row link"
             >
                 <h3
@@ -74,7 +74,7 @@
                     :title="release.title"
                     class="title"
                 >{{ release.title }}</h3>
-            </a>
+            </router-link>
 
             <span class="row">
                 <ul class="actors nolist">
@@ -100,10 +100,10 @@
                     :key="`tag-${tag.slug}`"
                     class="tag"
                 >
-                    <a
-                        :href="`/tag/${tag.slug}`"
+                    <router-link
+                        :to="`/tag/${tag.slug}`"
                         class="tag-link"
-                    >{{ tag.name }}</a>
+                    >{{ tag.name }}</router-link>
                 </li>
             </ul>
         </div>

assets/components/tile/tag.vue

@@ -0,0 +1,72 @@
+<template>
+    <a
+        :href="`/tag/${tag.slug}`"
+        :title="tag.name"
+        class="tile"
+    >
+        <img
+            v-if="imageAvailable"
+            :src="`/img/tags/${tag.slug}_thumb.jpg`"
+            :alt="tag.name"
+            class="poster"
+            @error="imageAvailable = false"
+        >
+
+        <span class="title">{{ tag.name }}</span>
+    </a>
+</template>
+
+<script>
+export default {
+    props: {
+        tag: {
+            type: Object,
+            default: null,
+        },
+    },
+    data() {
+        return {
+            imageAvailable: true,
+        };
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.tile {
+    background: $background;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
+    text-align: center;
+    text-decoration: none;
+}
+
+.poster {
+    width: 100%;
+    height: 14rem;
+    object-fit: cover;
+}
+
+.title {
+    color: $text;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    font-weight: bold;
+    padding: .5rem 1rem;
+}
+
+.title {
+    color: $text;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    margin: 0;
+}
+</style>