sitedrift 0.3.2 → 0.3.5

package/AGENTS.md

@@ -107,6 +107,6 @@ LIVE render on separate origins. Never expose sitedrift through a public proxy.
 
 The optional Cloudflare Pages addon is intentionally public-preview safe: it is
 installed only on non-production builds, exposes only `/__sitedrift/*`, permits
-only `GET` and `HEAD`, allowlists one configured live origin, and sandboxes both
-frames without same-origin authority. Production output and existing API
-Functions are unchanged.
+only `GET` and `HEAD`, and allowlists one configured live origin. Hosted frames
+execute the compared site's scripts and must be used only with trusted preview
+code. Production output and existing API Functions are unchanged.

package/README.md

@@ -97,8 +97,9 @@ when `CF_PAGES=1` and `CF_PAGES_BRANCH` is not `main`. Production builds are
 left unchanged. Use `--production-branch <name>` when production is another
 branch.
 
-Hosted proxies are read-only (`GET`/`HEAD`), sandboxed without same-origin
-authority, and fixed to the configured live origin. Review notes stay in that
+Hosted proxies are read-only (`GET`/`HEAD`) and fixed to the configured live
+origin. Frames run the compared site's scripts so interactive previews behave
+like the deployment; only enable the addon for preview code you trust. Review notes stay in that
 browser's `localStorage`; they are not sent to an API, shared with agents, or
 written to disk. Existing application Functions keep their original routes.
 

package/assets/viewer.js

@@ -4,7 +4,9 @@
       config.dev = location.origin;
       config.frameOrigins = { dev: location.origin, live: location.origin };
       for (const iframe of document.querySelectorAll('iframe[data-side]')) {
-        iframe.setAttribute('sandbox', 'allow-downloads allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-scripts');
+        // Safari requires same-origin for `style-src 'self'`; scripts are
+        // required for the preview to behave like the deployed application.
+        iframe.setAttribute('sandbox', 'allow-downloads allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts');
       }
     }
     const root = document.documentElement;
@@ -85,12 +87,72 @@
         : config[side] + normalizeRoute(route);
     }
     function framePost(side, type, data = {}) {
+      if (config.hosted) {
+        const win = frame(side).contentWindow;
+        const scrolling = frame(side).contentDocument?.scrollingElement;
+        if (type === 'scroll' && scrolling) scrolling.scrollTop = Number(data.y) || 0;
+        if (type === 'reload') win?.location.reload();
+        return;
+      }
       frame(side).contentWindow?.postMessage(
         { source: 'sitedrift-parent', side, type, ...data },
         config.hosted ? '*' : config.frameOrigins[side],
       );
     }
 
