PronounsPage/pages/links/translinguistics.vue

<script setup lang="ts">
import { useNuxtApp } from 'nuxt/app';

import useConfig from '~/composables/useConfig.ts';
import useSimpleHead from '~/composables/useSimpleHead.ts';
import type { AcademicReference } from '~/locale/config.ts';

definePageMeta({
    translatedPaths: (config) => {
        if (!config.links.enabled || !config.links.translinguisticsRoute) {
            return [];
        }
        return [`/${encodeURIComponent(config.links.translinguisticsRoute)}`];
    },
});

const { $translator: translator } = useNuxtApp();
const config = useConfig();

useSimpleHead({
    title: translator.translate('links.translinguistics.headerLong'),
    banner: `img/${config.locale}/trans-linguistics.png`,
}, translator);

if (config.links.translinguistics === undefined) {
    throw new Error('config.links.translinguistics is undefined');
}

const tags = [...new Set(config.links.translinguistics.flatMap((entry) => entry.tags))]
    .sort((a, b) => a.localeCompare(b));

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

const selectedTag = ref<string | null>(null);

const visibleEntriesByYear = computed(() => {
    const entriesByYear: { year: number; entries: AcademicReference[] }[] = [];
    let prevYear = null;
    for (const entry of entriesSorted) {
        if (selectedTag.value !== null && !entry.tags.includes(selectedTag.value)) {
            continue;
        }
        if (prevYear !== entry.year) {
            entriesByYear.push({ year: entry.year, entries: [] });
            prevYear = entry.year;
        }
        entriesByYear[entriesByYear.length - 1].entries.push(entry);
    }

    return entriesByYear;
});
</script>

<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>