bsmnt 0.12.0 → 0.13.0

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

@@ -5,13 +5,9 @@ type DescriptionProps = {
 }
 
 export function Description({ block }: DescriptionProps) {
-  if (!block.description) return null
-
   return (
-    <section className="py-4">
-      <p className="max-w-[62ch] text-base/7 text-current/72 md:text-lg/8">
-        {block.description}
-      </p>
-    </section>
+    <p className="max-w-[62ch] text-base/7 text-current/72 md:text-lg/8">
+      {block.description}
+    </p>
   )
 }

package/src/templates/next-pagebuilder/components/page-builder/components/gated-content/index.tsx

@@ -64,7 +64,7 @@ export function GatedContent({ block }: GatedContentProps) {
   }
 
   return (
-    <section className="py-8 md:py-12">
+    <div>
       {block.teaserHeading ? (
         <h2 className="mb-4 font-semibold text-2xl tracking-tight md:text-4xl">
           {block.teaserHeading}
@@ -114,7 +114,7 @@ export function GatedContent({ block }: GatedContentProps) {
           </button>
         </form>
       )}
-    </section>
+    </div>
   )
 }
 

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

@@ -5,13 +5,9 @@ type HeroProps = {
 }
 
 export function Hero({ block }: HeroProps) {
-  if (!block.headline) return null
-
   return (
-    <section className="py-8 md:py-12">
-      <h1 className="max-w-4xl font-semibold text-4xl tracking-tight md:text-6xl">
-        {block.headline}
-      </h1>
-    </section>
+    <h1 className="max-w-4xl font-semibold text-4xl tracking-tight md:text-6xl">
+      {block.headline}
+    </h1>
   )
 }

package/src/templates/next-pagebuilder/components/page-builder/components/rich-text-block.tsx

@@ -1,16 +1,14 @@
-import { RichText } from "@/components/sanity/rich-text"
 import type { PageBuilderBlock } from "@/components/page-builder/types"
+import { RichText } from "@/components/sanity/rich-text"
 
 type RichTextBlockProps = {
   block: Extract<PageBuilderBlock, { _type: "richTextBlock" }>
 }
 
 export function RichTextBlock({ block }: RichTextBlockProps) {
-  if (!block.content) return null
-
   return (
-    <section className="prose max-w-none">
+    <div className="prose max-w-none">
       <RichText content={block.content} />
-    </section>
+    </div>
   )
 }

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

@@ -0,0 +1,70 @@
+import type { ReactNode } from "react"
+import type { PageBuilderDocumentType } from "@/lib/integrations/sanity/page-builder-config"
+import { ArticleContent } from "./components/article-content"
+import { ContentCollection } from "./components/content-collection"
+import type {
+  ContentCollectionSearchParams,
+  PinnedCollectionCategory,
+} from "./components/content-collection/types"
+import { Description } from "./components/description"
+import { GatedContent } from "./components/gated-content"
+import { Hero } from "./components/hero"
+import { RichTextBlock } from "./components/rich-text-block"
+import type { PageBuilderBlock } from "./types"
+
+export type BlockContext = {
+  searchParams: ContentCollectionSearchParams
+  pinnedCategory: PinnedCollectionCategory
+}
+
+type BlockOf<T extends PageBuilderDocumentType> = Extract<
+  PageBuilderBlock,
+  { _type: T }
+>
+
+type BlockEntry<T extends PageBuilderDocumentType> = {
+  render: (block: BlockOf<T>, context: BlockContext) => ReactNode
+  /** Skips the block *and* its `<Section>`, so no padded gap is left behind. */
+  isEmpty?: (block: BlockOf<T>) => boolean
+}
+
+const blockRegistry: {
+  [T in PageBuilderDocumentType]: BlockEntry<T>
+} = {
+  blogCollection: {
+    render: (block, { searchParams, pinnedCategory }) => (
+      <ContentCollection
+        block={block}
+        pinnedCategory={pinnedCategory}
+        searchParams={searchParams}
+      />
+    ),
+  },
+  blogContent: {
+    render: (block) => <ArticleContent block={block} />,
+  },
+  description: {
+    render: (block) => <Description block={block} />,
+    isEmpty: (block) => !block.description,
+  },
+  gatedContent: {
+    render: (block) => <GatedContent block={block} />,
+  },
+  hero: {
+    render: (block) => <Hero block={block} />,
+    isEmpty: (block) => !block.headline,
+  },
+  richTextBlock: {
+    render: (block) => <RichTextBlock block={block} />,
+    isEmpty: (block) => !block.content?.length,
+  },
+}
+
+/**
+ * Indexing the registry with the union collapses its per-key signatures into an
+ * intersection nothing satisfies, so the widening happens once, here.
+ */
+export const getBlockEntry = (
+  type: PageBuilderDocumentType
+): BlockEntry<PageBuilderDocumentType> | undefined =>
+  blockRegistry[type] as BlockEntry<PageBuilderDocumentType> | undefined

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

