@koehler8/cms 1.0.0-beta.5

package/src/composables/useEngagementTracking.js

@@ -0,0 +1,187 @@
+import { onMounted, onBeforeUnmount } from 'vue';
+import { trackEvent } from '../utils/analytics.js';
+
+export function useEngagementTracking(options = {}) {
+  const isClient = typeof window !== 'undefined' && !import.meta.env.SSR;
+  if (!isClient) {
+    return {
+      refreshVisibilityTargets: () => {},
+      resetEngagementTracking: () => {},
+    };
+  }
+
+  const scrollMilestones = Array.isArray(options.scrollMilestones)
+    ? options.scrollMilestones.slice().sort((a, b) => a - b)
+    : [25, 50, 75, 90, 100];
+  const sectionSelector = options.sectionSelector || '[data-analytics-section]';
+  const sectionThreshold = typeof options.sectionThreshold === 'number'
+    ? Math.min(Math.max(options.sectionThreshold, 0), 1)
+    : 0.5;
+  const getContext = typeof options.getContext === 'function'
+    ? options.getContext
+    : () => ({});
+
+  let firedScrollMilestones = new Set();
+  let highestScrollPercent = 0;
+  let scrollListenerAttached = false;
+  let ticking = false;
+  let observer = null;
+  let observerReady = false;
+  let isMounted = false;
+  const seenSections = new Set();
+
+  function buildPayload(extra = {}) {
+    return {
+      page_path: window.location?.pathname || '',
+      ...getContext(),
+      ...extra,
+    };
+  }
+
+  function evaluateScrollDepth() {
+    const doc = document.documentElement;
+    const body = document.body;
+    const scrollTop = window.scrollY || doc.scrollTop || body.scrollTop || 0;
+    const viewportHeight = window.innerHeight || doc.clientHeight || body.clientHeight || 0;
+    const docHeight = Math.max(
+      body.scrollHeight,
+      doc.scrollHeight,
+      body.offsetHeight,
+      doc.offsetHeight,
+      body.clientHeight,
+      doc.clientHeight
+    );
+
+    if (!docHeight) {
+      return;
+    }
+
+    const pixelsViewed = Math.min(scrollTop + viewportHeight, docHeight);
+    const percentViewed = Math.round((pixelsViewed / docHeight) * 100);
+
+    if (percentViewed <= highestScrollPercent) {
+      return;
+    }
+
+    highestScrollPercent = percentViewed;
+
+    for (const milestone of scrollMilestones) {
+      if (!firedScrollMilestones.has(milestone) && percentViewed >= milestone) {
+        firedScrollMilestones.add(milestone);
+        trackEvent('engagement_scroll_depth', buildPayload({ depth_percent: milestone }));
+      }
+    }
+  }
+
+  function handleScroll() {
+    if (ticking) return;
+    ticking = true;
+    window.requestAnimationFrame(() => {
+      ticking = false;
+      evaluateScrollDepth();
+    });
+  }
+
+  function initScrollTracking() {
+    if (scrollListenerAttached) return;
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    window.addEventListener('resize', handleScroll, { passive: true });
+    scrollListenerAttached = true;
+    evaluateScrollDepth();
+  }
+
+  function stopScrollTracking() {
+    if (!scrollListenerAttached) return;
+    window.removeEventListener('scroll', handleScroll);
+    window.removeEventListener('resize', handleScroll);
+    scrollListenerAttached = false;
+  }
+
+  function getSectionName(element, index) {
+    return (
+      element.dataset.analyticsSection ||
+      element.id ||
+      element.getAttribute('aria-label') ||
+      `section_${index}`
+    );
+  }
+
+  function handleVisibilityEntries(entries) {
+    for (const entry of entries) {
+      if (!entry.isIntersecting) continue;
+      if (sectionThreshold && typeof entry.intersectionRatio === 'number' && entry.intersectionRatio < sectionThreshold) {
+        continue;
+      }
+      const name = getSectionName(entry.target, 0);
+      if (seenSections.has(name)) continue;
+      seenSections.add(name);
+      trackEvent('engagement_section_visible', buildPayload({ section: name }));
+    }
+  }
+
+  function observeSections() {
+    if (!isMounted) return;
+    const elements = Array.from(document.querySelectorAll(sectionSelector));
+
+    if (!elements.length) {
+      return;
+    }
+
+    if (!('IntersectionObserver' in window)) {
+      elements.forEach((el, index) => {
+        const name = getSectionName(el, index);
+        if (seenSections.has(name)) return;
+        seenSections.add(name);
+        trackEvent('engagement_section_visible', buildPayload({ section: name, observer: 'fallback' }));
+      });
+      return;
+    }
+
+    if (!observerReady) {
+      observer = new IntersectionObserver(handleVisibilityEntries, {
+        threshold: [sectionThreshold || 0],
+        rootMargin: '0px 0px -10% 0px',
+      });
+      observerReady = true;
+    }
+
+    observer.disconnect();
+    elements.forEach((el) => observer.observe(el));
+  }
+
+  function refreshVisibilityTargets() {
+    if (!isMounted) return;
+    observeSections();
+  }
+
+  function resetEngagementTracking() {
+    firedScrollMilestones = new Set();
+    highestScrollPercent = 0;
+    seenSections.clear();
+    observeSections();
+    evaluateScrollDepth();
+  }
+
+  onMounted(() => {
+    isMounted = true;
+    initScrollTracking();
+    observeSections();
+  });
+
+  onBeforeUnmount(() => {
+    isMounted = false;
+    stopScrollTracking();
+    if (observer && observerReady) {
+      observer.disconnect();
+      observer = null;
+      observerReady = false;
+    }
+    firedScrollMilestones.clear();
+    seenSections.clear();
+  });
+
+  return {
+    refreshVisibilityTargets,
+    resetEngagementTracking,
+  };
+}

