@duffcloudservices/cms 0.9.0 → 0.11.0

package/dist/{vitepressTransform-DeEzgGWU.d.ts → vitepressTransform-DfmABXmK.d.ts}

@@ -18,6 +18,14 @@ interface SeoConfiguration {
     global?: GlobalSeoConfig;
     /** Page-specific SEO configurations keyed by page slug */
     pages?: Record<string, PageSeoConfig>;
+    /**
+     * Per-site escape hatch for build-time BODY prerender (default ON when the
+     * static-HTML emitter is enabled). Set `false` to disable body prerender for
+     * this one site with NO code change and NO cms republish — the portal owns
+     * `.dcs/seo.yaml`, so flipping this and rebuilding is enough. Head meta +
+     * JSON-LD emission is unaffected either way.
+     */
+    prerenderBody?: boolean;
 }
 /**
  * Global/site-wide SEO configuration
@@ -403,6 +411,26 @@ interface ReviewSchemaParts {
  * real items, BOTH are omitted — never an invented rating or count.
  */
 declare function buildReviewSchemaParts(items: ReviewSource[] | undefined): ReviewSchemaParts;
+/**
+ * Build a single `EducationalOccupationalCredential` node for a trade license
+ * from the free-text `business.license` content key, or `undefined` when the key
+ * is empty / whitespace / absent.
+ *
+ * Shape (schema.org-correct; mirrors the portal's `Credential` editor type in
+ * `portal/src/lib/jsonld-schema-types.ts`):
+ *
+ *   { '@type': 'EducationalOccupationalCredential',
+ *     credentialCategory: 'license',
+ *     name: <verbatim business.license value> }
+ *
+ * HONESTY (non-negotiable, mirrors the Review/FAQ gates in this module): an
+ * empty / whitespace / absent value returns `undefined` so the caller omits
+ * `hasCredential` entirely — never an empty string, never a fabricated license.
+ * The value is carried verbatim in `name` (the field is free text — a license
+ * number, a "Licensed & Insured" phrase, or a credential name — so the
+ * always-valid `name` slot is the safest home; nothing is parsed or invented).
+ */
+declare function buildHasCredential(license: string | undefined): SchemaObject | undefined;
 /**
  * Build the cross-linked global knowledge graph as ONE JSON-LD object carrying
  * a `@graph` array: `Organization`, `WebSite` (publisher → org), and the site's
@@ -412,16 +440,22 @@ declare function buildReviewSchemaParts(items: ReviewSource[] | undefined): Revi
  *
  * The LocalBusiness node ABSORBS the existing `global.schemas[*]` LocalBusiness
  * subtype (its NAP/geo/hours/offers are preserved verbatim) and is promoted with
- * an `@id`; honest `review` + `aggregateRating` are merged in when supplied.
+ * an `@id`; honest `review` + `aggregateRating` and a `hasCredential` license are
+ * merged in when supplied.
  *
  * Returns `[]` when there is no `siteUrl` (no stable `@id` anchor possible), so
  * the existing per-schema emission is left untouched for un-configured sites.
  *
  * @param opts.reviews REAL review items (from content.yaml) for the business
  *   node. Optional; when omitted/empty no Review/aggregateRating is added.
+ * @param opts.license Free-text trade/occupational license (from the
+ *   `business.license` content key). Optional; when empty/absent no
+ *   `hasCredential` is added (honesty-gated — see `buildHasCredential`). Only
+ *   ever attached to the LocalBusiness node, never to Organization/WebSite.
  */
 declare function buildGlobalGraph(global: GlobalSeoConfig, opts?: {
     reviews?: ReviewSource[];
+    license?: string;
 }): SchemaObject[];
 /**
  * Build a `BreadcrumbList` from an ordered trail of crumbs (Home → … → current).
@@ -514,6 +548,15 @@ interface ContentConfig {
  * rating/text/authorName are dropped there.
  */
 declare function findReviewItemsForPage(content: ContentConfig | undefined, pageSlug: string): ReviewSource[];
+/**
+ * Read the free-text `business.license` content key from `.dcs/content.yaml`
+ * (page-scoped block first, then global — mirroring `findReviewItemsForPage`;
+ * NAP identity normally lives under `global`). Returns a trimmed non-empty
+ * string, or `undefined` when the key is absent or empty. A bare numeric YAML
+ * value (e.g. `business.license: 123456`) is coerced to its string form. No
+ * synthesis — an unset key yields `undefined`, so the emit paths stay dark.
+ */
+declare function findBusinessLicense(content: ContentConfig | undefined, pageSlug: string): string | undefined;
 /**
  * Guarantee an absolute URL. When `value` is already absolute (`http(s)://`) it
  * is returned unchanged; when it is a site-relative path it is joined onto the
@@ -935,6 +978,14 @@ interface CreateSeoTransformPageDataOptions {
      * aggregateRating. Default: none.
      */
     resolveReviews?: (ctx: SeoPageContext) => ReviewSource[] | undefined;
