traxxx/assets/components/tags/tag.vue

<template>
    <div
        v-if="tag"
        class="content"
    >
        <FilterBar :fetch-releases="fetchReleases" />

        <div class="tag">
            <div class="sidebar">
                <a
                    v-if="tag.poster"
                    :href="`/img/${tag.poster.path}`"
                    :title="tag.poster.comment"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    <img
                        :src="`/img/${tag.poster.thumbnail}`"
                        class="poster"
                    >
                </a>

                <span>
                    <h2 class="title">
                        <Icon icon="price-tag4" />
                        {{ tag.name }}
                    </h2>

                    <p
                        class="description"
                        v-html="description"
                    />
                </span>

                <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);
}

async function mounted() {
    [this.tag] = await Promise.all([
        this.$store.dispatch('fetchTags', { tagId: this.$route.params.tagSlug }),
        this.fetchReleases(),
    ]);

    this.description = converter.makeHtml(escapeHtml(this.tag.description));

    this.pageTitle = this.tag.name;
}

export default {
    components: {
        FilterBar,
        Releases,
    },
    data() {
        return {
            tag: null,
            releases: null,
            pageTitle: null,
        };
    },
    mounted,
    methods: {
        fetchReleases,
    },
};
</script>

<style lang="scss">
@import 'theme';

.description a {
    color: $link;
    text-decoration: inherit;

    &:hover {
        color: $primary;
    }
}
</style>

<style lang="scss" scoped>
@import 'theme';

.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: 100%;
    height: 15rem;
    object-fit: cover;
}

.title {
    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>