@sprig-and-prose/tutorial-svelte 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprig-and-prose/tutorial-svelte",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "type": "module",
   "description": "A calm SvelteKit package that transforms markdown files into paged tutorial routes",
   "main": "src/index.js",

package/src/kit/Tutorial.svelte

@@ -18,6 +18,9 @@
 		| {
 				kind: 'stub';
 				firstPagePath: string;
+				title?: string;
+				pages?: Array<{ title: string; path: string }>;
+				introContent?: string | null;
 		  }
 		| {
 				kind: 'error';
@@ -108,14 +111,27 @@
 		const anchor = (event.target as HTMLElement)?.closest('a');
 		if (!anchor) return;
 
-		if (anchor.closest('.tutorial-nav')) return;
-
 		const href = anchor.getAttribute('href');
 		if (!href) return;
 
 		if (anchor.hasAttribute('download')) return;
 		if (anchor.getAttribute('target') === '_blank') return;
 
+		const isInNav = anchor.closest('.tutorial-nav');
+		if (isInNav) {
+			try {
+				const currentUrl = new URL(window.location.href);
+				const targetUrl = new URL(href, currentUrl);
+				const targetPath = normalizePath(targetUrl.pathname + targetUrl.search + targetUrl.hash);
+				
+				if (targetPath !== experientialPrevious && targetPath !== experientialNext) {
+					return;
+				}
+			} catch {
+				return;
+			}
+		}
+
 		try {
 			const currentUrl = new URL(window.location.href);
 			const targetUrl = new URL(href, currentUrl);
@@ -227,8 +243,28 @@
 	</div>
 {:else if data.kind === 'stub'}
 	<div class="stub-page">
-		<p>Start at page 1</p>
-		<a href={data.firstPagePath}>Begin</a>
+		{#if data.title}
+			<h1>{data.title}</h1>
+		{/if}
+		{#if data.introContent}
+			<div class="stub-intro">
+				{@html data.introContent}
+			</div>
+		{/if}
+		{#if data.pages && data.pages.length > 0}
+			<h2 class="stub-toc-header">Table of contents</h2>
+			<ol class="stub-toc-list">
+				{#each data.pages as page}
+					<li class="stub-toc-item">
+						<a href={page.path} class="stub-toc-link">{page.title}</a>
+					</li>
+				{/each}
+			</ol>
+		{/if}
+		<nav class="tutorial-nav">
+			<span class="nav-link nav-previous nav-placeholder"></span>
+			<a href={data.firstPagePath} class="nav-link nav-next">Next</a>
+		</nav>
 	</div>
 {:else if data.kind === 'error'}
 	<div class="error-state">
@@ -293,13 +329,40 @@
 	.stub-page {
 		max-width: 70ch;
 		margin: 0 auto;
-		padding: 4rem 1rem;
-		text-align: center;
+		padding: 2rem 1rem;
+	}
+
+	.stub-page h1 {
+		margin: 0;
 	}
 
-	.stub-page a {
+	.stub-intro {
+		margin: 2rem 0;
+	}
+
+	.stub-toc-header {
+		margin: 2rem 0 1rem 0;
+		font-size: 1.25rem;
+		font-weight: 600;
+	}
+
+	.stub-toc-list {
+		padding-left: 1.5rem;
+		margin: 0 0 2rem 0;
+	}
+
+	.stub-toc-item {
+		margin-bottom: 1rem;
+	}
+
+	.stub-toc-link {
 		color: var(--text-color);
-		text-decoration: underline;
+		text-decoration: none;
+		font-size: 1.125rem;
+	}
+
+	.stub-toc-link:hover {
+		color: var(--text-secondary);
 	}
 
 	.error-state {

package/src/lib/createTutorialLoad.js

@@ -125,10 +125,79 @@ export function createTutorialLoad({ routeBase, modules, renderMarkdown, enableD
 		// Handle stub route (segment root)
 		if (resolved.type === 'stub') {
 			const firstPagePath = `${routeBase}/${resolved.segmentPath}/1`;
+			
+			// Load and parse the segment file to get title and pages
+			const module = modules[resolved.filePath];
+			let content = '';
+
+			// Handle different module formats (eager vs lazy loading)
+			if (typeof module === 'function') {
+				// Lazy-loaded module - await it
+				const loaded = await module();
+				content = typeof loaded === 'string' ? loaded : loaded?.default || String(loaded?.default || '');
+			} else if (typeof module === 'string') {
+				content = module;
+			} else if (module?.default) {
+				content = typeof module.default === 'string' ? module.default : String(module.default);
+			} else if (typeof module === 'object' && 'default' in module) {
+				content = String(module.default);
+			}
+
+			const { pages, segmentTitle } = parseSegment(content);
+
+			// Extract content between H1 and first H2
+			let introContent = '';
+			const lines = content.split('\n');
+			let h1Index = -1;
+			let firstH2Index = -1;
+			let inCodeBlock = false;
+
+			for (let i = 0; i < lines.length; i++) {
+				const line = lines[i];
+				const trimmed = line.trim();
+				const rawTrimmed = line.trimStart();
+
+				// Check for fenced code blocks
+				if (/^[`~]{3,}/.test(rawTrimmed)) {
+					inCodeBlock = !inCodeBlock;
+					continue;
+				}
+
+				// Find H1
+				if (h1Index === -1 && !inCodeBlock && trimmed.startsWith('# ') && !trimmed.startsWith('##')) {
+					h1Index = i;
+					continue;
+				}
+
+				// Find first H2
+				if (h1Index !== -1 && firstH2Index === -1 && !inCodeBlock && trimmed.startsWith('## ') && !trimmed.startsWith('###')) {
+					firstH2Index = i;
+					break;
+				}
+			}
+
+			// Extract content between H1 and first H2
+			if (h1Index !== -1 && firstH2Index !== -1 && firstH2Index > h1Index + 1) {
+				const introLines = lines.slice(h1Index + 1, firstH2Index);
+				const introText = introLines.join('\n').trim();
+				if (introText) {
+					introContent = await renderMarkdown(introText);
+				}
+			}
+
+			// Build pages array with paths
+			const pagesWithPaths = pages.map((page, index) => ({
+				title: page.title,
+				path: `${routeBase}/${resolved.segmentPath}/${index + 1}`,
+			}));
+
 			return {
 				kind: 'stub',
 				segmentPath: resolved.segmentPath,
 				firstPagePath,
+				title: segmentTitle || '',
+				pages: pagesWithPaths,
+				introContent: introContent || null,
 			};
 		}