bsmnt 0.2.11 → 0.3.0

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

@@ -0,0 +1,95 @@
+import { Link } from "@/components/ui/link"
+import { SanityImage } from "@/components/ui/sanity-image"
+import {
+  type CompanyData,
+  type FooterData,
+  getCompanyData,
+  getFooter,
+} from "@/lib/integrations/sanity/fetchers/layout"
+
+type FooterLinkGroup = NonNullable<FooterData["links"]>[number]
+type FooterLinkItem = NonNullable<FooterLinkGroup["items"]>[number]
+type SocialLink = NonNullable<CompanyData["socialLinks"]>[number]
+
+export const Footer = async () => {
+  const [footer, companyData] = await Promise.all([
+    getFooter(),
+    getCompanyData(),
+  ])
+
+  const year = new Date().getFullYear()
+
+  if (!(footer || companyData)) {
+    return (
+      <footer className="border-black/10 border-t px-6 py-3">
+        <p>&copy; {year} Basement</p>
+      </footer>
+    )
+  }
+
+  const links = footer?.links ?? []
+
+  return (
+    <footer className="border-black/10 border-t">
+      <div className="mx-auto flex max-w-7xl flex-col gap-8 px-6 py-6">
+        {links.length > 0 ? (
+          <div className="grid grid-cols-5 gap-x-8 gap-y-6 md:grid-cols-3 lg:grid-cols-5">
+            {links.map((linkGroup: FooterLinkGroup) => (
+              <div key={linkGroup._key} className="flex flex-col gap-2">
+                <h3>{linkGroup.title}</h3>
+                {linkGroup.items && linkGroup.items.length > 0 ? (
+                  <ul className="space-y-1">
+                    {linkGroup.items
+                      .filter(
+                        (item: FooterLinkItem) => item.href && item.href !== "#"
+                      )
+                      .map((item: FooterLinkItem) => (
+                        <li key={item._key}>
+                          <Link href={item.href!}>{item.label}</Link>
+                        </li>
+                      ))}
+                  </ul>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <Link href="/">Basement</Link>
+        )}
+
+        <div className="flex flex-row items-center justify-between gap-3 border-black/10 border-t pt-4">
+          <p className="w-fit">&copy; {year} Basement</p>
+
+          {companyData?.socialLinks && companyData.socialLinks.length > 0 ? (
+            <div className="flex w-fit flex-wrap items-center gap-x-4 gap-y-2">
+              {companyData.socialLinks
+                .filter((social: SocialLink) => social.url)
+                .map((social: SocialLink) => (
+                  <Link
+                    key={social._key}
+                    href={social.url!}
+                    aria-label={
+                      social.label ||
+                      `Follow us on ${social.name || "social media"}`
+                    }
+                  >
+                    {social.icon ? (
+                      <SanityImage
+                        image={social.icon}
+                        alt={social.name || ""}
+                        width={20}
+                        height={20}
+                        maxWidth={40}
+                      />
+                    ) : (
+                      <span>{social.name}</span>
+                    )}
+                  </Link>
+                ))}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </footer>
+  )
+}

package/src/templates/next-pagebuilder/components/layout/header/components/cta-button.tsx

@@ -0,0 +1,28 @@
+import { Link } from "@/components/ui/link"
+import { getLinkAttributes } from "@/lib/integrations/sanity/utils/link"
+import { cn } from "@/lib/styles/cn"
+
+import type { CtaButton } from "./types"
+
+export function CtaButtonRenderer({ cta }: { cta: CtaButton }) {
+  const linkAttributes = cta.link ? getLinkAttributes(cta.link) : undefined
+  const href = linkAttributes?.href
+
+  if (!(cta.label && href && href !== "#")) return null
+
+  return (
+    <Link
+      href={href}
+      target={linkAttributes?.target}
+      rel={linkAttributes?.rel}
+      className={cn(
+        "rounded-lg px-4 py-2 font-medium text-sm transition-opacity hover:opacity-80",
+        cta.variant === "primary"
+          ? "bg-black text-white"
+          : "border border-black/20 text-black"
+      )}
+    >
+      {cta.label}
+    </Link>
+  )
+}

package/src/templates/next-pagebuilder/components/layout/header/components/mega-menu-panel.tsx

@@ -0,0 +1,90 @@
+import { Link } from "@/components/ui/link"
+import { getLinkAttributes } from "@/lib/integrations/sanity/utils/link"
+import { cn } from "@/lib/styles/cn"
+
+import { NavLeafItem } from "./nav-leaf-item"
+import type { MegaMenu, MegaMenuColumn as MegaMenuColumnType } from "./types"
+
+function ColumnHeader({
+  title,
+  href,
+  target,
+  rel,
+}: {
+  title: string
+  href: string | null
+  target?: string | undefined
+  rel?: string | undefined
+}) {
+  const className =
+    "mb-1 block px-3 py-2 text-xs font-semibold uppercase tracking-wider text-gray-400"
+
+  if (href) {
+    return (
+      <Link
+        href={href}
+        target={target}
+        rel={rel}
+        className={cn(className, "transition-colors hover:text-black")}
+      >
+        {title}
+      </Link>
+    )
+  }
+
+  return <span className={className}>{title}</span>
+}
+
+function MegaMenuColumn({ column }: { column: MegaMenuColumnType }) {
+  const linkAttributes = column.link
+    ? getLinkAttributes(column.link)
+    : undefined
+  const href = linkAttributes?.href
+  const items = column.items
+
+  return (
+    <div className="flex min-w-48 flex-col">
+      {column.title ? (
+        <ColumnHeader
+          title={column.title}
+          href={href && href !== "#" ? href : null}
+          target={linkAttributes?.target}
+          rel={linkAttributes?.rel}
+        />
+      ) : null}
+
+      {items?.length ? (
+        <ul className="flex flex-col">
+          {items.map((item) => (
+            <li key={item._key}>
+              <NavLeafItem item={item} />
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  )
+}
+
+export function MegaMenuPanel({
+  megaMenu,
+  id,
+}: {
+  megaMenu: MegaMenu
+  id: string
+}) {
+  return (
+    <div
+      id={id}
+      className="absolute top-full left-1/2 z-50 w-max max-w-[90vw] -translate-x-1/2 pt-2"
+    >
+      <div className="rounded-xl border border-black/10 bg-white p-6 shadow-black/5 shadow-xl">
+        <div className="flex gap-8">
+          {megaMenu.columns?.map((col) => (
+            <MegaMenuColumn key={col._key} column={col} />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/templates/next-pagebuilder/components/layout/header/components/nav-item-renderer.tsx

@@ -0,0 +1,98 @@
+import { CaretDownIcon } from "@phosphor-icons/react/dist/ssr"
+
+import { Link } from "@/components/ui/link"
+import { getLinkAttributes } from "@/lib/integrations/sanity/utils/link"
+import { cn } from "@/lib/styles/cn"
+
+import { MegaMenuPanel } from "./mega-menu-panel"
+import type { NavItem } from "./types"
+
+type NavItemRendererProps = {
+  item: NavItem
+  isOpen: boolean
+  onToggle: () => void
+  triggerRef: (el: HTMLButtonElement | null) => void
+}
+
+const baseLabelClassName = "text-sm transition-colors"
+const interactiveLabelClassName = cn(
+  baseLabelClassName,
+  "text-gray-600 hover:text-black"
+)
+
+function getValidHref(item: NavItem) {
+  const linkAttributes = item.link ? getLinkAttributes(item.link) : undefined
+  const href =
+    linkAttributes?.href && linkAttributes.href !== "#"
+      ? linkAttributes.href
+      : null
+
+  return { href, linkAttributes }
+}
+
+export function NavItemRenderer({
+  item,
+  isOpen,
+  onToggle,
+  triggerRef,
+}: NavItemRendererProps) {
+  const panelId = `mega-menu-${item._key}`
+
+  if (item.itemType === "mega-menu" && item.megaMenu) {
+    const megaMenu = item.megaMenu
+
+    return (
+      <li className="relative">
+        <button
+          ref={triggerRef}
+          type="button"
+          onClick={onToggle}
+          className={cn(
+            "flex items-center gap-1",
+            baseLabelClassName,
+            isOpen ? "text-black" : interactiveLabelClassName
+          )}
+          aria-expanded={isOpen}
+          aria-haspopup="true"
+          aria-controls={panelId}
+        >
+          {item.title}
+          <CaretDownIcon
+            size={14}
+            weight="bold"
+            className={cn(
+              "transition-transform duration-200",
+              isOpen && "rotate-180"
+            )}
+          />
+        </button>
+        {isOpen ? <MegaMenuPanel megaMenu={megaMenu} id={panelId} /> : null}
+      </li>
+    )
+  }
+
+  const { href, linkAttributes } = getValidHref(item)
+
+  if (href) {
+    return (
+      <li>
+        <Link
+          href={href}
+          target={linkAttributes?.target}
+          rel={linkAttributes?.rel}
+          className={interactiveLabelClassName}
+        >
+          {item.title}
+        </Link>
+      </li>
+    )
+  }
+
+  return (
+    <li>
+      <span className={cn(baseLabelClassName, "cursor-default text-gray-400")}>
+        {item.title}
+      </span>
+    </li>
+  )
+}

package/src/templates/next-pagebuilder/components/layout/header/components/nav-leaf-item.tsx

@@ -0,0 +1,33 @@
+import { Link } from "@/components/ui/link"
+import { getLinkAttributes } from "@/lib/integrations/sanity/utils/link"
+
+import type { LeafItem } from "./types"
+
+export function NavLeafItem({ item }: { item: LeafItem }) {
+  const linkAttributes = item.link ? getLinkAttributes(item.link) : undefined
+  const href = linkAttributes?.href
+  const label = (
+    <span className="text-gray-700 text-sm transition-colors group-hover/leaf:text-black">
+      {item.title}
+    </span>
+  )
+
+  if (href && href !== "#") {
+    return (
+      <Link
+        href={href}
+        target={linkAttributes?.target}
+        rel={linkAttributes?.rel}
+        className="block rounded-md px-3 py-2 transition-colors hover:bg-gray-50"
+      >
+        {label}
+      </Link>
+    )
+  }
+
+  return (
+    <span className="block cursor-default rounded-md px-3 py-2 opacity-50">
+      {label}
+    </span>
+  )
+}

package/src/templates/next-pagebuilder/components/layout/header/components/types.ts

@@ -0,0 +1,7 @@
+import type { NavbarData } from "@/lib/integrations/sanity/fetchers/layout"
+
+export type NavItem = NonNullable<NavbarData["navigationItems"]>[number]
+export type MegaMenu = NonNullable<NavItem["megaMenu"]>
+export type MegaMenuColumn = NonNullable<MegaMenu["columns"]>[number]
+export type LeafItem = NonNullable<MegaMenuColumn["items"]>[number]
+export type CtaButton = NonNullable<NavbarData["ctaButtons"]>[number]

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>
+  )
+}