@koehler8/cms 1.0.0-beta.20 → 1.0.0-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koehler8/cms",
-  "version": "1.0.0-beta.20",
+  "version": "1.0.0-beta.21",
   "description": "Vertex CMS — lightweight, config-driven Vue 3 framework with theming, extensions, and SSG support",
   "license": "MIT",
   "type": "module",

package/src/composables/usePageConfig.js

@@ -50,6 +50,7 @@ export function usePageConfig({ pageId, pagePath, locale, onPageLoaded } = {}) {
         content: data.content || {},
         meta: data.meta || {},
         draft: data.draft,
+        jsonld: data.jsonld,
       };
     };
 
@@ -72,6 +73,7 @@ export function usePageConfig({ pageId, pagePath, locale, onPageLoaded } = {}) {
             content: data.content || {},
             meta: data.meta || {},
             draft: data.draft,
+            jsonld: data.jsonld,
           };
         }
       }
@@ -113,6 +115,7 @@ export function usePageConfig({ pageId, pagePath, locale, onPageLoaded } = {}) {
         content: firstData.content || {},
         meta: firstData.meta || {},
         draft: firstData.draft,
+        jsonld: firstData.jsonld,
       };
     }
 

package/src/composables/usePageMeta.js

@@ -3,8 +3,20 @@ import { useHead } from '@unhead/vue';
 import { isPathDraft } from '../utils/draftMode.js';
 import { buildCanonicalUrl } from '../utils/canonicalUrl.js';
 import { buildSocialMeta } from '../utils/socialMeta.js';
+import { buildJsonLdScripts } from '../utils/jsonLd.js';
 import { availableLocales as configAvailableLocales, baseLocale as configBaseLocale } from '../utils/loadConfig.js';
 
+// Site-verification meta-tag names per platform. Authors set
+// `site.siteVerification.<platform>` in site.json with the token issued by
+// the platform's webmaster console; we emit one <meta> per platform.
+const SITE_VERIFICATION_META = {
+  google: 'google-site-verification',
+  bing: 'msvalidate.01',
+  yandex: 'yandex-verification',
+  pinterest: 'p:domain_verify',
+  facebook: 'facebook-domain-verification',
+};
+
 const SPECIAL_PAGE_LABELS = {
   home: '',
   terms: 'Terms of Service',
@@ -162,6 +174,22 @@ export function usePageMeta({ siteData, currentPage, locale }) {
       isNotFound: isNotFound.value,
     });
     for (const entry of social) meta.push(entry);
+
+    // Site-verification meta tags. These are emitted on every page (not
+    // just home) — verification platforms typically only check homepage
+    // but emitting site-wide is harmless and matches what most CMSs do.
+    const verification = siteData.value?.site?.siteVerification;
+    if (verification && typeof verification === 'object') {
+      for (const [platform, token] of Object.entries(verification)) {
+        const metaName = SITE_VERIFICATION_META[platform];
+        if (!metaName) continue;
+        if (typeof token !== 'string') continue;
+        const trimmed = token.trim();
+        if (!trimmed) continue;
+        meta.push({ name: metaName, content: trimmed, key: `verify-${platform}` });
+      }
+    }
+
     const link = [];
     if (canonicalHref.value) {
       link.push({ rel: 'canonical', href: canonicalHref.value, key: 'canonical' });
@@ -169,10 +197,19 @@ export function usePageMeta({ siteData, currentPage, locale }) {
     for (const entry of hreflangLinks.value) {
       link.push(entry);
     }
+
+    const script = buildJsonLdScripts({
+      siteData: siteData.value,
+      currentPage: currentPage.value,
+      isDraft: isDraft.value,
+      isNotFound: isNotFound.value,
+    });
+
     return {
       title: pageMetaTitle.value,
       meta,
       link,
+      script,
     };
   });
 

package/src/utils/jsonLd.js

