meno-core 1.0.50 → 1.0.52

package/lib/server/routes/pages.ts

@@ -3,6 +3,7 @@
  * Handles page route requests with SSR, i18n, and CMS support
  */
 
+import { randomBytes } from 'crypto';
 import type { RouteContext } from './index';
 import { generateSSRHTML, type SSRHTMLResult } from '../ssrRenderer';
 import { getStaticFilePath } from '../../shared/pathUtils';
@@ -18,6 +19,24 @@ import { readTextFile, fileExists, serveFile } from '../runtime';
 /** HTTP header sent by the studio's /__static__/ proxy to flag editor-preview requests. */
 const EDITOR_HEADER = 'x-meno-editor';
 
+/**
+ * Response header carrying the per-request CSP nonce. The Electron main
+ * process (electron-app/main/window.js) reads this in onHeadersReceived and
+ * splices `'nonce-${nonce}'` into the script-src directive while dropping
+ * `'unsafe-inline'`, so the inline scripts the SSR pipeline emits (config,
+ * CMS context, live reload, scroll sync, component script) keep executing
+ * without re-enabling unrestricted inline JavaScript.
+ */
+const CSP_NONCE_HEADER = 'x-meno-csp-nonce';
+
+/**
+ * Generate a fresh per-request CSP nonce.
+ * 16 bytes of randomness → 24 base64 chars, well above CSP3's 128-bit floor.
+ */
+function generateCspNonce(): string {
+  return randomBytes(16).toString('base64');
+}
+
 /**
  * Handle page route requests
  */
@@ -33,6 +52,12 @@ export async function handlePageRoute(
   // Direct access to the SSR preview server (e.g., http://localhost:8082/) gets clean output.
   const injectEditorAttrs = req?.headers.get(EDITOR_HEADER) === '1';
 
+  // Fresh CSP nonce per request: stamped onto every inline <script> emitted
+  // by the SSR pipeline AND sent back to the Electron main process via the
+  // x-meno-csp-nonce header so it can splice `'nonce-XXX'` into the BrowserWindow
+  // CSP in place of `'unsafe-inline'`. See electron-app/main/window.js.
+  const cspNonce = generateCspNonce();
+
   // Load i18n config for locale extraction
   const i18nConfig = await loadI18nConfig();
 
@@ -101,6 +126,7 @@ export async function handlePageRoute(
               isEditor,
               serverPort,
               returnSeparateJS: true,
+              cspNonce,
             }) as SSRHTMLResult;
 
             let finalHtml = result.html;
@@ -116,6 +142,7 @@ export async function handlePageRoute(
                 'Cache-Control': 'no-store, max-age=0',
                 'Pragma': 'no-cache',
                 'Expires': '0',
+                [CSP_NONCE_HEADER]: cspNonce,
               },
             });
           }
@@ -136,6 +163,7 @@ export async function handlePageRoute(
             pageCustomCode: typedPageData.meta?.customCode,
             injectEditorAttrs,
             isEditor,
+            cspNonce,
           });
 
           return new Response(ssrHTML, {
@@ -144,15 +172,17 @@ export async function handlePageRoute(
               'Cache-Control': 'no-store, max-age=0',
               'Pragma': 'no-cache',
               'Expires': '0',
+              [CSP_NONCE_HEADER]: cspNonce,
             },
           });
         } catch (error) {
           console.error('Error rendering CMS page:', error);
           // Show error overlay in preview instead of silent fallback
-          return new Response(generateErrorPage(error, `Error rendering template: ${cmsTemplatePath}`), {
+          return new Response(generateErrorPage(error, `Error rendering template: ${cmsTemplatePath}`, cspNonce), {
             headers: {
               'Content-Type': 'text/html; charset=utf-8',
               'Cache-Control': 'no-store',
+              [CSP_NONCE_HEADER]: cspNonce,
             },
           });
         }
@@ -224,6 +254,7 @@ export async function handlePageRoute(
           isEditor,
           serverPort,
           returnSeparateJS: true,
+          cspNonce,
         }) as SSRHTMLResult;
 
         let finalHtml = result.html;
@@ -239,6 +270,7 @@ export async function handlePageRoute(
             'Cache-Control': 'no-store, max-age=0',
             'Pragma': 'no-cache',
             'Expires': '0',
+            [CSP_NONCE_HEADER]: cspNonce,
           },
         });
       }
