From a12d3d09b1ef82c75cd3723f369ce5e56f30fbbc Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Wed, 11 Jan 2023 23:08:31 +0000 Subject: [PATCH] feat: support page titles in opengraph data --- composables/vue.ts | 14 ++++++++++++++ pages/[[server]]/explore/index.vue | 2 +- pages/[[server]]/explore/links.vue | 2 +- pages/[[server]]/explore/tags.vue | 2 +- pages/[[server]]/explore/users.vue | 2 +- pages/notifications/index.vue | 2 +- pages/notifications/mention.vue | 2 +- 7 files changed, 20 insertions(+), 6 deletions(-) diff --git a/composables/vue.ts b/composables/vue.ts index 1c3224da..3c3a99c2 100644 --- a/composables/vue.ts +++ b/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(input: UseHeadInput, options?: HeadEntryOptions): ActiveHeadEntry> | 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 {} diff --git a/pages/[[server]]/explore/index.vue b/pages/[[server]]/explore/index.vue index 28088b7b..aee8806d 100644 --- a/pages/[[server]]/explore/index.vue +++ b/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')}`, }) diff --git a/pages/[[server]]/explore/links.vue b/pages/[[server]]/explore/links.vue index af8deb96..55f8be76 100644 --- a/pages/[[server]]/explore/links.vue +++ b/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')}`, }) diff --git a/pages/[[server]]/explore/tags.vue b/pages/[[server]]/explore/tags.vue index 6edbb0aa..f69447f5 100644 --- a/pages/[[server]]/explore/tags.vue +++ b/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')}`, }) diff --git a/pages/[[server]]/explore/users.vue b/pages/[[server]]/explore/users.vue index 7fec975d..218d5964 100644 --- a/pages/[[server]]/explore/users.vue +++ b/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')}`, }) diff --git a/pages/notifications/index.vue b/pages/notifications/index.vue index 6baa336c..392f9bad 100644 --- a/pages/notifications/index.vue +++ b/pages/notifications/index.vue @@ -1,7 +1,7 @@ diff --git a/pages/notifications/mention.vue b/pages/notifications/mention.vue index 3c3ea858..110af1b7 100644 --- a/pages/notifications/mention.vue +++ b/pages/notifications/mention.vue @@ -1,7 +1,7 @@