mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-09-24 05:05:20 -04:00
(refactor) extract <PronounsIndex>
This commit is contained in:
Valentyne Stigloher
parent
4580f09956
commit
75c6cdc2b9
119
components/pronouns/PronounsIndex.vue
Normal file
119
components/pronouns/PronounsIndex.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<script setup lang="ts">
|
||||
import { headerForVariant } from '~/src/buildPronoun.ts';
|
||||
import { pronounLibrary } from '~/src/data.ts';
|
||||
|
||||
const config = useConfig();
|
||||
</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>
|
||||
<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 :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 ? '' : ' / ' }}
|
||||
<nuxt-link :to="{ name: `pronouns-${variant}` }">
|
||||
<Spelling :text="headerForVariant('null', variant, $translator)" />
|
||||
</nuxt-link>
|
||||
</template>
|
||||
<NormativeBadge />
|
||||
</p>
|
||||
<p class="small my-1">
|
||||
<Icon v="info-circle" />
|
||||
<T>pronouns.null.description</T>
|
||||
</p>
|
||||
<SimplePronounList :pronouns="config.pronouns.null.examples ?? []" class="mb-3" />
|
||||
<PronounsNullGenerator />
|
||||
</li>
|
||||
<li v-if="config.pronouns.emoji !== false" 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 :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">
|
||||
<nuxt-link :to="{ name: 'pronouns-mirror' }">
|
||||
<LinkedText :text="config.pronouns.mirror.name" />
|
||||
</nuxt-link>
|
||||
</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">
|
||||
<nuxt-link :to="{ name: 'pronouns-any' }">
|
||||
<T>pronouns.any.header</T>
|
||||
</nuxt-link>
|
||||
</p>
|
||||
<p class="small my-1">
|
||||
<Icon v="info-circle" />
|
||||
<T>pronouns.any.description</T>
|
||||
</p>
|
||||
<ul v-if="Object.keys(pronounLibrary.byKey()).length" class="small">
|
||||
<li>
|
||||
<nuxt-link :to="{ name: 'pronouns-any' }">
|
||||
<T>pronouns.any.short</T>
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li v-for="(merged, key) in pronounLibrary.byKey()" :key="key">
|
||||
<nuxt-link :to="{ name: 'pronouns-any-group', params: { group: key } }">
|
||||
<Spelling :text="merged.short($translator)" />
|
||||
</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
</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 ? '' : ' / ' }}
|
||||
<nuxt-link :to="{ name: `pronouns-${variant}` }">
|
||||
<Spelling :text="headerForVariant('ask', variant, $translator)" />
|
||||
</nuxt-link>
|
||||
</template>
|
||||
</p>
|
||||
<p class="small my-1">
|
||||
<Icon v="info-circle" />
|
||||
<T>pronouns.ask.description</T>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
@ -1,3 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import Suggested from '~/data/pronouns/Suggested.vue';
|
||||
import useConfig from '~/composables/useConfig.ts';
|
||||
|
||||
definePageMeta({
|
||||
translatedPaths: (config) => translatedPathByConfigModule(config.pronouns),
|
||||
});
|
||||
|
||||
const config = useConfig();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page v-if="config.pronouns.enabled">
|
||||
<section>
|
||||
@ -21,116 +32,7 @@
|
||||
|
||||
<AdPlaceholder :phkey="['content-0', 'content-mobile-0']" />
|
||||
|
||||
<ul class="list-group mt-4">
|
||||
<template v-for="[group, groupPronouns] in pronounLibrary.split()">
|
||||
<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>
|
||||
<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 :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 ? '' : ' / ' }}
|
||||
<nuxt-link :to="{ name: `pronouns-${variant}` }">
|
||||
<Spelling :text="headerForVariant('null', variant, $translator)" />
|
||||
</nuxt-link>
|
||||
</template>
|
||||
<NormativeBadge />
|
||||
</p>
|
||||
<p class="small my-1">
|
||||
<Icon v="info-circle" />
|
||||
<T>pronouns.null.description</T>
|
||||
</p>
|
||||
<SimplePronounList :pronouns="config.pronouns.null.examples ?? []" class="mb-3" />
|
||||
<PronounsNullGenerator />
|
||||
</li>
|
||||
<li v-if="config.pronouns.emoji !== false" 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 :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">
|
||||
<nuxt-link :to="{ name: 'pronouns-mirror' }">
|
||||
<LinkedText :text="config.pronouns.mirror.name" />
|
||||
</nuxt-link>
|
||||
</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">
|
||||
<nuxt-link :to="{ name: 'pronouns-any' }">
|
||||
<T>pronouns.any.header</T>
|
||||
</nuxt-link>
|
||||
</p>
|
||||
<p class="small my-1">
|
||||
<Icon v="info-circle" />
|
||||
<T>pronouns.any.description</T>
|
||||
</p>
|
||||
<ul v-if="Object.keys(pronounLibrary.byKey()).length" class="small">
|
||||
<li>
|
||||
<nuxt-link :to="{ name: 'pronouns-any' }">
|
||||
<T>pronouns.any.short</T>
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li v-for="(merged, key) in pronounLibrary.byKey()" :key="key">
|
||||
<nuxt-link :to="{ name: 'pronouns-any-group', params: { group: key } }">
|
||||
<Spelling :text="merged.short($translator)" />
|
||||
</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
</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 ? '' : ' / ' }}
|
||||
<nuxt-link :to="{ name: `pronouns-${variant}` }">
|
||||
<Spelling :text="headerForVariant('ask', variant, $translator)" />
|
||||
</nuxt-link>
|
||||
</template>
|
||||
</p>
|
||||
<p class="small my-1">
|
||||
<Icon v="info-circle" />
|
||||
<T>pronouns.ask.description</T>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<PronounsIndex />
|
||||
</section>
|
||||
|
||||
<AdPlaceholder :phkey="['content-1', 'content-mobile-1']" />
|
||||
@ -147,41 +49,6 @@
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { pronounLibrary } from '~/src/data.ts';
|
||||
import { headerForVariant } from '~/src/buildPronoun.ts';
|
||||
import { mapState } from 'pinia';
|
||||
import Suggested from '~/data/pronouns/Suggested.vue';
|
||||
import useConfig from '~/composables/useConfig.ts';
|
||||
import { useMainStore } from '~/store/index.ts';
|
||||
|
||||
export default defineComponent({
|
||||
components: { Suggested },
|
||||
setup() {
|
||||
definePageMeta({
|
||||
translatedPaths: (config) => translatedPathByConfigModule(config.pronouns),
|
||||
});
|
||||
|
||||
const config = useConfig();
|
||||
|
||||
return {
|
||||
config,
|
||||
|
||||
pronounLibrary,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useMainStore, [
|
||||
'user',
|
||||
]),
|
||||
},
|
||||
methods: {
|
||||
headerForVariant,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../assets/variables";
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user