Skip to content

Commit f5a72c1

Browse files
reakaleekreakaleek
authored
Enable new design by default (#516)
* Enable new design by default * Fix tests
1 parent b5a052d commit f5a72c1

File tree

11 files changed

+229
-457
lines changed

11 files changed

+229
-457
lines changed

‎src/Elastic.Markdown/Myst/SectionedHeadingRenderer.cs

Lines changed: 15 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -38,43 +38,20 @@ protected override void Write(HtmlRenderer renderer, HeadingBlock obj)
3838

3939
var slug = slugTarget.Slugify();
4040

41-
var isRedesign = Environment.GetEnvironmentVariable("REDESIGN") == "true";
42-
43-
if (isRedesign)
44-
{
45-
renderer.Write(@"<div class=""heading-wrapper"" id=""");
46-
renderer.Write(slug);
47-
renderer.Write(@""">");
48-
renderer.Write('<');
49-
renderer.Write(headingText);
50-
renderer.WriteAttributes(obj);
51-
renderer.Write('>');
52-
renderer.Write($"""<a class="headerlink" href="#{slug}">""");
53-
renderer.WriteLeafInline(obj);
54-
renderer.Write("</a>");
55-
renderer.Write("</");
56-
renderer.Write(headingText);
57-
renderer.WriteLine('>');
58-
renderer.Write("</div>");
59-
renderer.EnsureLine();
60-
}
61-
else
62-
{
63-
renderer.Write(@"<section id=""");
64-
renderer.Write(slug);
65-
renderer.Write(@""">");
66-
renderer.Write('<');
67-
renderer.Write(headingText);
68-
renderer.WriteAttributes(obj);
69-
renderer.Write('>');
70-
renderer.WriteLeafInline(obj);
71-
// language=html
72-
renderer.WriteLine($@"<a class=""headerlink"" href=""#{slug}"" title=""Link to this heading"">¶</a>");
73-
renderer.Write("</");
74-
renderer.Write(headingText);
75-
renderer.WriteLine('>');
76-
renderer.Write("</section>");
77-
renderer.EnsureLine();
78-
}
41+
renderer.Write(@"<div class=""heading-wrapper"" id=""");
42+
renderer.Write(slug);
43+
renderer.Write(@""">");
44+
renderer.Write('<');
45+
renderer.Write(headingText);
46+
renderer.WriteAttributes(obj);
47+
renderer.Write('>');
48+
renderer.Write($"""<a class="headerlink" href="#{slug}">""");
49+
renderer.WriteLeafInline(obj);
50+
renderer.Write("</a>");
51+
renderer.Write("</");
52+
renderer.Write(headingText);
53+
renderer.WriteLine('>');
54+
renderer.Write("</div>");
55+
renderer.EnsureLine();
7956
}
8057
}

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

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1 @@
11
@inherits RazorSlice<LayoutViewModel>
2-
@if (Model.IsRedesign)
3-
{
4-
}
5-
else
6-
{
7-
<footer class="sy-foot">
8-
<div class="sy-foot-inner sy-container mx-auto">
9-
<div class="sy-foot-reserved md:flex justify-between items-center">
10-
<div class="sy-foot-copyright"><p>2024, Elasticsearch B.V. All Rights Reserved.</p>
11-
12-
<p> Made with <a href="https://github.com/elastic/docs-builder">Elastic.Markdown</a> and <a href="https://shibuya.lepture.com">Shibuya theme</a>.
13-
</p>
14-
</div>
15-
<div class="sy-foot-socials"></div>
16-
</div>
17-
</div>
18-
</footer>
19-
}

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

Lines changed: 31 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,36 @@
11
@inherits RazorSlice<LayoutViewModel>
2-
@if (Model.IsRedesign)
3-
{
4-
<aside class="sidebar hidden lg:block order-3 border-l-1 border-l-gray-200 w-80">
5-
<nav id="toc-nav" class="sidebar-nav pl-6">
6-
<div class="pt-6 pb-20">
7-
@if (Model.PageTocItems.Count > 0)
8-
{
9-
<div class="mb-4">
10-
<div class="font-bold mb-2">On this page</div>
11-
<ul class="block w-full relative">
12-
<div class="toc-progress-indicator absolute top-0 h-0 left-2 w-[1px] bg-blue-elastic transition-all duration-200 ease-out "></div>
13-
@foreach (var item in Model.PageTocItems)
14-
{
15-
<li class="has-[:hover]:border-l-gray-500 items-center ml-2 pl-4 border-l-1 border-l-gray-200 has-[.current]:border-l-blue-elastic!">
16-
<a
17-
class="sidebar-link inline-block my-1 @(item.Level == 3 ? "ml-4" : string.Empty)"
18-
href="#@item.Slug">
19-
@item.Heading
20-
</a>
21-
</li>
22-
}
23-
</ul>
24-
</div>
25-
}
26-
<div class="edit-this-page">
27-
<a href="@Model.GithubEditUrl" class="link">
28-
Edit this page
29-
<svg class="link-arrow"
30-
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
31-
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
32-
</svg>
33-
</a>
2+
<aside class="sidebar hidden lg:block order-3 border-l-1 border-l-gray-200 w-80">
3+
<nav id="toc-nav" class="sidebar-nav pl-6">
4+
<div class="pt-6 pb-20">
5+
@if (Model.PageTocItems.Count > 0)
6+
{
7+
<div class="mb-4">
8+
<div class="font-bold mb-2">On this page</div>
9+
<ul class="block w-full relative">
10+
<div class="toc-progress-indicator absolute top-0 h-0 left-2 w-[1px] bg-blue-elastic transition-all duration-200 ease-out "></div>
11+
@foreach (var item in Model.PageTocItems)
12+
{
13+
<li class="has-[:hover]:border-l-gray-500 items-center ml-2 pl-4 border-l-1 border-l-gray-200 has-[.current]:border-l-blue-elastic!">
14+
<a
15+
class="sidebar-link inline-block my-1 @(item.Level == 3 ? "ml-4" : string.Empty)"
16+
href="#@item.Slug">
17+
@item.Heading
18+
</a>
19+
</li>
20+
}
21+
</ul>
3422
</div>
35-
</div>
36-
37-
</nav>
38-
</aside>
39-
}
40-
else
41-
{
42-
<aside id="rside" class="sy-rside pb-3 w-64 shrink-0 order-last">
43-
<button class="rside-close js-menu xl:hidden" aria-label="Close Table of Contents" type="button" aria-controls="rside" aria-expanded="false">
44-
<i class="i-lucide close"></i>
45-
</button>
46-
<div class="sy-scrollbar sy-rside-inner px-6 xl:top-16 xl:sticky xl:pl-0 pt-6 pb-4">
47-
<div class="localtoc">
48-
<h3>On this page</h3>
49-
<ul>
50-
@foreach (var item in Model.PageTocItems)
51-
{
52-
<li class="py-1"><a class="text-sm leading-[1.2em] tracking-[-0.02em]" href="#@item.Slug">@item.Level - @item.Heading</a></li>
53-
}
54-
</ul>
55-
</div>
23+
}
5624
<div class="edit-this-page">
57-
<a href="@Model.GithubEditUrl">Edit this page</a>
25+
<a href="@Model.GithubEditUrl" class="link">
26+
Edit this page
27+
<svg class="link-arrow"
28+
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
29+
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
30+
</svg>
31+
</a>
5832
</div>
5933
</div>
60-
</aside>
61-
<div class="rside-overlay js-menu" role="button" aria-label="Close Table of Contents" aria-controls="rside" aria-expanded="false"></div>
62-
}
34+
35+
</nav>
36+
</aside>

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

Lines changed: 11 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,12 @@
11
@inherits RazorSlice<NavigationViewModel>
2-
3-
@if (Model.IsRedesign)
4-
{
5-
<div class="pt-6 pb-20">
6-
<div class="font-bold">Elastic Docs</div>
7-
<ul class="block w-full">
8-
@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
9-
{
10-
Level = Model.Tree.Depth,
11-
SubTree = Model.Tree,
12-
CurrentDocument = Model.CurrentDocument
13-
}))
14-
</ul>
15-
</div>
16-
}
17-
else
18-
{
19-
<aside id="lside" class="sy-lside md:w-72 md:shrink-0 print:hidden">
20-
<div class="sy-lside-inner md:sticky">
21-
<div class="sy-scrollbar p-6">
22-
<div class="globaltoc" data-expand-depth="0">
23-
<p class="caption" role="heading" aria-level="3">
24-
<span class="caption-text">Elastic Docs Guide</span>
25-
</p>
26-
<ul class="current">@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
27-
{
28-
Level = Model.Tree.Depth,
29-
SubTree = Model.Tree,
30-
CurrentDocument = Model.CurrentDocument
31-
}))
32-
</ul>
33-
</div>
34-
</div>
35-
</div>
36-
</aside>
37-
<div class="lside-overlay js-menu" role="button" aria-label="Close left sidebar" aria-controls="lside" aria-expanded="false"></div>
38-
}
2+
<div class="pt-6 pb-20">
3+
<div class="font-bold">Elastic Docs</div>
4+
<ul class="block w-full">
5+
@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
6+
{
7+
Level = Model.Tree.Depth,
8+
SubTree = Model.Tree,
9+
CurrentDocument = Model.CurrentDocument
10+
}))
11+
</ul>
12+
</div>

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

Lines changed: 58 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,67 @@
11
@using Elastic.Markdown.Helpers
22
@using Elastic.Markdown.IO.Navigation
33
@inherits RazorSlice<NavigationTreeItem>
4-
@if (Model.IsRedesign)
4+
@foreach (var item in Model.SubTree.NavigationItems)
55
{
6-
@foreach (var item in Model.SubTree.NavigationItems)
6+
if (item is FileNavigation file)
77
{
8-
if (item is FileNavigation file)
9-
{
10-
var f = file.File;
11-
var isCurrent = f == Model.CurrentDocument;
12-
<li class="block ml-2 pl-2 border-l-1 border-l-gray-200 group/li @(isCurrent ? "current" : string.Empty)">
13-
<div class="flex">
14-
<a
15-
class="sidebar-link my-1 ml-5 group-[.current]/li:text-blue-elastic! @(isCurrent ? "" : string.Empty)"
16-
href="@f.Url"
17-
@(isCurrent ? "aria-current=page" : string.Empty)>
18-
@f.NavigationTitle
19-
</a>
20-
</div>
21-
</li>
22-
}
23-
else if (item is GroupNavigation folder)
24-
{
25-
var g = folder.Group;
26-
var isCurrent = g.Index == Model.CurrentDocument;
27-
var slug = g.Index?.Title.Slugify();
28-
const int initialExpandLevel = 1;
29-
var containsCurrent = g.HoldsCurrent(Model.CurrentDocument) || g.ContainsCurrentPage(Model.CurrentDocument);
30-
var shouldInitiallyExpand = containsCurrent || g.Depth <= initialExpandLevel;
31-
<li class="flex flex-wrap @(g.Depth > 1 ? "ml-2 pl-2 border-l-1 border-l-gray-200" : string.Empty)">
32-
<label for="@slug" class="peer group/label flex items-center overflow-hidden @(g.Depth == 1 ? "mt-2" : "")">
33-
<svg
34-
xmlns="http://www.w3.org/2000/svg"
35-
fill="none"
36-
viewBox="0 0 24 24"
37-
stroke-width="1.5"
38-
stroke="currentColor"
39-
class="w-4 mr-1 shrink -rotate-90 group-has-checked/label:rotate-0 cursor-pointer text-ink">
40-
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
41-
</svg>
42-
<input
43-
id="@slug"
44-
type="checkbox"
45-
class="hidden"
46-
aria-hidden="true"
47-
data-should-expand="@((containsCurrent).ToLowerString())"
48-
@(shouldInitiallyExpand ? "checked" : string.Empty)
49-
>
50-
<a
51-
href="@g.Index?.Url"
52-
class="sidebar-link inline-block my-1 @(g.Depth == 1 ? "uppercase tracking-[0.05em] text-ink-light font-semibold" : string.Empty) @(containsCurrent ? "font-semibold" : string.Empty) @(isCurrent ? "current text-blue-elastic!" : string.Empty)">
53-
@g.Index?.NavigationTitle
54-
</a>
55-
</label>
56-
@if (g.NavigationItems.Count > 0)
57-
{
58-
<ul class="h-0 w-full overflow-y-hidden peer-has-checked:h-auto peer-has-[:focus]:h-auto has-[:focus]:h-auto peer-has-checked:my-1" data-has-current="@g.ContainsCurrentPage(Model.CurrentDocument)">
59-
@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
60-
{
61-
Level = g.Depth,
62-
CurrentDocument = Model.CurrentDocument,
63-
SubTree = g
64-
}))
65-
</ul>
66-
}
67-
</li>
68-
}
8+
var f = file.File;
9+
var isCurrent = f == Model.CurrentDocument;
10+
<li class="block ml-2 pl-2 border-l-1 border-l-gray-200 group/li @(isCurrent ? "current" : string.Empty)">
11+
<div class="flex">
12+
<a
13+
class="sidebar-link my-1 ml-5 group-[.current]/li:text-blue-elastic! @(isCurrent ? "" : string.Empty)"
14+
href="@f.Url"
15+
@(isCurrent ? "aria-current=page" : string.Empty)>
16+
@f.NavigationTitle
17+
</a>
18+
</div>
19+
</li>
6920
}
70-
}
71-
else
72-
{
73-
@foreach (var item in Model.SubTree.NavigationItems)
21+
else if (item is GroupNavigation folder)
7422
{
75-
if (item is FileNavigation file)
76-
{
77-
var f = file.File;
78-
var current = f == Model.CurrentDocument ? " current" : string.Empty;
79-
<li class="toctree-l@(Model.SubTree.Depth + 1)@current"><a class="@(current.Trim()) reference internal" href="@f.Url">@f.NavigationTitle</a></li>
80-
}
81-
else if (item is GroupNavigation folder)
82-
{
83-
var g = folder.Group;
84-
var current = g.HoldsCurrent(Model.CurrentDocument) ? " current" : string.Empty;
85-
var currentFile = g.Index == Model.CurrentDocument ? " current" : string.Empty;
86-
<li class="toctree-l@(g.Depth)@current"><a class="reference internal@(currentFile)" href="@g.Index?.Url">@g.Index?.NavigationTitle</a>@if (@g.NavigationItems.Count > 0) {<ul class="@(current.Trim())">
87-
@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
88-
{
89-
Level = g.Depth,
90-
CurrentDocument = Model.CurrentDocument,
91-
SubTree = g
92-
}))
93-
</ul>
94-
}
95-
</li>
96-
}
23+
var g = folder.Group;
24+
var isCurrent = g.Index == Model.CurrentDocument;
25+
var slug = g.Index?.Title.Slugify();
26+
const int initialExpandLevel = 1;
27+
var containsCurrent = g.HoldsCurrent(Model.CurrentDocument) || g.ContainsCurrentPage(Model.CurrentDocument);
28+
var shouldInitiallyExpand = containsCurrent || g.Depth <= initialExpandLevel;
29+
<li class="flex flex-wrap @(g.Depth > 1 ? "ml-2 pl-2 border-l-1 border-l-gray-200" : string.Empty)">
30+
<label for="@slug" class="peer group/label flex items-center overflow-hidden @(g.Depth == 1 ? "mt-2" : "")">
31+
<svg
32+
xmlns="http://www.w3.org/2000/svg"
33+
fill="none"
34+
viewBox="0 0 24 24"
35+
stroke-width="1.5"
36+
stroke="currentColor"
37+
class="w-4 mr-1 shrink -rotate-90 group-has-checked/label:rotate-0 cursor-pointer text-ink">
38+
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
39+
</svg>
40+
<input
41+
id="@slug"
42+
type="checkbox"
43+
class="hidden"
44+
aria-hidden="true"
45+
data-should-expand="@((containsCurrent).ToLowerString())"
46+
@(shouldInitiallyExpand ? "checked" : string.Empty)
47+
>
48+
<a
49+
href="@g.Index?.Url"
50+
class="sidebar-link inline-block my-1 @(g.Depth == 1 ? "uppercase tracking-[0.05em] text-ink-light font-semibold" : string.Empty) @(containsCurrent ? "font-semibold" : string.Empty) @(isCurrent ? "current text-blue-elastic!" : string.Empty)">
51+
@g.Index?.NavigationTitle
52+
</a>
53+
</label>
54+
@if (g.NavigationItems.Count > 0)
55+
{
56+
<ul class="h-0 w-full overflow-y-hidden peer-has-checked:h-auto peer-has-[:focus]:h-auto has-[:focus]:h-auto peer-has-checked:my-1" data-has-current="@g.ContainsCurrentPage(Model.CurrentDocument)">
57+
@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
58+
{
59+
Level = g.Depth,
60+
CurrentDocument = Model.CurrentDocument,
61+
SubTree = g
62+
}))
63+
</ul>
64+
}
65+
</li>
9766
}
9867
}

0 commit comments

Comments
 (0)