bsmnt 0.9.0 → 0.11.0

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

@@ -0,0 +1,306 @@
+import { Suspense } from "react"
+import {
+  type DynamicFetchOptions,
+  getDynamicFetchOptions,
+  toSanityFetchOptions,
+  sanityFetch,
+} from "@/lib/integrations/sanity/live"
+import {
+  ALL_BLOG_CATEGORIES_QUERY,
+  BLOG_ARTICLES_COUNT_QUERY,
+  BLOG_ARTICLES_PAGINATED_QUERY,
+  COLLECTION_PAGES_QUERY,
+} from "@/lib/integrations/sanity/queries"
+import {
+  BLOG_ARTICLES_COUNT_TAG,
+  BLOG_ARTICLES_TAG,
+  BLOG_CATEGORIES_TAG,
+} from "@/lib/integrations/sanity/tags"
+import { getPagePath } from "@/lib/utils/sitemap"
+import { ContentFilters } from "./content-filters"
+import { ContentGrid } from "./content-grid"
+import { ContentPaginationNav } from "./content-pagination-nav"
+import { CollectionResultsSkeleton } from "./skeleton"
+import type {
+  CollectionPage,
+  ContentCategory,
+  ContentCollectionBlock,
+  ContentCollectionSearchParams,
+  ContentItemCard,
+  PinnedCollectionCategory,
+  SearchParams,
+} from "./types"
+
+type ContentCollectionProps = {
+  block: ContentCollectionBlock
+  searchParams: ContentCollectionSearchParams
+  /** Category pages pin the collection to one category. */
+  pinnedCategory: PinnedCollectionCategory
+}
+
+const FEATURED_COUNT = 2
+const PAGE_SIZE = 6
+
+const normalizePageValue = (value: string | string[] | undefined) => {
+  const page = Number(Array.isArray(value) ? value[0] : value)
+  return Number.isFinite(page) && page > 0 ? Math.floor(page) : 1
+}
+
+// The pin is the only filter now — the chips are links to category pages, so
+// there's no `?category=` to reconcile against the category list.
+const getPinnedSlug = (pinnedCategory: PinnedCollectionCategory) =>
+  pinnedCategory?.slug ?? ""
+
+const getTotalPages = ({
+  activeCategory,
+  totalCount,
+}: {
+  activeCategory: string
+  totalCount: number
+}) => {
+  const regularTotal =
+    activeCategory === ""
+      ? Math.max(0, totalCount - FEATURED_COUNT)
+      : totalCount
+
+  return Math.max(1, Math.ceil(regularTotal / PAGE_SIZE))
+}
+
+const getCollectionWindow = ({
+  activeCategory,
+  currentPage,
+}: {
+  activeCategory: string
+  currentPage: number
+}) => {
+  const isFirstPageNoFilter = currentPage === 1 && activeCategory === ""
+
+  return {
+    isFirstPageNoFilter,
+    fetchLimit: isFirstPageNoFilter ? PAGE_SIZE + FEATURED_COUNT : PAGE_SIZE,
+    fetchOffset: isFirstPageNoFilter
+      ? 0
+      : (currentPage - 1) * PAGE_SIZE +
+        (activeCategory === "" ? FEATURED_COUNT : 0),
+  }
+}
+
+// `'use cache'` helpers: searchParams (resolved to plain values) and the draft
+// The fetch options arrive as props so each window of results caches and
+// revalidates by tag independently.
+//
+// Don't cap the empty results: these render inside a live page's body and a
+// nested lifetime propagates as a min(). BLOG_COLLECTION_TAGS clears them.
+async function getBlogCategories(fetchOptions: DynamicFetchOptions) {
+  "use cache"
+  const { data } = await sanityFetch({
+    query: ALL_BLOG_CATEGORIES_QUERY,
+    ...toSanityFetchOptions(fetchOptions),
+    tags: [BLOG_CATEGORIES_TAG],
+  })
+  return (data as ContentCategory[] | null) ?? []
+}
+
+async function getCollectionPages(fetchOptions: DynamicFetchOptions) {
+  "use cache"
+  const { data } = await sanityFetch({
+    query: COLLECTION_PAGES_QUERY,
+    ...toSanityFetchOptions(fetchOptions),
+    tags: [BLOG_CATEGORIES_TAG],
+  })
+  return (data as CollectionPage[] | null) ?? []
+}
+
+async function getBlogArticlesCount({
+  category,
+  ...fetchOptions
+}: { category: string } & DynamicFetchOptions) {
+  "use cache"
+  const { data } = await sanityFetch({
+    query: BLOG_ARTICLES_COUNT_QUERY,
+    params: { category },
+    ...toSanityFetchOptions(fetchOptions),
+    tags: [BLOG_ARTICLES_COUNT_TAG],
+  })
+  return (data as number | null) ?? 0
+}
+
+async function getBlogArticles({
+  category,
+  offset,
+  end,
+  ...fetchOptions
+}: {
+  category: string
+  offset: number
+  end: number
+} & DynamicFetchOptions) {
+  "use cache"
+  const { data } = await sanityFetch({
+    query: BLOG_ARTICLES_PAGINATED_QUERY,
+    params: { category, offset, end },
+    ...toSanityFetchOptions(fetchOptions),
+    tags: [BLOG_ARTICLES_TAG],
+  })
+  return (data as ContentItemCard[] | null) ?? []
+}
+
+async function CollectionToolbar({
+  pinnedCategory,
+}: {
+  pinnedCategory: PinnedCollectionCategory
+}) {
+  const activeCategory = getPinnedSlug(pinnedCategory)
+  const fetchOptions = await getDynamicFetchOptions()
+
+  const [categories, collectionPages, count] = await Promise.all([
+    getBlogCategories(fetchOptions),
+    getCollectionPages(fetchOptions),
+    getBlogArticlesCount({ category: activeCategory, ...fetchOptions }),
+  ])
+
+  // The chips navigate to the page pinned to each category, so a visitor on one
+  // can still reach the others. Shortest unpinned path wins as the index.
+  const categoryHrefs: Record<string, string> = {}
+  let indexHref = "/"
+  let indexLength = Number.POSITIVE_INFINITY
+  for (const entry of collectionPages) {
+    // getPagePath, not a template literal: a "/" slug falls through the resolver
+    // raw, and `/${"/"}` is a scheme-relative URL that navigates off-site.
+    const href = getPagePath(entry.path)
+    if (entry.category) categoryHrefs[entry.category] = href
+    else if (href.length < indexLength) {
+      indexHref = href
+      indexLength = href.length
+    }
+  }
+
+  return (
+    <ContentFilters
+      categories={categories}
+      activeCategory={activeCategory}
+      count={count}
+      categoryHrefs={categoryHrefs}
+      indexHref={indexHref}
+    />
+  )
+}
+
+function CollectionResultsSection({
+  activeCategory,
+  items,
+  isFirstPageNoFilter,
+  subtitle,
+}: {
+  activeCategory: string
+  items: ContentItemCard[]
+  isFirstPageNoFilter: boolean
+  subtitle: string | null | undefined
+}) {
+  const featuredItems = isFirstPageNoFilter
+    ? items.slice(0, FEATURED_COUNT)
+    : []
+  const regularItems = isFirstPageNoFilter ? items.slice(FEATURED_COUNT) : items
+  const isEmpty = featuredItems.length === 0 && regularItems.length === 0
+
+  return (
+    <>
+      {featuredItems.length > 0 ? (
+        <ContentGrid
+          items={featuredItems}
+          className="grid grid-cols-1 gap-8 md:grid-cols-2"
+        />
+      ) : null}
+      {isFirstPageNoFilter && activeCategory === "" && subtitle ? (
+        <h2 className="font-medium text-2xl leading-tight">{subtitle}</h2>
+      ) : null}
+      {isEmpty ? (
+        <div className="rounded-[1.5rem] border border-black/15 border-dashed bg-black/[0.02] px-6 py-12 text-center">
+          <p className="font-medium text-lg">No content found</p>
+          <p className="mt-2 text-current/60 text-sm">
+            Try a different category to explore more content.
+          </p>
+        </div>
+      ) : (
+        <ContentGrid items={regularItems} />
+      )}
+    </>
+  )
+}
+
+function CollectionPaginationSection({
+  currentPage,
+  totalPages,
+}: {
+  currentPage: number
+  totalPages: number
+}) {
+  if (totalPages <= 1) return null
+
+  return (
+    <ContentPaginationNav currentPage={currentPage} totalPages={totalPages} />
+  )
+}
+
+async function CollectionResults({
+  block,
+  searchParams,
+  pinnedCategory,
+}: ContentCollectionProps) {
+  const [resolvedParams, fetchOptions] = await Promise.all([
+    Promise.resolve(searchParams).then(
+      (params): SearchParams => params ?? {}
+    ),
+    getDynamicFetchOptions(),
+  ])
+  const currentPage = normalizePageValue(resolvedParams.page)
+  const activeCategory = getPinnedSlug(pinnedCategory)
+
+  const totalCount = await getBlogArticlesCount({
+    category: activeCategory,
+    ...fetchOptions,
+  })
+  const totalPages = getTotalPages({ activeCategory, totalCount })
+  const canonicalPage = Math.min(currentPage, totalPages)
+
+  const { isFirstPageNoFilter, fetchLimit, fetchOffset } = getCollectionWindow({
+    activeCategory,
+    currentPage: canonicalPage,
+  })
+
+  const items = await getBlogArticles({
+    category: activeCategory,
+    offset: fetchOffset,
+    end: fetchOffset + fetchLimit,
+    ...fetchOptions,
+  })
+
+  return (
+    <>
+      <CollectionResultsSection
+        activeCategory={activeCategory}
+        items={items}
+        isFirstPageNoFilter={isFirstPageNoFilter}
+        subtitle={block.subtitle}
+      />
+      <CollectionPaginationSection
+        currentPage={canonicalPage}
+        totalPages={totalPages}
+      />
+    </>
+  )
+}
+
+// Only the results wait on `searchParams` (for `?page=`), which is the dynamic
+// read the boundary exists for. The toolbar reads nothing request-scoped and
+// every fetch behind it is cached, so it prerenders into the static shell.
+export function ContentCollection(props: ContentCollectionProps) {
+  return (
+    <section className="flex flex-col gap-8 py-8">
+      <CollectionToolbar pinnedCategory={props.pinnedCategory} />
+      <Suspense fallback={<CollectionResultsSkeleton />}>
+        <CollectionResults {...props} />
+      </Suspense>
+    </section>
+  )
+}

