diff --git a/components/OgImage/TeamMember.satori.vue b/components/OgImage/TeamMember.satori.vue new file mode 100644 index 0000000..3d3ceb0 --- /dev/null +++ b/components/OgImage/TeamMember.satori.vue @@ -0,0 +1,83 @@ + + + diff --git a/components/features/blog/page/FeaturedTeamMembers.vue b/components/features/blog/page/FeaturedTeamMembers.vue index 866163e..6d97b88 100644 --- a/components/features/blog/page/FeaturedTeamMembers.vue +++ b/components/features/blog/page/FeaturedTeamMembers.vue @@ -2,6 +2,7 @@ import { useI18n } from 'vue-i18n' import { NuxtLink } from '#components' import { teamAvatarUrl } from '~/utils/teamAvatar' +import { toRoleString } from '~/utils/teamRoles' const props = defineProps<{ slugs: string[] }>() @@ -46,7 +47,7 @@ const members = computed(() => props.slugs /> {{ m.name }} - {{ m.role }} + {{ toRoleString(m.role) }} diff --git a/components/features/home/team/TeamMemberCard.vue b/components/features/home/team/TeamMemberCard.vue index f612af9..cbb432e 100644 --- a/components/features/home/team/TeamMemberCard.vue +++ b/components/features/home/team/TeamMemberCard.vue @@ -3,11 +3,13 @@ import { useI18n } from 'vue-i18n' import { NuxtLink } from '#components' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons' +import UiChip from '~/components/base/Chip.vue' import { teamAvatarUrl } from '~/utils/teamAvatar' +import { toRoleList, toRoleString } from '~/utils/teamRoles' type Props = { name: string - role: string + role?: string | string[] slogan?: string mcName?: string slug?: string @@ -16,6 +18,7 @@ type Props = { } const props = withDefaults(defineProps(), { + role: undefined, slogan: undefined, mcName: undefined, slug: undefined, @@ -35,7 +38,9 @@ const avatarSrc = computed(() => teamAvatarUrl({ avatarUrl: props.avatarUrl }, 128)) -const ariaLabel = computed(() => t('team.card_aria', { name: props.name, role: props.role })) +const roleChips = computed(() => toRoleList(props.role)) +const roleAriaText = computed(() => toRoleString(props.role)) +const ariaLabel = computed(() => t('team.card_aria', { name: props.name, role: roleAriaText.value }))