@duffcloudservices/cms 0.3.10 → 0.3.11

package/src/components/DcsReviewShowcase.vue

@@ -0,0 +1,326 @@
+<script setup lang="ts">
+/**
+ * Showcase component for displaying curated customer reviews.
+ * Uses data-dcs-reviews attribute for visual editor integration.
+ *
+ * Usage:
+ *   <DcsReviewShowcase section-key="testimonials" :defaults="fallbackReviews" />
+ */
+import { computed } from 'vue'
+import { useReviewContent, type ReviewItem } from '../composables/useReviewContent'
+
+const props = withDefaults(defineProps<{
+  /** Key matching the data-dcs-reviews attribute for editor bridge discovery */
+  sectionKey: string
+  /** Page slug for page-specific content */
+  pageSlug?: string
+  /** Fallback reviews when no CMS content is available */
+  defaults?: ReviewItem[]
+  /** Maximum number of reviews to display */
+  maxDisplay?: number
+  /** Layout variant */
+  layout?: 'grid' | 'carousel' | 'list'
+  /** Whether to show the platform badge */
+  showPlatform?: boolean
+  /** Whether to show the review date */
+  showDate?: boolean
+  /** Whether to show reply text */
+  showReply?: boolean
+}>(), {
+  defaults: () => [],
+  maxDisplay: 6,
+  layout: 'grid',
+  showPlatform: true,
+  showDate: true,
+  showReply: false,
+})
+
+const { reviews, hasReviews } = useReviewContent({
+  sectionKey: props.sectionKey,
+  pageSlug: props.pageSlug,
+  defaults: props.defaults,
+})
+
+const visibleReviews = computed(() => reviews.value.slice(0, props.maxDisplay))
+
+const showEmptyState = computed(() => !hasReviews.value && isEditorContext())
+
+/** Get initials from author name for avatar fallback */
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .map(word => word[0])
+    .filter(Boolean)
+    .slice(0, 2)
+    .join('')
+    .toUpperCase()
+}
+
+/** Format date string to readable format */
+function formatDate(dateStr: string): string {
+  const parsed = new Date(dateStr)
+  if (Number.isNaN(parsed.getTime())) {
+    return dateStr
+  }
+
+  return parsed.toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+  })
+}
+
+/** Get platform display label */
+function platformLabel(platform: string): string {
+  switch (platform) {
+    case 'google':
+      return 'Google'
+    case 'meta':
+      return 'Facebook'
+    default:
+      return platform.charAt(0).toUpperCase() + platform.slice(1)
+  }
+}
+
+function isEditorContext(): boolean {
+  if (globalThis.window === undefined) {
+    return false
+  }
+
+  try {
+    return globalThis.self !== globalThis.top
+  } catch {
+    return true
+  }
+}
+</script>
+
+<template>
+  <div
+    :data-dcs-reviews="sectionKey"
+    class="dcs-review-showcase"
+    :class="`dcs-review-showcase--${layout}`"
+  >
+    <template v-if="hasReviews">
+      <div
+        class="dcs-review-showcase__grid"
+        :class="{
+          'dcs-review-grid': layout === 'grid',
+          'dcs-review-list': layout === 'list',
+          'dcs-review-carousel': layout === 'carousel',
+        }"
+      >
+        <article
+          v-for="review in visibleReviews"
+          :key="review.id"
+          class="dcs-review-card"
+        >
+          <div class="dcs-review-card__header">
+            <div class="dcs-review-card__avatar">
+              <img
+                v-if="review.authorPhotoUrl"
+                :src="review.authorPhotoUrl"
+                :alt="review.authorName"
+                class="dcs-review-card__avatar-img"
+                loading="lazy"
+              >
+              <span v-else class="dcs-review-card__avatar-initials">
+                {{ getInitials(review.authorName) }}
+              </span>
+            </div>
+
+            <div class="dcs-review-card__author-info">
+              <span class="dcs-review-card__author-name">{{ review.authorName }}</span>
+              <span v-if="showPlatform" class="dcs-review-card__platform">
+                {{ platformLabel(review.platform) }}
+              </span>
+            </div>
+          </div>
+
+          <div class="dcs-review-card__rating" :aria-label="`${review.rating} out of 5 stars`">
+            <svg
+              v-for="star in 5"
+              :key="star"
+              class="dcs-review-card__star"
+              :class="star <= review.rating ? 'dcs-review-card__star--filled' : 'dcs-review-card__star--empty'"
+              viewBox="0 0 20 20"
+              width="18"
+              height="18"
+              aria-hidden="true"
+            >
+              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 0 0 .95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 0 0-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 0 0-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 0 0-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 0 0 .951-.69l1.07-3.292z" />
+            </svg>
+          </div>
+
+          <p v-if="review.text" class="dcs-review-card__text">
+            {{ review.text }}
+          </p>
+
+          <time
+            v-if="showDate && review.date"
+            class="dcs-review-card__date"
+            :datetime="review.date"
+          >
+            {{ formatDate(review.date) }}
+          </time>
+
+          <div v-if="showReply && review.replyText" class="dcs-review-card__reply">
+            <span class="dcs-review-card__reply-label">Response:</span>
+            <p class="dcs-review-card__reply-text">{{ review.replyText }}</p>
+          </div>
+        </article>
+      </div>
+    </template>
+
+    <div v-else-if="showEmptyState" class="dcs-review-showcase__empty">
+      <p>Click to add reviews from Google or Meta</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dcs-review-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+.dcs-review-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.dcs-review-carousel {
+  display: flex;
+  gap: 1.5rem;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 0.5rem;
+}
+
+.dcs-review-carousel .dcs-review-card {
+  min-width: 300px;
+  scroll-snap-align: start;
+}
+
+.dcs-review-card {
+  background: var(--dcs-review-card-bg, #ffffff);
+  border: 1px solid var(--dcs-review-card-border, #e5e7eb);
+  border-radius: var(--dcs-review-card-radius, 0.75rem);
+  padding: var(--dcs-review-card-padding, 1.5rem);
+  transition: box-shadow 0.2s ease;
+}
+
+.dcs-review-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.dcs-review-card__header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.dcs-review-card__avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: var(--dcs-review-avatar-bg, #e5e7eb);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dcs-review-card__avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.dcs-review-card__avatar-initials {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--dcs-review-avatar-text, #6b7280);
+}
+
+.dcs-review-card__author-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.dcs-review-card__author-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--dcs-review-author-color, #111827);
+}
+
+.dcs-review-card__platform {
+  font-size: 0.75rem;
+  color: var(--dcs-review-platform-color, #6b7280);
+}
+
+.dcs-review-card__rating {
+  display: flex;
+  gap: 0.125rem;
+  margin-bottom: 0.5rem;
+}
+
+.dcs-review-card__star {
+  flex-shrink: 0;
+}
+
+.dcs-review-card__star--filled {
+  fill: var(--dcs-review-star-filled, #f59e0b);
+  color: var(--dcs-review-star-filled, #f59e0b);
+}
+
+.dcs-review-card__star--empty {
+  fill: var(--dcs-review-star-empty, #d1d5db);
+  color: var(--dcs-review-star-empty, #d1d5db);
+}
+
+.dcs-review-card__text {
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: var(--dcs-review-text-color, #374151);
+  margin: 0 0 0.75rem;
+}
+
+.dcs-review-card__date {
+  font-size: 0.75rem;
+  color: var(--dcs-review-date-color, #9ca3af);
+}
+
+.dcs-review-card__reply {
+  margin-top: 0.75rem;
+  padding: 0.75rem;
+  background: var(--dcs-review-reply-bg, #f9fafb);
+  border-radius: 0.5rem;
+  border-left: 3px solid var(--dcs-review-reply-border, #3b82f6);
+}
+
+.dcs-review-card__reply-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--dcs-review-reply-label-color, #3b82f6);
+}
+
+.dcs-review-card__reply-text {
+  font-size: 0.85rem;
+  color: var(--dcs-review-reply-text-color, #4b5563);
+  margin: 0.25rem 0 0;
+}
+
+.dcs-review-showcase__empty {
+  padding: 2rem;
+  text-align: center;
+  color: var(--dcs-review-empty-color, #9ca3af);
+  border: 2px dashed var(--dcs-review-empty-border, #e5e7eb);
+  border-radius: 0.75rem;
+}
+</style>

package/src/composables/index.ts

@@ -2,3 +2,9 @@ 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/useReviewContent.ts

@@ -0,0 +1,92 @@
+/**
+ * Composable for reading curated review selections from DCS content.
+ * Reviews are stored in content.yaml by the visual editor's ReviewPickerSheet.
+ */
+import { computed, type ComputedRef } from 'vue'
+
+export interface ReviewItem {
+  id: string
+  platform: 'google' | 'meta' | string
+  rating: number
+  authorName: string
+  authorPhotoUrl?: string
+  text?: string
+  date?: string
+  replyText?: string
+  locationName?: string
+  sourceUrl?: string
+}
+
+export interface UseReviewContentConfig {
+  /** The section key matching the data-dcs-reviews attribute value */
+  sectionKey: string
+  /** Page slug for page-specific content lookup (defaults to current page) */
+  pageSlug?: string
+  /** Fallback reviews when no content is available */
+  defaults?: ReviewItem[]
+}
+
+export interface UseReviewContentReturn {
+  /** The curated review items from content */
+  reviews: ComputedRef<ReviewItem[]>
+  /** Whether any reviews are available */
+  hasReviews: ComputedRef<boolean>
+  /** Number of reviews */
+  count: ComputedRef<number>
+}
+
+// Declare the global content variable injected by dcsContentPlugin
+declare const __DCS_CONTENT__: {
+  global?: Record<string, unknown>
+  pages?: Record<string, Record<string, unknown>>
+} | undefined
+
+export function useReviewContent(config: UseReviewContentConfig): UseReviewContentReturn {
+  const { sectionKey, pageSlug, defaults = [] } = config
+
+  const reviews = computed<ReviewItem[]>(() => {
+    if (typeof __DCS_CONTENT__ === 'undefined' || __DCS_CONTENT__ == null) {
+      return defaults
+    }
+
+    let reviewData: unknown = null
+
+    if (pageSlug && __DCS_CONTENT__.pages?.[pageSlug]) {
+      reviewData = __DCS_CONTENT__.pages[pageSlug][`reviews.${sectionKey}.items`]
+        ?? __DCS_CONTENT__.pages[pageSlug][`reviews.${sectionKey}`]
+    }
+
+    if (!reviewData && __DCS_CONTENT__.global) {
+      reviewData = __DCS_CONTENT__.global[`reviews.${sectionKey}.items`]
+        ?? __DCS_CONTENT__.global[`reviews.${sectionKey}`]
+    }
+
+    if (!reviewData || !Array.isArray(reviewData)) {
+      return defaults
+    }
+
+    return reviewData
+      .filter((item): item is Record<string, unknown> => (
+        item != null &&
+        typeof item === 'object' &&
+        'id' in item
+      ))
+      .map((item) => ({
+        id: String(item.id ?? ''),
+        platform: String(item.platform ?? 'google'),
+        rating: Number(item.rating ?? 5),
+        authorName: String(item.authorName ?? 'Anonymous'),
+        authorPhotoUrl: item.authorPhotoUrl ? String(item.authorPhotoUrl) : undefined,
+        text: item.text ? String(item.text) : undefined,
+        date: item.date ? String(item.date) : undefined,
+        replyText: item.replyText ? String(item.replyText) : undefined,
+        locationName: item.locationName ? String(item.locationName) : undefined,
+        sourceUrl: item.sourceUrl ? String(item.sourceUrl) : undefined,
+      }))
+  })
+
+  const hasReviews = computed(() => reviews.value.length > 0)
+  const count = computed(() => reviews.value.length)
+
+  return { reviews, hasReviews, count }
+}