@setzkasten-cms/astro 0.4.2

package/src/preview-middleware.ts

@@ -0,0 +1,184 @@
+import { AsyncLocalStorage } from 'node:async_hooks'
+import { getDrafts } from './draft-store'
+
+// We avoid importing from 'astro:middleware' because it's a virtual module
+// that only exists at Astro build time — importing it breaks standalone tsc.
+type MiddlewareContext = {
+  request: Request
+  cookies: { get(name: string): { value: string } | undefined }
+}
+type MiddlewareNext = () => Promise<Response>
+
+// ---------------------------------------------------------------------------
+// AsyncLocalStorage for passing draft data through the SSR render pipeline.
+// Uses Symbol.for() so the virtual module (setzkasten:content) can access
+// the same ALS instance without importing this file directly.
+// ---------------------------------------------------------------------------
+
+const ALS_KEY = Symbol.for('setzkasten.preview.als')
+
+type DraftMap = Record<string, Record<string, unknown>>
+
+// Initialize once
+if (!(globalThis as any)[ALS_KEY]) {
+  ;(globalThis as any)[ALS_KEY] = new AsyncLocalStorage<DraftMap>()
+}
+
+const als: AsyncLocalStorage<DraftMap> = (globalThis as any)[ALS_KEY]
+
+/**
+ * Script injected into preview pages for scroll tracking and navigation.
+ * Communicates with the admin Page Builder via postMessage.
+ */
+const PREVIEW_SCRIPT = `
+<script data-sk-preview>
+(function() {
+  // Listen for commands from the Page Builder
+  window.addEventListener('message', function(e) {
+    if (!e.data || !e.data.type) return;
+
+    // Scroll to a section
+    if (e.data.type === 'sk:scroll-to') {
+      var el = document.getElementById('section-' + e.data.section);
+      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+
+    // Live DOM patching: update text content of elements with data-sk-field
+    // Supports nested paths for arrays/objects (e.g. "features.items.0.title")
+    if (e.data.type === 'sk:draft-update' && e.data.section && e.data.values) {
+      var section = e.data.section;
+      function patchValues(obj, prefix) {
+        Object.keys(obj).forEach(function(key) {
+          var val = obj[key];
+          var path = prefix ? prefix + '.' + key : key;
+          if (typeof val === 'string') {
+            var selector = '[data-sk-field="' + section + '.' + path + '"]';
+            var els = document.querySelectorAll(selector);
+            els.forEach(function(el) { el.innerHTML = val; });
+          } else if (Array.isArray(val)) {
+            val.forEach(function(item, i) {
+              if (item && typeof item === 'object') {
+                patchValues(item, path + '.' + i);
+              }
+            });
+          } else if (val && typeof val === 'object') {
+            patchValues(val, path);
+          }
+        });
+      }
+      patchValues(e.data.values, '');
+    }
+
+    // Reorder and toggle sections in the DOM (no reload needed)
+    if (e.data.type === 'sk:update-sections' && Array.isArray(e.data.sections)) {
+      var config = e.data.sections;
+      var parent = null;
+      // Find the parent container from the first existing section
+      for (var i = 0; i < config.length; i++) {
+        var found = document.getElementById('section-' + config[i].key);
+        if (found && found.parentElement) { parent = found.parentElement; break; }
+      }
+      if (parent) {
+        // Toggle visibility
+        config.forEach(function(s) {
+          var el = document.getElementById('section-' + s.key);
+          if (el) el.style.display = s.enabled ? '' : 'none';
+        });
+        // Reorder: append in the new order (moves existing DOM nodes)
+        config.forEach(function(s) {
+          var el = document.getElementById('section-' + s.key);
+          if (el) parent.appendChild(el);
+        });
+      }
+    }
+  });
+
+  // Track which section is currently visible via scroll position
+  var sections = document.querySelectorAll('[id^="section-"]');
+  if (sections.length > 0) {
+    var currentSection = null;
+    function updateVisibleSection() {
+      var best = null;
+      var bestDist = Infinity;
+      sections.forEach(function(s) {
+        var rect = s.getBoundingClientRect();
+        // Section whose top is closest to (but not far below) the viewport top
+        var dist = Math.abs(rect.top);
+        if (rect.top <= window.innerHeight * 0.4 && dist < bestDist) {
+          bestDist = dist;
+          best = s.id.replace('section-', '');
+        }
+      });
+      // Fallback: if nothing matched, use first section
+      if (!best) best = sections[0].id.replace('section-', '');
+      if (best !== currentSection) {
+        currentSection = best;
+        window.parent.postMessage({ type: 'sk:visible-section', section: best }, '*');
+      }
+    }
+    window.addEventListener('scroll', updateVisibleSection, { passive: true });
+    // Send initial section immediately
+    updateVisibleSection();
+  }
+
+  // Hover highlight for sections
+  var style = document.createElement('style');
+  style.textContent =
+    '[id^="section-"] { transition: outline 0.15s; }' +
+    '[id^="section-"]:hover { outline: 2px solid rgba(196,93,62,0.15); outline-offset: -2px; }';
+  document.head.appendChild(style);
+})();
+</script>`
+
+/**
+ * Astro middleware that intercepts preview requests.
+ *
+ * When a request has `?_sk_preview=1`, it:
+ * 1. Validates the user session (same cookie as admin)
+ * 2. Loads draft content from the in-memory store
+ * 3. Wraps the page render in AsyncLocalStorage.run() so that
+ *    getSection() from the virtual module returns draft data
+ * 4. Injects scroll tracking script into the rendered HTML
+ */
+export const onRequest = async (context: MiddlewareContext, next: MiddlewareNext) => {
+  const url = new URL(context.request.url)
+
+  // Only intercept preview requests
+  if (!url.searchParams.has('_sk_preview')) {
+    return next()
+  }
+
+  // Validate session
+  const session = context.cookies.get('setzkasten_session')?.value
+  if (!session) {
+    return next()
+  }
+
+  // Load drafts for this session
+  const drafts = getDrafts(session)
+
+  // Render the page (with or without drafts)
+  const renderPage = async () => {
+    const response = await next()
+
+    // Only modify HTML responses
+    const contentType = response.headers.get('content-type') ?? ''
+    if (!contentType.includes('text/html')) return response
+
+    // Inject the preview script before </body>
+    const html = await response.text()
+    const modifiedHtml = html.replace('</body>', PREVIEW_SCRIPT + '\n</body>')
+
+    return new Response(modifiedHtml, {
+      status: response.status,
+      headers: response.headers,
+    })
+  }
+
+  // If we have drafts, run within ALS context
+  if (drafts) {
+    return als.run(drafts, renderPage)
+  }
+
+  return renderPage()
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}