@twango/twiki 0.0.0-stage → 0.1.1

package/site/src/lib/components/doc/Sidebar.svelte

@@ -0,0 +1,351 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { tick, untrack } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { prefersReducedMotion } from 'svelte/motion';
+	import BookOpen from '@lucide/svelte/icons/book-open';
+	import FolderCode from '@lucide/svelte/icons/folder-code';
+	import ChevronsUpDown from '@lucide/svelte/icons/chevrons-up-down';
+	import LogOut from '@lucide/svelte/icons/log-out';
+	import LogIn from '@lucide/svelte/icons/log-in';
+	import { siGithub } from 'simple-icons';
+	const publicEdition = $derived(page.data.edition === 'public');
+	import type { NavNode } from '$lib/types';
+	import { isNotebookRoute } from '$lib/notebook-nav';
+	import { authEnabled, site } from '$lib/config';
+	import { ThemeToggle } from '$lib/components/ui';
+	import IconButton from '$lib/components/ui/IconButton.svelte';
+	import NavTree from './NavTree.svelte';
+	import ReaderModeToggle from './ReaderModeToggle.svelte';
+	import AccessLink from './AccessLink.svelte';
+	import FileExplorer from '$lib/components/files/FileExplorer.svelte';
+	import { fileWorkspace } from '$lib/components/files/file-workspace.svelte';
+	import { SearchButton } from '$lib/components/search';
+
+	const { nav }: { nav: NavNode[] } = $props();
+	const workspace = fileWorkspace();
+	const uid = $props.id();
+	const path = $derived(decodeURI(page.url.pathname));
+	const course = $derived(
+		nav.find((node) => node.children.length && path.split('/')[1] === node.segment)
+	);
+	const courseNodes = $derived(
+		(course?.children ?? [])
+			.map((node) => ({
+				...node,
+				title:
+					node.segment === 'README'
+						? 'Overview'
+						: ((
+								{
+									lectures: 'Lectures',
+									homework: 'Homework',
+									exams: 'Exams',
+									projects: 'Projects'
+								} as Record<string, string>
+							)[node.title] ?? node.title)
+			}))
+			.sort((a, b) => Number(b.segment === 'README') - Number(a.segment === 'README'))
+	);
+	let choosing = $state(false);
+	let explorer = $state<'notes' | 'files'>(
+		untrack(() =>
+			page.data.kind === 'file-browser' && !isNotebookRoute(nav, path) ? 'files' : 'notes'
+		)
+	);
+	$effect(() => {
+		explorer = page.data.kind === 'file-browser' && !isNotebookRoute(nav, path) ? 'files' : 'notes';
+	});
+	let query = $state('');
+	let search = $state<HTMLInputElement>();
+	let switcher: HTMLButtonElement;
+	let viewport = $state<HTMLElement>();
+	let expanded = $state<Record<string, boolean>>({});
+	function semester(node: NavNode) {
+		const match = /^(sp|su|fa|wi)(\d{2})-/.exec(node.segment);
+		return match
+			? `${{ sp: 'Spring', su: 'Summer', fa: 'Fall', wi: 'Winter' }[match[1]]} 20${match[2]}`
+			: 'Other';
+	}
+	function label(node: NavNode) {
+		return node.segment
+			.replace(/^(sp|su|fa|wi)\d{2}-/, '')
+			.replace(/([a-z])(\d)/, '$1 $2')
+			.toUpperCase();
+	}
+	function landing(node: NavNode) {
+		return node.children.find((child) => child.segment === 'README')?.route ?? node.route ?? '/';
+	}
+	function semesterOrder(node: NavNode) {
+		const match = /^(sp|su|fa|wi)(\d{2})-/.exec(node.segment);
+		return match ? Number(match[2]) * 10 + ['wi', 'sp', 'su', 'fa'].indexOf(match[1]) : -1;
+	}
+	const groups = $derived.by(() => {
+		const result = new Map<string, NavNode[]>();
+		for (const node of [...nav].sort(
+			(a, b) =>
+				semesterOrder(b) - semesterOrder(a) ||
+				label(a).localeCompare(label(b), undefined, { numeric: true })
+		)) {
+			if (
+				!node.children.length ||
+				!`${label(node)} ${semester(node)} ${node.title}`
+					.toLowerCase()
+					.includes(query.toLowerCase().trim())
+			)
+				continue;
+			const group = semester(node);
+			result.set(group, [...(result.get(group) ?? []), node]);
+		}
+		return [...result];
+	});
+	async function toggleCourses() {
+		choosing = !choosing;
+		query = '';
+		if (choosing) {
+			await tick();
+			search?.focus();
+		}
+	}
+	$effect(() => {
+		const current = path;
+		untrack(() => {
+			choosing = false;
+			query = '';
+			const next = { ...expanded };
+			function reveal(nodes: NavNode[]): boolean {
+				let found = false;
+				for (const node of nodes) {
+					const childActive = reveal(node.children);
+					if (childActive && node.route) next[node.route] = true;
+					if (childActive || node.route === current) found = true;
+				}
+				return found;
+			}
+			reveal(nav);
+			expanded = next;
+		});
+	});
+	$effect(() => {
+		path;
+		if (!viewport || explorer !== 'notes') return;
+		const timer = setTimeout(() => {
+			const link = viewport?.querySelector<HTMLElement>('[aria-current="page"]');
+			if (!link || !viewport || !link.getClientRects().length) return;
+			const bounds = viewport.getBoundingClientRect(),
+				row = link.getBoundingClientRect();
+			if (row.top < bounds.top || row.bottom > bounds.bottom)
+				viewport.scrollTo({
+					top:
+						viewport.scrollTop + row.top - bounds.top - viewport.clientHeight / 2 + row.height / 2,
+					behavior: prefersReducedMotion.current ? 'instant' : 'smooth'
+				});
+		}, 200);
+		return () => clearTimeout(timer);
+	});
+</script>
+
+<div class="doc-sidebar-content flex h-full min-h-0 flex-col gap-3">
+	<a class="text-[1.05rem] font-bold tracking-[-0.01em] text-text no-underline" href="/"
+		>{site.name}</a
+	>
+	<SearchButton />
+	<button
+		class="course-switcher"
+		bind:this={switcher}
+		aria-expanded={choosing || !course}
+		aria-controls={`${uid}-courses`}
+		onclick={toggleCourses}
+	>
+		<span
+			><small>{course ? semester(course) : 'Workspace'}</small><strong
+				>{course ? label(course) : 'Browse courses'}</strong
+			></span
+		>
+		<ChevronsUpDown size={15} />
+	</button>
+	{#if course && !choosing}
+		<div
+			class="inline-flex shrink-0 self-start gap-0.5 rounded-full bg-surface p-0.5"
+			role="group"
+			aria-label="Explorer view"
+		>
+			{#each ['notes', 'files'] as view}
+				<button
+					class="flex cursor-pointer items-center gap-1.5 rounded-full px-2.5 py-1 text-[0.6875rem] leading-4 text-muted aria-pressed:bg-bg aria-pressed:text-text"
+					aria-pressed={explorer === view}
+					aria-controls={`${uid}-courses`}
+					onclick={() => (explorer = view as 'notes' | 'files')}
+				>
+					{#if view === 'notes'}<BookOpen size={12} />Notes{:else}<FolderCode size={12} />Files{/if}
+				</button>
+			{/each}
+		</div>
+	{/if}
+	<nav
+		id={`${uid}-courses`}
+		class="course-navigation min-h-0 flex-1 overflow-y-auto"
+		aria-label="Documentation"
+		bind:this={viewport}
+	>
+		{#if choosing || !course}
+			<div>
+				<input
+					bind:this={search}
+					bind:value={query}
+					aria-label="Find a course"
+					placeholder="Find a course…"
+					onkeydown={(event) => {
+						if (event.key === 'Escape') {
+							choosing = false;
+							query = '';
+							switcher.focus();
+						}
+					}}
+				/>
+				{#each groups as [name, courses]}
+					<p class="group-label">{name}</p>
+					{#each courses as item}
+						<a
+							class="course-option"
+							href={landing(item)}
+							onclick={() => (choosing = false)}
+							aria-current={item === course ? 'true' : undefined}>{label(item)}</a
+						>
+					{/each}
+				{/each}
+				{#if !groups.length}<p class="empty">No courses match “{query}”.</p>{/if}
+				<div class="workspace-links">
+					<a class="course-option" href="/">Workspace home</a>
+					{#each nav.filter((node) => !node.children.length && node.route) as node}<a
+							class="course-option"
+							href={node.route}>{node.title}</a
+						>{/each}
+				</div>
+			</div>
+		{:else}
+			{#key course.segment}
+				{#if explorer === 'notes'}
+					<div in:fade={{ duration: prefersReducedMotion.current ? 0 : 120 }}>
+						<NavTree nodes={courseNodes} bind:expanded />
+					</div>
+				{:else}
+					<FileExplorer course={course.segment} />
+				{/if}
+			{/key}
+		{/if}
+	</nav>
+	<div class="flex shrink-0 items-center justify-between border-t border-border pt-3">
+		<a
+			href="https://github.com/twangodev/twiki"
+			target="_blank"
+			rel="noopener noreferrer"
+			aria-label="Source on GitHub"
+			title="Source on GitHub"
+			class="inline-flex size-9 items-center justify-center rounded-lg text-muted hover:bg-surface hover:text-text"
+		>
+			<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+				<path d={siGithub.path} />
+			</svg>
+		</a>
+		<ThemeToggle /><ReaderModeToggle />
+		{#if authEnabled}
+			<AccessLink />
+			{#if publicEdition}
+				<a
+					href={`/login?next=${encodeURIComponent(page.url.pathname)}`}
+					data-sveltekit-reload
+					aria-label="Sign in"
+					title="Sign in"
+					class="inline-flex size-9 items-center justify-center rounded-lg text-muted hover:bg-surface hover:text-text"
+					><LogIn size={16} /></a
+				>
+			{:else}
+				<form method="post" action="/logout" onsubmit={() => workspace.clear()}>
+					<IconButton type="submit" aria-label="Sign out" title="Sign out"
+						><LogOut size={16} /></IconButton
+					>
+				</form>
+			{/if}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.course-switcher {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		text-align: left;
+		padding: 0.5rem;
+		border: 1px solid var(--color-border);
+		border-radius: 0.375rem;
+		cursor: pointer;
+		color: var(--color-text);
+	}
+	.course-switcher small,
+	.course-switcher strong {
+		display: block;
+	}
+	.course-switcher small {
+		font-size: 0.625rem;
+		color: var(--color-muted);
+		margin-bottom: 0.125rem;
+	}
+	.course-switcher strong {
+		font-size: 0.8125rem;
+		font-weight: 600;
+	}
+	.course-navigation {
+		scrollbar-width: thin;
+		overflow-anchor: none;
+		overscroll-behavior: contain;
+	}
+	input {
+		width: 100%;
+		padding: 0.5rem;
+		font-size: 0.8125rem;
+		border: 1px solid var(--color-border);
+		border-radius: 0.25rem;
+		background: var(--color-bg);
+	}
+	.group-label {
+		margin: 1rem 0 0.25rem;
+		padding-inline: 0.5rem;
+		font-size: 0.625rem;
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		color: var(--color-muted);
+	}
+	.course-option {
+		display: block;
+		padding: 0.375rem 0.5rem;
+		color: var(--color-text);
+		font-size: 0.8125rem;
+		text-decoration: none;
+		border-radius: 0.25rem;
+	}
+	.course-option:hover,
+	.course-switcher:hover {
+		background: var(--color-surface);
+	}
+	.course-option[aria-current] {
+		color: var(--color-accent);
+	}
+	.workspace-links {
+		border-top: 1px solid var(--color-border);
+		margin-top: 1rem;
+		padding-top: 0.5rem;
+	}
+	.empty {
+		font-size: 0.8125rem;
+		color: var(--color-muted);
+		padding: 0.5rem;
+	}
+	button:focus-visible,
+	a:focus-visible,
+	input:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: -1px;
+	}
+</style>

package/site/src/lib/components/doc/Toc.svelte

@@ -0,0 +1,339 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { untrack } from 'svelte';
+	import { Spring, prefersReducedMotion } from 'svelte/motion';
+	import { slide } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+	import type { TocEntry } from '$lib/types';
+
+	const uid = $props.id();
+	const { active }: { active: string } = $props();
+	const items = $derived((page.data.toc as TocEntry[] | undefined) ?? []);
+	type Node = TocEntry & { children: Node[]; ancestors: string[] };
+	const tree = $derived.by(() => {
+		const roots: Node[] = [],
+			parents: Node[] = [];
+		for (const item of items) {
+			while (parents.length && parents[parents.length - 1].level >= item.level) parents.pop();
+			const node: Node = { ...item, children: [], ancestors: parents.map((p) => p.id) };
+			(parents.at(-1)?.children ?? roots).push(node);
+			parents.push(node);
+		}
+		return roots;
+	});
+	const nodes = $derived.by(() => {
+		const result = new Map<string, Node>();
+		function visit(branch: Node[]) {
+			for (const node of branch) {
+				result.set(node.id, node);
+				visit(node.children);
+			}
+		}
+		visit(tree);
+		return result;
+	});
+	let focused = $state('');
+	let overrides = $state<Record<string, boolean>>({});
+	let expandAll = $state(false);
+	let list = $state<HTMLDivElement>();
+	let markerVisible = $state(false);
+	const marker = new Spring({ y: 0, height: 0 }, { stiffness: 0.2, damping: 0.85 });
+	const documentRoot = $derived(tree.length === 1 && tree[0].level === 1 ? tree[0].id : '');
+	function isOpen(node: Node): boolean {
+		if (nodes.get(focused)?.ancestors.includes(node.id)) return true;
+		return (
+			expandAll ||
+			(overrides[node.id] ??
+				Boolean(
+					node.id === documentRoot ||
+					nodes.get(active)?.ancestors.includes(node.id) ||
+					active === node.id
+				))
+		);
+	}
+	function measureMarker() {
+		const link = Array.from(
+			list?.querySelectorAll<HTMLAnchorElement>('a[aria-current="location"]') ?? []
+		).find((link) => link.getAttribute('href') === `#${encodeURIComponent(active)}`);
+		markerVisible = Boolean(link && link.getClientRects().length);
+		if (!link || !markerVisible || !list) return;
+		const box = link.getBoundingClientRect();
+		void marker.set(
+			{ y: box.top - list.getBoundingClientRect().top, height: box.height },
+			{ instant: prefersReducedMotion.current }
+		);
+	}
+	function followActive() {
+		const viewport = list?.closest<HTMLElement>('.doc-toc');
+		const link = Array.from(
+			list?.querySelectorAll<HTMLAnchorElement>('a[aria-current="location"]') ?? []
+		).find((link) => link.getAttribute('href') === `#${encodeURIComponent(active)}`);
+		if (!link?.getClientRects().length) return;
+		if (viewport && viewport.clientHeight < viewport.scrollHeight) {
+			const box = link.getBoundingClientRect();
+			const bounds = viewport.getBoundingClientRect();
+			const headerHeight =
+				viewport.querySelector('.toc-header')?.getBoundingClientRect().height ?? 0;
+			const top = bounds.top + headerHeight + 24;
+			const bottom = bounds.bottom - 12;
+			// Leave room for nearby headings instead of riding the viewport edge.
+			const cushion = Math.min(48, Math.max(0, (bottom - top - box.height) / 4));
+			const delta =
+				box.top < top
+					? box.top - top - cushion
+					: box.bottom > bottom
+						? box.bottom - bottom + cushion
+						: 0;
+			if (Math.abs(delta) > 1)
+				viewport.scrollTo({
+					top: viewport.scrollTop + delta,
+					behavior: prefersReducedMotion.current ? 'instant' : 'smooth'
+				});
+		}
+	}
+	$effect(() => {
+		items;
+		untrack(() => {
+			overrides = {};
+			expandAll = false;
+			focused = '';
+		});
+	});
+	$effect(() => {
+		active;
+		expandAll;
+		overrides;
+		focused;
+		if (!list) return;
+		let followTimer: ReturnType<typeof setTimeout>;
+		function measure() {
+			measureMarker();
+			// Branch slides resize on every frame. Follow once they settle, rather
+			// than repeatedly restarting a scroll against a moving target.
+			clearTimeout(followTimer);
+			followTimer = setTimeout(followActive, prefersReducedMotion.current ? 0 : 80);
+		}
+		const frame = requestAnimationFrame(measure);
+		const observer = new ResizeObserver(measure);
+		observer.observe(list);
+		const viewport = list.closest('.doc-toc');
+		if (viewport) observer.observe(viewport);
+		return () => {
+			cancelAnimationFrame(frame);
+			clearTimeout(followTimer);
+			observer.disconnect();
+		};
+	});
+</script>
+
+{#snippet branches(branch: Node[], depth = 0)}
+	<ul class="toc-branches" class:nested={depth > 0 && depth <= 2}>
+		{#each branch as item (item.id)}
+			<li>
+				{#if depth > 2 && branch[0] === item}
+					<div class="parent-context">↳ {nodes.get(item.ancestors.at(-1) ?? '')?.text}</div>
+				{/if}
+				<div class="toc-row">
+					{#if item.children.length}
+						<button
+							class="branch-toggle"
+							aria-label={`Toggle ${item.text} sections`}
+							aria-expanded={isOpen(item)}
+							aria-controls={`${uid}-${item.id}`}
+							onfocus={() => (focused = item.id)}
+							onblur={() => (focused = '')}
+							onclick={() => {
+								overrides = { ...overrides, [item.id]: !isOpen(item) };
+								expandAll = false;
+							}}
+						>
+							<svg
+								class:open={isOpen(item)}
+								width="12"
+								height="12"
+								viewBox="0 0 16 16"
+								aria-hidden="true"><path d="m6 4 4 4-4 4" /></svg
+							>
+						</button>
+					{:else}<span class="leaf-spacer"></span>{/if}
+					<a
+						class:parent={item.children.length > 0}
+						href={`#${encodeURIComponent(item.id)}`}
+						aria-current={active === item.id ? 'location' : undefined}
+						onfocus={() => (focused = item.id)}
+						onblur={() => (focused = '')}>{item.text}</a
+					>
+				</div>
+				<div id={`${uid}-${item.id}`}>
+					{#if item.children.length && isOpen(item)}
+						<div
+							onoutrostart={(event) => {
+								// Outgoing Svelte blocks retain their old attributes until the slide ends.
+								// Remove their stale current marker and keyboard/accessibility targets now.
+								event.currentTarget.inert = true;
+								event.currentTarget
+									.querySelectorAll('[aria-current]')
+									.forEach((link) => link.removeAttribute('aria-current'));
+							}}
+							onintrostart={(event) => {
+								event.currentTarget.inert = false;
+							}}
+							transition:slide={{
+								duration: prefersReducedMotion.current ? 0 : 180,
+								easing: cubicOut
+							}}
+						>
+							{@render branches(item.children, depth + (item.id === documentRoot ? 0 : 1))}
+						</div>
+					{/if}
+				</div>
+			</li>
+		{/each}
+	</ul>
+{/snippet}
+
+{#if items.length > 0}
+	<nav aria-label="On this page">
+		<div class="toc-header">
+			<p>On this page</p>
+			{#if items.some((item) => nodes.get(item.id)?.children.length)}
+				<button
+					class="mode-toggle"
+					onclick={() => {
+						expandAll = !expandAll;
+						overrides = {};
+					}}>{expandAll ? 'Focus' : 'Expand all'}</button
+				>
+			{/if}
+		</div>
+		<div class="toc-list" bind:this={list}>
+			<span
+				class="position-marker"
+				aria-hidden="true"
+				style:opacity={markerVisible ? 1 : 0}
+				style:transform={`translateY(${marker.current.y}px)`}
+				style:height={`${marker.current.height}px`}
+			></span>
+			{@render branches(tree)}
+		</div>
+	</nav>
+{/if}
+
+<style>
+	nav {
+		font-size: 0.8125rem;
+	}
+	.toc-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		margin-bottom: 0.375rem;
+	}
+	p {
+		margin: 0;
+		font-size: 0.7rem;
+		font-weight: 700;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: var(--color-muted);
+	}
+	button {
+		color: var(--color-muted);
+		cursor: pointer;
+		border-radius: 0.25rem;
+	}
+	.mode-toggle {
+		font-size: 0.6875rem;
+		padding: 0.25rem;
+	}
+	.toc-list {
+		position: relative;
+		padding-left: 0.25rem;
+	}
+	.position-marker {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 2px;
+		border-radius: 2px;
+		background: var(--color-accent);
+		pointer-events: none;
+	}
+	.toc-branches {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+	.toc-branches.nested {
+		margin-left: 0.5rem;
+		padding-left: 0.5rem;
+		border-left: 1px solid var(--color-border);
+	}
+	.toc-row {
+		display: flex;
+		align-items: flex-start;
+	}
+	.branch-toggle,
+	.leaf-spacer {
+		flex: 0 0 1rem;
+		width: 1rem;
+		height: 1.625rem;
+		display: grid;
+		place-items: center;
+	}
+	svg {
+		fill: none;
+		stroke: currentColor;
+		stroke-width: 1.5;
+		transition: transform 180ms;
+	}
+	svg.open {
+		transform: rotate(90deg);
+	}
+	a {
+		display: block;
+		min-width: 0;
+		flex: 1;
+		border-radius: 0.25rem;
+		padding: 0.25rem;
+		color: var(--color-muted);
+		line-height: 1.4;
+		overflow-wrap: anywhere;
+		text-decoration: none;
+		transition:
+			color 120ms,
+			background-color 120ms;
+	}
+	a.parent {
+		font-weight: 500;
+		color: var(--color-text);
+	}
+	a[aria-current],
+	a:hover,
+	button:hover {
+		color: var(--color-accent);
+	}
+	a[aria-current] {
+		background: var(--color-surface);
+	}
+	a:focus-visible,
+	button:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 1px;
+	}
+	.parent-context {
+		padding: 0.25rem 0.25rem 0 1.25rem;
+		font-size: 0.625rem;
+		color: var(--color-muted);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		svg,
+		a {
+			transition: none;
+		}
+	}
+</style>