bsmnt 0.2.10 → 0.2.11

package/src/helpers/integrate/sanity/files/lib/integrations/sanity/confirm-publish-action.ts

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import type { DocumentActionComponent, DocumentActionProps } from "sanity";
+
+export function createConfirmPublishAction(
+	originalPublishAction: DocumentActionComponent,
+): DocumentActionComponent {
+	const ConfirmPublishAction = (props: DocumentActionProps) => {
+		const original = originalPublishAction(props);
+		const [dialogOpen, setDialogOpen] = useState(false);
+
+		if (!original) return null;
+
+		return {
+			...original,
+			onHandle: () => setDialogOpen(true),
+			dialog: dialogOpen && {
+				type: "confirm" as const,
+				tone: "critical" as const,
+				message:
+					"This will make these changes live on the production site immediately. Continue?",
+				onCancel: () => setDialogOpen(false),
+				onConfirm: () => {
+					setDialogOpen(false);
+					original.onHandle?.();
+				},
+			},
+		};
+	};
+
+	return ConfirmPublishAction;
+}

package/src/helpers/integrate/sanity/files/lib/integrations/sanity/sanity.config.ts

@@ -10,6 +10,8 @@ import {
 	presentationTool,
 } from "sanity/presentation";
 import { structureTool } from "sanity/structure";
+import { media } from "sanity-plugin-media";
+import { createConfirmPublishAction } from "./confirm-publish-action";
 import { apiVersion, dataset, previewURL, projectId } from "./env";
 import { schema } from "./schemas";
 import { structure } from "./structure";
