sdocs 0.0.58 → 0.0.60

package/CHANGELOG.md

@@ -7,6 +7,32 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.0.60] - 2026-07-06
+
+### Added
+
+- **The page table of contents highlights the current section.** As the
+  page scrolls, the "On this page" entry for the section in view lights up;
+  clicking an entry highlights it immediately and holds it through the
+  smooth scroll.
+
+## [0.0.59] - 2026-07-05
+
+### Changed
+
+- **Code blocks render on a dark stage.** Highlighted code — page fences and
+  the code panels — always uses the dark syntax theme, so blocks read as
+  code at a glance in both app themes (they previously rendered white-on-white
+  in light mode).
+- **A page's body `#` title matches the entity title size** (24px/700) — it
+  is the page title, after all.
+
+### Fixed
+
+- **Every fence gets a themed block.** `bash`, `json`, `markdown`, `yaml`,
+  and `diff` fences highlight properly, and unknown languages fall back to a
+  plaintext shiki block instead of an unstyled bare `<pre>`.
+
 ## [0.0.58] - 2026-07-05
 
 ### Added

package/dist/explorer/views/PageView.svelte

@@ -37,7 +37,69 @@
 		};
 	});
 
+	// Scrollspy: the TOC highlights the section currently in view. The active
+	// heading is the last one above the threshold line near the viewport top.
+	// The scroll listener is capturing because the scrolling element is an
+	// ancestor container, not the window.
+	const SPY_OFFSET = 120;
+	let activeId = $state('');
+	let spyLockUntil = 0;
+
+	$effect(() => {
+		if (!container || toc.length === 0) return;
+		void PageComponent; // re-run once the page body has mounted
+		const ids = toc.map((h) => h.id);
+		let frame = 0;
+		const update = () => {
+			frame = 0;
+			if (performance.now() < spyLockUntil) return;
+			// At the bottom the last sections can never reach the threshold
+			// line — snap to the final entry so it is reachable at all.
+			let scroller: HTMLElement | null = container ?? null;
+			while (scroller) {
+				const o = getComputedStyle(scroller).overflowY;
+				if (
+					scroller.scrollHeight > scroller.clientHeight + 1 &&
+					(o === 'auto' || o === 'scroll')
+				) {
+					break;
+				}
+				scroller = scroller.parentElement;
+			}
+			const atBottom = scroller
+				? scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 2
+				: window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2;
+			if (atBottom) {
+				activeId = ids[ids.length - 1];
+				return;
+			}
+			let current = ids[0] ?? '';
+			for (const id of ids) {
+				const el = container?.querySelector(`#${CSS.escape(id)}`);
+				if (!el) continue;
+				if (el.getBoundingClientRect().top > SPY_OFFSET) break;
+				current = id;
+			}
+			activeId = current;
+		};
+		const onScroll = () => {
+			if (!frame) frame = requestAnimationFrame(update);
+		};
+		update();
+		document.addEventListener('scroll', onScroll, { capture: true, passive: true });
+		window.addEventListener('resize', onScroll);
+		return () => {
+			document.removeEventListener('scroll', onScroll, { capture: true });
+			window.removeEventListener('resize', onScroll);
+			if (frame) cancelAnimationFrame(frame);
+		};
+	});
+
 	function scrollToHeading(id: string) {
+		// Highlight the target right away and hold it while the smooth scroll
+		// passes intermediate sections.
+		activeId = id;
+		spyLockUntil = performance.now() + 800;
 		container?.querySelector(`#${CSS.escape(id)}`)?.scrollIntoView({ behavior: 'smooth' });
 	}
 
@@ -102,6 +164,8 @@
 							<li class="sdocs-toc-item" style:padding-left="{(heading.level - 2) * 12}px">
 								<button
 									class="sdocs-toc-link"
+									class:is-active={heading.id === activeId}
+									aria-current={heading.id === activeId ? 'true' : undefined}
 									onclick={() => scrollToHeading(heading.id)}
 								>
 									{heading.text}
@@ -162,7 +226,11 @@
 		margin: 1.6em 0 0.5em;
 		scroll-margin-top: 16px;
 	}
-	.sdocs-page-content :global(h1) { font-size: 22px; }
+	/* The body h1 serves as the page title — match .sdocs-view-title */
+	.sdocs-page-content :global(h1) {
+		font-size: 24px;
+		font-weight: 700;
+	}
 	.sdocs-page-content :global(h2) { font-size: 18px; }
 	.sdocs-page-content :global(h3) { font-size: 15px; }
 	.sdocs-page-content :global(h4),
@@ -368,8 +436,10 @@
 		cursor: pointer;
 		text-align: left;
 		width: 100%;
+		transition: color 0.15s;
 	}
-	.sdocs-toc-link:hover {
+	.sdocs-toc-link:hover,
+	.sdocs-toc-link.is-active {
 		color: var(--color-action-500);
 	}
 </style>

package/dist/server/highlighter.d.ts

@@ -1,4 +1,5 @@
-/** Highlight source code and return HTML */
+/** Highlight source code and return HTML. Unknown languages render as
+ * plaintext, so a fence is always a themed shiki block, never a bare pre. */
 export declare function highlight(code: string, lang?: string): Promise<string>;
 /** Dispose the highlighter (for cleanup) */
 export declare function disposeHighlighter(): Promise<void>;

package/dist/server/highlighter.js

@@ -5,16 +5,21 @@ async function getHighlighter() {
     if (!highlighterPromise) {
         highlighterPromise = createHighlighter({
             themes: ['github-light', 'github-dark'],
-            langs: ['svelte', 'typescript', 'javascript', 'css', 'html'],
+            langs: [
+                'svelte', 'typescript', 'javascript', 'css', 'html',
+                'bash', 'json', 'markdown', 'yaml', 'diff',
+            ],
         });
     }
     return highlighterPromise;
 }
-/** Highlight source code and return HTML */
+/** Highlight source code and return HTML. Unknown languages render as
+ * plaintext, so a fence is always a themed shiki block, never a bare pre. */
 export async function highlight(code, lang = 'svelte') {
     const highlighter = await getHighlighter();
+    const resolved = highlighter.getLoadedLanguages().includes(lang) ? lang : 'text';
     return highlighter.codeToHtml(code, {
-        lang,
+        lang: resolved,
         themes: {
             light: 'github-light',
             dark: 'github-dark',

package/dist/ui/styles/sdocs.css

@@ -28,6 +28,15 @@
 	text-decoration: none;
 }
 
+/* Highlighted code blocks always render shiki's dark theme — a dark stage
+ * for code in both app themes (the inline light-theme colors lose to the
+ * dual-theme --shiki-dark variables). */
+.sdocs-app pre.shiki,
+.sdocs-app pre.shiki span {
+	color: var(--shiki-dark) !important;
+	background-color: var(--shiki-dark-bg) !important;
+}
+
 /* Type chips and value literals, color-coded by kind (shared by doc tables) */
 .sdocs-app code[class*='sdocs-type-'] {
 	font-family: var(--mono);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sdocs",
-	"version": "0.0.58",
+	"version": "0.0.60",
 	"description": "A lightweight documentation tool for Svelte 5 components",
 	"type": "module",
 	"license": "MIT",