@btst/stack 4.5.1 → 4.6.0

package/src/plugins/blog/__tests__/introduction-slot.test.tsx

@@ -0,0 +1,86 @@
+// @vitest-environment jsdom
+import { act, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { MarkdownContent } from "@workspace/ui/components/markdown-content";
+
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+function StatefulSlot({ label }: { label: string }) {
+	const [count, setCount] = useState(0);
+	return (
+		<button onClick={() => setCount(count + 1)}>
+			{label}: {count}
+		</button>
+	);
+}
+
+describe("Markdown introduction slot", () => {
+	it("updates the introduction when slot props change without remounting", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		const root = createRoot(container);
+		try {
+			await act(async () => {
+				root.render(
+					<MarkdownContent
+						markdown="Introduction."
+						afterFirstParagraph={<StatefulSlot label="First selection" />}
+					/>,
+				);
+			});
+			expect(container.textContent).toContain("First selection: 0");
+			const button = container.querySelector("button")!;
+			await act(async () => button.click());
+			button.focus();
+			await act(async () => {
+				root.render(
+					<MarkdownContent
+						markdown="Introduction."
+						afterFirstParagraph={<StatefulSlot label="Updated selection" />}
+					/>,
+				);
+			});
+			expect(container.textContent).toContain("Updated selection: 1");
+			expect(container.querySelector("button")).toBe(button);
+			expect(document.activeElement).toBe(button);
+			expect(container.textContent).not.toContain("First selection");
+		} finally {
+			await act(async () => root.unmount());
+			container.remove();
+		}
+	});
+	it("follows the first top-level paragraph without splitting references or footnotes", () => {
+		const html = renderToStaticMarkup(
+			<MarkdownContent
+				markdown={
+					"# Title\n\n> Quoted paragraph\n\n- List paragraph\n\nIntroduction with [reference][profile] and a note[^1].\n\nSecond paragraph.\n\n[profile]: /compound\n[^1]: Footnote text."
+				}
+				afterFirstParagraph={<aside>Related profiles</aside>}
+			/>,
+		);
+		expect(html).toContain('href="/compound"');
+		expect(html).toContain("Footnote text.");
+		expect(html.match(/Related profiles/g)).toHaveLength(1);
+		expect(html).toMatch(
+			/Introduction[\s\S]*<\/p><aside>Related profiles<\/aside>[\s\S]*Second paragraph/,
+		);
+		expect(html.indexOf("</blockquote>")).toBeLessThan(
+			html.indexOf("Related profiles"),
+		);
+		expect(html.indexOf("</ul>")).toBeLessThan(
+			html.indexOf("Related profiles"),
+		);
+	});
+
+	it("omits the slot when there is no top-level paragraph", () => {
+		const html = renderToStaticMarkup(
+			<MarkdownContent
+				markdown={"# Title\n\n- Item\n\n> Quote"}
+				afterFirstParagraph={<aside>Related profiles</aside>}
+			/>,
+		);
+		expect(html).not.toContain("Related profiles");
+	});
+});

package/src/plugins/blog/client/components/pages/post-page.internal.tsx

@@ -122,7 +122,10 @@ export function PostPage({ slug }: { slug: string }) {
 					)}
 
 					<div className="w-full px-3">
-						<MarkdownContent markdown={post.content} />
+						<MarkdownContent
+							markdown={post.content}
+							afterFirstParagraph={overrides.postIntroductionSlot?.(post)}
+						/>
 					</div>
 
 					<div className="flex flex-col gap-4 w-full">

package/src/plugins/blog/client/components/shared/markdown-content.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { ReactNode } from "react";
 import { MarkdownContent as SharedMarkdownContent } from "@workspace/ui/components/markdown-content";
 import { useStack } from "@btst/stack/context";
 import { DefaultImage, DefaultLink } from "./defaults";
@@ -11,6 +12,7 @@ import "highlight.js/styles/panda-syntax-light.css";
 export type MarkdownContentProps = {
 	markdown: string;
 	className?: string;
+	afterFirstParagraph?: ReactNode;
 };
 
 /**
@@ -18,7 +20,11 @@ export type MarkdownContentProps = {
  * This is a thin wrapper around the shared MarkdownContent component
  * that provides the framework-wide Link and Image components.
  */
