PronounsPage/components/Avoiding.vue

<template>
    <div v-if="config.pronouns.null && config.pronouns.null.ideas && config.pronouns.null.ideas.length">
        <section v-for="idea in config.pronouns.null.ideas">
            <h3>
                {{ idea.header }}
            </h3>
            <p v-if="idea.description">
                {{ idea.description }}
            </p>
            <p v-if="idea.normative">
                <NormativeBadge />
            </p>
            <ul>
                <li v-for="[exampleFrom, exampleTo] in idea.examples">
                    <LinkedText :text="exampleFrom" /> → <strong><LinkedText :text="exampleTo" /></strong>
                </li>
            </ul>
        </section>

        <section v-if="sources && sources[''].length">
            <Literature :sources="sources" />
        </section>
    </div>
</template>

<script>
import { SourceLibrary } from '../src/classes.ts';
import useConfig from '../composables/useConfig.ts';

export default {
    setup() {
        const config = useConfig();

        const { data: sources } = useAsyncData(async () => {
            if (!this.config.pronouns.null.routes) {
                return;
            }
            const key = this.config.pronouns.null.routes[0];
            const sourcesRaw = await $fetch(`/api/sources?pronoun=${key}`);
            return {
                '': new SourceLibrary(this.config, sourcesRaw).getForPronoun(key),
            };
        });

        return {
            config,
            sources,
        };
    },
};
</script>