package/src/templates/next-pagebuilder-cache/components/page-builder/components/content-collection/skeleton.tsx

@@ -0,0 +1,41 @@
+const FEATURED_PLACEHOLDERS = ["featured-1", "featured-2"]
+const CARD_PLACEHOLDERS = [
+  "card-1",
+  "card-2",
+  "card-3",
+  "card-4",
+  "card-5",
+  "card-6",
+]
+
+function CardPlaceholder() {
+  return (
+    <li className="flex flex-col gap-3">
+      <div className="aspect-16/9 w-full rounded-lg bg-black/10" />
+      <div className="flex flex-col gap-2">
+        <div className="h-3 w-16 rounded bg-black/10" />
+        <div className="h-5 w-4/5 rounded bg-black/10" />
+        <div className="h-4 w-1/2 rounded bg-black/10" />
+      </div>
+    </li>
+  )
+}
+
+// Results only: the filter chips render in the shell above this boundary.
+export function CollectionResultsSkeleton() {
+  return (
+    <div className="flex animate-pulse flex-col gap-8" aria-hidden="true">
+      <ul className="grid grid-cols-1 gap-8 md:grid-cols-2">
+        {FEATURED_PLACEHOLDERS.map((key) => (
+          <CardPlaceholder key={key} />
+        ))}
+      </ul>
+
+      <ul className="grid grid-cols-2 gap-8 md:grid-cols-2 lg:grid-cols-3">
+        {CARD_PLACEHOLDERS.map((key) => (
+          <CardPlaceholder key={key} />
+        ))}
+      </ul>
+    </div>
+  )
+}

