refactor: remove useHeadFixed workaround (#1938)

Co-authored-by: Ayaka Rizumu <464388324@qq.com>
2024-07-05 22:16:49 +01:00 · 2023-04-01 13:14:12 +02:00 · 2023-04-01 13:14:12 +02:00 · ab2881b9a2
parent 60a37e0bf8
commit ab2881b9a2
40 changed files with 39 additions and 65 deletions
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@ -20,7 +20,7 @@ const createdAt = useFormattedDateTime(status.createdAt)

 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => `${getDisplayName(status.account)} ${t('common.in')} ${t('app_name')}: "${removeHTMLTags(status.content) || ''}"`,
 })
 </script>
--- a/composables/setups.ts
+++ b/composables/setups.ts
@ -12,7 +12,7 @@ export function setupPageHeader() {
    return acc
  }, {} as Record<string, Directions>)

-  useHeadFixed({
+  useHead({
    htmlAttrs: {
      lang: () => locale.value,
      dir: () => localeMap[locale.value] ?? 'ltr',
--- a/composables/vue.ts
+++ b/composables/vue.ts
@ -1,7 +1,5 @@
 import type { ComponentInternalInstance } from 'vue'
 import { onActivated, onDeactivated, ref } from 'vue'
-import type { ActiveHeadEntry, HeadEntryOptions, UseHeadInput } from '@vueuse/head'
-import type { SchemaAugmentations } from '@unhead/schema'

 export const isHydrated = ref(false)

@ -36,27 +34,3 @@ export function onReactivated(hook: Function, target?: ComponentInternalInstance
  }, target)
  onDeactivated(() => initial.value = false)
 }
-
-// TODO: Workaround for Nuxt bug: https://github.com/elk-zone/elk/pull/199#issuecomment-1329771961
-export function useHeadFixed<T extends SchemaAugmentations>(input: UseHeadInput<T>, options?: HeadEntryOptions): ActiveHeadEntry<UseHeadInput<T>> | void {
-  const deactivated = useDeactivated()
-  if (input && typeof input === 'object' && !('value' in input)) {
-    const title = 'title' in input ? input.title : undefined
-    if (process.server && title) {
-      input.meta = input.meta || []
-      if (Array.isArray(input.meta)) {
-        input.meta.push(
-          { property: 'og:title', content: (typeof input.title === 'function' ? input.title() : input.title) as string },
-        )
-      }
-    }
-    else if (title) {
-      (input as any).title = () => isHydrated.value ? typeof title === 'function' ? title() : title : ''
-    }
-  }
-  return useHead(() => {
-    if (deactivated.value)
-      return {}
-    return resolveUnref(input)
-  }, options)
-}
--- a/pages/[[server]]/@[account]/index/followers.vue
+++ b/pages/[[server]]/@[account]/index/followers.vue
@ -11,7 +11,7 @@ const paginator = account ? useMastoClient().v1.accounts.listFollowers(account.i
 const isSelf = useSelfAccount(account)

 if (account) {
-  useHeadFixed({
+  useHead({
    title: () => `${t('account.followers')} | ${getDisplayName(account)} (@${account.acct})`,
  })
 }
--- a/pages/[[server]]/@[account]/index/following.vue
+++ b/pages/[[server]]/@[account]/index/following.vue
@ -11,7 +11,7 @@ const paginator = account ? useMastoClient().v1.accounts.listFollowing(account.i
 const isSelf = useSelfAccount(account)

 if (account) {
-  useHeadFixed({
+  useHead({
    title: () => `${t('account.following')} | ${getDisplayName(account)} (@${account.acct})`,
  })
 }
--- a/pages/[[server]]/@[account]/index/index.vue
+++ b/pages/[[server]]/@[account]/index/index.vue
@ -17,7 +17,7 @@ function reorderAndFilter(items: mastodon.v1.Status[]) {
 const paginator = useMastoClient().v1.accounts.listStatuses(account.id, { limit: 30, excludeReplies: true })

 if (account) {
-  useHeadFixed({
+  useHead({
    title: () => `${t('account.posts')} | ${getDisplayName(account)} (@${account.acct})`,
  })
 }
--- a/pages/[[server]]/@[account]/index/media.vue
+++ b/pages/[[server]]/@[account]/index/media.vue
@ -10,7 +10,7 @@ const account = await fetchAccountByHandle(handle)
 const paginator = useMastoClient().v1.accounts.listStatuses(account.id, { onlyMedia: true, excludeReplies: false })

 if (account) {
-  useHeadFixed({
+  useHead({
    title: () => `${t('tab.media')} | ${getDisplayName(account)} (@${account.acct})`,
  })
 }
--- a/pages/[[server]]/@[account]/index/with_replies.vue
+++ b/pages/[[server]]/@[account]/index/with_replies.vue
@ -10,7 +10,7 @@ const account = await fetchAccountByHandle(handle)
 const paginator = useMastoClient().v1.accounts.listStatuses(account.id, { excludeReplies: false })

 if (account) {
-  useHeadFixed({
+  useHead({
    title: () => `${t('tab.posts_with_replies')} | ${getDisplayName(account)} (@${account.acct})`,
  })
 }
--- a/pages/[[server]]/explore/index.vue
+++ b/pages/[[server]]/explore/index.vue
@ -7,7 +7,7 @@ const paginator = useMastoClient().v1.trends.listStatuses()

 const hideNewsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS, false)

-useHeadFixed({
+useHead({
  title: () => `${t('tab.posts')} | ${t('nav.explore')}`,
 })
 </script>
--- a/pages/[[server]]/explore/links.vue
+++ b/pages/[[server]]/explore/links.vue
@ -7,7 +7,7 @@ const paginator = useMastoClient().v1.trends.listLinks()

 const hideNewsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS, false)

-useHeadFixed({
+useHead({
  title: () => `${t('tab.news')} | ${t('nav.explore')}`,
 })
 </script>
--- a/pages/[[server]]/explore/tags.vue
+++ b/pages/[[server]]/explore/tags.vue
@ -10,7 +10,7 @@ const paginator = client.v1.trends.listTags({

 const hideTagsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS, false)

-useHeadFixed({
+useHead({
  title: () => `${t('tab.hashtags')} | ${t('nav.explore')}`,
 })
 </script>
--- a/pages/[[server]]/explore/users.vue
+++ b/pages/[[server]]/explore/users.vue
@ -4,7 +4,7 @@ const { t } = useI18n()
 // limit: 20 is the default configuration of the official client
 const paginator = useMastoClient().v2.suggestions.list({ limit: 20 })

-useHeadFixed({
+useHead({
  title: () => `${t('tab.for_you')} | ${t('nav.explore')}`,
 })
 </script>
--- a/pages/[[server]]/list/[list]/index.vue
+++ b/pages/[[server]]/list/[list]/index.vue
@ -35,7 +35,7 @@ const { client } = $(useMasto())
 const { data: listInfo, refresh } = $(await useAsyncData(() => client.v1.lists.fetch(list), { default: () => shallowRef() }))

 if (listInfo) {
-  useHeadFixed({
+  useHead({
    title: () => `${listInfo.title} | ${route.fullPath.endsWith('/accounts') ? t('tab.accounts') : t('tab.posts')} | ${t('nav.lists')}`,
  })
 }
--- a/pages/[[server]]/lists.vue
+++ b/pages/[[server]]/lists.vue
@ -11,7 +11,7 @@ const client = useMastoClient()

 const paginator = client.v1.lists.list()

-useHeadFixed({
+useHead({
  title: () => t('nav.lists'),
 })

--- a/pages/[[server]]/public/index.vue
+++ b/pages/[[server]]/public/index.vue
@ -3,7 +3,7 @@

 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => t('title.federated_timeline'),
 })
 </script>
--- a/pages/[[server]]/public/local.vue
+++ b/pages/[[server]]/public/local.vue
@ -2,7 +2,7 @@

 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => t('title.local_timeline'),
 })
 </script>
--- a/pages/[[server]]/tags/[tag].vue
+++ b/pages/[[server]]/tags/[tag].vue
@ -13,7 +13,7 @@ const paginator = client.v1.timelines.listHashtag(tagName)
 const stream = useStreaming(client => client.v1.stream.streamTagTimeline(tagName))

 if (tag) {
-  useHeadFixed({
+  useHead({
    title: () => `#${tag.name}`,
  })
 }
--- a/pages/blocks.vue
+++ b/pages/blocks.vue
@ -5,7 +5,7 @@ definePageMeta({

 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => t('nav.blocked_users'),
 })
 </script>
--- a/pages/bookmarks.vue
+++ b/pages/bookmarks.vue
@ -5,7 +5,7 @@ definePageMeta({

 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => t('nav.bookmarks'),
 })
 </script>
--- a/pages/compose.vue
+++ b/pages/compose.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { t } = useI18n()
-useHeadFixed({
+useHead({
  title: () => t('nav.compose'),
 })
 </script>
--- a/pages/conversations.vue
+++ b/pages/conversations.vue
@ -5,7 +5,7 @@ definePageMeta({

 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => t('nav.conversations'),
 })
 </script>
--- a/pages/domain_blocks.vue
+++ b/pages/domain_blocks.vue
@ -5,7 +5,7 @@ definePageMeta({

 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => t('nav.blocked_domains'),
 })
 </script>
--- a/pages/favourites.vue
+++ b/pages/favourites.vue
@ -5,7 +5,7 @@ definePageMeta({

 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => t('nav.favourites'),
 })
 </script>
--- a/pages/home.vue
+++ b/pages/home.vue
@ -12,7 +12,7 @@ if (process.client && route.path === '/signin/callback')
  router.push('/home')

 const { t } = useI18n()
-useHeadFixed({
+useHead({
  title: () => t('nav.home'),
 })
 </script>
--- a/pages/mutes.vue
+++ b/pages/mutes.vue
@ -5,7 +5,7 @@ definePageMeta({

 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => t('nav.muted_users'),
 })
 </script>
--- a/pages/notifications/index.vue
+++ b/pages/notifications/index.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { t } = useI18n()
-useHeadFixed({
+useHead({
  title: () => `${t('tab.notifications_all')} | ${t('nav.notifications')}`,
 })
 </script>
--- a/pages/notifications/mention.vue
+++ b/pages/notifications/mention.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { t } = useI18n()
-useHeadFixed({
+useHead({
  title: () => `${t('tab.notifications_mention')} | ${t('nav.notifications')}`,
 })
 </script>
--- a/pages/pinned.vue
+++ b/pages/pinned.vue
@ -5,7 +5,7 @@ definePageMeta({

 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => t('account.pinned'),
 })
 </script>
--- a/pages/settings.vue
+++ b/pages/settings.vue
@ -5,7 +5,7 @@ definePageMeta({

 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => t('nav.settings'),
 })

--- a/pages/settings/about/index.vue
+++ b/pages/settings/about/index.vue
@ -2,7 +2,7 @@
 const buildInfo = useBuildInfo()
 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => `${t('settings.about.label')} | ${t('nav.settings')}`,
 })

--- a/pages/settings/interface/index.vue
+++ b/pages/settings/interface/index.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => `${t('settings.interface.label')} | ${t('nav.settings')}`,
 })
 </script>
--- a/pages/settings/language/index.vue
+++ b/pages/settings/language/index.vue
@ -5,7 +5,7 @@ const { t, locale } = useI18n()

 const translationStatus: ElkTranslationStatus = await import('~/elk-translation-status.json').then(m => m.default)

-useHeadFixed({
+useHead({
  title: () => `${t('settings.language.label')} | ${t('nav.settings')}`,
 })
 const status = computed(() => {
--- a/pages/settings/notifications/index.vue
+++ b/pages/settings/notifications/index.vue
@ -6,7 +6,7 @@ definePageMeta({
 const { t } = useI18n()
 const pwaEnabled = useAppConfig().pwaEnabled

-useHeadFixed({
+useHead({
  title: () => `${t('settings.notifications.label')} | ${t('nav.settings')}`,
 })
 </script>
--- a/pages/settings/notifications/notifications.vue
+++ b/pages/settings/notifications/notifications.vue
@ -5,7 +5,7 @@ definePageMeta({

 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => `${t('settings.notifications.notifications.label')} | ${t('settings.notifications.label')} | ${t('nav.settings')}`,
 })
 </script>
--- a/pages/settings/notifications/push-notifications.vue
+++ b/pages/settings/notifications/push-notifications.vue
@ -8,7 +8,7 @@ definePageMeta({

 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => `${t('settings.notifications.push_notifications.label')} | ${t('settings.notifications.label')} | ${t('nav.settings')}`,
 })
 </script>
--- a/pages/settings/preferences/index.vue
+++ b/pages/settings/preferences/index.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => `${t('settings.preferences.label')} | ${t('nav.settings')}`,
 })

--- a/pages/settings/profile/appearance.vue
+++ b/pages/settings/profile/appearance.vue
@ -9,7 +9,7 @@ definePageMeta({

 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => `${t('settings.profile.appearance.title')} | ${t('nav.settings')}`,
 })

--- a/pages/settings/profile/featured-tags.vue
+++ b/pages/settings/profile/featured-tags.vue
@ -5,7 +5,7 @@ definePageMeta({

 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => `${t('settings.profile.featured_tags.label')} | ${t('nav.settings')}`,
 })
 </script>
--- a/pages/settings/profile/index.vue
+++ b/pages/settings/profile/index.vue
@ -5,7 +5,7 @@ definePageMeta({

 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => `${t('settings.profile.label')} | ${t('nav.settings')}`,
 })
 </script>
--- a/pages/settings/users/index.vue
+++ b/pages/settings/users/index.vue
@ -5,7 +5,7 @@ import type { UserLogin } from '~/types'

 const { t } = useI18n()

-useHeadFixed({
+useHead({
  title: () => `${t('settings.users.label')} | ${t('nav.settings')}`,
 })