@duffcloudservices/cms 0.3.17 → 0.5.0

package/src/composables/useSEO.ts

@@ -4,6 +4,10 @@
  * Provides SEO configuration with build-time injection support from .dcs/seo.yaml.
  * Generates meta tags, Open Graph, Twitter Cards, and JSON-LD structured data.
  *
+ * The actual tag resolution lives in the framework-agnostic `../seo/headTags`
+ * module so that the build-time static-HTML emitter (`dcsSeoPlugin`) produces
+ * byte-identical output. This composable is a thin Vue/unhead wrapper over it.
+ *
  * @example
  * ```vue
  * <script setup lang="ts">
@@ -28,13 +32,11 @@ import { useHead } from '@unhead/vue'
 import type {
   SeoConfiguration,
   GlobalSeoConfig,
-  SeoOpenGraphConfig,
-  SeoTwitterConfig,
-  SeoSchemaConfig,
   ResolvedPageSeo,
   UseSeoReturn,
   HeadOverrides,
 } from '../types/seo'
+import { buildHeadTags, resolvePageSeo, generateJsonLd } from '../seo/headTags'
 
 // Declare the global injected by dcsSeoPlugin
 declare const __DCS_SEO__: SeoConfiguration | undefined
@@ -54,199 +56,6 @@ function getBuildTimeSeo(): SeoConfiguration | undefined {
   return undefined
 }
 
-// =============================================================================
-// Meta Tag Generation Utilities
-// =============================================================================
-
-interface HeadInput {
-  title?: string
-  titleTemplate?: string | ((title: string) => string)
-  meta?: Array<{ name?: string; property?: string; content: string }>
-  link?: Array<{ rel: string; href: string; hreflang?: string }>
-  script?: Array<{ type: string; children: string }>
-}
-
-/**
- * Generate Open Graph meta tags from config
- */
-function generateOpenGraphMeta(
-  og: SeoOpenGraphConfig,
-  global: GlobalSeoConfig,
-  pageTitle: string,
-  pageDescription: string,
-  canonical: string
-): Array<{ property: string; content: string }> {
-  const tags: Array<{ property: string; content: string }> = []
-
-  tags.push({ property: 'og:title', content: og.title || pageTitle })
-  tags.push({ property: 'og:description', content: og.description || pageDescription })
-  tags.push({ property: 'og:url', content: og.url || canonical })
-  tags.push({ property: 'og:type', content: og.type || 'website' })
-
-  const image = og.image || global.images?.ogDefault
-  if (image) {
-    tags.push({ property: 'og:image', content: image })
-    if (og.imageAlt || pageTitle) {
-      tags.push({ property: 'og:image:alt', content: og.imageAlt || pageTitle })
-    }
-    if (og.imageWidth) {
-      tags.push({ property: 'og:image:width', content: String(og.imageWidth) })
-    }
-    if (og.imageHeight) {
-      tags.push({ property: 'og:image:height', content: String(og.imageHeight) })
-    }
-  }
-
-  if (global.siteName) {
-    tags.push({ property: 'og:site_name', content: global.siteName })
-  }
-
-  if (global.locale) {
-    tags.push({ property: 'og:locale', content: global.locale })
-  }
-
-  // Article-specific tags
-  if (og.type === 'article') {
-    if (og.publishedTime) {
-      tags.push({ property: 'article:published_time', content: og.publishedTime })
-    }
-    if (og.modifiedTime) {
-      tags.push({ property: 'article:modified_time', content: og.modifiedTime })
-    }
-    if (og.author) {
-      tags.push({ property: 'article:author', content: og.author })
-    }
-    if (og.section) {
-      tags.push({ property: 'article:section', content: og.section })
-    }
-    if (og.tags) {
-      og.tags.forEach((tag) => {
-        tags.push({ property: 'article:tag', content: tag })
-      })
-    }
-  }
-
-  return tags
-}
-
-/**
- * Generate Twitter Card meta tags from config
- */
-function generateTwitterMeta(
-  twitter: SeoTwitterConfig,
-  global: GlobalSeoConfig,
-  pageTitle: string,
-  pageDescription: string
-): Array<{ name: string; content: string }> {
-  const tags: Array<{ name: string; content: string }> = []
-
-  tags.push({ name: 'twitter:card', content: twitter.card || 'summary_large_image' })
-  tags.push({ name: 'twitter:title', content: twitter.title || pageTitle })
-  tags.push({ name: 'twitter:description', content: twitter.description || pageDescription })
-
-  const image = twitter.image || global.images?.twitterDefault
-  if (image) {
-    tags.push({ name: 'twitter:image', content: image })
-    if (twitter.imageAlt || pageTitle) {
-      tags.push({ name: 'twitter:image:alt', content: twitter.imageAlt || pageTitle })
-    }
-  }
-
-  const site = twitter.site || global.social?.twitter
-  if (site) {
-    tags.push({ name: 'twitter:site', content: site.startsWith('@') ? site : `@${site}` })
-  }
-
-  if (twitter.creator) {
-    tags.push({
-      name: 'twitter:creator',
-      content: twitter.creator.startsWith('@') ? twitter.creator : `@${twitter.creator}`,
-    })
-  }
-
-  return tags
-}
-
-/**
- * Generate JSON-LD script content from schemas
- */
-function generateJsonLd(schemas: SeoSchemaConfig[], global: GlobalSeoConfig): object[] {
-  return schemas.map((schema) => {
-    const base: Record<string, unknown> = {
-      '@context': 'https://schema.org',
-      '@type': schema.type,
-    }
-
-    // Merge properties
-    if (schema.properties) {
-      Object.assign(base, schema.properties)
-    }
-
-    // Auto-populate common properties from global config
-    if (schema.type === 'WebSite' && global.siteUrl && !base.url) {
-      base.url = global.siteUrl
-    }
-    if (schema.type === 'WebSite' && global.siteName && !base.name) {
-      base.name = global.siteName
-    }
-
-    return base
-  })
-}
-
-/**
- * Resolve page SEO by merging global defaults with page-specific config
- */
-function resolvePageSeo(
-  pageSlug: string,
-  pagePath: string | undefined,
-  seoConfig: SeoConfiguration | undefined
-): ResolvedPageSeo {
-  const global = seoConfig?.global ?? {}
-  const page = seoConfig?.pages?.[pageSlug] ?? {}
-
-  // Build canonical URL
-  let canonical = page.canonical || ''
-  if (!canonical && global.siteUrl) {
-    const path = pagePath ?? (pageSlug === 'home' ? '/' : `/${pageSlug}`)
-    canonical = `${global.siteUrl.replace(/\/$/, '')}${path}`
-  }
-
-  // Build title
-  let title = page.title || global.defaultTitle || pageSlug
-  if (!page.noTitleTemplate && global.titleTemplate) {
-    title = global.titleTemplate.replace('%s', title)
-  }
-
-  // Merge Open Graph
-  const openGraph: ResolvedPageSeo['openGraph'] = {
-    type: page.openGraph?.type || 'website',
-    title: page.openGraph?.title || page.title || global.defaultTitle || '',
-    description: page.openGraph?.description || page.description || global.defaultDescription || '',
-    ...page.openGraph,
-  }
-
-  // Merge Twitter
-  const twitter: ResolvedPageSeo['twitter'] = {
-    card: page.twitter?.card || 'summary_large_image',
-    ...page.twitter,
-  }
-
-  // Combine schemas (global + page)
-  const schemas = [...(global.schemas ?? []), ...(page.schemas ?? [])]
-
-  return {
-    title,
-    description: page.description || global.defaultDescription || '',
-    canonical,
-    robots: page.robots || global.robots || 'index, follow',
-    openGraph,
-    twitter,
-    schemas,
-    alternates: page.alternates ?? [],
-  }
-}
-
 /**
  * useSEO composable for DCS-managed SEO configuration.
  *
@@ -278,78 +87,31 @@ export function useSEO(pageSlug: string, pagePath?: string): UseSeoReturn {
   }
 
   /**
-   * Apply all meta tags via useHead
+   * Apply all meta tags via useHead.
+   *
+   * Delegates to the shared `buildHeadTags` resolver so the emitted tags match
+   * the build-time static-HTML emitter exactly. Keywords are intentionally not
+   * emitted at runtime (historical behaviour), so `includeKeywords` is omitted.
    */
   function applyHead(overrides?: HeadOverrides): void {
-    const resolved = config.value
-    const global = seoConfig?.global ?? {}
-
-    const title = overrides?.title ?? resolved.title
-    const description = overrides?.description ?? resolved.description
-
-    // Build meta tags
-    const meta: HeadInput['meta'] = []
-
-    // Basic meta
-    meta.push({ name: 'description', content: description })
-    if (resolved.robots) {
-      meta.push({ name: 'robots', content: resolved.robots })
-    }
-
-    // Verification codes
-    if (global.verification?.google) {
-      meta.push({ name: 'google-site-verification', content: global.verification.google })
-    }
-    if (global.verification?.bing) {
-      meta.push({ name: 'msvalidate.01', content: global.verification.bing })
-    }
-
-    // Open Graph
-    const ogMeta = generateOpenGraphMeta(
-      resolved.openGraph,
-      global,
-      title,
-      description,
-      resolved.canonical
-    )
-    meta.push(...ogMeta.map((t) => ({ property: t.property, content: t.content })))
-
-    // Twitter
-    const twitterMeta = generateTwitterMeta(resolved.twitter, global, title, description)
-    meta.push(...twitterMeta.map((t) => ({ name: t.name, content: t.content })))
-
-    // Additional overrides
-    if (overrides?.meta) {
-      meta.push(...overrides.meta)
-    }
-
-    // Build links
-    const link: HeadInput['link'] = []
-
-    // Canonical
-    if (resolved.canonical) {
-      link.push({ rel: 'canonical', href: resolved.canonical })
-    }
-
-    // Alternate languages
-    resolved.alternates.forEach((alt) => {
-      link.push({ rel: 'alternate', href: alt.href, hreflang: alt.hreflang })
+    const { title, meta, link, script } = buildHeadTags(pageSlug, pagePath, seoConfig, {
+      title: overrides?.title,
+      description: overrides?.description,
+      keywords: overrides?.keywords,
+      schemas: overrides?.schemas,
+      meta: overrides?.meta,
     })
 
-    // Build scripts (JSON-LD)
-    const schemas = overrides?.schemas ?? getSchema()
-    const script: HeadInput['script'] = schemas.map((schema) => ({
-      type: 'application/ld+json',
-      children: JSON.stringify(schema),
-    }))
-
-    // Apply via useHead
+    // Apply via useHead. The shared resolver returns framework-agnostic tag
+    // shapes (HeadMetaTag/HeadLinkTag/HeadScriptTag); unhead's input types are
+    // structurally compatible but add an open-ended `data-*` index signature,
+    // so we hand them over via useHead's Head input type. Runtime is identical.
     useHead({
       title,
       meta,
       link,
       script,
-    })
+    } as unknown as Parameters<typeof useHead>[0])
   }
 
   return {