@duffcloudservices/cms 0.3.16 → 0.4.0

package/src/components/ManagedImage.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { useResponsiveImage } from '../composables/useResponsiveImage'
+import { useTextContent } from '../composables/useTextContent'
+import type { ImageContext } from '@duffcloudservices/cms-core'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<{
+  pageSlug: string
+  imageKey: string
+  fallbackSrc: string
+  altKey?: string
+  fallbackAlt?: string
+  context?: ImageContext
+  sizes?: string
+  original?: boolean
+}>(), {
+  altKey: '',
+  fallbackAlt: '',
+  context: 'content',
+  sizes: undefined,
+  original: false,
+})
+
+const attrs = useAttrs()
+const { t } = useTextContent({
+  pageSlug: props.pageSlug,
+  defaults: {
+    [props.imageKey]: props.fallbackSrc,
+    ...(props.altKey ? { [props.altKey]: props.fallbackAlt } : {}),
+  },
+})
+
+const imageSrc = computed(() => t(props.imageKey, props.fallbackSrc))
+const imageAlt = computed(() => (props.altKey ? t(props.altKey, props.fallbackAlt) : props.fallbackAlt))
+const image = useResponsiveImage({
+  src: imageSrc,
+  alt: imageAlt,
+  context: () => props.context,
+  sizes: () => props.sizes,
+  original: () => props.original,
+})
+
+const imgAttrs = computed(() => ({
+  ...image.imgProps,
+  ...attrs,
+  'data-dcs-image-key': props.imageKey,
+  'data-dcs-image-url': imageSrc.value,
+  'data-dcs-image-alt': imageAlt.value,
+}))
+</script>
+
+<template>
+  <picture v-if="image.hasVariants && !original">
+    <source
+      v-for="source in image.sources"
+      :key="source.type"
+      :srcset="source.srcset"
+      :type="source.type"
+      :sizes="source.sizes"
+    />
+    <img v-bind="imgAttrs" />
+  </picture>
+  <img v-else v-bind="imgAttrs" />
+</template>

package/src/components/PreviewRibbon.vue

