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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprig-and-prose/tutorial-svelte",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "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,104 @@
 	} else {
 		indexItems = [];
 	}
+
+	let tutorialPageElement: HTMLDivElement | null = null;
+	let experientialPrevious: 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 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;
+		}
+	}
+
+	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,6 +140,8 @@
 		<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}

package/src/lib/createTutorialLoad.js

@@ -135,6 +135,7 @@ export function createTutorialLoad({ routeBase, modules, renderMarkdown, enableD
 				totalPages: pages.length,
 				nav,
 				segmentPath: resolved.segmentPath,
+				routeBase,
 			};
 		}