bsmnt 0.13.1 → 0.15.0

package/src/templates/next-pagebuilder/components/page-builder/library.ts

@@ -0,0 +1,183 @@
+import type { PageBuilderDocumentType } from "@/lib/integrations/sanity/page-builder-config"
+import type { PageBuilderBlock } from "./types"
+
+/** One block's stand-in value, rendered by `/components` through `Renderer`. */
+export type LibraryEntry = {
+  documentType: PageBuilderDocumentType
+  title: string
+  notes: string
+  background: string
+  block: PageBuilderBlock
+}
+
+type BlockOf<T extends PageBuilderDocumentType> = Extract<
+  PageBuilderBlock,
+  { _type: T }
+>
+
+const span = (key: string, text: string) => ({
+  _type: "span" as const,
+  _key: key,
+  text,
+  marks: [],
+})
+
+const paragraph = (key: string, text: string) => ({
+  _type: "block" as const,
+  _key: key,
+  style: "normal" as const,
+  markDefs: [],
+  children: [span(`${key}-span`, text)],
+})
+
+const heading = (key: string, text: string) => ({
+  ...paragraph(key, text),
+  style: "h2" as const,
+})
+
+const PLACEHOLDER_KEY = "placeholder"
+
+const hero: BlockOf<"hero"> = {
+  _key: PLACEHOLDER_KEY,
+  _type: "hero",
+  headline: "A heading that says what this page is for.",
+}
+
+const description: BlockOf<"description"> = {
+  _key: PLACEHOLDER_KEY,
+  _type: "description",
+  description:
+    "One paragraph of standfirst copy under a heading — long enough to set up the page, short enough that nobody skips it.",
+}
+
+const richTextBlock: BlockOf<"richTextBlock"> = {
+  _key: PLACEHOLDER_KEY,
+  _type: "richTextBlock",
+  content: [
+    heading("rt-head", "What long-form copy looks like here"),
+    paragraph(
+      "rt-one",
+      "Rich Text is the block for body copy: headings, paragraphs, lists, links and quotes, all authored in the Studio and rendered with the site's own typography."
+    ),
+    paragraph(
+      "rt-two",
+      "Because it is Portable Text rather than HTML, the same content renders in the page, in the markdown route and in the feed without a second template."
+    ),
+  ],
+}
+
+const gatedContent: BlockOf<"gatedContent"> = {
+  _key: PLACEHOLDER_KEY,
+  _type: "gatedContent",
+  internalTitle: "Gated guide",
+  teaserHeading: "A guide worth an email address",
+  teaserBody: [
+    paragraph(
+      "gc-teaser",
+      "The teaser is public. The payload — rich text, a file or a video — is withheld from the page query until a visitor submits the form."
+    ),
+  ],
+  gateType: "form",
+  gateHeadline: "Read the full guide",
+  gateDescription: "We'll email you a copy as well.",
+  submitLabel: "Get the guide",
+  successMessage: "Sent — it's on its way.",
+  kind: "richText",
+  anchorId: null,
+  presentation: null,
+}
+
+const blogCollection: BlockOf<"blogCollection"> = {
+  _key: PLACEHOLDER_KEY,
+  _type: "blogCollection",
+  subtitle: "Everything else we've written",
+}
+
+const blogContent: BlockOf<"blogContent"> = {
+  _key: PLACEHOLDER_KEY,
+  _type: "blogContent",
+  title: "How this starter renders a blog post",
+  categories: [],
+  date: "2026-02-11",
+  author: {
+    _id: "placeholder-author",
+    name: "Jane Doe",
+    avatar: null,
+    role: "Engineer",
+  },
+  body: [
+    paragraph(
+      "bc-one",
+      "A blog post is an ordinary page whose page builder holds a Blog Posts block: byline, date, categories and body all live on the block."
+    ),
+    heading("bc-head", "One block, one article"),
+    paragraph(
+      "bc-two",
+      "The collection block reads the same fields, so an article added in the Studio shows up in the index without touching code."
+    ),
+  ],
+  relatedPosts: [],
+}
+
+export const COMPONENT_LIBRARY: LibraryEntry[] = [
+  {
+    documentType: "hero",
+    title: "Heading",
+    notes: "The page's opening statement. Headline only, no media.",
+    background: "bg-white",
+    block: hero,
+  },
+  {
+    documentType: "description",
+    title: "Description",
+    notes: "A single paragraph of standfirst copy under a heading.",
+    background: "bg-white",
+    block: description,
+  },
+  {
+    documentType: "richTextBlock",
+    title: "Rich Text",
+    notes: "Long-form body copy — headings, lists, links and quotes.",
+    background: "bg-white",
+    block: richTextBlock,
+  },
+  {
+    documentType: "gatedContent",
+    title: "Gated Content",
+    notes:
+      "A teaser with an email gate. The payload is withheld until a visitor submits, so the preview shows the locked state.",
+    background: "bg-white",
+    block: gatedContent,
+  },
+  {
+    documentType: "blogCollection",
+    title: "Blog Collection",
+    notes:
+      "The full article index with search and category filters. Reads real posts.",
+    background: "bg-white",
+    block: blogCollection,
+  },
+  {
+    documentType: "blogContent",
+    title: "Blog Posts",
+    notes:
+      "The body of an article — byline, date, categories and rich text. Only valid on a blog entry page.",
+    background: "bg-white",
+    block: blogContent,
+  },
+]
+
+export const getLibraryEntry = (documentType: string | undefined) =>
+  documentType
+    ? (COMPONENT_LIBRARY.find((entry) => entry.documentType === documentType) ??
+      null)
+    : null
+
+export const COMPONENT_PREVIEW_PATH = "/components"
+
+export const COMPONENT_PREVIEW_PARAM = "component"
+
+export const getComponentPreviewPath = (documentType?: string) =>
+  documentType
+    ? `${COMPONENT_PREVIEW_PATH}?${COMPONENT_PREVIEW_PARAM}=${encodeURIComponent(documentType)}`
+    : COMPONENT_PREVIEW_PATH

