bsmnt 0.2.11 → 0.3.0

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

package/src/templates/next-pagebuilder/components/sanity/rich-text.tsx

@@ -0,0 +1,87 @@
+import { PortableText, type PortableTextProps } from "@portabletext/react"
+import { Link } from "@/components/ui/link"
+import { SanityImage } from "@/components/ui/sanity-image"
+import {
+  getLinkAttributes,
+  urlForReference,
+} from "../../lib/integrations/sanity/utils/link"
+
+interface RichTextProps {
+  content: PortableTextProps["value"]
+}
+
+type LinkMarkProps = {
+  children: React.ReactNode
+  value?: unknown
+}
+
+const LinkMark = ({ children, value }: LinkMarkProps) => {
+  const href = urlForReference(value as Parameters<typeof urlForReference>[0])
+  const attrs = getLinkAttributes(
+    value as Parameters<typeof getLinkAttributes>[0]
+  )
+
+  return (
+    <Link
+      href={href}
+      target={attrs.target}
+      rel={attrs.rel}
+      data-sanity-edit-target
+    >
+      {children}
+    </Link>
+  )
+}
+
+export const RichText = ({ content }: RichTextProps) => {
+  if (!content) return null
+
+  return (
+    <PortableText
+      value={content}
+      components={{
+        types: {
+          image: ({ value }) => <SanityImage image={value} maxWidth={1920} />,
+          table: ({ value }) => {
+            const rows = value?.rows as
+              | Array<{ _key?: string; cells?: string[] }>
+              | undefined
+            if (!rows?.length) return null
+            return (
+              <table>
+                <tbody>
+                  {rows.map((row, i) => (
+                    <tr key={row._key ?? `row-${i}`}>
+                      {row.cells?.map((cell) => {
+                        const cellKey = `${row._key}-${cell}`
+                        return i === 0 ? (
+                          <th key={cellKey}>{cell}</th>
+                        ) : (
+                          <td key={cellKey}>{cell}</td>
+                        )
+                      })}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )
+          },
+        },
+        marks: {
+          link: LinkMark,
+          pageReference: LinkMark,
+          externalLink: LinkMark,
+        },
+        block: {
+          h1: ({ children }) => <h1 className="h1">{children}</h1>,
+          h2: ({ children }) => <h2 className="h2">{children}</h2>,
+          h3: ({ children }) => <h3 className="h3">{children}</h3>,
+          h4: ({ children }) => <h4 className="h4">{children}</h4>,
+          h5: ({ children }) => <h5 className="h5">{children}</h5>,
+          h6: ({ children }) => <h6 className="h6">{children}</h6>,
+          normal: ({ children }) => <p className="p">{children}</p>,
+        },
+      }}
+    />
+  )
+}

package/src/templates/next-pagebuilder/components/sanity/visual-editing.tsx

@@ -0,0 +1,27 @@
+import { draftMode } from "next/headers"
+import { VisualEditing } from "next-sanity/visual-editing"
+import { Suspense } from "react"
+import { DraftModeToggle } from "@/components/sanity/draft-mode-toggle"
+import { isSanityConfigured } from "@/lib/integrations/check-integration"
+import { SanityLive } from "@/lib/integrations/sanity/live"
+
+async function VisualEditingInner() {
+  const { isEnabled: isDraftMode } = await draftMode()
+  const sanityConfigured = isSanityConfigured()
+
+  if (!(sanityConfigured && isDraftMode)) return null
+
+  return (
+    <>
+      <DraftModeToggle />
+      <VisualEditing />
+      <SanityLive />
+    </>
+  )
+}
+
+export const SanityVisualEditing = () => (
+  <Suspense fallback={null}>
+    <VisualEditingInner />
+  </Suspense>
+)

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