@@ -257,6 +289,7 @@ export async function handlePageRoute(
         pageCustomCode: pageData.meta?.customCode,
         injectEditorAttrs,
         isEditor,
+        cspNonce,
       });
 
       return new Response(ssrHTML, {
@@ -265,15 +298,17 @@ export async function handlePageRoute(
           'Cache-Control': 'no-store, max-age=0',
           'Pragma': 'no-cache',
           'Expires': '0',
+          [CSP_NONCE_HEADER]: cspNonce,
         },
       });
     } catch (error) {
       console.error('Error rendering page:', error);
       // Show error overlay in preview instead of silent fallback
-      return new Response(generateErrorPage(error, `Error rendering page: ${lookupPath}`), {
+      return new Response(generateErrorPage(error, `Error rendering page: ${lookupPath}`, cspNonce), {
         headers: {
           'Content-Type': 'text/html; charset=utf-8',
           'Cache-Control': 'no-store',
+          [CSP_NONCE_HEADER]: cspNonce,
         },
       });
     }

package/lib/server/services/cmsService.ts

@@ -508,6 +508,27 @@ export class CMSService {
     this.itemsCache.delete(collection);
   }
 
+  /**
+   * Save a published item. Wraps the provider so the items cache is invalidated
+   * immediately — without this, the editor's post-save refetch could hit a
+   * stale snapshot inside the 5s TTL window and overwrite an optimistic preview.
+   */
+  async saveItem(collection: string, item: CMSItem): Promise<void> {
+    if (!this.provider) throw new Error('CMS provider not configured');
+    await this.provider.saveItem(collection, item);
+    this.itemsCache.delete(collection);
+  }
+
+  /**
+   * Delete an item (and its draft sibling). Cache invalidation, same rationale
+   * as `saveItem`.
+   */
+  async deleteItem(collection: string, filename: string): Promise<void> {
+    if (!this.provider) throw new Error('CMS provider not configured');
+    await this.provider.deleteItem(collection, filename);
+    this.itemsCache.delete(collection);
+  }
+
   async discardDraft(collection: string, filename: string): Promise<void> {
     if (!this.provider) throw new Error('CMS provider not configured');
     await this.provider.discardDraft(collection, filename);

package/lib/server/services/configService.ts

@@ -29,6 +29,13 @@ export interface IconsConfig {
   appleTouchIcon?: string;
 }
 
+/**
+ * Site-wide social configuration
+ */
+export interface SocialConfig {
+  twitterHandle?: string;
+}
+
 /**
  * Raw project config structure from project.config.json
  */
@@ -39,6 +46,7 @@ interface RawProjectConfig {
   responsiveScales?: Partial<ResponsiveScales>;
   i18n?: unknown;
   icons?: IconsConfig;
+  social?: SocialConfig;
   libraries?: LibrariesConfig;
   csp?: CSPConfig;
   baseComponent?: string;
@@ -234,6 +242,18 @@ export class ConfigService {
     return this.config.icons;
   }
 
+  /**
+   * Get site-wide social configuration
+   * Returns empty object if not configured
+   */
+  getSocial(): SocialConfig {
+    if (!this.config?.social || typeof this.config.social !== 'object') {
+      return {};
+    }
+
+    return this.config.social;
+  }
+
   /**
    * Get libraries configuration
    * Returns empty arrays if not configured

package/lib/server/ssr/buildErrorOverlay.ts

@@ -37,11 +37,19 @@ function safeJsonForScript(data: unknown): string {
 }
 
 /**
- * Generate HTML page showing build errors
+ * Generate HTML page showing build errors.
+ *
+ * @param data     Build errors payload to render
+ * @param cspNonce Per-request CSP nonce — when set, stamped on the inline
+ *                 `<script>` so it executes under a strict (nonce-based)
+ *                 script-src policy without `'unsafe-inline'`. Callers in a
+ *                 plain static-serve context may omit it (no CSP is enforced
+ *                 by the static server itself).
  */
-export function generateBuildErrorPage(data: BuildErrorsData): string {
+export function generateBuildErrorPage(data: BuildErrorsData, cspNonce?: string): string {
   const { errors, timestamp } = data;
   const timeStr = new Date(timestamp).toLocaleTimeString();
+  const nonceAttr = cspNonce ? ` nonce="${cspNonce}"` : '';
 
   // Generate plain text for copying to AI
   const plainTextErrors = errors.map(err =>
@@ -304,7 +312,7 @@ export function generateBuildErrorPage(data: BuildErrorsData): string {
             </svg>
             <span>Copy</span>
           </button>
-          <button class="btn btn-primary" onclick="location.reload()">
+          <button class="btn btn-primary" id="refreshBtn">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <polyline points="23 4 23 10 17 10"></polyline>
               <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
@@ -315,7 +323,7 @@ export function generateBuildErrorPage(data: BuildErrorsData): string {
       </div>
     </div>
   </div>
-  <script>
+  <script${nonceAttr}>
     (function() {
       var copyBtn = document.getElementById('copyBtn');
       var copyText = ${safeJsonForScript(copyText)};
@@ -334,6 +342,16 @@ export function generateBuildErrorPage(data: BuildErrorsData): string {
           console.error('Failed to copy:', err);
         });
       });
+
+      // Refresh button — handler attached here (instead of onclick) so the
+      // page works under a strict (nonce-based) script-src CSP that bars
+      // inline event-handler attributes.
+      var refreshBtn = document.getElementById('refreshBtn');
+      if (refreshBtn) {
+        refreshBtn.addEventListener('click', function() {
+          location.reload();
+        });
+      }
     })();
   </script>
 </body>

package/lib/server/ssr/errorOverlay.ts

@@ -49,12 +49,20 @@ function safeJsonForScript(data: unknown): string {
 }
 
 /**
- * Generate HTML page with error overlay
+ * Generate HTML page with error overlay.
+ *
+ * @param error    Error to display
+ * @param context  Optional context label shown above the error message
+ * @param cspNonce Per-request CSP nonce — when set, stamped on the inline
+ *                 `<script>` so it executes under a strict (nonce-based)
+ *                 script-src policy without `'unsafe-inline'`. Pass through
+ *                 from the route handler that produces this response.
  */
-export function generateErrorPage(error: unknown, context?: string): string {
+export function generateErrorPage(error: unknown, context?: string, cspNonce?: string): string {
   const errorInfo = extractErrorInfo(error);
   const errorMessage = escapeHtml(errorInfo.message);
   const errorStack = errorInfo.stack ? escapeHtml(errorInfo.stack) : '';
+  const nonceAttr = cspNonce ? ` nonce="${cspNonce}"` : '';
 
   // Safely encode error data for script
   const errorDataJson = safeJsonForScript({
@@ -219,7 +227,7 @@ export function generateErrorPage(error: unknown, context?: string): string {
       </button>
     </div>
   </div>
-  <script>
+  <script${nonceAttr}>
     (function() {
       // Send error to parent editor
       if (window.parent && window.parent !== window) {

package/lib/server/ssr/htmlGenerator.nonce.test.ts

@@ -0,0 +1,165 @@
+/**
+ * Tests for the CSP-nonce contract in the SSR pipeline.
+ *
+ * This is a static-analysis-style test: it scans the source of each file that
+ * emits inline <script> tags, finds every opening <script tag in the
+ * template-literal output, and asserts that the very next characters are the
+ * `${nonceAttr}` interpolation. Without this, a future inline script could
+ * be added without a nonce and silently break under the production CSP.
+ *
+ * Exceptions:
+ *   - `<script type="application/json">` data islands — CSP doesn't apply to
+ *     non-executable script types, so no nonce is required.
+ *   - `<script src="…">` external script tags — `'self'` / external-origin
+ *     allow-listing covers these; nonces aren't needed and would be ignored.
+ *
+ * Pair this with the runtime check (pages.ts threads `cspNonce` into the
+ * `x-meno-csp-nonce` header) verified separately below.
+ */
+
+import { test, expect, describe } from 'bun:test';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const CORE = path.resolve(import.meta.dir, '../..', '..');
+const SSR_DIR = path.join(CORE, 'lib/server/ssr');
+const ROUTES_DIR = path.join(CORE, 'lib/server/routes');
+
+// Files that emit inline <script> tags as part of the response body.
+const FILES_THAT_EMIT_INLINE_SCRIPTS = [
+  path.join(SSR_DIR, 'htmlGenerator.ts'),
+  path.join(SSR_DIR, 'errorOverlay.ts'),
+  path.join(SSR_DIR, 'buildErrorOverlay.ts'),
+];
+
+/**
+ * Match an opening `<script…>` tag (TypeScript template-literal source).
+ * Captures the attribute block between `<script` and `>`.
+ *
+ * Notes:
+ *   - Negative-lookahead skips `<script\n` line wraps mid-comment by matching
+ *     only attributes-then-`>`; the line-content of inline JS bodies is never
+ *     touched.
+ *   - The capture is non-greedy so we don't span multiple tags.
+ */
+const SCRIPT_OPEN_TAG = /<script\b([^>]*)>/g;
+
+/**
+ * Strip `/* … *\/` block comments and `// …` line comments from TypeScript
+ * source. JSDoc examples often contain markdown-quoted `<script>` strings
+ * that aren't real tag emissions; without stripping comments the regex
+ * scan flags them as missing nonces.
+ *
+ * Replacement preserves line counts (so the index → lineNo math in the
+ * caller's error message stays accurate) by substituting spaces and
+ * newlines for the comment content.
+ */
+function stripComments(src: string): string {
+  const blockStripped = src.replace(/\/\*[\s\S]*?\*\//g, (m) =>
+    m.replace(/[^\n]/g, ' ')
+  );
+  return blockStripped.replace(/(^|[^:])\/\/[^\n]*/g, (m, prefix) =>
+    prefix + ' '.repeat(m.length - prefix.length)
+  );
+}
+
+function findInlineScripts(src: string): { attrs: string; index: number }[] {
+  const clean = stripComments(src);
+  const out: { attrs: string; index: number }[] = [];
+  let match: RegExpExecArray | null;
+  SCRIPT_OPEN_TAG.lastIndex = 0;
+  while ((match = SCRIPT_OPEN_TAG.exec(clean))) {
+    out.push({ attrs: match[1], index: match.index });
+  }
+  return out;
+}
+
+function isDataIsland(attrs: string): boolean {
+  return /\btype\s*=\s*["']application\/json["']/.test(attrs);
+}
+
+function isExternal(attrs: string): boolean {
+  return /\bsrc\s*=/.test(attrs);
+}
+
+function hasNonceSlot(attrs: string): boolean {
+  return /\$\{nonceAttr\}/.test(attrs);
+}
+
+describe('SSR inline script nonce contract', () => {
+  for (const file of FILES_THAT_EMIT_INLINE_SCRIPTS) {
+    describe(path.basename(file), () => {
+      const src = fs.readFileSync(file, 'utf8');
+      const scripts = findInlineScripts(src);
+
+      test('has at least one inline <script> tag', () => {
+        // htmlGenerator emits 5, errorOverlay emits 1, buildErrorOverlay emits 1.
+        expect(scripts.length).toBeGreaterThan(0);
+      });
+
+      test('every inline executable <script> carries ${nonceAttr}', () => {
+        const offenders: string[] = [];
+        for (const { attrs, index } of scripts) {
+          if (isDataIsland(attrs) || isExternal(attrs)) continue;
+          if (!hasNonceSlot(attrs)) {
+            // Give a useful context window in the failure message.
+            const lineNo = src.slice(0, index).split('\n').length;
+            offenders.push(`line ${lineNo}: <script${attrs}>`);
+          }
+        }
+        if (offenders.length > 0) {
+          throw new Error(
+            `Inline <script> tags missing \${nonceAttr}:\n  ${offenders.join('\n  ')}`,
+          );
+        }
+      });
+    });
+  }
+});
+
+describe('pages.ts nonce threading', () => {
+  const src = fs.readFileSync(path.join(ROUTES_DIR, 'pages.ts'), 'utf8');
+
+  test('declares CSP_NONCE_HEADER as x-meno-csp-nonce', () => {
+    expect(src).toMatch(/CSP_NONCE_HEADER\s*=\s*['"]x-meno-csp-nonce['"]/);
+  });
+
+  test('generates a fresh nonce per request', () => {
+    // Must call generateCspNonce() inside the request handler, not at module load.
+    expect(src).toMatch(/const\s+cspNonce\s*=\s*generateCspNonce\(\)/);
+  });
+
+  test('uses crypto.randomBytes for nonce generation', () => {
+    // Anything weaker (Math.random, timestamps) would defeat the purpose.
+    expect(src).toMatch(/randomBytes\s*\(\s*\d+\s*\)/);
+  });
+
+  test('every Response includes the nonce header', () => {
+    // Count `[CSP_NONCE_HEADER]:` occurrences — must be present on each emitted Response.
+    const headerSetters = (src.match(/\[CSP_NONCE_HEADER\]:/g) ?? []).length;
+    expect(headerSetters).toBeGreaterThan(0);
+  });
+
+  test('threads cspNonce into every generateSSRHTML / generateErrorPage call', () => {
+    // Sanity: at least one ssr call and one error call should pass cspNonce.
+    expect(src).toMatch(/generateSSRHTML\s*\(\s*\{[\s\S]*?cspNonce/);
+    expect(src).toMatch(/generateErrorPage\s*\([\s\S]*?cspNonce/);
+  });
+});
+
+describe('htmlGenerator.ts nonceAttr semantics', () => {
+  const src = fs.readFileSync(path.join(SSR_DIR, 'htmlGenerator.ts'), 'utf8');
+
+  test('nonceAttr is empty when no nonce supplied (back-compat)', () => {
+    // `cspNonce ? ` nonce="${cspNonce}"` : ''` — both branches present.
+    expect(src).toMatch(/const\s+nonceAttr\s*=\s*cspNonce\s*\?[\s\S]*?:\s*['"]['"]/);
+  });
+
+  test('nonceAttr stamps the cspNonce value when supplied', () => {
+    expect(src).toMatch(/nonce="\$\{cspNonce\}"/);
+  });
+
+  test('GenerateSSRHTMLOptions declares cspNonce as optional', () => {
+    expect(src).toMatch(/cspNonce\s*\?:\s*string/);
+  });
+});

package/lib/server/ssr/htmlGenerator.ts

@@ -147,6 +147,15 @@ export interface GenerateSSRHTMLOptions {
   isEditor?: boolean;
   /** Actual bound server port for live reload WS (connects directly to SSR server) */
   serverPort?: number;
+  /**
+   * Per-request CSP nonce. When set, every inline `<script>` emitted by this
+   * generator carries `nonce="${nonce}"`. The HTTP route handler must send
+   * the same nonce in the `script-src` directive of the response CSP header
+   * (and the Electron main process splices it into the BrowserWindow CSP).
+   * When unset, scripts are emitted without a nonce attribute — callers that
+   * still rely on `'unsafe-inline'` (legacy / direct CLI usage) keep working.
+   */
+  cspNonce?: string;
 }
 
 /**
@@ -235,7 +244,12 @@ export async function generateSSRHTML(
     isEditor = false,
     isProductionBuild = false,
     serverPort,
+    cspNonce,
   } = options;
+
+  // Attribute fragment for stamping nonce on inline <script> tags. Empty when
+  // no nonce is supplied so legacy ('unsafe-inline') paths keep working.
+  const nonceAttr = cspNonce ? ` nonce="${cspNonce}"` : '';
   // Editor selection attributes (data-element-path, data-cms-context, ...) are gated
   // on injectEditorAttrs — set ONLY when the request comes from the editor preview iframe
   // via the studio's /__static__/ proxy (which sends an `x-meno-editor` header).
@@ -285,8 +299,13 @@ export async function generateSSRHTML(
   await configService.load();
   const globalLibraries = configService.getLibraries() || { js: [], css: [] };
   const globalCustomCode = configService.getCustomCode();
+  // The Meno badge previously used inline event handlers (onmouseenter /
+  // onmouseleave) to drive its opacity hover, which CSP with `'nonce-…'` and
+  // no `'unsafe-inline'` rejects. Move the hover to a stylesheet rule using a
+  // dedicated class so nonces aren't needed for this purely-presentational
+  // effect.
   const menoBadgeHtml = configService.getShowMenoBadge()
-    ? `<a href="https://meno.so" target="_blank" rel="noopener" style="position:fixed;bottom:12px;left:12px;z-index:9999;background:#000;color:#fff;padding:4px 10px;border-radius:6px;font-size:12px;font-family:system-ui,sans-serif;text-decoration:none;opacity:0.8;transition:opacity 0.2s" onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.8'">Made in Meno</a>`
+    ? `<style>.meno-badge{position:fixed;bottom:12px;left:12px;z-index:9999;background:#000;color:#fff;padding:4px 10px;border-radius:6px;font-size:12px;font-family:system-ui,sans-serif;text-decoration:none;opacity:0.8;transition:opacity 0.2s}.meno-badge:hover,.meno-badge:focus{opacity:1}</style><a class="meno-badge" href="https://meno.so" target="_blank" rel="noopener">Made in Meno</a>`
     : '';
   const mergedCustomCode = {
     head: [globalCustomCode.head, pageCustomCode?.head].filter(Boolean).join('\n'),
@@ -378,7 +397,7 @@ export async function generateSSRHTML(
       // Legacy inline mode (dev server)
       // Escape </script> sequences to prevent premature script tag closure
       const escapedJavaScript = allJavaScript.replace(/<\/script>/gi, '<\\/script>');
-      componentScript = `\n  <script>\n${escapedJavaScript}\n  </script>`;
+      componentScript = `\n  <script${nonceAttr}>\n${escapedJavaScript}\n  </script>`;
     }
   }
 
@@ -472,7 +491,7 @@ picture {
   // Config script - inline for dev, include in external JS for static build
   const hasConfig = Object.keys(menoConfig).length > 0;
   const configInlineScript = hasConfig && !extScriptPath && !returnSeparateJS
-    ? `<script>window.__MENO_CONFIG__=${JSON.stringify(menoConfig)}</script>\n  `
+    ? `<script${nonceAttr}>window.__MENO_CONFIG__=${JSON.stringify(menoConfig)}</script>\n  `
     : '';
   // Add config to external JS if using external scripts
   if (hasConfig && externalJavaScript !== null) {
@@ -482,7 +501,7 @@ picture {
   // CMS context script - needed when a client-side Router is present (dev mode or studio preview)
   // Production builds are pure HTML with no client routing, so excluded
   const cmsInlineScript = cmsTemplatePath && cms && (!useBundled || injectLiveReload)
-    ? `<script>window.__MENO_CMS__=${JSON.stringify({ item: cms.cms, templatePath: cmsTemplatePath })}</script>\n  `
+    ? `<script${nonceAttr}>window.__MENO_CMS__=${JSON.stringify({ item: cms.cms, templatePath: cmsTemplatePath })}</script>\n  `
     : '';
 
   // Client data scripts - inline JSON for MenoFilter (production builds only)
@@ -545,12 +564,12 @@ picture {
   // diff (different element counts or unknown paths) it falls back to a
   // straight innerHTML replace.
   const liveReloadScript = injectLiveReload
-    ? `<script>(function(){var ws,timer,gen=0,lastSrvRoot=null;function strip(s){return s?s.replace(/[?&]_r=\\d+/,''):''}function classList(el){return (el.getAttribute('class')||'').split(/\\s+/).filter(Boolean)}function syncEl(cur,srv,old){var cc=classList(cur),sc=classList(srv),oc=old?new Set(classList(old)):new Set();var rt=cc.filter(function(c){return !oc.has(c)});var seen=new Set(),fin=[];sc.concat(rt).forEach(function(c){if(!seen.has(c)){seen.add(c);fin.push(c)}});var fs=fin.join(' ');if((cur.getAttribute('class')||'')!==fs){if(fs)cur.setAttribute('class',fs);else cur.removeAttribute('class')}for(var i=0;i<srv.attributes.length;i++){var a=srv.attributes[i];if(a.name==='class')continue;if(cur.getAttribute(a.name)!==a.value)cur.setAttribute(a.name,a.value)}if(old){for(var i=0;i<old.attributes.length;i++){var a=old.attributes[i];if(a.name==='class')continue;if(!srv.hasAttribute(a.name)&&cur.hasAttribute(a.name))cur.removeAttribute(a.name)}}}function syncText(cur,srv){var cc=cur.childNodes,sc=srv.childNodes;for(var i=0;i<sc.length;i++){var s=sc[i],c=cc[i];if(s.nodeType===3&&c&&c.nodeType===3){if(c.textContent!==s.textContent)c.textContent=s.textContent}}}function smartUpdate(curR,srvR,oldR){var ce=curR.querySelectorAll('[data-element-path]'),se=srvR.querySelectorAll('[data-element-path]');if(ce.length!==se.length){if(curR.innerHTML!==srvR.innerHTML)curR.innerHTML=srvR.innerHTML;return}var sbp={};for(var i=0;i<se.length;i++)sbp[se[i].getAttribute('data-element-path')]=se[i];var obp={};if(oldR){var oe=oldR.querySelectorAll('[data-element-path]');for(var i=0;i<oe.length;i++)obp[oe[i].getAttribute('data-element-path')]=oe[i]}for(var i=0;i<ce.length;i++){var c=ce[i],p=c.getAttribute('data-element-path'),s=sbp[p];if(!s){if(curR.innerHTML!==srvR.innerHTML)curR.innerHTML=srvR.innerHTML;return}syncEl(c,s,obp[p]);syncText(c,s)}syncText(curR,srvR)}function connect(){ws=new WebSocket(${wsUrl});ws.onmessage=function(e){var d=JSON.parse(e.data);if(d.type==='hmr:libraries-update'){location.reload()}else if(d.type==='hmr:update'||d.type==='hmr:cms-update'||d.type==='hmr:colors-update'||d.type==='hmr:variables-update')hotReload()};ws.onclose=function(){clearTimeout(timer);timer=setTimeout(connect,1000)}}function hotReload(){var g=++gen;var sx=window.scrollX,sy=window.scrollY;fetch(location.href,{cache:'no-store'}).then(function(r){return r.text()}).then(function(html){if(g!==gen)return;var p=new DOMParser();var d=p.parseFromString(html,'text/html');var or=document.getElementById('root'),nr=d.getElementById('root');if(or&&nr)smartUpdate(or,nr,lastSrvRoot);if(nr)lastSrvRoot=nr.cloneNode(true);var os=document.getElementById('meno-styles'),ns=d.getElementById('meno-styles');if(os&&ns&&os.textContent!==ns.textContent)os.parentNode.replaceChild(ns.cloneNode(true),os);var nh=d.documentElement;if(nh){var nl=nh.getAttribute('lang')||'en',nt=nh.getAttribute('theme')||'light';if(document.documentElement.getAttribute('lang')!==nl)document.documentElement.setAttribute('lang',nl);if(document.documentElement.getAttribute('theme')!==nt)document.documentElement.setAttribute('theme',nt)}var ocms=document.querySelectorAll('script[id^="meno-cms-"]'),ncms=d.querySelectorAll('script[id^="meno-cms-"]');var ock=JSON.stringify(Array.prototype.map.call(ocms,function(s){return [s.id,s.textContent]}));var nck=JSON.stringify(Array.prototype.map.call(ncms,function(s){return [s.id,s.textContent]}));if(ock!==nck){ocms.forEach(function(s){s.remove()});ncms.forEach(function(s){var c=document.createElement('script');c.type=s.type;c.id=s.id;c.textContent=s.textContent;document.head.appendChild(c)})}window.__menoHotReload=true;var olib=document.querySelectorAll('body > script[src^="/libraries/"]'),nlib=d.querySelectorAll('body > script[src^="/libraries/"]');var olk=JSON.stringify(Array.prototype.map.call(olib,function(s){return strip(s.getAttribute('src'))}).sort());var nlk=JSON.stringify(Array.prototype.map.call(nlib,function(s){return strip(s.getAttribute('src'))}).sort());if(olk!==nlk){olib.forEach(function(o){o.remove()});nlib.forEach(function(n){var src=n.getAttribute('src');var ls=document.createElement('script');ls.src=src+(src.indexOf('?')>-1?'&':'?')+'_r='+Date.now();document.body.appendChild(ls)})}var oscr=document.querySelector('script[src^="/_scripts/"]'),nscr=d.querySelector('script[src^="/_scripts/"]');var oss=oscr?strip(oscr.getAttribute('src')):'',nss=nscr?strip(nscr.getAttribute('src')):'';if(oss===nss){window.scrollTo(sx,sy)}else{if(oscr)oscr.remove();if(nscr){var src=nscr.getAttribute('src');var s=document.createElement('script');s.src=src+(src.indexOf('?')>-1?'&':'?')+'_r='+Date.now();s.onload=function(){document.dispatchEvent(new Event('DOMContentLoaded'));window.scrollTo(sx,sy)};s.onerror=function(){window.scrollTo(sx,sy)};document.body.appendChild(s)}else{document.dispatchEvent(new Event('DOMContentLoaded'));window.scrollTo(sx,sy)}}}).catch(function(){location.reload()})}var iR=document.getElementById('root');if(iR)lastSrvRoot=iR.cloneNode(true);connect()})()</script>`
+    ? `<script${nonceAttr}>(function(){var ws,timer,gen=0,lastSrvRoot=null;function strip(s){return s?s.replace(/[?&]_r=\\d+/,''):''}function classList(el){return (el.getAttribute('class')||'').split(/\\s+/).filter(Boolean)}function syncEl(cur,srv,old){var cc=classList(cur),sc=classList(srv),oc=old?new Set(classList(old)):new Set();var rt=cc.filter(function(c){return !oc.has(c)});var seen=new Set(),fin=[];sc.concat(rt).forEach(function(c){if(!seen.has(c)){seen.add(c);fin.push(c)}});var fs=fin.join(' ');if((cur.getAttribute('class')||'')!==fs){if(fs)cur.setAttribute('class',fs);else cur.removeAttribute('class')}for(var i=0;i<srv.attributes.length;i++){var a=srv.attributes[i];if(a.name==='class')continue;if(cur.getAttribute(a.name)!==a.value)cur.setAttribute(a.name,a.value)}if(old){for(var i=0;i<old.attributes.length;i++){var a=old.attributes[i];if(a.name==='class')continue;if(!srv.hasAttribute(a.name)&&cur.hasAttribute(a.name))cur.removeAttribute(a.name)}}}function syncText(cur,srv){var cc=cur.childNodes,sc=srv.childNodes;for(var i=0;i<sc.length;i++){var s=sc[i],c=cc[i];if(s.nodeType===3&&c&&c.nodeType===3){if(c.textContent!==s.textContent)c.textContent=s.textContent}}}function smartUpdate(curR,srvR,oldR){var ce=curR.querySelectorAll('[data-element-path]'),se=srvR.querySelectorAll('[data-element-path]');if(ce.length!==se.length){if(curR.innerHTML!==srvR.innerHTML)curR.innerHTML=srvR.innerHTML;return}var sbp={};for(var i=0;i<se.length;i++)sbp[se[i].getAttribute('data-element-path')]=se[i];var obp={};if(oldR){var oe=oldR.querySelectorAll('[data-element-path]');for(var i=0;i<oe.length;i++)obp[oe[i].getAttribute('data-element-path')]=oe[i]}for(var i=0;i<ce.length;i++){var c=ce[i],p=c.getAttribute('data-element-path'),s=sbp[p];if(!s){if(curR.innerHTML!==srvR.innerHTML)curR.innerHTML=srvR.innerHTML;return}syncEl(c,s,obp[p]);syncText(c,s)}syncText(curR,srvR)}function connect(){ws=new WebSocket(${wsUrl});ws.onmessage=function(e){var d=JSON.parse(e.data);if(d.type==='hmr:libraries-update'){location.reload()}else if(d.type==='hmr:update'||d.type==='hmr:cms-update'||d.type==='hmr:colors-update'||d.type==='hmr:variables-update')hotReload()};ws.onclose=function(){clearTimeout(timer);timer=setTimeout(connect,1000)}}function hotReload(){var g=++gen;var sx=window.scrollX,sy=window.scrollY;fetch(location.href,{cache:'no-store'}).then(function(r){return r.text()}).then(function(html){if(g!==gen)return;var p=new DOMParser();var d=p.parseFromString(html,'text/html');var or=document.getElementById('root'),nr=d.getElementById('root');if(or&&nr)smartUpdate(or,nr,lastSrvRoot);if(nr)lastSrvRoot=nr.cloneNode(true);var os=document.getElementById('meno-styles'),ns=d.getElementById('meno-styles');if(os&&ns&&os.textContent!==ns.textContent)os.parentNode.replaceChild(ns.cloneNode(true),os);var nh=d.documentElement;if(nh){var nl=nh.getAttribute('lang')||'en',nt=nh.getAttribute('theme')||'light';if(document.documentElement.getAttribute('lang')!==nl)document.documentElement.setAttribute('lang',nl);if(document.documentElement.getAttribute('theme')!==nt)document.documentElement.setAttribute('theme',nt)}var ocms=document.querySelectorAll('script[id^="meno-cms-"]'),ncms=d.querySelectorAll('script[id^="meno-cms-"]');var ock=JSON.stringify(Array.prototype.map.call(ocms,function(s){return [s.id,s.textContent]}));var nck=JSON.stringify(Array.prototype.map.call(ncms,function(s){return [s.id,s.textContent]}));if(ock!==nck){ocms.forEach(function(s){s.remove()});ncms.forEach(function(s){var c=document.createElement('script');c.type=s.type;c.id=s.id;c.textContent=s.textContent;document.head.appendChild(c)})}window.__menoHotReload=true;var olib=document.querySelectorAll('body > script[src^="/libraries/"]'),nlib=d.querySelectorAll('body > script[src^="/libraries/"]');var olk=JSON.stringify(Array.prototype.map.call(olib,function(s){return strip(s.getAttribute('src'))}).sort());var nlk=JSON.stringify(Array.prototype.map.call(nlib,function(s){return strip(s.getAttribute('src'))}).sort());if(olk!==nlk){olib.forEach(function(o){o.remove()});nlib.forEach(function(n){var src=n.getAttribute('src');var ls=document.createElement('script');ls.src=src+(src.indexOf('?')>-1?'&':'?')+'_r='+Date.now();document.body.appendChild(ls)})}var oscr=document.querySelector('script[src^="/_scripts/"]'),nscr=d.querySelector('script[src^="/_scripts/"]');var oss=oscr?strip(oscr.getAttribute('src')):'',nss=nscr?strip(nscr.getAttribute('src')):'';if(oss===nss){window.scrollTo(sx,sy)}else{if(oscr)oscr.remove();if(nscr){var src=nscr.getAttribute('src');var s=document.createElement('script');s.src=src+(src.indexOf('?')>-1?'&':'?')+'_r='+Date.now();s.onload=function(){document.dispatchEvent(new Event('DOMContentLoaded'));window.scrollTo(sx,sy)};s.onerror=function(){window.scrollTo(sx,sy)};document.body.appendChild(s)}else{document.dispatchEvent(new Event('DOMContentLoaded'));window.scrollTo(sx,sy)}}}).catch(function(){location.reload()})}var iR=document.getElementById('root');if(iR)lastSrvRoot=iR.cloneNode(true);connect()})()</script>`
     : '';
 
   // Scroll position handlers for preview mode iframe switching
   const scrollHandlerScript = injectLiveReload
-    ? `<script>(function(){window.addEventListener('message',function(e){if(e.data.type==='GET_SCROLL_POSITION'){window.parent.postMessage({type:'SCROLL_POSITION_RESPONSE',scrollX:window.scrollX,scrollY:window.scrollY},'*')}else if(e.data.type==='SET_SCROLL_POSITION'){window.scrollTo(e.data.scrollX,e.data.scrollY)}})})()</script>`
+    ? `<script${nonceAttr}>(function(){window.addEventListener('message',function(e){if(e.data.type==='GET_SCROLL_POSITION'){window.parent.postMessage({type:'SCROLL_POSITION_RESPONSE',scrollX:window.scrollX,scrollY:window.scrollY},'*')}else if(e.data.type==='SET_SCROLL_POSITION'){window.scrollTo(e.data.scrollX,e.data.scrollY)}})})()</script>`
     : '';
 
   // In production, output minified CSS on single line; in dev, preserve formatting

package/lib/server/ssr/liveReloadIntegration.test.ts

@@ -17,7 +17,9 @@ function loadLiveReloadScript(): string {
   const src = fs.readFileSync(path.join(import.meta.dir, 'htmlGenerator.ts'), 'utf8');
   const idx = src.indexOf('const liveReloadScript');
   if (idx === -1) throw new Error('liveReloadScript not found');
-  const match = src.slice(idx).match(/<script>([\s\S]*?)<\/script>/);
+  // The live-reload script tag may carry a per-request CSP nonce attribute
+  // — `<script${nonceAttr}>` in the source. Match either form.
+  const match = src.slice(idx).match(/<script(?:\$\{nonceAttr\})?>([\s\S]*?)<\/script>/);
   if (!match) throw new Error('liveReloadScript script tag not found');
   // The script lives inside a TS template literal; reverse the template's
   // runtime transformations so the executable form matches what a browser sees.

package/lib/server/ssr/metaTagGenerator.ts

@@ -40,12 +40,37 @@ export function extractPageMeta(pageData: JSONPage): PageMeta {
 }
 
 /**
- * Options for hreflang tag generation
+ * Site-wide social configuration
  */
-export interface HreflangOptions {
+export interface SocialOptions {
+  twitterHandle?: string;
+}
+
+/**
+ * Normalize an og:image URL for social-card crawlers:
+ * - Swap project-local /images/*.webp|.avif → .jpg (companion produced at upload time)
+ * - Prepend baseUrl when the value is a project-relative path
+ */
+function normalizeOgImageUrl(value: string, baseUrl?: string): string {
+  if (!value) return value;
+  let out = value;
+  if (/^\/images\/[^?#]+\.(webp|avif)(\?|#|$)/i.test(out)) {
+    out = out.replace(/\.(webp|avif)(?=\?|#|$)/i, '.jpg');
+  }
+  if (baseUrl && out.startsWith('/')) {
+    out = `${baseUrl.replace(/\/$/, '')}${out}`;
+  }
+  return out;
+}
+
+/**
+ * Options for meta tag generation (hreflang + social)
+ */
+export interface MetaTagOptions {
   slugMappings?: SlugMap[];
   pagePath?: string;
   baseUrl?: string;
+  social?: SocialOptions;
 }
 
 /**
@@ -58,7 +83,7 @@ export function generateMetaTags(
   url: string = '',
   locale: string = 'en',
   config: I18nConfig = DEFAULT_I18N_CONFIG,
-  hreflangOptions?: HreflangOptions
+  options?: MetaTagOptions
 ): string {
   const tags: string[] = [];
 
@@ -98,7 +123,8 @@ export function generateMetaTags(
   }
 
   if (ogImage) {
-    tags.push(`<meta property="og:image" content="${escapeHtml(ogImage)}" />`);
+    const normalizedOgImage = normalizeOgImageUrl(ogImage, options?.baseUrl);
+    tags.push(`<meta property="og:image" content="${escapeHtml(normalizedOgImage)}" />`);
   }
 
   if (ogType) {
@@ -109,14 +135,36 @@ export function generateMetaTags(
     tags.push(`<meta property="og:url" content="${escapeHtml(url)}" />`);
   }
 
+  // Twitter Card tags - Twitter falls back to og:image/og:title/og:description when twitter:* is absent
+  const hasAnyMeta = title || description || ogImage || ogTitle || ogDescription;
+  if (hasAnyMeta) {
+    const cardType = ogImage ? 'summary_large_image' : 'summary';
+    tags.push(`<meta name="twitter:card" content="${cardType}" />`);
+  }
+
+  if (ogTitle) {
+    tags.push(`<meta name="twitter:title" content="${escapeHtml(ogTitle)}" />`);
+  }
+
+  if (ogDescription) {
+    tags.push(`<meta name="twitter:description" content="${escapeHtml(ogDescription)}" />`);
+  }
+
+  const rawHandle = options?.social?.twitterHandle?.trim();
+  if (rawHandle) {
+    const handle = rawHandle.startsWith('@') ? rawHandle : `@${rawHandle}`;
+    tags.push(`<meta name="twitter:site" content="${escapeHtml(handle)}" />`);
+    tags.push(`<meta name="twitter:creator" content="${escapeHtml(handle)}" />`);
+  }
+
   // Canonical URL
   if (url) {
     tags.push(`<link rel="canonical" href="${escapeHtml(url)}" />`);
   }
 
   // Hreflang tags for multilingual pages
-  if (hreflangOptions?.slugMappings && hreflangOptions.slugMappings.length > 0 && config.locales.length > 1) {
-    const { slugMappings, pagePath = '/', baseUrl = '' } = hreflangOptions;
+  if (options?.slugMappings && options.slugMappings.length > 0 && config.locales.length > 1) {
+    const { slugMappings, pagePath = '/', baseUrl = '' } = options;
     const slugIndex = buildSlugIndex(slugMappings);
     const localeLinks = getLocaleLinks(pagePath, locale, config, slugIndex);