package/src/composables/useIntroGate.js

@@ -0,0 +1,46 @@
+import { computed } from 'vue';
+
+const ALLOWED_KEYS = [
+  'eyebrow',
+  'title',
+  'body',
+  'primaryLabel',
+  'secondaryLabel',
+  'secondaryHref',
+  'storageKey',
+  'closeAriaLabel',
+];
+
+export function useIntroGate({ siteData, pageContent }) {
+  const introGateSettings = computed(() => {
+    const result = {};
+    const sources = [
+      siteData.value?.shared?.content?.introGate,
+      pageContent.value?.introGate,
+    ];
+    for (const src of sources) {
+      if (!src || typeof src !== 'object') continue;
+      for (const [key, value] of Object.entries(src)) {
+        if (value !== undefined) {
+          result[key] = value;
+        }
+      }
+    }
+    return result;
+  });
+
+  const introGateEnabled = computed(() => Boolean(introGateSettings.value.enabled));
+
+  const introGateProps = computed(() => {
+    const config = introGateSettings.value;
+    if (!config || typeof config !== 'object') return {};
+    return ALLOWED_KEYS.reduce((acc, key) => {
+      if (config[key] !== undefined) {
+        acc[key] = config[key];
+      }
+      return acc;
+    }, {});
+  });
+
+  return { introGateEnabled, introGateProps };
+}

package/src/composables/useLazyImage.js

@@ -0,0 +1,77 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+/**
+ * Lightweight IntersectionObserver helper for deferring media loading.
+ * @param {object} [options]
+ * @param {boolean} [options.enabled=true] - Disable to render immediately.
+ * @param {string} [options.rootMargin='200px 0px'] - IntersectionObserver rootMargin.
+ * @param {number|number[]} [options.threshold=0.01] - IntersectionObserver threshold.
+ * @returns {{ isVisible: import('vue').Ref<boolean>, targetRef: import('vue').Ref<HTMLElement | null> }}
+ */
+export function useLazyImage(options = {}) {
+  const {
+    enabled = true,
+    rootMargin = '200px 0px',
+    threshold = 0.01,
+  } = options;
+
+  const isClient = typeof window !== 'undefined';
+  const isVisible = ref(!enabled || !isClient);
+  const targetRef = ref(null);
+  let observer = null;
+  let didResolve = !enabled || !isClient;
+
+  const resolveVisibility = () => {
+    if (didResolve) return;
+    isVisible.value = true;
+    didResolve = true;
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  };
+
+  onMounted(() => {
+    if (!enabled || !isClient) {
+      resolveVisibility();
+      return;
+    }
+
+    const target = targetRef.value;
+    if (!target) {
+      resolveVisibility();
+      return;
+    }
+
+    if (!('IntersectionObserver' in window)) {
+      resolveVisibility();
+      return;
+    }
+
+    observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          resolveVisibility();
+        }
+      },
+      {
+        rootMargin,
+        threshold,
+      }
+    );
+
+    observer.observe(target);
+  });
+
+  onBeforeUnmount(() => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  });
+
+  return {
+    isVisible,
+    targetRef,
+  };
+}

