Add global elastic.co nav

src/Elastic.Markdown/Assets/main.ts

@@ -1,26 +1,12 @@
 // @ts-nocheck
-import "htmx.org"
+import htmx from "htmx.org"
 import "htmx-ext-preload"
 import {initTocNav} from "./toc-nav";
 import {initHighlight} from "./hljs";
 import {initTabs} from "./tabs";
 import {initCopyButton} from "./copybutton";
 import {initNav} from "./pages-nav";
 import {$, $$} from "select-dom"
-import { UAParser } from 'ua-parser-js';
-const { getOS } = new UAParser();
-
-document.addEventListener('htmx:beforeRequest', function(event) {
-	if (event.detail.requestConfig.verb === 'get' && event.detail.requestConfig.triggeringEvent) {
-		const { ctrlKey, metaKey, shiftKey }: PointerEvent = event.detail.requestConfig.triggeringEvent;
-		const { name: os } = getOS();
-		const modifierKey: boolean = os === 'macOS' ? metaKey : ctrlKey;
-		if (shiftKey || modifierKey) {
-			event.preventDefault();
-			window.open(event.detail.requestConfig.path, '_blank', 'noopener,noreferrer');
-		}
-	}
-});
 
 document.addEventListener('htmx:load', function() {
 	initTocNav();

src/Elastic.Markdown/Assets/styles.css

@@ -20,7 +20,34 @@
 	--outline-offset: 5;
 	--header-height: calc(var(--spacing) * 21);
 	--banner-height: calc(var(--spacing) * 9);
-	--offset-top: calc(var(--header-height) + var(--banner-height));
+	/*--offset-top: calc(var(--header-height) + var(--banner-height));*/
+	--offset-top: 72px;
+}
+
+@media screen and (min-width: 767px) {
+	:root {
+		--offset-top: 123px;
+	}
+}
+
+@media screen and (min-width: 992px) {
+	:root {
+		--offset-top: 131px;
+	}
+}
+
+
+
+/*@media screen and (min-width: 767px) {*/
+/*	:root {*/
+/*		--offset-top: 131px;*/
+/*	}*/
+/*}*/
+
+@media screen and (min-width: 1200px) {
+	:root {
+		--offset-top: 72px;
+	}
 }
 
 /*#default-search::-webkit-search-cancel-button {*/
@@ -95,7 +122,7 @@
 			@apply
 				text-ink-light
 				hover:text-black
-				lg:text-sm
+				md:text-sm
 				text-wrap
 				inline-block
 			    leading-[1.3em]
@@ -187,3 +214,9 @@
 .markdown-content {
 	@apply font-body;
 }
+
+.container {
+	@apply lg:px-3;
+
+	max-width: 1250px !important;
+}

src/Elastic.Markdown/Assets/theme.css

@@ -1,5 +1,12 @@
 @theme {
 
+
+	--breakpoint-sm: 40rem;
+	--breakpoint-md: 768px;
+	--breakpoint-lg: 1280px;
+	--breakpoint-xl: 1920px;
+	--breakpoint-2xl: 2000px;
+
 	--font-sans: "Mier B", "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 	--font-body: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 

src/Elastic.Markdown/Extensions/DetectionRules/DetectionRulesDocsBuilderExtension.cs

@@ -21,12 +21,13 @@ public void CreateNavigationItem(
 		List<DocumentationGroup> groups,
 		List<INavigationItem> navigationItems,
 		int depth,
+		bool inNav,
 		ref int fileIndex,
 		int index)
 	{
 		var detectionRulesFolder = (RulesFolderReference)tocItem;
 		var children = detectionRulesFolder.Children;
-		var group = new DocumentationGroup(Build, lookups with { TableOfContents = children }, ref fileIndex, depth + 1)
+		var group = new DocumentationGroup(Build, lookups with { TableOfContents = children }, ref fileIndex, depth + 1, inNav)
 		{
 			Parent = parent
 		};

src/Elastic.Markdown/Extensions/IDocsBuilderExtension.cs

@@ -11,9 +11,6 @@ namespace Elastic.Markdown.Extensions;
 
 public interface IDocsBuilderExtension
 {
-	/// Return true if this extension handles Navigation injection
-	bool InjectsIntoNavigation(ITocItem tocItem);
-
 	///  Inject items into the current navigation
 	void CreateNavigationItem(
 		DocumentationGroup? parent,
@@ -22,10 +19,14 @@ void CreateNavigationItem(
 		List<DocumentationGroup> groups,
 		List<INavigationItem> navigationItems,
 		int depth,
+		bool inNav,
 		ref int fileIndex,
 		int index
 	);
 
+	/// Return true if this extension handles Navigation injection
+	bool InjectsIntoNavigation(ITocItem tocItem);
+
 	/// Visit the <paramref name="tocItem"/> and its equivalent <see cref="DocumentationFile"/>
 	void Visit(DocumentationFile file, ITocItem tocItem);
 

src/Elastic.Markdown/IO/Configuration/ConfigurationFile.cs

@@ -168,6 +168,7 @@ private List<ITocItem> ReadChildren(YamlStreamReader reader, KeyValuePair<YamlNo
 		var folderFound = false;
 		var detectionRulesFound = false;
 		var hiddenFile = false;
+		var inNav = false;
 		IReadOnlyCollection<ITocItem>? children = null;
 		foreach (var entry in tocEntry.Children)
 		{
@@ -177,6 +178,10 @@ private List<ITocItem> ReadChildren(YamlStreamReader reader, KeyValuePair<YamlNo
 				case "toc":
 					toc = ReadNestedToc(reader, entry, out fileFound);
 					break;
+				case "in_nav":
+					if (!bool.TryParse(reader.ReadString(entry), out inNav))
+						throw new ArgumentException("in_nav must be a boolean");
+					break;
 				case "hidden":
 				case "file":
 					hiddenFile = key == "hidden";
@@ -204,7 +209,7 @@ private List<ITocItem> ReadChildren(YamlStreamReader reader, KeyValuePair<YamlNo
 			foreach (var f in toc.Files)
 				_ = Files.Add(f);
 
-			return [new FolderReference($"{parentPath}".TrimStart('/'), folderFound, toc.TableOfContents)];
+			return [new FolderReference($"{parentPath}".TrimStart('/'), folderFound, inNav, toc.TableOfContents)];
 		}
 
 		if (file is not null)
@@ -233,7 +238,7 @@ private List<ITocItem> ReadChildren(YamlStreamReader reader, KeyValuePair<YamlNo
 			if (children is null)
 				_ = ImplicitFolders.Add(parentPath.TrimStart('/'));
 
-			return [new FolderReference($"{parentPath}".TrimStart('/'), folderFound, children ?? [])];
+			return [new FolderReference($"{parentPath}".TrimStart('/'), folderFound, inNav, children ?? [])];
 		}
 
 		return null;

src/Elastic.Markdown/IO/Configuration/ITocItem.cs

@@ -8,4 +8,4 @@ public interface ITocItem;
 
 public record FileReference(string Path, bool Found, bool Hidden, IReadOnlyCollection<ITocItem> Children) : ITocItem;
 
-public record FolderReference(string Path, bool Found, IReadOnlyCollection<ITocItem> Children) : ITocItem;
+public record FolderReference(string Path, bool Found, bool InNav, IReadOnlyCollection<ITocItem> Children) : ITocItem;

src/Elastic.Markdown/IO/DocumentationSet.cs

@@ -109,7 +109,7 @@ public DocumentationSet(BuildContext build, ILoggerFactory logger, ICrossLinkRes
 			FilesGroupedByFolder = FilesGroupedByFolder
 		};
 
-		Tree = new DocumentationGroup(Build, lookups, ref fileIndex)
+		Tree = new DocumentationGroup(Build, lookups, false, ref fileIndex)
 		{
 			Parent = null
 		};

src/Elastic.Markdown/IO/Navigation/DocumentationGroup.cs

@@ -3,6 +3,7 @@
 // See the LICENSE file in the project root for more information
 
 using System.IO.Abstractions;
+using System.Text.RegularExpressions;
 using Elastic.Markdown.Diagnostics;
 using Elastic.Markdown.Extensions;
 using Elastic.Markdown.Extensions.DetectionRules;
@@ -43,11 +44,14 @@ public class DocumentationGroup
 
 	public int Depth { get; }
 
+	public bool InNav { get; }
+
 	public DocumentationGroup(
 		BuildContext context,
 		NavigationLookups lookups,
+		bool inNav,
 		ref int fileIndex)
-		: this(context, lookups, ref fileIndex, depth: 0)
+		: this(context, lookups, ref fileIndex, depth: 0, inNav)
 	{
 	}
 
@@ -56,14 +60,15 @@ internal DocumentationGroup(
 		NavigationLookups lookups,
 		ref int fileIndex,
 		int depth,
+		bool inNav,
 		MarkdownFile? index = null)
 	{
 		Depth = depth;
 		Index = ProcessTocItems(context, index, lookups, depth, ref fileIndex, out var groups, out var files, out var navigationItems);
 		if (Index is not null)
 			Index.GroupId = Id;
 
-
+		InNav = inNav;
 		GroupsInOrder = groups;
 		FilesInOrder = files;
 		NavigationItems = navigationItems;
@@ -119,9 +124,8 @@ internal DocumentationGroup(
 				{
 					if (file.Hidden)
 						context.EmitError(context.ConfigurationPath, $"The following file is hidden but has children: {file.Path}");
-
 					var group = new DocumentationGroup(
-						context, lookups with { TableOfContents = file.Children }, ref fileIndex, depth + 1, virtualIndex)
+						context, lookups with { TableOfContents = file.Children }, ref fileIndex, depth + 1, InNav, virtualIndex)
 					{
 						Parent = this
 					};
@@ -153,7 +157,7 @@ .. documentationFiles
 					];
 				}
 
-				var group = new DocumentationGroup(context, lookups with { TableOfContents = children }, ref fileIndex, depth + 1)
+				var group = new DocumentationGroup(context, lookups with { TableOfContents = children }, ref fileIndex, depth + 1, folder.InNav)
 				{
 					Parent = this
 				};
@@ -165,7 +169,7 @@ .. documentationFiles
 				foreach (var extension in lookups.EnabledExtensions)
 				{
 					if (extension.InjectsIntoNavigation(tocItem))
-						extension.CreateNavigationItem(this, tocItem, lookups, groups, navigationItems, depth, ref fileIndex, index);
+						extension.CreateNavigationItem(this, tocItem, lookups, groups, navigationItems, depth, false, ref fileIndex, index);
 				}
 			}
 		}

src/Elastic.Markdown/Slices/HtmlWriter.cs

@@ -28,7 +28,8 @@ private async Task<string> RenderNavigation(string topLevelGroupId, MarkdownFile
 			Tree = group ?? DocumentationSet.Tree,
 			CurrentDocument = markdown,
 			IsRoot = topLevelGroupId == DocumentationSet.Tree.Id,
-			Features = DocumentationSet.Configuration.Features
+			Features = DocumentationSet.Configuration.Features,
+			TopLevelItems = DocumentationSet.Tree.NavigationItems.OfType<GroupNavigation>().ToList()
 		});
 		return await slice.RenderAsync(cancellationToken: ctx);
 	}

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

@@ -7,7 +7,7 @@
 			href="@Model.Link("/")"
 		>
 			<span itemprop="name" class="hover:text-black">
-				Home
+				Docs
 			</span>
 		</a>
 		<meta itemprop="position" content="1">

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

@@ -101,81 +101,8 @@
 		]
 	};
 }
-<header id="main-header" class="sticky top-0 z-50 max-w-screen border-b-1 border-grey-20 group/header">
-	<section id="banner" class="bg-blue-developer py-2 px-6 h-(--banner-height)" xmlns="http://www.w3.org/1999/html">
-		<div class="container mx-auto flex justify-between">
-			<div></div>
-			<div class="flex items-center">
-				<ul class="grid grid-cols-3 gap-4 text-white text-sm">
-					<li>
-						<a href="https://www.elastic.co/about">About us</a>
-					</li>
-					<li>
-						<a href="https://www.elastic.co/partners">Partners</a>
-					</li>
-					<li>
-						<a href="https://support.elastic.co/">Support</a>
-					</li>
-				</ul>
-				<div class="w-[1px] h-4 bg-white/40 mx-4"></div>
-				<ul class="grid grid-cols-1 justify-end gap-4 text-white text-sm">
-					<li>
-						<a href="https://cloud.elastic.co/" class="flex gap-1 items-center">
-							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
-							</svg>
-							Login
-						</a>
-					</li>
-				</ul>
-			</div>
-		</div>
-	</section>
-	<section class="flex items-center justify-center h-(--header-height) bg-white px-6">
-		<div class="container flex gap-4 justify-start items-center">
-			<a href="@Model.Link("/")" class="mr-10 flex items-center">
-				<img src="@Model.Static("logo-elastic-horizontal-color.svg")" alt="Elastic" height="40" width="116">
-			</a>
-			@if (Model.Features.IsPrimaryNavEnabled)
-			{
-				@await RenderPartialAsync(_PrimaryNav.Create(primaryNavViewModel))
-			}
-			else
-			{
-				<div class="grow"></div>
-			}
-			<div role="search" class="shrink-0 h-10 w-20 md:w-50" autocomplete="off">
-				<div class="relative h-10">
-					<div class="rounded-full bg-linear-65 from-pink/[.4] to-teal/[.4] p-[2px] h-10">
-						<button id="default-search" class="flex gap-2 items-center justify-center md:justify-start h-full w-full py-2 px-4 bg-grey-10 text-grey-80 rounded-full focus-visible:outline-[blue]/[.3] focus-visible:outline-2">
-							<svg class="shrink-0 size-5" fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
-								<path d="M11.2709852,11.9779932 L15.14275,15.85075 C15.24075,15.94775 15.36875,15.99675 15.49675,15.99675 C15.62475,15.99675 15.75275,15.94775 15.85075,15.85075 C16.04575,15.65475 16.04575,15.33875 15.85075,15.14275 L12.2861494,11.5790625 C14.6668581,8.83239759 14.5527289,4.65636993 11.9437617,2.04675 C9.21444459,-0.68225 4.77355568,-0.68225 2.04623804,2.04675 C-0.682079347,4.77575 -0.682079347,9.21775 2.04623804,11.94675 C3.36890712,13.26875 5.12646738,13.99675 6.99499989,13.99675 C7.27093085,13.99675 7.49487482,13.77275 7.49487482,13.49675 C7.49487482,13.22075 7.27093085,12.99675 6.99499989,12.99675 C5.39240085,12.99675 3.88677755,12.37275 2.7530612,11.23975 C0.414646258,8.89975 0.414646258,5.09375 2.7530612,2.75375 C5.09047639,0.41375 8.89552438,0.41475 11.2369386,2.75375 C13.5753535,5.09375 13.5753535,8.89975 11.2369386,11.23975 C11.0419873,11.43475 11.0419873,11.75175 11.2369386,11.94675 C11.2479153,11.9577858 11.2592787,11.9682002 11.2709852,11.9779932 Z"/>
-							</svg>
-							<span class="hidden md:inline">Search</span>
-						</button>
-					</div>
-				</div>
-			</div>
-			<div class="hidden xl:flex grow xl:flex-none h-10">
-				<a href="https://cloud.elastic.co/registration" class="grow select-none cursor-pointer text-white text-nowrap bg-blue-elastic hover:bg-blue-elastic-100 focus:ring-4 focus:ring-blue-elastic-30 font-semibold rounded-sm px-6 py-2.5 focus:outline-none h-10 flex items-center justify-center">Start free trial</a>
-				@* <a href="https://elastic.co/contact" class="grow cursor-pointer text-white text-nowrap border-2 border-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-semibold rounded-sm px-6 py-2.5 text-center h-10 flex items-center justify-center">Contact Sales</a> *@
-			</div>
-			<div class="xl:hidden">
-				<input id="primary-nav-hamburger" type="checkbox" class="hidden"/>
-
-				<label for="@(Model.Features.IsPrimaryNavEnabled ? "primary-nav-hamburger" : "pages-nav-hamburger")">
-					<div class="cursor-pointer hover:text-black p-2">
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 @(Model.Features.IsPrimaryNavEnabled ? "group-has-[#primary-nav-hamburger:checked]/body:hidden" : "group-has-[#pages-nav-hamburger:checked]/body:hidden")">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
-						</svg>
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 hidden @(Model.Features.IsPrimaryNavEnabled ? "group-has-[#primary-nav-hamburger:checked]/body:block" : "group-has-[#pages-nav-hamburger:checked]/body:block")"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
-						</svg>
-					</div>
-				</label>
-			</div>
-		</div>
-	</section>
-</header>
+<div id="elastic-nav"></div>
+<script src="https://www.elastic.co/elastic-nav.js"></script>
 @if (Model.Features.IsPrimaryNavEnabled)
 {
  	@await RenderPartialAsync(_SecondaryNav.Create(Model))