@@ -33,6 +35,8 @@ export default defineConfig({
 	plugins: [
 		// Presentation tool for visual editing
 		presentationTool({
+			name: "preview",
+			title: "Preview",
 			resolve: {
 				// Map routes to documents and GROQ filters
 				mainDocuments: defineDocuments([
@@ -70,5 +74,18 @@ export default defineConfig({
 		// Vision is for querying with GROQ from inside the Studio
 		// https://www.sanity.io/docs/the-vision-plugin
 		visionTool({ defaultApiVersion: apiVersion }),
+		media(),
 	],
+	document: {
+		actions: (prev) => {
+			const isProd = process.env.NODE_ENV === "production";
+			if (!isProd) return prev;
+
+			return prev.map((action) =>
+				action.action === "publish"
+					? createConfirmPublishAction(action)
+					: action,
+			);
+		},
+	},
 });

package/src/helpers/integrate/sanity/files/lib/utils/json-ld.tsx

@@ -0,0 +1,249 @@
+import type {
+	Article,
+	BreadcrumbList,
+	Organization,
+	SearchAction,
+	Thing,
+	WebPage,
+	WebSite,
+	WithContext,
+} from "schema-dts";
+
+
+const APP_BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
+
+function isAbsoluteUrl(value: string) {
+	return /^https?:\/\//.test(value);
+}
+
+function resolveUrl(value?: string) {
+	if (!value) return APP_BASE_URL;
+	if (isAbsoluteUrl(value)) return value;
+	if (!APP_BASE_URL) return undefined;
+
+	return new URL(value, APP_BASE_URL).toString();
+}
+
+/* -------------------------------- Component ------------------------------- */
+
+export function JsonLd<T extends Thing>({
+	data,
+}: {
+	data: WithContext<T>;
+}) {
+	return (
+		<script
+			type="application/ld+json"
+			dangerouslySetInnerHTML={{
+				__html: JSON.stringify(data).replace(/</g, "\\u003c"),
+			}}
+		/>
+	);
+}
+
+/* -------------------------------- Generators ------------------------------ */
+
+interface WebSiteJsonLdOptions {
+	name: string;
+	url?: string;
+	description?: string;
+	/** URL to site-wide search (e.g. "/search?q={search_term_string}") */
+	searchUrl?: string;
+}
+
+export function generateWebSiteJsonLd(
+	options: WebSiteJsonLdOptions,
+): WithContext<WebSite> {
+	const { name, url, description, searchUrl } = options;
+	const resolvedUrl = resolveUrl(url);
+	const resolvedSearchUrl = resolveUrl(searchUrl);
+
+	return {
+		"@context": "https://schema.org",
+		"@type": "WebSite",
+		name,
+		...(resolvedUrl && { url: resolvedUrl }),
+		...(description && { description }),
+		...(resolvedSearchUrl && {
+			potentialAction: {
+				"@type": "SearchAction",
+				target: resolvedSearchUrl,
+				"query-input": "required name=search_term_string",
+			} as SearchAction & { "query-input": string },
+		}),
+	};
+}
+
+interface OrganizationJsonLdOptions {
+	name: string;
+	url?: string;
+	logo?: string;
+	description?: string;
+	sameAs?: string[];
+}
+
+export function generateOrganizationJsonLd(
+	options: OrganizationJsonLdOptions,
+): WithContext<Organization> {
+	const { name, url, logo, description, sameAs } = options;
+	const resolvedUrl = resolveUrl(url);
+	const resolvedLogo = resolveUrl(logo);
+
+	return {
+		"@context": "https://schema.org",
+		"@type": "Organization",
+		name,
+		...(resolvedUrl && { url: resolvedUrl }),
+		...(resolvedLogo && { logo: resolvedLogo }),
+		...(description && { description }),
+		...(sameAs && { sameAs }),
+	};
+}
+
+interface WebPageJsonLdOptions {
+	title: string;
+	url?: string;
+	description?: string;
+	image?: string;
+	datePublished?: string;
+	dateModified?: string;
+}
+
+export function generateWebPageJsonLd(
+	options: WebPageJsonLdOptions,
+): WithContext<WebPage> {
+	const { title, url, description, image, datePublished, dateModified } =
+		options;
+	const resolvedUrl = resolveUrl(url);
+	const resolvedImage = resolveUrl(image);
+
+	return {
+		"@context": "https://schema.org",
+		"@type": "WebPage",
+		name: title,
+		...(resolvedUrl && { url: resolvedUrl }),
+		...(description && { description }),
+		...(resolvedImage && { image: resolvedImage }),
+		...(datePublished && { datePublished }),
+		...(dateModified && { dateModified }),
+	};
+}
+
+interface ArticleJsonLdOptions {
+	title: string;
+	url?: string;
+	description?: string;
+	image?: string;
+	datePublished?: string;
+	dateModified?: string;
+	authorName?: string;
+	authorUrl?: string;
+}
+
+export function generateArticleJsonLd(
+	options: ArticleJsonLdOptions,
+): WithContext<Article> {
+	const {
+		title,
+		url,
+		description,
+		image,
+		datePublished,
+		dateModified,
+		authorName,
+		authorUrl,
+	} = options;
+	const resolvedUrl = resolveUrl(url);
+	const resolvedImage = resolveUrl(image);
+
+	return {
+		"@context": "https://schema.org",
+		"@type": "Article",
+		headline: title,
+		...(resolvedUrl && { url: resolvedUrl }),
+		...(description && { description }),
+		...(resolvedImage && { image: resolvedImage }),
+		...(datePublished && { datePublished }),
+		...(dateModified && { dateModified }),
+		...(authorName && {
+			author: {
+				"@type": "Person",
+				name: authorName,
+				...(authorUrl && { url: authorUrl }),
+			},
+		}),
+	};
+}
+
+interface BreadcrumbItem {
+	name: string;
+	url: string;
+}
+
+export function generateBreadcrumbJsonLd(
+	items: BreadcrumbItem[],
+): WithContext<BreadcrumbList> {
+	return {
+		"@context": "https://schema.org",
+		"@type": "BreadcrumbList",
+		itemListElement: items.map((item, index) => {
+			const resolvedItemUrl = resolveUrl(item.url);
+
+			return {
+				"@type": "ListItem",
+				position: index + 1,
+				name: item.name,
+				...(resolvedItemUrl && { item: resolvedItemUrl }),
+			};
+		}),
+	};
+}
+
+/* ----------------------------- Sanity Helpers ----------------------------- */
+
+interface SanityDocument {
+	title?: string;
+	metadata?: {
+		title?: string;
+		description?: string;
+		image?: { asset?: { url?: string } };
+	};
+	_updatedAt?: string;
+	publishedAt?: string;
+}
+
+export function generateSanityArticleJsonLd(options: {
+	document: SanityDocument;
+	url?: string;
+	authorName?: string;
+	authorUrl?: string;
+}): WithContext<Article> {
+	const { document, url, authorName, authorUrl } = options;
+
+	return generateArticleJsonLd({
+		title: document.metadata?.title || document.title || "",
+		url,
+		description: document.metadata?.description,
+		image: document.metadata?.image?.asset?.url,
+		datePublished: document.publishedAt,
+		dateModified: document._updatedAt,
+		authorName,
+		authorUrl,
+	});
+}
+
+export function generateSanityWebPageJsonLd(options: {
+	document: SanityDocument;
+	url?: string;
+}): WithContext<WebPage> {
+	const { document, url } = options;
+
+	return generateWebPageJsonLd({
+		title: document.metadata?.title || document.title || "",
+		url,
+		description: document.metadata?.description,
+		image: document.metadata?.image?.asset?.url,
+		datePublished: document.publishedAt,
+		dateModified: document._updatedAt,
+	});
+}

package/src/template-hooks/config.js

@@ -29,10 +29,4 @@ export const hooksConfig = [
 		dependencies: {},
 		devDependencies: {},
 	},
-	{
-		name: "use-media",
-		file: "use-media.ts",
-		dependencies: {},
-		devDependencies: {},
-	},
 ];

package/src/templates/next-default/app/layout.tsx

@@ -6,6 +6,11 @@ import { fontsVariable } from "@/lib/styles/fonts";
 import AppData from "@/package.json";
 import "@/lib/styles/index.css";
 import { cn } from "@/lib/styles/cn";
+import {
+  JsonLd,
+  generateWebSiteJsonLd,
+  generateOrganizationJsonLd,
+} from "@/lib/utils/json-ld";
 
 const APP_NAME = AppData.name;
 const APP_DEFAULT_TITLE = "Basement Starter";
@@ -86,6 +91,19 @@ export default async function Layout({ children }: PropsWithChildren) {
       suppressHydrationWarning
     >
       <body>
+        <JsonLd
+          data={generateWebSiteJsonLd({
+            name: APP_DEFAULT_TITLE,
+            description: APP_DESCRIPTION,
+          })}
+        />
+        <JsonLd
+          data={generateOrganizationJsonLd({
+            name: APP_NAME,
+            logo: "/opengraph-image.jpg",
+          })}
+        />
+
         {/* Skip link for keyboard navigation accessibility */}
         <Suspense fallback={null}>
           <Link

package/src/templates/next-default/lib/hooks/use-device-detection.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react"
-import { useMedia } from "react-use"
+import { useMedia } from "./use-media"
 
 const MOBILE_BREAKPOINT = 640
 

package/src/templates/next-default/lib/hooks/use-media-breakpoint.ts

@@ -1,4 +1,4 @@
-import { useMedia } from "react-use"
+import { useMedia } from "./use-media"
 
 const BREAKPOINTS = {
   "desktop-large": 1920,

package/src/templates/next-default/lib/hooks/use-media.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react"
+
+export function useMedia(mediaQuery: string, initialValue?: boolean) {
+  const [isVerified, setIsVerified] = useState<boolean | undefined>(initialValue)
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !("matchMedia" in window)) {
+      console.warn("matchMedia is not supported by your current browser")
+      return
+    }
+    const mediaQueryList = window.matchMedia(mediaQuery)
+    const changeHandler = () => setIsVerified(!!mediaQueryList.matches)
+
+    changeHandler()
+    if (typeof mediaQueryList.addEventListener === "function") {
+      mediaQueryList.addEventListener("change", changeHandler)
+      return () => {
+        mediaQueryList.removeEventListener("change", changeHandler)
+      }
+    } else if (typeof mediaQueryList.addListener === "function") {
+      mediaQueryList.addListener(changeHandler)
+      return () => {
+        mediaQueryList.removeListener(changeHandler)
+      }
+    }
+  }, [mediaQuery])
+
+  return isVerified
+}

package/src/templates/next-default/lib/utils/json-ld.tsx

@@ -0,0 +1,199 @@
+import type {
+  Article,
+  BreadcrumbList,
+  Organization,
+  SearchAction,
+  Thing,
+  WebPage,
+  WebSite,
+  WithContext,
+} from "schema-dts";
+
+const APP_BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
+
+function isAbsoluteUrl(value: string) {
+  return /^https?:\/\//.test(value);
+}
+
+function resolveUrl(value?: string) {
+  if (!value) return APP_BASE_URL;
+  if (isAbsoluteUrl(value)) return value;
+  if (!APP_BASE_URL) return undefined;
+
+  return new URL(value, APP_BASE_URL).toString();
+}
+
+/* -------------------------------- Component ------------------------------- */
+
+export function JsonLd<T extends Thing>({
+  data,
+}: {
+  data: WithContext<T>;
+}) {
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify(data).replace(/</g, "\\u003c"),
+      }}
+    />
+  );
+}
+
+/* -------------------------------- Generators ------------------------------ */
+
+interface WebSiteJsonLdOptions {
+  name: string;
+  url?: string;
+  description?: string;
+  /** URL to site-wide search (e.g. "/search?q={search_term_string}") */
+  searchUrl?: string;
+}
+
+export function generateWebSiteJsonLd(
+  options: WebSiteJsonLdOptions
+): WithContext<WebSite> {
+  const { name, url, description, searchUrl } = options;
+  const resolvedUrl = resolveUrl(url);
+  const resolvedSearchUrl = resolveUrl(searchUrl);
+
+  return {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name,
+    ...(resolvedUrl && { url: resolvedUrl }),
+    ...(description && { description }),
+    ...(resolvedSearchUrl && {
+      potentialAction: {
+        "@type": "SearchAction",
+        target: resolvedSearchUrl,
+        "query-input": "required name=search_term_string",
+      } as SearchAction & { "query-input": string },
+    }),
+  };
+}
+
+interface OrganizationJsonLdOptions {
+  name: string;
+  url?: string;
+  logo?: string;
+  description?: string;
+  sameAs?: string[];
+}
+
+export function generateOrganizationJsonLd(
+  options: OrganizationJsonLdOptions
+): WithContext<Organization> {
+  const { name, url, logo, description, sameAs } = options;
+  const resolvedUrl = resolveUrl(url);
+  const resolvedLogo = resolveUrl(logo);
+
+  return {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name,
+    ...(resolvedUrl && { url: resolvedUrl }),
+    ...(resolvedLogo && { logo: resolvedLogo }),
+    ...(description && { description }),
+    ...(sameAs && { sameAs }),
+  };
+}
+
+interface WebPageJsonLdOptions {
+  title: string;
+  url?: string;
+  description?: string;
+  image?: string;
+  datePublished?: string;
+  dateModified?: string;
+}
+
+export function generateWebPageJsonLd(
+  options: WebPageJsonLdOptions
+): WithContext<WebPage> {
+  const { title, url, description, image, datePublished, dateModified } =
+    options;
+  const resolvedUrl = resolveUrl(url);
+  const resolvedImage = resolveUrl(image);
+
+  return {
+    "@context": "https://schema.org",
+    "@type": "WebPage",
+    name: title,
+    ...(resolvedUrl && { url: resolvedUrl }),
+    ...(description && { description }),
+    ...(resolvedImage && { image: resolvedImage }),
+    ...(datePublished && { datePublished }),
+    ...(dateModified && { dateModified }),
+  };
+}
+
+interface ArticleJsonLdOptions {
+  title: string;
+  url?: string;
+  description?: string;
+  image?: string;
+  datePublished?: string;
+  dateModified?: string;
+  authorName?: string;
+  authorUrl?: string;
+}
+
+export function generateArticleJsonLd(
+  options: ArticleJsonLdOptions
+): WithContext<Article> {
+  const {
+    title,
+    url,
+    description,
+    image,
+    datePublished,
+    dateModified,
+    authorName,
+    authorUrl,
+  } = options;
+  const resolvedUrl = resolveUrl(url);
+  const resolvedImage = resolveUrl(image);
+
+  return {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    headline: title,
+    ...(resolvedUrl && { url: resolvedUrl }),
+    ...(description && { description }),
+    ...(resolvedImage && { image: resolvedImage }),
+    ...(datePublished && { datePublished }),
+    ...(dateModified && { dateModified }),
+    ...(authorName && {
+      author: {
+        "@type": "Person",
+        name: authorName,
+        ...(authorUrl && { url: authorUrl }),
+      },
+    }),
+  };
+}
+
+interface BreadcrumbItem {
+  name: string;
+  url: string;
+}
+
+export function generateBreadcrumbJsonLd(
+  items: BreadcrumbItem[]
+): WithContext<BreadcrumbList> {
+  return {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: items.map((item, index) => {
+      const resolvedItemUrl = resolveUrl(item.url);
+
+      return {
+        "@type": "ListItem",
+        position: index + 1,
+        name: item.name,
+        ...(resolvedItemUrl && { item: resolvedItemUrl }),
+      };
+    }),
+  };
+}

package/src/templates/next-default/package.json

@@ -26,7 +26,6 @@
     "next": "^16",
     "react": "^19",
     "react-dom": "^19",
-    "react-use": "^17.6.0",
     "tailwind-merge": "^3.4.0",
     "zod": "^4.3.6"
   },
@@ -43,6 +42,7 @@
     "babel-plugin-react-compiler": "1.0.0",
     "cross-env": "^10.1.0",
     "postcss-preset-env": "^10.6.1",
+    "schema-dts": "^2.0.0",
     "tailwindcss": "^4",
     "typescript": "^5"
   },

