diff --git a/src/Elastic.Markdown/Assets/copybutton.ts b/src/Elastic.Markdown/Assets/copybutton.ts index 35cb8da22..5a2581da1 100644 --- a/src/Elastic.Markdown/Assets/copybutton.ts +++ b/src/Elastic.Markdown/Assets/copybutton.ts @@ -256,6 +256,5 @@ var copyTargetText = (trigger) => { } export function initCopyButton() { - console.log("initCopyButton"); runWhenDOMLoaded(addCopyButtonToCodeCells) } diff --git a/src/Elastic.Markdown/Assets/main.ts b/src/Elastic.Markdown/Assets/main.ts index e3b7a4e78..c47ef4f2f 100644 --- a/src/Elastic.Markdown/Assets/main.ts +++ b/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(); diff --git a/src/Elastic.Markdown/Assets/pages-nav.ts b/src/Elastic.Markdown/Assets/pages-nav.ts index ff9df8073..8c8d3e977 100644 --- a/src/Elastic.Markdown/Assets/pages-nav.ts +++ b/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(); diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css index e16fa0016..e558e9e29 100644 --- a/src/Elastic.Markdown/Assets/styles.css +++ b/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); + } +} diff --git a/src/Elastic.Markdown/Assets/tabs.ts b/src/Elastic.Markdown/Assets/tabs.ts index cfc692dd0..1af4c9762 100644 --- a/src/Elastic.Markdown/Assets/tabs.ts +++ b/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 }); } diff --git a/src/Elastic.Markdown/DocumentationGenerator.cs b/src/Elastic.Markdown/DocumentationGenerator.cs index ad1c56cb8..6493415e2 100644 --- a/src/Elastic.Markdown/DocumentationGenerator.cs +++ b/src/Elastic.Markdown/DocumentationGenerator.cs @@ -252,6 +252,7 @@ private async Task CopyFileFsAware(DocumentationFile file, IFileInfo outputFile, public async Task 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); } } diff --git a/src/Elastic.Markdown/Slices/HtmlWriter.cs b/src/Elastic.Markdown/Slices/HtmlWriter.cs index 71851cfdc..4a7e8a660 100644 --- a/src/Elastic.Markdown/Slices/HtmlWriter.cs +++ b/src/Elastic.Markdown/Slices/HtmlWriter.cs @@ -40,10 +40,15 @@ private async Task RenderNavigation(MarkdownFile markdown, Cancel ctx = private string? _renderedNavigation; - public async Task RenderLayout(MarkdownFile markdown, Cancel ctx = default) + public async Task RenderPageHtml(MarkdownFile markdown, Cancel ctx = default) { var document = await markdown.ParseFullAsync(ctx); var html = markdown.CreateHtml(document); + return html; + } + + public async Task 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 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 RenderLayout(MarkdownFile markdown, Cancel ctx = defau return await slice.RenderAsync(cancellationToken: ctx); } + + public async Task 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); } } diff --git a/src/Elastic.Markdown/Slices/Layout/_Breadcrumbs.cshtml b/src/Elastic.Markdown/Slices/Layout/_Breadcrumbs.cshtml index 768fb0852..b185e1062 100644 --- a/src/Elastic.Markdown/Slices/Layout/_Breadcrumbs.cshtml +++ b/src/Elastic.Markdown/Slices/Layout/_Breadcrumbs.cshtml @@ -1,4 +1,4 @@ -@inherits RazorSlice +@inherits RazorSlice
  1. diff --git a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml index 52d8ed4db..8be0139c8 100644 --- a/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml +++ b/src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml @@ -1,12 +1,13 @@ @inherits RazorSlice - diff --git a/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml b/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml index 208aada6b..068eafafb 100644 --- a/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml +++ b/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml @@ -1,5 +1,5 @@ -@inherits RazorSlice -