Skip to content

Commit a74045c

Browse files
cotticotti
authored
Present doc page version selection in a dropdown (#1102)
* Present doc page version selection in a dropdown
1 parent 8f28d79 commit a74045c

File tree

7 files changed

+88
-34
lines changed

7 files changed

+88
-34
lines changed

‎src/Elastic.Markdown/Assets/pages-nav.ts‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -42,15 +42,9 @@ function isElementInViewport(parent: HTMLElement, child: HTMLElement): boolean {
4242
)
4343
}
4444

45-
export function initNav() {
46-
const pagesNav = $('#pages-nav')
47-
if (!pagesNav) {
48-
return
49-
}
50-
51-
const pagesDropdown = $('#pages-dropdown')
52-
if (pagesDropdown) {
53-
const anchors = $$('a', pagesDropdown)
45+
function setDropdown(dropdown: HTMLElement) {
46+
if (dropdown) {
47+
const anchors = $$('a', dropdown)
5448
anchors.forEach((a) => {
5549
a.addEventListener('mousedown', (e) => {
5650
e.preventDefault()
@@ -62,6 +56,18 @@ export function initNav() {
6256
})
6357
})
6458
}
59+
}
60+
61+
export function initNav() {
62+
const pagesNav = $('#pages-nav')
63+
if (!pagesNav) {
64+
return
65+
}
66+
67+
const pagesDropdown = $('#pages-dropdown')
68+
const pageVersionDropdown = $('#page-version-dropdown')
69+
setDropdown(pagesDropdown)
70+
setDropdown(pageVersionDropdown)
6571

6672
const navItems = $$(
6773
'a[href="' +

‎src/Elastic.Markdown/IO/HistoryMapping/HistoryMapper.cs‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@
44

55
namespace Elastic.Markdown.IO.HistoryMapping;
66

7+
public record LegacyPageMapping(string Url, string Version);
8+
79
public interface IHistoryMapper
810
{
9-
string? MapLegacyUrl(IReadOnlyCollection<string>? mappedPages);
11+
LegacyPageMapping? MapLegacyUrl(IReadOnlyCollection<string>? mappedPages);
1012
}
1113

1214
public record BypassHistoryMapper : IHistoryMapper
1315
{
14-
public string? MapLegacyUrl(IReadOnlyCollection<string>? mappedPages) => null;
16+
public LegacyPageMapping? MapLegacyUrl(IReadOnlyCollection<string>? mappedPages) => null;
1517
}

‎src/Elastic.Markdown/Slices/HtmlWriter.cs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ private async Task<string> RenderLayout(MarkdownFile markdown, MarkdownDocument
111111

112112
var siteName = DocumentationSet.Tree.Index?.Title ?? "Elastic Documentation";
113113

114-
var legacyUrl = HistoryMapper.MapLegacyUrl(markdown.YamlFrontMatter?.MappedPages);
114+
var legacyPage = HistoryMapper.MapLegacyUrl(markdown.YamlFrontMatter?.MappedPages);
115115

116116
var slice = Index.Create(new IndexViewModel
117117
{
@@ -136,7 +136,7 @@ private async Task<string> RenderLayout(MarkdownFile markdown, MarkdownDocument
136136
Features = DocumentationSet.Configuration.Features,
137137
StaticFileContentHashProvider = StaticFileContentHashProvider,
138138
ReportIssueUrl = reportUrl,
139-
LegacyUrl = legacyUrl
139+
LegacyPage = legacyPage
140140
});
141141
return await slice.RenderAsync(cancellationToken: ctx);
142142
}

‎src/Elastic.Markdown/Slices/Index.cshtml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
Features = Model.Features,
2222
StaticFileContentHashProvider = Model.StaticFileContentHashProvider,
2323
ReportIssueUrl = Model.ReportIssueUrl,
24-
LegacyUrl = Model.LegacyUrl
24+
LegacyPage = Model.LegacyPage
2525
};
2626
}
2727
<section id="elastic-docs-v3">

‎src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml‎

Lines changed: 60 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,63 @@
1+
@using Elastic.Markdown.Helpers;
12
@inherits RazorSlice<LayoutViewModel>
23
<aside class="sidebar hidden lg:block order-3">
3-
<nav id="toc-nav" class="sidebar-nav pl-4">
4-
<div class="pt-6 pb-20">
4+
<nav id="toc-nav" class="sidebar-nav">
5+
<div id="page-version-dropdown" tabindex="1"
6+
class="mt-6 block group font-sans text-sm relative z-50">
7+
<button
8+
class="text-left border-1 rounded-2xl grid grid-cols-[1fr_auto] cursor-pointer font-semibold gap-1 hover:text-black pl-4 pr-1 py-1 group-open:border-b-1 border-grey-20">
9+
<div>
10+
<span class="page-version-dropdown_active text-ink">
11+
Current version
12+
</span>
13+
</div>
14+
<div class="flex items-center my-auto justify-center size-5 hover:bg-grey-20 rounded-xl">
15+
<svg
16+
xmlns="http://www.w3.org/2000/svg"
17+
fill="none"
18+
viewBox="0 0 24 24"
19+
stroke-width="1.5"
20+
stroke="currentColor"
21+
class="w-4 group-open:rotate-180">
22+
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 9.25-7.5 8.5-7.5-8.5"/>
23+
</svg>
24+
</div>
25+
</button>
26+
<div class="hidden group-focus-within:block left-0 right-0 absolute top-full w-max">
27+
<ul class="mt-1 py-0 bg-white border-1 border-grey-20 rounded-sm shadow-md">
28+
<li class="block">
29+
<a
30+
class="block py-2 px-4 hover:underline hover:text-black hover:bg-grey-10 active:bg-blue-elastic-70 active:text-white font-semibold text-ink rounded-sm"
31+
@Htmx.GetNavHxAttributes(false, "mouseover")
32+
>
33+
Current version ✓
34+
</a>
35+
</li>
36+
<li class="block">
37+
@if (Model.LegacyPage is not null)
38+
{
39+
<a
40+
class="block py-2 px-4 hover:underline hover:text-black hover:bg-grey-10 active:bg-blue-elastic-70 active:text-white font-semibold text-ink rounded-sm"
41+
href="@Model.LegacyPage.Url"
42+
@Htmx.GetNavHxAttributes(false, "mouseover")>
43+
Previous
44+
version @(string.IsNullOrEmpty(Model.LegacyPage.Version) ? string.Empty : $"({Model.LegacyPage.Version})")
45+
</a>
46+
}
47+
else
48+
{
49+
<a
50+
class="block py-2 px-4 font-semibold text-grey-60 cursor-default"
51+
@Htmx.GetNavHxAttributes(false, "mouseover")
52+
title="Current is the only version of this page.">
53+
Previous version
54+
</a>
55+
}
56+
</li>
57+
</ul>
58+
</div>
59+
</div>
60+
<div class="pt-6 pb-20 pl-4">
561
@if (Model.PageTocItems.Count > 0)
662
{
763
<div>
@@ -23,20 +79,9 @@
2379
</div>
2480
</div>
2581
}
26-
82+
2783
<ul class="mt-6">
28-
@if (Model.LegacyUrl is not null)
29-
{
30-
<li class="edit-this-page not-first:mt-1">
31-
<a href="@Model.LegacyUrl" class="link text-sm" target="_blank">
32-
<svg class="link-icon"
33-
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="1 0 22 22" stroke-width="1.5" stroke="currentColor">
34-
<path stroke-linecap="round" stroke-linejoin="round" d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z" />
35-
</svg>
36-
View previous version
37-
</a>
38-
</li>
39-
}
84+
4085
@if (Model.GithubEditUrl is not null)
4186
{
4287
<li class="edit-this-page not-first:mt-1">

‎src/Elastic.Markdown/Slices/_ViewModels.cs‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
using Elastic.Markdown.IO;
66
using Elastic.Markdown.IO.Configuration;
7+
using Elastic.Markdown.IO.HistoryMapping;
78
using Elastic.Markdown.IO.Navigation;
89
using Elastic.Markdown.Myst.FrontMatter;
910

@@ -24,7 +25,7 @@ public class IndexViewModel
2425
public required MarkdownFile? NextDocument { get; init; }
2526

2627
public required string NavigationHtml { get; init; }
27-
public required string? LegacyUrl { get; init; }
28+
public required LegacyPageMapping? LegacyPage { get; init; }
2829
public required string? UrlPathPrefix { get; init; }
2930
public required string? GithubEditUrl { get; init; }
3031
public required string? ReportIssueUrl { get; init; }
@@ -53,7 +54,7 @@ public class LayoutViewModel
5354
public required MarkdownFile? Previous { get; init; }
5455
public required MarkdownFile? Next { get; init; }
5556
public required string NavigationHtml { get; init; }
56-
public required string? LegacyUrl { get; init; }
57+
public required LegacyPageMapping? LegacyPage { get; init; }
5758
public required string? UrlPathPrefix { get; init; }
5859
public required string? GithubEditUrl { get; init; }
5960
public required string? ReportIssueUrl { get; init; }

‎src/docs-assembler/Mapping/PageHistoryMapper.cs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ public record PageHistoryMapper : IHistoryMapper
1212

1313
public PageHistoryMapper(IReadOnlyDictionary<string, string> previousUrls) => PreviousUrls = previousUrls;
1414

15-
public string? MapLegacyUrl(IReadOnlyCollection<string>? mappedPages)
15+
public LegacyPageMapping? MapLegacyUrl(IReadOnlyCollection<string>? mappedPages)
1616
{
1717
if (mappedPages is null)
1818
return null;
@@ -23,11 +23,11 @@ public record PageHistoryMapper : IHistoryMapper
2323
if (versionMarker.Key != string.Empty && versionMarker.Value != "undefined")
2424
{
2525
return mappedPage.Contains("current")
26-
? mappedPage.Replace($"{versionMarker.Key}current/", $"{versionMarker.Key}{versionMarker.Value}/")
26+
? new LegacyPageMapping(mappedPage.Replace($"{versionMarker.Key}current/", $"{versionMarker.Key}{versionMarker.Value}/"), versionMarker.Value)
2727
: null;
2828
}
2929
}
3030

31-
return mappedPages.FirstOrDefault();
31+
return new LegacyPageMapping(mappedPages.FirstOrDefault() ?? string.Empty, string.Empty);
3232
}
3333
}

0 commit comments

Comments
 (0)