package/src/templates/next-pagebuilder/components/page-builder/registry.tsx

@@ -13,6 +13,7 @@ import { RichTextBlock } from "./components/rich-text-block"
 import type { PageBuilderBlock } from "./types"
 
 export type BlockContext = {
+  pageId: string
   searchParams: ContentCollectionSearchParams
   pinnedCategory: PinnedCollectionCategory
 }
@@ -48,7 +49,9 @@ const blockRegistry: {
     isEmpty: (block) => !block.description,
   },
   gatedContent: {
-    render: (block) => <GatedContent block={block} />,
+    render: (block, { pageId }) => (
+      <GatedContent block={block} pageId={pageId} />
+    ),
   },
   hero: {
     render: (block) => <Hero block={block} />,

package/src/templates/next-pagebuilder/components/page-builder/renderer.tsx

@@ -12,18 +12,20 @@ import type { PageBuilderBlock, PageBuilderBlocks } from "./types"
 
 type RendererProps = {
   blocks: PageBuilderBlocks
+  pageId: string
   searchParams: ContentCollectionSearchParams
   pinnedCategory: PinnedCollectionCategory
 }
 
 export function Renderer({
   blocks,
+  pageId,
   searchParams,
   pinnedCategory,
 }: RendererProps) {
   if (!blocks?.length) return null
 
-  const context: BlockContext = { searchParams, pinnedCategory }
+  const context: BlockContext = { pageId, searchParams, pinnedCategory }
 
   const reservedAnchorIds = reserveAnchorIds(blocks)
   const takenAnchorIds = new Set<string>()

package/src/templates/next-pagebuilder/components/page-builder/stage.tsx

@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from "react"
+import { cn } from "@/lib/styles/cn"
+
+type StageProps = PropsWithChildren<{ background?: string }>
+
+export const Stage = ({ background, children }: StageProps) => (
+  <div className={cn("grid min-h-svh content-center", background)}>
+    {children}
+  </div>
+)

package/src/templates/next-pagebuilder/components/page-document/index.tsx

@@ -1,9 +1,13 @@
 import { stegaClean } from "@sanity/client/stega"
 import type { ContentCollectionSearchParams } from "@/components/page-builder/components/content-collection/types"
 import { Renderer } from "@/components/page-builder/renderer"
-import type { PAGE_QUERY_RESULT } from "@/lib/integrations/sanity/sanity.types"
+import type {
+  BREADCRUMB_PAGES_QUERY_RESULT,
+  PAGE_QUERY_RESULT,
+} from "@/lib/integrations/sanity/sanity.types"
 import { urlForImage } from "@/lib/integrations/sanity/utils/image"
 import { buildPageJsonLd } from "@/lib/integrations/sanity/utils/page-json-ld"
+import { buildBreadcrumbs } from "@/lib/utils/breadcrumbs"
 import {
   generateBreadcrumbJsonLd,
   generateSanityArticleJsonLd,
@@ -15,6 +19,7 @@ type PageDocumentProps = {
   page: NonNullable<PAGE_QUERY_RESULT>
   path: string | null
   searchParams: ContentCollectionSearchParams
+  breadcrumbPages: BREADCRUMB_PAGES_QUERY_RESULT
 }
 
 type PageBuilderBlock = NonNullable<
@@ -22,6 +27,13 @@ type PageBuilderBlock = NonNullable<
 >[number]
 type BlogContentBlock = Extract<PageBuilderBlock, { _type: "blogContent" }>
 
+// Blog posts are pages with a Blog Posts block; it carries the post's date,
+// author and thumbnail.
+export const findBlogBlock = (page: NonNullable<PAGE_QUERY_RESULT>) =>
+  page.pageBuilder?.find(
+    (block): block is BlogContentBlock => block?._type === "blogContent"
+  )
+
 export const getPageSections = (
   page: NonNullable<PAGE_QUERY_RESULT>,
   searchParams: ContentCollectionSearchParams
@@ -31,48 +43,27 @@ export const getPageSections = (
         <Renderer
           key="page-builder"
           blocks={page.pageBuilder}
+          pageId={page._id}
           searchParams={searchParams}
           pinnedCategory={stegaClean(page.collectionCategory)}
         />,
       ]
     : []
 
-const buildBreadcrumbs = (
-  slugPath: string | null,
-  pageTitle: string | null
-): Array<{ name: string; url: string }> => {
-  const items: Array<{ name: string; url: string }> = [
-    { name: "Home", url: "/" },
-  ]
-
-  if (!slugPath) return items
-
-  const segments = slugPath.split("/").filter(Boolean)
-  for (let i = 0; i < segments.length; i++) {
-    const isLast = i === segments.length - 1
-    const url = `/${segments.slice(0, i + 1).join("/")}`
-
-    //TODO: we might change this in the future if slug title and folder diverge too much :)
-
-    const name =
-      isLast && pageTitle
-        ? pageTitle
-        : (segments[i]
-            ?.replace(/-/g, " ")
-            .replace(/\b\w/g, (c) => c.toUpperCase()) ?? "")
-    items.push({ name, url })
-  }
-
-  return items
-}
-
 export const PageDocument = ({
   page,
   path,
   searchParams,
+  breadcrumbPages,
 }: PageDocumentProps) => {
   const title = stegaClean(page.title) || page.title
   const sections = getPageSections(page, searchParams)
+  // A Heading block renders the page's H1, so the title only stands in without
+  // one. Hidden blocks are already filtered out of the query, and an empty one
+  // renders nothing (see the registry's `isEmpty`).
+  const hasHeadingBlock = page.pageBuilder?.some(
+    (block) => block?._type === "hero" && Boolean(block.headline)
+  )
 
   const cleanTitle = stegaClean(page.title) || "Basement"
   const cleanDescription = stegaClean(
@@ -84,7 +75,11 @@ export const PageDocument = ({
     ? urlForImage(page.metadata.image).width(1200).height(630).url()
     : undefined
 
-  const breadcrumbs = buildBreadcrumbs(path, cleanTitle)
+  const breadcrumbs = buildBreadcrumbs({
+    path,
+    name: cleanTitle,
+    pages: breadcrumbPages,
+  })
   const hasBreadcrumbs = breadcrumbs.length > 1
 
   // Editor-selected page-level structured data (FAQ, Event, custom, etc.).
@@ -93,9 +88,7 @@ export const PageDocument = ({
   // Blog posts (pages with a Blog Posts block) emit Article JSON-LD with
   // fields derived from the post — no Custom block needed. Skipped when the
   // editor already supplied an Article (via a Custom block) to avoid duplicates.
-  const blogBlock = page.pageBuilder?.find(
-    (block): block is BlogContentBlock => block?._type === "blogContent"
-  )
+  const blogBlock = findBlogBlock(page)
   const hasManualArticle = pageJsonLd.some(
     ({ data }) => (data as { "@type"?: unknown })["@type"] === "Article"
   )
@@ -133,7 +126,7 @@ export const PageDocument = ({
         <JsonLd key={key} data={data} />
       ))}
       <article className="mx-auto flex w-full max-w-6xl flex-1 flex-col px-4 py-14 md:px-6 md:py-20">
-        <h1>{title}</h1>
+        {hasHeadingBlock ? null : <h1>{title}</h1>}
         {sections.length ? (
           sections
         ) : (

package/src/templates/next-pagebuilder/lefthook.yml

@@ -7,7 +7,7 @@ pre-commit:
   commands:
     biome:
       glob: '*.{js,mjs,ts,jsx,tsx,css,scss}'
-      run: bun biome check --max-diagnostics=200 --write --unsafe {staged_files}
+      run: bun biome check --max-diagnostics=200 --write {staged_files}
       stage_fixed: true
     typecheck:
       glob: '*.{ts,tsx}'