fix: improve docs example (#4355)

* fix: improve docs example

* final touches

* chore: prettier

* lockfile

* ci?

* downgrade types node

* fresh lockfile

* lockfile and npmrc

* remove debug log

* Merge branch 'main' into docs-template-ts

* merging lockfiles suck

* update lockfile

* satisfy linter

4 files changed, 30 insertions, 14 deletions

diff --git a/examples/docs/src/components/RightSidebar/MoreMenu.astro b/examples/docs/src/components/RightSidebar/MoreMenu.astro
index fd1067859..8fcbfa567 100644
--- a/examples/docs/src/components/RightSidebar/MoreMenu.astro
+++ b/examples/docs/src/components/RightSidebar/MoreMenu.astro
@@ -1,8 +1,13 @@
 ---
 import ThemeToggleButton from './ThemeToggleButton';
 import * as CONFIG from '../../config';
-const { editHref } = Astro.props;
-const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref;
+
+type Props = {
+	editHref: string;
+};
+
+const { editHref } = Astro.props as Props;
+const showMoreSection = CONFIG.COMMUNITY_INVITE_URL;
 ---
 
 {showMoreSection && <h2 class="heading">More</h2>}
diff --git a/examples/docs/src/components/RightSidebar/RightSidebar.astro b/examples/docs/src/components/RightSidebar/RightSidebar.astro
index 6144ed928..d45fbd494 100644
--- a/examples/docs/src/components/RightSidebar/RightSidebar.astro
+++ b/examples/docs/src/components/RightSidebar/RightSidebar.astro
@@ -1,12 +1,19 @@
 ---
 import TableOfContents from './TableOfContents';
 import MoreMenu from './MoreMenu.astro';
-const { headings, githubEditUrl } = Astro.props;
+import type { MarkdownHeading } from 'astro';
+
+type Props = {
+	headings: MarkdownHeading[];
+	githubEditUrl: string;
+};
+
+const { headings, githubEditUrl } = Astro.props as Props;
 ---
 
 <nav class="sidebar-nav" aria-labelledby="grid-right">
 	<div class="sidebar-nav-inner">
-		<TableOfContents client:media="(min-width: 50em)" {headings} />
+		<TableOfContents client:media="(min-width: 50em)" headings={headings} />
 		<MoreMenu editHref={githubEditUrl} />
 	</div>
 </nav>
diff --git a/examples/docs/src/components/RightSidebar/TableOfContents.tsx b/examples/docs/src/components/RightSidebar/TableOfContents.tsx
index 6348bdfd0..5c6851462 100644
--- a/examples/docs/src/components/RightSidebar/TableOfContents.tsx
+++ b/examples/docs/src/components/RightSidebar/TableOfContents.tsx
@@ -1,13 +1,18 @@
 import type { FunctionalComponent } from 'preact';
-import { h, Fragment } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
-import { MarkdownHeading } from 'astro';
+import type { MarkdownHeading } from 'astro';
+
+type ItemOffsets = {
+	id: string;
+	topOffset: number;
+};
 
 const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
 	headings = [],
 }) => {
-	const itemOffsets = useRef([]);
-	const [activeId, setActiveId] = useState<string>(undefined);
+	const itemOffsets = useRef<ItemOffsets[]>([]);
+	// FIXME: Not sure what this state is doing. It was never set to anything truthy.
+	const [activeId] = useState<string>('');
 	useEffect(() => {
 		const getItemOffsets = () => {
 			const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)');
@@ -27,16 +32,16 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
 
 	return (
 		<>
-			<h2 class="heading">On this page</h2>
+			<h2 className="heading">On this page</h2>
 			<ul>
-				<li class={`heading-link depth-2 ${activeId === 'overview' ? 'active' : ''}`.trim()}>
+				<li className={`heading-link depth-2 ${activeId === 'overview' ? 'active' : ''}`.trim()}>
 					<a href="#overview">Overview</a>
 				</li>
 				{headings
 					.filter(({ depth }) => depth > 1 && depth < 4)
 					.map((heading) => (
 						<li
-							class={`heading-link depth-${heading.depth} ${
+							className={`heading-link depth-${heading.depth} ${
 								activeId === heading.slug ? 'active' : ''
 							}`.trim()}
 						>
diff --git a/examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx b/examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx
index a3f31288d..b9682aa00 100644
--- a/examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx
+++ b/examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx
@@ -1,5 +1,4 @@
 import type { FunctionalComponent } from 'preact';
-import { h, Fragment } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 import './ThemeToggleButton.css';
 
@@ -35,7 +34,7 @@ const ThemeToggle: FunctionalComponent = () => {
 		if (import.meta.env.SSR) {
 			return undefined;
 		}
-		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+		if (typeof localStorage !== undefined && localStorage.getItem('theme')) {
 			return localStorage.getItem('theme');
 		}
 		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
@@ -54,7 +53,7 @@ const ThemeToggle: FunctionalComponent = () => {
 	}, [theme]);
 
 	return (
-		<div class="theme-toggle">
+		<div className="theme-toggle">
 			{themes.map((t, i) => {
 				const icon = icons[i];
 				const checked = t === theme;