docs: minor layout adjustment

MIERUNE · Jan 9, 2025 · 901317b · 901317b
1 parent 0be88a4
commit 901317b
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 24 deletions.
diff --git a/src/routes/GlobalToc.svelte b/src/routes/GlobalToc.svelte
@@ -3,7 +3,9 @@
 	import CloseIcon from 'lucide-svelte/icons/x';
 	import { cn } from '$lib/utils';
 
-	import { toc } from '$content/examples/toc';
+	import { toc as docsToc } from '$content/docs/toc';
+	import { toc as componentsToc } from '$content/components/toc';
+	import { toc as examplesToc } from '$content/examples/toc';
 	import { beforeNavigate } from '$app/navigation';
 	import { Button } from '$lib/components/ui/button';
 
@@ -43,8 +45,14 @@
 				<CloseIcon class="!size-6"></CloseIcon>
 			</Button>
 		</div>
-		<div class="p-8">
-			<Index name="Examples" {toc}></Index>
+		<div class="p-8 pb-0">
+			<Index name="Docs" toc={docsToc}></Index>
+		</div>
+		<div class="p-8 pb-0">
+			<Index name="Examples" toc={examplesToc}></Index>
+		</div>
+		<div class="p-8 pb-0">
+			<Index name="API Reference" toc={componentsToc}></Index>
 		</div>
 	</div>
 </div>
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
@@ -48,19 +48,19 @@
 		</h1>
 		<nav class="ml-12 hidden gap-x-6 font-medium min-[550px]:flex">
 			<a
-				href="/docs/"
+				href="/docs/quickstart"
 				data-active={page.url.pathname.startsWith('/docs') && !page.url.pathname.startsWith('/docs/components')}
 				class="text-sm text-foreground/70 transition-colors hover:text-foreground data-[active=true]:font-semibold"
 				>Docs
 			</a>
 			<a
-				href="/examples/"
+				href="/examples/plain"
 				data-active={page.url.pathname.startsWith('/examples')}
 				class="text-sm text-foreground/70 transition-colors hover:text-foreground data-[active=true]:font-semibold"
 				>Examples</a
 			>
 			<a
-				href="/docs/components/"
+				href="/docs/components/MapLibre"
 				data-active={page.url.pathname.startsWith('/docs/components')}
 				class="text-sm text-foreground/70 transition-colors hover:text-foreground data-[active=true]:font-semibold"
 				>API Reference</a

diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
@@ -4,6 +4,6 @@
 	import { toc } from '$content/docs/toc.js';
 </script>
 
-<div id="toc" class="m-auto p-8 xl:container">
+<div id="toc" class="m-auto p-8 py-10 xl:container">
 	<Index name="Docs" {toc} />
 </div>
diff --git a/src/routes/docs/+page.ts b/src/routes/docs/+page.ts
diff --git a/src/routes/docs/components/+page.svelte b/src/routes/docs/components/+page.svelte
@@ -4,6 +4,6 @@
 	import { toc } from '$content/components/toc.js';
 </script>
 
-<div id="toc" class="m-auto p-8 xl:container">
+<div id="toc" class="m-auto p-8 py-10 xl:container">
 	<Index name="API Reference" {toc} />
 </div>
diff --git a/src/routes/docs/components/+page.ts b/src/routes/docs/components/+page.ts
diff --git a/src/routes/examples/+page.svelte b/src/routes/examples/+page.svelte
@@ -4,6 +4,6 @@
 	import { toc } from '$content/examples/toc.js';
 </script>
 
-<div id="toc" class="m-auto p-8 xl:container">
+<div id="toc" class="m-auto p-8 py-10 xl:container">
 	<Index name="Examples" {toc} />
 </div>
diff --git a/src/routes/examples/+page.ts b/src/routes/examples/+page.ts