package/src/templates/next-default/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "ES2023",
     "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "types": ["bun"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,

package/src/templates/next-experiments/app/layout.tsx

@@ -6,6 +6,11 @@ import { fontsVariable } from "@/lib/styles/fonts";
 import AppData from "@/package.json";
 import "@/lib/styles/index.css";
 import { cn } from "@/lib/styles/cn";
+import {
+  JsonLd,
+  generateWebSiteJsonLd,
+  generateOrganizationJsonLd,
+} from "@/lib/utils/json-ld";
 
 const APP_NAME = AppData.name;
 const APP_DEFAULT_TITLE = "Basement Starter";
@@ -86,6 +91,19 @@ export default async function Layout({ children }: PropsWithChildren) {
       suppressHydrationWarning
     >
       <body>
+        <JsonLd
+          data={generateWebSiteJsonLd({
+            name: APP_DEFAULT_TITLE,
+            description: APP_DESCRIPTION,
+          })}
+        />
+        <JsonLd
+          data={generateOrganizationJsonLd({
+            name: APP_NAME,
+            logo: "/opengraph-image.jpg",
+          })}
+        />
+
         {/* Skip link for keyboard navigation accessibility */}
         <Suspense fallback={null}>
           <Link

package/src/templates/next-experiments/lib/hooks/use-device-detection.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react"
-import { useMedia } from "react-use"
+import { useMedia } from "./use-media"
 
 const MOBILE_BREAKPOINT = 640
 

package/src/templates/next-experiments/lib/hooks/use-media-breakpoint.ts

@@ -1,4 +1,4 @@
-import { useMedia } from "react-use"
+import { useMedia } from "./use-media"
 
 const BREAKPOINTS = {
   "desktop-large": 1920,