TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-10 16:05:32 -04:00
Code Issues Packages Projects Releases Wiki Activity

(refactor) accept pronoun usages by string in <PronounGroup>

Browse Source
This commit is contained in:
Valentyne Stigloher 2024-10-16 11:06:46 +02:00
parent 517f01c22e
commit 75b18759d6
5 changed files with 38 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/PronounGroup.vue
View File

@ -1,32 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import type { PronounGroup, Pronoun } from '~/src/classes.ts'; import type { PronounGroup, Pronoun } from '~/src/classes.ts';
const props = defineProps<{ defineProps<{
pronounGroup: { group: PronounGroup, groupPronouns: Record<string, Pronoun> | Pronoun[] }; pronounGroup?: PronounGroup;
pronouns: Record<string, Pronoun> | Pronoun[] | string[];
}>(); }>();
const pronouns = computed(() => {
if (Array.isArray(props.pronounGroup.groupPronouns)) {
return props.pronounGroup.groupPronouns;
}
return Object.values(props.pronounGroup.groupPronouns);
});
</script> </script>
<template> <template>
<section v-if="pronounGroup && pronounGroup.group.name"> <section>
<ul class="list-group mt-4"> <ul class="list-group mt-4">
<li class="list-group-item"> <li class="list-group-item">
<p class="h5"> <p v-if="pronounGroup?.name" class="h5">
<Spelling :text="pronounGroup.group.name" /> <Spelling :text="pronounGroup.name" />
</p> </p>
<p v-if="pronounGroup.group.description" class="small my-1"> <p v-if="pronounGroup?.description" class="small my-1">
<Icon v="info-circle" /> <Icon v="info-circle" />
<LinkedText :text="pronounGroup.group.description" /> <LinkedText :text="pronounGroup.description" />
</p> </p>
<ul class="list-unstyled"> <SimplePronounList :pronouns="Array.isArray(pronouns) ? pronouns : Object.values(pronouns)" />
<SimplePronounList :pronouns="pronouns" />
</ul>
</li> </li>
<nuxt-link :to="{ name: 'pronouns' }" class="list-group-item list-group-item-action text-center"> <nuxt-link :to="{ name: 'pronouns' }" class="list-group-item list-group-item-action text-center">
<Icon v="ellipsis-h-alt" /> <Icon v="ellipsis-h-alt" />