package/src/composables/usePageConfig.js

@@ -0,0 +1,184 @@
+import { onServerPrefetch, ref, watch } from 'vue';
+import { loadConfigData, mergeConfigTrees } from '../utils/loadConfig.js';
+
+function normalizePath(value) {
+  if (!value || typeof value !== 'string') return '/';
+  const trimmed = value.trim();
+  if (!trimmed) return '/';
+  let normalized = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
+  normalized = normalized.replace(/\/+/g, '/');
+  normalized = normalized.replace(/\/+$/, '');
+  return normalized || '/';
+}
+
+function mergeWithSharedContent(sharedContent, pageSpecificContent) {
+  const base = sharedContent && typeof sharedContent === 'object' ? sharedContent : {};
+  const overrides = pageSpecificContent && typeof pageSpecificContent === 'object' ? pageSpecificContent : {};
+  return mergeConfigTrees(base, overrides, { cloneTarget: true, skipEmpty: true });
+}
+
+export function usePageConfig({ pageId, pagePath, locale, onPageLoaded } = {}) {
+  const siteData = ref(null);
+  const pageContent = ref({});
+  const currentPage = ref({
+    id: '',
+    path: '/',
+    components: [],
+    content: {},
+    meta: {},
+  });
+  const componentKeys = ref([]);
+  const isLoading = ref(false);
+  const loadError = ref(null);
+
+  let cachedConfig = null;
+  let lastLocaleKey = null;
+  let activeRequest = 0;
+
+  function selectPage(config) {
+    const pages = config?.pages || {};
+    const entries = Object.entries(pages);
+
+    const resolveById = (id) => {
+      const data = pages[id];
+      if (!data) return null;
+      return {
+        id,
+        path: data.path ?? '/',
+        components: Array.isArray(data.components) ? [...data.components] : [],
+        content: data.content || {},
+        meta: data.meta || {},
+      };
+    };
+
+    const currentPageId = typeof pageId === 'function' ? pageId() : pageId;
+    const currentPagePath = typeof pagePath === 'function' ? pagePath() : pagePath;
+
+    if (currentPageId) {
+      const direct = resolveById(currentPageId);
+      if (direct) return direct;
+    }
+
+    if (currentPagePath) {
+      const requestedPath = normalizePath(currentPagePath);
+      for (const [id, data] of entries) {
+        if (normalizePath(data.path) === requestedPath) {
+          return {
+            id,
+            path: data.path ?? '/',
+            components: Array.isArray(data.components) ? [...data.components] : [],
+            content: data.content || {},
+            meta: data.meta || {},
+          };
+        }
+      }
+    }
+
+    const homeFallback = resolveById('home');
+    if (homeFallback) return homeFallback;
+
+    if (entries.length > 0) {
+      const [firstId, firstData] = entries[0];
+      return {
+        id: firstId,
+        path: firstData.path ?? '/',
+        components: Array.isArray(firstData.components) ? [...firstData.components] : [],
+        content: firstData.content || {},
+        meta: firstData.meta || {},
+      };
+    }
+
+    return null;
+  }
+
+  async function syncPage() {
+    const requestId = ++activeRequest;
+    const currentLocale = typeof locale === 'function' ? locale() : locale;
+    const localeKey = (currentLocale || '').toString().toLowerCase() || 'default';
+    const shouldReload = !cachedConfig || lastLocaleKey !== localeKey;
+    const localeForConfig = localeKey === 'default' ? undefined : localeKey;
+
+    if (requestId === activeRequest) {
+      isLoading.value = true;
+      if (shouldReload) {
+        componentKeys.value = [];
+      }
+      loadError.value = null;
+    }
+
+    try {
+      if (shouldReload) {
+        cachedConfig = await loadConfigData({ locale: localeForConfig });
+        lastLocaleKey = localeKey;
+      }
+
+      if (requestId !== activeRequest) return;
+
+      siteData.value = cachedConfig;
+      const selectedPage = selectPage(cachedConfig);
+
+      if (!selectedPage) {
+        throw new Error('No pages defined in configuration.');
+      }
+
+      const sharedContent = cachedConfig?.shared?.content;
+      const mergedContent = mergeWithSharedContent(sharedContent, selectedPage.content);
+      currentPage.value = {
+        ...selectedPage,
+        content: mergedContent,
+      };
+      pageContent.value = mergedContent;
+
+      if (typeof onPageLoaded === 'function') {
+        onPageLoaded({ config: cachedConfig, page: selectedPage, content: mergedContent });
+      }
+
+      componentKeys.value = Array.isArray(selectedPage.components)
+        ? selectedPage.components.map((entry) => (entry && typeof entry === 'object' ? { ...entry } : entry))
+        : [];
+    } catch (error) {
+      if (requestId !== activeRequest) return;
+      if (import.meta.env.DEV) {
+        console.error('[PageRenderer] Failed to load page configuration', error);
+      }
+      currentPage.value = { id: '', path: '/', components: [], content: {}, meta: {} };
+      pageContent.value = {};
+      if (typeof onPageLoaded === 'function') {
+        onPageLoaded({ config: null, page: null, content: {} });
+      }
+      componentKeys.value = [];
+      loadError.value = error instanceof Error ? error : new Error(String(error));
+    } finally {
+      if (requestId === activeRequest) {
+        isLoading.value = false;
+      }
+    }
+  }
+
+  if (import.meta.env.SSR) {
+    onServerPrefetch(async () => {
+      await syncPage();
+    });
+  } else {
+    syncPage();
+  }
+
+  const getPageId = typeof pageId === 'function' ? pageId : () => pageId;
+  const getPagePath = typeof pagePath === 'function' ? pagePath : () => pagePath;
+  const getLocale = typeof locale === 'function' ? locale : () => locale;
+
+  watch(
+    () => [getPageId(), getPagePath(), getLocale()],
+    () => { syncPage(); },
+  );
+
+  return {
+    siteData,
+    pageContent,
+    currentPage,
+    componentKeys,
+    isLoading,
+    loadError,
+    syncPage,
+  };
+}