package/src/templates/next-pagebuilder-cache/components/page-builder/components/content-collection/types.ts

@@ -0,0 +1,32 @@
+import type { PageBuilderBlock } from "@/components/page-builder/types"
+import type {
+  ALL_BLOG_ARTICLES_QUERY_RESULT,
+  PAGE_QUERY_RESULT,
+} from "@/lib/integrations/sanity/sanity.types"
+
+export type SearchParams = Record<string, string | string[] | undefined>
+
+export type ContentCollectionSearchParams = Promise<SearchParams> | undefined
+
+export type ContentCollectionBlock = Extract<
+  PageBuilderBlock,
+  {
+    _type: "blogCollection"
+  }
+>
+
+export type PinnedCollectionCategory = NonNullable<
+  PAGE_QUERY_RESULT
+>["collectionCategory"]
+
+export type BlogArticleCard = ALL_BLOG_ARTICLES_QUERY_RESULT[number]
+export type ContentCategory = NonNullable<
+  NonNullable<BlogArticleCard["blogContent"]>["categories"]
+>[number]
+export type ContentItemCard = BlogArticleCard
+
+/** A page hosting a content collection; `category` set means it's pinned to one. */
+export type CollectionPage = {
+  path: string | null
+  category: string | null
+}

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

@@ -0,0 +1,17 @@
+import type { PageBuilderBlock } from "../types"
+
+type DescriptionProps = {
+  block: Extract<PageBuilderBlock, { _type: "description" }>
+}
+
+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>
+  )
+}

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

