bsmnt 0.2.10 → 0.3.0

package/src/templates/next-pagebuilder/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/components/layout/header/index.tsx

@@ -0,0 +1,8 @@
+import { getNavbar } from "@/lib/integrations/sanity/fetchers/layout"
+
+import { HeaderClient } from "./header-client"
+
+export const Header = async () => {
+  const navbar = await getNavbar()
+  return <HeaderClient data={navbar} />
+}

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

@@ -0,0 +1,45 @@
+import { stegaClean } from "next-sanity"
+import {
+  getCompanyData,
+  getNavbar,
+} from "@/lib/integrations/sanity/fetchers/layout"
+import {
+  generateOrganizationJsonLd,
+  generateWebSiteJsonLd,
+  JsonLd as JsonLdBase,
+} from "@/lib/utils/json-ld"
+
+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(),
+  ])
+
+  const sameAs = companyData?.socialLinks
+    ?.map((link) => stegaClean(link.url))
+    .filter((url): url is string => Boolean(url))
+
+  const logoUrl = navbarData?.logo?.asset?.url
+
+  return (
+    <>
+      <JsonLdBase
+        data={generateWebSiteJsonLd({
+          name: "Basement",
+          description: APP_DESCRIPTION,
+        })}
+      />
+      <JsonLdBase
+        data={generateOrganizationJsonLd({
+          name: "Basement",
+          ...(logoUrl ? { logo: logoUrl } : {}),
+          description: APP_DESCRIPTION,
+          ...(sameAs?.length ? { sameAs } : {}),
+        })}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,30 @@
+import Link from "next/link"
+import { Footer } from "@/components/layout/footer"
+import { Header } from "@/components/layout/header"
+import { cn } from "@/lib/styles/cn"
+
+interface WrapperProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+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, ...props }: WrapperProps) => (
+  <>
+    <SkipToMainContent />
+    <Header />
+    <main
+      id="main-content"
+      className={cn("relative flex grow flex-col", className)}
+      {...props}
+    >
+      {children}
+    </main>
+    <Footer />
+  </>
+)

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

@@ -0,0 +1,83 @@
+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"
+
+
+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/components/page-builder/components/article-content/related-post-item.tsx

@@ -0,0 +1,27 @@
+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}) => {
+  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/components/page-builder/components/description.tsx

@@ -0,0 +1,17 @@
+import type { PageBuilderBlock } from "../types"
+
+type DescriptionProps = {
+  block: Extract<PageBuilderBlock, { _type: "description" }>
+}
+
+export function Description({ block }: DescriptionProps) {
+  if (!block.description) return null
+
+  return (
+    <section className="py-4">
+      <p className="max-w-[62ch] text-base/7 text-current/72 md:text-lg/8">
+        {block.description}
+      </p>
+    </section>
+  )
+}

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

@@ -0,0 +1,17 @@
+import type { PageBuilderBlock } from "../types"
+
+type HeroProps = {
+  block: Extract<PageBuilderBlock, { _type: "hero" }>
+}
+
+export function Hero({ block }: HeroProps) {
+  if (!block.headline) return null
+
+  return (
+    <section className="py-8 md:py-12">
+      <h1 className="max-w-4xl font-semibold text-4xl tracking-tight md:text-6xl">
+        {block.headline}
+      </h1>
+    </section>
+  )
+}

package/src/templates/next-pagebuilder/components/page-builder/components/post-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 { BlogArticleCard } from "./types"
+
+type ContentCardProps = {
+  article: BlogArticleCard
+  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/components/page-builder/components/post-collection/content-grid.tsx

@@ -0,0 +1,42 @@
+import type { BlogArticleCard } from "./types"
+import { ContentCard } from "./content-card"
+
+type ContentGridProps = {
+  articles: BlogArticleCard[]
+  start?: number
+  end?: number
+  className?: string
+}
+
+export function ContentGrid({
+  articles,
+  start = 0,
+  end,
+  className,
+}: ContentGridProps) {
+  const slice = articles.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((article) => {
+        const slug = article.resolvedSlug
+        if (!slug) return null
+
+        return (
+         <ContentCard key={article._id} article={article} />
+        )
+      })}
+    </ul>
+  )
+}

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

@@ -0,0 +1,28 @@
+import { sanityFetch } from "@/lib/integrations/sanity/live"
+import { ALL_BLOG_ARTICLES_QUERY } from "@/lib/integrations/sanity/queries"
+import { ContentGrid } from "./content-grid"
+import type { ContentCollectionBlock } from "./types"
+
+type ContentCollectionProps = {
+  block: ContentCollectionBlock
+}
+
+export async function ContentCollection({ block }: ContentCollectionProps) {
+  const { data: articles } = await sanityFetch({
+    query: ALL_BLOG_ARTICLES_QUERY,
+  })
+
+  // @ts-ignore
+  if (!articles?.length) return null
+
+  return (
+    <section className="flex flex-col gap-8 py-8">
+      {block.subtitle ? (
+        <h2 className="font-medium text-2xl leading-tight">
+          {block.subtitle}
+        </h2>
+      ) : null}
+      <ContentGrid articles={articles} />
+    </section>
+  )
+}

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

@@ -0,0 +1,16 @@
+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 ContentCollectionBlock = Extract<
+  PageBuilderBlock,
+  {
+    _type: "blogCollection"
+  }
+>
+
+export type BlogArticleCard = ALL_BLOG_ARTICLES_QUERY_RESULT[number]

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