-export function MarkdownContent({ markdown, className }: MarkdownContentProps) {
+export function MarkdownContent({
+	markdown,
+	className,
+	afterFirstParagraph,
+}: MarkdownContentProps) {
 	const { router } = useStack();
 	const Link = router?.Link ?? DefaultLink;
 	const Image = router?.Image ?? DefaultImage;
@@ -26,6 +32,7 @@ export function MarkdownContent({ markdown, className }: MarkdownContentProps) {
 	return (
 		<SharedMarkdownContent
 			markdown={markdown}
+			afterFirstParagraph={afterFirstParagraph}
 			className={className}
 			variant="default"
 			LinkComponent={Link}

package/src/plugins/blog/client/overrides.ts

@@ -159,4 +159,7 @@ export interface BlogPluginOverrides {
 	 * ```
 	 */
 	postBottomSlot?: (post: SerializedPost) => ReactNode;
+
+	/** Render content after the first top-level body paragraph, preserving a single Markdown document. Omitted if no paragraph exists. */
+	postIntroductionSlot?: (post: SerializedPost) => ReactNode;
 }

package/dist/shared/{stack.CyltNNZZ.d.ts → stack.BMlTZnZp.d.ts}

@@ -27,10 +27,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
         readonly itemCount: number;
         readonly createdAt: string;
         readonly updatedAt: string;
-        readonly slug: string;
         readonly id: string;
-        readonly description?: string | undefined;
         readonly name: string;
+        readonly slug: string;
+        readonly description?: string | undefined;
         readonly jsonSchema: string;
         readonly fieldConfig?: string | undefined;
         readonly autoFormVersion?: number | undefined;
@@ -45,10 +45,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
     }, {
         readonly createdAt: string;
         readonly updatedAt: string;
-        readonly slug: string;
         readonly id: string;
-        readonly description?: string | undefined;
         readonly name: string;
+        readonly slug: string;
+        readonly description?: string | undefined;
         readonly jsonSchema: string;
         readonly fieldConfig?: string | undefined;
         readonly autoFormVersion?: number | undefined;
@@ -79,10 +79,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
             readonly contentType?: {
                 readonly createdAt: string;
                 readonly updatedAt: string;
-                readonly slug: string;
                 readonly id: string;
-                readonly description?: string | undefined;
                 readonly name: string;
+                readonly slug: string;
+                readonly description?: string | undefined;
                 readonly jsonSchema: string;
                 readonly fieldConfig?: string | undefined;
                 readonly autoFormVersion?: number | undefined;
@@ -92,11 +92,11 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
             };
             readonly createdAt: string;
             readonly updatedAt: string;
-            readonly slug: string;
             readonly id: string;
+            readonly slug: string;
+            readonly contentTypeId: string;
             readonly data: string;
             readonly authorId?: string | undefined;
-            readonly contentTypeId: string;
         }[];
         readonly total: number;
     }>;
@@ -112,10 +112,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
         readonly contentType?: {
             readonly createdAt: string;
             readonly updatedAt: string;
-            readonly slug: string;
             readonly id: string;
-            readonly description?: string | undefined;
             readonly name: string;
+            readonly slug: string;
+            readonly description?: string | undefined;
             readonly jsonSchema: string;
             readonly fieldConfig?: string | undefined;
             readonly autoFormVersion?: number | undefined;
@@ -125,11 +125,11 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
         };
         readonly createdAt: string;
         readonly updatedAt: string;
-        readonly slug: string;
         readonly id: string;
+        readonly slug: string;
+        readonly contentTypeId: string;
         readonly data: string;
         readonly authorId?: string | undefined;
-        readonly contentTypeId: string;
     }>;
     readonly createContentItem: better_call.StrictEndpoint<"/content/:typeSlug", {
         params: z.ZodObject<{
@@ -149,10 +149,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
         readonly contentType?: {
             readonly createdAt: string;
             readonly updatedAt: string;
-            readonly slug: string;
             readonly id: string;
-            readonly description?: string | undefined;
             readonly name: string;
+            readonly slug: string;
+            readonly description?: string | undefined;
             readonly jsonSchema: string;
             readonly fieldConfig?: string | undefined;
             readonly autoFormVersion?: number | undefined;
@@ -162,11 +162,11 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
         };
         readonly createdAt: string;
         readonly updatedAt: string;
-        readonly slug: string;
         readonly id: string;
+        readonly slug: string;
+        readonly contentTypeId: string;
         readonly data: string;
         readonly authorId?: string | undefined;
-        readonly contentTypeId: string;
     }>;
     readonly updateContentItem: better_call.StrictEndpoint<"/content/:typeSlug/:id", {
         params: z.ZodObject<{
@@ -187,10 +187,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
         readonly contentType?: {
             readonly createdAt: string;
             readonly updatedAt: string;
-            readonly slug: string;
             readonly id: string;
-            readonly description?: string | undefined;
             readonly name: string;
+            readonly slug: string;
+            readonly description?: string | undefined;
             readonly jsonSchema: string;
             readonly fieldConfig?: string | undefined;
             readonly autoFormVersion?: number | undefined;
@@ -200,11 +200,11 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
         };
         readonly createdAt: string;
         readonly updatedAt: string;
-        readonly slug: string;
         readonly id: string;
+        readonly slug: string;
+        readonly contentTypeId: string;
         readonly data: string;
         readonly authorId?: string | undefined;
-        readonly contentTypeId: string;
     }>;
     readonly deleteContentItem: better_call.StrictEndpoint<"/content/:typeSlug/:id", {
         params: z.ZodObject<{
@@ -232,10 +232,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
                 readonly contentType?: {
                     readonly createdAt: string;
                     readonly updatedAt: string;
-                    readonly slug: string;
                     readonly id: string;
-                    readonly description?: string | undefined;
                     readonly name: string;
+                    readonly slug: string;
+                    readonly description?: string | undefined;
                     readonly jsonSchema: string;
                     readonly fieldConfig?: string | undefined;
                     readonly autoFormVersion?: number | undefined;
@@ -245,20 +245,20 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
                 };
                 readonly createdAt: string;
                 readonly updatedAt: string;
-                readonly slug: string;
                 readonly id: string;
+                readonly slug: string;
+                readonly contentTypeId: string;
                 readonly data: string;
                 readonly authorId?: string | undefined;
-                readonly contentTypeId: string;
             }[];
         };
         readonly contentType?: {
             readonly createdAt: string;
             readonly updatedAt: string;
-            readonly slug: string;
             readonly id: string;
-            readonly description?: string | undefined;
             readonly name: string;
+            readonly slug: string;
+            readonly description?: string | undefined;
             readonly jsonSchema: string;
             readonly fieldConfig?: string | undefined;
             readonly autoFormVersion?: number | undefined;
@@ -268,11 +268,11 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
         };
         readonly createdAt: string;
         readonly updatedAt: string;
-        readonly slug: string;
         readonly id: string;
+        readonly slug: string;
+        readonly contentTypeId: string;
         readonly data: string;
         readonly authorId?: string | undefined;
-        readonly contentTypeId: string;
     }>;
     readonly listContentByRelation: better_call.StrictEndpoint<"/content/:typeSlug/by-relation", {
         params: z.ZodObject<{
@@ -298,10 +298,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
             readonly contentType?: {
                 readonly createdAt: string;
                 readonly updatedAt: string;
-                readonly slug: string;
                 readonly id: string;
-                readonly description?: string | undefined;
                 readonly name: string;
+                readonly slug: string;
+                readonly description?: string | undefined;
                 readonly jsonSchema: string;
                 readonly fieldConfig?: string | undefined;
                 readonly autoFormVersion?: number | undefined;
@@ -311,11 +311,11 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
             };
             readonly createdAt: string;
             readonly updatedAt: string;
-            readonly slug: string;
             readonly id: string;
+            readonly slug: string;
+            readonly contentTypeId: string;
             readonly data: string;
             readonly authorId?: string | undefined;
-            readonly contentTypeId: string;
         }[];
         readonly total: number;
         readonly limit: number;
@@ -367,10 +367,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
             readonly contentType?: {
                 readonly createdAt: string;
                 readonly updatedAt: string;
-                readonly slug: string;
                 readonly id: string;
-                readonly description?: string | undefined;
                 readonly name: string;
+                readonly slug: string;
+                readonly description?: string | undefined;
                 readonly jsonSchema: string;
                 readonly fieldConfig?: string | undefined;
                 readonly autoFormVersion?: number | undefined;
@@ -380,11 +380,11 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
             };
             readonly createdAt: string;
             readonly updatedAt: string;
-            readonly slug: string;
             readonly id: string;
+            readonly slug: string;
+            readonly contentTypeId: string;
             readonly data: string;
             readonly authorId?: string | undefined;
-            readonly contentTypeId: string;
         }[];
         readonly total: number;
         readonly limit: number;
@@ -399,10 +399,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
         itemCount: number;
         createdAt: string;
         updatedAt: string;
-        slug: string;
         id: string;
-        description?: string | undefined;
         name: string;
+        slug: string;
+        description?: string | undefined;
         jsonSchema: string;
         fieldConfig?: string | undefined;
         autoFormVersion?: number | undefined;
@@ -414,10 +414,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
     }, z.core.$strip>>, {
         createdAt: string;
         updatedAt: string;
-        slug: string;
         id: string;
-        description?: string | undefined;
         name: string;
+        slug: string;
+        description?: string | undefined;
         jsonSchema: string;
         fieldConfig?: string | undefined;
         autoFormVersion?: number | undefined;
@@ -445,10 +445,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
             contentType?: {
                 createdAt: string;
                 updatedAt: string;
-                slug: string;
                 id: string;
-                description?: string | undefined;
                 name: string;
+                slug: string;
+                description?: string | undefined;
                 jsonSchema: string;
                 fieldConfig?: string | undefined;
                 autoFormVersion?: number | undefined;
@@ -456,11 +456,11 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
             parsedData: Record<string, _btst_stack_plugins_api.OperationData>;
             createdAt: string;
             updatedAt: string;
-            slug: string;
             id: string;
+            slug: string;
+            contentTypeId: string;
             data: string;
             authorId?: string | undefined;
-            contentTypeId: string;
         }[];
         total: number;
     }, false>;
@@ -479,10 +479,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
         contentType?: {
             createdAt: string;
             updatedAt: string;
-            slug: string;
             id: string;
-            description?: string | undefined;
             name: string;
+            slug: string;
+            description?: string | undefined;
             jsonSchema: string;
             fieldConfig?: string | undefined;
             autoFormVersion?: number | undefined;
@@ -490,11 +490,11 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
         parsedData: Record<string, _btst_stack_plugins_api.OperationData>;
         createdAt: string;
         updatedAt: string;
-        slug: string;
         id: string;
+        slug: string;
+        contentTypeId: string;
         data: string;
         authorId?: string | undefined;
-        contentTypeId: string;
     }, false>;
     readonly createContentItem: _btst_stack_plugins_api.Operation<z.ZodObject<{
         typeSlug: z.ZodString;
@@ -508,10 +508,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
         contentType?: {
             createdAt: string;
             updatedAt: string;
-            slug: string;
             id: string;
-            description?: string | undefined;
             name: string;
+            slug: string;
+            description?: string | undefined;
             jsonSchema: string;
             fieldConfig?: string | undefined;
             autoFormVersion?: number | undefined;
@@ -519,11 +519,11 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
         parsedData: Record<string, _btst_stack_plugins_api.OperationData>;
         createdAt: string;
         updatedAt: string;
-        slug: string;
         id: string;
+        slug: string;
+        contentTypeId: string;
         data: string;
         authorId?: string | undefined;
-        contentTypeId: string;
     }, false>;
     readonly updateContentItem: _btst_stack_plugins_api.Operation<z.ZodObject<{
         typeSlug: z.ZodString;
@@ -540,10 +540,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
         contentType?: {
             createdAt: string;
             updatedAt: string;
-            slug: string;
             id: string;
-            description?: string | undefined;
             name: string;
+            slug: string;
+            description?: string | undefined;
             jsonSchema: string;
             fieldConfig?: string | undefined;
             autoFormVersion?: number | undefined;
@@ -551,11 +551,11 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
         parsedData: Record<string, _btst_stack_plugins_api.OperationData>;
         createdAt: string;
         updatedAt: string;
-        slug: string;
         id: string;
+        slug: string;
+        contentTypeId: string;
         data: string;
         authorId?: string | undefined;
-        contentTypeId: string;
     }, false>;
     readonly deleteContentItem: _btst_stack_plugins_api.Operation<z.ZodObject<{
         typeSlug: z.ZodString;
@@ -584,10 +584,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
                 contentType?: {
                     createdAt: string;
                     updatedAt: string;
-                    slug: string;
                     id: string;
-                    description?: string | undefined;
                     name: string;
+                    slug: string;
+                    description?: string | undefined;
                     jsonSchema: string;
                     fieldConfig?: string | undefined;
                     autoFormVersion?: number | undefined;
@@ -595,20 +595,20 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
                 parsedData: Record<string, _btst_stack_plugins_api.OperationData>;
                 createdAt: string;
                 updatedAt: string;
-                slug: string;
                 id: string;
+                slug: string;
+                contentTypeId: string;
                 data: string;
                 authorId?: string | undefined;
-                contentTypeId: string;
             }[];
         };
         contentType?: {
             createdAt: string;
             updatedAt: string;
-            slug: string;
             id: string;
-            description?: string | undefined;
             name: string;
+            slug: string;
+            description?: string | undefined;
             jsonSchema: string;
             fieldConfig?: string | undefined;
             autoFormVersion?: number | undefined;
@@ -616,11 +616,11 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
         parsedData: Record<string, _btst_stack_plugins_api.OperationData>;
         createdAt: string;
         updatedAt: string;
-        slug: string;
         id: string;
+        slug: string;
+        contentTypeId: string;
         data: string;
         authorId?: string | undefined;
-        contentTypeId: string;
     }, false>;
     readonly listContentByRelation: _btst_stack_plugins_api.Operation<z.ZodObject<{
         typeSlug: z.ZodString;
@@ -643,10 +643,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
             contentType?: {
                 createdAt: string;
                 updatedAt: string;
-                slug: string;
                 id: string;
-                description?: string | undefined;
                 name: string;
+                slug: string;
+                description?: string | undefined;
                 jsonSchema: string;
                 fieldConfig?: string | undefined;
                 autoFormVersion?: number | undefined;
@@ -654,11 +654,11 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
             parsedData: Record<string, _btst_stack_plugins_api.OperationData>;
             createdAt: string;
             updatedAt: string;
-            slug: string;
             id: string;
+            slug: string;
+            contentTypeId: string;
             data: string;
             authorId?: string | undefined;
-            contentTypeId: string;
         }[];
         total: number;
         limit: number;
@@ -701,10 +701,10 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
             contentType?: {
                 createdAt: string;
                 updatedAt: string;
-                slug: string;
                 id: string;
-                description?: string | undefined;
                 name: string;
+                slug: string;
+                description?: string | undefined;
                 jsonSchema: string;
                 fieldConfig?: string | undefined;
                 autoFormVersion?: number | undefined;
@@ -712,11 +712,11 @@ declare const cmsBackendPlugin: (config: CMSBackendConfig) => _btst_stack_plugin
             parsedData: Record<string, _btst_stack_plugins_api.OperationData>;
             createdAt: string;
             updatedAt: string;
-            slug: string;
             id: string;
+            slug: string;
+            contentTypeId: string;
             data: string;
             authorId?: string | undefined;
-            contentTypeId: string;
         }[];
         total: number;
         limit: number;