package/src/composables/usePageMeta.js

@@ -0,0 +1,76 @@
+import { computed } from 'vue';
+import { useHead } from '@unhead/vue';
+
+const SPECIAL_PAGE_LABELS = {
+  home: '',
+  terms: 'Terms of Service',
+  privacy: 'Privacy Policy',
+  cookies: 'Cookie Policy',
+};
+
+function inferPageLabel(page) {
+  if (!page) return '';
+  const id = (page.id || '').toLowerCase();
+  if (id && SPECIAL_PAGE_LABELS[id] !== undefined) {
+    return SPECIAL_PAGE_LABELS[id];
+  }
+  const path = (page.path || '').toLowerCase();
+  if (path === '/' || path === '') {
+    return '';
+  }
+  for (const [key, label] of Object.entries(SPECIAL_PAGE_LABELS)) {
+    if (key === 'home') continue;
+    if (path === `/${key}`) {
+      return label;
+    }
+  }
+  const segments = path.replace(/^\/+/, '').split('/').filter(Boolean);
+  if (!segments.length) return '';
+  return segments
+    .map((segment) =>
+      segment
+        .replace(/[-_]+/g, ' ')
+        .replace(/\b\w/g, (char) => char.toUpperCase())
+    )
+    .join(' / ');
+}
+
+export function usePageMeta({ siteData, currentPage }) {
+  const siteTitle = computed(() => siteData.value?.site?.title || '');
+  const siteDescription = computed(() => siteData.value?.site?.description || '');
+
+  const pageMetaTitle = computed(() => {
+    const page = currentPage.value;
+    const site = siteTitle.value;
+    const explicitTitle = page?.meta?.title;
+    if (explicitTitle) {
+      return explicitTitle;
+    }
+    const label = inferPageLabel(page);
+    if (!label) {
+      return site;
+    }
+    return site ? `${label} — ${site}` : label;
+  });
+
+  const pageMetaDescription = computed(() => {
+    const explicitDescription = currentPage.value?.meta?.description;
+    if (explicitDescription && explicitDescription.trim()) {
+      return explicitDescription.trim();
+    }
+    return siteDescription.value || '';
+  });
+
+  useHead(() => {
+    const description = pageMetaDescription.value;
+    const meta = description
+      ? [{ name: 'description', content: description, key: 'description' }]
+      : [];
+    return {
+      title: pageMetaTitle.value,
+      meta,
+    };
+  });
+
+  return { pageMetaTitle, pageMetaDescription };
+}