35
components/SimplePronounList.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { buildPronoun } from '~/src/buildPronoun.ts'; import { buildPronounUsage } from '~/src/buildPronoun.ts';
import type { Pronoun } from '~/src/classes.ts'; import type { Pronoun } from '~/src/classes.ts';
import { pronouns as pronounsData } from '~/src/data.ts'; import { pronounLibrary } from '~/src/data.ts';
const props = defineProps<{ const props = defineProps<{
pronouns: Pronoun[] | string[]; pronouns: Pronoun[] | string[];
@ -10,25 +10,32 @@ const props = defineProps<{
const { $translator: translator } = useNuxtApp(); const { $translator: translator } = useNuxtApp();
const config = useConfig(); const config = useConfig();
const glue = ` ${translator.translate('pronouns.or')} `;
const visiblePronouns = computed(() => { const visiblePronouns = computed(() => {
return props.pronouns return props.pronouns
.map((pronoun): Pronoun | undefined => { .map((pronoun) => {
if (typeof pronoun === 'string') { if (typeof pronoun === 'string') {
const parsed = buildPronoun(pronounsData, pronoun, config, translator); const usage = buildPronounUsage(pronounLibrary, pronoun, config, translator);
if (parsed) { if (usage) {
parsed.canonicalName = pronoun; return {
parsed.description = ''; path: pronoun,
return parsed; short: usage.short.options.join(usage.short.glue),
};
} }
} else if (!pronoun.hidden) { } else if (!pronoun.hidden) {
return pronoun; return {
path: pronoun.canonicalName,
short: pronoun.name(glue),
description: pronoun.description,
normative: pronoun.normative,
smallForm: pronoun.smallForm ? pronoun.morphemes[pronoun.smallForm] : undefined,
};
} }
}) })
.filter((entry) => entry !== undefined); .filter((entry) => entry !== undefined);
}); });
const glue = ` ${translator.translate('pronouns.or')} `;
const addSlash = (link: string): string => { const addSlash = (link: string): string => {
return link + (['*', '\''].includes(link.substring(link.length - 1)) ? '/' : ''); return link + (['*', '\''].includes(link.substring(link.length - 1)) ? '/' : '');
}; };
@ -36,9 +43,9 @@ const addSlash = (link: string): string => {
<template> <template>
<ul> <ul>
<li v-for="pronoun in visiblePronouns" :key="pronoun.canonicalName"> <li v-for="pronoun in visiblePronouns" :key="pronoun.path">
<nuxt-link :to="addSlash(`${config.pronouns.prefix || ''}/${pronoun.canonicalName}`)"> <nuxt-link :to="addSlash(`${config.pronouns.prefix || ''}/${pronoun.path}`)">
<strong><Spelling :text="pronoun.name(glue)" /></strong><small v-if="pronoun.smallForm">/<Spelling :text="pronoun.morphemes[pronoun.smallForm] ?? undefined" /></small> <strong><Spelling :text="pronoun.short" /></strong><small v-if="pronoun.smallForm">/<Spelling :text="pronoun.smallForm" /></small>
<template v-if="pronoun.description"> <template v-if="pronoun.description">
– –
<small><Spelling :text="pronoun.description as string" /></small> <small><Spelling :text="pronoun.description as string" /></small>

3
pages/pronouns/any.vue
View File

@ -127,7 +127,8 @@ const pronounsChoice = computed(() => {
<PronounGroup <PronounGroup
v-for="pronounGroup in pronounGroups" v-for="pronounGroup in pronounGroups"
:key="pronounGroup.group.name" :key="pronounGroup.group.name"
:pronoun-group="pronounGroup" :pronoun-group="pronounGroup.group"
:pronouns="pronounGroup.groupPronouns"
/> />
<AdPlaceholder :phkey="['content-0', 'content-mobile-0']" /> <AdPlaceholder :phkey="['content-0', 'content-mobile-0']" />

17
pages/pronouns/ask.vue
View File

@ -57,22 +57,7 @@ useSimpleHead({
<AdPlaceholder :phkey="['content-0', 'content-mobile-0']" /> <AdPlaceholder :phkey="['content-0', 'content-mobile-0']" />
<section> <PronounGroup :pronouns="config.pronouns.ask.routes" />
<ul class="list-group mt-4">
<li class="list-group-item">
<ul>
<li v-for="otherVariant in config.pronouns.ask.routes" :key="otherVariant">
<nuxt-link :to="{ name: `pronouns-${otherVariant}` }">
<strong><T>pronouns.ask.short.{{ otherVariant }}</T></strong>
</nuxt-link>
</li>
</ul>
</li>
<nuxt-link :to="{ name: 'pronouns' }" class="list-group-item list-group-item-action text-center">
<Icon v="ellipsis-h-alt" />
</nuxt-link>
</ul>
</section>
<section> <section>
<Share :title="`${$t('pronouns.intro')}: ${$t('pronouns.ask.description')}`" /> <Share :title="`${$t('pronouns.intro')}: ${$t('pronouns.ask.description')}`" />

6
pages/pronouns/pronoun.vue
View File

@ -97,7 +97,11 @@
<AdPlaceholder :phkey="['content-1', 'content-mobile-1']" /> <AdPlaceholder :phkey="['content-1', 'content-mobile-1']" />
<PronounGroup :pronoun-group="pronounGroup" /> <PronounGroup
v-if="pronounGroup"
:pronoun-group="pronounGroup.group"
:pronouns="pronounGroup.groupPronouns"
/>
<Avoiding v-if="isNull" /> <Avoiding v-if="isNull" />