@dominikcz/greg 0.9.27

package/src/lib/MarkdownDocs/BackToTop.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { ArrowUp } from "@lucide/svelte";
+
+    type Props = {
+        /** The scrollable element to watch and scroll to top. */
+        target: HTMLElement | undefined;
+        /** Accessible label for the button. */
+        label?: string;
+    };
+    let { target, label = "Back to top" }: Props = $props();
+
+    let visible = $state(false);
+
+    $effect(() => {
+        const el = target;
+        if (!el) return;
+        const handler = () => {
+            visible = el.scrollTop > 300;
+        };
+        el.addEventListener("scroll", handler, { passive: true });
+        return () => el.removeEventListener("scroll", handler);
+    });
+
+    function scrollToTop() {
+        target?.scrollTo({ top: 0, behavior: "smooth" });
+    }
+</script>
+
+{#if visible}
+    <button
+        class="back-to-top"
+        onclick={scrollToTop}
+        type="button"
+        aria-label={label}
+    >
+        <ArrowUp size={18} strokeWidth={2.25} aria-hidden="true" />
+    </button>
+{/if}
+
+<style lang="scss">
+    .back-to-top {
+        position: fixed;
+        bottom: 2rem;
+        right: 2rem;
+        width: 2.5rem;
+        height: 2.5rem;
+        border-radius: 50%;
+        background: var(--greg-accent);
+        color: #fff;
+        border: none;
+        cursor: pointer;
+        font-size: 1.25rem;
+        line-height: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+        transition:
+            opacity 0.2s,
+            transform 0.2s;
+        z-index: 100;
+
+        &:hover {
+            opacity: 0.85;
+            transform: translateY(-2px);
+        }
+    }
+</style>

package/src/lib/MarkdownDocs/Breadcrumb.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { withBase } from "./common";
+    type BreadcrumbItem = { label: string; link: string };
+
+    type Props = {
+        items: BreadcrumbItem[];
+        navigate: (path: string) => void;
+        /** Root path excluded from display (e.g. '/docs'). */
+        srcDir: string;
+    };
+    let { items, navigate, srcDir }: Props = $props();
+
+    // Skip the docs-root node and only render when there are at least two levels.
+    const display = $derived(items.filter((i) => i.link !== srcDir));
+</script>
+
+{#if display.length > 1}
+    <nav class="breadcrumb" aria-label="Breadcrumb">
+        {#each display as item, i}
+            {#if i > 0}<span class="sep" aria-hidden="true">/</span>{/if}
+            {#if i < display.length - 1}
+                <a
+                    href={withBase(item.link)}
+                    class="crumb"
+                    onclick={(e) => {
+                        e.preventDefault();
+                        navigate(item.link);
+                    }}>{item.label}</a
+                >
+            {:else}
+                <span class="crumb current" aria-current="page"
+                    >{item.label}</span
+                >
+            {/if}
+        {/each}
+    </nav>
+{/if}
+
+<style lang="scss">
+    .breadcrumb {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 0.25rem;
+        font-size: 0.8rem;
+        color: var(--greg-menu-section-color);
+        margin-bottom: 0.75rem;
+    }
+
+    .sep {
+        opacity: 0.45;
+    }
+
+    .crumb {
+        color: var(--greg-menu-section-color);
+        text-decoration: none;
+
+        &:hover {
+            color: var(--greg-accent);
+            text-decoration: underline;
+        }
+
+        &.current {
+            color: var(--greg-color);
+            font-weight: 500;
+        }
+    }
+</style>

package/src/lib/MarkdownDocs/DocsNavigation.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+	import TreeView from "./TreeView.svelte";
+	import { ChevronRight } from "@lucide/svelte";
+	import { handleSectionClick } from "./navigationUtils";
+
+	import type { TreeViewItem } from "./treeViewTypes";
+
+	interface DocsNavigationProps {
+		menu: TreeViewItem[];
+		active: string;
+		srcDir?: string;
+		ariaLabel?: string;
+		navigate: (path: string) => void;
+	}
+	let {
+		menu,
+		active = "",
+		srcDir = "./",
+		ariaLabel = "Menu",
+		navigate,
+	}: DocsNavigationProps = $props();
+
+	// Items to render: root index page excluded; leaves and sections kept in their sorted order
+	let items = $derived(menu.filter((item: any) => item.link !== srcDir));
+
+	let collapsed = $state(new Set<string>());
+
+	function toggleSection(key: string) {
+		const next = new Set(collapsed);
+		if (next.has(key)) next.delete(key);
+		else next.add(key);
+		collapsed = next;
+	}
+</script>
+
+<nav aria-label={ariaLabel}>
+	{#each items as item}
+		{@const isSection = item.children && item.children.length > 0}
+		{@const key = item.link ?? item.label}
+		{@const isCollapsed = collapsed.has(key)}
+		{#if isSection}
+			<div class="nav-section">
+				<div
+					class="nav-section-title"
+					class:active={active === item.link}
+					class:collapsed={isCollapsed}
+					role="button"
+					tabindex="0"
+					onclick={() =>
+						handleSectionClick(item, key, toggleSection, navigate)}
+					onkeydown={(e) =>
+						(e.key === "Enter" || e.key === " ") &&
+						handleSectionClick(item, key, toggleSection, navigate)}
+					aria-expanded={!isCollapsed}
+				>
+					<span
+						class="nav-section-label"
+						class:active={active === item.link}
+					>
+						{item.label}{#if item.badge}<span
+								class="nav-badge {item.badge?.type ?? 'tip'}"
+								>{item.badge?.text}</span
+							>{/if}
+					</span>
+					<span class="nav-section-chevron"><ChevronRight /></span>
+				</div>
+				{#if !isCollapsed}
+					<TreeView tree={item.children} {active} {navigate} />
+				{/if}
+			</div>
+		{:else}
+			<div class="nav-leaf">
+				<TreeView tree={[item]} {active} {navigate} />
+			</div>
+		{/if}
+	{/each}
+</nav>
+
+<style lang="scss">
+	nav {
+		user-select: none;
+		display: flex;
+		flex-flow: column nowrap;
+		gap: 0.25rem;
+	}
+
+	.nav-section {
+		display: flex;
+		flex-flow: column nowrap;
+		gap: 0.1rem;
+		margin-top: 0.75rem;
+
+		&:first-child {
+			margin-top: 0;
+		}
+	}
+
+	.nav-leaf {
+		margin-top: 0.75rem;
+
+		&:first-child {
+			margin-top: 0;
+		}
+	}
+
+	.nav-section-title {
+		display: flex;
+		align-items: center;
+		border-radius: 5px;
+		cursor: pointer;
+
+		&:hover {
+			background-color: var(--greg-menu-hover-background);
+			.nav-section-label {
+				color: var(--greg-color);
+			}
+		}
+	}
+
+	.nav-section-label {
+		flex: 1;
+		font-size: 0.8rem;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		color: var(--greg-menu-section-color);
+		padding: 0.25rem 0 0.25rem 0.5rem;
+		display: block;
+		text-decoration: none;
+
+		&.active {
+			color: var(--greg-accent);
+		}
+	}
+
+	.nav-section-chevron {
+		padding: 0.25rem 0.5rem;
+		color: var(--greg-menu-section-color);
+		display: flex;
+		align-items: center;
+		transition: transform 0.2s ease;
+		transform: rotate(90deg);
+		pointer-events: none;
+
+		.nav-section-title.collapsed & {
+			transform: rotate(0deg);
+		}
+	}
+</style>