@@ -0,0 +1,169 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import {
+  type GatedContentPayload,
+  unlockGatedContent,
+} from "@/app/actions/unlock-gated-content"
+import type { PageBuilderBlock } from "@/components/page-builder/types"
+import { RichText } from "@/components/sanity/rich-text"
+import { Link } from "@/components/ui/link"
+
+type GatedContentBlock = Extract<PageBuilderBlock, { _type: "gatedContent" }>
+
+type GatedContentProps = {
+  block: GatedContentBlock
+}
+
+type GateState = "locked" | "loading" | "unlocked"
+
+const STORAGE_PREFIX = "gated-content:"
+
+export function GatedContent({ block }: GatedContentProps) {
+  const storageKey = `${STORAGE_PREFIX}${block._id}`
+  const [state, setState] = useState<GateState>("locked")
+  const [payload, setPayload] = useState<GatedContentPayload | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [justUnlocked, setJustUnlocked] = useState(false)
+
+  // The payload is withheld from the page query, so it never reaches the client
+  // until this action runs. We remember the submitted email so a returning
+  // visitor re-fetches without seeing the form again.
+  const unlock = async (email: string, persist: boolean) => {
+    setState("loading")
+    setError(null)
+
+    const result = await unlockGatedContent({ documentId: block._id, email })
+
+    if (!result.ok) {
+      setError(result.error)
+      setState("locked")
+      if (!persist) window.localStorage.removeItem(storageKey)
+      return
+    }
+
+    setPayload(result.payload)
+    setState("unlocked")
+    if (persist) {
+      window.localStorage.setItem(storageKey, email)
+      setJustUnlocked(true)
+    }
+  }
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-fetch only when the block changes; unlock closes over stable values
+  useEffect(() => {
+    const savedEmail = window.localStorage.getItem(storageKey)
+    if (savedEmail) void unlock(savedEmail, false)
+  }, [storageKey])
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    const email =
+      new FormData(event.currentTarget).get("email")?.toString() ?? ""
+    void unlock(email, true)
+  }
+
+  return (
+    <section className="py-8 md:py-12">
+      {block.teaserHeading ? (
+        <h2 className="mb-4 font-semibold text-2xl tracking-tight md:text-4xl">
+          {block.teaserHeading}
+        </h2>
+      ) : null}
+
+      {block.teaserBody ? (
+        <div className="max-w-[62ch] space-y-4 text-base/7 text-current/80 md:text-lg/8">
+          <RichText content={block.teaserBody} />
+        </div>
+      ) : null}
+
+      {state === "unlocked" && payload ? (
+        <div className="mt-8">
+          {justUnlocked && block.successMessage ? (
+            <p className="mb-6 rounded-lg bg-black/[0.04] px-4 py-3 text-current/72 text-sm">
+              {block.successMessage}
+            </p>
+          ) : null}
+          <GatedReveal payload={payload} />
+        </div>
+      ) : (
+        <form
+          onSubmit={handleSubmit}
+          className="mt-8 flex max-w-md flex-col gap-4 rounded-[1.5rem] border border-black/10 bg-black/[0.02] p-6"
+        >
+          {block.gateHeadline ? (
+            <h3 className="font-semibold text-lg">{block.gateHeadline}</h3>
+          ) : null}
+          {block.gateDescription ? (
+            <p className="text-current/72 text-sm">{block.gateDescription}</p>
+          ) : null}
+          <input
+            type="email"
+            name="email"
+            required
+            placeholder="you@example.com"
+            className="rounded-lg border border-black/10 bg-white px-4 py-2.5 text-sm outline-none focus:border-black/40"
+          />
+          {error ? <p className="text-red-600 text-sm">{error}</p> : null}
+          <button
+            type="submit"
+            disabled={state === "loading"}
+            className="rounded-lg bg-black px-4 py-2.5 font-medium text-sm text-white transition-colors hover:bg-black/80 disabled:opacity-60"
+          >
+            {state === "loading" ? "Unlocking…" : block.submitLabel || "Unlock"}
+          </button>
+        </form>
+      )}
+    </section>
+  )
+}
+
+function GatedReveal({ payload }: { payload: GatedContentPayload }) {
+  if (payload.kind === "richText" && payload.content) {
+    return (
+      <div className="max-w-[62ch] space-y-4 text-base/7 text-current/80 md:text-lg/8">
+        <RichText content={payload.content} />
+      </div>
+    )
+  }
+
+  if (payload.kind === "file" && payload.file?.url) {
+    return (
+      <Link
+        href={payload.file.url}
+        download
+        className="inline-flex items-center gap-2 rounded-lg bg-black px-4 py-2.5 font-medium text-sm text-white transition-colors hover:bg-black/80"
+      >
+        Download {payload.file.originalFilename ?? "file"}
+      </Link>
+    )
+  }
+
+  if (payload.kind === "video") {
+    if (payload.video.url) {
+      return (
+        <div className="aspect-video w-full max-w-3xl overflow-hidden rounded-lg">
+          <iframe
+            src={payload.video.url}
+            title="Gated video"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+            className="h-full w-full border-0"
+          />
+        </div>
+      )
+    }
+    if (payload.video.file?.url) {
+      return (
+        // biome-ignore lint/a11y/useMediaCaption: editor-supplied video without a caption track
+        <video
+          controls
+          src={payload.video.file.url}
+          className="w-full max-w-3xl rounded-lg"
+        />
+      )
+    }
+  }
+
+  return null
+}

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

