@koehler8/cms 1.0.0-beta.9 → 1.1.0

package/scripts/validate-extensions.mjs

@@ -1,392 +1,60 @@
-import { readdir, readFile } from 'node:fs/promises';
-import { join, resolve } from 'node:path';
-import { fileURLToPath, pathToFileURL } from 'node:url';
-
-import { createRequire } from 'node:module';
-import Ajv from 'ajv/dist/2020.js';
-import addFormats from 'ajv-formats';
-
-const require = createRequire(import.meta.url);
-const packageJson = require('../package.json');
-import { compareVersions } from '../src/utils/semver.js';
-import { validateRequiredContentPaths } from '../src/utils/contentRequirements.js';
-
-const ROOT_DIR = resolve(fileURLToPath(new URL('..', import.meta.url)));
-const EXTENSIONS_DIR = join(ROOT_DIR, 'extensions');
-const SITES_DIR = join(ROOT_DIR, 'sites');
-
-const ajv = new Ajv({ allErrors: true, strict: false });
-addFormats(ajv);
-const APP_VERSION = process.env.VITE_APP_VERSION || packageJson.version || '0.0.0';
-const normalizeSlug = (value) => (value || '').toString().trim().toLowerCase();
-
-function isJsonFile(fileName) {
-  return fileName.toLowerCase().endsWith('.json');
-}
-
-async function collectExtensionPackages(dir) {
-  const entries = await readdir(dir, { withFileTypes: true });
-  const packages = [];
-
-  for (const entry of entries) {
-    if (entry.name.startsWith('.')) continue;
-    const absolute = join(dir, entry.name);
-    if (entry.isDirectory()) {
-      const nested = await collectExtensionPackages(absolute);
-      packages.push(...nested);
-      continue;
-    }
-    if (entry.name === 'extension.config.json') {
-      packages.push(absolute);
-    }
-  }
-
-  return packages;
-}
-
-async function loadJson(filePath) {
-  const raw = await readFile(filePath, 'utf-8');
-  return JSON.parse(raw);
-}
-
-async function loadExtensionRegistry() {
-  const manifestPaths = await collectExtensionPackages(EXTENSIONS_DIR);
-  const map = new Map();
-
-  for (const manifestPath of manifestPaths) {
-    const manifestDir = manifestPath.replace(/extension\.config\.json$/i, '');
-    const manifest = await loadJson(manifestPath);
-    const slug = manifest.slug || manifestDir;
-    map.set(slug, {
-      manifest,
-      dir: manifestDir,
-    });
-  }
-
-  return map;
-}
-
-async function importSchema(schemaPath) {
-  if (!schemaPath) return null;
-  const lower = schemaPath.toLowerCase();
-  if (lower.endsWith('.json')) {
-    const raw = await readFile(schemaPath, 'utf-8');
-    return JSON.parse(raw);
-  }
-  const url = pathToFileURL(schemaPath).href;
-  const module = await import(url);
-  return module?.default ?? module;
-}
-
-function buildComponentMaps(extensionRegistry) {
-  const componentMap = new Map();
-  const extensionNameToSources = new Map();
-
-  for (const { manifest, dir } of extensionRegistry.values()) {
-    if (!Array.isArray(manifest.components)) continue;
-    const slug = typeof manifest.slug === 'string' ? manifest.slug.trim() : '';
-    const normalizedSlug = slug ? slug.toLowerCase() : '';
-
-    for (const component of manifest.components) {
-      if (!component?.name) continue;
-      const entry = {
-        manifest,
-        dir,
-        component,
-        slug,
-        normalizedSlug,
-      };
-      if (normalizedSlug) {
-        const sourceKey = `${normalizedSlug}:${component.name}`;
-        componentMap.set(sourceKey, entry);
-        const existingSources = extensionNameToSources.get(component.name) || new Set();
-        existingSources.add(normalizedSlug);
-        extensionNameToSources.set(component.name, existingSources);
-      }
-    }
-  }
-
-  return {
-    componentMap,
-    extensionNameToSources,
-  };
-}
-
-async function collectSiteConfigs(dir) {
-  const configs = [];
-  const entries = await readdir(dir, { withFileTypes: true });
-  for (const entry of entries) {
-    if (entry.name.startsWith('.')) continue;
-    const absolute = join(dir, entry.name);
-    if (entry.isDirectory()) {
-      const nested = await collectSiteConfigs(absolute);
-      configs.push(...nested);
-      continue;
-    }
-    if (isJsonFile(entry.name)) {
-      configs.push(absolute);
+/**
+ * cms-validate-extensions — validate a SITE's extension manifests.
+ *
+ * Validates, against the framework's JSON Schema (the same validation the
+ * Vite plugin runs at build time):
+ *   - every site-local extension at <projectRoot>/extensions/<slug>/
+ *   - any extension package names passed as positional arguments
+ *     (e.g. `cms-validate-extensions @koehler8/cms-ext-compliance`)
+ *
+ * The project root is the parent of --site-dir (default ./site), matching
+ * how the Vite plugin resolves it. Exits non-zero on any invalid manifest.
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { validateExtensionManifests } from './lib/extension-manifests.mjs';
+
+const siteDir = process.env.CMS_SITE_DIR
+  ? path.resolve(process.env.CMS_SITE_DIR)
+  : path.resolve(process.cwd(), './site');
+const projectRoot = path.dirname(siteDir);
+
+const packageSpecs = (process.env.CMS_VALIDATE_PACKAGES || '')
+  .split(',')
+  .map((s) => s.trim())
+  .filter(Boolean);
+
+const localSpecs = [];
+const localExtensionsDir = path.join(projectRoot, 'extensions');
+if (fs.existsSync(localExtensionsDir)) {
+  for (const entry of fs.readdirSync(localExtensionsDir, { withFileTypes: true })) {
+    if (!entry.isDirectory()) continue;
+    if (fs.existsSync(path.join(localExtensionsDir, entry.name, 'extension.config.json'))) {
+      localSpecs.push(`./extensions/${entry.name}`);
     }
   }
-  return configs;
 }
 
-async function validateConfigBlocks({
-  siteConfigPath,
-  siteConfig,
-  componentMap,
-  extensionNameToSources,
-  appVersion,
-}) {
-  const failures = [];
-
-  if (!siteConfig?.pages || typeof siteConfig.pages !== 'object') {
-    return failures;
-  }
-
-  for (const [pageKey, pageConfig] of Object.entries(siteConfig.pages)) {
-    if (!pageConfig || typeof pageConfig !== 'object') continue;
-    const components = Array.isArray(pageConfig.components) ? pageConfig.components : [];
-    const content = pageConfig.content && typeof pageConfig.content === 'object' ? pageConfig.content : {};
-    const normalizedPageKey = (pageKey || '').toString().trim().toLowerCase();
-
-    for (const entry of components) {
-      let name = '';
-      let configKeyOverride;
-      let enabled = true;
-      let source;
-
-      if (typeof entry === 'string') {
-        name = entry;
-      } else if (entry && typeof entry === 'object') {
-        enabled = entry.enabled !== false;
-        name = typeof entry.name === 'string' ? entry.name : '';
-        configKeyOverride = typeof entry.configKey === 'string' && entry.configKey.trim()
-          ? entry.configKey.trim()
-          : undefined;
-        source = typeof entry.source === 'string' ? entry.source : undefined;
-      } else {
-        continue;
-      }
-
-      if (typeof name === 'string') {
-        name = name.trim();
-      }
-
-      if (!enabled || !name) continue;
-
-      const normalizedSource = source ? normalizeSlug(source) : '';
-      const sourcesForName = extensionNameToSources.get(name);
-      const isExtensionName = Boolean(sourcesForName && sourcesForName.size);
-
-      if (isExtensionName && !normalizedSource) {
-        failures.push({
-          siteConfigPath,
-          pageKey,
-          componentName: name,
-          message: `Component comes from an extension and must specify "source". Available sources: ${Array.from(sourcesForName).join(', ')}`,
-        });
-        continue;
-      }
-
-      if (isExtensionName && normalizedSource && !sourcesForName.has(normalizedSource)) {
-        failures.push({
-          siteConfigPath,
-          pageKey,
-          componentName: name,
-          source: normalizedSource,
-          message: `Component is not provided by the "${normalizedSource}" extension.`,
-        });
-        continue;
-      }
-
-      if (!isExtensionName && normalizedSource) {
-        failures.push({
-          siteConfigPath,
-          pageKey,
-          componentName: name,
-          source: normalizedSource,
-          message: 'Component does not belong to an extension so "source" must be omitted.',
-        });
-        continue;
-      }
-
-      if (!isExtensionName) {
-        continue;
-      }
-
-      const lookupKey = `${normalizedSource}:${name}`;
-      const componentMeta = componentMap.get(lookupKey);
-      if (!componentMeta) {
-        failures.push({
-          siteConfigPath,
-          pageKey,
-          componentName: name,
-          source: normalizedSource,
-          message: 'Component metadata could not be resolved for the specified source.',
-        });
-        continue;
-      }
-      const { component, dir } = componentMeta;
-      const configKey = configKeyOverride || component.configKey;
-      if (!configKey) continue;
-      const block = content[configKey];
-
-      if (Array.isArray(component.allowedPages) && component.allowedPages.length) {
-        const allowed = component.allowedPages
-          .map((slug) => (slug || '').toString().trim().toLowerCase())
-          .filter(Boolean);
-        if (allowed.length && !allowed.includes(normalizedPageKey)) {
-          failures.push({
-            siteConfigPath,
-            pageKey,
-            componentName: name,
-            configKey,
-            source: normalizedSource || undefined,
-            message: `Component is not allowed on this page (allowed: ${allowed.join(', ')}).`,
-          });
-          continue;
-        }
-      }
-
-      if (component.minAppVersion && compareVersions(appVersion, component.minAppVersion) < 0) {
-        failures.push({
-          siteConfigPath,
-          pageKey,
-          componentName: name,
-          configKey,
-          source: normalizedSource || undefined,
-          message: `Component requires app version ${component.minAppVersion} or higher (current ${appVersion}).`,
-        });
-        continue;
-      }
+const specs = [...localSpecs, ...packageSpecs];
 
-      if (Array.isArray(component.requiredContent) && component.requiredContent.length) {
-        const { isValid, missing } = validateRequiredContentPaths(block, component.requiredContent);
-        if (!isValid) {
-          failures.push({
-            siteConfigPath,
-            pageKey,
-            componentName: name,
-            configKey,
-            source: normalizedSource || undefined,
-            message: `Missing required content paths: ${missing.join(', ')}`,
-          });
-          continue;
-        }
-      }
-
-      const schemaRef = component.propsInterface;
-      if (!schemaRef) continue;
-
-      const schemaPath = join(dir, schemaRef.replace(/^\.\/+/, ''));
-      let schema;
-      let importFailed = false;
-      try {
-        schema = await importSchema(schemaPath);
-      } catch (error) {
-        importFailed = true;
-        if (!(/Cannot use import statement/.test(String(error)) || /Unexpected reserved word/.test(String(error)))) {
-          throw error;
-        }
-      }
-      if (importFailed) {
-        schema = await loadJson(schemaPath);
-      }
-      if (!schema) {
-        failures.push({
-          siteConfigPath,
-          pageKey,
-          componentName: name,
-          configKey,
-          source: normalizedSource || undefined,
-          message: `Schema "${schemaRef}" could not be loaded.`,
-        });
-        continue;
-      }
-
-      const validate = ajv.compile(schema);
-      const valid = validate(block);
-      if (!valid) {
-        failures.push({
-          siteConfigPath,
-          pageKey,
-          componentName: name,
-          configKey,
-          source: normalizedSource || undefined,
-          errors: validate.errors,
-        });
-      }
-    }
-  }
-
-  return failures;
+if (specs.length === 0) {
+  console.log(`No extension manifests found (looked in ${localExtensionsDir}, no packages named).`);
+  console.log('Nothing to validate. Pass package names as arguments to check installed extensions.');
+  process.exit(0);
 }
 
-async function main() {
-  const extensionRegistry = await loadExtensionRegistry();
-  if (!extensionRegistry.size) {
-    console.warn('No extension manifests found under /extensions.');
-    return;
+try {
+  const validated = await validateExtensionManifests(specs, projectRoot);
+  for (const { spec, slug, componentNames } of validated) {
+    console.log(`✓ ${spec} (slug "${slug}", ${componentNames.size} component${componentNames.size === 1 ? '' : 's'})`);
   }
-  const { componentMap, extensionNameToSources } = buildComponentMaps(extensionRegistry);
-
-  const siteConfigs = await collectSiteConfigs(SITES_DIR);
-  const failures = [];
-
-  for (const siteConfigPath of siteConfigs) {
-    let siteConfig;
-    try {
-      siteConfig = await loadJson(siteConfigPath);
-    } catch (error) {
-      failures.push({
-        siteConfigPath,
-        message: `Failed to parse JSON: ${error.message}`,
-      });
-      continue;
-    }
-    const blockFailures = await validateConfigBlocks({
-      siteConfigPath,
-      siteConfig,
-      componentMap,
-      extensionNameToSources,
-      appVersion: APP_VERSION,
-    });
-    failures.push(...blockFailures);
-  }
-
-  if (failures.length) {
-    console.error('Extension content validation failed:');
-    failures.forEach((failure) => {
-      console.error(`\n- ${failure.siteConfigPath}`);
-      if (failure.pageKey) {
-        console.error(`  Page: ${failure.pageKey}`);
-      }
-      if (failure.componentName) {
-        console.error(`  Component: ${failure.componentName}`);
-      }
-      if (failure.source) {
-        console.error(`  Source: ${failure.source}`);
-      }
-      if (failure.configKey) {
-        console.error(`  Config key: ${failure.configKey}`);
-      }
-      if (failure.message) {
-        console.error(`  Error: ${failure.message}`);
-      }
-      if (failure.errors) {
-        failure.errors.forEach((error) => {
-          console.error(`  • ${error.instancePath || '/'} ${error.message}`);
-        });
-      }
-    });
-    process.exitCode = 1;
-    return;
+  const skipped = specs.length - validated.length;
+  if (skipped > 0) {
+    console.warn(`⚠ ${skipped} spec(s) had no extension.config.json to validate (see warnings above).`);
   }
-
-  console.log('All extension content blocks validated successfully.');
-}
-
-main().catch((error) => {
-  console.error(error);
+  console.log('\nAll extension manifests validated successfully.');
+} catch (err) {
+  console.error(err.message);
   process.exitCode = 1;
-});
+}

package/scripts/validate-themes.mjs

@@ -1,11 +1,26 @@
+/**
+ * cms-validate-themes — validate theme manifests.
+ *
+ * Validates:
+ *   - the framework's bundled themes (themes/ at the package root)
+ *   - a site's local themes at <projectRoot>/themes/<slug>/ when --site-dir
+ *     is given (project root = parent of the site dir, matching the plugin)
+ *
+ * Exits non-zero on any invalid manifest.
+ */
+
 import { readdir } from 'node:fs/promises';
-import { join, resolve } from 'node:path';
+import { existsSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import { validateThemeManifest } from '../src/themes/themeValidator.js';
 
 const MANIFEST_PATTERN = /theme\.config\.(js|mjs|json)$/;
 const ROOT_DIR = resolve(fileURLToPath(new URL('..', import.meta.url)));
-const THEMES_DIR = join(ROOT_DIR, 'themes');
+const FRAMEWORK_THEMES_DIR = join(ROOT_DIR, 'themes');
+
+const siteDir = process.env.CMS_SITE_DIR ? resolve(process.env.CMS_SITE_DIR) : '';
+const SITE_THEMES_DIR = siteDir ? join(dirname(siteDir), 'themes') : '';
 
 async function collectManifestPaths(dir) {
   const entries = await readdir(dir, { withFileTypes: true });
@@ -29,14 +44,31 @@ async function loadManifestFromPath(filePath) {
 }
 
 async function main() {
-  const manifestPaths = await collectManifestPaths(THEMES_DIR);
+  const seen = new Set();
+  const manifestPaths = [];
+  for (const dir of [FRAMEWORK_THEMES_DIR, SITE_THEMES_DIR]) {
+    if (!dir || !existsSync(dir)) continue;
+    for (const p of await collectManifestPaths(dir)) {
+      if (seen.has(p)) continue;
+      seen.add(p);
+      manifestPaths.push(p);
+    }
+  }
+
   if (!manifestPaths.length) {
-    console.warn('No theme manifests found under /themes.');
+    console.log('No theme manifests found (framework themes/ and site themes/ are both empty).');
     return;
   }
+
   const failures = [];
   for (const manifestPath of manifestPaths) {
-    const manifest = await loadManifestFromPath(manifestPath);
+    let manifest;
+    try {
+      manifest = await loadManifestFromPath(manifestPath);
+    } catch (error) {
+      failures.push({ path: manifestPath, errors: [`failed to load: ${error.message}`] });
+      continue;
+    }
     const { valid, errors } = validateThemeManifest(manifest, { throwOnError: false });
     if (!valid) {
       failures.push({ path: manifestPath, errors });

package/src/components/About.vue

@@ -1,5 +1,6 @@
 <template>
   <section
+    v-if="hasContent"
     id="about"
     class="about-section section-shell section-shell--tight ui-section--overlay"
     data-analytics-section="about-overview"
@@ -99,6 +100,9 @@ const pageContent = inject('pageContent', ref({}));
 const { resolve: resolveComingSoon } = useComingSoonResolver(pageContent);
 
 const aboutContent = computed(() => pageContent.value?.about || {});
+// components[] contract: no content.about block → render nothing (never
+// empty headings and image frames).
+const hasContent = computed(() => Object.keys(aboutContent.value).length > 0);
 
 const getAboutValue = (key, fallback) => {
   const value = aboutContent.value?.[key];
@@ -115,12 +119,10 @@ const aboutTopButton = computed(() => getAboutValue('topButton', {}));
 const aboutBottomButton = computed(() => getAboutValue('bottomButton', {}));
 
 const topImage = useResponsiveImage('img/about-top', {
-  widths: [320, 900],
   fallbackFormat: 'jpg',
 });
 const topImageHandleError = topImage.handleError;
 const bottomImage = useResponsiveImage('img/about-bottom', {
-  widths: [320, 600],
   fallbackFormat: 'jpg',
 });
 const bottomImageHandleError = bottomImage.handleError;

package/src/components/AboutValue.vue

@@ -1,6 +1,6 @@
 <template>
-  <section id="about" class="about-value-section section-shell" data-analytics-section="about-value">
-    <div v-if="hasValueProps" class="container">
+  <section v-if="hasValueProps" id="about-value" class="about-value-section section-shell" data-analytics-section="about-value">
+    <div class="container">
       <div class="about-value__grid">
         <div class="about-value__media">
           <div
@@ -159,7 +159,6 @@ const hasValueProps = computed(() => {
 });
 
 const DEFAULT_VALUE_IMAGE_PATH = 'img/about-top';
-const DEFAULT_VALUE_IMAGE_WIDTHS = [320, 900];
 const DEFAULT_VALUE_IMAGE_FALLBACK = 'jpg';
 
 const valueImagePath = computed(() => {
@@ -179,7 +178,9 @@ const valueImageWidths = computed(() => {
   if (Array.isArray(widths) && widths.length) {
     return widths;
   }
-  return DEFAULT_VALUE_IMAGE_WIDTHS;
+  // No site override → useResponsiveImage falls back to the pipeline's
+  // resolved width matrix.
+  return undefined;
 });
 
 const valueImageFallbackFormat = computed(() => {

package/src/components/ComingSoon.vue

@@ -390,11 +390,22 @@ function handleActionClick(event, action) {
 }
 
 .coming-soon-action:hover,
-.coming-soon-action:focus {
+.coming-soon-action:focus-visible {
   transform: translateY(-2px);
   opacity: 0.92;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .coming-soon-action {
+    transition: none;
+  }
+
+  .coming-soon-action:hover,
+  .coming-soon-action:focus-visible {
+    transform: none;
+  }
+}
+
 @media (max-width: 767px) {
   .coming-soon-shell {
     padding: 1.75rem;