@bygghammar/cms-platform 0.96.0 → 0.97.0

package/src/site/PageRenderer.tsx

@@ -5,7 +5,7 @@
  * a published page or an unsaved draft. The registry is passed in, so a site
  * only supplies its own block definitions.
  */
-import { useMemo } from "react";
+import { Fragment, useMemo, type ReactNode } from "react";
 import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
 
 import { publishedPageStaleTime } from "../cms/page-publication";
@@ -116,6 +116,32 @@ function RenderBlock({
   );
 }
 
+/** Block types that open a page full-bleed, under the header. */
+export const DEFAULT_HERO_BLOCK_TYPES: readonly string[] = Object.freeze(["heroFull"]);
+
+/**
+ * Where a notice goes among a page's top-level blocks: right after a leading
+ * hero (which sits under the header and must stay first), otherwise first. A
+ * global block counts by its own first visible block.
+ */
+export function noticeIndex(
+  blocks: readonly BlockInstance[],
+  globals: Record<string, BlockInstance[]>,
+  heroTypes: readonly string[] = DEFAULT_HERO_BLOCK_TYPES,
+): number {
+  const leadOf = (block: BlockInstance): BlockInstance | null => {
+    if (block.visible === false) return null;
+    if (block.type !== "globalRef") return block;
+    const key = String((block.props as BlockProps | undefined)?.sectionKey ?? "");
+    return (globals[key] ?? []).find((inner) => inner.visible !== false) ?? null;
+  };
+  for (let i = 0; i < blocks.length; i += 1) {
+    const lead = leadOf(blocks[i]!);
+    if (lead) return heroTypes.includes(lead.type) ? i + 1 : 0;
+  }
+  return 0;
+}
+
 /** Render an in-memory block tree — used by the builder preview and drafts. */
 export function DraftPageRendererView({
   blocks,
@@ -123,12 +149,15 @@ export function DraftPageRendererView({
   registry,
   edit,
   selectedId,
+  insert,
 }: {
   blocks: BlockInstance[];
   globals: Record<string, BlockInstance[]>;
   registry: BlockRegistry;
   edit?: boolean;
   selectedId?: string | null;
+  /** Something that is not a block, rendered among the top-level blocks at `at`. */
+  insert?: { at: number; node: ReactNode };
 }) {
   // Container blocks (`layout`) render their children through this, so nesting
   // uses exactly the same code path — and the same globals, selection
@@ -154,9 +183,17 @@ export function DraftPageRendererView({
   // Every page render gets its own priority scope, so the first first-screen
   // image loads eagerly and the rest stay lazy. In the builder (`edit`) the
   // editor jumps around the page, so no image is treated as the hero.
+  const rendered = children.render(blocks);
+  if (insert) {
+    rendered.splice(
+      Math.max(0, Math.min(insert.at, rendered.length)),
+      0,
+      <Fragment key="__inserted">{insert.node}</Fragment>,
+    );
+  }
   return (
     <PriorityMediaProvider enabled={!edit}>
-      <BlockChildrenProvider value={children}>{children.render(blocks)}</BlockChildrenProvider>
+      <BlockChildrenProvider value={children}>{rendered}</BlockChildrenProvider>
     </PriorityMediaProvider>
   );
 }
@@ -212,14 +249,24 @@ export function createPageRenderer(
    * fetched. The cached original is not changed, so a later policy can show
    * it again. Pass a stable function, or none.
    */
+  /*
+   * `notice` is shown among the page's blocks — after a leading hero (one of
+   * `heroBlockTypes`), otherwise first — without changing the page itself: a
+   * booking-off landing page's notice, say. It is decided by the caller from
+   * the current policy, like `transform`.
+   */
   function PageRenderer({
     pageKey,
     variant,
     transform,
+    notice,
+    heroBlockTypes,
   }: {
     pageKey: string;
     variant?: string;
     transform?: PageTransform;
+    notice?: ReactNode;
+    heroBlockTypes?: readonly string[];
   }) {
     const { data } = useSuspenseQuery(pageQueryOptions(pageKey, variant));
     const fetched = data as RenderedPage | null;
@@ -228,8 +275,17 @@ export function createPageRenderer(
       [fetched, transform],
     );
     if (!page) return null;
+    const insert =
+      notice != null && notice !== false
+        ? { at: noticeIndex(page.blocks, page.globals, heroBlockTypes), node: notice }
+        : undefined;
     return (
-      <DraftPageRendererView blocks={page.blocks} globals={page.globals} registry={registry} />
+      <DraftPageRendererView
+        blocks={page.blocks}
+        globals={page.globals}
+        registry={registry}
+        insert={insert}
+      />
     );
   }
 

package/src/site/link-visibility.tsx

@@ -7,9 +7,13 @@
  * provider nothing is filtered, which is what the backoffice and any screen
  * that renders the chrome outside the public site get.
  */
-import { createContext, useContext, type ReactNode } from "react";
+import { createContext, useCallback, useContext, type ReactNode } from "react";
 
-import { OPEN_LINK_POLICY, type LinkVisibilityPolicy } from "../navigation/visibility";
+import {
+  OPEN_LINK_POLICY,
+  isHiddenFromDiscovery,
+  type LinkVisibilityPolicy,
+} from "../navigation/visibility";
 
 const LinkVisibilityContext = createContext<LinkVisibilityPolicy>(OPEN_LINK_POLICY);
 
@@ -26,3 +30,18 @@ export function LinkVisibilityProvider({
 export function useLinkVisibility(): LinkVisibilityPolicy {
   return useContext(LinkVisibilityContext);
 }
+
+/**
+ * The one rule every structured link on a page follows — buttons, cards,
+ * tiles, slide links: may it be offered right now? False only for a link to a
+ * page hidden from the website while booking is hidden (see
+ * `isHiddenFromDiscovery`); external links, anchors, `mailto:`/`tel:` and
+ * every other page are always offered. Read from the policy the server
+ * rendered with and every client navigation refreshes, so the server's HTML
+ * and the browser agree. Without a provider (the builder, the backoffice)
+ * everything is offered. Running text is not filtered: see docs/PAGES.md.
+ */
+export function useDiscoverableLink(): (href: string | null | undefined) => boolean {
+  const policy = useLinkVisibility();
+  return useCallback((href) => !isHiddenFromDiscovery(href, policy), [policy]);
+}