@@ -0,0 +1,17 @@
+import type { PageBuilderBlock } from "../types"
+
+type HeroProps = {
+  block: Extract<PageBuilderBlock, { _type: "hero" }>
+}
+
+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>
+  )
+}

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

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

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

@@ -0,0 +1,71 @@
+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, PageBuilderBlocks } from "./types"
+
+type RendererProps = {
+  blocks: PageBuilderBlocks
+  searchParams: ContentCollectionSearchParams
+  pinnedCategory: PinnedCollectionCategory
+}
+
+export function Renderer({
+  blocks,
+  searchParams,
+  pinnedCategory,
+}: RendererProps) {
+  if (!blocks?.length) return null
+
+  return (
+    <div className="space-y-16">
+      {blocks.map((block: PageBuilderBlock) => (
+        <PageBuilderNode
+          key={block._key}
+          block={block}
+          searchParams={searchParams}
+          pinnedCategory={pinnedCategory}
+        />
+      ))}
+    </div>
+  )
+}
+
+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
+  }
+}

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

@@ -0,0 +1,25 @@
+import type { PAGE_QUERY_RESULT } from "@/lib/integrations/sanity/sanity.types"
+
+export type PageBuilderBlock = NonNullable<
+  NonNullable<PAGE_QUERY_RESULT>["pageBuilder"]
+>[number]
+
+export type PageBuilderBlocks = NonNullable<PAGE_QUERY_RESULT>["pageBuilder"]
+
+export type BlogContentBlock = Extract<
+  PageBuilderBlock,
+  { _type: "blogContent" }
+>
+
+export type ArticleContentProps = {
+  block: BlogContentBlock
+}
+
+export type ArticleRelatedPost = {
+  _id: string
+  title: string | null
+  resolvedSlug: string | null
+  metadata?: {
+    image?: unknown
+  } | null
+}