@duffcloudservices/cms 0.3.12 → 0.3.14

package/src/components/ResponsiveImage.vue

@@ -1,55 +1,55 @@
-<script setup lang="ts">
-/**
- * Convenience component that renders a responsive `<picture>` element for
- * DCS CDN-hosted images. For non-CDN images it falls back to a plain `<img>`.
- *
- * @example
- * ```vue
- * <ResponsiveImage
- *   src="https://files.duffcloudservices.com/kept/assets/hero/abc-123.jpg"
- *   alt="Hero banner"
- *   context="hero"
- *   class="w-full h-full object-cover"
- * />
- * ```
- */
-import { useResponsiveImage } from '../composables/useResponsiveImage'
-import type { ImageContext } from '@duffcloudservices/cms-core'
-
-const props = defineProps<{
-  /** Image source URL (original CDN URL or local path). */
-  src: string
-  /** Alt text for accessibility. */
-  alt: string
-  /** Sizing context — determines which variants to include. */
-  context?: ImageContext
-  /** CSS class(es) applied to the `<img>` element. */
-  class?: string
-  /** Optional `sizes` attribute override. */
-  sizes?: string
-  /** Skip responsive variants and use the original URL only. */
-  original?: boolean
-}>()
-
-const image = useResponsiveImage({
-  src: () => props.src,
-  alt: () => props.alt,
-  context: () => props.context ?? 'content',
-  sizes: () => props.sizes,
-  original: () => props.original,
-})
-</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="image.imgProps" :class="props.class" />
-  </picture>
-  <img v-else v-bind="image.imgProps" :class="props.class" />
-</template>
+<script setup lang="ts">
+/**
+ * Convenience component that renders a responsive `<picture>` element for
+ * DCS CDN-hosted images. For non-CDN images it falls back to a plain `<img>`.
+ *
+ * @example
+ * ```vue
+ * <ResponsiveImage
+ *   src="https://files.duffcloudservices.com/kept/assets/hero/abc-123.jpg"
+ *   alt="Hero banner"
+ *   context="hero"
+ *   class="w-full h-full object-cover"
+ * />
+ * ```
+ */
+import { useResponsiveImage } from '../composables/useResponsiveImage'
+import type { ImageContext } from '@duffcloudservices/cms-core'
+
+const props = defineProps<{
+  /** Image source URL (original CDN URL or local path). */
+  src: string
+  /** Alt text for accessibility. */
+  alt: string
+  /** Sizing context — determines which variants to include. */
+  context?: ImageContext
+  /** CSS class(es) applied to the `<img>` element. */
+  class?: string
+  /** Optional `sizes` attribute override. */
+  sizes?: string
+  /** Skip responsive variants and use the original URL only. */
+  original?: boolean
+}>()
+
+const image = useResponsiveImage({
+  src: () => props.src,
+  alt: () => props.alt,
+  context: () => props.context ?? 'content',
+  sizes: () => props.sizes,
+  original: () => props.original,
+})
+</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="image.imgProps" :class="props.class" />
+  </picture>
+  <img v-else v-bind="image.imgProps" :class="props.class" />
+</template>

package/src/composables/index.ts

@@ -1,10 +1,10 @@
-export { useTextContent } from './useTextContent'
-export { useSEO, createSiteSEO } from './useSEO'
-export { useReleaseNotes } from './useReleaseNotes'
-export { useSiteVersion } from './useSiteVersion'
-export {
-  useReviewContent,
-  type ReviewItem,
-  type UseReviewContentConfig,
-  type UseReviewContentReturn,
-} from './useReviewContent'
+export { useTextContent } from './useTextContent'
+export { useSEO, createSiteSEO } from './useSEO'
+export { useReleaseNotes } from './useReleaseNotes'
+export { useSiteVersion } from './useSiteVersion'
+export {
+  useReviewContent,
+  type ReviewItem,
+  type UseReviewContentConfig,
+  type UseReviewContentReturn,
+} from './useReviewContent'

package/src/composables/useMediaCarousel.ts