+    /**
+     * Provide the free-text trade/occupational license (the `business.license`
+     * content.yaml key) for the LocalBusiness node in the `@graph` (only used when
+     * `emitGraph` is true). When non-empty a `hasCredential`
+     * (`EducationalOccupationalCredential`, `credentialCategory: "license"`) is
+     * added to the business node; empty/absent ⇒ nothing. Default: none.
+     */
+    resolveLicense?: (ctx: SeoPageContext) => string | undefined;
     /** Enable debug logging of the emitted head per page. */
     debug?: boolean;
 }
@@ -976,4 +1027,4 @@ declare function buildVitePressSeoHead(pageData: VitePressPageData, options: Cre
  */
 declare function createSeoTransformPageData(options: CreateSeoTransformPageDataOptions): (pageData: VitePressPageData) => void;
 
-export { findLocalBusinessSchema as $, AI_BOTS as A, type BuildSitemapParams as B, type ContentConfig as C, type DcsRobotsOptions as D, type BlogMeta as E, type ReviewSource as F, type GlobalSeoConfig as G, type FaqSource as H, type PageSeoConfig as I, type SeoAuthorConfig as J, type SeoSocialConfig as K, type SeoImagesConfig as L, type SeoOpenGraphConfig as M, type SeoTwitterConfig as N, type SeoSchemaConfig as O, type PageRouteEntry as P, type SeoAlternateConfig as Q, type ResolvedPageOverrides as R, type SeoConfiguration as S, type SeoVerificationConfig as T, type UseSeoReturn as U, type VitePressPageData as V, type ResolvedPageSeo as W, type UseSeoConfig as X, type HeadOverrides as Y, loadPagesManifest as Z, parsePagesManifest as _, type CreateSeoTransformPageDataOptions as a, graphAbsorbs as a0, deriveSameAs as a1, graphIds as a2, isLocalBusinessType as a3, type NormalisedReview as a4, type NormalisedFaq as a5, type ReviewSchemaParts as a6, buildVitePressSeoHead as b, createSeoTransformPageData as c, defaultRelativePathToRoute as d, type SeoPageContext as e, type SeoPageTypeRule as f, type VitePressHeadConfig as g, buildSitemapXml as h, buildRobotsTxt as i, buildLlmsTxt as j, isRouteIndexable as k, buildGlobalGraph as l, buildBreadcrumbList as m, breadcrumbTrailFromRoute as n, buildBlogPosting as o, buildFaqPage as p, buildReviewSchemaParts as q, filterRealReviews as r, filterRealFaq as s, findReviewItemsForPage as t, absolutizeUrl as u, slugToTitle as v, type BuildRobotsParams as w, type BuildLlmsParams as x, type SchemaObject as y, type BreadcrumbCrumb as z };
+export { buildHasCredential as $, AI_BOTS as A, type BuildSitemapParams as B, type CreateSeoTransformPageDataOptions as C, type DcsRobotsOptions as D, type ContentConfig as E, type FaqSource as F, type GlobalSeoConfig as G, type SeoConfiguration as H, type SeoAuthorConfig as I, type SeoSocialConfig as J, type SeoImagesConfig as K, type SeoOpenGraphConfig as L, type SeoTwitterConfig as M, type SeoSchemaConfig as N, type SeoAlternateConfig as O, type PageSeoConfig as P, type SeoVerificationConfig as Q, type ResolvedPageOverrides as R, type SeoPageContext as S, type ResolvedPageSeo as T, type UseSeoReturn as U, type VitePressPageData as V, type UseSeoConfig as W, type HeadOverrides as X, type PageRouteEntry as Y, loadPagesManifest as Z, parsePagesManifest as _, buildSitemapXml as a, findLocalBusinessSchema as a0, graphAbsorbs as a1, findBusinessLicense as a2, deriveSameAs as a3, graphIds as a4, isLocalBusinessType as a5, type NormalisedReview as a6, type NormalisedFaq as a7, type ReviewSchemaParts as a8, buildVitePressSeoHead as b, createSeoTransformPageData as c, defaultRelativePathToRoute as d, buildRobotsTxt as e, buildLlmsTxt as f, buildGlobalGraph as g, buildBreadcrumbList as h, isRouteIndexable as i, breadcrumbTrailFromRoute as j, buildBlogPosting as k, buildFaqPage as l, buildReviewSchemaParts as m, filterRealReviews as n, filterRealFaq as o, findReviewItemsForPage as p, absolutizeUrl as q, type SeoPageTypeRule as r, slugToTitle as s, type VitePressHeadConfig as t, type BuildRobotsParams as u, type BuildLlmsParams as v, type SchemaObject as w, type BreadcrumbCrumb as x, type BlogMeta as y, type ReviewSource as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duffcloudservices/cms",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Vue 3 composables and Vite plugins for DCS CMS integration",
   "type": "module",
   "exports": {
@@ -31,6 +31,12 @@
     },
     "./review-showcase": {
       "import": "./src/components/DcsReviewShowcase.vue"
+    },
+    "./call-button": {
+      "import": "./src/components/DcsCallButton.vue"
+    },
+    "./lite-media-embed": {
+      "import": "./src/components/LiteMediaEmbed.vue"
     }
   },
   "main": "./dist/index.js",
@@ -51,7 +57,13 @@
   },
   "peerDependencies": {
     "vue": "^3.4.0",
-    "@unhead/vue": "^1.9.0"
+    "@unhead/vue": "^1.9.0",
+    "playwright": "^1.40.0"
+  },
+  "peerDependenciesMeta": {
+    "playwright": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@duffcloudservices/cms-core": "0.4.3",

package/src/components/DcsCallButton.test.ts

@@ -0,0 +1,126 @@
+import { describe, it, expect, afterEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DcsCallButton from './DcsCallButton.vue'
+
+/**
+ * `useTextContent` reads the build-time `__DCS_CONTENT__` global synchronously
+ * at setup. Stub it to simulate `.dcs/content.yaml` `global` overrides; pass
+ * `null` to simulate a site with no injected content at all (the SSR default).
+ */
+function stubContent(global: Record<string, string> | null): void {
+  if (global === null) {
+    vi.stubGlobal('__DCS_CONTENT__', undefined)
+    return
+  }
+  vi.stubGlobal('__DCS_CONTENT__', {
+    version: 1,
+    lastUpdated: '',
+    updatedBy: 'test',
+    global,
+  })
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('DcsCallButton', () => {
+  it('renders a tel: link with the managed number when business.phone is set', () => {
+    stubContent({ 'business.phone': '(248) 385-2926', 'business.name': 'Iron Oak' })
+
+    const wrapper = mount(DcsCallButton, { props: { variant: 'inline' } })
+    const link = wrapper.find('a')
+
+    expect(link.exists()).toBe(true)
+    expect(link.attributes('href')).toBe('tel:2483852926')
+    expect(link.text()).toContain('(248) 385-2926')
+    expect(link.attributes('aria-label')).toBe('Call Iron Oak at (248) 385-2926')
+    // The visible number is editor-discoverable via the managed content key.
+    expect(link.find('[data-dcs-text="business.phone"]').exists()).toBe(true)
+  })
+
+  it('renders nothing when the business.phone key is absent', () => {
+    stubContent({ 'business.name': 'Iron Oak' })
+
+    const wrapper = mount(DcsCallButton)
+
+    expect(wrapper.find('a').exists()).toBe(false)
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('renders nothing when business.phone is present but blank', () => {
+    stubContent({ 'business.phone': '   ' })
+
+    const wrapper = mount(DcsCallButton)
+
+    expect(wrapper.find('a').exists()).toBe(false)
+  })
+
+  it('renders nothing when no managed content is injected at all (SSR default)', () => {
+    stubContent(null)
+
+    const wrapper = mount(DcsCallButton)
+
+    // No fabricated fallback number — the A-34 SSR-fabrication class must be
+    // impossible by construction.
+    expect(wrapper.find('a').exists()).toBe(false)
+  })
+
+  it('normalizes a US-formatted number to a digits-only tel: href', () => {
+    stubContent({ 'business.phone': '(248) 385-2926' })
+
+    const wrapper = mount(DcsCallButton)
+
+    expect(wrapper.find('a').attributes('href')).toBe('tel:2483852926')
+  })
+
+  it('preserves a single leading + for E.164 international numbers', () => {
+    stubContent({ 'business.phone': '+1 (248) 385-2926' })
+
+    const wrapper = mount(DcsCallButton)
+
+    expect(wrapper.find('a').attributes('href')).toBe('tel:+12483852926')
+  })
+
+  it('strips dots and spaces from the tel: href', () => {
+    stubContent({ 'business.phone': '248.385.2926' })
+
+    const wrapper = mount(DcsCallButton)
+
+    expect(wrapper.find('a').attributes('href')).toBe('tel:2483852926')
+  })
+
+  it('icon variant hides the visible number but keeps an accessible label', () => {
+    stubContent({ 'business.phone': '(248) 385-2926', 'business.name': 'Iron Oak' })
+
+    const wrapper = mount(DcsCallButton, { props: { variant: 'icon' } })
+    const link = wrapper.find('a')
+
+    expect(link.exists()).toBe(true)
+    // No visible number text — it's icon-only.
+    expect(link.text()).toBe('')
+    expect(link.find('svg').exists()).toBe(true)
+    expect(link.attributes('aria-label')).toBe('Call Iron Oak at (248) 385-2926')
+    expect(link.attributes('title')).toBe('Call Iron Oak at (248) 385-2926')
+  })
+
+  it('falls back to "Call {number}" when no business name is available', () => {
+    stubContent({ 'business.phone': '(248) 385-2926' })
+
+    const wrapper = mount(DcsCallButton, { props: { variant: 'icon' } })
+
+    expect(wrapper.find('a').attributes('aria-label')).toBe('Call (248) 385-2926')
+  })
+
+  it('prefers an explicit businessName prop over managed business.name', () => {
+    stubContent({ 'business.phone': '(248) 385-2926', 'business.name': 'Managed Name' })
+
+    const wrapper = mount(DcsCallButton, {
+      props: { variant: 'icon', businessName: 'Explicit Name' },
+    })
+
+    expect(wrapper.find('a').attributes('aria-label')).toBe(
+      'Call Explicit Name at (248) 385-2926'
+    )
+  })
+})

package/src/components/DcsCallButton.vue

@@ -0,0 +1,185 @@
+<script setup lang="ts">
+/**
+ * Click-to-call affordance driven by the portal-managed `business.phone`
+ * content key — the same NAP field that powers the site's LocalBusiness
+ * identity (see `.dcs/content.yaml` `global.business.phone`). Renders a real
+ * `tel:` link so mobile visitors get an above-the-fold call path.
+ *
+ * HONESTY / SSR SAFETY (non-negotiable): the number is read through
+ * `useTextContent`, which resolves build-time `.dcs/content.yaml` synchronously
+ * (no window/document at setup). When `business.phone` is unset or blank the
+ * component renders NOTHING — it never fabricates a placeholder number. A
+ * defaulted number leaking into prod SSR is exactly the A-34 fabrication class
+ * this repo already had an incident over, so the render gate is a hard `v-if`.
+ *
+ * Usage:
+ *   import DcsCallButton from '@duffcloudservices/cms/call-button'
+ *
+ *   <!-- compact, above-the-fold mobile header affordance -->
+ *   <DcsCallButton variant="icon" />
+ *
+ *   <!-- icon + label + number for a nav/menu row or hero -->
+ *   <DcsCallButton variant="inline" />
+ */
+import { computed } from 'vue'
+import { useTextContent } from '../composables/useTextContent'
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Page slug to resolve NAP content from. `business.phone`/`business.name`
+     * live in the `global` block, which `useTextContent` always merges in, so
+     * the default `'global'` resolves correctly from any page.
+     */
+    pageSlug?: string
+    /**
+     * Visual variant: `icon` is a compact icon-only tap target (mobile header);
+     * `inline` renders icon + label + number (nav/menu row or hero).
+     */
+    variant?: 'icon' | 'inline'
+    /** Leading call-to-action label for the `inline` variant. */
+    label?: string
+    /**
+     * Business name for the accessible label ("Call {name} at {number}"). When
+     * empty, falls back to the managed `business.name`, then to just the number.
+     */
+    businessName?: string
+  }>(),
+  {
+    pageSlug: 'global',
+    variant: 'inline',
+    label: 'Call',
+    businessName: '',
+  }
+)
+
+// Empty defaults: the number MUST come from managed content, never a hardcoded
+// fallback baked into the component.
+const { texts } = useTextContent({ pageSlug: props.pageSlug, defaults: {} })
+
+/**
+ * The portal-managed phone exactly as entered (the human-readable display
+ * form, e.g. "(248) 385-2926"). Empty when the key is unset/blank.
+ */
+const phoneDisplay = computed(() => {
+  const value = texts.value['business.phone']
+  return typeof value === 'string' ? value.trim() : ''
+})
+
+/** Render only when a real, dialable number is present (has ≥ 1 digit). */
+const hasPhone = computed(() => /\d/.test(phoneDisplay.value))
+
+/**
+ * `tel:` target: strip all formatting to digits, preserving a single leading
+ * `+` for E.164 international numbers.
+ *   "(248) 385-2926"    → "tel:2483852926"
+ *   "+1 (248) 385-2926" → "tel:+12483852926"
+ */
+const telHref = computed(() => {
+  const raw = phoneDisplay.value
+  const plus = raw.startsWith('+') ? '+' : ''
+  return `tel:${plus}${raw.replace(/\D/g, '')}`
+})
+
+/** Business name for the aria-label: prop → managed `business.name` → none. */
+const resolvedName = computed(() => {
+  const fromProp = props.businessName.trim()
+  if (fromProp) return fromProp
+  const value = texts.value['business.name']
+  return typeof value === 'string' ? value.trim() : ''
+})
+
+const ariaLabel = computed(() =>
+  resolvedName.value
+    ? `Call ${resolvedName.value} at ${phoneDisplay.value}`
+    : `Call ${phoneDisplay.value}`
+)
+</script>
+
+<template>
+  <a
+    v-if="hasPhone"
+    :href="telHref"
+    class="dcs-call-button"
+    :class="`dcs-call-button--${variant}`"
+    :aria-label="ariaLabel"
+    :title="variant === 'icon' ? ariaLabel : undefined"
+    data-dcs-call
+  >
+    <svg
+      class="dcs-call-button__icon"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path
+        d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"
+      />
+    </svg>
+    <span v-if="variant === 'inline'" class="dcs-call-button__label">{{ label }}</span>
+    <span
+      v-if="variant === 'inline'"
+      class="dcs-call-button__number"
+      data-dcs-text="business.phone"
+      >{{ phoneDisplay }}</span
+    >
+  </a>
+</template>
+
+<style scoped>
+.dcs-call-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dcs-call-gap, 0.5rem);
+  color: var(--dcs-call-color, currentColor);
+  text-decoration: none;
+  font-weight: var(--dcs-call-font-weight, 600);
+  line-height: 1;
+  border-radius: var(--dcs-call-radius, 0.5rem);
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.dcs-call-button:hover {
+  color: var(--dcs-call-color-hover, var(--brand-accent, currentColor));
+}
+
+.dcs-call-button:focus-visible {
+  outline: 2px solid var(--dcs-call-focus, currentColor);
+  outline-offset: 2px;
+}
+
+/* Icon-only: a WCAG 2.5.5 minimum 44×44 touch target for reliable tapping. */
+.dcs-call-button--icon {
+  justify-content: center;
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  padding: var(--dcs-call-icon-padding, 0.5rem);
+}
+
+.dcs-call-button--inline {
+  padding: var(--dcs-call-inline-padding, 0);
+}
+
+.dcs-call-button__icon {
+  width: var(--dcs-call-icon-size, 1.25rem);
+  height: var(--dcs-call-icon-size, 1.25rem);
+  flex-shrink: 0;
+}
+
+.dcs-call-button__number {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dcs-call-button {
+    transition: none;
+  }
+}
+</style>

package/src/components/DcsReviewShowcase.vue

@@ -60,16 +60,27 @@ function markAvatarFailed(reviewId: string) {
   failedAvatarIds.value = next
 }
 
-/** Format date string to readable format */
+/**
+ * Format date string to readable format.
+ *
+ * Both the locale AND the time zone are pinned so the string is byte-identical
+ * between the SSR/SSG pass (which runs in the build host's locale/zone — and
+ * Windows Node ignores the `TZ` env var) and the client hydration (visitor's
+ * locale/zone). Without pinning, a date near a day boundary — or an en-GB vs
+ * en-US visitor — renders differently on server and client, tripping a Vue
+ * hydration mismatch. `timeZone: 'UTC'` is the key fix; the fixed `en-US` locale
+ * removes the remaining month-abbreviation drift.
+ */
 function formatDate(dateStr: string): string {
   const parsed = new Date(dateStr)
   if (Number.isNaN(parsed.getTime())) {
     return dateStr
   }
 
-  return parsed.toLocaleDateString(undefined, {
+  return parsed.toLocaleDateString('en-US', {
     year: 'numeric',
     month: 'short',
+    timeZone: 'UTC',
   })
 }