bsmnt 0.10.0 → 0.12.0

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

@@ -35,7 +35,8 @@
       "!**/*.md",
       "!**/*.mdx",
       "!**/tailwind.css",
-      "!**/*.grit"
+      "!**/*.grit",
+      "!**/sanity.types.ts"
     ]
   },
   "formatter": {
@@ -246,7 +247,8 @@
   "plugins": [
     "./.biome/plugins/no-anchor-element.grit",
     "./.biome/plugins/no-unnecessary-forwardref.grit",
-    "./.biome/plugins/no-relative-parent-imports.grit"
+    "./.biome/plugins/no-relative-parent-imports.grit",
+    "./.biome/plugins/no-fill-without-sizes.grit"
   ],
   "vcs": {
     "clientKind": "git",

package/src/templates/next-pagebuilder/components/layout/footer/index.tsx

@@ -3,8 +3,7 @@ import { SanityImage } from "@/components/ui/sanity-image"
 import {
   type CompanyData,
   type FooterData,
-  getCompanyData,
-  getFooterData,
+  getLayoutData,
 } from "@/lib/integrations/sanity/fetchers/layout"
 
 type FooterLinkGroup = NonNullable<FooterData["links"]>[number]
@@ -12,10 +11,8 @@ type FooterLinkItem = NonNullable<FooterLinkGroup["items"]>[number]
 type SocialLink = NonNullable<CompanyData["socialLinks"]>[number]
 
 export const Footer = async () => {
-  const [footer, companyData] = await Promise.all([
-    getFooterData(),
-    getCompanyData(),
-  ])
+  // Shares one request-scoped fetch with the header and json-ld.
+  const { footer, companyData } = await getLayoutData()
 
   const links = footer?.links ?? []
 

package/src/templates/next-pagebuilder/components/layout/header/index.tsx

@@ -1,8 +1,9 @@
-import { getNavbarData } from "@/lib/integrations/sanity/fetchers/layout"
+import { getLayoutData } from "@/lib/integrations/sanity/fetchers/layout"
 import { HeaderClient } from "./header-client"
 
 export const Header = async () => {
-  const navbar = await getNavbarData()
+  // Shares one request-scoped fetch with the footer and json-ld.
+  const { navbar } = await getLayoutData()
 
   return <HeaderClient data={navbar} />
 }

package/src/templates/next-pagebuilder/components/layout/json-ld/index.tsx

@@ -1,8 +1,5 @@
 import { stegaClean } from "next-sanity"
-import {
-  getNavbarData,
-  getStructuredData,
-} from "@/lib/integrations/sanity/fetchers/layout"
+import { getLayoutData } from "@/lib/integrations/sanity/fetchers/layout"
 import {
   generateOrganizationJsonLd,
   generateWebSiteJsonLd,
@@ -13,10 +10,8 @@ const nonEmpty = (value: unknown): string | undefined =>
   typeof value === "string" && value.trim() !== "" ? value : undefined
 
 export const JsonLd = async () => {
-  const [structuredData, navbar] = await Promise.all([
-    getStructuredData(),
-    getNavbarData(),
-  ])
+  // Shares one request-scoped fetch with the header and footer.
+  const { structuredData, navbar } = await getLayoutData()
 
   // Deep-clean stega artifacts before any value reaches the emitted markup.
   const data = stegaClean(structuredData)

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

@@ -28,6 +28,9 @@ export function ArticleContent({ block }: ArticleContentProps) {
             <SanityImage
               image={author.avatar}
               alt={author.name || ""}
+              width={40}
+              height={40}
+              maxWidth={80}
               className="size-10 rounded-full object-cover"
             />
           ) : null}
@@ -50,6 +53,8 @@ export function ArticleContent({ block }: ArticleContentProps) {
             image={thumbnail}
             alt={thumbnail.alt || ""}
             priority
+            quality={90}
+            sizes="(min-width: 896px) 896px, 100vw"
             className="aspect-video w-full object-cover"
           />
         </div>

package/src/templates/next-pagebuilder/components/page-builder/components/article-content/related-post-item.tsx

@@ -14,6 +14,7 @@ export const RelatedPostItem = ({ post }: { post: ArticleRelatedPost }) => {
             <SanityImage
               image={post.metadata.image}
               alt={post.title || ""}
+              sizes="(min-width: 768px) 768px, 100vw"
               className="aspect-[16/9] w-full object-cover transition-transform duration-300 group-hover:scale-105"
             />
           </div>

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

@@ -1,29 +1,30 @@
-"use client"
-
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { Link } from "@/components/ui/link"
 import { cn } from "@/lib/styles/cn"
 import type { ContentCategory } from "./types"
 
 type ContentFiltersProps = {
   categories: ContentCategory[]
   activeCategory: string
-  totalCount: number
-  filteredCount: number
+  count: number
+  /** Category slug → the page pinned to it. Categories without one are omitted. */
+  categoryHrefs: Record<string, string>
+  /** Where "All content" goes. */
+  indexHref: string
 }
 
 function FilterChip({
   active,
   label,
-  onClick,
+  href,
 }: {
   active: boolean
   label: string
-  onClick: () => void
+  href: string
 }) {
   return (
-    <button
-      type="button"
-      onClick={onClick}
+    <Link
+      href={href}
+      aria-current={active ? "page" : undefined}
       className={cn(
         "rounded-full border px-4 py-2 text-sm transition-colors",
         active
@@ -32,61 +33,43 @@ function FilterChip({
       )}
     >
       {label}
-    </button>
+    </Link>
   )
 }
 
 export function ContentFilters({
   categories,
   activeCategory,
-  totalCount,
-  filteredCount,
+  count,
+  categoryHrefs,
+  indexHref,
 }: ContentFiltersProps) {
-  const pathname = usePathname()
-  const router = useRouter()
-  const searchParams = useSearchParams()
-
-  const navigate = (category: string) => {
-    const nextParams = new URLSearchParams(searchParams.toString())
-
-    if (category) nextParams.set("category", category)
-    else nextParams.delete("category")
-
-    nextParams.delete("page")
-
-    const href = nextParams.toString()
-      ? `${pathname}?${nextParams.toString()}`
-      : pathname
-
-    // biome-ignore lint/suspicious/noExplicitAny: typed routes do not accept dynamic query string helpers cleanly
-    router.push(href as any, { scroll: false })
-  }
-
   return (
     <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">
+      <nav aria-label="Filter by category" className="flex flex-wrap gap-2">
         <FilterChip
           active={activeCategory === ""}
           label="All content"
-          onClick={() => navigate("")}
+          href={indexHref}
         />
         {categories.map((category) => {
           const slug = category.slug?.current
-          if (!slug) return null
+          const href = slug ? categoryHrefs[slug] : undefined
+          // A category with no page of its own has nowhere to link to.
+          if (!slug || !href) return null
 
           return (
             <FilterChip
               key={category._id}
               active={activeCategory === slug}
               label={category.title || "Untitled"}
-              onClick={() => navigate(slug)}
+              href={href}
             />
           )
         })}
-      </div>
+      </nav>
       <p className="text-current/60 text-sm">
-        Showing {filteredCount} {filteredCount === 1 ? "item" : "items"}
-        {filteredCount !== totalCount ? ` out of ${totalCount}` : ""}
+        Showing {count} {count === 1 ? "item" : "items"}
       </p>
     </div>
   )

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)}
         />,
       ]
     : []