Render API descriptions via content-collections, drop /generated/api fetch

Move the per-component API JSON load from the [name] layout's
`import.meta.glob('/generated/api/*.json')` into the components
content-collection transform. JSDoc descriptions are now compiled to
HTML with remark-gfm so backticks and links render as inline code and
anchors, surfaced as `descriptionHtml` on each PropertyInfo. The page
renders `{@html row.descriptionHtml}` with a fallback to the raw text,
and a `.prose-inline` rule scopes link/code styling without bleeding
block-level prose resets.

Eliminates the dev-server 403s caused by `/generated/api/*.json`
falling outside `server.fs.allow`, since the data now ships through
the collection rather than a runtime URL fetch.

Author: techniq

docs/content-collections.ts

@@ -32,7 +32,7 @@ const components = defineCollection({
 		order: z.number().optional(),
 		content: z.string()
 	}),
-	transform: async (doc) => {
+	transform: async (doc, context) => {
 		const { filePath, fileName, directory, path } = doc._meta;
 
 		const name = doc.name ?? toPascalCase(fileName.replace('.md', ''));
@@ -89,9 +89,31 @@ const components = defineCollection({
 		const defaultExample = usageExample ?? catalogFirstExample;
 
 		const apiPath = join(process.cwd(), `generated/api/${path}.json`);
+		let api: any = null;
 		if (existsSync(apiPath)) {
 			try {
-				const api = JSON.parse(readFileSync(apiPath, 'utf-8'));
+				api = JSON.parse(readFileSync(apiPath, 'utf-8'));
+
+				const renderInline = async (text: string) => {
+					const html = await compileMarkdown(
+						context,
+						{ ...doc, content: text } as any,
+						{ remarkPlugins: [remarkGfm] }
+					);
+					return html
+						.replace(/^<p>/, '')
+						.replace(/<\/p>\s*$/, '')
+						.trim();
+				};
+
+				const walk = async (props: any[] = []) => {
+					for (const p of props) {
+						if (p.description) p.descriptionHtml = await renderInline(p.description);
+						if (p.properties) await walk(p.properties);
+					}
+				};
+				await walk(api.properties);
+
 				if (api.properties?.length) {
 					toc.push({ id: 'api-reference', text: 'API Reference', level: 2 });
 				}
@@ -111,8 +133,8 @@ const components = defineCollection({
 			source,
 			sourceUrl,
 			defaultExample,
-			toc
-			// html: await compileMarkdown(context, doc)
+			toc,
+			api
 		};
 	}
 });

docs/src/app.css

@@ -82,6 +82,14 @@ code:not(pre > code):not(.custom) {
 	@apply text-sm font-medium bg-primary/5 text-primary font-pixel px-2 rounded border border-primary/50;
 }
 
+/* Inline-only rendered markdown (e.g. API property descriptions) */
+.prose-inline a {
+	@apply text-primary underline underline-offset-2 hover:text-primary/80;
+}
+.prose-inline code:not(pre > code):not(.custom) {
+	@apply text-xs px-1 py-0;
+}
+
 /* Code block figure container */
 figure[data-rehype-pretty-code-figure] {
 	/* Title/filename display - hidden, handled by pre.svelte component */

docs/src/lib/api-types.ts

@@ -7,6 +7,7 @@ export interface PropertyInfo {
 	type: string;
 	required: boolean;
 	description?: string;
+	descriptionHtml?: string;
 	default?: string;
 	tags?: Record<string, string>;
 	properties?: PropertyInfo[]; // For nested object types

docs/src/routes/docs/components/[name]/+layout.ts

@@ -1,4 +1,3 @@
-import type { ComponentAPI } from '$lib/api-types.js';
 import type { ComponentCatalog } from '$examples/catalog/types.js';
 import { getMarkdownComponent, loadExamplesFromMarkdown } from '$lib/markdown/utils.js';
 import type { Examples } from '$lib/types.js';
@@ -7,10 +6,6 @@ export const load = async ({ params, url, parent }) => {
 	// Get examples from parent layout
 	const parentData = await parent();
 
-	const allAPIs = import.meta.glob('/generated/api/*.json', {
-		import: 'default'
-	});
-
 	const allCatalogs = import.meta.glob('/src/examples/catalog/*.json', {
 		import: 'default'
 	});
@@ -49,24 +44,10 @@ export const load = async ({ params, url, parent }) => {
 	// Page examples take precedence
 	const examples: Examples = { ...parentData.examples, ...pageExamples };
 
-	// Load component API
-	let api: ComponentAPI | null = null;
-	const apiPath = `/generated/api/${params.name}.json`;
-	if (allAPIs[apiPath]) {
-		try {
-			api = (await allAPIs[apiPath]()) as ComponentAPI;
-		} catch (error) {
-			console.warn(`Failed to load API file for component: ${params.name}`, error);
-		}
-	} else {
-		console.warn(`No API file found for component: ${params.name}`);
-	}
-
 	return {
 		PageComponent,
 		metadata,
 		catalog,
-		examples,
-		api
+		examples
 	};
 };

docs/src/routes/docs/components/[name]/+page.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
 	import { Table } from 'svelte-ux';
+	import type { Component } from 'content-collections';
 
 	import { h2 as H2 } from '$lib/markdown/blueprints/default/blueprint.svelte';
 	import { tableCell } from '@layerstack/svelte-table';
 	import ExampleListing from '$lib/components/ExampleListing.svelte';
 	import { page } from '$app/state';
 
 	import RelatedLink from '$lib/components/RelatedLink.svelte';
+	import type { PropertyInfo } from '$lib/api-types.js';
 
 	let { data } = $props();
-	const { PageComponent, metadata, api, catalog } = $derived(data);
+	const { PageComponent, catalog } = $derived(data);
+	const metadata = $derived(data.metadata as Component);
+	const api = $derived(metadata.api);
 </script>
 
 <!-- Markdown page -->
@@ -39,7 +43,8 @@
 		}}
 	>
 		<tbody slot="data" let:columns let:data let:getCellValue let:getCellContent>
-			{#each data ?? [] as rowData, rowIndex}
+			{#each (data ?? []) as rowData, rowIndex (rowIndex)}
+				{@const row = rowData as PropertyInfo}
 				<tr class="hover:bg-surface-content/5 border-b">
 					{#each columns as column (column.name)}
 						{@const value = getCellValue(column, rowData, rowIndex)}
@@ -50,7 +55,7 @@
 									<span class="text-xs font-pixel bg-surface-content/10 px-2 py-1 rounded border"
 										>{value}</span
 									>
-									{#if rowData.required}
+									{#if row.required}
 										<span
 											class="bg-danger/10 px-1 py-0.5 font-medium rounded border border-danger text-danger text-xs"
 											>required</span
@@ -60,10 +65,14 @@
 							{:else if column.name === 'type'}
 								<span class="font-pixel text-xs text-surface-content/70">{value}</span>
 							{:else if column.name === 'description'}
-								<span class="whitespace-pre-line">{value}</span>
-								{#if rowData.default != null}
+								{#if row.descriptionHtml}
+									<span class="prose-inline">{@html row.descriptionHtml}</span>
+								{:else}
+									<span class="whitespace-pre-line">{value}</span>
+								{/if}
+								{#if row.default != null}
 									<div class="mt-2 text-surface-content/70">
-										default: <span class="font-pixel">{rowData.default}</span>
+										default: <span class="font-pixel">{row.default}</span>
 									</div>
 								{/if}
 							{:else}