bsmnt 0.9.0 → 0.11.0

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

@@ -0,0 +1,147 @@
+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"
+import { buildPageJsonLd } from "@/lib/integrations/sanity/utils/page-json-ld"
+import {
+  generateBreadcrumbJsonLd,
+  generateSanityArticleJsonLd,
+  generateSanityWebPageJsonLd,
+  JsonLd,
+} from "@/lib/utils/json-ld"
+
+type PageDocumentProps = {
+  page: NonNullable<PAGE_QUERY_RESULT>
+  path: string | null
+  searchParams: ContentCollectionSearchParams
+}
+
+type PageBuilderBlock = NonNullable<
+  NonNullable<PAGE_QUERY_RESULT>["pageBuilder"]
+>[number]
+type BlogContentBlock = Extract<PageBuilderBlock, { _type: "blogContent" }>
+
+export const getPageSections = (
+  page: NonNullable<PAGE_QUERY_RESULT>,
+  searchParams: ContentCollectionSearchParams
+) =>
+  page.pageBuilder?.length
+    ? [
+        <Renderer
+          key="page-builder"
+          blocks={page.pageBuilder}
+          searchParams={searchParams}
+          // Cleaned because the slug becomes a GROQ parameter: in draft mode the
+          // projection carries stega characters that would break the match.
+          pinnedCategory={stegaClean(page.collectionCategory)}
+        />,
+      ]
+    : []
+
+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,
+  searchParams,
+}: PageDocumentProps) => {
+  const title = stegaClean(page.title) || page.title
+  const sections = getPageSections(page, searchParams)
+
+  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
+
+  // Editor-selected page-level structured data (FAQ, Event, custom, etc.).
+  const pageJsonLd = buildPageJsonLd(page.metadata?.jsonLd)
+
+  // Blog posts (pages with a Blog Content block) emit Article JSON-LD with
+  // fields derived from the post — no Custom block needed. Skipped when the
+  // editor already supplied an Article (via a Custom block) to avoid duplicates.
+  const blogBlock = page.pageBuilder?.find(
+    (block): block is BlogContentBlock => block?._type === "blogContent"
+  )
+  const hasManualArticle = pageJsonLd.some(
+    ({ data }) => (data as { "@type"?: unknown })["@type"] === "Article"
+  )
+  const articleJsonLd =
+    blogBlock && !hasManualArticle
+      ? generateSanityArticleJsonLd({
+          title: cleanTitle,
+          url: pageUrl,
+          description: cleanDescription || undefined,
+          image: blogBlock.thumbnail
+            ? urlForImage(blogBlock.thumbnail).width(1200).height(630).url()
+            : undefined,
+          datePublished: stegaClean(blogBlock.date) || undefined,
+          dateModified: page._updatedAt,
+          authorName: stegaClean(blogBlock.author?.name) || undefined,
+        })
+      : null
+
+  return (
+    <>
+      <JsonLd
+        data={generateSanityWebPageJsonLd({
+          title: cleanTitle,
+          url: pageUrl,
+          description: cleanDescription || undefined,
+          image: ogImage,
+          dateModified: page._updatedAt,
+        })}
+      />
+      {articleJsonLd ? <JsonLd data={articleJsonLd} /> : null}
+      {hasBreadcrumbs ? (
+        <JsonLd data={generateBreadcrumbJsonLd(breadcrumbs)} />
+      ) : null}
+      {pageJsonLd.map(({ key, data }) => (
+        <JsonLd key={key} data={data} />
+      ))}
+      <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-cache/components/ui/image/index.tsx

@@ -0,0 +1,216 @@
+/**
+ * Enhanced Image Component
+ *
+ * Next.js Image wrapper with optimized defaults and error handling.
+ * Always use this component instead of next/image directly.
+ */
+"use client"
+
+import cn from "clsx"
+import NextImage, { type ImageProps as NextImageProps } from "next/image"
+import type { CSSProperties, Ref } from "react"
+
+/**
+ * Enhanced Image component props extending Next.js Image.
+ *
+ * Adds responsive sizing, aspect ratio support, and automatic blur placeholders.
+ * Always use this component instead of next/image directly.
+ */
+export type ImageProps = Omit<NextImageProps, "objectFit" | "alt"> & {
+  /** CSS object-fit property for image positioning */
+  objectFit?: CSSProperties["objectFit"]
+  /** Display as block element (adds display: block) */
+  block?: boolean
+  /** Size on mobile devices (e.g., "100vw", "50vw") */
+  mobileSize?: `${number}vw`
+  /** Size on desktop devices (e.g., "33vw", "25vw") */
+  desktopSize?: `${number}vw`
+  /** Ref for accessing the underlying img element */
+  ref?: Ref<HTMLImageElement>
+  /** Alt text for accessibility (required for meaningful images) */
+  alt?: string
+  /** Aspect ratio for automatic placeholder and layout stability */
+  aspectRatio?: number
+}
+
+// Memoize helper functions to avoid recreation
+const toBase64 = (str: string) =>
+  typeof window === "undefined"
+    ? Buffer.from(str).toString("base64")
+    : window.btoa(str)
+
+// Helper to generate blur placeholder with transparent background by default
+const generateShimmer = (w: number, h: number) => `
+  <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+      <linearGradient id="g">
+        <stop stop-color="rgba(255,255,255,0.1)" offset="20%" />
+        <stop stop-color="rgba(255,255,255,0.2)" offset="50%" />
+        <stop stop-color="rgba(255,255,255,0.1)" offset="70%" />
+      </linearGradient>
+    </defs>
+    <rect width="${w}" height="${h}" fill="rgba(0,0,0,0)" />
+    <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+    <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+  </svg>`
+
+// Helper to determine if blur placeholder should be used
+const shouldUseBlurPlaceholder = (
+  src: NextImageProps["src"],
+  placeholder: string,
+  blurDataURL: string | undefined
+): boolean => {
+  if (!src) return false
+  const isSvg = typeof src === "string" && src.includes(".svg")
+  return !isSvg && placeholder === "blur" && !blurDataURL
+}
+
+// Helper to generate blur data URL
+const generateBlurDataURL = (
+  shouldUse: boolean,
+  aspectRatio: number | undefined,
+  existingBlurDataURL: string | undefined
+): string | undefined => {
+  if (!(shouldUse && aspectRatio)) return existingBlurDataURL
+
+  const shimmerSvg = generateShimmer(700, Math.round(700 / aspectRatio))
+  return `data:image/svg+xml;base64,${toBase64(shimmerSvg)}`
+}
+
+// Helper to determine final placeholder value
+const getFinalPlaceholder = (
+  shouldUse: boolean,
+  aspectRatio: number | undefined,
+  blurDataURL: string | undefined,
+  originalPlaceholder: NextImageProps["placeholder"]
+): NextImageProps["placeholder"] => {
+  if (!shouldUse) {
+    return originalPlaceholder === "blur" && !blurDataURL
+      ? "empty"
+      : originalPlaceholder
+  }
+
+  return aspectRatio || blurDataURL ? "blur" : "empty"
+}
+
+/**
+ * Enhanced Image component with responsive sizing and automatic optimizations.
+ *
+ * Always use this component instead of next/image directly. Provides:
+ * - Automatic responsive sizes generation
+ * - Smart blur placeholders with aspect ratio support
+ * - Performance optimizations (lazy loading by default)
+ * - Priority flag for LCP images
+ *
+ * @param props - Image props extending Next.js Image
+ * @param props.aspectRatio - Aspect ratio for layout stability and blur placeholder
+ * @param props.mobileSize - Size on mobile (e.g., "100vw")
+ * @param props.desktopSize - Size on desktop (e.g., "50vw")
+ * @param props.block - Display as block element
+ * @param props.priority - Prioritize loading for LCP images
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with aspect ratio
+ * <Image
+ *   src="/hero.jpg"
+ *   alt="Hero image"
+ *   aspectRatio={16/9}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // LCP image with priority
+ * <Image
+ *   src="/hero.jpg"
+ *   alt="Hero image"
+ *   aspectRatio={16/9}
+ *   priority // Preloads image for LCP
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Responsive grid image
+ * <Image
+ *   src="/product.jpg"
+ *   alt="Product"
+ *   aspectRatio={1}
+ *   mobileSize="100vw"
+ *   desktopSize="33vw"
+ * />
+ * ```
+ */
+export function Image({
+  style,
+  className,
+  objectFit = "cover",
+  quality = 90,
+  alt = "",
+  fill,
+  block = !fill,
+  width = block ? 1 : undefined,
+  height = block ? 1 : undefined,
+  mobileSize = "100vw",
+  desktopSize = "100vw",
+  sizes,
+  src,
+  unoptimized,
+  ref,
+  aspectRatio,
+  placeholder = "blur",
+  priority = false,
+  ...props
+}: ImageProps) {
+  // Generate responsive sizes if not provided
+  const finalSizes =
+    sizes || `(max-width: 1440px) ${mobileSize}, ${desktopSize}`
+
+  // Early return after hooks
+  if (!src) return null
+
+  // Determine SVG status and placeholder logic
+  const isSvg = typeof src === "string" && src.includes(".svg")
+  const shouldUsePlaceholder = shouldUseBlurPlaceholder(
+    src,
+    placeholder,
+    props.blurDataURL
+  )
+  const blurDataURL = generateBlurDataURL(
+    shouldUsePlaceholder,
+    aspectRatio,
+    props.blurDataURL
+  )
+  const finalPlaceholder = getFinalPlaceholder(
+    shouldUsePlaceholder,
+    aspectRatio,
+    props.blurDataURL,
+    placeholder
+  )
+
+  return (
+    <NextImage
+      ref={ref}
+      fill={!block}
+      {...(width !== undefined && { width })}
+      {...(height !== undefined && { height })}
+      priority={priority}
+      quality={quality}
+      alt={alt}
+      style={{
+        objectFit,
+        ...style,
+      }}
+      className={cn(className, block && "block w-full")}
+      sizes={finalSizes}
+      src={src}
+      unoptimized={unoptimized || isSvg}
+      draggable={false}
+      onDragStart={(e) => e.preventDefault()}
+      {...(finalPlaceholder && { placeholder: finalPlaceholder })}
+      {...(blurDataURL && { blurDataURL })}
+      {...props}
+    />
+  )
+}

package/src/templates/next-pagebuilder-cache/components/ui/link/index.tsx

@@ -0,0 +1,152 @@
+"use client"
+
+import NextLink from "next/link"
+import { usePathname } from "next/navigation"
+import {
+  type AnchorHTMLAttributes,
+  type ComponentProps,
+  type MouseEvent,
+  useEffect,
+  useState,
+} from "react"
+
+// Helper to extract props safe for button elements
+function getButtonProps(props: Record<string, unknown>) {
+  const {
+    href,
+    target,
+    rel,
+    "data-external": _dataExternal,
+    ...buttonProps
+  } = props
+  return buttonProps
+}
+
+// Helper to extract props safe for div elements
+function getDivProps(props: Record<string, unknown>) {
+  const {
+    href,
+    target,
+    rel,
+    onClick,
+    "data-external": _dataExternal,
+    ...divProps
+  } = props
+  return divProps
+}
+
+type CustomLinkProps = Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  keyof ComponentProps<typeof NextLink> | "href"
+> &
+  Omit<ComponentProps<typeof NextLink>, "href"> & {
+    href?: string
+    onClick?: (e: MouseEvent<HTMLElement>) => void
+    scroll?: boolean
+  }
+
+export function Link({
+  href,
+  children,
+  onClick,
+  scroll = false, // Default to false to prevent scroll restoration warnings with fixed/sticky elements
+  ...props
+}: CustomLinkProps) {
+  const [shouldPrefetch, setShouldPrefetch] = useState(false)
+  const [isExternal, setIsExternal] = useState(false)
+  const [isActive, setIsActive] = useState(false)
+
+  // Get pathname - deferred to avoid blocking static generation
+  // usePathname is safe to call but we defer the active check to useEffect
+  const pathname = usePathname()
+
+  useEffect(() => {
+    // Check if this link is active (current page)
+    if (href && pathname) {
+      setIsActive(pathname === href)
+    }
+  }, [href, pathname])
+
+  useEffect(() => {
+    // Skip if no href
+    if (!href) return
+
+    // Check if external link
+    try {
+      const url = new URL(href, window.location.href)
+      setIsExternal(url.host !== window.location.host)
+    } catch {
+      setIsExternal(false)
+    }
+
+    // Only prefetch on good connections
+    const connection = (
+      navigator as Navigator & {
+        connection?: { effectiveType: string; saveData: boolean }
+      }
+    ).connection
+    if (connection) {
+      const { effectiveType, saveData } = connection
+      setShouldPrefetch(effectiveType === "4g" && !saveData)
+    } else {
+      // Default to prefetching if API not available
+      setShouldPrefetch(true)
+    }
+  }, [href])
+
+  // If no href is provided but there's an onClick, render a button
+  if (!href && onClick) {
+    return (
+      <button
+        onClick={(e: MouseEvent<HTMLButtonElement>) => onClick(e)}
+        type="button"
+        {...getButtonProps(props)}
+      >
+        {children}
+      </button>
+    )
+  }
+
+  // If no href and no onClick, render a div
+  if (!href) {
+    return <div {...getDivProps(props)}>{children}</div>
+  }
+
+  // Block dangerous URIs (javascript:, data:, vbscript:)
+  const isDangerousHref = /^(javascript|data|vbscript):/i.test(href)
+  if (isDangerousHref) {
+    return <span {...getDivProps(props)}>{children}</span>
+  }
+
+  // For SSR, check if it's external based on the href pattern
+  const isExternalSSR =
+    href.startsWith("http://") || href.startsWith("https://")
+
+  if (isExternalSSR || isExternal) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        data-external
+        onClick={onClick}
+        {...props}
+      >
+        {children}
+      </a>
+    )
+  }
+
+  return (
+    <NextLink
+      href={href as ComponentProps<typeof NextLink>["href"]}
+      prefetch={shouldPrefetch}
+      scroll={scroll}
+      data-active={isActive || undefined}
+      {...(onClick && { onClick })}
+      {...props}
+    >
+      {children}
+    </NextLink>
+  )
+}

