Skip to content

Commit 19ce453

Browse files
reakaleekflorent-leborgne
reakaleek
and
florent-leborgne
authored
Add landing page feature flag (#663)
* wip * WIP * Add png to EmbeddedResource * wip * Update links * Fixes * Open external links in new tab * Refactor * Fix 'Elastic basics' section * Fix * Apply suggestions from code review Co-authored-by: florent-leborgne <[email protected]> * Remove hgroup again it's unclear if it should be used or not * Remove 'Elastic architecture' section * Various fixes * Fix spacing * Fix Home link in breadcrumbs * Add error message * Simplify selector * Fix breadcrumbs meta itemprop position * Fix tests * Fix * Revert --------- Co-authored-by: florent-leborgne <[email protected]>
1 parent 284eb27 commit 19ce453

21 files changed

+599
-129
lines changed

‎docs/_docset.yml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ subs:
1111
eck: "Elastic Cloud on Kubernetes"
1212

1313
features:
14-
primary-nav: false
14+
primary-nav: true
15+
landing-page: true
1516

1617
toc:
1718
- file: index.md

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
button.copybtn {
33
position: absolute;
44
display: flex;
5-
top: .3em;
6-
right: .3em;
5+
top: calc(var(--spacing) * 5);
6+
right: calc(var(--spacing) * 4);
77
width: 1.7em;
88
height: 1.7em;
99
opacity: 0;
@@ -14,14 +14,12 @@ button.copybtn {
1414
border: none;
1515
outline: none;
1616
border-radius: 0.4em;
17-
/* The colors that GitHub uses */
18-
border: #1b1f2426 1px solid;
19-
/*background-color: #f6f8fa;*/
17+
background-color: rgb(34, 39, 46);
2018
color: var(--color-grey-50);
2119
}
2220

2321
button.copybtn.success {
24-
/*border-color: #22863a;*/
22+
background-color: rgb(34, 39, 46);
2523
color: #22863a;
2624
}
2725

@@ -70,9 +68,9 @@ div.highlight {
7068
position: absolute;
7169
content: attr(data-tooltip);
7270
padding: .2em;
73-
font-size: .8em;
71+
font-size: var(--text-sm);
7472
left: -.2em;
75-
/*background: grey;*/
73+
background-color: rgb(34, 39, 46);
7674
color: var(--color-grey-50);
7775
white-space: nowrap;
7876
z-index: 2;

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,10 @@ let iconCheck = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler
8282
</svg>`
8383

8484
// If the user specified their own SVG use that, otherwise use the default
85-
let iconCopy = ``;
85+
let iconCopy = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
86+
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
87+
</svg>
88+
`;
8689
if (!iconCopy) {
8790
iconCopy = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copy" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
8891
<title>${messages[locale]['copy_to_clipboard']}</title>
@@ -145,7 +148,7 @@ const addCopyButtonToCodeCells = () => {
145148
// happens because we load ClipboardJS asynchronously.
146149

147150
// Add copybuttons to all of our code cells
148-
const COPYBUTTON_SELECTOR = '.markdown-content div.highlight pre';
151+
const COPYBUTTON_SELECTOR = '.highlight pre';
149152
const codeCells = document.querySelectorAll(COPYBUTTON_SELECTOR)
150153
codeCells.forEach((codeCell, index) => {
151154
if (codeCell.id) {

‎src/Elastic.Markdown/Assets/markdown/code.css

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,36 @@
11
@layer components {
2-
.markdown-content {
3-
.highlight {
4-
@apply mt-4;
2+
.highlight {
3+
@apply mt-4;
4+
}
5+
6+
pre {
7+
@apply grid;
8+
code {
9+
@apply text-sm
10+
text-grey-30
11+
rounded-none
12+
border-0
13+
overflow-x-auto
14+
p-6!
15+
;
16+
background-color: #22272e;
17+
mix-blend-mode: unset;
518
}
6-
7-
pre {
8-
@apply grid;
9-
code {
10-
@apply text-sm
11-
text-grey-30
12-
rounded-none
13-
border-0
14-
overflow-x-auto
15-
p-6!
16-
;
17-
background-color: #22272e;
18-
mix-blend-mode: unset;
19-
}
20-
code:first-child {
21-
@apply rounded-t-sm;
22-
}
23-
code:last-child {
24-
@apply rounded-b-sm;
25-
}
26-
code.language-apiheader {
27-
@apply border-b-1 border-b-grey-100;
28-
}
19+
code:first-child {
20+
@apply rounded-t-sm;
2921
}
30-
31-
pre code .code-callout {
32-
@apply ml-1;
33-
transform: translateY(-1px);
34-
user-select: none;
22+
code:last-child {
23+
@apply rounded-b-sm;
3524
}
25+
code.language-apiheader {
26+
@apply border-b-1 border-b-grey-80;
27+
}
28+
}
29+
30+
pre code .code-callout {
31+
@apply ml-1;
32+
transform: translateY(-1px);
33+
user-select: none;
3634
}
3735

3836
ol.code-callouts {

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,20 @@ function scrollCurrentNaviItemIntoView(nav: HTMLElement, delay: number) {
1515
const currentNavItem = $('.current', nav);
1616
expandAllParents(currentNavItem);
1717
setTimeout(() => {
18-
if (currentNavItem && !isElementInViewport(currentNavItem)) {
18+
if (currentNavItem && !isElementInViewport(nav, currentNavItem)) {
1919
currentNavItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
2020
window.scrollTo(0, 0);
2121
}
2222
}, delay);
2323
}
24-
function isElementInViewport(el: HTMLElement): boolean {
25-
const rect = el.getBoundingClientRect();
24+
function isElementInViewport(parent: HTMLElement, child: HTMLElement, ): boolean {
25+
const childRect = child.getBoundingClientRect();
26+
const parentRect = parent.getBoundingClientRect();
2627
return (
27-
rect.top >= 0 &&
28-
rect.left >= 0 &&
29-
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
30-
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
28+
childRect.top >= parentRect.top &&
29+
childRect.left >= parentRect.left &&
30+
childRect.bottom <= parentRect.bottom &&
31+
childRect.right <= parentRect.right
3132
);
3233
}
3334

‎src/Elastic.Markdown/Elastic.Markdown.csproj

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
<EmbeddedResource Include="_static/*.css" Watch="false" />
4646
<EmbeddedResource Include="_static/*.css.map" Watch="false" />
4747
<EmbeddedResource Include="_static/*.svg" Watch="false" />
48+
<EmbeddedResource Include="_static/*.png" Watch="false" />
4849
<EmbeddedResource Include="_static/*.woff2" Watch="false" />
4950
</ItemGroup>
5051
</Target>

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

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,18 @@ public static class Htmx
1111
{
1212
public static string GetHxSelectOob(FeatureFlags features, string? pathPrefix, string currentUrl, string targetUrl)
1313
{
14-
HashSet<string> selectTargets =
15-
[
16-
"#primary-nav", "#secondary-nav", "#markdown-content", "#toc-nav", "#prev-next-nav", "#breadcrumbs"
17-
];
14+
if (features.IsLandingPageEnabled)
15+
{
16+
var startIndex = pathPrefix?.Length ?? 0;
17+
if (currentUrl.Length < startIndex)
18+
throw new InvalidUrlException("Unexpected current URL", currentUrl, startIndex);
19+
if (currentUrl[startIndex..] == "/")
20+
return "#main-container,#primary-nav,#secondary-nav";
21+
}
22+
var selectTargets = "#primary-nav,#secondary-nav,#content-container";
1823
if (!HasSameTopLevelGroup(pathPrefix, currentUrl, targetUrl) && features.IsPrimaryNavEnabled)
19-
_ = selectTargets.Add("#pages-nav");
20-
return string.Join(',', selectTargets);
24+
selectTargets += ",#pages-nav";
25+
return selectTargets;
2126
}
2227

2328
public static bool HasSameTopLevelGroup(string? pathPrefix, string currentUrl, string targetUrl)
@@ -27,10 +32,10 @@ public static bool HasSameTopLevelGroup(string? pathPrefix, string currentUrl, s
2732
var startIndex = pathPrefix?.Length ?? 0;
2833

2934
if (currentUrl.Length < startIndex)
30-
throw new InvalidUrlException("Current URL is not a valid URL", currentUrl, startIndex);
35+
throw new InvalidUrlException("Unexpected current URL", currentUrl, startIndex);
3136

3237
if (targetUrl.Length < startIndex)
33-
throw new InvalidUrlException("Target URL is not a valid URL", targetUrl, startIndex);
38+
throw new InvalidUrlException("Unexpected target URL", targetUrl, startIndex);
3439

3540
var currentSegments = GetSegments(currentUrl[startIndex..].Trim('/'));
3641
var targetSegments = GetSegments(targetUrl[startIndex..].Trim('/'));
@@ -47,7 +52,6 @@ public static bool HasSameTopLevelGroup(string? pathPrefix, string currentUrl, s
4752

4853
public static string GetHxAttributes(FeatureFlags features, string? pathPrefix, string currentUrl, string targetUrl)
4954
{
50-
5155
var attributes = new StringBuilder();
5256
_ = attributes.Append($" hx-get={targetUrl}");
5357
_ = attributes.Append($" hx-select-oob={GetHxSelectOob(features, pathPrefix, currentUrl, targetUrl)}");

‎src/Elastic.Markdown/IO/Configuration/FeatureFlags.cs

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,18 @@ namespace Elastic.Markdown.IO.Configuration;
66

77
public class FeatureFlags(Dictionary<string, bool> featureFlags)
88
{
9-
private bool IsEnabled(string key) => featureFlags.TryGetValue(key, out var value) && value;
10-
119
public bool IsPrimaryNavEnabled => IsEnabled("primary-nav");
10+
public bool IsLandingPageEnabled => IsEnabled("landing-page");
11+
private bool IsEnabled(string key)
12+
{
13+
var envKey = $"FEATURE_{key.ToUpperInvariant().Replace('-', '_')}";
14+
if (Environment.GetEnvironmentVariable(envKey) is { } envValue)
15+
{
16+
if (bool.TryParse(envValue, out var envBool))
17+
return envBool;
18+
// if the env var is set but not a bool, we treat it as enabled
19+
return true;
20+
}
21+
return featureFlags.TryGetValue(key, out var value) && value;
22+
}
1223
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
using System.Collections.Concurrent;
66
using System.IO.Abstractions;
77
using Elastic.Markdown.IO;
8-
using Elastic.Markdown.IO.Configuration;
98
using Elastic.Markdown.IO.Navigation;
109
using Markdig.Syntax;
1110
using RazorSlices;

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

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
@using Elastic.Markdown.Helpers
22
@inherits RazorSlice<LayoutViewModel>
33
<ol id="breadcrumbs" class="block items-center w-full py-6" itemscope="" itemtype="https://schema.org/BreadcrumbList">
4-
<li class="inline text-grey-80 text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
4+
<li class="inline text-ink-light text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
55
<a
66
itemprop="item"
77
href="@Model.Link("/")"
8-
hx-get="@Model.Link("/")"
9-
hx-select-oob="@Htmx.GetHxSelectOob(Model.Features, Model.UrlPathPrefix, Model.Link("/"), Model.CurrentDocument.Url)"
10-
hx-swap="none"
11-
hx-push-url="true"
12-
hx-indicator="#htmx-indicator"
13-
preload="@Htmx.GetPreload()"
14-
>
8+
>
159
<span itemprop="name" class="hover:text-black">
1610
Home
1711
</span>
@@ -23,17 +17,12 @@
2317
}
2418
@if (firstCrumb != null)
2519
{
26-
<li class="inline text-grey-80 text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
20+
<li class="inline text-ink-light text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
2721
<span class="px-1">/</span>
2822
<a
2923
itemprop="item"
3024
href="@firstCrumb.Url"
31-
hx-get="@firstCrumb.Url"
32-
hx-select-oob="@Htmx.GetHxSelectOob(Model.Features, Model.UrlPathPrefix, firstCrumb.Url, Model.CurrentDocument.Url)"
33-
hx-swap="none"
34-
hx-push-url="true"
35-
hx-indicator="#htmx-indicator"
36-
preload="@Htmx.GetPreload()"
25+
@Htmx.GetHxAttributes(Model.Features, Model.UrlPathPrefix, Model.CurrentDocument.Url, firstCrumb.Url)
3726
>
3827
<span itemprop="name" class="hover:text-black">@firstCrumb.NavigationTitle</span>
3928
</a>
@@ -46,7 +35,7 @@
4635

4736
@if (crumbs.Count < Model.Parents.Reverse().Skip(2).Count())
4837
{
49-
<li class="inline text-grey-80 text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
38+
<li class="inline text-ink-light text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
5039
<span class="px-1">/</span>
5140
…
5241
</li>
@@ -55,24 +44,19 @@
5544
@for (var i = 0; i < crumbs.Count; i++)
5645
{
5746
var item = crumbs[i];
58-
<li class="inline text-grey-80 text-sm leading-[1.2em] tracking-[-0.02em] text-pretty" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
47+
<li class="inline text-ink-light text-sm leading-[1.2em] tracking-[-0.02em] text-pretty" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
5948
<span class="px-1">/</span>
6049
<a
6150
itemprop="item"
6251
href="@item.Url"
63-
hx-get="@item.Url"
64-
hx-select-oob="@Htmx.GetHxSelectOob(Model.Features, Model.UrlPathPrefix, item.Url, Model.CurrentDocument.Url)"
65-
hx-swap="none"
66-
hx-push-url="true"
67-
hx-indicator="#htmx-indicator"
68-
preload="@Htmx.GetPreload()"
52+
@Htmx.GetHxAttributes(Model.Features, Model.UrlPathPrefix, Model.CurrentDocument.Url, item.Url)
6953
>
7054
<span itemprop="name" class="hover:text-black">@item.NavigationTitle</span>
7155
</a>
72-
<meta itemprop="position" content="@(i+2)">
56+
<meta itemprop="position" content="@(i+3)">
7357
</li>
7458
}
75-
<li class="inline text-grey-80 text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
59+
<li class="inline text-ink-light text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
7660
<span class="px-1">/</span>
7761
</li>
7862
</ol>

0 commit comments

Comments
 (0)