package/src/composables/usePromoBackgroundStyles.js

@@ -0,0 +1,67 @@
+import { computed, unref } from 'vue';
+
+function selectLargestEntry(srcset = '') {
+  if (!srcset) return '';
+  const candidates = srcset
+    .split(',')
+    .map((entry) => entry.trim())
+    .filter(Boolean)
+    .map((entry) => {
+      const [url, descriptor] = entry.split(/\s+/);
+      let score = 0;
+      if (descriptor?.endsWith('w')) {
+        score = Number.parseInt(descriptor.replace(/\D+/g, ''), 10) || 0;
+      } else if (descriptor?.endsWith('x')) {
+        score = Number.parseFloat(descriptor.replace(/[^\d.]/g, '')) * 1000;
+      }
+      return { url, score };
+    })
+    .filter(({ url }) => Boolean(url))
+    .sort((a, b) => b.score - a.score);
+
+  return candidates.length ? candidates[0].url : '';
+}
+
+/**
+ * Build a CSS background-image declaration that respects the neon backdrop toggle
+ * and reuses the responsive image metadata returned by `useResponsiveImage`.
+ * @param {object} options
+ * @param {{
+ *   sources: import('vue').MaybeRefOrGetter<Array<{ type: string, srcset: string }>>,
+ *   fallbackSrc: import('vue').MaybeRefOrGetter<string>,
+ *   fallbackFormat: import('vue').MaybeRefOrGetter<string>
+ * }} options.imageSet
+ */
+export function usePromoBackgroundStyles({ imageSet }) {
+  return computed(() => {
+    const fallbackSrc = unref(imageSet?.fallbackSrc) || '';
+    const fallbackFormat = (unref(imageSet?.fallbackFormat) || 'jpg').toLowerCase();
+    const sources = unref(imageSet?.sources) || [];
+
+    const formatEntries = [];
+
+    sources.forEach((source) => {
+      const largest = selectLargestEntry(source?.srcset);
+      if (largest) {
+        formatEntries.push(`url("${largest}") type("${source?.type}") 1x`);
+      }
+    });
+
+    if (fallbackSrc) {
+      const fallbackMime = fallbackFormat === 'jpg' ? 'jpeg' : fallbackFormat;
+      formatEntries.push(`url("${fallbackSrc}") type("image/${fallbackMime}") 1x`);
+    }
+
+    const cssImageSet = formatEntries.length ? `image-set(${formatEntries.join(', ')})` : '';
+    let style = '';
+
+    if (fallbackSrc) {
+      style += `background-image: url("${fallbackSrc}");`;
+    }
+    if (cssImageSet) {
+      style += `background-image: ${cssImageSet};`;
+    }
+
+    return style;
+  });
+}

package/src/constants/locales.js

@@ -0,0 +1,20 @@
+// Central list of locales supported by the router and SSG tooling
+export const SUPPORTED_LOCALES = [
+  'en',
+  'fr',
+  'es',
+  'de',
+  'ja',
+  'ko',
+  'pt',
+  'ru',
+  'tr',
+  'vi',
+  'id',
+  'zh',
+  'th',
+  'hi',
+  'fil',
+];
+
+export default SUPPORTED_LOCALES;