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>

assets/components/tags/tags.vue

@@ -1,10 +1,44 @@
 <template>
     <div class="tags">
-        <Tag
-            v-for="tag in tags"
-            :key="`tag-${tag.id}`"
-            :tag="tag"
-        />
+        <h3>Penetration</h3>
+
+        <div class="tiles">
+            <Tag
+                v-for="tag in tags.penetration"
+                :key="`tag-${tag.id}`"
+                :tag="tag"
+            />
+        </div>
+
+        <h3>Group</h3>
+
+        <div class="tiles">
+            <Tag
+                v-for="tag in tags.group"
+                :key="`tag-${tag.id}`"
+                :tag="tag"
+            />
+        </div>
+
+        <h3>Ethnicity</h3>
+
+        <div class="tiles">
+            <Tag
+                v-for="tag in tags.ethnicity"
+                :key="`tag-${tag.id}`"
+                :tag="tag"
+            />
+        </div>
+
+        <h3>Finish</h3>
+
+        <div class="tiles">
+            <Tag
+                v-for="tag in tags.finish"
+                :key="`tag-${tag.id}`"
+                :tag="tag"
+            />
+        </div>
     </div>
 </template>
 
@@ -12,7 +46,42 @@
 import Tag from '../tile/tag.vue';
 
 async function mounted() {
-    this.tags = await this.$store.dispatch('fetchTags', { priority: [9] });
+    const tags = await this.$store.dispatch('fetchTags', {
+        slug: [
+            'airtight',
+            'anal',
+            'double-anal',
+            'double-penetration',
+            'double-vaginal',
+            'da-tp',
+            'dv-tp',
+            'triple-anal',
+            'blowbang',
+            'gangbang',
+            'mff',
+            'mfm',
+            'orgy',
+            'asian',
+            'caucasian',
+            'ebony',
+            'interracial',
+            'latina',
+            'anal-creampie',
+            'bukkake',
+            'creampie',
+            'facial',
+            'oral-creampie',
+            'swallowing',
+        ],
+    });
+
+    this.tags = tags.reduce((acc, tag) => {
+        if (acc[tag.group.slug]) {
+            return { ...acc, [tag.group.slug]: [...acc[tag.group.slug], tag] };
+        }
+
+        return { ...acc, [tag.group.slug]: [tag] };
+    }, {});
 }
 
 export default {
@@ -21,7 +90,7 @@ export default {
     },
     data() {
         return {
-            tags: [],
+            tags: {},
         };
     },
     mounted,
@@ -30,9 +99,12 @@ export default {
 
 <style lang="scss" scoped>
 .tags {
+    padding: 1rem;
+}
+
+.tiles {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
     grid-gap: .5rem;
-    padding: 1rem;
 }
 </style>