Move tag posters and photos to media database.

assets/components/tags/tag.vue

@@ -1,39 +1,72 @@
 <template>
     <div
         v-if="tag"
-        class="content tag"
+        class="content"
     >
         <FilterBar :fetch-releases="fetchReleases" />
 
-        <div class="header">
-            <img
-                :src="`/img/tags/${tag.slug}.jpg`"
-                class="poster"
-            >
+        <div class="tag">
+            <div class="sidebar">
+                <a
+                    v-if="tag.poster"
+                    :href="`/media/${tag.poster.path}`"
+                    :title="tag.poster.comment"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    <img
+                        :src="`/media/${tag.poster.thumbnail}`"
+                        class="poster"
+                    >
+                </a>
 
-            <span>
-                <h2 class="title">
-                    <Icon icon="price-tag4" />
-                    {{ tag.name }}
-                </h2>
+                <span>
+                    <h2 class="title">
+                        <Icon icon="price-tag4" />
+                        {{ tag.name }}
+                    </h2>
 
-                <span class="description">{{ tag.description }}</span>
-            </span>
-        </div>
+                    <p
+                        class="description"
+                        v-html="description"
+                    />
+                </span>
 
-        <div class="content-inner">
-            <Releases
-                :releases="releases"
-                :context="tag.name"
-            />
+                <div class="photos">
+                    <a
+                        v-for="photo in tag.photos"
+                        :key="`photo-${photo.id}`"
+                        :title="photo.comment"
+                        :href="`/media/${photo.path}`"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <img
+                            :src="`/media/${photo.thumbnail}`"
+                            class="photo"
+                        >
+                    </a>
+                </div>
+            </div>
+
+            <div class="content-inner">
+                <Releases :releases="releases" />
+            </div>
         </div>
     </div>
 </template>
 
 <script>
+/* eslint-disable no-v-html */
+import { Converter } from 'showdown';
+
+import escapeHtml from '../../../src/utils/escape-html';
+
 import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
 
+const converter = new Converter();
+
 async function fetchReleases() {
     this.releases = await this.$store.dispatch('fetchTagReleases', this.$route.params.tagSlug);
 }
@@ -44,6 +77,8 @@ async function mounted() {
         this.fetchReleases(),
     ]);
 
+    this.description = converter.makeHtml(escapeHtml(this.tag.description));
+
     this.pageTitle = this.tag.name;
 }
 
@@ -66,27 +101,62 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import 'theme';
+
+.description a {
+    color: $link;
+    text-decoration: inherit;
+
+    &:hover {
+        color: $primary;
+    }
+}
+</style>
+
 <style lang="scss" scoped>
 @import 'theme';
 
-.header {
+.tag {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    justify-content: stretch;
+}
+
+.sidebar {
+    background: $profile;
+    color: $text-contrast;
+    width: 25rem;
+    box-sizing: border-box;
+    padding: 1rem;
 }
 
 .poster {
-    width: 30rem;
-    height: 18rem;
+    width: 100%;
+    height: 15rem;
     object-fit: cover;
 }
 
 .title {
-    display: inline-block;
-    padding: 1rem;
-    margin: 0 .5rem 0 0;
+    padding: 0;
+    margin: 1rem 0;
     text-transform: capitalize;
 
     .icon {
+        fill: $text-contrast;
         width: 1.25rem;
         height: 1.25rem;
     }
 }
+
+.description {
+    padding: 0;
+    margin: 0 0 1rem 0;
+    line-height: 1.5;
+}
+
+.photo {
+    width: 100%;
+}
 </style>