@@ -0,0 +1,36 @@
+import { ArticleContent } from "./components/article-content"
+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
+}
+
+export function Renderer({ blocks }: RendererProps) {
+  if (!blocks?.length) return null
+
+  return (
+    <div className="space-y-16">
+      {blocks.map((block: PageBuilderBlock) => (
+        <PageBuilderNode key={block._key} block={block} />
+      ))}
+    </div>
+  )
+}
+
+function PageBuilderNode({ block }: { block: PageBuilderBlock }) {
+  switch (block._type) {
+    case "blogCollection":
+      return <ContentCollection block={block} />
+    case "blogContent":
+      return <ArticleContent block={block} />
+    case "hero":
+      return <Hero block={block} />
+    case "description":
+      return <Description block={block} />
+    default:
+      return null
+  }
+}

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

@@ -0,0 +1,23 @@
+import type { PAGE_QUERY_RESULT } from "@/lib/integrations/sanity/sanity.types"
+
+export type PageBuilderBlock = NonNullable<
+  NonNullable<PAGE_QUERY_RESULT>["pageBuilder"]
+>[number]
+
+export type PageBuilderBlocks = NonNullable<PAGE_QUERY_RESULT>["pageBuilder"]
+
+export type BlogContentBlock = Extract<PageBuilderBlock, { _type: "blogContent" }>
+
+export type ArticleContentProps = {
+  block: BlogContentBlock
+
+}
+
+export type ArticleRelatedPost = {
+  _id: string;
+  title: string | null;
+  resolvedSlug: string | null;
+  metadata?: {
+    image?: unknown;
+  } | null
+}

package/src/templates/next-pagebuilder/components/page-document/index.tsx

@@ -0,0 +1,91 @@
+import { stegaClean } from "@sanity/client/stega"
+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"
+import {
+  generateBreadcrumbJsonLd,
+  generateSanityWebPageJsonLd,
+  JsonLd,
+} from "@/lib/utils/json-ld"
+
+type PageDocumentProps = {
+  page: NonNullable<PAGE_QUERY_RESULT>
+  path: string | null
+}
+
+export const getPageSections = (page: NonNullable<PAGE_QUERY_RESULT>) =>
+  page.pageBuilder?.length
+    ? [<Renderer key="page-builder" blocks={page.pageBuilder} />]
+    : []
+
+const buildBreadcrumbs = (
+  slugPath: string | null,
+  pageTitle: string | null
+): Array<{ name: string; url: string }> => {
+  const items: Array<{ name: string; url: string }> = [
+    { name: "Home", url: "/" },
+  ]
+
+  if (!slugPath) return items
+
+  const segments = slugPath.split("/").filter(Boolean)
+  for (let i = 0; i < segments.length; i++) {
+    const isLast = i === segments.length - 1
+    const url = `/${segments.slice(0, i + 1).join("/")}`
+
+    //TODO: we might change this in the future if slug title and folder diverge too much :)
+
+    const name =
+      isLast && pageTitle
+        ? pageTitle
+        : (segments[i]
+            ?.replace(/-/g, " ")
+            .replace(/\b\w/g, (c) => c.toUpperCase()) ?? "")
+    items.push({ name, url })
+  }
+
+  return items
+}
+
+export const PageDocument = ({ page, path }: PageDocumentProps) => {
+  const title = stegaClean(page.title) || page.title
+  const sections = getPageSections(page)
+
+  const cleanTitle = stegaClean(page.title) || "Basement"
+  const cleanDescription = stegaClean(
+    page.metadata?.metaDescription || page.metadata?.description
+  )
+  const pageUrl = path ? `/${path}` : "/"
+
+  const ogImage = page.metadata?.image
+    ? urlForImage(page.metadata.image).width(1200).height(630).url()
+    : undefined
+
+  const breadcrumbs = buildBreadcrumbs(path, cleanTitle)
+  const hasBreadcrumbs = breadcrumbs.length > 1
+
+  return (
+    <>
+      <JsonLd
+        data={generateSanityWebPageJsonLd({
+          title: cleanTitle,
+          url: pageUrl,
+          description: cleanDescription || undefined,
+          image: ogImage,
+          dateModified: page._updatedAt,
+        })}
+      />
+      {hasBreadcrumbs ? (
+        <JsonLd data={generateBreadcrumbJsonLd(breadcrumbs)} />
+      ) : null}
+      <article className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-14 px-4 py-14 md:px-6 md:py-20">
+        <h1>{title}</h1>
+        {sections.length ? (
+          sections
+        ) : (
+          <section>No page content has been added yet.</section>
+        )}
+      </article>
+    </>
+  )
+}

package/src/templates/next-pagebuilder/components/sanity/draft-mode-toggle.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { useTransition } from "react"
+
+export function DraftModeToggle() {
+  const router = useRouter()
+  const [isPending, startTransition] = useTransition()
+
+  const handleDisable = () => {
+    startTransition(async () => {
+      await fetch("/api/draft-mode/disable")
+      router.refresh()
+    })
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleDisable}
+      disabled={isPending}
+      className="fixed bottom-4 left-1/2 z-50 -translate-x-1/2 rounded-full border border-white/10 bg-black/80 px-2 py-1 font-medium text-sm text-white shadow-lg backdrop-blur-sm transition-colors hover:bg-black/90 disabled:opacity-50"
+    >
+      {isPending ? "Disabling..." : "Disable Draft Mode"}
+    </button>
+  )
+}