@@ -1,13 +1,13 @@
-import { ArticleContent } from "./components/article-content"
-import { ContentCollection } from "./components/content-collection"
+import {
+  reserveAnchorIds,
+  resolveAnchorId,
+} from "@/lib/integrations/sanity/schemas/shared/anchor"
 import type {
   ContentCollectionSearchParams,
   PinnedCollectionCategory,
 } from "./components/content-collection/types"
-import { Description } from "./components/description"
-import { GatedContent } from "./components/gated-content"
-import { Hero } from "./components/hero"
-import { RichTextBlock } from "./components/rich-text-block"
+import { type BlockContext, getBlockEntry } from "./registry"
+import { Section } from "./section"
 import type { PageBuilderBlock, PageBuilderBlocks } from "./types"
 
 type RendererProps = {
@@ -23,49 +23,33 @@ export function Renderer({
 }: RendererProps) {
   if (!blocks?.length) return null
 
+  const context: BlockContext = { searchParams, pinnedCategory }
+
+  const reservedAnchorIds = reserveAnchorIds(blocks)
+  const takenAnchorIds = new Set<string>()
+
   return (
-    <div className="space-y-16">
-      {blocks.map((block: PageBuilderBlock) => (
-        <PageBuilderNode
-          key={block._key}
-          block={block}
-          searchParams={searchParams}
-          pinnedCategory={pinnedCategory}
-        />
-      ))}
-    </div>
-  )
-}
+    <>
+      {blocks.map((block: PageBuilderBlock) => {
+        const entry = getBlockEntry(block._type)
 
-function PageBuilderNode({
-  block,
-  searchParams,
-  pinnedCategory,
-}: {
-  block: PageBuilderBlock
-  searchParams: ContentCollectionSearchParams
-  pinnedCategory: PinnedCollectionCategory
-}) {
-  switch (block._type) {
-    case "blogCollection":
-      return (
-        <ContentCollection
-          block={block}
-          searchParams={searchParams}
-          pinnedCategory={pinnedCategory}
-        />
-      )
-    case "blogContent":
-      return <ArticleContent block={block} />
-    case "hero":
-      return <Hero block={block} />
-    case "description":
-      return <Description block={block} />
-    case "richTextBlock":
-      return <RichTextBlock block={block} />
-    case "gatedContent":
-      return <GatedContent block={block} />
-    default:
-      return null
-  }
+        // No entry means the content is ahead of the generated types.
+        if (!entry || entry.isEmpty?.(block)) return null
+
+        return (
+          <Section
+            anchorId={resolveAnchorId(
+              block,
+              takenAnchorIds,
+              reservedAnchorIds
+            )}
+            key={block._key}
+            presentation={block.presentation}
+          >
+            {entry.render(block, context)}
+          </Section>
+        )
+      })}
+    </>
+  )
 }

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

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react"
+import { spacingPaddingValue } from "@/lib/integrations/sanity/schemas/shared/spacing"
+import { cn } from "@/lib/styles/cn"
+
+export type SectionPresentation = {
+  paddingTop?: string | null
+  paddingBottom?: string | null
+} | null
+
+type SectionProps = {
+  anchorId?: string | null | undefined
+  presentation?: SectionPresentation | undefined
+  className?: string | undefined
+  children: ReactNode
+}
+
+export function Section({
+  anchorId,
+  presentation,
+  className,
+  children,
+}: SectionProps) {
+  return (
+    <section
+      id={anchorId || undefined}
+      style={{
+        paddingTop: spacingPaddingValue(presentation?.paddingTop),
+        paddingBottom: spacingPaddingValue(presentation?.paddingBottom),
+      }}
+      className={cn(anchorId && "scroll-mt-24", className)}
+    >
+      {children}
+    </section>
+  )
+}

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

@@ -132,7 +132,7 @@ export const PageDocument = ({
       {pageJsonLd.map(({ key, data }) => (
         <JsonLd key={key} data={data} />
       ))}
-      <article className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-14 px-4 py-14 md:px-6 md:py-20">
+      <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>
         {sections.length ? (
           sections