fix: defer loading text and server links until hydration (#926)

This commit is contained in:
Daniel Roe 2023-01-11 14:50:47 +00:00 committed by GitHub
parent c92fd7939e
commit f04d7ac067
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 25 additions and 23 deletions

View file

@ -43,7 +43,7 @@ useCommands(() => command
exact-active-class="children:(text-secondary !border-primary !op100 !text-base)" exact-active-class="children:(text-secondary !border-primary !op100 !text-base)"
@click="!preventScrollTop && $scrollToTop()" @click="!preventScrollTop && $scrollToTop()"
> >
<span ws-nowrap mxa sm:px2 sm:py3 xl:pb4 xl:pt5 py2 text-center border-b-3 text-secondary-light hover:text-secondary border-transparent>{{ option.display }}</span> <span ws-nowrap mxa sm:px2 sm:py3 xl:pb4 xl:pt5 py2 text-center border-b-3 text-secondary-light hover:text-secondary border-transparent>{{ option.display || '&nbsp;' }}</span>
</NuxtLink> </NuxtLink>
<div v-else flex flex-auto sm:px6 px2 xl:pb4 xl:pt5> <div v-else flex flex-auto sm:px6 px2 xl:pb4 xl:pt5>
<span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span> <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span>

View file

@ -29,9 +29,9 @@ const { notifications } = useNotifications()
<NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" /> <NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" />
<div shrink hidden sm:block mt-4 /> <div shrink hidden sm:block mt-4 />
<NavSideItem :text="$t('nav.explore')" :to="`/${currentServer}/explore`" icon="i-ri:hashtag" :command="command" /> <NavSideItem :text="$t('nav.explore')" :to="isMastoInitialised ? `/${currentServer}/explore` : '/explore'" icon="i-ri:hashtag" :command="command" />
<NavSideItem :text="$t('nav.local')" :to="`/${currentServer}/public/local`" icon="i-ri:group-2-line " :command="command" /> <NavSideItem :text="$t('nav.local')" :to="isMastoInitialised ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" />
<NavSideItem :text="$t('nav.federated')" :to="`/${currentServer}/public`" icon="i-ri:earth-line" :command="command" /> <NavSideItem :text="$t('nav.federated')" :to="isMastoInitialised ? `/${currentServer}/public` : '/public'" icon="i-ri:earth-line" :command="command" />
<div shrink hidden sm:block mt-4 /> <div shrink hidden sm:block mt-4 />
<NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" /> <NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" />

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>{{ text }}</span> <span block sm:hidden xl:block>{{ isHydrated ? text : '&nbsp;' }}</span>
</slot> </slot>
</div> </div>
</CommonTooltip> </CommonTooltip>

View file

@ -66,7 +66,7 @@ const activate = () => {
bg-transparent bg-transparent
outline="focus:none" outline="focus:none"
pe-4 pe-4
:placeholder="t('nav.search')" :placeholder="isHydrated ? t('nav.search') : ''"
pb="1px" pb="1px"
placeholder-text-secondary placeholder-text-secondary
@keydown.down.prevent="shift(1)" @keydown.down.prevent="shift(1)"

View file

@ -112,8 +112,9 @@ export default defineNuxtConfig({
}, },
nitro: { nitro: {
prerender: { prerender: {
crawlLinks: false, crawlLinks: true,
routes: ['/'], routes: ['/'],
ignore: ['/settings'],
}, },
}, },
app: { app: {

View file

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

View file

@ -8,7 +8,7 @@ const paginator = useMasto().v1.trends.listStatuses()
const hideNewsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS, false) const hideNewsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS, false)
useHeadFixed({ useHeadFixed({
title: () => `${t('tab.posts')} | ${t('nav.explore')}`, title: () => isHydrated.value ? `${t('tab.posts')} | ${t('nav.explore')}` : '',
}) })
</script> </script>

View file

@ -8,7 +8,7 @@ const paginator = useMasto().v1.trends.listLinks()
const hideNewsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS, false) const hideNewsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS, false)
useHeadFixed({ useHeadFixed({
title: () => `${t('tab.news')} | ${t('nav.explore')}`, title: () => isHydrated.value ? `${t('tab.news')} | ${t('nav.explore')}` : '',
}) })
</script> </script>

View file

@ -11,7 +11,7 @@ const paginator = masto.v1.trends.listTags({
const hideTagsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS, false) const hideTagsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS, false)
useHeadFixed({ useHeadFixed({
title: () => `${t('tab.hashtags')} | ${t('nav.explore')}`, title: () => isHydrated.value ? `${t('tab.hashtags')} | ${t('nav.explore')}` : '',
}) })
</script> </script>

View file

@ -5,7 +5,7 @@ const { t } = useI18n()
const paginator = useMasto().v2.suggestions.list({ limit: 20 }) const paginator = useMasto().v2.suggestions.list({ limit: 20 })
useHeadFixed({ useHeadFixed({
title: () => `${t('tab.for_you')} | ${t('nav.explore')}`, title: () => isHydrated.value ? `${t('tab.for_you')} | ${t('nav.explore')}` : '',
}) })
</script> </script>

View file

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

View file

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
const { t } = useI18n() const { t } = useI18n()
useHeadFixed({ useHeadFixed({
title: () => `${t('tab.notifications_all')} | ${t('nav.notifications')}`, title: () => isHydrated.value ? `${t('tab.notifications_all')} | ${t('nav.notifications')}` : '',
}) })
</script> </script>

View file

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
const { t } = useI18n() const { t } = useI18n()
useHeadFixed({ useHeadFixed({
title: () => `${t('tab.notifications_mention')} | ${t('nav.notifications')}`, title: () => isHydrated.value ? `${t('tab.notifications_mention')} | ${t('nav.notifications')}` : '',
}) })
</script> </script>

View file

@ -1 +1,2 @@
/docs/* https://docs.elk.zone/:splat 200 /docs/* https://docs.elk.zone/:splat 200
/settings/* /index.html 200