bsmnt 0.9.0 → 0.11.0

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

@@ -0,0 +1,110 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+
+import { Image } from "@/components/ui/image"
+import { Link } from "@/components/ui/link"
+import type { NavbarData } from "@/lib/integrations/sanity/fetchers/layout"
+
+import { CtaButtonRenderer } from "./components/cta-button"
+import { NavItemRenderer } from "./components/nav-item-renderer"
+
+export const HeaderClient = ({ data: navbar }: { data: NavbarData | null }) => {
+  const [openIndex, setOpenIndex] = useState<number | null>(null)
+  const navRef = useRef<HTMLElement>(null)
+  const triggerRefs = useRef<Map<number, HTMLButtonElement>>(new Map())
+
+  const logoUrl = navbar?.logo?.asset?.url
+  const navigationItems = navbar?.navigationItems ?? []
+  const ctaButtons = navbar?.ctaButtons ?? []
+
+  // Close on click outside & Escape
+  useEffect(() => {
+    if (openIndex === null) return
+
+    const onClick = (e: MouseEvent) => {
+      if (
+        navRef.current &&
+        e.target instanceof Node &&
+        !navRef.current.contains(e.target)
+      ) {
+        setOpenIndex(null)
+      }
+    }
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        const prevIndex = openIndex
+        setOpenIndex(null)
+        triggerRefs.current.get(prevIndex)?.focus()
+      }
+    }
+
+    document.addEventListener("click", onClick)
+    document.addEventListener("keydown", onKeyDown)
+    return () => {
+      document.removeEventListener("click", onClick)
+      document.removeEventListener("keydown", onKeyDown)
+    }
+  }, [openIndex])
+
+  const handleToggle = (index: number) => {
+    setOpenIndex((prev) => (prev === index ? null : index))
+  }
+
+  return (
+    <nav
+      ref={navRef}
+      className="sticky top-0 z-50 border-black/10 border-b bg-white"
+      aria-label="Main navigation"
+    >
+      <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
+        {/* Logo */}
+        <Link href="/" className="shrink-0" aria-label="Home">
+          {logoUrl ? (
+            <Image
+              src={logoUrl}
+              alt="Basement"
+              width={131}
+              height={23}
+              className="h-8 w-auto"
+            />
+          ) : (
+            <span className="font-semibold text-black text-lg">Basement</span>
+          )}
+        </Link>
+
+        {/* Navigation items */}
+        {navigationItems.length > 0 ? (
+          <ul className="hidden items-center gap-8 lg:flex">
+            {navigationItems.map((item, i) => (
+              <NavItemRenderer
+                key={item._key}
+                item={item}
+                isOpen={openIndex === i}
+                onToggle={() => handleToggle(i)}
+                triggerRef={(el) => {
+                  if (el) {
+                    triggerRefs.current.set(i, el)
+                    return
+                  }
+
+                  triggerRefs.current.delete(i)
+                }}
+              />
+            ))}
+          </ul>
+        ) : null}
+
+        {/* CTA buttons */}
+        {ctaButtons.length > 0 ? (
+          <div className="hidden items-center gap-3 lg:flex">
+            {ctaButtons.map((cta) => (
+              <CtaButtonRenderer key={cta._key} cta={cta} />
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </nav>
+  )
+}

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

@@ -0,0 +1,32 @@
+import { Suspense } from "react"
+import { getLayoutData } from "@/lib/integrations/sanity/fetchers/layout"
+import {
+  type DynamicFetchOptions,
+  getDynamicFetchOptions,
+  PUBLISHED_FETCH_OPTIONS,
+} from "@/lib/integrations/sanity/live"
+import { HeaderClient } from "./header-client"
+
+// Published navbar caches into the static shell; draft mode streams.
+export const Header = ({ isDraftMode }: { isDraftMode: boolean }) =>
+  isDraftMode ? (
+    <Suspense fallback={<HeaderClient data={null} />}>
+      <DynamicHeader />
+    </Suspense>
+  ) : (
+    <CachedHeader {...PUBLISHED_FETCH_OPTIONS} />
+  )
+
+async function DynamicHeader() {
+  const fetchOptions = await getDynamicFetchOptions()
+  return <CachedHeader {...fetchOptions} />
+}
+
+// Spread whole rather than destructured field by field, so the cache key keeps
+// tracking every option -- perspective, stega and the editing variant.
+async function CachedHeader(fetchOptions: DynamicFetchOptions) {
+  "use cache"
+  // Shares one entry with the footer and json-ld — same query, same options.
+  const { navbar } = await getLayoutData(fetchOptions)
+  return <HeaderClient data={navbar} />
+}

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

@@ -0,0 +1,79 @@
+import { stegaClean } from "next-sanity"
+import { Suspense } from "react"
+import { getLayoutData } from "@/lib/integrations/sanity/fetchers/layout"
+import {
+  type DynamicFetchOptions,
+  getDynamicFetchOptions,
+  PUBLISHED_FETCH_OPTIONS,
+} from "@/lib/integrations/sanity/live"
+import {
+  generateOrganizationJsonLd,
+  generateWebSiteJsonLd,
+  JsonLd as JsonLdBase,
+} from "@/lib/utils/json-ld"
+
+const nonEmpty = (value: unknown): string | undefined =>
+  typeof value === "string" && value.trim() !== "" ? value : undefined
+
+// Cached into the static shell so crawlers see it; draft mode streams, since
+// drafts don't need SEO markup.
+export const JsonLd = ({ isDraftMode }: { isDraftMode: boolean }) =>
+  isDraftMode ? (
+    <Suspense fallback={null}>
+      <DynamicJsonLd />
+    </Suspense>
+  ) : (
+    <CachedJsonLd {...PUBLISHED_FETCH_OPTIONS} />
+  )
+
+async function DynamicJsonLd() {
+  const fetchOptions = await getDynamicFetchOptions()
+  return <CachedJsonLd {...fetchOptions} />
+}
+
+async function CachedJsonLd(fetchOptions: DynamicFetchOptions) {
+  "use cache"
+  // One entry, shared with the header and footer.
+  const { structuredData, navbar } = await getLayoutData(fetchOptions)
+
+  // Deep-clean stega artifacts before any value reaches the emitted markup.
+  const data = stegaClean(structuredData)
+
+  const name = nonEmpty(data?.name)
+
+  // Without an organization name there's nothing meaningful to emit. Editors
+  // fill in Layout -> Structured Data to enable site-wide JSON-LD.
+  //
+  // Don't cap this branch: it renders in every route's shell and a nested
+  // lifetime propagates as a min(). SELF_TAGGED_TYPES clears it on publish.
+  if (!name) return null
+
+  const description = nonEmpty(data?.description)
+  const url = nonEmpty(data?.url)
+
+  // Prefer the structured-data logo, fall back to the navbar logo.
+  const logo = nonEmpty(data?.logo) ?? nonEmpty(navbar?.logo?.asset?.url)
+
+  // Merged and deduped in GROQ (flagged Company Data links + manual profiles).
+  const sameAs = (data?.sameAs ?? [])
+    .map(nonEmpty)
+    .filter((value): value is string => Boolean(value))
+
+  return (
+    <>
+      <JsonLdBase data={generateWebSiteJsonLd({ name, url, description })} />
+      <JsonLdBase
+        data={generateOrganizationJsonLd({
+          name,
+          url,
+          logo,
+          description,
+          legalName: nonEmpty(data?.legalName),
+          sameAs: sameAs.length ? sameAs : undefined,
+          contactPoint: data?.contactPoint,
+          address: data?.address,
+        })}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,33 @@
+import Link from "next/link"
+import { Footer } from "@/components/layout/footer"
+import { Header } from "@/components/layout/header"
+import { cn } from "@/lib/styles/cn"
+
+const SkipToMainContent = () => (
+  <Link
+    href="#main-content"
+    className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-9999 focus:bg-black focus:p-2 focus:text-white focus:outline-none focus:ring-2 focus:ring-white"
+  >
+    Skip to main content
+  </Link>
+)
+
+export const Wrapper = ({
+  children,
+  className,
+  isDraftMode,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { isDraftMode: boolean }) => (
+  <>
+    <SkipToMainContent />
+    <Header isDraftMode={isDraftMode} />
+    <main
+      id="main-content"
+      className={cn("relative flex grow flex-col", className)}
+      {...props}
+    >
+      {children}
+    </main>
+    <Footer isDraftMode={isDraftMode} />
+  </>
+)

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

@@ -0,0 +1,78 @@
+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"
+
+export function ArticleContent({ block }: ArticleContentProps) {
+  const { author, body, categories, date, relatedPosts, thumbnail } = block
+  return (
+    <div className="py-8 md:py-12">
+      <header className="mx-auto max-w-3xl space-y-6">
+        {categories && categories.length > 0 ? (
+          <div className="flex flex-wrap gap-2">
+            {/* @ts-ignore */}
+            {categories.map((category) => (
+              <span
+                key={category._id}
+                className="rounded-full border border-current/20 px-3 py-1 text-xs"
+              >
+                {category.title}
+              </span>
+            ))}
+          </div>
+        ) : null}
+
+        <div className="flex items-center gap-3">
+          {author?.avatar ? (
+            <SanityImage
+              image={author.avatar}
+              alt={author.name || ""}
+              className="size-10 rounded-full object-cover"
+            />
+          ) : null}
+          <div className="flex flex-col">
+            {author?.name ? (
+              <span className="font-medium text-sm">{author.name}</span>
+            ) : null}
+            <div className="flex items-center gap-2 text-current/60 text-sm">
+              {author?.role ? <span>{author.role}</span> : null}
+              {author?.role && date ? <span aria-hidden>·</span> : null}
+              {date ? <time dateTime={date}>{formatDate(date)}</time> : null}
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {thumbnail ? (
+        <div className="mx-auto mt-8 max-w-4xl overflow-hidden rounded-lg">
+          <SanityImage
+            image={thumbnail}
+            alt={thumbnail.alt || ""}
+            priority
+            className="aspect-video w-full object-cover"
+          />
+        </div>
+      ) : null}
+
+      {body ? (
+        <div className="mx-auto mt-10 max-w-3xl space-y-4 text-base/7 text-current/80 md:text-lg/8">
+          <RichText content={body} />
+        </div>
+      ) : null}
+
+      {relatedPosts && relatedPosts.length > 0 ? (
+        <aside className="mx-auto mt-16 max-w-3xl">
+          <h2 className="font-semibold text-2xl">Related Articles</h2>
+          <ul className="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {relatedPosts.map((post) => {
+              if (!post.resolvedSlug) return null
+
+              return <RelatedPostItem key={post._id} post={post} />
+            })}
+          </ul>
+        </aside>
+      ) : null}
+    </div>
+  )
+}

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

@@ -0,0 +1,27 @@
+import type { ArticleRelatedPost } from "@/components/page-builder/types"
+import { Link } from "@/components/ui/link"
+import { SanityImage } from "@/components/ui/sanity-image"
+
+export const RelatedPostItem = ({ post }: { post: ArticleRelatedPost }) => {
+  return (
+    <li key={post._id}>
+      <Link
+        href={`/${post.resolvedSlug}`}
+        className="group flex flex-col gap-3"
+      >
+        {post.metadata?.image ? (
+          <div className="overflow-hidden rounded-lg">
+            <SanityImage
+              image={post.metadata.image}
+              alt={post.title || ""}
+              className="aspect-[16/9] w-full object-cover transition-transform duration-300 group-hover:scale-105"
+            />
+          </div>
+        ) : null}
+        <h3 className="text-balance font-medium text-base leading-snug">
+          {post.title}
+        </h3>
+      </Link>
+    </li>
+  )
+}

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

@@ -0,0 +1,66 @@
+import { Link } from "@/components/ui/link"
+import { SanityImage } from "@/components/ui/sanity-image"
+import { formatDate } from "@/lib/utils/format-date"
+import type { ContentItemCard } from "./types"
+
+type ContentCardProps = {
+  article: ContentItemCard
+  className?: string | undefined
+}
+
+export const ContentCard = ({ article, className }: ContentCardProps) => {
+  const href = article.resolvedSlug ? `/${article.resolvedSlug}` : null
+  if (!href) return null
+
+  const blog = article.blogContent
+  const title = article.title ?? ""
+  const categories = blog?.categories ?? []
+  const authorName = blog?.author?.name
+  const publishedAt = blog?.date ?? null
+  const formattedDate = publishedAt ? formatDate(publishedAt) : null
+  const thumbnail = blog?.thumbnail ?? article.metadata?.image
+
+  return (
+    <li className={className}>
+      <Link href={href} className="group flex flex-col gap-3">
+        <div className="relative aspect-16/9 w-full overflow-hidden rounded-lg bg-gray-100">
+          {thumbnail ? (
+            <SanityImage
+              image={thumbnail}
+              alt=""
+              fill
+              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+              className="w-full object-cover transition-transform duration-300 group-hover:scale-105"
+            />
+          ) : null}
+        </div>
+
+        <div className="flex flex-col gap-2">
+          {categories.length > 0 ? (
+            <div className="flex flex-wrap gap-1.5">
+              {categories.map((category) => (
+                <span key={category._id} className="text-current/60 text-xs">
+                  {category.title}
+                </span>
+              ))}
+            </div>
+          ) : null}
+
+          <h3 className="text-balance font-medium text-lg leading-snug">
+            {title}
+          </h3>
+
+          {authorName || formattedDate ? (
+            <div className="flex items-center gap-2 text-current/60 text-sm">
+              {authorName ? <span>{authorName}</span> : null}
+              {authorName && formattedDate ? <span aria-hidden>·</span> : null}
+              {publishedAt && formattedDate ? (
+                <time dateTime={publishedAt}>{formattedDate}</time>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      </Link>
+    </li>
+  )
+}

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

@@ -0,0 +1,76 @@
+import { Link } from "@/components/ui/link"
+import { cn } from "@/lib/styles/cn"
+import type { ContentCategory } from "./types"
+
+type ContentFiltersProps = {
+  categories: ContentCategory[]
+  activeCategory: string
+  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,
+  href,
+}: {
+  active: boolean
+  label: string
+  href: string
+}) {
+  return (
+    <Link
+      href={href}
+      aria-current={active ? "page" : undefined}
+      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}
+    </Link>
+  )
+}
+
+export function ContentFilters({
+  categories,
+  activeCategory,
+  count,
+  categoryHrefs,
+  indexHref,
+}: ContentFiltersProps) {
+  return (
+    <div className="flex flex-col gap-4 rounded-[1.5rem] border border-black/10 bg-black/[0.02] p-4 sm:p-5">
+      <nav aria-label="Filter by category" className="flex flex-wrap gap-2">
+        <FilterChip
+          active={activeCategory === ""}
+          label="All content"
+          href={indexHref}
+        />
+        {categories.map((category) => {
+          const slug = category.slug?.current
+          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"}
+              href={href}
+            />
+          )
+        })}
+      </nav>
+      <p className="text-current/60 text-sm">
+        Showing {count} {count === 1 ? "item" : "items"}
+      </p>
+    </div>
+  )
+}

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

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

package/src/templates/next-pagebuilder-cache/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>
+  )
+}