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

package/package.json

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

package/src/kit/Tutorial.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+
 	type TutorialData =
 		| {
 				kind: 'page';
@@ -6,6 +9,7 @@
 				segmentTitle?: string;
 				html: string;
 				nav: { previous?: string; next?: string };
+				routeBase?: string;
 		  }
 		| {
 				kind: 'index';
@@ -30,10 +34,164 @@
 	} else {
 		indexItems = [];
 	}
+
+	let tutorialPageElement: HTMLDivElement | null = null;
+	let experientialPrevious: string | null = null;
+	let experientialNext: string | null = null;
+
+	function getCurrentPath(): string {
+		if (typeof window === 'undefined') return '';
+		const url = $page.url;
+		return normalizePath(url.pathname + url.search + url.hash);
+	}
+
+	function normalizePath(p: string): string {
+		if (p === '/') return '/';
+		return p.replace(/\/$/, '');
+	}
+
+	function isInternalTutorialPath(p: string, routeBase: string): boolean {
+		if (!routeBase) return false;
+		const normalized = normalizePath(p);
+		const normalizedBase = normalizePath(routeBase);
+		return normalized.startsWith(normalizedBase + '/') || normalized === normalizedBase;
+	}
+
+	function extractInternalTutorialLinks(html: string, routeBase: string): string[] {
+		if (typeof window === 'undefined' || !routeBase) return [];
+
+		try {
+			const parser = new DOMParser();
+			const doc = parser.parseFromString(html, 'text/html');
+			const anchors = doc.querySelectorAll('a');
+			const links: string[] = [];
+			const currentUrl = new URL(window.location.href);
+
+			for (const anchor of anchors) {
+				const href = anchor.getAttribute('href');
+				if (!href) continue;
+
+				if (anchor.hasAttribute('download')) continue;
+				if (anchor.getAttribute('target') === '_blank') continue;
+
+				try {
+					const targetUrl = new URL(href, currentUrl);
+
+					if (targetUrl.origin !== currentUrl.origin) continue;
+
+					const targetPath = normalizePath(targetUrl.pathname + targetUrl.search + targetUrl.hash);
+					const currentPath = normalizePath(currentUrl.pathname + currentUrl.search + currentUrl.hash);
+
+					if (targetPath === currentPath && targetUrl.hash) continue;
+
+					if (isInternalTutorialPath(targetPath, routeBase)) {
+						links.push(targetPath);
+					}
+				} catch {
+					continue;
+				}
+			}
+
+			return links;
+		} catch {
+			return [];
+		}
+	}
+
+	function handleClickCapture(event: MouseEvent, routeBase: string): void {
+		if (typeof window === 'undefined') return;
+
+		if (event.button !== 0) return;
+		if (event.defaultPrevented) return;
+		if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+
+		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;
+
+		try {
+			const currentUrl = new URL(window.location.href);
+			const targetUrl = new URL(href, currentUrl);
+
+			if (targetUrl.origin !== currentUrl.origin) return;
+
+			const targetPath = normalizePath(targetUrl.pathname + targetUrl.search + targetUrl.hash);
+			const currentPath = getCurrentPath();
+
+			if (targetPath === currentPath && targetUrl.hash) return;
+
+			if (!isInternalTutorialPath(targetPath, routeBase)) return;
+
+			const fromPath = currentPath;
+			const toPath = targetPath;
+
+			sessionStorage.setItem(`sprig:tutorial:prev:${toPath}`, fromPath);
+		} catch {
+			return;
+		}
+	}
+
+	$: if (data.kind === 'page' && typeof window !== 'undefined' && $page.url) {
+		const routeBase = data.routeBase;
+		if (routeBase) {
+			const currentPath = getCurrentPath();
+			const prevPath = sessionStorage.getItem(`sprig:tutorial:prev:${currentPath}`);
+			if (prevPath && isInternalTutorialPath(prevPath, routeBase)) {
+				experientialPrevious = prevPath;
+			} else {
+				experientialPrevious = null;
+			}
+		} else {
+			experientialPrevious = null;
+		}
+	}
+
+	$: if (data.kind === 'page' && typeof window !== 'undefined' && $page.url && data.html) {
+		if (!data.nav.next) {
+			const routeBase = data.routeBase;
+			if (routeBase) {
+				const links = extractInternalTutorialLinks(data.html, routeBase);
+				if (links.length === 1) {
+					experientialNext = links[0];
+				} else {
+					experientialNext = null;
+				}
+			} else {
+				experientialNext = null;
+			}
+		} else {
+			experientialNext = null;
+		}
+	}
+
+	onMount(() => {
+		if (typeof window === 'undefined') return;
+		if (data.kind !== 'page' || !data.routeBase) return;
+
+		const routeBase = data.routeBase;
+		const clickHandler = (e: MouseEvent) => handleClickCapture(e, routeBase);
+
+		if (tutorialPageElement) {
+			tutorialPageElement.addEventListener('click', clickHandler);
+		}
+
+		return () => {
+			if (tutorialPageElement) {
+				tutorialPageElement.removeEventListener('click', clickHandler);
+			}
+		};
+	});
 </script>
 
 {#if data.kind === 'page'}
-	<div class="tutorial-page">
+	<div class="tutorial-page" bind:this={tutorialPageElement}>
 		<h1>{data.title}</h1>
 		{#if data.segmentTitle}
 			<p class="subtitle">{data.segmentTitle}</p>
@@ -42,11 +200,15 @@
 		<nav class="tutorial-nav">
 		{#if data.nav.previous}
 			<a href={data.nav.previous} class="nav-link nav-previous">Previous</a>
+		{:else if experientialPrevious}
+			<a href={experientialPrevious} class="nav-link nav-previous">Previous</a>
 		{:else}
 			<span class="nav-link nav-previous nav-placeholder"></span>
 		{/if}
 		{#if data.nav.next}
 			<a href={data.nav.next} class="nav-link nav-next">Next</a>
+		{:else if experientialNext}
+			<a href={experientialNext} class="nav-link nav-next">Next</a>
 		{:else}
 			<span class="nav-link nav-next nav-placeholder"></span>
 		{/if}

package/src/lib/createTutorialEntries.js

@@ -17,7 +17,6 @@ export function createTutorialEntries({ routeBase, modules, enableDirectoryIndex
 		const entries = generateEntries(modules, routeBase, enableDirectoryIndex);
 		// Ensure we always return an array, even if empty
 		if (!Array.isArray(entries)) {
-			console.warn('[tutorial-svelte] generateEntries did not return an array:', entries);
 			return [];
 		}
 		// Ensure all entries have the correct structure

package/src/lib/createTutorialLoad.js

@@ -31,27 +31,10 @@ export function createTutorialLoad({ routeBase, modules, renderMarkdown, enableD
 				? pathParam.split('/').filter(Boolean)
 				: [];
 		
-		// Debug logging
-		if (process.env.NODE_ENV === 'development') {
-			console.log('[tutorial-svelte] pathArray:', pathArray);
-			console.log('[tutorial-svelte] modules keys:', Object.keys(modules));
-			const discovered = discoverContent(modules);
-			console.log('[tutorial-svelte] discovered:', discovered);
-		}
-		
 		const resolved = resolveRoute(pathArray, modules, routeBase);
-		
-		if (process.env.NODE_ENV === 'development') {
-			console.log('[tutorial-svelte] resolved:', resolved);
-		}
 
 		// Handle error case (not found)
 		if (resolved.type === 'error') {
-			const discovered = discoverContent(modules);
-			if (process.env.NODE_ENV === 'development') {
-				console.log('[tutorial-svelte] Path not found. Looking for:', pathArray.join('/'));
-				console.log('[tutorial-svelte] Available routes:', discovered.map(d => d.routePath));
-			}
 			return {
 				kind: 'error',
 				code: 'not_found',
@@ -135,6 +118,7 @@ export function createTutorialLoad({ routeBase, modules, renderMarkdown, enableD
 				totalPages: pages.length,
 				nav,
 				segmentPath: resolved.segmentPath,
+				routeBase,
 			};
 		}