From 1c9f7235299c882022d9445f6a0446534a921c37 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Tue, 18 Feb 2025 23:15:58 +0100
Subject: [PATCH 1/3] PoC: SSR like navigation

---
 src/Elastic.Markdown/Assets/pages-nav.ts      | 34 +++++++++++++++++++
 .../Slices/Layout/_PagesNav.cshtml            |  1 -
 .../Slices/Layout/_TocTree.cshtml             |  2 +-
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/Elastic.Markdown/Assets/pages-nav.ts b/src/Elastic.Markdown/Assets/pages-nav.ts
index ff9df8073..0f17f8d11 100644
--- a/src/Elastic.Markdown/Assets/pages-nav.ts
+++ b/src/Elastic.Markdown/Assets/pages-nav.ts
@@ -1,4 +1,8 @@
 import {$, $$} from "select-dom";
+import {initHighlight} from "./hljs";
+import {initCopyButton} from "./copybutton";
+import {initTabs} from "./tabs";
+import {initTocNav} from "./toc-nav";
 
 type NavExpandState = {
 	current:string,
@@ -109,6 +113,36 @@ export function initNav() {
 		keepNavStateCallback();
 		keepNavPositionCallback();
 	}, true);
+	
+	
+	$$('a', pagesNav).forEach(a => {
+		a.addEventListener('click', (e) => {
+			e.preventDefault();
+			history.pushState(null, '', a.href);
+			
+			// download .markdown-content from the href
+			const url = a.href;
+			fetch(url)
+				.then(response => response.text())
+				.then(text => {
+					const doc = new DOMParser().parseFromString(text, 'text/html')
+					const markdownContent = $('.markdown-content', doc);
+					const markdownContentContainer = $('.markdown-content');
+					const toc = $('#toc-nav', doc);
+					const tocContainer = $('#toc-nav');
+					if (toc && tocContainer) {
+						tocContainer.innerHTML = toc.innerHTML;
+					}
+					if (markdownContent && markdownContentContainer) {
+						markdownContentContainer.innerHTML = markdownContent.innerHTML;
+						initHighlight();
+						initCopyButton();
+						initTabs();
+						initTocNav();
+					}
+				});
+		});
+	});
 }
 
 initNav();
diff --git a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
index 52d8ed4db..85df8310d 100644
--- a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml
@@ -5,7 +5,6 @@
 	     data-current-page-parent-ids="@(string.Join(",",Model.ParentIds))"
 	     @* used to invalidate session storage *@
 	     data-current-navigation="@LayoutViewModel.CurrentNavigationId">
-
 		@(new HtmlString(Model.NavigationHtml))
 	</nav>
 	<script src="@Model.Static("pages-nav.js")"></script>
diff --git a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
index 01de18781..8e837e00d 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
@@ -1,7 +1,7 @@
 @inherits RazorSlice<NavigationViewModel>
 <div class="pt-6 pb-20">
 	<div class="font-bold">Elastic Docs</div>
-	<ul class="block w-full">
+	<ul class="block">
 		@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
 		{
 			Level = Model.Tree.Depth,

From c973f01e8e93ec47c0f20cc3c16f5f6da45e53e3 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Tue, 18 Feb 2025 23:31:13 +0100
Subject: [PATCH 2/3] ok

---
 src/Elastic.Markdown/Assets/pages-nav.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Elastic.Markdown/Assets/pages-nav.ts b/src/Elastic.Markdown/Assets/pages-nav.ts
index 0f17f8d11..c972e8afe 100644
--- a/src/Elastic.Markdown/Assets/pages-nav.ts
+++ b/src/Elastic.Markdown/Assets/pages-nav.ts
@@ -119,7 +119,8 @@ export function initNav() {
 		a.addEventListener('click', (e) => {
 			e.preventDefault();
 			history.pushState(null, '', a.href);
-			
+			const markdownContentContainer = $('.markdown-content');
+			markdownContentContainer.innerHTML = 'loading...';
 			// download .markdown-content from the href
 			const url = a.href;
 			fetch(url)
@@ -127,7 +128,6 @@ export function initNav() {
 				.then(text => {
 					const doc = new DOMParser().parseFromString(text, 'text/html')
 					const markdownContent = $('.markdown-content', doc);
-					const markdownContentContainer = $('.markdown-content');
 					const toc = $('#toc-nav', doc);
 					const tocContainer = $('#toc-nav');
 					if (toc && tocContainer) {

From 3049c644b0f115036be97d75b9e9992b67dea62c Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Tue, 18 Feb 2025 23:31:49 +0100
Subject: [PATCH 3/3] ok

---
 src/Elastic.Markdown/Assets/pages-nav.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Elastic.Markdown/Assets/pages-nav.ts b/src/Elastic.Markdown/Assets/pages-nav.ts
index c972e8afe..5686256f2 100644
--- a/src/Elastic.Markdown/Assets/pages-nav.ts
+++ b/src/Elastic.Markdown/Assets/pages-nav.ts
@@ -114,14 +114,12 @@ export function initNav() {
 		keepNavPositionCallback();
 	}, true);
 	
-	
 	$$('a', pagesNav).forEach(a => {
 		a.addEventListener('click', (e) => {
 			e.preventDefault();
 			history.pushState(null, '', a.href);
 			const markdownContentContainer = $('.markdown-content');
 			markdownContentContainer.innerHTML = 'loading...';
-			// download .markdown-content from the href
 			const url = a.href;
 			fetch(url)
 				.then(response => response.text())