package/src/templates/next-pagebuilder-cache/components.json

@@ -0,0 +1,24 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "new-york",
+	"rsc": true,
+	"tsx": true,
+	"tailwind": {
+		"config": "",
+		"css": "lib/styles/global.css",
+		"baseColor": "neutral",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/styles/cn",
+		"ui": "@/components/ui",
+		"lib": "@/lib",
+		"hooks": "@/lib/hooks"
+	},
+	"iconLibrary": "phosphor",
+	"registries": {
+		"@basement": "https://basement-registry.vercel.app/r/{name}.json"
+	}
+}

package/src/templates/next-pagebuilder-cache/knip.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://unpkg.com/knip@6/schema.json",
+  "entry": [
+    "lib/integrations/sanity/**/*.{ts,tsx}",
+    "lib/scripts/**/*.{ts,tsx}",
+    "lib/utils/**/*.{ts,tsx}",
+    "components/**/*.{ts,tsx}",
+    "app/actions/**/*.{ts,tsx}"
+  ],
+  "ignoreDependencies": [
+    "zod",
+    "react-use",
+    "@portabletext/types",
+    "@portabletext/react",
+    "@portabletext/markdown",
+    "@sanity/vision",
+    "@sanity/visual-editing",
+    "@sanity/ui",
+    "@svgr/webpack",
+    "postcss-functions",
+    "clsx",
+    "rxjs",
+    "gsap",
+    "@gsap/react",
+    "motion",
+    "detect-gpu",
+    "lodash-es",
+    "@types/lodash-es",
+    "react-device-detect",
+    "zustand",
+    "@sanity/browserslist-config"
+  ],
+  "ignoreBinaries": ["gh", "op", "vercel"],
+  "ignoreFiles": [".agents/**", ".claude/**", "hooks/**", "lib/integrations/hubspot/**"]
+}

package/src/templates/next-pagebuilder-cache/lefthook.yml

@@ -0,0 +1,25 @@
+# Lefthook configuration for git hooks
+# Cross-platform compatible (Windows, macOS, Linux)
+# https://github.com/evilmartians/lefthook
+
+pre-commit:
+  parallel: true
+  commands:
+    biome:
+      glob: '*.{js,mjs,ts,jsx,tsx,css,scss}'
+      run: bun biome check --max-diagnostics=200 --write --unsafe {staged_files}
+      stage_fixed: true
+    typecheck:
+      glob: '*.{ts,tsx}'
+      run: bunx tsc --noEmit --incremental false
+      stage_fixed: false
+
+post-merge:
+  commands:
+    install-deps:
+      run: bun i
+
+post-checkout:
+  commands:
+    install-deps:
+      run: '[ "{3}" = "1" ] && bun i || true'