Skip to content

Enable new design by default #516

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 17, 2025
Merged

Enable new design by default #516

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7c0685b
Enable new design by default
reakaleek Feb 17, 2025
978d0dc
Fix tests
reakaleek Feb 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 15 additions & 38 deletions src/Elastic.Markdown/Myst/SectionedHeadingRenderer.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,43 +38,20 @@ protected override void Write(HtmlRenderer renderer, HeadingBlock obj)

var slug = slugTarget.Slugify();

var isRedesign = Environment.GetEnvironmentVariable("REDESIGN") == "true";

if (isRedesign)
{
renderer.Write(@"<div class=""heading-wrapper"" id=""");
renderer.Write(slug);
renderer.Write(@""">");
renderer.Write('<');
renderer.Write(headingText);
renderer.WriteAttributes(obj);
renderer.Write('>');
renderer.Write($"""<a class="headerlink" href="#{slug}">""");
renderer.WriteLeafInline(obj);
renderer.Write("</a>");
renderer.Write("</");
renderer.Write(headingText);
renderer.WriteLine('>');
renderer.Write("</div>");
renderer.EnsureLine();
}
else
{
renderer.Write(@"<section id=""");
renderer.Write(slug);
renderer.Write(@""">");
renderer.Write('<');
renderer.Write(headingText);
renderer.WriteAttributes(obj);
renderer.Write('>');
renderer.WriteLeafInline(obj);
// language=html
renderer.WriteLine($@"<a class=""headerlink"" href=""#{slug}"" title=""Link to this heading"">¶</a>");
renderer.Write("</");
renderer.Write(headingText);
renderer.WriteLine('>');
renderer.Write("</section>");
renderer.EnsureLine();
}
renderer.Write(@"<div class=""heading-wrapper"" id=""");
renderer.Write(slug);
renderer.Write(@""">");
renderer.Write('<');
renderer.Write(headingText);
renderer.WriteAttributes(obj);
renderer.Write('>');
renderer.Write($"""<a class="headerlink" href="#{slug}">""");
renderer.WriteLeafInline(obj);
renderer.Write("</a>");
renderer.Write("</");
renderer.Write(headingText);
renderer.WriteLine('>');
renderer.Write("</div>");
renderer.EnsureLine();
}
}
18 changes: 0 additions & 18 deletions src/Elastic.Markdown/Slices/Layout/_Footer.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1 @@
@inherits RazorSlice<LayoutViewModel>
@if (Model.IsRedesign)
{
}
else
{
<footer class="sy-foot">
<div class="sy-foot-inner sy-container mx-auto">
<div class="sy-foot-reserved md:flex justify-between items-center">
<div class="sy-foot-copyright"><p>2024, Elasticsearch B.V. All Rights Reserved.</p>

<p> Made with <a href="https://github.com/elastic/docs-builder">Elastic.Markdown</a> and <a href="https://shibuya.lepture.com">Shibuya theme</a>.
</p>
</div>
<div class="sy-foot-socials"></div>
</div>
</div>
</footer>
}
88 changes: 31 additions & 57 deletions src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,36 @@
@inherits RazorSlice<LayoutViewModel>
@if (Model.IsRedesign)
{
<aside class="sidebar hidden lg:block order-3 border-l-1 border-l-gray-200 w-80">
<nav id="toc-nav" class="sidebar-nav pl-6">
<div class="pt-6 pb-20">
@if (Model.PageTocItems.Count > 0)
{
<div class="mb-4">
<div class="font-bold mb-2">On this page</div>
<ul class="block w-full relative">
<div class="toc-progress-indicator absolute top-0 h-0 left-2 w-[1px] bg-blue-elastic transition-all duration-200 ease-out "></div>
@foreach (var item in Model.PageTocItems)
{
<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!">
<a
class="sidebar-link inline-block my-1 @(item.Level == 3 ? "ml-4" : string.Empty)"
href="#@item.Slug">
@item.Heading
</a>
</li>
}
</ul>
</div>
}
<div class="edit-this-page">
<a href="@Model.GithubEditUrl" class="link">
Edit this page
<svg class="link-arrow"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
</svg>
</a>
<aside class="sidebar hidden lg:block order-3 border-l-1 border-l-gray-200 w-80">
<nav id="toc-nav" class="sidebar-nav pl-6">
<div class="pt-6 pb-20">
@if (Model.PageTocItems.Count > 0)
{
<div class="mb-4">
<div class="font-bold mb-2">On this page</div>
<ul class="block w-full relative">
<div class="toc-progress-indicator absolute top-0 h-0 left-2 w-[1px] bg-blue-elastic transition-all duration-200 ease-out "></div>
@foreach (var item in Model.PageTocItems)
{
<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!">
<a
class="sidebar-link inline-block my-1 @(item.Level == 3 ? "ml-4" : string.Empty)"
href="#@item.Slug">
@item.Heading
</a>
</li>
}
</ul>
</div>
</div>

</nav>
</aside>
}
else
{
<aside id="rside" class="sy-rside pb-3 w-64 shrink-0 order-last">
<button class="rside-close js-menu xl:hidden" aria-label="Close Table of Contents" type="button" aria-controls="rside" aria-expanded="false">
<i class="i-lucide close"></i>
</button>
<div class="sy-scrollbar sy-rside-inner px-6 xl:top-16 xl:sticky xl:pl-0 pt-6 pb-4">
<div class="localtoc">
<h3>On this page</h3>
<ul>
@foreach (var item in Model.PageTocItems)
{
<li class="py-1"><a class="text-sm leading-[1.2em] tracking-[-0.02em]" href="#@item.Slug">@item.Level - @item.Heading</a></li>
}
</ul>
</div>
}
<div class="edit-this-page">
<a href="@Model.GithubEditUrl">Edit this page</a>
<a href="@Model.GithubEditUrl" class="link">
Edit this page
<svg class="link-arrow"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
</svg>
</a>
</div>
</div>
</aside>
<div class="rside-overlay js-menu" role="button" aria-label="Close Table of Contents" aria-controls="rside" aria-expanded="false"></div>
}

</nav>
</aside>
48 changes: 11 additions & 37 deletions src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,12 @@
@inherits RazorSlice<NavigationViewModel>

@if (Model.IsRedesign)
{
<div class="pt-6 pb-20">
<div class="font-bold">Elastic Docs</div>
<ul class="block w-full">
@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
{
Level = Model.Tree.Depth,
SubTree = Model.Tree,
CurrentDocument = Model.CurrentDocument
}))
</ul>
</div>
}
else
{
<aside id="lside" class="sy-lside md:w-72 md:shrink-0 print:hidden">
<div class="sy-lside-inner md:sticky">
<div class="sy-scrollbar p-6">
<div class="globaltoc" data-expand-depth="0">
<p class="caption" role="heading" aria-level="3">
<span class="caption-text">Elastic Docs Guide</span>
</p>
<ul class="current">@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
{
Level = Model.Tree.Depth,
SubTree = Model.Tree,
CurrentDocument = Model.CurrentDocument
}))
</ul>
</div>
</div>
</div>
</aside>
<div class="lside-overlay js-menu" role="button" aria-label="Close left sidebar" aria-controls="lside" aria-expanded="false"></div>
}
<div class="pt-6 pb-20">
<div class="font-bold">Elastic Docs</div>
<ul class="block w-full">
@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
{
Level = Model.Tree.Depth,
SubTree = Model.Tree,
CurrentDocument = Model.CurrentDocument
}))
</ul>
</div>
147 changes: 58 additions & 89 deletions src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,98 +1,67 @@
@using Elastic.Markdown.Helpers
@using Elastic.Markdown.IO.Navigation
@inherits RazorSlice<NavigationTreeItem>
@if (Model.IsRedesign)
@foreach (var item in Model.SubTree.NavigationItems)
{
@foreach (var item in Model.SubTree.NavigationItems)
if (item is FileNavigation file)
{
if (item is FileNavigation file)
{
var f = file.File;
var isCurrent = f == Model.CurrentDocument;
<li class="block ml-2 pl-2 border-l-1 border-l-gray-200 group/li @(isCurrent ? "current" : string.Empty)">
<div class="flex">
<a
class="sidebar-link my-1 ml-5 group-[.current]/li:text-blue-elastic! @(isCurrent ? "" : string.Empty)"
href="@f.Url"
@(isCurrent ? "aria-current=page" : string.Empty)>
@f.NavigationTitle
</a>
</div>
</li>
}
else if (item is GroupNavigation folder)
{
var g = folder.Group;
var isCurrent = g.Index == Model.CurrentDocument;
var slug = g.Index?.Title.Slugify();
const int initialExpandLevel = 1;
var containsCurrent = g.HoldsCurrent(Model.CurrentDocument) || g.ContainsCurrentPage(Model.CurrentDocument);
var shouldInitiallyExpand = containsCurrent || g.Depth <= initialExpandLevel;
<li class="flex flex-wrap @(g.Depth > 1 ? "ml-2 pl-2 border-l-1 border-l-gray-200" : string.Empty)">
<label for="@slug" class="peer group/label flex items-center overflow-hidden @(g.Depth == 1 ? "mt-2" : "")">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-4 mr-1 shrink -rotate-90 group-has-checked/label:rotate-0 cursor-pointer text-ink">
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
</svg>
<input
id="@slug"
type="checkbox"
class="hidden"
aria-hidden="true"
data-should-expand="@((containsCurrent).ToLowerString())"
@(shouldInitiallyExpand ? "checked" : string.Empty)
>
<a
href="@g.Index?.Url"
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)">
@g.Index?.NavigationTitle
</a>
</label>
@if (g.NavigationItems.Count > 0)
{
<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)">
@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
{
Level = g.Depth,
CurrentDocument = Model.CurrentDocument,
SubTree = g
}))
</ul>
}
</li>
}
var f = file.File;
var isCurrent = f == Model.CurrentDocument;
<li class="block ml-2 pl-2 border-l-1 border-l-gray-200 group/li @(isCurrent ? "current" : string.Empty)">
<div class="flex">
<a
class="sidebar-link my-1 ml-5 group-[.current]/li:text-blue-elastic! @(isCurrent ? "" : string.Empty)"
href="@f.Url"
@(isCurrent ? "aria-current=page" : string.Empty)>
@f.NavigationTitle
</a>
</div>
</li>
}
}
else
{
@foreach (var item in Model.SubTree.NavigationItems)
else if (item is GroupNavigation folder)
{
if (item is FileNavigation file)
{
var f = file.File;
var current = f == Model.CurrentDocument ? " current" : string.Empty;
<li class="toctree-l@(Model.SubTree.Depth + 1)@current"><a class="@(current.Trim()) reference internal" href="@f.Url">@f.NavigationTitle</a></li>
}
else if (item is GroupNavigation folder)
{
var g = folder.Group;
var current = g.HoldsCurrent(Model.CurrentDocument) ? " current" : string.Empty;
var currentFile = g.Index == Model.CurrentDocument ? " current" : string.Empty;
<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())">
@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
{
Level = g.Depth,
CurrentDocument = Model.CurrentDocument,
SubTree = g
}))
</ul>
}
</li>
}
var g = folder.Group;
var isCurrent = g.Index == Model.CurrentDocument;
var slug = g.Index?.Title.Slugify();
const int initialExpandLevel = 1;
var containsCurrent = g.HoldsCurrent(Model.CurrentDocument) || g.ContainsCurrentPage(Model.CurrentDocument);
var shouldInitiallyExpand = containsCurrent || g.Depth <= initialExpandLevel;
<li class="flex flex-wrap @(g.Depth > 1 ? "ml-2 pl-2 border-l-1 border-l-gray-200" : string.Empty)">
<label for="@slug" class="peer group/label flex items-center overflow-hidden @(g.Depth == 1 ? "mt-2" : "")">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-4 mr-1 shrink -rotate-90 group-has-checked/label:rotate-0 cursor-pointer text-ink">
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
</svg>
<input
id="@slug"
type="checkbox"
class="hidden"
aria-hidden="true"
data-should-expand="@((containsCurrent).ToLowerString())"
@(shouldInitiallyExpand ? "checked" : string.Empty)
>
<a
href="@g.Index?.Url"
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)">
@g.Index?.NavigationTitle
</a>
</label>
@if (g.NavigationItems.Count > 0)
{
<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)">
@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
{
Level = g.Depth,
CurrentDocument = Model.CurrentDocument,
SubTree = g
}))
</ul>
}
</li>
}
}
Loading