@@ -228,15 +228,14 @@ onMounted(async () => {
   }
 
   try {
-    const slug =
-      (import.meta.env as Record<string, string | undefined>).VITE_SITE_SLUG ??
-      ''
-    if (!slug) return
+    // The site is resolved server-side (request Host / DCS_SITE_SLUG); the slug
+    // is no longer encoded in the path. VITE_SITE_SLUG is retained for source
+    // compatibility but is not required here.
     const base =
       (import.meta.env as Record<string, string | undefined>)
         .VITE_API_BASE_URL ?? 'https://portal.duffcloudservices.com'
     const res = await fetch(
-      `${base}/api/v1/sites/${slug}/release-notes/latest`,
+      `${base}/api/v1/release-notes/latest`,
       { headers: { Accept: 'application/json' } },
     )
     if (res.ok) {

package/src/components/ResponsiveImage.vue

@@ -13,9 +13,12 @@
  * />
  * ```
  */
+import { computed, useAttrs } from 'vue'
 import { useResponsiveImage } from '../composables/useResponsiveImage'
 import type { ImageContext } from '@duffcloudservices/cms-core'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps<{
   /** Image source URL (original CDN URL or local path). */
   src: string
@@ -38,6 +41,12 @@ const image = useResponsiveImage({
   sizes: () => props.sizes,
   original: () => props.original,
 })
+
+const attrs = useAttrs()
+const imgAttrs = computed(() => ({
+  ...image.imgProps,
+  ...attrs,
+}))
 </script>
 
 <template>
@@ -49,7 +58,7 @@ const image = useResponsiveImage({
       :type="source.type"
       :sizes="source.sizes"
     />
-    <img v-bind="image.imgProps" :class="props.class" />
+    <img v-bind="imgAttrs" :class="props.class" />
   </picture>
-  <img v-else v-bind="image.imgProps" :class="props.class" />
+  <img v-else v-bind="imgAttrs" :class="props.class" />
 </template>

package/src/composables/useReleaseNotes.ts

@@ -64,6 +64,9 @@ export function useReleaseNotes(
   const { fetchOnMount = true } = options
 
   const apiBaseUrl = getEnvVar('VITE_API_BASE_URL', 'https://portal.duffcloudservices.com')
+  // @deprecated VITE_SITE_SLUG: the site is now resolved server-side from the
+  // request Host or the dedicated Container App's DCS_SITE_SLUG. It is retained
+  // only for cache-key continuity and source compatibility, not for routing.
   const siteSlug = getEnvVar('VITE_SITE_SLUG', '')
 
   const releaseNote = ref<ReleaseNote | null>(null)
@@ -71,12 +74,8 @@ export function useReleaseNotes(
   const error = ref<string | null>(null)
 
   async function fetchReleaseNotes(): Promise<void> {
-    if (!siteSlug) {
-      error.value = 'VITE_SITE_SLUG environment variable not set'
-      return
-    }
-
-    // Check cache
+    // Check cache. The slug is no longer required for routing (server resolves
+    // the site from Host / DCS_SITE_SLUG); it is only part of the cache key.
     const cacheKey = `${siteSlug}:${version}`
     const cached = releaseNotesCache.get(cacheKey)
     if (cached && cached.expiresAt > Date.now()) {
@@ -88,7 +87,7 @@ export function useReleaseNotes(
     error.value = null
 
     try {
-      const url = `${apiBaseUrl}/api/v1/sites/${siteSlug}/release-notes/${version}`
+      const url = `${apiBaseUrl}/api/v1/release-notes/${version}`
       const response = await fetch(url, {
         headers: {
           Accept: 'application/json',

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 {

package/src/composables/useSiteVersion.ts

@@ -54,7 +54,10 @@ export function useSiteVersion(options: { fetchOnMount?: boolean } = {}): SiteVe
   const { fetchOnMount = true } = options
 
   const apiBaseUrl = getEnvVar('VITE_API_BASE_URL', 'https://portal.duffcloudservices.com')
-  const siteSlug = getEnvVar('VITE_SITE_SLUG', '')
+  // @deprecated VITE_SITE_SLUG: the site is now resolved server-side from the
+  // request Host or the dedicated Container App's DCS_SITE_SLUG. It is no longer
+  // used for routing; retained only for source compatibility.
+  void getEnvVar('VITE_SITE_SLUG', '')
 
   const version = ref<string | null>(null)
   const isLoading = ref(false)
@@ -65,10 +68,6 @@ export function useSiteVersion(options: { fetchOnMount?: boolean } = {}): SiteVe
   })
 
   async function fetchVersion(): Promise<void> {
-    if (!siteSlug) {
-      return
-    }
-
     // Check cache
     if (versionCache && versionCache.expiresAt > Date.now()) {
       version.value = versionCache.version
@@ -79,7 +78,7 @@ export function useSiteVersion(options: { fetchOnMount?: boolean } = {}): SiteVe
 
     try {
       // Fetch the latest release notes to get the version
-      const url = `${apiBaseUrl}/api/v1/sites/${siteSlug}/release-notes/latest`
+      const url = `${apiBaseUrl}/api/v1/release-notes/latest`
       const response = await fetch(url, {
         headers: {
           Accept: 'application/json',

package/src/composables/useTextContent.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
+import { useTextContent } from './useTextContent'
+
+/**
+ * Pins the slug-free URL shape for runtime text-override fetches.
+ *
+ * The site is resolved server-side (request Host or the dedicated Container
+ * App's DCS_SITE_SLUG), so VITE_SITE_SLUG must NOT appear in the request path.
+ */
+describe('useTextContent runtime URL (slug-free)', () => {
+  beforeEach(() => {
+    vi.stubEnv('VITE_API_BASE_URL', 'https://api.example.com')
+    vi.stubEnv('VITE_TEXT_OVERRIDE_MODE', 'runtime')
+    // Still set for source compatibility — must be ignored for routing.
+    vi.stubEnv('VITE_SITE_SLUG', 'kept')
+  })
+
+  afterEach(() => {
+    vi.unstubAllEnvs()
+    vi.restoreAllMocks()
+  })
+
+  it('fetches /api/v1/pages/{pageSlug}/text without the site slug in the path', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: async () => ({ overrides: { 'hero.title': 'Hi' } }),
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    // fetchOnMount: false avoids registering onMounted outside a component
+    // setup context; refresh() drives the same fetch path directly.
+    const { refresh } = useTextContent({
+      pageSlug: 'home',
+      defaults: {},
+      fetchOnMount: false,
+    })
+    await refresh()
+
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    const [url] = fetchMock.mock.calls[0]
+    expect(url).toBe('https://api.example.com/api/v1/pages/home/text')
+    expect(url).not.toContain('/sites/')
+    expect(url).not.toContain('kept')
+  })
+})

package/src/composables/useTextContent.ts

@@ -111,7 +111,11 @@ export function useTextContent(config: TextContentConfig): TextContentReturn {
     cacheTtl = 60000,
   } = config
 
-  // Get configuration from environment
+  // Get configuration from environment.
+  // @deprecated VITE_SITE_SLUG: the site is now resolved server-side from the
+  // request Host or the dedicated Container App's DCS_SITE_SLUG. It is still read
+  // here for cache-key continuity and source compatibility, but is no longer used
+  // to build the request URL.
   const apiBaseUrl = getEnvVar('VITE_API_BASE_URL', '')
   const siteSlug = getEnvVar('VITE_SITE_SLUG', '')
   const textOverrideMode = getEnvVar('VITE_TEXT_OVERRIDE_MODE', 'commit')
@@ -202,10 +206,12 @@ export function useTextContent(config: TextContentConfig): TextContentReturn {
       return
     }
 
-    // Skip if API not configured
-    if (!apiBaseUrl || !siteSlug) {
+    // Skip if API not configured. The site is resolved server-side (Host /
+    // DCS_SITE_SLUG), so VITE_SITE_SLUG is no longer required for routing —
+    // only the API base URL is needed.
+    if (!apiBaseUrl) {
       console.warn(
-        '[@duffcloudservices/cms] Runtime mode enabled but VITE_API_BASE_URL or VITE_SITE_SLUG not set'
+        '[@duffcloudservices/cms] Runtime mode enabled but VITE_API_BASE_URL not set'
       )
       return
     }
@@ -222,7 +228,9 @@ export function useTextContent(config: TextContentConfig): TextContentReturn {
     error.value = null
 
     try {
-      const url = `${apiBaseUrl}/api/v1/sites/${siteSlug}/pages/${pageSlug}/text`
+      // Site is resolved server-side from the request Host or the dedicated
+      // Container App's DCS_SITE_SLUG; the slug is no longer encoded in the path.
+      const url = `${apiBaseUrl}/api/v1/pages/${pageSlug}/text`
       const response = await fetch(url, {
         headers: {
           Accept: 'application/json',