@twango/twiki 0.0.0-stage → 0.1.1

package/site/src/lib/components/files/FileCode.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { FileBlame } from '$lib/file-history';
+	import type { createCodeView } from './code-view';
+	let {
+		text,
+		url,
+		filename,
+		onready,
+		onload,
+		blame,
+		oncommit = () => {}
+	}: {
+		text?: string;
+		url?: string;
+		filename: string;
+		onready?: (viewport: HTMLElement) => void;
+		onload?: (text: string) => void;
+		blame?: FileBlame;
+		oncommit?: (id: string) => void;
+	} = $props();
+	let editor = $state.raw<ReturnType<typeof createCodeView>>();
+	let host: HTMLDivElement;
+	let failed = $state(false);
+	let loading = $state(true);
+	let attempt = $state(0);
+	$effect(() => {
+		editor?.setBlame(blame, oncommit);
+	});
+	$effect(() => {
+		const source = text,
+			asset = url,
+			name = filename;
+		attempt;
+		const controller = new AbortController();
+		let created: ReturnType<typeof createCodeView> | undefined;
+		failed = false;
+		loading = true;
+		const read = async () => {
+			if (source !== undefined) return source;
+			if (!asset) throw new Error('File unavailable');
+			const response = await fetch(asset, { signal: controller.signal });
+			if (!response.ok) throw new Error('File unavailable');
+			return response.text();
+		};
+		void Promise.all([import('./code-view'), read()])
+			.then(([{ createCodeView }, content]) => {
+				if (controller.signal.aborted) return;
+				onload?.(content);
+				created = createCodeView(host, content, name);
+				editor = created;
+				loading = false;
+				created.view.requestMeasure({
+					read: () => null,
+					write: () => {
+						if (!controller.signal.aborted && created) onready?.(created.view.scrollDOM);
+					}
+				});
+			})
+			.catch(() => {
+				if (!controller.signal.aborted) {
+					failed = true;
+					loading = false;
+				}
+			});
+		return () => {
+			controller.abort();
+			created?.destroy();
+			editor = undefined;
+		};
+	});
+</script>
+
+<div class="relative h-full min-w-0">
+	{#if failed}<p class="absolute inset-x-0 top-0 p-3 text-xs text-muted" role="alert">
+			Could not load the file. <button class="text-accent" onclick={() => attempt++}>Retry</button>
+		</p>
+	{:else if loading}<p class="absolute inset-x-0 top-0 p-3 text-xs text-muted" role="status">
+			Loading file…
+		</p>{/if}
+	<div class="file-code h-full min-w-0" bind:this={host}></div>
+</div>

package/site/src/lib/components/files/FileExplorer.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { tick } from 'svelte';
+	import { fileIndexUrl, fileRoute, fileTree, type CourseFile } from '$lib/files';
+	import FileTree from './FileTree.svelte';
+
+	const { course }: { course: string } = $props();
+	let viewport = $state<HTMLDivElement>();
+	let files = $state<CourseFile[]>();
+	let failed = $state(false);
+	let attempt = $state(0);
+	const browsing = $derived(page.data.kind === 'file-browser');
+	const current = $derived(browsing ? (page.params.file ?? '') : '');
+	const focus = $derived(
+		browsing
+			? current
+			: (files?.find((file) => file.note === decodeURI(page.url.pathname))?.path ?? '')
+	);
+	const tree = $derived(fileTree(files ?? []));
+
+	$effect(() => {
+		current;
+		files;
+		if (!viewport) return;
+		let cancelled = false;
+		void tick().then(() => {
+			if (cancelled || !viewport) return;
+			const active = viewport.querySelector<HTMLElement>('[aria-current="page"]');
+			if (!active) return;
+			const bounds = viewport.getBoundingClientRect();
+			const row = active.getBoundingClientRect();
+			if (row.top < bounds.top) viewport.scrollTop += row.top - bounds.top;
+			else if (row.bottom > bounds.bottom) viewport.scrollTop += row.bottom - bounds.bottom;
+		});
+		return () => {
+			cancelled = true;
+		};
+	});
+	$effect(() => {
+		attempt;
+		const controller = new AbortController();
+		failed = false;
+		fetch(fileIndexUrl(course), { signal: controller.signal })
+			.then(async (response) => {
+				if (!response.ok) throw new Error('Files unavailable');
+				const result: CourseFile[] = await response.json();
+				if (!controller.signal.aborted) files = result;
+			})
+			.catch(() => {
+				if (!controller.signal.aborted) failed = true;
+			});
+		return () => controller.abort();
+	});
+</script>
+
+<section class="flex h-full min-h-0 flex-col" aria-label="Course files" data-pagefind-ignore>
+	<div
+		bind:this={viewport}
+		class="min-h-0 flex-1 overflow-y-auto overscroll-contain [scrollbar-width:thin]"
+	>
+		{#if failed}
+			<p class="px-2 py-2 text-xs text-muted">
+				Couldn’t load files. <button class="cursor-pointer text-accent" onclick={() => attempt++}
+					>Retry</button
+				>
+			</p>
+		{:else if files}
+			<a class="mb-1 block px-2 py-1 text-xs text-muted hover:text-accent" href={fileRoute(course)}
+				>Browse directory <span class="float-right">{files.length} files</span></a
+			>
+			<FileTree nodes={tree} {course} {current} {focus} />
+		{:else}<p class="px-2 py-2 text-xs text-muted" role="status">Loading files…</p>{/if}
+	</div>
+</section>

package/site/src/lib/components/files/FileHistory.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { prefersReducedMotion } from 'svelte/motion';
+	import X from '@lucide/svelte/icons/x';
+	import type { FileHistory, FileBlame, FileChange } from '$lib/file-history';
+	let {
+		url,
+		open = $bindable(false),
+		blaming = $bindable(false),
+		selected = $bindable(''),
+		onblame,
+		onview
+	}: {
+		url: string;
+		open?: boolean;
+		blaming?: boolean;
+		selected?: string;
+		onblame: (blame: FileBlame | undefined) => void;
+		onview: (text: string, commit: FileChange) => void;
+	} = $props();
+	let history = $state<FileHistory>();
+	let blame = $state<FileBlame>();
+	let error = $state('');
+	let loadingDiff = $state('');
+	let pending: Promise<void> | undefined;
+	const controller = new AbortController();
+	let selection = 0;
+	onDestroy(() => controller.abort());
+	async function load() {
+		if (pending) return pending;
+		pending = (async () => {
+			try {
+				const response = await fetch(url, { signal: controller.signal });
+				if (!response.ok) throw new Error('History unavailable');
+				history = await response.json();
+			} catch {
+				if (!controller.signal.aborted) error = 'Could not load history.';
+			}
+		})();
+		return pending;
+	}
+	$effect(() => {
+		if (open || blaming) void load();
+	});
+	$effect(() => {
+		if (!blaming || !history?.blame) {
+			onblame(undefined);
+			return;
+		}
+		if (blame) {
+			onblame(blame);
+			return;
+		}
+		const request = new AbortController();
+		void fetch(history.blame, { signal: request.signal })
+			.then(async (response) => {
+				if (!response.ok) throw new Error('Blame unavailable');
+				const result: FileBlame = await response.json();
+				if (!request.signal.aborted) blame = result;
+			})
+			.catch(() => {
+				if (!request.signal.aborted) {
+					error = 'Could not load blame.';
+					open = true;
+				}
+			});
+		return () => request.abort();
+	});
+	$effect(() => {
+		if (blaming && history && !history.blame) {
+			blaming = false;
+			open = true;
+		}
+	});
+	async function view(commit: FileChange) {
+		selected = commit.id;
+		const request = ++selection;
+		loadingDiff = '';
+		if (!commit.diff) return;
+		loadingDiff = commit.id;
+		error = '';
+		try {
+			const response = await fetch(commit.diff, { signal: controller.signal });
+			if (!response.ok) throw new Error('Diff unavailable');
+			const text = await response.text();
+			if (request === selection && selected === commit.id && !controller.signal.aborted)
+				onview(text, commit);
+		} catch {
+			if (!controller.signal.aborted && request === selection)
+				error = 'Could not load this change.';
+		} finally {
+			if (request === selection) loadingDiff = '';
+		}
+	}
+</script>
+
+{#if open}
+	<aside
+		aria-label="File history"
+		class="absolute inset-y-0 right-0 z-20 flex w-80 max-w-full shrink-0 flex-col border-l border-border bg-bg md:static"
+		transition:fly={{ x: 8, duration: prefersReducedMotion.current ? 0 : 140 }}
+	>
+		<header class="flex items-center justify-between border-b border-border px-3 py-2 text-xs">
+			<span>History</span><button
+				class="text-muted hover:text-text"
+				aria-label="Close history"
+				onclick={() => (open = false)}><X size={14} /></button
+			>
+		</header>
+		{#if error}<div class="p-3 text-xs text-muted" role="alert">
+				{error}
+				<button
+					class="text-accent"
+					onclick={() => {
+						pending = undefined;
+						error = '';
+						void load();
+					}}>Retry</button
+				>
+			</div>{/if}
+		<div class="min-h-0 flex-1 overflow-y-auto">
+			{#if history}
+				{#if selected && blame?.commits[selected] && !history.commits.some((commit) => commit.id === selected)}
+					<div class="border-b border-border p-3 text-xs">
+						<p>{blame.commits[selected].subject}</p>
+						<p class="mt-1 text-muted">
+							{selected.slice(0, 7)} · This commit is from a merged branch. The list below follows first-parent
+							history.
+						</p>
+					</div>
+				{/if}
+				{#if history.notice}<p class="border-b border-border p-3 text-xs text-muted">
+						{history.notice}
+					</p>{/if}
+				<ol class="m-0 list-none divide-y divide-border p-0">
+					{#each history.commits as commit (commit.id)}
+						<li>
+							<button
+								class="w-full px-3 py-2.5 text-left hover:bg-surface"
+								class:bg-surface={selected === commit.id}
+								aria-pressed={selected === commit.id}
+								onclick={() => view(commit)}
+							>
+								<span class="block break-words text-xs text-text">{commit.subject}</span>
+								<span class="mt-1 block text-[0.6875rem] text-muted"
+									>{commit.author} · {commit.date.slice(0, 10)} ·
+									<span class="font-mono">{commit.id.slice(0, 7)}</span></span
+								>
+								{#if commit.previousPath}<span
+										class="mt-1 block break-all text-[0.6875rem] text-muted"
+										>Renamed from {commit.previousPath}</span
+									>{/if}
+								{#if selected === commit.id && commit.unavailable}<span
+										class="mt-1 block text-xs text-muted">{commit.unavailable}</span
+									>{/if}
+								{#if loadingDiff === commit.id}<span class="block text-xs text-muted" role="status"
+										>Loading changes…</span
+									>{/if}
+							</button>
+						</li>
+					{:else}<li class="p-3 text-xs text-muted">No committed history.</li>{/each}
+				</ol>
+			{:else if !error}<p class="p-3 text-xs text-muted" role="status">Loading history…</p>{/if}
+		</div>
+		{#if history}<footer class="border-t border-border px-3 py-2 text-[0.6875rem] text-muted">
+				First-parent history · {history.revision.slice(0, 7)}
+			</footer>{/if}
+	</aside>
+{/if}

package/site/src/lib/components/files/FileIcon.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	const theme = getContext<() => FileIconTheme>('wisconsin-file-icons');
+	import { selectFileIcon, type FileIconTheme } from '$lib/file-icons';
+	const {
+		name,
+		folder = false,
+		expanded = false
+	}: { name: string; folder?: boolean; expanded?: boolean } = $props();
+	const icon = $derived(selectFileIcon(theme(), name, folder, expanded));
+</script>
+
+<span class="inline-flex size-4 shrink-0" aria-hidden="true" data-file-icon>
+	<img
+		src={`/_files/icons/${icon.light}.svg`}
+		class={icon.light !== icon.dark ? 'size-4 dark:hidden' : 'size-4'}
+		width="16"
+		height="16"
+		alt=""
+	/>
+	{#if icon.light !== icon.dark}<img
+			src={`/_files/icons/${icon.dark}.svg`}
+			class="hidden size-4 dark:block"
+			width="16"
+			height="16"
+			alt=""
+		/>{/if}
+</span>

package/site/src/lib/components/files/FileRmd.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { WebR } from 'webr';
+	import type { CourseFile } from '$lib/files';
+	import { parseRmd, type RmdBlock } from '$lib/rmd';
+	let {
+		url,
+		course,
+		path,
+		files,
+		onload
+	}: {
+		url: string;
+		course: string;
+		path: string;
+		files: CourseFile[];
+		onload: (text: string) => void;
+	} = $props();
+	type Block = RmdBlock & { output?: string; plots?: string[]; done?: boolean };
+	let title = $state('');
+	let blocks = $state<Block[]>([]);
+	let status = $state('Loading worksheet…');
+	let busy = $state(false);
+	let loaded = $state(false);
+	let runtime: WebR | undefined;
+	let runtimeReady = false;
+	let generation = 0;
+	const abort = new AbortController();
+	const button =
+		'rounded border border-border px-3 py-1.5 text-xs hover:bg-surface disabled:opacity-50';
+
+	onMount(() => {
+		void (async () => {
+			try {
+				const response = await fetch(url, { signal: abort.signal });
+				if (!response.ok) throw new Error(`Worksheet unavailable (${response.status})`);
+				const source = await response.text();
+				const parsed = await parseRmd(source, course, path, files);
+				if (abort.signal.aborted) return;
+				onload(source);
+				title = parsed.title;
+				blocks = parsed.blocks;
+				loaded = true;
+				status =
+					'Run chunks in order, or run the whole worksheet. Edits last until you leave this view.';
+			} catch (error) {
+				if (!abort.signal.aborted) status = String(error);
+			}
+		})();
+		return () => {
+			abort.abort();
+			generation++;
+			runtime?.close();
+		};
+	});
+
+	function reset() {
+		generation++;
+		runtime?.close();
+		runtime = undefined;
+		runtimeReady = false;
+		busy = false;
+		for (const block of blocks) {
+			block.output = '';
+			block.plots = [];
+			block.done = false;
+		}
+		status = 'R session reset. Run the worksheet to start again.';
+	}
+
+	async function start(ticket: number) {
+		if (runtime) return runtime;
+		status = 'Loading R… The first run downloads the runtime.';
+		const { WebR, ChannelType } = await import('webr');
+		if (ticket !== generation) throw new Error('Session reset');
+		const r = new WebR({
+			baseUrl: 'https://webr.r-wasm.org/v0.5.8/',
+			channelType: ChannelType.PostMessage
+		});
+		runtime = r;
+		await r.init();
+		await r.evalRVoid('options(max.print=1000)');
+		if (blocks.some((b) => b.kind === 'r' && /\bknitr::/.test(b.code))) {
+			status = 'Loading knitr…';
+			await r.installPackages(['knitr']);
+		}
+		const directory = path.split('/').slice(0, -1).join('/');
+		for (const file of files.filter(
+			(f) =>
+				!f.locked &&
+				f.download &&
+				/\.(csv|tsv|txt|rds|rda|rdata)$/i.test(f.path) &&
+				f.path.split('/').slice(0, -1).join('/') === directory
+		)) {
+			const response = await fetch(file.download!, { signal: abort.signal });
+			if (!response.ok) throw new Error(`Could not load ${file.path} (${response.status})`);
+			await r.FS.writeFile(
+				`/home/web_user/${file.path.split('/').at(-1)}`,
+				new Uint8Array(await response.arrayBuffer())
+			);
+		}
+		runtimeReady = true;
+		return r;
+	}
+
+	async function run(selected?: Block) {
+		if (busy) return;
+		busy = true;
+		const ticket = generation;
+		try {
+			const r = await start(ticket);
+			if (ticket !== generation) return;
+			const shelter = await new r.Shelter();
+			try {
+				for (const block of selected ? [selected] : blocks) {
+					if (ticket !== generation) return;
+					if (block.kind !== 'r' || (!selected && !block.evaluate)) continue;
+					status = `Running ${block.label}…`;
+					block.done = false;
+					block.output = '';
+					block.plots = [];
+					const result = await shelter.captureR(block.code, {
+						withAutoprint: true,
+						captureGraphics: true
+					});
+					try {
+						if (ticket !== generation) return;
+						block.output = result.output
+							.map((o) =>
+								typeof o.data === 'string' ? o.data : (o.data?.message ?? String(o.data))
+							)
+							.join('\n');
+						block.plots = result.images.map((image) => {
+							const canvas = document.createElement('canvas');
+							canvas.width = image.width;
+							canvas.height = image.height;
+							canvas.getContext('2d')!.drawImage(image, 0, 0);
+							return canvas.toDataURL();
+						});
+						block.done = true;
+						if (result.output.some((o) => o.type === 'error'))
+							throw new Error(`${block.label} failed. Fix the code and run it again.`);
+					} finally {
+						result.images.forEach((image) => image.close());
+					}
+					await shelter.purge();
+				}
+				status = 'Finished. R runs locally in your browser.';
+			} finally {
+				if (ticket === generation) await shelter.purge();
+			}
+		} catch (error) {
+			if (ticket === generation) {
+				status = String(error);
+				if (!runtimeReady) {
+					runtime?.close();
+					runtime = undefined;
+				}
+			}
+		} finally {
+			if (ticket === generation) busy = false;
+		}
+	}
+</script>
+
+<div class="h-full overflow-auto p-4 sm:p-6">
+	<div class="mx-auto max-w-3xl">
+		<div class="mb-5 flex flex-wrap gap-2">
+			<button class={button} disabled={!loaded || busy} onclick={() => run()}>Run all</button>
+			<button class={button} disabled={!loaded} onclick={reset}
+				>{busy ? 'Stop and reset' : 'Reset session'}</button
+			>
+		</div>
+		<p class="mb-6 text-sm text-muted" role="status">{status}</p>
+		<h1 class="mb-6 text-2xl font-semibold">{title}</h1>
+		{#each blocks as block, index}
+			{#if block.kind === 'markdown'}
+				<div class="prose max-w-none dark:prose-invert">{@html block.html}</div>
+			{:else}
+				<section class="my-5 min-w-0 rounded border border-border" aria-label={block.label}>
+					<details open={block.show}>
+						<summary class="cursor-pointer px-3 py-2 text-xs text-muted"
+							>{block.label}{!block.evaluate ? ' · skipped by Run all' : ''}</summary
+						>
+						<textarea
+							class="block w-full resize-y bg-surface p-3 font-mono text-sm"
+							aria-label={`R code ${index}`}
+							bind:value={block.code}
+							rows={Math.min(18, Math.max(3, block.code.split('\n').length))}
+							spellcheck="false"
+							disabled={busy}
+						></textarea>
+					</details>
+					<div class="flex items-center gap-3 px-3 py-2">
+						<button class={button} disabled={busy} onclick={() => run(block)}>Run chunk</button>
+						{#if block.done}<span class="text-xs text-muted">Done</span>{/if}
+					</div>
+					{#if block.output}<pre
+							class="max-h-96 overflow-auto border-t border-border p-3 text-xs">{block.output}</pre>{/if}
+					{#each block.plots ?? [] as plot}<img
+							class="w-full bg-white"
+							src={plot}
+							alt={`R plot from ${block.label}`}
+						/>{/each}
+				</section>
+			{/if}
+		{/each}
+	</div>
+</div>