Skip to content

Commit 6ca01e2

Browse files
reakaleekreakaleek
committed
ok
1 parent 89a8400 commit 6ca01e2

File tree

6 files changed

+66
-39
lines changed

6 files changed

+66
-39
lines changed

‎src/Elastic.Markdown/Assets/fonts.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
11
@font-face {
22
font-family: "Inter";
33
src: url("./fonts/InterVariable.woff2") format("woff2");
4+
font-display: swap;
45
}
56

67
@font-face {
78
font-family: "Mier B";
89
src: url("./fonts/MierB-Regular.woff2") format("woff2");
910
font-weight: normal;
11+
font-display: swap;
1012
}
1113

1214
@font-face {
1315
font-family: "Mier B";
1416
src: url("./fonts/MierB-Bold.woff2") format("woff2");
1517
font-weight: bold;
18+
font-display: swap;
1619
}
1720

1821
@font-face {
1922
font-family: "Mier B";
2023
src: url("./fonts/MierB-Demi.woff2") format("woff2");
2124
font-weight: 600;
25+
font-display: swap;
2226
}

‎src/Elastic.Markdown/Assets/main.ts‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,40 +18,45 @@ hljs.registerLanguage('apiheader', function() {
1818
hljs.addPlugin(mergeHTMLPlugin);
1919
hljs.highlightAll();
2020

21-
2221
type NavState = { [key: string]: boolean };
23-
22+
const PAGE_NAV_STATE_KEY = 'pagesNavState';
23+
const sessionState = JSON.parse(sessionStorage.getItem(PAGE_NAV_STATE_KEY)) as NavState
2424

2525
function keepNavState(element: HTMLElement) {
2626
const inputs = $$('input[type="checkbox"]', element);
27-
const sessionState = JSON.parse(sessionStorage.getItem('pagesNavState')) as NavState
2827
if (sessionState) {
2928
inputs.forEach(input => {
3029
const key = input.id;
31-
input.checked = input.checked || sessionState[key];
30+
if (input.dataset['shouldExpand'] === 'true') {
31+
input.checked = true;
32+
} else {
33+
input.checked = sessionState[key];
34+
}
3235
});
3336
}
3437
window.addEventListener('beforeunload', () => {
35-
const state = inputs.reduce((state: NavState, input) => {
38+
const inputs = $$('input[type="checkbox"]', element);
39+
const state: NavState = inputs.reduce((state: NavState, input) => {
3640
const key = input.id;
3741
const value = input.checked;
3842
return { ...state, [key]: value};
3943
}, {});
40-
sessionStorage.setItem('pagesNavState', JSON.stringify(state));
44+
sessionStorage.setItem(PAGE_NAV_STATE_KEY, JSON.stringify(state));
4145
});
4246
}
4347

48+
const PAGE_NAV_SCROLL_POSITION_KEY = 'pagesNavScrollPosition';
49+
const scrollPosition = sessionStorage.getItem(PAGE_NAV_SCROLL_POSITION_KEY);
50+
4451
function keepNavPosition(element: HTMLElement) {
45-
const scrollPosition = sessionStorage.getItem('pagesNavScrollPosition');
4652
if (scrollPosition) {
4753
element.scrollTop = parseInt(scrollPosition);
4854
}
4955
window.addEventListener('beforeunload', () => {
50-
sessionStorage.setItem('pagesNavScrollPosition', element.scrollTop.toString());
56+
sessionStorage.setItem(PAGE_NAV_SCROLL_POSITION_KEY, element.scrollTop.toString());
5157
});
5258
}
5359

5460
const pagesNav = $('#pages-nav');
55-
56-
keepNavState(pagesNav);
5761
keepNavPosition(pagesNav);
62+
keepNavState(pagesNav);

‎src/Elastic.Markdown/Assets/styles.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
@import "highlight.js/styles/atom-one-dark.css";
66
@import "./markdown/typography.css";
77

8+
:root {
9+
interpolate-size: allow-keywords;
10+
}
11+
812
#default-search::-webkit-search-cancel-button {
913
@apply pr-2;
1014
-webkit-appearance: none;

‎src/Elastic.Markdown/Helpers/BoolExtensions.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// Licensed to Elasticsearch B.V under one or more agreements.
2+
// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
3+
// See the LICENSE file in the project root for more information
4+
5+
namespace Elastic.Markdown.Helpers;
6+
7+
public static class BoolExtensions
8+
{
9+
public static string ToLowerString(this bool @bool) => @bool.ToString().ToLowerInvariant();
10+
}

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

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@using Elastic.Markdown.Helpers
12
@using Elastic.Markdown.IO.Navigation
23
@inherits RazorSlice<NavigationTreeItem>
34
@if (Model.IsRedesign)
@@ -8,51 +9,52 @@
89
{
910
var f = file.File;
1011
var isCurrent = f == Model.CurrentDocument;
11-
<li class="block pl-6 pb-2 w-full @(isCurrent ? "current" : string.Empty)">
12+
<li class="block pl-4 w-full @(isCurrent ? "current" : string.Empty)">
1213
<div class="flex">
1314
<div class="w-6">
1415
</div>
1516
<a
16-
class="block w-full hover:font-bold @(isCurrent ? "font-bold text-blue-elastic" : string.Empty) "
17+
class="block py-1 w-full hover:font-bold @(isCurrent ? "font-bold text-blue-elastic" : string.Empty) "
1718
href="@f.Url">
1819
@f.NavigationTitle
1920
</a>
2021
</div>
21-
2222
</li>
2323
}
2424
else if (item is GroupNavigation folder)
2525
{
2626
var g = folder.Group;
2727
var isCurrent = g.Index == Model.CurrentDocument;
28+
var slug = g.Index?.Title.Slugify();
2829
const int initialExpandLevel = 1;
2930
var shouldExpand = g.HoldsCurrent(Model.CurrentDocument) || g.Depth <= initialExpandLevel || g.ContainsCurrentPage(Model.CurrentDocument);
30-
<li class="block pl-6 pb-2">
31-
<div class="flex items-center">
32-
<div class="w-6">
33-
@if (g.NavigationItems.Count > 0)
34-
{
35-
<label for="@g.Index?.Title">
36-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 cursor-pointer">
37-
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
38-
</svg>
39-
</label>
40-
}
41-
</div>
42-
<a
43-
href="@g.Index?.Url"
44-
class="block w-full hover:font-bold @(isCurrent ? "font-bold text-blue-elastic" : string.Empty) ">
45-
@g.Index?.NavigationTitle
46-
</a>
47-
</div>
48-
<input
49-
id="@g.Index?.Title"
50-
type="checkbox"
51-
class="peer hidden"
52-
@(shouldExpand ? "checked" : string.Empty)>
31+
<li class="flex flex-wrap pl-4">
32+
<label for="@slug" class="peer group flex items-center mr-1">
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 shrink -rotate-90 group-has-checked:rotate-0 cursor-pointer">
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="@shouldExpand.ToLowerString()"
48+
@(shouldExpand ? "checked" : string.Empty)>
49+
</label>
50+
<a
51+
href="@g.Index?.Url"
52+
class="block py-1 grow hover:font-bold @(isCurrent ? "font-bold text-blue-elastic" : string.Empty) ">
53+
@g.Index?.NavigationTitle
54+
</a>
5355
@if (g.NavigationItems.Count > 0)
5456
{
55-
<ul class="h-0 peer-checked:h-auto w-full overflow-hidden mt-2" data-has-current="@g.ContainsCurrentPage(Model.CurrentDocument)">
57+
<ul class="h-0 grow overflow-hidden peer-has-checked:h-auto w-full overflow-hidden" data-has-current="@g.ContainsCurrentPage(Model.CurrentDocument)">
5658
@await RenderPartialAsync(_TocTreeNav.Create(new NavigationTreeItem
5759
{
5860
Level = g.Depth,

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,13 @@
1212
</head>
1313

1414
<body class="text-ink">
15-
<section class="h-9 bg-black"></section>
15+
@* <section class="h-9 bg-black"></section> *@
1616
<header class="sticky top-0 bg-blue-developer max-w-screen px-6 pb-6 flex items-center justify-center">
1717
<div class="container flex flex-wrap lg:flex-nowrap">
1818
<div class="h-10 mt-6 basis-full lg:basis-auto">
19-
<img src="@Model.Static("logo-elastic-horizontal-color-reverse.svg")" alt="Elastic" class="h-10">
19+
<a href="/">
20+
<img src="@Model.Static("logo-elastic-horizontal-color-reverse.svg")" alt="Elastic" class="h-10">
21+
</a>
2022
</div>
2123
<form role="search" class="hidden lg:block grow basis-full lg:basis-auto shrink-0 mt-6 lg:mx-10 h-10" autocomplete="off">
2224
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>

0 commit comments

Comments
 (0)