bsmnt 0.4.0 → 0.4.1

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,

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

@@ -0,0 +1,118 @@
+import type { Observable } from "rxjs"
+import { map } from "rxjs/operators"
+import type { DocumentStore } from "sanity"
+import {
+  type DocumentLocationsState,
+  defineDocuments,
+  presentationTool,
+} from "sanity/presentation"
+import { HOMEPAGE_DOCUMENT_ID } from "./constants"
+import { previewURL } from "./env"
+
+const MAX_FOLDER_DEPTH = 6
+
+const buildNestedSlugExpression = (
+  parentReferenceField: string,
+  leafSlugField: string
+) => {
+  const cases = Array.from({ length: MAX_FOLDER_DEPTH }, (_, index) => {
+    const depth = MAX_FOLDER_DEPTH - index
+    const parentSlugRefs = Array.from({ length: depth }, (_, parentIndex) => {
+      const remainingDepth = depth - parentIndex - 1
+      return `${parentReferenceField}${"->parentFolder".repeat(remainingDepth)}->slug.current`
+    })
+
+    const pathDefinedChecks = parentSlugRefs
+      .map((field) => `defined(${field})`)
+      .join(" && ")
+
+    const childPath = [...parentSlugRefs, leafSlugField].join(' + "/" + ')
+    const folderRootPath = parentSlugRefs.join(' + "/" + ')
+
+    return [
+      `${pathDefinedChecks} && ${leafSlugField} == "/" => ${folderRootPath}`,
+      `${pathDefinedChecks} && defined(${leafSlugField}) => ${childPath}`,
+    ]
+  }).flat()
+
+  return `select(${cases.join(",\n      ")},${leafSlugField})`
+}
+
+const pageResolvedSlugExpression = buildNestedSlugExpression(
+  "pageFolder",
+  "slug.current"
+)
+
+const CONTENT_TYPE_PREFIXES: Record<string, string> = {
+  blogContent: "blog",
+}
+
+const resolveSlugLocation = <T extends { title?: string }>(
+  documentStore: DocumentStore,
+  id: string,
+  projection: string,
+  toHref: (doc: T) => string | null,
+  fallbackTitle: string
+): Observable<DocumentLocationsState> =>
+  documentStore
+    .listenQuery(`*[_id == $id][0]{ ${projection} }`, { id }, {})
+    .pipe(
+      map((doc: T | null) => {
+        const href = doc ? toHref(doc) : null
+        if (!href) return { locations: [] }
+        return { locations: [{ title: doc?.title || fallbackTitle, href }] }
+      })
+    )
+
+export const presentation = presentationTool({
+  name: "preview",
+  title: "Preview",
+  resolve: {
+    mainDocuments: defineDocuments([
+      {
+        route: "/",
+        filter: `_type == "page" && _id == "${HOMEPAGE_DOCUMENT_ID}"`,
+      },
+      ...Object.entries(CONTENT_TYPE_PREFIXES).map(([type, prefix]) => ({
+        route: `/${prefix}/:slug`,
+        filter: `_type == "${type}" && slug.current == $slug`,
+      })),
+      {
+        route: "/:slug+",
+        filter: `_type == "page" && ${pageResolvedSlugExpression} == $slug`,
+      },
+    ]),
+    locations: (params, { documentStore }) => {
+      if (params.type === "page") {
+        if (params.id === HOMEPAGE_DOCUMENT_ID) {
+          return { locations: [{ title: "Homepage", href: "/" }] }
+        }
+        return resolveSlugLocation<{ title?: string; resolvedSlug?: string }>(
+          documentStore,
+          params.id,
+          `title, "resolvedSlug": ${pageResolvedSlugExpression}`,
+          (doc) => (doc.resolvedSlug ? `/${doc.resolvedSlug}` : null),
+          "Page"
+        )
+      }
+
+      const prefix = CONTENT_TYPE_PREFIXES[params.type]
+      if (!prefix) return null
+
+      return resolveSlugLocation<{ title?: string; slug?: string }>(
+        documentStore,
+        params.id,
+        `title, "slug": slug.current`,
+        (doc) => (doc.slug ? `/${prefix}/${doc.slug}` : null),
+        "Untitled"
+      )
+    },
+  },
+  previewUrl: {
+    origin: previewURL,
+    draftMode: {
+      enable: "/api/draft-mode/enable",
+      disable: "/api/draft-mode/disable",
+    },
+  },
+})