bsmnt 0.10.0 → 0.11.0

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

@@ -1,23 +1,31 @@
+import { Suspense } from "react"
 import { fetchSanity } 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 { 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
@@ -28,11 +36,10 @@ const normalizePageValue = (value: string | string[] | undefined) => {
   return Number.isFinite(page) && page > 0 ? Math.floor(page) : 1
 }
 
-const getCollectionParams = (searchParams: SearchParams) => ({
-  currentPage: normalizePageValue(searchParams.page),
-  activeCategory:
-    typeof searchParams.category === "string" ? searchParams.category : "",
-})
+// 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,
@@ -68,21 +75,61 @@ const getCollectionWindow = ({
   }
 }
 
-function CollectionToolbarSection({
-  activeCategory,
-  categories,
-  totalCount,
+// Same query on both sides of the boundary, so the second call is a fetch-cache
+// hit rather than a second round trip.
+const getArticlesCount = async (category: string) => {
+  const { data } = await fetchSanity<number>({
+    query: BLOG_ARTICLES_COUNT_QUERY,
+    params: { category },
+    tags: ["blog-articles-count"],
+  })
+
+  return data ?? 0
+}
+
+async function CollectionToolbar({
+  pinnedCategory,
 }: {
-  activeCategory: string
-  categories: ContentCategory[]
-  totalCount: number
+  pinnedCategory: PinnedCollectionCategory
 }) {
+  const activeCategory = getPinnedSlug(pinnedCategory)
+
+  const [{ data: categoriesData }, { data: collectionPagesData }, count] =
+    await Promise.all([
+      fetchSanity<ContentCategory[]>({
+        query: ALL_BLOG_CATEGORIES_QUERY,
+        tags: ["blog-categories"],
+      }),
+      fetchSanity<CollectionPage[]>({
+        query: COLLECTION_PAGES_QUERY,
+        tags: ["blog-categories"],
+      }),
+      getArticlesCount(activeCategory),
+    ])
+
+  // 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 collectionPagesData ?? []) {
+    // 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}
+      categories={categoriesData ?? []}
       activeCategory={activeCategory}
-      totalCount={totalCount}
-      filteredCount={totalCount}
+      count={count}
+      categoryHrefs={categoryHrefs}
+      indexHref={indexHref}
     />
   )
 }
@@ -143,70 +190,39 @@ function CollectionPaginationSection({
   )
 }
 
-export async function ContentCollection({
+async function CollectionResults({
   block,
   searchParams,
+  pinnedCategory,
 }: ContentCollectionProps) {
-  const resolvedParams = (await searchParams) ?? {}
-  const { currentPage, activeCategory } = getCollectionParams(resolvedParams)
-
-  const { data: categoriesData } = await fetchSanity<ContentCategory[]>({
-    query: ALL_BLOG_CATEGORIES_QUERY,
-    tags: ["blog-categories"],
-  })
-
-  const categories = categoriesData ?? []
-  const validCategorySlugs = new Set(
-    categories
-      .map((category) => category.slug?.current)
-      .filter((slug): slug is string => Boolean(slug))
-  )
+  const resolvedParams: SearchParams = (await searchParams) ?? {}
+  const currentPage = normalizePageValue(resolvedParams.page)
+  const activeCategory = getPinnedSlug(pinnedCategory)
 
-  const canonicalCategory =
-    activeCategory && validCategorySlugs.has(activeCategory)
-      ? activeCategory
-      : ""
-
-  const { data: totalCountData } = await fetchSanity<number>({
-    query: BLOG_ARTICLES_COUNT_QUERY,
-    params: { category: canonicalCategory },
-    tags: ["blog-articles-count"],
-  })
-
-  const totalCount = totalCountData ?? 0
-  const totalPages = getTotalPages({
-    activeCategory: canonicalCategory,
-    totalCount,
-  })
+  const totalCount = await getArticlesCount(activeCategory)
+  const totalPages = getTotalPages({ activeCategory, totalCount })
   const canonicalPage = Math.min(currentPage, totalPages)
 
   const { isFirstPageNoFilter, fetchLimit, fetchOffset } = getCollectionWindow({
-    activeCategory: canonicalCategory,
+    activeCategory,
     currentPage: canonicalPage,
   })
 
   const { data: itemsData } = await fetchSanity<ContentItemCard[]>({
     query: BLOG_ARTICLES_PAGINATED_QUERY,
     params: {
-      category: canonicalCategory,
+      category: activeCategory,
       offset: fetchOffset,
       end: fetchOffset + fetchLimit,
     },
     tags: ["blog-articles"],
   })
 
-  const items = itemsData ?? []
-
   return (
-    <section className="flex flex-col gap-8 py-8">
-      <CollectionToolbarSection
-        activeCategory={canonicalCategory}
-        categories={categories}
-        totalCount={totalCount}
-      />
+    <>
       <CollectionResultsSection
-        activeCategory={canonicalCategory}
-        items={items}
+        activeCategory={activeCategory}
+        items={itemsData ?? []}
         isFirstPageNoFilter={isFirstPageNoFilter}
         subtitle={block.subtitle}
       />
@@ -214,6 +230,20 @@ export async function ContentCollection({
         currentPage={canonicalPage}
         totalPages={totalPages}
       />
+    </>
+  )
+}
+
+// Only the results wait on `searchParams` (for `?page=`). The toolbar reads
+// nothing request-scoped, so it renders in the shell and the chips are
+// clickable before the grid resolves.
+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/components/page-builder/components/content-collection/skeleton.tsx

@@ -7,7 +7,6 @@ const CARD_PLACEHOLDERS = [
   "card-5",
   "card-6",
 ]
-const CHIP_PLACEHOLDERS = ["chip-1", "chip-2", "chip-3", "chip-4"]
 
 function CardPlaceholder() {
   return (
@@ -22,21 +21,10 @@ function CardPlaceholder() {
   )
 }
 
-export function ContentCollectionSkeleton() {
+// Results only: the filter chips render in the shell above this boundary.
+export function CollectionResultsSkeleton() {
   return (
-    <section
-      className="flex animate-pulse flex-col gap-8 py-8"
-      aria-hidden="true"
-    >
-      <div className="flex flex-col gap-4 rounded-[1.5rem] border border-black/10 bg-black/[0.02] p-4 sm:p-5">
-        <div className="flex flex-wrap gap-2">
-          {CHIP_PLACEHOLDERS.map((key) => (
-            <div className="h-9 w-28 rounded-full bg-black/10" key={key} />
-          ))}
-        </div>
-        <div className="h-4 w-40 rounded bg-black/10" />
-      </div>
-
+    <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} />
@@ -48,6 +36,6 @@ export function ContentCollectionSkeleton() {
           <CardPlaceholder key={key} />
         ))}
       </ul>
-    </section>
+    </div>
   )
 }

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

@@ -1,5 +1,8 @@
 import type { PageBuilderBlock } from "@/components/page-builder/types"
-import type { ALL_BLOG_ARTICLES_QUERY_RESULT } from "@/lib/integrations/sanity/sanity.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>
 
@@ -12,8 +15,18 @@ export type ContentCollectionBlock = Extract<
   }
 >
 
+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/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/components/page-builder/renderer.tsx

@@ -1,19 +1,26 @@
-import { Suspense } from "react"
 import { ArticleContent } from "./components/article-content"
 import { ContentCollection } from "./components/content-collection"
-import { ContentCollectionSkeleton } from "./components/content-collection/skeleton"
-import type { ContentCollectionSearchParams } from "./components/content-collection/types"
+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 }: RendererProps) {
+export function Renderer({
+  blocks,
+  searchParams,
+  pinnedCategory,
+}: RendererProps) {
   if (!blocks?.length) return null
 
   return (
@@ -23,6 +30,7 @@ export function Renderer({ blocks, searchParams }: RendererProps) {
           key={block._key}
           block={block}
           searchParams={searchParams}
+          pinnedCategory={pinnedCategory}
         />
       ))}
     </div>
@@ -32,16 +40,20 @@ export function Renderer({ blocks, searchParams }: RendererProps) {
 function PageBuilderNode({
   block,
   searchParams,
+  pinnedCategory,
 }: {
   block: PageBuilderBlock
   searchParams: ContentCollectionSearchParams
+  pinnedCategory: PinnedCollectionCategory
 }) {
   switch (block._type) {
     case "blogCollection":
       return (
-        <Suspense fallback={<ContentCollectionSkeleton />}>
-          <ContentCollection block={block} searchParams={searchParams} />
-        </Suspense>
+        <ContentCollection
+          block={block}
+          searchParams={searchParams}
+          pinnedCategory={pinnedCategory}
+        />
       )
     case "blogContent":
       return <ArticleContent block={block} />
@@ -49,6 +61,8 @@ function PageBuilderNode({
       return <Hero block={block} />
     case "description":
       return <Description block={block} />
+    case "richTextBlock":
+      return <RichTextBlock block={block} />
     case "gatedContent":
       return <GatedContent block={block} />
     default:

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

@@ -32,6 +32,7 @@ export const getPageSections = (
           key="page-builder"
           blocks={page.pageBuilder}
           searchParams={searchParams}
+          pinnedCategory={stegaClean(page.collectionCategory)}
         />,
       ]
     : []

package/src/templates/next-pagebuilder/components/ui/image/index.tsx

@@ -9,6 +9,7 @@
 import cn from "clsx"
 import NextImage, { type ImageProps as NextImageProps } from "next/image"
 import type { CSSProperties, Ref } from "react"
+import { buildImageSizes } from "@/lib/utils/image-sizes"
 
 /**
  * Enhanced Image component props extending Next.js Image.
@@ -165,7 +166,7 @@ export function Image({
 }: ImageProps) {
   // Generate responsive sizes if not provided
   const finalSizes =
-    sizes || `(max-width: 1440px) ${mobileSize}, ${desktopSize}`
+    sizes || buildImageSizes({ base: mobileSize, desktop: desktopSize })
 
   // Early return after hooks
   if (!src) return null

package/src/templates/next-pagebuilder/knip.json

@@ -27,8 +27,9 @@
     "lodash-es",
     "@types/lodash-es",
     "react-device-detect",
-    "zustand"
+    "zustand",
+    "@sanity/browserslist-config"
   ],
   "ignoreBinaries": ["gh", "op", "vercel"],
-  "ignoreFiles": [".agents/**", ".claude/**", "hooks/**"]
+  "ignoreFiles": [".agents/**", ".claude/**", "hooks/**", "lib/integrations/hubspot/**"]
 }

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

@@ -11,7 +11,7 @@ pre-commit:
       stage_fixed: true
     typecheck:
       glob: '*.{ts,tsx}'
-      run: bunx tsgo --noEmit --incremental false
+      run: bunx tsc --noEmit --incremental false
       stage_fixed: false
 
 post-merge: