PronounsPage/routes/translinguistics.vue

<template>
    <Page>
        <LinksNav />

        <h2 class="mb-3">
            <Icon v="head-side-brain" />
            <T>links.translinguistics.headerLong</T>
        </h2>

        <T>links.translinguistics.intro</T>

        <section itemscope itemtype="https://schema.org/FAQPage">
            <Answer
                v-for="question in Object.keys($t('links.translinguistics.faq'))"
                :id="question"
                :key="question"
                :ref="question.replace(/-/g, '_')"
                :question="question"
                base="links.translinguistics.faq"
            />
        </section>

        <Separator icon="list" />

        <section>
            <ul class="list-inline">
                <li class="list-inline-item">
                    <T>links.translinguistics.tags</T><T>quotation.colon</T>
                </li>
                <li v-for="tag in tags" class="list-inline-item">
                    <a
                        href="#"
                        :class="['badge', selectedTag === tag ? 'text-bg-primary' : 'text-bg-light border']"
                        @click.prevent="selectedTag = selectedTag === tag ? null : tag"
                    >
                        {{ tag }}
                    </a>
                </li>
            </ul>
        </section>

        <section v-for="entriesYear in visibleEntriesByYear">
            <h3>{{ entriesYear.year }}</h3>
            <ul class="list-unstyled">
                <li v-for="entry in entriesYear.entries" class="mb-3">
                    <AcademicReference :entry="entry" />
                </li>
            </ul>
        </section>

        <Separator icon="heart" />
        <Support />
        <section>
            <Share :title="$t('links.translinguistics.header')" />
        </section>
    </Page>
</template>

<script>
import { head } from '../src/helpers.ts';

export default {
    data() {
        const tags = [...new Set(this.$config.links.translinguistics.flatMap((entry) => entry.tags))]
            .sort((a, b) => a.localeCompare(b));

        const entriesSorted = [...this.$config.links.translinguistics].sort((a, b) => {
            if (b.year - a.year !== 0) {
                return b.year - a.year;
            }
            return a.reference.localeCompare(b.reference);
        });

        return {
            entriesSorted,
            tags,
            selectedTag: null,
        };
    },
    head() {
        return head({
            title: this.$t('links.translinguistics.headerLong'),
            banner: 'img-local/trans-linguistics.png',
        }, this.$translator);
    },
    computed: {
        visibleEntriesByYear() {
            const entriesByYear = [];
            let prevYear = null;
            for (const entry of this.entriesSorted) {
                if (this.selectedTag !== null && !entry.tags.includes(this.selectedTag)) {
                    continue;
                }
                if (prevYear !== entry.year) {
                    entriesByYear.push({ year: entry.year, entries: [] });
                    prevYear = entry.year;
                }
                entriesByYear[entriesByYear.length - 1].entries.push(entry);
            }

            return entriesByYear;
        },
    },
};
</script>