POC rendering separate .main.html pages for use with htmx

src/Elastic.Markdown/Assets/copybutton.ts

@@ -256,6 +256,5 @@ var copyTargetText = (trigger) => {
 }
 
 export function initCopyButton() {
-	console.log("initCopyButton");
 	runWhenDOMLoaded(addCopyButtonToCodeCells)
 }

src/Elastic.Markdown/Assets/main.ts

@@ -2,8 +2,15 @@ import {initTocNav} from "./toc-nav";
 import {initHighlight} from "./hljs";
 import {initTabs} from "./tabs";
 import {initCopyButton} from "./copybutton";
+import {initNav} from "./pages-nav";
 
-initTocNav();
-initHighlight();
-initCopyButton();
-initTabs();
+document.body.addEventListener('htmx:load', function(evt) {
+	document.querySelector("#content").scrollIntoView({ behavior: 'instant', block: 'start' });
+	initTocNav();
+	initHighlight();
+	initCopyButton();
+	initTabs();
+	initNav();
+});
+
+// initNav();

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,34 @@ export function initNav() {
 		keepNavStateCallback();
 		keepNavPositionCallback();
 	}, true);
+
+	// $$('a', pagesNav).forEach(a => {
+	// 	a.addEventListener('click', (e) => {
+	// 		e.preventDefault();
+	// 		history.pushState(null, '', a.href);
+	// 		const markdownContentContainer = $('.markdown-content');
+	// 		markdownContentContainer.innerHTML = 'loading...';
+	// 		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 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();
+// initNav();

src/Elastic.Markdown/Assets/styles.css

@@ -85,7 +85,7 @@
 	}
 
 	.content-container {
-		@apply w-full max-w-[80ch] lg:w-[80ch];
+		@apply w-full max-w-[80ch];
 	}
 
 	.applies {
@@ -137,3 +137,30 @@
 :is(a, button, input, textarea, summary):focus:not(:focus-visible) {
 	outline: none;
 }
+
+.htmx-indicator {
+	display:none;
+}
+.htmx-request .htmx-indicator,
+.htmx-request.htmx-indicator{
+	display:block;
+}
+
+.progress {
+	animation: progress 1s infinite linear;
+}
+
+.left-right {
+	transform-origin: 0% 50%;
+}
+@keyframes progress {
+	0% {
+		transform:  translateX(0) scaleX(0);
+	}
+	40% {
+		transform:  translateX(0) scaleX(0.4);
+	}
+	100% {
+		transform:  translateX(100%) scaleX(0.5);
+	}
+}

src/Elastic.Markdown/Assets/tabs.ts

@@ -57,12 +57,6 @@ function ready() {
             group
           );
           if (tabParam) {
-            console.log(
-              "sphinx-design: Selecting tab id for group '" +
-                group +
-                "' from URL parameter: " +
-                tabParam
-            );
             window.sessionStorage.setItem(storageKeyPrefix + group, tabParam);
           }
         }
@@ -72,9 +66,6 @@ function ready() {
           storageKeyPrefix + group
         );
         if (previousId === id) {
-          // console.log(
-          //   "sphinx-design: Selecting tab from session storage: " + id
-          // );
           // @ts-ignore
           label.previousElementSibling.checked = true;
         }
@@ -101,6 +92,5 @@ function onSDLabelClick() {
 }
 
 export function initTabs() {
-	console.log("inittabs");
-  document.addEventListener("DOMContentLoaded", ready, false);
+  document.addEventListener("DOMContentLoaded", ready, { once: true });
 }

src/Elastic.Markdown/DocumentationGenerator.cs

@@ -252,6 +252,7 @@ private async Task CopyFileFsAware(DocumentationFile file, IFileInfo outputFile,
 	public async Task<string?> RenderLayout(MarkdownFile markdown, Cancel ctx)
 	{
 		await DocumentationSet.Tree.Resolve(ctx);
-		return await HtmlWriter.RenderLayout(markdown, ctx);
+		var pageHtml = await HtmlWriter.RenderPageHtml(markdown, ctx);
+		return await HtmlWriter.RenderLayout(markdown, pageHtml, ctx);
 	}
 }

src/Elastic.Markdown/Slices/HtmlWriter.cs

