@bygghammar/cms-platform 0.94.0 → 0.96.0

package/src/site/routes/preview-page.tsx

@@ -8,10 +8,16 @@
  * and draft store only.
  */
 import { useQueryClient } from "@tanstack/react-query";
-import { useEffect, useState, type ComponentType } from "react";
+import { useEffect, useRef, useState, type ComponentType } from "react";
 
 import { LocaleProvider, isLocale, DEFAULT_LOCALE, type Locale } from "../../i18n";
 import type { BlockInstance } from "../../blocks/types";
+import {
+  createEditorMessageGuard,
+  postToOrigins,
+  PREVIEW_SOURCE,
+  trustedEditorOrigins,
+} from "../preview-messaging";
 
 export type PreviewDraftSnapshot = {
   blocks: BlockInstance[];
@@ -43,18 +49,47 @@ export type PreviewPageDeps = {
   /** Outline colour used for block hover/selection. */
   outlineColorVar?: string;
   copy?: { draft?: string; published?: string; loading?: string };
+  /**
+   * Origins other than the preview's own that may drive the canvas — only
+   * when the builder is served from a different origin than the site. The
+   * canvas otherwise listens only to a builder on its own origin.
+   */
+  trustedEditorOrigins?: readonly string[];
+  /**
+   * What a visitor would get, for the standalone Preview: a hook returning a
+   * transform the site applies to the blocks it shows (booking links removed
+   * while booking is off, say). Never applied inside the builder's own canvas,
+   * which keeps every block and link editable.
+   */
+  usePublicView?: () => (
+    pageKey: string,
+    snapshot: { blocks: BlockInstance[]; globals: Record<string, BlockInstance[]> },
+  ) => { blocks: BlockInstance[]; globals: Record<string, BlockInstance[]> };
 };
 
-type DraftMsg = {
-  source: "lovable-editor";
-  type: "draft" | "scrollTo";
-  blocks: BlockInstance[];
-  globals: Record<string, BlockInstance[]>;
-  selectedId?: string | null;
-  blockId?: string;
-  locale?: string;
-  sharedContent?: Record<string, unknown>;
-};
+/**
+ * Where a preview is being rendered.
+ *
+ * `canvas` is the builder's own editing surface, embedded in the builder; it
+ * shows every block as authored. `preview` is the page opened on its own and
+ * follows the public policy. The mode comes from how the page is actually
+ * displayed — never from a query parameter — and nothing about it grants
+ * access: unpublished content still only arrives from the editor's own
+ * browser or through staff-only reads.
+ */
+export type PreviewRenderMode = "canvas" | "preview";
+
+export function previewRenderMode(
+  win: { parent: unknown } | undefined = typeof window === "undefined" ? undefined : window,
+): PreviewRenderMode {
+  return win !== undefined && win.parent !== win ? "canvas" : "preview";
+}
+
+const asIs = (
+  _key: string,
+  snapshot: { blocks: BlockInstance[]; globals: Record<string, BlockInstance[]> },
+) => snapshot;
+const useAsIs = () => asIs;
 
 export function createPreviewPage(deps: PreviewPageDeps): ComponentType<{ pageKey: string }> {
   const copy = {
@@ -72,7 +107,9 @@ export function createPreviewPage(deps: PreviewPageDeps): ComponentType<{ pageKe
     const [locale, setLocale] = useState<Locale>(DEFAULT_LOCALE);
     const [ready, setReady] = useState(false);
     const [isDraft, setIsDraft] = useState(false);
-    const embedded = typeof window !== "undefined" && window.parent !== window;
+    const embedded = previewRenderMode() === "canvas";
+    const publicView = (deps.usePublicView ?? useAsIs)();
+    const shown = embedded ? { blocks, globals } : publicView(key, { blocks, globals });
 
     // Bootstrap: prefer a local unsaved draft, else the saved version.
     useEffect(() => {
@@ -132,14 +169,23 @@ export function createPreviewPage(deps: PreviewPageDeps): ComponentType<{ pageKe
       if (q && isLocale(q)) setLocale(q);
     }, []);
 
-    // Ready handshake plus draft/scroll messages from the editor.
+    // Ready handshake plus draft/scroll messages from the editor: only from
+    // the frame that embeds this canvas, on a trusted origin, in order (see
+    // preview-messaging). Replies name that origin; nothing goes to "*".
+    const replyOrigins = useRef<() => string[]>(() => []);
     useEffect(() => {
-      const send = (msg: unknown) =>
-        window.parent && window.parent !== window && window.parent.postMessage(msg, "*");
-      send({ source: "lovable-preview", type: "ready" });
+      const guard = createEditorMessageGuard({
+        trustedOrigins: trustedEditorOrigins(window.location.origin, deps.trustedEditorOrigins),
+        parent: () => window.parent,
+        self: () => window,
+      });
+      replyOrigins.current = () => guard.replyOrigins();
+      if (window.parent !== window) {
+        postToOrigins(window.parent, { source: PREVIEW_SOURCE, type: "ready" }, guard.replyOrigins());
+      }
       const onMsg = (ev: MessageEvent) => {
-        const data = ev.data as DraftMsg | undefined;
-        if (!data || data.source !== "lovable-editor") return;
+        const data = guard.accept(ev);
+        if (!data) return;
         if (data.type === "scrollTo") {
           const id = data.blockId;
           if (!id) return;
@@ -150,7 +196,6 @@ export function createPreviewPage(deps: PreviewPageDeps): ComponentType<{ pageKe
           });
           return;
         }
-        if (data.type !== "draft") return;
         if (data.sharedContent && Object.keys(data.sharedContent).length) {
           queryClient.setQueryData(
             deps.sharedContentQueryKey,
@@ -160,9 +205,9 @@ export function createPreviewPage(deps: PreviewPageDeps): ComponentType<{ pageKe
             }),
           );
         }
-        setBlocks(data.blocks);
-        setGlobals(data.globals);
-        setSelectedId(data.selectedId ?? null);
+        setBlocks(data.blocks as BlockInstance[]);
+        setGlobals(data.globals as Record<string, BlockInstance[]>);
+        setSelectedId(data.selectedId);
         if (data.locale && isLocale(data.locale)) setLocale(data.locale);
         setIsDraft(true);
         setReady(true);
@@ -185,13 +230,12 @@ export function createPreviewPage(deps: PreviewPageDeps): ComponentType<{ pageKe
         }
         e.preventDefault();
         e.stopPropagation();
-        window.parent.postMessage(
-          {
-            source: "lovable-preview",
-            type: "select",
-            blockId: el.getAttribute("data-block-id"),
-          },
-          "*",
+        const blockId = el.getAttribute("data-block-id");
+        if (!blockId) return;
+        postToOrigins(
+          window.parent,
+          { source: PREVIEW_SOURCE, type: "select", blockId },
+          replyOrigins.current(),
         );
       };
       document.addEventListener("click", onClick, true);
@@ -225,8 +269,8 @@ export function createPreviewPage(deps: PreviewPageDeps): ComponentType<{ pageKe
               : "pt-24 md:pt-32 has-[[data-site-hero]]:pt-0 md:has-[[data-site-hero]]:pt-0"}>
             {ready ? (
               <deps.DraftPageRenderer
-                blocks={blocks}
-                globals={globals}
+                blocks={shown.blocks}
+                globals={shown.globals}
                 edit
                 selectedId={selectedId}
               />

package/src/site/routes/public-page.tsx

@@ -26,8 +26,12 @@ export type PublicPageRouteDeps<Ctx> = {
   resolvePath: (path: string) => Promise<ResolvedPath>;
   /** Page-context query (SEO rows, locale, origin, domains). */
   pageContextQueryOptions: QueryLike;
-  /** Published-page query for one page key. */
-  pageQueryOptions: (pageKey: string) => QueryLike;
+  /**
+   * Published-page query for one page key. With `pagePolicy` configured it is
+   * also handed the page's current policy, so a site can keep pages fetched
+   * under different policies in different cache entries.
+   */
+  pageQueryOptions: (pageKey: string, pagePolicy?: unknown) => QueryLike;
   /** Head builder from `createPageContext`. */
   buildPageHead: (pageKey: string, context: Ctx | undefined) => PublicPageHead;
   /** Site chrome. */
@@ -39,17 +43,60 @@ export type PublicPageRouteDeps<Ctx> = {
   copy: { notFoundTitle: string; errorText: string };
   /** Padding applied above the page content; defaults to the header offset. */
   contentClassName?: string;
+  /**
+   * This page's public policy, read on the server: a query resolving to at
+   * least `{ indexable: boolean }`. A page that is reachable but not listed
+   * (link-only), or whose policy could not be read, is rendered with
+   * `noindex`. The answer is handed to the page as `pagePolicy` in the loader
+   * data, so the page can apply the rest of it (booking, say).
+   *
+   * Per page on purpose: a site-wide list would put the address of every
+   * link-only page into the source of every page. Optional: without it every
+   * page found is indexable as before. Reachability itself stays with
+   * `pageQueryOptions`, which answers nothing for a page that is not public.
+   */
+  pagePolicy?: (pageKey: string) => QueryLike;
+};
+
+/** The part of a page policy the route itself reads. */
+export type RoutePagePolicy = {
+  /** False: render with `noindex`. */
+  indexable?: boolean;
+  /** True: the page exists and is positively not public now. Answer 404 whatever the cache holds. */
+  offline?: boolean;
+  /** True: the page is public now. A cached "not found" is re-read rather than trusted. */
+  live?: boolean;
 };
 
 type EnsureQueryData = <T extends QueryLike>(options: T) => Promise<unknown>;
 type LoaderArgs = {
-  context: { queryClient: { ensureQueryData: EnsureQueryData } };
+  context: {
+    queryClient: {
+      ensureQueryData: EnsureQueryData;
+      /** Honours the query's freshness, so client navigation re-reads a stale policy. */
+      fetchQuery?: EnsureQueryData;
+    };
+  };
   params: { _splat?: string };
 };
 
+/** What the route hands its head and component. */
+export type PublicPageLoaderData<Ctx> = { pageKey: string; ctx: Ctx; pagePolicy?: unknown };
+
+/** A head with its robots directive replaced by `noindex` — never weakened, only added. */
+export function withNoindex(head: PublicPageHead): PublicPageHead {
+  return {
+    ...head,
+    meta: [
+      ...(head.meta ?? []).filter((tag) => tag["name"] !== "robots"),
+      { name: "robots", content: "noindex" },
+    ],
+  };
+}
+
 export type PublicPageRoute<Ctx> = {
-  loader: (args: LoaderArgs) => Promise<{ pageKey: string; ctx: Ctx }>;
-  head: (args: { loaderData?: { pageKey: string; ctx: Ctx } }) => PublicPageHead;
+  loader: (args: LoaderArgs) => Promise<PublicPageLoaderData<Ctx>>;
+  head: (args: { loaderData?: PublicPageLoaderData<Ctx> }) => PublicPageHead;
   PublicPage: (props: { pageKey: string }) => ReactElement;
   ErrorScreen: () => ReactElement;
   NotFoundScreen: () => ReactElement;
@@ -73,10 +120,32 @@ export function createPublicPageRoute<Ctx>(deps: PublicPageRouteDeps<Ctx>): Publ
       }
       if (res.kind !== "page") throw notFound();
 
-      const [ctx, page] = await Promise.all([
+      const fetchQuery = context.queryClient.fetchQuery?.bind(context.queryClient);
+      const readPolicy = deps.pagePolicy
+        ? (fetchQuery ?? context.queryClient.ensureQueryData.bind(context.queryClient))(
+            deps.pagePolicy(res.pageKey),
+          )
+        : Promise.resolve(undefined);
+      // The policy first: it decides whether a cached page may be used at all,
+      // and which cache entry to read.
+      const [ctx, pagePolicy] = await Promise.all([
         context.queryClient.ensureQueryData(deps.pageContextQueryOptions),
-        context.queryClient.ensureQueryData(deps.pageQueryOptions(res.pageKey)),
+        readPolicy,
       ]);
+      const policy = pagePolicy as RoutePagePolicy | undefined;
+      /*
+       * A page the current policy reports offline answers 404 even when the
+       * browser still holds it from a visit made while it was published. A
+       * warm query must not keep an unpublished page on the screen.
+       */
+      if (policy?.offline === true) throw notFound();
+      const pageOptions = deps.pageQueryOptions(res.pageKey, pagePolicy);
+      let page = await context.queryClient.ensureQueryData(pageOptions);
+      // And the reverse: a "not found" cached before the page went live is
+      // read again rather than trusted.
+      if (page == null && policy?.live === true && fetchQuery) {
+        page = await fetchQuery({ ...pageOptions, staleTime: 0 } as QueryLike);
+      }
 
       /*
        * `resolvePath` only knows the path map, which lists drafts too. The
@@ -88,7 +157,7 @@ export function createPublicPageRoute<Ctx>(deps: PublicPageRouteDeps<Ctx>): Publ
        * path.
        */
       if (page == null) throw notFound();
-      return { pageKey: res.pageKey, ctx: ctx as Ctx };
+      return { pageKey: res.pageKey, ctx: ctx as Ctx, pagePolicy };
     },
 
     head({ loaderData }) {
@@ -97,7 +166,10 @@ export function createPublicPageRoute<Ctx>(deps: PublicPageRouteDeps<Ctx>): Publ
           meta: [{ title: deps.copy.notFoundTitle }, { name: "robots", content: "noindex" }],
         };
       }
-      return deps.buildPageHead(loaderData.pageKey, loaderData.ctx);
+      const head = deps.buildPageHead(loaderData.pageKey, loaderData.ctx);
+      // Link-only (or a policy that could not be read): reachable, not indexable.
+      const policy = loaderData.pagePolicy as RoutePagePolicy | undefined;
+      return policy?.indexable === false ? withNoindex(head) : head;
     },
 
     PublicPage: ({ pageKey }) => (

package/src/util/redact-url.ts

@@ -0,0 +1,18 @@
+/**
+ * An address as it may be stored or shown: its origin, and never its
+ * credentials, path, query string or fragment.
+ *
+ * Receivers put keys in paths (`/services/T…/B…/<key>`) as readily as in query
+ * strings, so whatever follows the origin is replaced by a fixed marker rather
+ * than trimmed. Pure, so audit code in the browser can use it too.
+ */
+export function redactUrl(raw: string | URL): string {
+  try {
+    const url = typeof raw === "string" ? new URL(raw) : raw;
+    if (url.origin === "null") return "(invalid address)";
+    const rest = url.pathname !== "/" || url.search !== "" || url.hash !== "";
+    return rest ? `${url.origin}/[redacted]` : url.origin;
+  } catch {
+    return "(invalid address)";
+  }
+}