bsmnt 0.3.3 → 0.4.1

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,212 @@
+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 {
+  ContentCollectionBlock,
+  ContentCollectionSearchParams,
+  ContentCategory,
+  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,5 @@ export type ContentCollectionBlock = Extract<
 >
 
 export type BlogArticleCard = ALL_BLOG_ARTICLES_QUERY_RESULT[number]
+export type ContentCategory = NonNullable<BlogArticleCard["blogContent"]>["categories"][number]
+export type ContentItemCard = BlogArticleCard

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

@@ -1,29 +1,37 @@
 import { ArticleContent } from "./components/article-content"
+import { ContentCollection } from "./components/content-collection"
 import { Description } from "./components/description"
 import { Hero } from "./components/hero"
-import { ContentCollection } from "./components/post-collection"
+import type { ContentCollectionSearchParams } from "./components/content-collection/types"
 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-document/index.tsx

@@ -1,4 +1,5 @@
 import { stegaClean } from "@sanity/client/stega"
+import type { ContentCollectionSearchParams } from "@/components/page-builder/components/content-collection/types"
 import { Renderer } from "@/components/page-builder/renderer"
 import type { PAGE_QUERY_RESULT } from "@/lib/integrations/sanity/sanity.types"
 import { urlForImage } from "@/lib/integrations/sanity/utils/image"
@@ -11,11 +12,15 @@ import {
 type PageDocumentProps = {
   page: NonNullable<PAGE_QUERY_RESULT>
   path: string | null
+  searchParams: ContentCollectionSearchParams
 }
 
-export const getPageSections = (page: NonNullable<PAGE_QUERY_RESULT>) =>
+export const getPageSections = (
+  page: NonNullable<PAGE_QUERY_RESULT>,
+  searchParams: ContentCollectionSearchParams
+) =>
   page.pageBuilder?.length
-    ? [<Renderer key="page-builder" blocks={page.pageBuilder} />]
+    ? [<Renderer key="page-builder" blocks={page.pageBuilder} searchParams={searchParams} />]
     : []
 
 const buildBreadcrumbs = (
@@ -47,9 +52,9 @@ const buildBreadcrumbs = (
   return items
 }
 
-export const PageDocument = ({ page, path }: PageDocumentProps) => {
+export const PageDocument = ({ page, path, searchParams }: PageDocumentProps) => {
   const title = stegaClean(page.title) || page.title
-  const sections = getPageSections(page)
+  const sections = getPageSections(page, searchParams)
 
   const cleanTitle = stegaClean(page.title) || "Basement"
   const cleanDescription = stegaClean(

package/src/templates/next-pagebuilder/components/sanity/visual-editing.tsx

@@ -1,6 +1,7 @@
 import { draftMode } from "next/headers"
 import { VisualEditing } from "next-sanity/visual-editing"
 import { Suspense } from "react"
+import { refreshAction } from "@/app/actions/refresh"
 import { DraftModeToggle } from "@/components/sanity/draft-mode-toggle"
 import { isSanityConfigured } from "@/lib/integrations/check-integration"
 import { SanityLive } from "@/lib/integrations/sanity/live"
@@ -15,7 +16,7 @@ async function VisualEditingInner() {
     <>
       <DraftModeToggle />
       <VisualEditing />
-      <SanityLive />
+      <SanityLive revalidateSyncTags={refreshAction} />
     </>
   )
 }

package/src/templates/next-pagebuilder/lib/integrations/sanity/constants.ts

@@ -0,0 +1 @@
+export const HOMEPAGE_DOCUMENT_ID = "page-homepage"

package/src/templates/next-pagebuilder/lib/integrations/sanity/fetchers/layout.ts

@@ -1,8 +1,6 @@
-import { sanityFetch } from "@/lib/integrations/sanity/live"
+import { fetchSanity } from "@/lib/integrations/sanity/live"
 import {
-  COMPANY_DATA_QUERY,
-  FOOTER_QUERY,
-  NAVBAR_QUERY,
+  SITE_LAYOUT_QUERY,
 } from "@/lib/integrations/sanity/queries"
 import type {
   COMPANY_DATA_QUERY_RESULT,
@@ -14,22 +12,23 @@ export type NavbarData = NonNullable<NAVBAR_QUERY_RESULT>
 export type FooterData = NonNullable<FOOTER_QUERY_RESULT>
 export type CompanyData = NonNullable<COMPANY_DATA_QUERY_RESULT>
 
-export const SANITY_LAYOUT_TAGS = ["navbar", "footer", "companyData"]
-
-export const getNavbar = async (): Promise<NavbarData | null> => {
-  const { data } = await sanityFetch({ query: NAVBAR_QUERY, tags: ["navbar"] })
-  return data
+export type SiteLayoutData = {
+  navbar: NavbarData | null
+  footer: FooterData | null
+  companyData: CompanyData | null
 }
 
-export const getFooter = async (): Promise<FooterData | null> => {
-  const { data } = await sanityFetch({ query: FOOTER_QUERY, tags: ["footer"] })
-  return data
-}
+export const SANITY_LAYOUT_TAGS = ["navbar", "footer", "companyData"]
 
-export const getCompanyData = async (): Promise<CompanyData | null> => {
-  const { data } = await sanityFetch({
-    query: COMPANY_DATA_QUERY,
-    tags: ["companyData"],
+export const getSiteLayoutData = async (): Promise<SiteLayoutData> => {
+  const { data } = await fetchSanity<SiteLayoutData>({
+    query: SITE_LAYOUT_QUERY,
+    tags: SANITY_LAYOUT_TAGS,
   })
-  return data
+
+  return {
+    navbar: data?.navbar ?? null,
+    footer: data?.footer ?? null,
+    companyData: data?.companyData ?? null,
+  }
 }

package/src/templates/next-pagebuilder/lib/integrations/sanity/live/index.tsx

@@ -1,4 +1,5 @@
 import { NextResponse } from "next/server"
+import type { QueryParams } from "next-sanity"
 import { defineLive } from "next-sanity/live"
 import { isSanityConfigured } from "@/lib/integrations/check-integration"
 import { client } from "../client"
@@ -10,8 +11,8 @@ const liveExports =
   isConfigured && client
     ? defineLive({
         client,
-        browserToken: sanityToken,
-        serverToken: sanityToken,
+        browserToken: sanityToken ?? false,
+        serverToken: sanityToken ?? false,
       })
     : null
 
@@ -20,6 +21,32 @@ export const sanityFetch =
 
 export const SanityLive = liveExports?.SanityLive ?? (() => null)
 
+type SanityFetchOptions = {
+  query: string
+  params?: QueryParams
+  tags?: string[]
+  stega?: boolean
+  perspective?: "published" | "drafts" | "previewDrafts"
+}
+
+export async function fetchSanity<T = unknown>({
+  query,
+  params = {},
+  tags = [],
+  stega,
+  perspective,
+}: SanityFetchOptions): Promise<{ data: T | null }> {
+  const { data } = await sanityFetch({
+    query,
+    params,
+    tags,
+    ...(typeof stega === "boolean" ? { stega } : {}),
+    ...(perspective ? { perspective } : {}),
+  })
+
+  return { data: (data as T | null) ?? null }
+}
+
 export const SanityFetch = async <T,>(
   slug: string,
   query: string,