feat: support page titles in opengraph data

composables/vue.ts

@@ -37,6 +37,20 @@ export function onReactivated(hook: Function, target?: ComponentInternalInstance
 // TODO: Workaround for Nuxt bug: https://github.com/elk-zone/elk/pull/199#issuecomment-1329771961
 export function useHeadFixed<T extends HeadAugmentations>(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 {}

pages/[[server]]/explore/index.vue

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

pages/[[server]]/explore/links.vue

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

pages/[[server]]/explore/tags.vue

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

pages/[[server]]/explore/users.vue

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

pages/notifications/index.vue

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

pages/notifications/mention.vue

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