@@ -0,0 +1,58 @@
+/**
+ * Normalize per-page + site-wide JSON-LD blocks into a flat list of
+ * @unhead/vue script descriptors ready for `useHead({ script: [...] })`.
+ *
+ * Authoring conventions in `pages/{id}.json` and `site.json`:
+ *
+ *   "jsonld": { "@context": "https://schema.org", "@type": "Article", ... }
+ *
+ * or for multiple blocks on a page:
+ *
+ *   "jsonld": [
+ *     { "@type": "Article", ... },
+ *     { "@type": "BreadcrumbList", ... }
+ *   ]
+ *
+ * Page blocks ALWAYS append to site blocks (there's no "override" semantic
+ * — each schema.org block is an independent assertion, so listing both is
+ * the right behavior for a sitewide Organization + a page-specific Article).
+ *
+ * Skipped entirely on drafts and 404s; structured data on those would
+ * mislead crawlers (drafts shouldn't be indexed; 404s aren't authoritative).
+ */
+
+function normalizeBlock(block) {
+  if (!block || typeof block !== 'object' || Array.isArray(block)) return null;
+  // Inject the schema.org @context if the author omitted it. JSON-LD blocks
+  // without @context are ignored by all major consumers, so adding it
+  // defensively is the right default.
+  if (!block['@context']) {
+    return { '@context': 'https://schema.org', ...block };
+  }
+  return block;
+}
+
+function collectBlocks(input) {
+  if (!input) return [];
+  if (Array.isArray(input)) {
+    return input.map(normalizeBlock).filter(Boolean);
+  }
+  const single = normalizeBlock(input);
+  return single ? [single] : [];
+}
+
+export function buildJsonLdScripts({ siteData, currentPage, isDraft, isNotFound } = {}) {
+  if (isDraft || isNotFound) return [];
+
+  const siteBlocks = collectBlocks(siteData?.site?.jsonld);
+  const pageBlocks = collectBlocks(currentPage?.jsonld);
+
+  const all = [...siteBlocks, ...pageBlocks];
+  if (all.length === 0) return [];
+
+  return all.map((block, i) => ({
+    type: 'application/ld+json',
+    innerHTML: JSON.stringify(block),
+    key: `jsonld-${block['@type'] || 'block'}-${i}`,
+  }));
+}

package/src/utils/webAppManifest.js

@@ -0,0 +1,82 @@
+/**
+ * Build a Web App Manifest (manifest.json) from the inflated site config.
+ *
+ * Returns the manifest object — the plugin JSON-stringifies and writes it
+ * to `siteRoot/public/manifest.json`. Browsers consume the file when the
+ * page emits `<link rel="manifest" href="/manifest.json">`.
+ *
+ * Authoring conventions in `site.json`:
+ *
+ *   "manifest.name": "...",          // overrides site.title
+ *   "manifest.shortName": "...",     // overrides truncated site.title
+ *   "manifest.themeColor": "#...",   // mobile chrome / splash bar color
+ *   "manifest.backgroundColor": "#...",  // splash background
+ *   "manifest.startUrl": "/",        // landing path on launch
+ *   "manifest.display": "standalone",// browser, standalone, fullscreen, minimal-ui
+ *   "manifest.icons[0].src": "...",  // override default icon set
+ *   "manifest.icons[0].sizes": "256x256",
+ *   "manifest.icons[0].type": "image/png"
+ *
+ * Defaults are derived from existing site config and the icons that
+ * cms-generate-public-assets writes (favicon-256.png + favicon.ico).
+ */
+
+const DEFAULT_DISPLAY = 'standalone';
+const DEFAULT_BG = '#ffffff';
+const DEFAULT_THEME = '#ffffff';
+const DEFAULT_START = '/';
+
+function trim(value, fallback = '') {
+  if (typeof value !== 'string') return fallback;
+  const t = value.trim();
+  return t || fallback;
+}
+
+function defaultIcons() {
+  // Mirrors what cms-generate-public-assets writes into public/.
+  // Browsers pick the best size; the 256x256 PNG is the primary, the
+  // .ico is the legacy fallback for older Android.
+  return [
+    { src: '/favicon-256.png', sizes: '256x256', type: 'image/png', purpose: 'any maskable' },
+    { src: '/favicon.ico', sizes: '64x64 32x32 16x16', type: 'image/x-icon' },
+  ];
+}
+
+export function buildWebAppManifest(siteConfig) {
+  const site = (siteConfig && siteConfig.site) || {};
+  const m = (site.manifest && typeof site.manifest === 'object') ? site.manifest : {};
+
+  const siteTitle = trim(site.title);
+  const name = trim(m.name, siteTitle) || 'Site';
+  const shortName = trim(m.shortName, name.length <= 12 ? name : name.slice(0, 12));
+
+  const description = trim(m.description, trim(site.description));
+
+  const themeColor = trim(m.themeColor, DEFAULT_THEME);
+  const backgroundColor = trim(m.backgroundColor, DEFAULT_BG);
+  const startUrl = trim(m.startUrl, DEFAULT_START);
+  const display = trim(m.display, DEFAULT_DISPLAY);
+  const lang = trim(m.lang);
+
+  const customIcons = Array.isArray(m.icons)
+    ? m.icons
+        .filter((icon) => icon && typeof icon === 'object' && typeof icon.src === 'string')
+        .map((icon) => ({ ...icon }))
+    : null;
+  const icons = customIcons && customIcons.length ? customIcons : defaultIcons();
+
+  const manifest = {
+    name,
+    short_name: shortName,
+    start_url: startUrl,
+    display,
+    theme_color: themeColor,
+    background_color: backgroundColor,
+    icons,
+  };
+
+  if (description) manifest.description = description;
+  if (lang) manifest.lang = lang;
+
+  return manifest;
+}

