ZSidebar - fix url error.

Docs - load all markdown file.

Author: vhtmui_5600g

src/lib/ZSibar/ZSidebar.svelte

@@ -116,14 +116,16 @@
 
 	// Set hightlight item
 	$effect(() => {
-		if (nowLink === $page.route.id) {
+		const url = new URL($page.url);
+		if (nowLink === url.pathname) {
 			selected_item = true;
 		} else if ($page.route.id.match(new RegExp(`^${nowLink}.+`, 'i')) && expand === false) {
 			selected_item = true;
 		} else {
 			selected_item = false;
 		}
 	});
+	$inspect($page);
 	//#endregion
 </script>
 

src/routes/+layout.server.js

@@ -10,13 +10,24 @@ export async function load() {
 		.filter((d) => d.isDirectory())
 		.map((d) => path.join(d.parentPath, d.name).replaceAll('\\', '/').replaceAll(baseDir, ''));
 
-	const mdContent = await readFile('docs/PowerShell.md', 'utf-8');
-
 	const docDir = 'docs/';
 	const docItems = await readdir(docDir, { recursive: true, withFileTypes: true });
-	const docDirectory = docItems.map((d) => path.join(d.parentPath, d.name).replaceAll('\\', '/').replaceAll(docDir, '/docs/'));
+	const docDirectory = docItems.map((d) => path.join(d.parentPath, d.name).replaceAll('\\', '/').replaceAll(docDir, '/docs/').replace('.md', ''));
 
 	directory = [...directory, ...docDirectory];
 
+	// get markdown.
+
+	// let mdContent = await readFile('docs/PowerShell.md', 'utf-8');
+
+	let mdContent = new Map();
+
+	for (const docItem of docItems) {
+		const name = docItem.name.replace('.md', '');
+		const docPath = path.join(docItem.parentPath, docItem.name);
+		const content = await readFile(docPath, 'utf-8');
+		mdContent.set(name, content);
+	}
+
 	return { directory, mdContent };
 }

src/routes/+layout.svelte

@@ -99,7 +99,11 @@
 	let lastY = $state();
 	function scrollHeader() {
 		let gap = Y - lastY;
-		if (top - gap < 0 && top - gap > -96) top = top - gap;
+		console.log(gap);
+		if (top - gap < 0 && top - gap > -96) {
+			top = top - gap;
+		} else if (top - gap >= 0) top = 0;
+		else if (top - gap <= -96) top = -96;
 		lastY = Y;
 	}
 	// Timer for header.

src/routes/docs/+layout.svelte

@@ -8,9 +8,6 @@
 	let { data, ...props } = $props();
 </script>
 
-<div class="header">Sticky Header</div>
-<div class="content">Scroll down to see the sticky header in action.</div>
-
 {@render props.children?.()}
 
 <style>

src/routes/docs/+page.server.js

@@ -1,5 +1,4 @@
 /** @type {import('./$types').PageServerLoad} */
 export async function load({parent}) {
-    const {dir}= await parent();
     return {};
 };

src/routes/docs/+page.svelte

@@ -12,6 +12,4 @@
 	<title>Docs</title>
 </svelte:head>
 
-{#each data.dir as dir }
-    <p>{dir}</p>
-{/each}
+

src/routes/docs/doc/+page.server.js renamed to src/routes/docs/[doc]/+page.server.js

@@ -1,10 +1,10 @@
 import { readFile } from 'node:fs/promises';
 /** @type {import('./$types').PageServerLoad} */
-export async function load({ parent, cookies }) {
+export async function load({ parent, params }) {
 	// get content
 	const { mdContent } = await parent();
 
-	const h1 = await readFile('./src/routes/docs/doc/a.txt','utf8');
+	const content = mdContent.get(params.doc);
 
-	return { mdContent ,h1};
+	return { content };
 }

src/routes/docs/doc/+page.svelte renamed to src/routes/docs/[doc]/+page.svelte

@@ -2,22 +2,20 @@
 	import Markdown from 'svelte-exmarkdown';
 	import { gfmPlugin } from 'svelte-exmarkdown/gfm';
 	import rehypeSlug from 'rehype-slug';
-	import H1 from './H1.svelte';
-	import ZIcon from '$lib/ZIcon/ZIcon.svelte';
 
 	/** @type {import('./$types').PageData} */
 	let { data } = $props();
 
-
 	const headingIdPlugin = {
 		rehypePlugin: [rehypeSlug]
 	};
 
 	let md = $state('# hello world');
 	const plugins = [gfmPlugin(), headingIdPlugin];
+
 </script>
 
-<Markdown md={data.mdContent} {plugins} />
+<Markdown md={data.content} {plugins} />
 
 <style>