Optimize lazy load navigation (#1514)

* Optimize lazy load navigation

* Only render hx node if the navigationFilename is not empty

* Fix typo in comment

* Fix concurrent access to dictionary

* Run prettier

* Fix empty navigation

* refactor: Use static empty NavigationRenderResult object

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

Co-authored-by: Martijn Laarman <[email protected]>

---------

Co-authored-by: Martijn Laarman <[email protected]>

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

@@ -288,11 +288,11 @@ private async Task<IFileInfo> Render<T>(INavigationItem current, T page, ApiRend
 		if (!outputFile.Directory!.Exists)
 			outputFile.Directory.Create();
 
-		var navigationHtml = await navigationRenderer.RenderNavigation(current.NavigationRoot, new Uri("http://ignored.example"), INavigationHtmlWriter.AllLevels, ctx);
+		var navigationRenderResult = await navigationRenderer.RenderNavigation(current.NavigationRoot, new Uri("http://ignored.example"), INavigationHtmlWriter.AllLevels, ctx);
 		renderContext = renderContext with
 		{
 			CurrentNavigation = current,
-			NavigationHtml = navigationHtml
+			NavigationHtml = navigationRenderResult.Html
 		};
 		await using var stream = _writeFileSystem.FileStream.New(outputFile.FullName, FileMode.OpenOrCreate);
 		await page.RenderAsync(stream, renderContext, ctx);

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

@@ -14,15 +14,23 @@ 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 do 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

@@ -36,3 +36,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

@@ -1,9 +1,9 @@
 @inherits RazorSlice<Elastic.Documentation.Site.GlobalLayoutViewModel>
 <aside class="sidebar bg-white fixed md:sticky shadow-2xl md:shadow-none left-[100%] group-has-[#pages-nav-hamburger:checked]/body:left-0 bottom-0 md:left-auto pl-6 md:pl-2 top-[calc(var(--offset-top)+1px)] w-[80%] md:w-auto shrink-0 border-r-1 border-r-grey-20 z-40 md:z-auto">
 
-	@if (Model.Features.LazyLoadNavigation)
+	@if (Model.Features.LazyLoadNavigation && !string.IsNullOrEmpty(Model.NavigationFileName))
 	{
-		<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 class="hidden" hx-get="@(Model.Link(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,23 @@ public interface INavigationHtmlWriter
 {
 	const int AllLevels = -1;
 
-	Task<string> RenderNavigation(IRootNavigationItem<INavigationModel, INavigationItem> currentRootNavigation, Uri navigationSource, int maxLevel, Cancel ctx = default);
+	Task<NavigationRenderResult> 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 record NavigationRenderResult
+{
+	public static NavigationRenderResult Empty { get; } = new()
+	{
+		Html = string.Empty,
+		Id = "empty-navigation" // random id
+	};
+
+	public required string Html { get; init; }
+	public required string Id { get; init; }
+}

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,29 @@ 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<NavigationRenderResult> 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 NavigationRenderResult
+			{
+				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 NavigationRenderResult
+		{
+			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 })