sdocs 0.0.2 → 0.0.4

package/dist/client/HomePage.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { DocEntry } from '../types.js';
+
+	interface Props {
+		docs: DocEntry[];
+		logo: string;
+	}
+
+	let { docs, logo }: Props = $props();
+
+	const componentCount = $derived(docs.filter((d) => d.kind === 'component').length);
+	const pageCount = $derived(docs.filter((d) => d.kind === 'page').length);
+	const layoutCount = $derived(docs.filter((d) => d.kind === 'layout').length);
+</script>
+
+<div class="sdocs-home">
+	<div class="sdocs-home-brand">
+		<h1 class="sdocs-home-logo">{logo}</h1>
+		<p class="sdocs-home-tagline">A lightweight documentation tool for Svelte 5 components.</p>
+	</div>
+
+	<div class="sdocs-home-stats">
+		{#if componentCount > 0}
+			<div class="sdocs-stat">
+				<span class="sdocs-stat-value">{componentCount}</span>
+				<span class="sdocs-stat-label">{componentCount === 1 ? 'Component' : 'Components'}</span>
+			</div>
+		{/if}
+		{#if pageCount > 0}
+			<div class="sdocs-stat">
+				<span class="sdocs-stat-value">{pageCount}</span>
+				<span class="sdocs-stat-label">{pageCount === 1 ? 'Page' : 'Pages'}</span>
+			</div>
+		{/if}
+		{#if layoutCount > 0}
+			<div class="sdocs-stat">
+				<span class="sdocs-stat-value">{layoutCount}</span>
+				<span class="sdocs-stat-label">{layoutCount === 1 ? 'Layout' : 'Layouts'}</span>
+			</div>
+		{/if}
+	</div>
+
+	<p class="sdocs-home-hint">Select a component or page from the sidebar to get started.</p>
+</div>
+
+<style>
+	.sdocs-home {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		min-height: 400px;
+		gap: 32px;
+		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	}
+	.sdocs-home-brand {
+		text-align: center;
+	}
+	.sdocs-home-logo {
+		font-size: 36px;
+		font-weight: 800;
+		color: var(--sdocs-text-heading);
+		margin: 0;
+	}
+	.sdocs-home-tagline {
+		font-size: 16px;
+		color: var(--sdocs-text-secondary);
+		margin: 8px 0 0;
+	}
+	.sdocs-home-stats {
+		display: flex;
+		gap: 32px;
+	}
+	.sdocs-stat {
+		text-align: center;
+	}
+	.sdocs-stat-value {
+		display: block;
+		font-size: 28px;
+		font-weight: 700;
+		color: var(--sdocs-primary);
+	}
+	.sdocs-stat-label {
+		font-size: 13px;
+		color: var(--sdocs-text-muted);
+	}
+	.sdocs-home-hint {
+		font-size: 14px;
+		color: var(--sdocs-text-muted);
+	}
+</style>

package/dist/client/HomePage.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DocEntry } from '../types.js';
+interface Props {
+    docs: DocEntry[];
+    logo: string;
+}
+declare const HomePage: import("svelte").Component<Props, {}, "">;
+type HomePage = ReturnType<typeof HomePage>;
+export default HomePage;

package/dist/client/LayoutView.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { DocEntry } from '../types.js';
+	import PreviewFrame from './PreviewFrame.svelte';
+
+	interface Props {
+		doc: DocEntry;
+		activeStylesheet?: string;
+	}
+
+	let { doc, activeStylesheet }: Props = $props();
+
+	const contentSnippet = $derived(doc.snippets?.[0]);
+</script>
+
+<div class="sdocs-layout-view">
+	{#if contentSnippet}
+		<PreviewFrame src={contentSnippet.previewUrl} {activeStylesheet} fullHeight />
+	{/if}
+</div>
+
+<style>
+	.sdocs-layout-view {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+</style>

package/dist/client/LayoutView.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DocEntry } from '../types.js';
+interface Props {
+    doc: DocEntry;
+    activeStylesheet?: string;
+}
+declare const LayoutView: import("svelte").Component<Props, {}, "">;
+type LayoutView = ReturnType<typeof LayoutView>;
+export default LayoutView;

package/dist/client/PageView.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import type { DocEntry } from '../types.js';
+	import PreviewFrame from './PreviewFrame.svelte';
+
+	interface Props {
+		doc: DocEntry;
+		activeStylesheet?: string;
+	}
+
+	let { doc, activeStylesheet }: Props = $props();
+
+	const meta = $derived(doc.meta);
+	const contentSnippet = $derived(doc.snippets?.[0]);
+	const toc = $derived(doc.toc ?? []);
+
+	function scrollToHeading(id: string) {
+		const iframe = document.querySelector('.sdocs-page-content .sdocs-iframe') as HTMLIFrameElement;
+		if (iframe?.contentWindow) {
+			iframe.contentWindow.postMessage({ type: 'sdocs:scroll-to', id }, '*');
+		}
+	}
+</script>
+
+<div class="sdocs-page-view">
+	<div class="sdocs-page-main">
+		<!-- Header -->
+		<div class="sdocs-view-header">
+			<h1 class="sdocs-view-title">{meta.title}</h1>
+			{#if meta.description}
+				<p class="sdocs-view-description">{meta.description}</p>
+			{/if}
+		</div>
+
+		<!-- Content -->
+		{#if contentSnippet}
+			<div class="sdocs-page-content">
+				<PreviewFrame src={contentSnippet.previewUrl} {activeStylesheet} />
+			</div>
+		{/if}
+	</div>
+
+	<!-- Table of Contents -->
+	{#if toc.length > 0}
+		<aside class="sdocs-toc">
+			<h3 class="sdocs-toc-title">On this page</h3>
+			<nav>
+				<ul class="sdocs-toc-list">
+					{#each toc as heading (heading.id)}
+						<li class="sdocs-toc-item" style:padding-left="{(heading.level - 2) * 12}px">
+							<button
+								class="sdocs-toc-link"
+								onclick={() => scrollToHeading(heading.id)}
+							>
+								{heading.text}
+							</button>
+						</li>
+					{/each}
+				</ul>
+			</nav>
+		</aside>
+	{/if}
+</div>
+
+<style>
+	.sdocs-page-view {
+		display: flex;
+		gap: 24px;
+		padding: 24px 32px;
+		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	}
+	.sdocs-page-main {
+		flex: 1;
+		min-width: 0;
+	}
+	.sdocs-view-header {
+		margin-bottom: 24px;
+	}
+	.sdocs-view-title {
+		font-size: 24px;
+		font-weight: 700;
+		color: var(--sdocs-text-heading);
+		margin: 0;
+	}
+	.sdocs-view-description {
+		font-size: 14px;
+		color: var(--sdocs-text-secondary);
+		margin: 6px 0 0;
+	}
+	.sdocs-page-content {
+		flex: 1;
+	}
+	.sdocs-toc {
+		width: 200px;
+		flex-shrink: 0;
+		position: sticky;
+		top: 24px;
+		align-self: flex-start;
+	}
+	.sdocs-toc-title {
+		font-size: 12px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--sdocs-text-muted);
+		margin: 0 0 8px;
+	}
+	.sdocs-toc-list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+	.sdocs-toc-item {
+		margin: 0;
+	}
+	.sdocs-toc-link {
+		display: block;
+		padding: 4px 0;
+		font-size: 13px;
+		color: var(--sdocs-text-secondary);
+		text-decoration: none;
+		background: none;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+		width: 100%;
+	}
+	.sdocs-toc-link:hover {
+		color: var(--sdocs-primary);
+	}
+</style>

package/dist/client/PageView.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DocEntry } from '../types.js';
+interface Props {
+    doc: DocEntry;
+    activeStylesheet?: string;
+}
+declare const PageView: import("svelte").Component<Props, {}, "">;
+type PageView = ReturnType<typeof PageView>;
+export default PageView;

package/dist/client/PreviewFrame.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { onMount, untrack } from 'svelte';
+
+	interface Props {
+		src: string;
+		props?: Record<string, unknown>;
+		cssVars?: Record<string, string>;
+		activeStylesheet?: string;
+		fullHeight?: boolean;
+	}
+
+	let { src, props = {}, cssVars = {}, activeStylesheet, fullHeight = false }: Props = $props();
+	let iframe: HTMLIFrameElement;
+	let ready = $state(false);
+
+	onMount(() => {
+		function onMessage(e: MessageEvent) {
+			if (e.data?.type === 'sdocs:preview-ready') {
+				ready = true;
+				sendProps();
+				sendCss();
+				sendStylesheet();
+			}
+		}
+		window.addEventListener('message', onMessage);
+		return () => window.removeEventListener('message', onMessage);
+	});
+
+	function sendProps() {
+		if (ready && iframe?.contentWindow) {
+			// Snapshot to strip $state proxy before postMessage (DataCloneError)
+			const data = $state.snapshot(props);
+			iframe.contentWindow.postMessage({ type: 'sdocs:update-props', props: data }, '*');
+		}
+	}
+
+	function sendCss() {
+		if (ready && iframe?.contentWindow) {
+			const data = $state.snapshot(cssVars);
+			iframe.contentWindow.postMessage({ type: 'sdocs:update-css', vars: data }, '*');
+		}
+	}
+
+	function sendStylesheet() {
+		if (ready && iframe?.contentWindow && activeStylesheet) {
+			iframe.contentWindow.postMessage({ type: 'sdocs:update-stylesheet', name: activeStylesheet }, '*');
+		}
+	}
+
+	$effect(() => {
+		// Track props changes, send without re-tracking inside send
+		JSON.stringify(props);
+		untrack(() => sendProps());
+	});
+
+	$effect(() => {
+		// Track cssVars changes
+		JSON.stringify(cssVars);
+		untrack(() => sendCss());
+	});
+
+	$effect(() => {
+		// Track stylesheet changes
+		activeStylesheet;
+		untrack(() => sendStylesheet());
+	});
+</script>
+
+<div class="sdocs-preview-frame" class:full-height={fullHeight}>
+	<iframe
+		bind:this={iframe}
+		{src}
+		title="Component preview"
+		class="sdocs-iframe"
+	></iframe>
+</div>
+
+<style>
+	.sdocs-preview-frame {
+		border: 1px solid var(--sdocs-border);
+		border-radius: 6px;
+		overflow: hidden;
+		background: var(--sdocs-bg);
+	}
+	.sdocs-preview-frame.full-height {
+		flex: 1;
+		border: none;
+		border-radius: 0;
+	}
+	.sdocs-iframe {
+		width: 100%;
+		min-height: 120px;
+		border: none;
+		display: block;
+	}
+	.full-height .sdocs-iframe {
+		height: 100%;
+		min-height: 0;
+	}
+</style>

package/dist/client/PreviewFrame.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    src: string;
+    props?: Record<string, unknown>;
+    cssVars?: Record<string, string>;
+    activeStylesheet?: string;
+    fullHeight?: boolean;
+}
+declare const PreviewFrame: import("svelte").Component<Props, {}, "">;
+type PreviewFrame = ReturnType<typeof PreviewFrame>;
+export default PreviewFrame;