package/templates/index.html

@@ -5,12 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!--
       Per-page <title>, <meta name="description">, og:*, twitter:*, canonical,
-      and hreflang are emitted by usePageMeta at SSG render time. Site-wide
-      structured-data (the JSON-LD Organization snippet below) and the
-      static <link rel="icon"> remain in this template since they don't
-      vary per page.
+      hreflang, and JSON-LD blocks are emitted by usePageMeta at SSG render
+      time. Site-wide invariants (favicon, web-app manifest, the JSON-LD
+      Organization snippet, mobile-chrome theme color) live here.
     -->
     <link rel="icon" href="/favicon.ico">
+    <link rel="manifest" href="/manifest.json">
+    <meta name="theme-color" content="<%= manifestThemeColor %>">
     <script type="application/ld+json">
     {
       "@context": "https://schema.org",

package/vite-plugin.js

@@ -15,6 +15,7 @@ import vue from '@vitejs/plugin-vue';
 import { inflateFlatConfig } from './src/utils/inflateFlatConfig.js';
 import { buildRobotsTxt } from './src/utils/robotsGenerator.js';
 import { buildSitemap, getSitemapUrl } from './src/utils/sitemapGenerator.js';
+import { buildWebAppManifest } from './src/utils/webAppManifest.js';
 import { sha256Hex } from './src/utils/sha256.js';
 
 // ---- Helpers ----
@@ -117,6 +118,7 @@ function extractSiteMetadata(siteConfig) {
     url: siteUrl = '',
     googleId: siteGoogleId = '',
     sameAs: siteSameAs = [],
+    manifest: siteManifest = {},
   } = siteConfig.site || {};
 
   const siteSameAsList = Array.isArray(siteSameAs)
@@ -124,7 +126,14 @@ function extractSiteMetadata(siteConfig) {
     : [];
   const siteSameAsJson = JSON.stringify(siteSameAsList);
 
-  return { siteTitle, siteDescription, siteUrl, siteGoogleId, siteSameAsJson };
+  // Mobile chrome bar / PWA splash color. Defaults match buildWebAppManifest's
+  // default so the rendered <meta name="theme-color"> matches whatever
+  // manifest.json advertises.
+  const manifestThemeColor = (typeof siteManifest.themeColor === 'string'
+    ? siteManifest.themeColor.trim()
+    : '') || '#ffffff';
+
+  return { siteTitle, siteDescription, siteUrl, siteGoogleId, siteSameAsJson, manifestThemeColor };
 }
 
 const __filename = fileURLToPath(import.meta.url);
@@ -354,6 +363,7 @@ export default function cmsPlugin(options = {}) {
       siteUrl: metadata.siteUrl,
       siteGoogleId: metadata.siteGoogleId,
       siteSameAsJson: metadata.siteSameAsJson,
+      manifestThemeColor: metadata.manifestThemeColor,
     });
 
     const processed = html.replace(
@@ -418,6 +428,16 @@ export default function cmsPlugin(options = {}) {
     const sitemapUrl = sitemapXml ? getSitemapUrl(siteConfig) : '';
     const robotsBody = buildRobotsTxt(siteConfig, sitemapUrl);
     fs.writeFileSync(path.join(sitePublicDir, 'robots.txt'), robotsBody, 'utf-8');
+
+    // Web App Manifest. The template emits <link rel="manifest"> on every
+    // page; browsers use this to enable Add-to-Home-Screen + control
+    // splash colors when the site is launched from a homescreen icon.
+    const manifest = buildWebAppManifest(siteConfig);
+    fs.writeFileSync(
+      path.join(sitePublicDir, 'manifest.json'),
+      JSON.stringify(manifest, null, 2) + '\n',
+      'utf-8',
+    );
   };
 
   const cmsCore = {
@@ -832,6 +852,7 @@ export const assetUrlMap = resolver.assetUrlMap;
               siteUrl: metadata.siteUrl,
               siteGoogleId: metadata.siteGoogleId,
               siteSameAsJson: metadata.siteSameAsJson,
+              manifestThemeColor: metadata.manifestThemeColor,
             });
 
             html = html.replace(