@twango/twiki 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import type { NavNode } from '$lib/types';
+	import Self from './NavTree.svelte';
+	import { page } from '$app/state';
+	import { slide } from 'svelte/transition';
+	import { prefersReducedMotion } from 'svelte/motion';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import LockKeyhole from '@lucide/svelte/icons/lock-keyhole';
+	let {
+		nodes,
+		depth = 0,
+		expanded = $bindable({})
+	}: {
+		nodes: NavNode[];
+		depth?: number;
+		expanded?: Record<string, boolean>;
+	} = $props();
+	const uid = $props.id();
+	const currentPath = $derived(decodeURI(page.url.pathname).replace(/\/$/, '') || '/');
+	function key(node: NavNode) {
+		return node.route ?? `${depth}-${node.segment}`;
+	}
+	function active(node: NavNode): boolean {
+		return node.route === currentPath;
+	}
+	function containsActive(node: NavNode): boolean {
+		return active(node) || node.children.some(containsActive);
+	}
+	function open(node: NavNode) {
+		return expanded[key(node)] ?? containsActive(node);
+	}
+</script>
+
+<ul class:nested={depth > 0}>
+	{#each nodes as node (node.segment)}
+		<li>
+			<div class="row" class:active={active(node)}>
+				{#if node.children.length}
+					<button
+						aria-label={`Toggle ${node.title}`}
+						aria-expanded={open(node)}
+						aria-controls={`${uid}-${node.segment}`}
+						onclick={() => (expanded = { ...expanded, [key(node)]: !open(node) })}
+					>
+						<ChevronRight size={13} class={open(node) ? 'expanded' : ''} />
+					</button>
+				{:else}<span class="spacer"></span>{/if}
+				{#if node.route}
+					<a
+						href={node.route}
+						title={node.title}
+						aria-current={active(node) ? 'page' : undefined}
+						class:section={node.children.length > 0}>{node.title}</a
+					>
+				{:else}<span class="label">{node.title}</span>{/if}
+				{#if node.locked}<LockKeyhole
+						class="mt-2 mr-1 ml-auto size-3 shrink-0 text-muted"
+						aria-label="Locked"
+					/>{/if}
+			</div>
+			<div id={`${uid}-${node.segment}`}>
+				{#if node.children.length && open(node)}
+					<div transition:slide={{ duration: prefersReducedMotion.current ? 0 : 150 }}>
+						<Self nodes={node.children} depth={depth + 1} bind:expanded />
+					</div>
+				{/if}
+			</div>
+		</li>
+	{/each}
+</ul>
+
+<style>
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+	ul.nested {
+		margin-left: 0.5rem;
+		padding-left: 0.375rem;
+		border-left: 1px solid var(--color-border);
+	}
+	.row {
+		display: flex;
+		align-items: flex-start;
+		position: relative;
+		border-radius: 0.25rem;
+	}
+	.row.active {
+		background: var(--color-accent-soft, #f7e4e1);
+	}
+	.row.active::before {
+		content: '';
+		position: absolute;
+		inset: 3px auto 3px 0;
+		width: 2px;
+		border-radius: 2px;
+		background: var(--color-accent);
+	}
+	button,
+	.spacer {
+		flex: 0 0 1.125rem;
+		width: 1.125rem;
+		height: 1.875rem;
+		display: grid;
+		place-items: center;
+	}
+	button {
+		cursor: pointer;
+		color: var(--color-muted);
+	}
+	button :global(svg) {
+		transition: transform 150ms;
+	}
+	button :global(.expanded) {
+		transform: rotate(90deg);
+	}
+	a,
+	.label {
+		padding: 0.375rem 0.25rem;
+		font-size: 0.8125rem;
+		line-height: 1.4;
+		color: var(--color-muted);
+		text-decoration: none;
+		overflow-wrap: anywhere;
+		min-width: 0;
+		flex: 1;
+	}
+	a {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+	a.section {
+		font-weight: 500;
+		color: var(--color-text);
+	}
+	a[aria-current] {
+		color: var(--color-accent);
+		font-weight: 500;
+	}
+	.row:hover {
+		background: var(--color-surface);
+	}
+	a:focus-visible,
+	button:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: -1px;
+		border-radius: 3px;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		button :global(svg) {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import Copy from '@lucide/svelte/icons/copy';
+	import FileText from '@lucide/svelte/icons/file-text';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import Printer from '@lucide/svelte/icons/printer';
+	import { Popover } from 'bits-ui';
+	import { textExportUrl } from '$lib/text-exports';
+	import { prepareDiagramsForPrint } from '$lib/components/embeds/mermaid';
+
+	let { slug }: { slug: string } = $props();
+	let open = $state(false);
+	let status = $state('');
+	let busy = $state(false);
+	let markdown = $state<string>();
+	let loading = $state(false);
+	let printing = $state(false);
+
+	async function printNote(event: MouseEvent) {
+		const article = (event.currentTarget as HTMLElement).closest('article');
+		if (!article || printing) return;
+		printing = true;
+		try {
+			await Promise.all([
+				document.fonts.ready,
+				prepareDiagramsForPrint(article),
+				...Array.from(article.querySelectorAll('img'), async (image) => {
+					image.loading = 'eager';
+					await image.decode().catch(() => {});
+				})
+			]);
+			if (article.isConnected) window.print();
+		} finally {
+			printing = false;
+		}
+	}
+	const actionClass =
+		'flex w-full items-center gap-2 rounded px-2.5 py-2 text-left text-sm text-text no-underline hover:bg-surface focus-visible:outline-2 focus-visible:outline-accent disabled:opacity-50';
+
+	// Fetch while the menu is opening so clipboard writes start directly from
+	// the click, without a network await consuming browser user activation.
+	async function prepareMarkdown() {
+		if (markdown !== undefined || loading) return;
+		loading = true;
+		try {
+			const response = await fetch(textExportUrl(slug));
+			if (
+				!response.ok ||
+				response.redirected ||
+				response.headers.get('content-type')?.includes('text/html')
+			)
+				throw new Error('Text export unavailable');
+			markdown = await response.text();
+			status = '';
+		} catch {
+			status = 'Could not load Markdown. Use the text links below.';
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function copy() {
+		if (markdown === undefined || busy) return;
+		busy = true;
+		status = '';
+		try {
+			await navigator.clipboard.writeText(markdown);
+			status = 'Markdown copied.';
+		} catch {
+			status = 'Could not copy. Open Markdown below to copy manually.';
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+<div class="note-actions not-prose mb-5 flex flex-wrap items-center gap-2" data-pagefind-ignore>
+	<button
+		type="button"
+		class="inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs text-muted hover:bg-surface hover:text-text focus-visible:outline-2 focus-visible:outline-accent"
+		title="Print this note or save it as a PDF"
+		disabled={printing}
+		onclick={printNote}
+	>
+		<Printer class="size-3.5" aria-hidden="true" />{printing ? 'Preparing…' : 'Print / PDF'}
+	</button>
+	<Popover.Root
+		bind:open
+		onOpenChange={(value) => {
+			if (value) void prepareMarkdown();
+		}}
+	>
+		<Popover.Trigger
+			openOnHover
+			openDelay={150}
+			closeDelay={250}
+			class="inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs text-muted hover:bg-surface hover:text-text focus-visible:outline-2 focus-visible:outline-accent"
+		>
+			<Copy class="size-3.5" aria-hidden="true" />Use this note<ChevronDown
+				class="size-3"
+				aria-hidden="true"
+			/>
+		</Popover.Trigger>
+		<Popover.Portal>
+			<Popover.Content
+				role="dialog"
+				aria-label="Note actions"
+				side="bottom"
+				align="start"
+				sideOffset={4}
+				collisionPadding={12}
+				class="not-prose z-50 w-64 max-w-[calc(100vw-1.5rem)] rounded-lg border border-border bg-bg p-1 text-text shadow-md"
+			>
+				<button class={actionClass} disabled={busy || markdown === undefined} onclick={() => copy()}
+					><Copy class="size-4" aria-hidden="true" />Copy Markdown</button
+				>
+				<div class="my-1 border-t border-border"></div>
+				<a
+					class={actionClass}
+					href={textExportUrl(slug)}
+					data-sveltekit-reload
+					data-no-popover="true"
+					><FileText class="size-4" aria-hidden="true" />View Markdown
+					<span class="ml-auto text-xs text-muted">.md</span></a
+				>
+				<a
+					class={actionClass}
+					href={textExportUrl(slug, 'txt')}
+					data-sveltekit-reload
+					data-no-popover="true"
+					><FileText class="size-4" aria-hidden="true" />View text
+					<span class="ml-auto text-xs text-muted">.txt</span></a
+				>
+				<p class="m-0 px-2.5 text-xs text-muted" role="status">
+					{loading ? 'Loading Markdown…' : status}
+				</p>
+			</Popover.Content>
+		</Popover.Portal>
+	</Popover.Root>
+</div>

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

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import Globe from '@lucide/svelte/icons/globe';
+	import Lock from '@lucide/svelte/icons/lock';
+	import { Tooltip } from 'bits-ui';
+	import { onMount } from 'svelte';
+	import type { PagePublication } from '$lib/types';
+
+	const { publication }: { publication: PagePublication } = $props();
+	let ready = $state(false);
+	onMount(() => {
+		ready = true;
+	});
+	const label = $derived(publication.public ? 'Public' : 'Private');
+	const description = $derived(
+		publication.reason ??
+			(publication.public ? 'Available to everyone.' : 'Only available to approved users.')
+	);
+</script>
+
+<Tooltip.Provider delayDuration={200}>
+	<Tooltip.Root>
+		<Tooltip.Trigger
+			class={[
+				'inline-flex cursor-help items-center gap-1 rounded-full border-0 bg-surface px-2 py-0.5 text-[0.6875rem] leading-4 font-medium ring-1 ring-inset ring-border focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+				publication.public && 'text-accent'
+			]}
+			aria-label={`Page visibility: ${label}`}
+			disabled={!ready}
+		>
+			{#if publication.public}<Globe size={12} aria-hidden="true" />{:else}<Lock
+					size={12}
+					aria-hidden="true"
+				/>{/if}
+			{label}
+		</Tooltip.Trigger>
+		<Tooltip.Portal>
+			<Tooltip.Content
+				role="tooltip"
+				side="bottom"
+				align="end"
+				sideOffset={6}
+				collisionPadding={12}
+				class="z-50 max-w-[min(22rem,calc(100vw-1.5rem))] rounded-md border border-border bg-surface px-3 py-2 text-xs break-words text-text shadow-sm"
+			>
+				{description}
+			</Tooltip.Content>
+		</Tooltip.Portal>
+	</Tooltip.Root>
+</Tooltip.Provider>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import BookOpen from '@lucide/svelte/icons/book-open';
+	import IconButton from '../ui/IconButton.svelte';
+	import type { ClassValue } from 'svelte/elements';
+	import { readerMode } from './reader-mode.svelte';
+
+	let { class: className }: { class?: ClassValue } = $props();
+</script>
+
+<IconButton
+	onclick={() => readerMode.toggle()}
+	aria-label="Toggle reader mode"
+	aria-pressed={readerMode.enabled}
+	title="Toggle reader mode"
+	active={readerMode.enabled}
+	class={className}
+>
+	<BookOpen class="size-4" />
+</IconButton>