bsmnt 0.13.1 → 0.15.0

package/src/modules/features/cms/sanity-pagebuilder/files/lib/utils/metadata.ts

@@ -1,36 +1,13 @@
 import type { Metadata } from "next";
+import { stegaClean } from "next-sanity";
 import { urlForImage } from "@/lib/integrations/sanity/utils/image";
 import { getBaseUrl } from "./base-url";
 
-interface GenerateMetadataOptions {
-	title?: string | undefined;
-	description?: string | undefined;
-	keywords?: string[] | undefined;
-	ogTitle?: string | undefined;
-	ogDescription?: string | undefined;
-	canonicalUrl?: string | undefined;
-	image?:
-		| {
-				url?: string | undefined;
-				width?: number | undefined;
-				height?: number | undefined;
-		  }
-		| undefined;
-	url?: string | undefined;
-	siteName?: string | undefined;
-	index?: boolean | undefined;
-	noIndex?: boolean | undefined;
-	type?: "website" | "article";
-	publishedTime?: string | undefined;
-	modifiedTime?: string | undefined;
-	authors?: string[] | undefined;
-}
-
 interface SanityMetadataImage {
 	asset?: {
 		_ref?: string;
 		_type?: "reference";
-	};
+	} | null;
 }
 
 interface SanityPageMetadata {
@@ -44,6 +21,7 @@ interface SanityPageMetadata {
 		image?: SanityMetadataImage | null;
 	} | null;
 	index?: boolean | null;
+	follow?: boolean | null;
 	title?: string | null;
 	description?: string | null;
 	image?: SanityMetadataImage | null;
@@ -52,138 +30,133 @@ interface SanityPageMetadata {
 
 interface SanityMetadataDocument {
 	title?: string | null;
-	subtitle?: string | null;
 	metadata?: SanityPageMetadata | null;
 }
 
+// The Structured Data singleton: its name is the og:site_name and its share
+// image covers any page without an OG image of its own.
+interface SiteMetadata {
+	name?: string | null;
+	shareImage?: SanityMetadataImage | null;
+}
+
+interface ArticleMetadata {
+	publishedTime?: string | null | undefined;
+	modifiedTime?: string | null | undefined;
+	authors?: readonly (string | null | undefined)[] | null | undefined;
+}
+
 interface GenerateSanityMetadataOptions {
 	document: SanityMetadataDocument;
 	url?: string;
-	siteName?: string;
-	type?: "website" | "article";
+	site?: SiteMetadata | null | undefined;
+	fallbackDescription?: string | null | undefined;
+	fallbackImage?: SanityMetadataImage | null | undefined;
+	article?: ArticleMetadata | undefined;
 }
 
+const OG_WIDTH = 1200;
+const OG_HEIGHT = 630;
+const DESCRIPTION_LENGTH = 160;
+
 const APP_BASE_URL = getBaseUrl();
 
-/**
- * Generate complete metadata object for pages
- *
- * @example
- * ```ts
- * export async function generateMetadata({ params }) {
- *   const page = await fetchPage(params.slug)
- *
- *   return generatePageMetadata({
- *     title: page.metadata?.title || page.title,
- *     description: page.metadata?.description,
- *     image: { url: page.metadata?.image?.asset?.url },
- *     url: `/page/${params.slug}`,
- *     noIndex: page.metadata?.noIndex,
- *   })
- * }
- * ```
- */
-const generatePageMetadata = (options: GenerateMetadataOptions): Metadata => {
-	const {
-		title,
-		description,
-		keywords,
-		ogTitle,
-		ogDescription,
-		canonicalUrl,
-		image,
-		url,
-		siteName = "Basement",
-		index,
-		noIndex = false,
-		type = "website",
-		publishedTime,
-		modifiedTime,
-		authors,
-	} = options;
-
-	const shouldIndex = index ?? !noIndex;
-	const fullUrl = url ? `${APP_BASE_URL}${url}` : APP_BASE_URL;
-	const imageUrl = image?.url || "/opengraph-image.jpg";
-	const width = image?.width || 1200;
-	const height = image?.height || 630;
-
-	// Social title/description fall back to the SEO meta title/description.
-	const socialTitle = ogTitle || title;
-	const socialDescription = ogDescription || description;
-
-	const metadata: Metadata = {
+// A relative override is rooted, so "blog/post" can't resolve against the
+// current path.
+const resolveCanonical = (
+	override: string | null | undefined,
+	ownPath: string,
+) => {
+	const value = override?.trim();
+	if (!value) return ownPath;
+	if (/^https?:\/\//i.test(value)) return value;
+	return `/${value.replace(/^\/+/, "")}`;
+};
+
+// Trims body copy to a meta description, cut at a word boundary.
+const summarize = (
+	text: string | null | undefined,
+	maxLength = DESCRIPTION_LENGTH,
+) => {
+	const clean = text?.replace(/\s+/g, " ").trim();
+	if (!clean) return undefined;
+	if (clean.length <= maxLength) return clean;
+	const cut = clean.slice(0, maxLength - 1);
+	const lastSpace = cut.lastIndexOf(" ");
+	return `${(lastSpace > 0 ? cut.slice(0, lastSpace) : cut).replace(/[\s,;:.–—-]+$/, "")}…`;
+};
+
+const socialImage = (source: SanityMetadataImage | null | undefined) =>
+	source?.asset
+		? urlForImage(source).width(OG_WIDTH).height(OG_HEIGHT).url()
+		: undefined;
+
+export const generateSanityMetadata = ({
+	document,
+	url = "/",
+	site,
+	fallbackDescription,
+	fallbackImage,
+	article,
+}: GenerateSanityMetadataOptions): Metadata => {
+	const { name, shareImage } = stegaClean(site) ?? {};
+	const siteName = name?.trim() || undefined;
+
+	const seo = document.metadata;
+	const title = seo?.metaTitle || seo?.title || document.title || siteName;
+	const description =
+		seo?.metaDescription || seo?.description || summarize(fallbackDescription);
+	const socialTitle = seo?.ogTitle || title;
+	const socialDescription = seo?.ogDescription || description;
+	const imageUrl =
+		socialImage(seo?.image) ||
+		socialImage(seo?.og?.image) ||
+		socialImage(fallbackImage) ||
+		socialImage(shareImage);
+	const images = imageUrl
+		? [{ url: imageUrl, width: OG_WIDTH, height: OG_HEIGHT }]
+		: undefined;
+
+	const canonical = resolveCanonical(seo?.canonicalUrl, url);
+
+	const index = seo?.index ?? (seo?.noIndex != null ? !seo.noIndex : true);
+	// Unset on pages that predate the toggle, which were `nofollow` whenever
+	// they were `noindex`.
+	const follow = seo?.follow ?? index;
+	const authors = article?.authors?.filter((author): author is string =>
+		Boolean(author),
+	);
+
+	return {
 		metadataBase: new URL(APP_BASE_URL),
 		title,
 		description,
-		keywords,
-		alternates: { canonical: canonicalUrl || url || "/" },
+		keywords: seo?.keywords?.length ? seo.keywords : undefined,
+		alternates: { canonical },
 		openGraph: {
+			title: socialTitle,
 			description: socialDescription,
-			url: fullUrl,
+			// Follows the canonical, so an override doesn't leave og:url pointing
+			// at the duplicate.
+			url: new URL(canonical, APP_BASE_URL).toString(),
 			siteName,
 			locale: "en_US",
-			type,
-			images: [{ url: imageUrl, width, height }],
-			...(socialTitle && { title: socialTitle }),
-			...(publishedTime && { publishedTime }),
-			...(modifiedTime && { modifiedTime }),
-			...(authors && { authors }),
+			images,
+			...(article
+				? {
+						type: "article",
+						publishedTime: article.publishedTime || undefined,
+						modifiedTime: article.modifiedTime || undefined,
+						authors: authors?.length ? authors : undefined,
+					}
+				: { type: "website" }),
 		},
 		twitter: {
 			card: "summary_large_image",
+			title: socialTitle,
 			description: socialDescription,
-			images: [{ url: imageUrl, width, height }],
-			...(socialTitle && { title: socialTitle }),
+			images,
 		},
-		other: { "fb:app_id": process.env.NEXT_PUBLIC_FACEBOOK_APP_ID || "" },
+		...(index && follow ? {} : { robots: { index, follow } }),
 	};
-
-	if (!shouldIndex) metadata.robots = { index: false, follow: false };
-
-	return metadata;
-};
-
-export const generateSanityMetadata = ({
-	document,
-	url,
-	siteName,
-	type = "website",
-}: GenerateSanityMetadataOptions): Metadata => {
-	const pageMetadata = document.metadata;
-	const title =
-		pageMetadata?.metaTitle ||
-		pageMetadata?.title ||
-		document.title ||
-		undefined;
-	const description =
-		pageMetadata?.metaDescription ||
-		pageMetadata?.description ||
-		document.subtitle ||
-		undefined;
-	const socialImageSource = pageMetadata?.image || pageMetadata?.og?.image;
-	const imageUrl = socialImageSource
-		? urlForImage(socialImageSource).width(1200).height(630).url()
-		: undefined;
-	const index =
-		pageMetadata?.index ??
-		(pageMetadata?.noIndex != null ? !pageMetadata.noIndex : true);
-
-	const keywords = pageMetadata?.keywords?.length
-		? pageMetadata.keywords
-		: undefined;
-
-	return generatePageMetadata({
-		title,
-		description,
-		keywords,
-		ogTitle: pageMetadata?.ogTitle || undefined,
-		ogDescription: pageMetadata?.ogDescription || undefined,
-		canonicalUrl: pageMetadata?.canonicalUrl || undefined,
-		image: imageUrl ? { url: imageUrl, width: 1200, height: 630 } : undefined,
-		url,
-		siteName,
-		index,
-		type,
-	});
 };

package/src/modules/features/cms/sanity-pagebuilder/files/lib/utils/studio-embed.ts

@@ -0,0 +1,22 @@
+import { headers } from "next/headers";
+
+const STUDIO_PATH = "/studio";
+
+const isStudioReferer = (referer: string | null) => {
+	if (!referer) return false;
+
+	try {
+		return new URL(referer).pathname.startsWith(STUDIO_PATH);
+	} catch {
+		return false;
+	}
+};
+
+export const isStudioEmbed = async () => {
+	const headerList = await headers();
+
+	return (
+		headerList.get("sec-fetch-dest") === "iframe" ||
+		isStudioReferer(headerList.get("referer"))
+	);
+};

package/src/modules/features/cms/sanity-pagebuilder-cache/files/app/api/revalidate/route.ts

@@ -4,7 +4,7 @@ import { parseBody } from "next-sanity/webhook";
 // `directClient`, never `client`: a CDN hit returns the pre-mutation slug, which
 // purges the old path twice and never the new one.
 import { directClient } from "@/lib/integrations/sanity/client";
-import { pageBuilderReferenceMembers as pbrm } from "@/lib/integrations/sanity/page-builder-config";
+import { pageBuilderBlockMembers } from "@/lib/integrations/sanity/page-builder-config";
 import {
 	ALL_PAGE_SLUGS_QUERY,
 	FOLDER_PATH_QUERY,
@@ -64,7 +64,7 @@ type RevalidateWebhookBody = WebhookDocument & {
 };
 
 const referenceableTypes = new Set<string>([
-	...pbrm.map((m) => m.documentType),
+	...pageBuilderBlockMembers.map((member) => member.documentType),
 	...REFERENCEABLE_TYPES,
 ]);
 

package/src/modules/features/cms/sanity-pagebuilder-cache/files/components/sanity/rich-text.tsx

@@ -4,7 +4,7 @@ import { SanityImage } from "@/components/ui/sanity-image";
 import {
 	getLinkAttributes,
 	urlForReference,
-} from "../../lib/integrations/sanity/utils/link";
+} from "@/lib/integrations/sanity/utils/link";
 
 interface RichTextProps {
 	content: PortableTextProps["value"];
@@ -80,7 +80,9 @@ export const RichText = ({ content }: RichTextProps) => {
 					externalLink: LinkMark,
 				},
 				block: {
-					h1: ({ children }) => <h1 className="h1">{children}</h1>,
+					// The h1 style is retired: the page owns its H1, so legacy content
+					// drops a level.
+					h1: ({ children }) => <h2 className="h2">{children}</h2>,
 					h2: ({ children }) => <h2 className="h2">{children}</h2>,
 					h3: ({ children }) => <h3 className="h3">{children}</h3>,
 					h4: ({ children }) => <h4 className="h4">{children}</h4>,

package/src/modules/features/cms/sanity-pagebuilder-cache/files/lib/integrations/sanity/components/block-actions-item.tsx

@@ -6,7 +6,7 @@ import { apiVersion } from "@/lib/integrations/sanity/env";
 
 const HIDDEN_KEYS_FIELD = "hiddenPageBuilderKeys";
 
-type ReferenceItem = { _key: string; _ref: string; _type: string };
+type BlockItem = { _key: string; _type?: string };
 
 /**
  * Eye-icon toggle for a page builder placement's per-page visibility. Adds the
@@ -14,7 +14,7 @@ type ReferenceItem = { _key: string; _ref: string; _type: string };
  * filters those keys out at query time. Standalone control because Sanity's
  * built-in item menu isn't extensible via public props.
  */
-export function BlockActionsItem(props: ObjectItemProps<ReferenceItem>) {
+export function BlockActionsItem(props: ObjectItemProps<BlockItem>) {
 	const { value, renderDefault } = props;
 	const client = useClient({ apiVersion });
 	const toast = useToast();

package/src/modules/features/cms/sanity-pagebuilder-cache/files/lib/integrations/sanity/components/component-preview-frame.tsx

@@ -0,0 +1,124 @@
+import { Box, Button, Card, Code, Flex, Text } from "@sanity/ui";
+import { useEffect, useRef, useState } from "react";
+
+const VIEWPORTS = [
+	{ id: "desktop", label: "Desktop", width: 1440 },
+	{ id: "tablet", label: "Tablet", width: 834 },
+	{ id: "mobile", label: "Mobile", width: 390 },
+] as const;
+
+type ViewportId = (typeof VIEWPORTS)[number]["id"];
+
+interface ComponentPreviewFrameProps {
+	notes?: string | undefined;
+	path: string;
+}
+
+export const ComponentPreviewFrame = ({
+	notes,
+	path,
+}: ComponentPreviewFrameProps) => {
+	const stage = useRef<HTMLDivElement>(null);
+	const [box, setBox] = useState({ height: 0, width: 0 });
+	const [viewport, setViewport] = useState<ViewportId>("desktop");
+
+	useEffect(() => {
+		const element = stage.current;
+		if (!element) return;
+
+		const observer = new ResizeObserver(([entry]) => {
+			if (!entry) return;
+			const { height, width } = entry.contentRect;
+			setBox({ height, width });
+		});
+
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+
+	const width = VIEWPORTS.find((item) => item.id === viewport)?.width ?? 1440;
+
+	const scale = box.width > 0 ? Math.min(1, box.width / width) : 1;
+	const height = box.height > 0 ? box.height / scale : 0;
+
+	return (
+		<Flex direction="column" height="fill">
+			<Card borderBottom padding={2} tone="transparent">
+				<Flex align="center" gap={2}>
+					<Flex gap={1}>
+						{VIEWPORTS.map((item) => (
+							<Button
+								fontSize={0}
+								key={item.id}
+								mode={item.id === viewport ? "default" : "bleed"}
+								onClick={() => setViewport(item.id)}
+								padding={2}
+								text={item.label}
+								tone={item.id === viewport ? "primary" : "default"}
+							/>
+						))}
+					</Flex>
+					<Box flex={1} />
+					<Code size={0}>
+						{width} × {Math.round(height)} · {Math.round(scale * 100)}%
+					</Code>
+				</Flex>
+			</Card>
+
+			{notes ? (
+				<Card borderBottom padding={3} tone="transparent">
+					<Text muted size={0}>
+						{notes}
+					</Text>
+				</Card>
+			) : null}
+
+			<Box
+				flex={1}
+				style={{
+					background: "var(--card-muted-bg-color)",
+					overflow: "hidden",
+					position: "relative",
+				}}
+			>
+				<div
+					ref={stage}
+					style={{
+						display: "flex",
+						height: "100%",
+						justifyContent: "center",
+						width: "100%",
+					}}
+				>
+					{height > 0 ? (
+						<div
+							style={{
+								background: "var(--card-bg-color)",
+								border: "1px solid var(--card-border-color)",
+								borderRadius: 4,
+								boxShadow: "0 1px 12px rgb(0 0 0 / 0.12)",
+								flex: "none",
+								height: box.height,
+								overflow: "hidden",
+								width: width * scale,
+							}}
+						>
+							<iframe
+								src={path}
+								style={{
+									border: 0,
+									display: "block",
+									height,
+									transform: `scale(${scale})`,
+									transformOrigin: "top left",
+									width,
+								}}
+								title="Component preview"
+							/>
+						</div>
+					) : null}
+				</div>
+			</Box>
+		</Flex>
+	);
+};

package/src/modules/features/cms/sanity-pagebuilder-cache/files/lib/integrations/sanity/components/component-preview-pane.tsx

@@ -0,0 +1,25 @@
+import { Card, Text } from "@sanity/ui";
+import { ComponentPreviewFrame } from "./component-preview-frame";
+
+interface ComponentPreviewPaneProps {
+	options?: Record<string, unknown>;
+}
+
+export const ComponentPreviewPane = ({
+	options,
+}: ComponentPreviewPaneProps) => {
+	const path = options?.path as string | undefined;
+	const notes = options?.notes as string | undefined;
+
+	if (!path) {
+		return (
+			<Card padding={4}>
+				<Text muted size={1}>
+					This component has no preview route.
+				</Text>
+			</Card>
+		);
+	}
+
+	return <ComponentPreviewFrame notes={notes} path={path} />;
+};

package/src/modules/features/cms/sanity-pagebuilder-cache/files/lib/integrations/sanity/components/page-builder-input.tsx

@@ -1,38 +1,18 @@
 import { type ArrayOfObjectsInputProps, useFormValue } from "sanity";
 import { PageBuilderInsertMenu } from "@/lib/integrations/sanity/components/page-builder-insert-menu";
-import { useStudioPreviewUrls } from "@/lib/integrations/sanity/components/use-studio-preview-urls";
 import {
-	blockPreviewKey,
 	getVisiblePageBuilderInsertMenuGroups,
 	getVisiblePageBuilderMemberNames,
+	type PageBuilderDocumentType,
 	type PageBuilderGroupName,
-	pageBuilderReferenceMembers,
 } from "@/lib/integrations/sanity/page-builder-config";
 
-const BLOCK_PREVIEW_KEYS = pageBuilderReferenceMembers.map((member) =>
-	blockPreviewKey(member.name),
-);
-
-function useInsertMenuViews() {
-	const previewUrls = useStudioPreviewUrls(BLOCK_PREVIEW_KEYS);
-
-	return [
-		{
-			name: "grid" as const,
-			previewImageUrl: (schemaTypeName: string) =>
-				previewUrls?.[blockPreviewKey(schemaTypeName)],
-		},
-		{ name: "list" as const },
-	];
-}
-
 export function PageBuilderInput(props: ArrayOfObjectsInputProps) {
 	const pageTypeValue = useFormValue(["type"]);
 	const pageType =
 		typeof pageTypeValue === "string"
 			? (pageTypeValue as PageBuilderGroupName)
 			: undefined;
-	const views = useInsertMenuViews();
 	const visibleMemberNames = getVisiblePageBuilderMemberNames(pageType);
 
 	return props.renderDefault({
@@ -40,17 +20,14 @@ export function PageBuilderInput(props: ArrayOfObjectsInputProps) {
 		arrayFunctions: PageBuilderInsertMenu,
 		schemaType: {
 			...props.schemaType,
-			of: props.schemaType.of.filter(
-				(member) =>
-					typeof member.name === "string" &&
-					visibleMemberNames.has(member.name),
+			of: props.schemaType.of.filter((member) =>
+				visibleMemberNames.has(member.name as PageBuilderDocumentType),
 			),
 			options: {
 				...props.schemaType.options,
 				insertMenu: {
 					...props.schemaType.options?.insertMenu,
 					groups: getVisiblePageBuilderInsertMenuGroups(pageType),
-					views,
 				},
 			},
 		},