+    function hostedSnapshot(side) {
+      if (!config.hosted) return;
+      const iframe = frame(side);
+      const doc = iframe.contentDocument;
+      const win = iframe.contentWindow;
+      if (!doc || !win) return;
+      const q = (selector) => doc.querySelector(selector);
+      const images = [...doc.querySelectorAll('img')];
+      const title = (doc.title || '').trim();
+      const description = q('meta[name="description"]')?.content?.trim() || '';
+      const canonical = q('link[rel="canonical"]')?.href || '';
+      const checks = [
+        ['Title present', !!title],
+        ['Title 30–60 chars', title.length >= 30 && title.length <= 60, String(title.length)],
+        ['Meta description', !!description],
+        ['Description 70–160', description.length >= 70 && description.length <= 160, String(description.length)],
+        ['Exactly one H1', doc.querySelectorAll('h1').length === 1, `${doc.querySelectorAll('h1').length} found`],
+        ['Canonical link', !!q('link[rel="canonical"]')],
+        ['Viewport meta', !!q('meta[name="viewport"]')],
+        ['html lang', !!doc.documentElement.lang],
+        ['Open Graph title', !!q('meta[property="og:title"]')],
+        ['Open Graph image', !!q('meta[property="og:image"]')],
+        ['Not noindex', !(q('meta[name="robots"]')?.content || '').toLowerCase().includes('noindex')],
+        ['Favicon', !!q('link[rel~="icon"]')],
+        ['Images have alt', images.every((image) => image.hasAttribute('alt')), `${images.filter((image) => !image.hasAttribute('alt')).length} missing`],
+      ].map(([label, ok, note]) => ({ label, ok, note }));
+      const url = new URL(iframe.src);
+      const route = (url.pathname.slice(proxyPath(side).length) || '/') + url.search + url.hash;
+      renderMetadata(side, {
+        route,
+        meta: {
+          title,
+          description,
+          canonical,
+          heading: q('h1')?.textContent?.trim() || '',
+          siteName: q('meta[property="og:site_name"]')?.content?.trim() || '',
+          icon: q('link[rel~="icon"]')?.href || '',
+          checks,
+        },
+      });
+      fetchStatus(side, route);
+      const reportScroll = () => {
+        const root = doc.scrollingElement || doc.documentElement;
+        frameState[side] = {
+          y: Number(win.scrollY) || 0,
+          max: Math.max(0, root.scrollHeight - win.innerHeight),
+        };
+        syncFrom(side);
+      };
+      win.addEventListener('scroll', reportScroll, { passive: true });
+      reportScroll();
+    }
+
     function statusBadges(side) {
       return [
         document.querySelector('.label[data-label="' + side + '"] .status-badge'),
@@ -503,6 +565,11 @@
         runFrameKey(message.key, side, message);
       }
     });
+    if (config.hosted) {
+      for (const side of ['dev', 'live']) {
+        frame(side).addEventListener('load', () => hostedSnapshot(side));
+      }
+    }
 
     scrollButton.addEventListener('click', () => {
       syncScroll = !syncScroll;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sitedrift",
-  "version": "0.3.2",
+  "version": "0.3.5",
   "description": "Catch the drift between dev and live — frame your local site and production side-by-side on the same route, locked scroll, with a difference-blend overlay. Zero runtime dependencies.",
   "type": "module",
   "bin": {

package/src/cloudflare-runtime.mjs

@@ -35,9 +35,9 @@ async function devResponse(context, route) {
   if (context.request.method === 'GET' && accept.includes('text/html')) {
     const clean = pathname.replace(/^\/+/, '');
     const candidates = pathname.endsWith('/')
-      ? [`/__sitedrift/source/${clean}index.html.txt`]
-      : [`/__sitedrift/source/${clean}.html.txt`, `/__sitedrift/source/${clean}/index.html.txt`];
-    if (pathname === '/') candidates.unshift('/__sitedrift/source/index.html.txt');
+      ? [`/__sitedrift_source/${clean}index.html.txt`]
+      : [`/__sitedrift_source/${clean}.html.txt`, `/__sitedrift_source/${clean}/index.html.txt`];
+    if (pathname === '/') candidates.unshift('/__sitedrift_source/index.html.txt');
     for (const pathname of candidates) {
       const response = await context.env.ASSETS.fetch(new URL(pathname, requestUrl));
       if (response.ok) {
@@ -72,9 +72,6 @@ async function liveResponse(context, route, live) {
 
 export async function onRequest(context) {
   const requestUrl = new URL(context.request.url);
-  if (requestUrl.pathname.startsWith('/__sitedrift/source')) {
-    return new Response('Not found.', { status: 404 });
-  }
   const match = requestUrl.pathname.match(/^\/__sitedrift\/(dev|live)(\/.*)?$/);
   if (!match) return context.env.ASSETS.fetch(context.request);
   if (!['GET', 'HEAD'].includes(context.request.method)) {

package/src/cloudflare.mjs

@@ -53,7 +53,7 @@ export function installCloudflarePreview({
 
   const liveUrl = secureLive(live);
   const internal = path.join(output, '__sitedrift');
-  const source = path.join(internal, 'source');
+  const source = path.join(output, '__sitedrift_source');
   const assetDir = path.join(internal, 'assets');
   fs.mkdirSync(source, { recursive: true });
   fs.mkdirSync(assetDir, { recursive: true });