Optimize lazy load navigation

Author: reakaleek

src/Elastic.ApiExplorer/ApiViewModel.cs

@@ -37,6 +37,7 @@ public GlobalLayoutViewModel CreateGlobalLayoutModel() =>
 			Previous = null,
 			Next = null,
 			NavigationHtml = NavigationHtml,
+			NavigationFileName = string.Empty,
 			UrlPathPrefix = BuildContext.UrlPathPrefix,
 			AllowIndexing = BuildContext.AllowIndexing,
 			CanonicalBaseUrl = BuildContext.CanonicalBaseUrl,

src/Elastic.ApiExplorer/OpenApiGenerator.cs

@@ -292,7 +292,12 @@ private async Task<IFileInfo> Render<T>(INavigationItem current, T page, ApiRend
 		renderContext = renderContext with
 		{
 			CurrentNavigation = current,
-			NavigationHtml = navigationHtml
+			NavigationHtml = navigationHtml switch
+			{
+				EmptyNavigationRenderResult => string.Empty,
+				OkNavigationRenderResult result => result.Html,
+				_ => throw new Exception("Unexpected navigation render result")
+			}
 		};
 		await using var stream = _writeFileSystem.FileStream.New(outputFile.FullName, FileMode.OpenOrCreate);
 		await page.RenderAsync(stream, renderContext, ctx);

src/Elastic.Documentation.Site/Assets/main.ts

@@ -15,15 +15,24 @@ import { $, $$ } from 'select-dom'
 import { UAParser } from 'ua-parser-js'
 
 const { getOS } = new UAParser()
+const isLazyLoadNavigationEnabled = $('meta[property="docs:feature:lazy-load-navigation"]')?.content === 'true';
 
 document.addEventListener('htmx:load', function (event) {
-    console.log('htmx:load')
-    console.log(event.detail)
     initTocNav()
     initHighlight()
     initCopyButton()
     initTabs()
-    initNav()
+    
+    // We this so that the navigation is not initialized twice
+    if (isLazyLoadNavigationEnabled) {
+        if (event.detail.elt.id === 'nav-tree')
+        {
+            initNav()
+        }
+    } else
+    {
+        initNav()
+    }
     initSmoothScroll()
     openDetailsWithAnchor()
     initDismissibleBanner()

src/Elastic.Documentation.Site/Layout/_Head.cshtml

@@ -34,3 +34,4 @@
 	{
 		<meta property="og:url" content="@Model.CanonicalUrl" />
 	}
+	<meta property="docs:feature:lazy-load-navigation" content="@Model.Features.LazyLoadNavigation" />

src/Elastic.Documentation.Site/Layout/_PagesNav.cshtml

@@ -3,7 +3,7 @@
 
 	@if (Model.Features.LazyLoadNavigation)
 	{
-		<div hx-get="@(Model.CurrentNavigationItem.Url + (Model.CurrentNavigationItem.Url.EndsWith('/') ? "index.nav.html" : "/index.nav.html"))" hx-trigger="load" hx-params="nav" hx-push-url="false" hx-swap="innerHTML" hx-target="#pages-nav"></div>
+		<div hx-get="@(Model.UrlPathPrefix?.TrimEnd('/') + "/" + Model.NavigationFileName)" hx-trigger="load" hx-params="nav" hx-push-url="false" hx-swap="innerHTML" hx-target="#pages-nav"></div>
 	}
 	<nav
 		id="pages-nav"

src/Elastic.Documentation.Site/Navigation/INavigationHtmlWriter.cs

@@ -10,11 +10,30 @@ public interface INavigationHtmlWriter
 {
 	const int AllLevels = -1;
 
-	Task<string> RenderNavigation(IRootNavigationItem<INavigationModel, INavigationItem> currentRootNavigation, Uri navigationSource, int maxLevel, Cancel ctx = default);
+	Task<INavigationRenderResult> RenderNavigation(IRootNavigationItem<INavigationModel, INavigationItem> currentRootNavigation, Uri navigationSource,
+		int maxLevel, Cancel ctx = default);
 
 	async Task<string> Render(NavigationViewModel model, Cancel ctx)
 	{
 		var slice = _TocTree.Create(model);
 		return await slice.RenderAsync(cancellationToken: ctx);
 	}
 }
+
+public interface INavigationRenderResult
+{
+	string Html { get; init; }
+	string Id { get; init; }
+}
+
+public record OkNavigationRenderResult : INavigationRenderResult
+{
+	public required string Html { get; init; }
+	public required string Id { get; init; }
+}
+
+public record EmptyNavigationRenderResult : INavigationRenderResult
+{
+	public string Html { get; init; } = string.Empty;
+	public string Id { get; init; } = string.Empty;
+}

src/Elastic.Documentation.Site/Navigation/IsolatedBuildNavigationHtmlWriter.cs

@@ -4,6 +4,7 @@
 
 using System.Collections.Concurrent;
 using Elastic.Documentation.Configuration;
+using Elastic.Documentation.Extensions;
 
 namespace Elastic.Documentation.Site.Navigation;
 
@@ -12,19 +13,30 @@ public class IsolatedBuildNavigationHtmlWriter(BuildContext context, IRootNaviga
 {
 	private readonly ConcurrentDictionary<(string, int), string> _renderedNavigationCache = [];
 
-	public async Task<string> RenderNavigation(IRootNavigationItem<INavigationModel, INavigationItem> currentRootNavigation, Uri navigationSource, int maxLevel, Cancel ctx = default)
+	public async Task<INavigationRenderResult> RenderNavigation(IRootNavigationItem<INavigationModel, INavigationItem> currentRootNavigation,
+		Uri navigationSource, int maxLevel, Cancel ctx = default)
 	{
 		var navigation = context.Configuration.Features.PrimaryNavEnabled || currentRootNavigation.IsUsingNavigationDropdown
 			? currentRootNavigation
 			: siteRoot;
 
+		var id = ShortId.Create($"{(navigation.Id, maxLevel).GetHashCode()}");
+
 		if (_renderedNavigationCache.TryGetValue((navigation.Id, maxLevel), out var value))
-			return value;
+			return new OkNavigationRenderResult
+			{
+				Html = value,
+				Id = id
+			};
 
 		var model = CreateNavigationModel(navigation, maxLevel);
 		value = await ((INavigationHtmlWriter)this).Render(model, ctx);
 		_renderedNavigationCache[(navigation.Id, maxLevel)] = value;
-		return value;
+		return new OkNavigationRenderResult
+		{
+			Html = value,
+			Id = id
+		};
 	}
 
 	private NavigationViewModel CreateNavigationModel(IRootNavigationItem<INavigationModel, INavigationItem> navigation, int maxLevel) =>

src/Elastic.Documentation.Site/Navigation/_TocTree.cshtml

@@ -1,7 +1,7 @@
 @using Elastic.Documentation.Site.Navigation
 @inherits RazorSlice<Elastic.Documentation.Site.Navigation.NavigationViewModel>
 
-<div class="pb-20 font-body">
+<div class="pb-20 font-body" id="nav-tree">
 	@{
 		var currentTopLevelItem = Model.TopLevelItems.FirstOrDefault(i => i.Id == Model.Tree.Id) ?? Model.Tree;
 	} 

src/Elastic.Documentation.Site/_ViewModels.cs

@@ -27,6 +27,7 @@ public record GlobalLayoutViewModel
 	public required INavigationItem? Next { get; init; }
 
 	public required string NavigationHtml { get; init; }
+	public required string NavigationFileName { get; init; }
 	public required string? UrlPathPrefix { get; init; }
 	public required Uri? CanonicalBaseUrl { get; init; }
 	public string? CanonicalUrl => CanonicalBaseUrl is not null ?

src/Elastic.Markdown/Exporters/DocumentationFileExporter.cs

@@ -66,7 +66,7 @@ public class DocumentationFileExporter(IFileSystem readFileSystem, IFileSystem w
 	public override async ValueTask ProcessFile(ProcessingFileContext context, Cancel ctx)
 	{
 		if (context.File is MarkdownFile markdown)
-			context.MarkdownDocument = await context.HtmlWriter.WriteAsync(context.OutputFile, markdown, context.ConversionCollector, ctx);
+			context.MarkdownDocument = await context.HtmlWriter.WriteAsync(context.BuildContext.DocumentationOutputDirectory, context.OutputFile, markdown, context.ConversionCollector, ctx);
 		else
 		{
 			if (context.OutputFile.Directory is { Exists: false })