@@ -40,10 +40,15 @@ private async Task<string> RenderNavigation(MarkdownFile markdown, Cancel ctx =
 
 	private string? _renderedNavigation;
 
-	public async Task<string> RenderLayout(MarkdownFile markdown, Cancel ctx = default)
+	public async Task<string> RenderPageHtml(MarkdownFile markdown, Cancel ctx = default)
 	{
 		var document = await markdown.ParseFullAsync(ctx);
 		var html = markdown.CreateHtml(document);
+		return html;
+	}
+
+	public async Task<string> RenderLayout(MarkdownFile markdown, string markdownHtml, Cancel ctx = default)
+	{
 		await DocumentationSet.Tree.Resolve(ctx);
 		_renderedNavigation ??= await RenderNavigation(markdown, ctx);
 
@@ -59,7 +64,7 @@ public async Task<string> RenderLayout(MarkdownFile markdown, Cancel ctx = defau
 		{
 			Title = markdown.Title ?? "[TITLE NOT SET]",
 			TitleRaw = markdown.TitleRaw ?? "[TITLE NOT SET]",
-			MarkdownHtml = html,
+			MarkdownHtml = markdownHtml,
 			PageTocItems = markdown.TableOfContents.Values.ToList(),
 			Tree = DocumentationSet.Tree,
 			CurrentDocument = markdown,
@@ -74,12 +79,39 @@ public async Task<string> RenderLayout(MarkdownFile markdown, Cancel ctx = defau
 		return await slice.RenderAsync(cancellationToken: ctx);
 	}
 
+
+	public async Task<string> RenderPage(MarkdownFile markdown, string markdownHtml, Cancel ctx = default)
+	{
+		var previous = DocumentationSet.GetPrevious(markdown);
+		var next = DocumentationSet.GetNext(markdown);
+
+		var remote = DocumentationSet.Context.Git.RepositoryName;
+		var branch = DocumentationSet.Context.Git.Branch;
+		var path = Path.Combine(DocumentationSet.RelativeSourcePath, markdown.RelativePath);
+		var editUrl = $"https://github.com/elastic/{remote}/edit/{branch}/{path}";
+
+		var slice = Page.Create(new MainViewModel
+		{
+			Title = markdown.Title ?? "[TITLE NOT SET]",
+			TitleRaw = markdown.TitleRaw ?? "[TITLE NOT SET]",
+			MarkdownHtml = markdownHtml,
+			PageTocItems = markdown.TableOfContents.Values.ToList(),
+			CurrentDocument = markdown,
+			PreviousDocument = previous,
+			NextDocument = next,
+			UrlPathPrefix = markdown.UrlPathPrefix,
+			Applies = markdown.YamlFrontMatter?.AppliesTo,
+			GithubEditUrl = editUrl,
+			AllowIndexing = DocumentationSet.Context.AllowIndexing && !markdown.Hidden
+		});
+		return await slice.RenderAsync(cancellationToken: ctx);
+	}
+
 	public async Task WriteAsync(IFileInfo outputFile, MarkdownFile markdown, Cancel ctx = default)
 	{
 		if (outputFile.Directory is { Exists: false })
 			outputFile.Directory.Create();
 
-		var rendered = await RenderLayout(markdown, ctx);
 		string path;
 		if (outputFile.Name == "index.md")
 			path = Path.ChangeExtension(outputFile.FullName, ".html");
@@ -96,8 +128,15 @@ public async Task WriteAsync(IFileInfo outputFile, MarkdownFile markdown, Cancel
 				? Path.GetFileNameWithoutExtension(outputFile.Name) + ".html"
 				: Path.Combine(dir, "index.html");
 		}
+		var mainPath = Path.ChangeExtension(path, ".main.html");
+
+		var pageHtml = await RenderPageHtml(markdown, ctx);
 
+		var rendered = await RenderLayout(markdown, pageHtml, ctx);
 		await _writeFileSystem.File.WriteAllTextAsync(path, rendered, ctx);
+
+		var renderedPage = await RenderPage(markdown, pageHtml, ctx);
+		await _writeFileSystem.File.WriteAllTextAsync(mainPath, renderedPage, ctx);
 	}
 
 }

src/Elastic.Markdown/Slices/Layout/_Breadcrumbs.cshtml

@@ -1,4 +1,4 @@
-@inherits RazorSlice<LayoutViewModel>
+@inherits RazorSlice<IBreadCrumbModel>
 <ol class="block w-full" itemscope="" itemtype="https://schema.org/BreadcrumbList">
 	<li class="inline text-ink text-sm hover:text-ink leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
 		<a itemprop="item" href="@Model.UrlPathPrefix/">

src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml

@@ -1,12 +1,13 @@
 @inherits RazorSlice<LayoutViewModel>
-<aside class="sidebar hidden lg:block order-1 w-100 border-r-1 border-r-gray-200">
-	<nav id="pages-nav" class="sidebar-nav pr-6"
+<aside class="sidebar hidden lg:block order-1 w-100 border-r-1 border-r-gray-200" 		hx-swap="morphdom"
+>
+	<nav
+		id="pages-nav" 
+	     class="sidebar-nav pr-6"
 	     data-current-page-id="@Model.CurrentDocument.Id"
 	     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>
 </aside>

src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml

@@ -1,5 +1,5 @@
-@inherits RazorSlice<LayoutViewModel>
-<aside class="sidebar hidden lg:block order-3 border-l-1 border-l-gray-200 w-80">
+@inherits RazorSlice<ITableOfContentsModel>
+<aside class="sidebar hidden lg:block order-3 basis-80">
 	<nav id="toc-nav" class="sidebar-nav pl-6">
 		<div class="pt-6 pb-20">
 			@if (Model.PageTocItems.Count > 0)

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,

src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml

@@ -10,6 +10,11 @@
 		<li class="block ml-2 pl-2 border-l-1 border-l-gray-200 group/li">
 			<div class="flex">
 				<a
+					hx-get="@f.Url"
+					hx-target="#content"
+					hx-select="#content"
+					hx-push-url="true"
+					hx-indicator="#indicator"
 					class="sidebar-link my-1 ml-5 group-[.current]/li:text-blue-elastic!"
 					id="page-@id"
 					href="@f.Url">

src/Elastic.Markdown/Slices/Page.cshtml

@@ -0,0 +1,61 @@
+@using Elastic.Markdown.IO.Navigation
+@using Markdig
+@inherits RazorSliceHttpResult<MainViewModel>
+<main class="w-full order-2">
+	<div class="content-container relative">
+		<div class="w-full htmx-indicator absolute top-0 left-0 right-0" id="indicator">
+			<div class="h-1 w-full bg-pink-10 overflow-hidden">
+				<div class="progress w-full h-full bg-pink-50 left-right"></div>
+			</div>
+		</div>
+	</div>
+	<div id="content" class="w-full flex justify-between">
+		@await RenderPartialAsync(_TableOfContents.Create<ITableOfContentsModel>(Model))
+		<div class="content-container order-first px-6 pt-6 pb-12">
+			@await RenderPartialAsync(_Breadcrumbs.Create<IBreadCrumbModel>(Model))
+			<article class="markdown-content">
+			<section id="elastic-docs-v3">
+				@* This way it's correctly rendered as <h1>text</h1> instead of <h1><p>text</p></h1> *@
+				@(new HtmlString(Markdown.ToHtml("# " + Model.TitleRaw)))
+				@if (Model.Applies is not null)
+				{
+					await RenderPartialAsync(ApplicableTo.Create(Model.Applies));
+				}
+				@(new HtmlString(Model.MarkdownHtml))
+			</section>
+			</article>
+			<footer class="mt-20">
+				<div class="flex flex-wrap lg:flex-nowrap gap-2 mt-2">
+					<div class="basis-full">
+						@if (Model.PreviousDocument != null)
+						{
+						<a href="@Model.PreviousDocument.Url" hx-get="@Model.PreviousDocument.Url" class="flex h-full items-center text-ink-light hover:black border-1 border-gray-300 hover:border-gray-500 rounded-lg p-6 shadow-md">
+							<svg class="size-6 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/>
+							</svg>
+							<div>
+								<div class="text-xs lg:text-sm">Previous</div>
+								<div class="text-base lg:text-xl text-black">@Model.PreviousDocument.NavigationTitle</div>
+							</div>
+						</a>
+						}
+					</div>
+					<div class="basis-full">
+						@if (Model.NextDocument != null)
+						{
+						<a href="@Model.NextDocument.Url" hx-get="@Model.NextDocument.Url" hx-select="#content" hx-target="#content" class="flex h-full items-center justify-end text-ink-light hover:black border-1 border-gray-300 hover:border-gray-500 rounded-lg p-6 shadow-md text-right">
+							<div>
+								<div class="text-xs lg:text-sm">Next</div>
+								<div class="text-base lg:text-xl text-black">@Model.NextDocument.NavigationTitle</div>
+							</div>
+							<svg class="size-6 ml-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+								<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/>
+							</svg>
+						</a>
+						}
+					</div>
+				</div>
+			</footer>
+		</div>
+	</div>
+</main>