PronounsPage/components/pronouns/PronounsIndex.vue

<script setup lang="ts">
import { buildAnyPronounsList, headerForVariant } from '~/src/buildPronoun.ts';
import { loadPronounLibrary } from '~/src/data.ts';

defineProps<{
    examples?: boolean;
}>();

const config = useConfig();
const pronounLibrary = await loadPronounLibrary(config);

const anyPronouns = buildAnyPronounsList(config, pronounLibrary);
</script>

<template>
    <ul v-if="config.pronouns.enabled" class="list-group mt-4">
        <template v-for="[group, groupPronouns] in pronounLibrary.split()" :key="group.key">
            <li v-if="!group.hidden" class="list-group-item">
                <p class="h5">
                    <Spelling :text="group.name" />
                </p>
                <p v-if="group.description" class="small my-1">
                    <Icon v="info-circle" />
                    <LinkedText :text="group.description" />
                </p>
                <SimplePronounList :pronouns="groupPronouns" />
            </li>
        </template>
        <li v-if="config.pronouns.generator.enabled" id="generator" class="list-group-item">
            <p class="h5">
                <T>home.generator.header</T>
            </p>
            <p class="small my-1">
                <Icon v="info-circle" />
                <T>home.generator.description</T>
            </p>
            <PronounsCustomGenerator />
        </li>
        <li id="multiple" class="list-group-item">
            <p class="h5">
                <Spelling :text="config.pronouns.multiple.name" />
            </p>
            <p v-if="config.pronouns.multiple.description" class="small my-1">
                <Icon v="info-circle" />
                <LinkedText :text="config.pronouns.multiple.description" />
            </p>
            <SimplePronounList v-if="examples" :pronouns="config.pronouns.multiple.examples" class="mb-3" />
            <PronounsMultipleGenerator />
        </li>
        <li v-if="config.pronouns.null !== false" id="nameself" class="list-group-item">
            <p class="h5">
                <template v-for="(variant, i) in config.pronouns.null.routes" :key="variant">
                    {{ i === 0 ? '' : ' / ' }}
                    <PronounsIndexLink :path="variant">
                        <Spelling :text="headerForVariant('null', variant, $translator)" />
                    </PronounsIndexLink>
                </template>
                <NormativeBadge />
            </p>
            <p class="small my-1">
                <Icon v="info-circle" />
                <T>pronouns.null.description</T>
            </p>
            <SimplePronounList v-if="examples" :pronouns="config.pronouns.null.examples ?? []" class="mb-3" />
            <PronounsNullGenerator />
        </li>
        <li v-if="config.pronouns.emoji !== false" id="emoji" class="list-group-item">
            <p class="h5">
                <Spelling :text="config.pronouns.emoji.description" />
            </p>
            <div v-if="config.pronouns.emoji.history" class="small my-1">
                <Icon v="info-circle" />
                <LinkedText :text="config.pronouns.emoji.history" />
            </div>
            <SimplePronounList v-if="examples" :pronouns="config.pronouns.emoji.examples" class="mb-3" />
            <PronounsEmojiGenerator />
        </li>
        <li v-if="config.pronouns.mirror" id="mirror" class="list-group-item">
            <p class="h5">
                <PronounsIndexLink :path="config.pronouns.mirror.route">
                    <LinkedText :text="config.pronouns.mirror.name" />
                </PronounsIndexLink>
            </p>
            <p v-if="config.pronouns.mirror.description" class="small my-1">
                <Icon v="info-circle" />
                <LinkedText :text="config.pronouns.mirror.description" />
            </p>
        </li>
        <li v-if="config.pronouns.any" class="list-group-item">
            <p class="h5">
                <PronounsIndexLink :path="config.pronouns.any">
                    <T>pronouns.any.header</T>
                </PronounsIndexLink>
            </p>
            <p class="small my-1">
                <Icon v="info-circle" />
                <T>pronouns.any.description</T>
            </p>
            <SimplePronounList :pronouns="anyPronouns" />
        </li>
        <li v-if="config.pronouns.ask" class="list-group-item">
            <p class="h5">
                <template v-for="(variant, i) in config.pronouns.ask.routes" :key="variant">
                    {{ i === 0 ? '' : ' / ' }}
                    <PronounsIndexLink :path="variant">
                        <Spelling :text="headerForVariant('ask', variant, $translator)" />
                    </PronounsIndexLink>
                </template>
            </p>
            <p class="small my-1">
                <Icon v="info-circle" />
                <T>pronouns.ask.description</T>
            </p>
        </li>
    </ul>
</template>