bsmnt 0.4.0 → 0.4.2

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

@@ -1,7 +1,7 @@
 import { stegaClean } from "next-sanity"
-import {
-  getCompanyData,
-  getNavbar,
+import type {
+  CompanyData,
+  NavbarData,
 } from "@/lib/integrations/sanity/fetchers/layout"
 import {
   generateOrganizationJsonLd,
@@ -12,17 +12,18 @@ import {
 const APP_DESCRIPTION =
   "Basement is the AI-native platform for audit and advisory firms. Automate engagement workflows using AI agents trusted by 50% of top 100 firms."
 
-export const JsonLd = async () => {
-  const [navbarData, companyData] = await Promise.all([
-    getNavbar(),
-    getCompanyData(),
-  ])
-
+export const JsonLd = ({
+  navbar,
+  companyData,
+}: {
+  navbar: NavbarData | null
+  companyData: CompanyData | null
+}) => {
   const sameAs = companyData?.socialLinks
     ?.map((link) => stegaClean(link.url))
     .filter((url): url is string => Boolean(url))
 
-  const logoUrl = navbarData?.logo?.asset?.url
+  const logoUrl = navbar?.logo?.asset?.url
 
   return (
     <>

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

@@ -1,9 +1,12 @@
 import Link from "next/link"
 import { Footer } from "@/components/layout/footer"
 import { Header } from "@/components/layout/header"
+import type { SiteLayoutData } from "@/lib/integrations/sanity/fetchers/layout"
 import { cn } from "@/lib/styles/cn"
 
-interface WrapperProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface WrapperProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    SiteLayoutData {}
 
 const SkipToMainContent = () => (
   <Link
@@ -14,10 +17,17 @@ const SkipToMainContent = () => (
   </Link>
 )
 
-export const Wrapper = ({ children, className, ...props }: WrapperProps) => (
+export const Wrapper = ({
+  children,
+  className,
+  navbar,
+  footer,
+  companyData,
+  ...props
+}: WrapperProps) => (
   <>
     <SkipToMainContent />
-    <Header />
+    <Header data={navbar} />
     <main
       id="main-content"
       className={cn("relative flex grow flex-col", className)}
@@ -25,6 +35,6 @@ export const Wrapper = ({ children, className, ...props }: WrapperProps) => (
     >
       {children}
     </main>
-    <Footer />
+    <Footer footer={footer} companyData={companyData} />
   </>
 )

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

@@ -1,13 +1,10 @@
+import type { ArticleContentProps } from "@/components/page-builder/types"
 import { RichText } from "@/components/sanity/rich-text"
 import { SanityImage } from "@/components/ui/sanity-image"
 import { formatDate } from "@/lib/utils/format-date"
-import {RelatedPostItem} from "./related-post-item"
-import type { ArticleContentProps } from "@/components/page-builder/types"
-
+import { RelatedPostItem } from "./related-post-item"
 
-export function ArticleContent({
-block
-}: ArticleContentProps) {
+export function ArticleContent({ block }: ArticleContentProps) {
   const { author, body, categories, date, relatedPosts, thumbnail } = block
   return (
     <div className="py-8 md:py-12">
@@ -71,9 +68,7 @@ block
             {relatedPosts.map((post) => {
               if (!post.resolvedSlug) return null
 
-              return (
-                <RelatedPostItem key={post._id} post={post} />
-              )
+              return <RelatedPostItem key={post._id} post={post} />
             })}
           </ul>
         </aside>

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

@@ -1,8 +1,8 @@
+import type { ArticleRelatedPost } from "@/components/page-builder/types"
 import { Link } from "@/components/ui/link"
 import { SanityImage } from "@/components/ui/sanity-image"
-import type { ArticleRelatedPost } from "@/components/page-builder/types"
-  
-export const RelatedPostItem = ({ post }: {post: ArticleRelatedPost}) => {
+
+export const RelatedPostItem = ({ post }: { post: ArticleRelatedPost }) => {
   return (
     <li key={post._id}>
       <Link
@@ -24,4 +24,4 @@ export const RelatedPostItem = ({ post }: {post: ArticleRelatedPost}) => {
       </Link>
     </li>
   )
-}
+}

package/src/templates/next-pagebuilder/components/page-builder/components/{post-collection → content-collection}/content-card.tsx

@@ -1,10 +1,10 @@
 import { Link } from "@/components/ui/link"
 import { SanityImage } from "@/components/ui/sanity-image"
 import { formatDate } from "@/lib/utils/format-date"
-import type { BlogArticleCard } from "./types"
+import type { ContentItemCard } from "./types"
 
 type ContentCardProps = {
-  article: BlogArticleCard
+  article: ContentItemCard
   className?: string | undefined
 }
 

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

@@ -0,0 +1,93 @@
+"use client"
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { cn } from "@/lib/styles/cn"
+import type { ContentCategory } from "./types"
+
+type ContentFiltersProps = {
+  categories: ContentCategory[]
+  activeCategory: string
+  totalCount: number
+  filteredCount: number
+}
+
+function FilterChip({
+  active,
+  label,
+  onClick,
+}: {
+  active: boolean
+  label: string
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "rounded-full border px-4 py-2 text-sm transition-colors",
+        active
+          ? "border-black bg-black text-white"
+          : "border-black/10 bg-white hover:border-black/30"
+      )}
+    >
+      {label}
+    </button>
+  )
+}
+
+export function ContentFilters({
+  categories,
+  activeCategory,
+  totalCount,
+  filteredCount,
+}: 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">
+        <FilterChip
+          active={activeCategory === ""}
+          label="All content"
+          onClick={() => navigate("")}
+        />
+        {categories.map((category) => {
+          const slug = category.slug?.current
+          if (!slug) return null
+
+          return (
+            <FilterChip
+              key={category._id}
+              active={activeCategory === slug}
+              label={category.title || "Untitled"}
+              onClick={() => navigate(slug)}
+            />
+          )
+        })}
+      </div>
+      <p className="text-current/60 text-sm">
+        Showing {filteredCount} {filteredCount === 1 ? "item" : "items"}
+        {filteredCount !== totalCount ? ` out of ${totalCount}` : ""}
+      </p>
+    </div>
+  )
+}

package/src/templates/next-pagebuilder/components/page-builder/components/{post-collection → content-collection}/content-grid.tsx

@@ -1,20 +1,20 @@
-import type { BlogArticleCard } from "./types"
 import { ContentCard } from "./content-card"
+import type { ContentItemCard } from "./types"
 
 type ContentGridProps = {
-  articles: BlogArticleCard[]
+  items: ContentItemCard[]
   start?: number
   end?: number
   className?: string
 }
 
 export function ContentGrid({
-  articles,
+  items,
   start = 0,
   end,
   className,
 }: ContentGridProps) {
-  const slice = articles.slice(start, end)
+  const slice = items.slice(start, end)
 
   if (slice.length === 0) {
     if (start === 0) {
@@ -29,13 +29,11 @@ export function ContentGrid({
         className ?? "grid grid-cols-2 gap-8 md:grid-cols-2 lg:grid-cols-3"
       }
     >
-      {slice.map((article) => {
-        const slug = article.resolvedSlug
+      {slice.map((item) => {
+        const slug = item.resolvedSlug
         if (!slug) return null
 
-        return (
-         <ContentCard key={article._id} article={article} />
-        )
+        return <ContentCard key={item._id} article={item} />
       })}
     </ul>
   )

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

@@ -0,0 +1,71 @@
+"use client"
+
+import { usePathname, useSearchParams } from "next/navigation"
+import { Link } from "@/components/ui/link"
+
+type ContentPaginationNavProps = {
+  currentPage: number
+  totalPages: number
+}
+
+function buildPaginationHref({
+  pathname,
+  page,
+  searchParams,
+}: {
+  pathname: string
+  page: number
+  searchParams: ReturnType<typeof useSearchParams>
+}) {
+  const nextParams = new URLSearchParams(searchParams.toString())
+
+  if (page > 1) nextParams.set("page", String(page))
+  else nextParams.delete("page")
+
+  const query = nextParams.toString()
+  return query ? `${pathname}?${query}` : pathname
+}
+
+export function ContentPaginationNav({
+  currentPage,
+  totalPages,
+}: ContentPaginationNavProps) {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  if (!pathname || totalPages <= 1) return null
+
+  return (
+    <nav className="flex flex-wrap items-center gap-2" aria-label="Pagination">
+      {currentPage > 1 ? (
+        <Link
+          href={buildPaginationHref({
+            pathname,
+            page: currentPage - 1,
+            searchParams,
+          })}
+          className="rounded-full border border-black/10 px-4 py-2 text-sm transition-colors hover:border-black/30"
+        >
+          Previous
+        </Link>
+      ) : null}
+
+      <span className="text-current/60 text-sm">
+        Page {currentPage} of {totalPages}
+      </span>
+
+      {currentPage < totalPages ? (
+        <Link
+          href={buildPaginationHref({
+            pathname,
+            page: currentPage + 1,
+            searchParams,
+          })}
+          className="rounded-full border border-black/10 px-4 py-2 text-sm transition-colors hover:border-black/30"
+        >
+          Next
+        </Link>
+      ) : null}
+    </nav>
+  )
+}

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

@@ -0,0 +1,219 @@
+import { fetchSanity } from "@/lib/integrations/sanity/live"
+import {
+  ALL_BLOG_CATEGORIES_QUERY,
+  BLOG_ARTICLES_COUNT_QUERY,
+  BLOG_ARTICLES_PAGINATED_QUERY,
+} from "@/lib/integrations/sanity/queries"
+import { ContentFilters } from "./content-filters"
+import { ContentGrid } from "./content-grid"
+import { ContentPaginationNav } from "./content-pagination-nav"
+import type {
+  ContentCategory,
+  ContentCollectionBlock,
+  ContentCollectionSearchParams,
+  ContentItemCard,
+  SearchParams,
+} from "./types"
+
+type ContentCollectionProps = {
+  block: ContentCollectionBlock
+  searchParams: ContentCollectionSearchParams
+}
+
+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
+}
+
+const getCollectionParams = (searchParams: SearchParams) => ({
+  currentPage: normalizePageValue(searchParams.page),
+  activeCategory:
+    typeof searchParams.category === "string" ? searchParams.category : "",
+})
+
+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),
+  }
+}
+
+function CollectionToolbarSection({
+  activeCategory,
+  categories,
+  totalCount,
+}: {
+  activeCategory: string
+  categories: ContentCategory[]
+  totalCount: number
+}) {
+  return (
+    <ContentFilters
+      categories={categories}
+      activeCategory={activeCategory}
+      totalCount={totalCount}
+      filteredCount={totalCount}
+    />
+  )
+}
+
+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} />
+  )
+}
+
+export async function ContentCollection({
+  block,
+  searchParams,
+}: 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 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 canonicalPage = Math.min(currentPage, totalPages)
+
+  const { isFirstPageNoFilter, fetchLimit, fetchOffset } = getCollectionWindow({
+    activeCategory: canonicalCategory,
+    currentPage: canonicalPage,
+  })
+
+  const { data: itemsData } = await fetchSanity<ContentItemCard[]>({
+    query: BLOG_ARTICLES_PAGINATED_QUERY,
+    params: {
+      category: canonicalCategory,
+      offset: fetchOffset,
+      limit: 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}
+        isFirstPageNoFilter={isFirstPageNoFilter}
+        subtitle={block.subtitle}
+      />
+      <CollectionPaginationSection
+        currentPage={canonicalPage}
+        totalPages={totalPages}
+      />
+    </section>
+  )
+}

package/src/templates/next-pagebuilder/components/page-builder/components/{post-collection → content-collection}/types.ts

@@ -1,10 +1,9 @@
 import type { PageBuilderBlock } from "@/components/page-builder/types"
 import type { ALL_BLOG_ARTICLES_QUERY_RESULT } from "@/lib/integrations/sanity/sanity.types"
 
-export type BlogCollectionBlock = Extract<
-  PageBuilderBlock,
-  { _type: "blogCollection" }
->
+export type SearchParams = Record<string, string | string[] | undefined>
+
+export type ContentCollectionSearchParams = Promise<SearchParams> | undefined
 
 export type ContentCollectionBlock = Extract<
   PageBuilderBlock,
@@ -14,3 +13,7 @@ export type ContentCollectionBlock = Extract<
 >
 
 export type BlogArticleCard = ALL_BLOG_ARTICLES_QUERY_RESULT[number]
+export type ContentCategory = NonNullable<
+  NonNullable<BlogArticleCard["blogContent"]>["categories"]
+>[number]
+export type ContentItemCard = BlogArticleCard

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

@@ -1,29 +1,41 @@
 import { ArticleContent } from "./components/article-content"
+import { ContentCollection } from "./components/content-collection"
+import type { ContentCollectionSearchParams } from "./components/content-collection/types"
 import { Description } from "./components/description"
 import { Hero } from "./components/hero"
-import { ContentCollection } from "./components/post-collection"
 import type { PageBuilderBlock, PageBuilderBlocks } from "./types"
 
 type RendererProps = {
   blocks: PageBuilderBlocks
+  searchParams: ContentCollectionSearchParams
 }
 
-export function Renderer({ blocks }: RendererProps) {
+export function Renderer({ blocks, searchParams }: RendererProps) {
   if (!blocks?.length) return null
 
   return (
     <div className="space-y-16">
       {blocks.map((block: PageBuilderBlock) => (
-        <PageBuilderNode key={block._key} block={block} />
+        <PageBuilderNode
+          key={block._key}
+          block={block}
+          searchParams={searchParams}
+        />
       ))}
     </div>
   )
 }
 
-function PageBuilderNode({ block }: { block: PageBuilderBlock }) {
+function PageBuilderNode({
+  block,
+  searchParams,
+}: {
+  block: PageBuilderBlock
+  searchParams: ContentCollectionSearchParams
+}) {
   switch (block._type) {
     case "blogCollection":
-      return <ContentCollection block={block} />
+      return <ContentCollection block={block} searchParams={searchParams} />
     case "blogContent":
       return <ArticleContent block={block} />
     case "hero":

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

@@ -6,18 +6,20 @@ export type PageBuilderBlock = NonNullable<
 
 export type PageBuilderBlocks = NonNullable<PAGE_QUERY_RESULT>["pageBuilder"]
 
-export type BlogContentBlock = Extract<PageBuilderBlock, { _type: "blogContent" }>
+export type BlogContentBlock = Extract<
+  PageBuilderBlock,
+  { _type: "blogContent" }
+>
 
 export type ArticleContentProps = {
   block: BlogContentBlock
-
 }
 
 export type ArticleRelatedPost = {
-  _id: string;
-  title: string | null;
-  resolvedSlug: string | null;
+  _id: string
+  title: string | null
+  resolvedSlug: string | null
   metadata?: {
-    image?: unknown;
+    image?: unknown
   } | null
-}
+}