diff --git a/apps/vdn-static/src/composables/useI18nMeta.ts b/apps/vdn-static/src/composables/useI18nMeta.ts index c63dd30..6e305ee 100644 --- a/apps/vdn-static/src/composables/useI18nMeta.ts +++ b/apps/vdn-static/src/composables/useI18nMeta.ts @@ -1,6 +1,6 @@ import { computed, type ComputedRef, type Ref, unref, watch } from 'vue' import { useRoute } from 'vue-router' -import { useMeta, type MetaConfig, type LocaleAwareMeta } from './useMeta' +import { useMeta, type MetaConfig, type LocaleAwareMeta, type OpenGraphConfig, type TwitterCardConfig } from './useMeta' import { useLocale, type LocaleId } from '../i18n' import type { RouteMetaValue } from '../types/route-meta.d' @@ -66,8 +66,8 @@ export function useI18nMeta( keywords: resolveMetaValue(configValue.keywords, routeValue), author: resolveMetaValue(configValue.author, routeValue), canonical: resolveMetaValue(configValue.canonical, routeValue), - og: resolveMetaValue(configValue.og, routeValue), - twitter: resolveMetaValue(configValue.twitter, routeValue), + og: resolveI18nOgTwitter(resolveMetaValue(configValue.og, routeValue), currentLocale), + twitter: resolveI18nOgTwitter(resolveMetaValue(configValue.twitter, routeValue), currentLocale), custom: resolveI18nCustomTags(resolveMetaValue(configValue.custom, routeValue), currentLocale), } }) @@ -135,6 +135,28 @@ function resolveI18nContent( return content['en-US'] || Object.values(content)[0] } +/** + * Resolves locale-aware title/description fields in og/twitter config objects. + * After resolution, title/description are plain strings — compatible with MetaConfig. + */ +function resolveI18nOgTwitter( + config: I18nOpenGraphConfig | I18nTwitterCardConfig | undefined, + locale: LocaleId +): OpenGraphConfig | TwitterCardConfig | undefined { + if (!config) return config + const title = config.title + ? typeof config.title === 'object' + ? resolveI18nContent(config.title as LocaleAwareMeta, locale) + : config.title + : config.title + const description = config.description + ? typeof config.description === 'object' + ? resolveI18nContent(config.description as LocaleAwareMeta, locale) + : config.description + : config.description + return { ...config, title, description } as OpenGraphConfig | TwitterCardConfig +} + /** * Resolves custom meta tags with i18n support */ @@ -166,6 +188,18 @@ function resolveI18nCustomTags( })) } +/** OpenGraph config with locale-aware title/description */ +type I18nOpenGraphConfig = Omit & { + title?: string | LocaleAwareMeta + description?: string | LocaleAwareMeta +} + +/** Twitter Card config with locale-aware title/description */ +type I18nTwitterCardConfig = Omit & { + title?: string | LocaleAwareMeta + description?: string | LocaleAwareMeta +} + /** * i18n-aware meta configuration interface */ @@ -180,10 +214,10 @@ export interface I18nMetaConfig { author?: string | ((route: any) => string) /** Canonical URL */ canonical?: string | ((route: any) => string) - /** OpenGraph configuration */ - og?: MetaConfig['og'] - /** Twitter Card configuration */ - twitter?: MetaConfig['twitter'] + /** OpenGraph configuration (locale-aware title/description) */ + og?: I18nOpenGraphConfig | ((route: any) => I18nOpenGraphConfig) + /** Twitter Card configuration (locale-aware title/description) */ + twitter?: I18nTwitterCardConfig | ((route: any) => I18nTwitterCardConfig) /** Custom meta tags */ custom?: MetaConfig['custom'] /** Hreflang configuration for international SEO */ diff --git a/apps/vdn-static/src/config/meta-examples.ts b/apps/vdn-static/src/config/meta-examples.ts index 713fd4d..9ccd319 100644 --- a/apps/vdn-static/src/config/meta-examples.ts +++ b/apps/vdn-static/src/config/meta-examples.ts @@ -5,7 +5,8 @@ * in the Viossa application. */ -import type { MetaConfig, I18nMetaConfig } from '../composables/useI18nMeta' +import type { MetaConfig } from '../composables/useMeta' +import type { I18nMetaConfig } from '../composables/useI18nMeta' import { createRouteMeta } from '../composables/useMeta' /**