zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat: display i18n text on SSR

zio/stable
三咲智子 Kevin Deng 2023-01-13 01:58:05 +08:00
parent 9a41b9b7d7
commit cafc995dde
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
4 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/nav/NavSideItem.vue
View File

@ -66,7 +66,7 @@ const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly &
<div :class="icon" text-xl /> <div :class="icon" text-xl />
</slot> </slot>
<slot> <slot>
<span block sm:hidden xl:block>{{ isHydrated ? text : '&nbsp;' }}</span> <span block sm:hidden xl:block>{{ text }}</span>
</slot> </slot>
</div> </div>
</CommonTooltip> </CommonTooltip>

7
components/search/SearchWidget.vue
View File

@ -3,7 +3,6 @@ const query = ref('')
const { accounts, hashtags, loading, statuses } = useSearch(query) const { accounts, hashtags, loading, statuses } = useSearch(query)
const index = ref(0) const index = ref(0)
const { t } = useI18n()
const el = ref<HTMLElement>() const el = ref<HTMLElement>()
const router = useRouter() const router = useRouter()
const { focused } = useFocusWithin(el) const { focused } = useFocusWithin(el)
@ -66,7 +65,7 @@ const activate = () => {
bg-transparent bg-transparent
outline="focus:none" outline="focus:none"
pe-4 pe-4
:placeholder="isHydrated ? t('nav.search') : ''" :placeholder="$t('nav.search')"
pb="1px" pb="1px"
placeholder-text-secondary placeholder-text-secondary
@keydown.down.prevent="shift(1)" @keydown.down.prevent="shift(1)"
@ -78,7 +77,7 @@ const activate = () => {
<div left-0 top-12 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none> <div left-0 top-12 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
<div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2> <div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2>
<span v-if="query.trim().length === 0" block text-center text-sm text-secondary> <span v-if="query.trim().length === 0" block text-center text-sm text-secondary>
{{ t('search.search_desc') }} {{ $t('search.search_desc') }}
</span> </span>
<template v-else-if="!loading"> <template v-else-if="!loading">
<template v-if="results.length > 0"> <template v-if="results.length > 0">
@ -90,7 +89,7 @@ const activate = () => {
/> />
</template> </template>
<span v-else block text-center text-sm text-secondary> <span v-else block text-center text-sm text-secondary>
{{ t('search.search_empty') }} {{ $t('search.search_empty') }}
</span> </span>
</template> </template>
<div v-else> <div v-else>

8
pages/[[server]]/explore.vue
View File

@ -4,20 +4,20 @@ const { t } = useI18n()
const tabs = $computed(() => [ const tabs = $computed(() => [
{ {
to: isHydrated.value ? `/${currentServer.value}/explore` : '/explore', to: isHydrated.value ? `/${currentServer.value}/explore` : '/explore',
display: isHydrated.value ? t('tab.posts') : '', display: t('tab.posts'),
}, },
{ {
to: isHydrated.value ? `/${currentServer.value}/explore/tags` : '/explore/tags', to: isHydrated.value ? `/${currentServer.value}/explore/tags` : '/explore/tags',
display: isHydrated.value ? t('tab.hashtags') : '', display: t('tab.hashtags'),
}, },
{ {
to: isHydrated.value ? `/${currentServer.value}/explore/links` : '/explore/links', to: isHydrated.value ? `/${currentServer.value}/explore/links` : '/explore/links',
display: isHydrated.value ? t('tab.news') : '', display: t('tab.news'),
}, },
// This section can only be accessed after logging in // This section can only be accessed after logging in
{ {
to: isHydrated.value ? `/${currentServer.value}/explore/users` : '/explore/users', to: isHydrated.value ? `/${currentServer.value}/explore/users` : '/explore/users',
display: isHydrated.value ? t('tab.for_you') : '', display: t('tab.for_you'),
disabled: !isMastoInitialised.value || !currentUser.value, disabled: !isMastoInitialised.value || !currentUser.value,
}, },
] as const) ] as const)

4
pages/notifications.vue
View File

@ -10,12 +10,12 @@ const tabs = $computed(() => [
{ {
name: 'all', name: 'all',
to: '/notifications', to: '/notifications',
display: isHydrated.value ? t('tab.notifications_all') : '', display: t('tab.notifications_all'),
}, },
{ {
name: 'mention', name: 'mention',
to: '/notifications/mention', to: '/notifications/mention',
display: isHydrated.value ? t('tab.notifications_mention') : '', display: t('tab.notifications_mention'),
}, },
] as const) ] as const)
</script> </script>