@@ -1,158 +1,158 @@
-/**
- * useMediaCarousel Composable
- *
- * Extracts media carousel items from text content keys following the pattern:
- * `{prefix}.{N}.url`, `{prefix}.{N}.type`, `{prefix}.{N}.alt`
- *
- * @example
- * ```vue
- * <script setup lang="ts">
- * import { useTextContent, useMediaCarousel } from '@duffcloudservices/cms'
- *
- * const { t } = useTextContent({
- *   pageSlug: 'bio-mackenzie',
- *   defaults: {
- *     'hero.media-carousel.0.url': '/images/staff/mackenzie.webp',
- *     'hero.media-carousel.0.type': 'image',
- *     'hero.media-carousel.0.alt': 'Mackenzie Kowalick',
- *     'hero.media-carousel.1.url': '/videos/intro.mp4',
- *     'hero.media-carousel.1.type': 'video',
- *     'hero.media-carousel.1.alt': 'Introduction video',
- *   }
- * })
- *
- * const { items } = useMediaCarousel({
- *   prefix: 'hero.media-carousel',
- *   t,
- *   defaults: [
- *     { url: '/images/staff/mackenzie.webp', type: 'image', alt: 'Mackenzie Kowalick' }
- *   ]
- * })
- * </script>
- *
- * <template>
- *   <MediaCarousel :items="items" />
- * </template>
- * ```
- */
-
-import { computed, type ComputedRef } from 'vue'
-import { isCdnAssetUrl } from '@duffcloudservices/cms-core'
-
-/**
- * Media carousel item representing an image, video, or embed
- */
-export interface MediaCarouselItem {
-  /** URL to the image, video file, or embed URL */
-  url: string
-  /** Type of media: 'image', 'video' (direct file), 'youtube', or 'instagram' */
-  type: 'image' | 'video' | 'youtube' | 'instagram'
-  /** Accessibility alt text */
-  alt?: string
-  /**
-   * Whether this image has responsive CDN variants available.
-   * Automatically set to `true` when the URL matches the DCS CDN asset pattern.
-   * Components rendering the carousel should use `<ResponsiveImage>` when this is `true`.
-   */
-  responsive?: boolean
-}
-
-/**
- * Configuration for useMediaCarousel composable
- */
-export interface UseMediaCarouselConfig {
-  /** Key prefix for carousel items (e.g., 'hero.media-carousel') */
-  prefix: string
-  /** The t() function from useTextContent */
-  t: (key: string, fallback?: string) => string
-  /** Default items to use if no content keys are found */
-  defaults?: MediaCarouselItem[]
-  /** Maximum number of items to look for (default: 10) */
-  maxItems?: number
-}
-
-/**
- * Return type for useMediaCarousel composable
- */
-export interface UseMediaCarouselReturn {
-  /** Computed array of media carousel items */
-  items: ComputedRef<MediaCarouselItem[]>
-  /** Whether any items were found from content keys */
-  hasItems: ComputedRef<boolean>
-  /** Number of items in the carousel */
-  count: ComputedRef<number>
-}
-
-/**
- * Extract media carousel items from text content keys.
- *
- * Looks for keys in the format:
- * - `{prefix}.{N}.url` - Required URL for the media
- * - `{prefix}.{N}.type` - Type: 'image' or 'video' (defaults to 'image')
- * - `{prefix}.{N}.alt` - Alt text for accessibility
- *
- * Items are sorted by index (0, 1, etc.) and only included if they have a valid URL.
- *
- * @param config - Configuration object
- * @returns Media carousel helpers and state
- */
-export function useMediaCarousel(config: UseMediaCarouselConfig): UseMediaCarouselReturn {
-  const {
-    prefix,
-    t,
-    defaults = [],
-    maxItems = 10,
-  } = config
-
-  const items = computed<MediaCarouselItem[]>(() => {
-    const result: MediaCarouselItem[] = []
-
-    // Look for items from 0 to maxItems
-    for (let i = 0; i < maxItems; i++) {
-      const urlKey = `${prefix}.${i}.url`
-      const typeKey = `${prefix}.${i}.type`
-      const altKey = `${prefix}.${i}.alt`
-
-      // Use a sentinel value to detect if the key exists
-      const url = t(urlKey, '')
-      
-      // Skip if no URL (key doesn't exist or is empty)
-      if (!url || url === urlKey) {
-        continue
-      }
-
-      const typeValue = t(typeKey, 'image')
-      // Parse type value - support image, video, youtube, instagram
-      let type: 'image' | 'video' | 'youtube' | 'instagram' = 'image'
-      if (typeValue === 'video') type = 'video'
-      else if (typeValue === 'youtube') type = 'youtube'
-      else if (typeValue === 'instagram') type = 'instagram'
-      const alt = t(altKey, '')
-
-      result.push({
-        url,
-        type,
-        alt: alt && alt !== altKey ? alt : undefined,
-        // Flag CDN-hosted images as responsive so carousel components
-        // can render them with <ResponsiveImage> automatically
-        responsive: type === 'image' && isCdnAssetUrl(url),
-      })
-    }
-
-    // If no items found from content keys, use defaults
-    if (result.length === 0) {
-      return defaults
-    }
-
-    return result
-  })
-
-  const hasItems = computed(() => items.value.length > 0)
-  const count = computed(() => items.value.length)
-
-  return {
-    items,
-    hasItems,
-    count,
-  }
-}
+/**
+ * useMediaCarousel Composable
+ *
+ * Extracts media carousel items from text content keys following the pattern:
+ * `{prefix}.{N}.url`, `{prefix}.{N}.type`, `{prefix}.{N}.alt`
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { useTextContent, useMediaCarousel } from '@duffcloudservices/cms'
+ *
+ * const { t } = useTextContent({
+ *   pageSlug: 'bio-mackenzie',
+ *   defaults: {
+ *     'hero.media-carousel.0.url': '/images/staff/mackenzie.webp',
+ *     'hero.media-carousel.0.type': 'image',
+ *     'hero.media-carousel.0.alt': 'Mackenzie Kowalick',
+ *     'hero.media-carousel.1.url': '/videos/intro.mp4',
+ *     'hero.media-carousel.1.type': 'video',
+ *     'hero.media-carousel.1.alt': 'Introduction video',
+ *   }
+ * })
+ *
+ * const { items } = useMediaCarousel({
+ *   prefix: 'hero.media-carousel',
+ *   t,
+ *   defaults: [
+ *     { url: '/images/staff/mackenzie.webp', type: 'image', alt: 'Mackenzie Kowalick' }
+ *   ]
+ * })
+ * </script>
+ *
+ * <template>
+ *   <MediaCarousel :items="items" />
+ * </template>
+ * ```
+ */
+
+import { computed, type ComputedRef } from 'vue'
+import { isCdnAssetUrl } from '@duffcloudservices/cms-core'
+
+/**
+ * Media carousel item representing an image, video, or embed
+ */
+export interface MediaCarouselItem {
+  /** URL to the image, video file, or embed URL */
+  url: string
+  /** Type of media: 'image', 'video' (direct file), 'youtube', or 'instagram' */
+  type: 'image' | 'video' | 'youtube' | 'instagram'
+  /** Accessibility alt text */
+  alt?: string
+  /**
+   * Whether this image has responsive CDN variants available.
+   * Automatically set to `true` when the URL matches the DCS CDN asset pattern.
+   * Components rendering the carousel should use `<ResponsiveImage>` when this is `true`.
+   */
+  responsive?: boolean
+}
+
+/**
+ * Configuration for useMediaCarousel composable
+ */
+export interface UseMediaCarouselConfig {
+  /** Key prefix for carousel items (e.g., 'hero.media-carousel') */
+  prefix: string
+  /** The t() function from useTextContent */
+  t: (key: string, fallback?: string) => string
+  /** Default items to use if no content keys are found */
+  defaults?: MediaCarouselItem[]
+  /** Maximum number of items to look for (default: 10) */
+  maxItems?: number
+}
+
+/**
+ * Return type for useMediaCarousel composable
+ */
+export interface UseMediaCarouselReturn {
+  /** Computed array of media carousel items */
+  items: ComputedRef<MediaCarouselItem[]>
+  /** Whether any items were found from content keys */
+  hasItems: ComputedRef<boolean>
+  /** Number of items in the carousel */
+  count: ComputedRef<number>
+}
+
+/**
+ * Extract media carousel items from text content keys.
+ *
+ * Looks for keys in the format:
+ * - `{prefix}.{N}.url` - Required URL for the media
+ * - `{prefix}.{N}.type` - Type: 'image' or 'video' (defaults to 'image')
+ * - `{prefix}.{N}.alt` - Alt text for accessibility
+ *
+ * Items are sorted by index (0, 1, etc.) and only included if they have a valid URL.
+ *
+ * @param config - Configuration object
+ * @returns Media carousel helpers and state
+ */
+export function useMediaCarousel(config: UseMediaCarouselConfig): UseMediaCarouselReturn {
+  const {
+    prefix,
+    t,
+    defaults = [],
+    maxItems = 10,
+  } = config
+
+  const items = computed<MediaCarouselItem[]>(() => {
+    const result: MediaCarouselItem[] = []
+
+    // Look for items from 0 to maxItems
+    for (let i = 0; i < maxItems; i++) {
+      const urlKey = `${prefix}.${i}.url`
+      const typeKey = `${prefix}.${i}.type`
+      const altKey = `${prefix}.${i}.alt`
+
+      // Use a sentinel value to detect if the key exists
+      const url = t(urlKey, '')
+      
+      // Skip if no URL (key doesn't exist or is empty)
+      if (!url || url === urlKey) {
+        continue
+      }
+
+      const typeValue = t(typeKey, 'image')
+      // Parse type value - support image, video, youtube, instagram
+      let type: 'image' | 'video' | 'youtube' | 'instagram' = 'image'
+      if (typeValue === 'video') type = 'video'
+      else if (typeValue === 'youtube') type = 'youtube'
+      else if (typeValue === 'instagram') type = 'instagram'
+      const alt = t(altKey, '')
+
+      result.push({
+        url,
+        type,
+        alt: alt && alt !== altKey ? alt : undefined,
+        // Flag CDN-hosted images as responsive so carousel components
+        // can render them with <ResponsiveImage> automatically
+        responsive: type === 'image' && isCdnAssetUrl(url),
+      })
+    }
+
+    // If no items found from content keys, use defaults
+    if (result.length === 0) {
+      return defaults
+    }
+
+    return result
+  })
+
+  const hasItems = computed(() => items.value.length > 0)
+  const count = computed(() => items.value.length)
+
+  return {
+    items,
+    hasItems,
+    count,
+  }
+}