From b2bbe529fe1defdfacd01f7907f19cec51beccb9 Mon Sep 17 00:00:00 2001 From: Jan Calanog Date: Tue, 11 Mar 2025 16:51:53 +0100 Subject: [PATCH 1/6] PoC: nav selector --- docs/_docset.yml | 2 +- src/Elastic.Markdown/Assets/main.ts | 25 +++--- src/Elastic.Markdown/Assets/styles.css | 3 +- src/Elastic.Markdown/Slices/HtmlWriter.cs | 3 +- .../Slices/Layout/_Header.cshtml | 77 +------------------ .../Slices/Layout/_PagesNav.cshtml | 1 + .../Slices/Layout/_TocTree.cshtml | 24 ++++-- src/Elastic.Markdown/Slices/_ViewModels.cs | 2 + 8 files changed, 37 insertions(+), 100 deletions(-) diff --git a/docs/_docset.yml b/docs/_docset.yml index fed81948b..0dccadb0c 100644 --- a/docs/_docset.yml +++ b/docs/_docset.yml @@ -11,7 +11,7 @@ subs: eck: "Elastic Cloud on Kubernetes" features: - primary-nav: false + primary-nav: true toc: - file: index.md diff --git a/src/Elastic.Markdown/Assets/main.ts b/src/Elastic.Markdown/Assets/main.ts index 559f77d07..9beae811d 100644 --- a/src/Elastic.Markdown/Assets/main.ts +++ b/src/Elastic.Markdown/Assets/main.ts @@ -1,5 +1,5 @@ // @ts-nocheck -import "htmx.org" +import htmx from "htmx.org" import "htmx-ext-preload" import {initTocNav} from "./toc-nav"; import {initHighlight} from "./hljs"; @@ -7,20 +7,6 @@ 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(); @@ -28,6 +14,15 @@ document.addEventListener('htmx:load', function() { initCopyButton(); initTabs(); initNav(); + + + const docsetSelector = $('#docset-selector'); + + docsetSelector.addEventListener('change', (event) => { + console.log(event.target.value) + htmx.ajax('get', event.target.value, { target: '#pages-nav', select: '#pages-nav' }).then() + }) + }); document.body.addEventListener('htmx:oobBeforeSwap', function(event) { diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css index 99a8da0a4..dfa28aac7 100644 --- a/src/Elastic.Markdown/Assets/styles.css +++ b/src/Elastic.Markdown/Assets/styles.css @@ -20,7 +20,8 @@ --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; } /*#default-search::-webkit-search-cancel-button {*/ diff --git a/src/Elastic.Markdown/Slices/HtmlWriter.cs b/src/Elastic.Markdown/Slices/HtmlWriter.cs index 19b4b6f29..cca1d43c2 100644 --- a/src/Elastic.Markdown/Slices/HtmlWriter.cs +++ b/src/Elastic.Markdown/Slices/HtmlWriter.cs @@ -28,7 +28,8 @@ private async Task RenderNavigation(string topLevelGroupId, MarkdownFile Tree = group ?? DocumentationSet.Tree, CurrentDocument = markdown, IsRoot = topLevelGroupId == DocumentationSet.Tree.Id, - Features = DocumentationSet.Configuration.Features + Features = DocumentationSet.Configuration.Features, + TopLevelTree = DocumentationSet.Tree.NavigationItems.OfType() }); return await slice.RenderAsync(cancellationToken: ctx); } diff --git a/src/Elastic.Markdown/Slices/Layout/_Header.cshtml b/src/Elastic.Markdown/Slices/Layout/_Header.cshtml index 4f56bc7d6..24afcafe0 100644 --- a/src/Elastic.Markdown/Slices/Layout/_Header.cshtml +++ b/src/Elastic.Markdown/Slices/Layout/_Header.cshtml @@ -101,81 +101,8 @@ ] }; } -
- -
-
- - Elastic - - @if (Model.Features.IsPrimaryNavEnabled) - { - @await RenderPartialAsync(_PrimaryNav.Create(primaryNavViewModel)) - } - else - { -
- } - - -
- - - -
-
-
-
+
+ @if (Model.Features.IsPrimaryNavEnabled) { @await RenderPartialAsync(_SecondaryNav.Create(Model)) diff --git a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml index 2183bee47..fe41b18c0 100644 --- a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml +++ b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml @@ -1,5 +1,6 @@ @inherits RazorSlice