Add landing page feature flag

docs/_docset.yml

@@ -11,7 +11,8 @@ subs:
   eck:   "Elastic Cloud on Kubernetes"
 
 features:
-  primary-nav: false
+  primary-nav: true
+  landing-page: true
 
 toc:
   - file: index.md

src/Elastic.Markdown/Assets/copybutton.css

@@ -2,8 +2,8 @@
 button.copybtn {
     position: absolute;
     display: flex;
-    top: .3em;
-    right: .3em;
+    top: calc(var(--spacing) * 5);
+    right: calc(var(--spacing) * 4);
     width: 1.7em;
     height: 1.7em;
 	opacity: 0;
@@ -14,14 +14,12 @@ button.copybtn {
     border: none;
     outline: none;
     border-radius: 0.4em;
-    /* The colors that GitHub uses */
-    border: #1b1f2426 1px solid;
-    /*background-color: #f6f8fa;*/
+    background-color: rgb(34, 39, 46);
     color: var(--color-grey-50);
 }
 
 button.copybtn.success {
-    /*border-color: #22863a;*/
+	background-color: rgb(34, 39, 46);
     color: #22863a;
 }
 
@@ -70,9 +68,9 @@ div.highlight  {
     position: absolute;
     content: attr(data-tooltip);
     padding: .2em;
-    font-size: .8em;
+    font-size: var(--text-sm);
     left: -.2em;
-    /*background: grey;*/
+	background-color: rgb(34, 39, 46);
     color: var(--color-grey-50);
     white-space: nowrap;
     z-index: 2;

src/Elastic.Markdown/Assets/copybutton.ts

@@ -82,7 +82,10 @@ let iconCheck = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler
 </svg>`
 
 // If the user specified their own SVG use that, otherwise use the default
-let iconCopy = ``;
+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">
+  <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" />
+</svg>
+`;
 if (!iconCopy) {
   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">
   <title>${messages[locale]['copy_to_clipboard']}</title>
@@ -145,7 +148,7 @@ const addCopyButtonToCodeCells = () => {
   // happens because we load ClipboardJS asynchronously.
 
   // Add copybuttons to all of our code cells
-  const COPYBUTTON_SELECTOR = '.markdown-content div.highlight pre';
+  const COPYBUTTON_SELECTOR = '.highlight pre';
   const codeCells = document.querySelectorAll(COPYBUTTON_SELECTOR)
   codeCells.forEach((codeCell, index) => {
 	if (codeCell.id) {

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

@@ -1,38 +1,36 @@
 @layer components {
-	.markdown-content {
-		.highlight {
-			@apply mt-4;
+	.highlight {
+		@apply mt-4;
+	}
+
+	pre {
+		@apply grid;
+		code {
+			@apply text-sm
+				text-grey-30
+				rounded-none 
+				border-0 
+				overflow-x-auto
+				p-6!
+			;
+			background-color: #22272e;
+			mix-blend-mode: unset;
 		}
-
-		pre {
-			@apply grid;
-			code {
-				@apply text-sm
-					text-grey-30
-					rounded-none 
-					border-0 
-					overflow-x-auto
-					p-6!
-				;
-				background-color: #22272e;
-				mix-blend-mode: unset;
-			}
-			code:first-child {
-				@apply rounded-t-sm;
-			}
-			code:last-child {
-				@apply rounded-b-sm;
-			}
-			code.language-apiheader {
-				@apply border-b-1 border-b-grey-100;
-			}
+		code:first-child {
+			@apply rounded-t-sm;
 		}
-
-		pre code .code-callout {
-			@apply ml-1;
-			transform: translateY(-1px);
-			user-select: none;
+		code:last-child {
+			@apply rounded-b-sm;
 		}
+		code.language-apiheader {
+			@apply border-b-1 border-b-grey-80;
+		}
+	}
+
+	pre code .code-callout {
+		@apply ml-1;
+		transform: translateY(-1px);
+		user-select: none;
 	}
 
 	ol.code-callouts {

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

@@ -15,19 +15,20 @@ function scrollCurrentNaviItemIntoView(nav: HTMLElement, delay: number) {
 	const currentNavItem = $('.current', nav);
 	expandAllParents(currentNavItem);
 	setTimeout(() => {
-		if (currentNavItem && !isElementInViewport(currentNavItem)) {
+		if (currentNavItem && !isElementInViewport(nav, currentNavItem)) {
 			currentNavItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
 			window.scrollTo(0, 0);
 		}
 	}, delay);
 }
-function isElementInViewport(el: HTMLElement): boolean {
-	const rect = el.getBoundingClientRect();
+function isElementInViewport(parent: HTMLElement, child: HTMLElement, ): boolean {
+	const childRect = child.getBoundingClientRect();
+	const parentRect = parent.getBoundingClientRect();
 	return (
-		rect.top >= 0 &&
-		rect.left >= 0 &&
-		rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-		rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+		childRect.top >= parentRect.top &&
+		childRect.left >= parentRect.left &&
+		childRect.bottom <= parentRect.bottom &&
+		childRect.right <= parentRect.right
 	);
 }
 

src/Elastic.Markdown/Elastic.Markdown.csproj

@@ -45,6 +45,7 @@
       <EmbeddedResource Include="_static/*.css" Watch="false" />
       <EmbeddedResource Include="_static/*.css.map" Watch="false" />
       <EmbeddedResource Include="_static/*.svg" Watch="false" />
+      <EmbeddedResource Include="_static/*.png" Watch="false" />
       <EmbeddedResource Include="_static/*.woff2" Watch="false" />
     </ItemGroup>
   </Target>

src/Elastic.Markdown/Helpers/Htmx.cs

@@ -11,13 +11,18 @@ public static class Htmx
 {
 	public static string GetHxSelectOob(FeatureFlags features, string? pathPrefix, string currentUrl, string targetUrl)
 	{
-		HashSet<string> selectTargets =
-		[
-			"#primary-nav", "#secondary-nav", "#markdown-content", "#toc-nav", "#prev-next-nav", "#breadcrumbs"
-		];
+		if (features.IsLandingPageEnabled)
+		{
+			var startIndex = pathPrefix?.Length ?? 0;
+			if (currentUrl.Length < startIndex)
+				throw new InvalidUrlException("Unexpected current URL", currentUrl, startIndex);
+			if (currentUrl[startIndex..] == "/")
+				return "#main-container,#primary-nav,#secondary-nav";
+		}
+		var selectTargets = "#primary-nav,#secondary-nav,#content-container";
 		if (!HasSameTopLevelGroup(pathPrefix, currentUrl, targetUrl) && features.IsPrimaryNavEnabled)
-			_ = selectTargets.Add("#pages-nav");
-		return string.Join(',', selectTargets);
+			selectTargets += ",#pages-nav";
+		return selectTargets;
 	}
 
 	public static bool HasSameTopLevelGroup(string? pathPrefix, string currentUrl, string targetUrl)
@@ -27,10 +32,10 @@ public static bool HasSameTopLevelGroup(string? pathPrefix, string currentUrl, s
 		var startIndex = pathPrefix?.Length ?? 0;
 
 		if (currentUrl.Length < startIndex)
-			throw new InvalidUrlException("Current URL is not a valid URL", currentUrl, startIndex);
+			throw new InvalidUrlException("Unexpected current URL", currentUrl, startIndex);
 
 		if (targetUrl.Length < startIndex)
-			throw new InvalidUrlException("Target URL is not a valid URL", targetUrl, startIndex);
+			throw new InvalidUrlException("Unexpected target URL", targetUrl, startIndex);
 
 		var currentSegments = GetSegments(currentUrl[startIndex..].Trim('/'));
 		var targetSegments = GetSegments(targetUrl[startIndex..].Trim('/'));
@@ -47,7 +52,6 @@ public static bool HasSameTopLevelGroup(string? pathPrefix, string currentUrl, s
 
 	public static string GetHxAttributes(FeatureFlags features, string? pathPrefix, string currentUrl, string targetUrl)
 	{
-
 		var attributes = new StringBuilder();
 		_ = attributes.Append($" hx-get={targetUrl}");
 		_ = attributes.Append($" hx-select-oob={GetHxSelectOob(features, pathPrefix, currentUrl, targetUrl)}");

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

@@ -6,7 +6,18 @@ namespace Elastic.Markdown.IO.Configuration;
 
 public class FeatureFlags(Dictionary<string, bool> featureFlags)
 {
-	private bool IsEnabled(string key) => featureFlags.TryGetValue(key, out var value) && value;
-
 	public bool IsPrimaryNavEnabled => IsEnabled("primary-nav");
+	public bool IsLandingPageEnabled => IsEnabled("landing-page");
+	private bool IsEnabled(string key)
+	{
+		var envKey = $"FEATURE_{key.ToUpperInvariant().Replace('-', '_')}";
+		if (Environment.GetEnvironmentVariable(envKey) is { } envValue)
+		{
+			if (bool.TryParse(envValue, out var envBool))
+				return envBool;
+			// if the env var is set but not a bool, we treat it as enabled
+			return true;
+		}
+		return featureFlags.TryGetValue(key, out var value) && value;
+	}
 }

src/Elastic.Markdown/Slices/HtmlWriter.cs

@@ -5,7 +5,6 @@
 using System.Collections.Concurrent;
 using System.IO.Abstractions;
 using Elastic.Markdown.IO;
-using Elastic.Markdown.IO.Configuration;
 using Elastic.Markdown.IO.Navigation;
 using Markdig.Syntax;
 using RazorSlices;

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

@@ -1,17 +1,11 @@
 @using Elastic.Markdown.Helpers
 @inherits RazorSlice<LayoutViewModel>
 <ol id="breadcrumbs" class="block items-center w-full py-6" itemscope="" itemtype="https://schema.org/BreadcrumbList">
-	<li class="inline text-grey-80 text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
+	<li class="inline text-ink-light text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
 		<a
 			itemprop="item"
 			href="@Model.Link("/")"
-			hx-get="@Model.Link("/")"
-			hx-select-oob="@Htmx.GetHxSelectOob(Model.Features, Model.UrlPathPrefix, Model.Link("/"), Model.CurrentDocument.Url)"
-			hx-swap="none"
-			hx-push-url="true"
-			hx-indicator="#htmx-indicator"
-			preload="@Htmx.GetPreload()"
-			>
+		>
 			<span itemprop="name" class="hover:text-black">
 				Home
 			</span>
@@ -23,17 +17,12 @@
 	}
 	@if (firstCrumb != null)
 	{
-		<li class="inline text-grey-80 text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
+		<li class="inline text-ink-light text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
 			<span class="px-1">/</span>
 			<a
 				itemprop="item"
 				href="@firstCrumb.Url"
-				hx-get="@firstCrumb.Url"
-				hx-select-oob="@Htmx.GetHxSelectOob(Model.Features, Model.UrlPathPrefix, firstCrumb.Url, Model.CurrentDocument.Url)"
-				hx-swap="none"
-				hx-push-url="true"
-				hx-indicator="#htmx-indicator"
-				preload="@Htmx.GetPreload()"
+				@Htmx.GetHxAttributes(Model.Features, Model.UrlPathPrefix, Model.CurrentDocument.Url, firstCrumb.Url)
 			>
 				<span itemprop="name" class="hover:text-black">@firstCrumb.NavigationTitle</span>
 			</a>
@@ -46,7 +35,7 @@
 
 	@if (crumbs.Count < Model.Parents.Reverse().Skip(2).Count())
 	{
-		<li class="inline text-grey-80 text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
+		<li class="inline text-ink-light text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
 			<span class="px-1">/</span>
 			…
 		</li>
@@ -55,24 +44,19 @@
 	@for (var i = 0; i < crumbs.Count; i++)
 	{
 	    var item = crumbs[i];
-		<li class="inline text-grey-80 text-sm leading-[1.2em] tracking-[-0.02em] text-pretty" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
+		<li class="inline text-ink-light text-sm leading-[1.2em] tracking-[-0.02em] text-pretty" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
 			<span class="px-1">/</span>
 			<a
 				itemprop="item" 
 				href="@item.Url"
-				hx-get="@item.Url"
-				hx-select-oob="@Htmx.GetHxSelectOob(Model.Features, Model.UrlPathPrefix, item.Url, Model.CurrentDocument.Url)"
-				hx-swap="none"
-				hx-push-url="true"
-				hx-indicator="#htmx-indicator"
-				preload="@Htmx.GetPreload()"
+				@Htmx.GetHxAttributes(Model.Features, Model.UrlPathPrefix, Model.CurrentDocument.Url, item.Url)
 			>
 				<span itemprop="name" class="hover:text-black">@item.NavigationTitle</span>
 			</a>
-			<meta itemprop="position" content="@(i+2)">
+			<meta itemprop="position" content="@(i+3)">
 		</li>
 	}
-	<li class="inline text-grey-80 text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
+	<li class="inline text-ink-light text-sm leading-[1.2em] tracking-[-0.02em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
 		<span class="px-1">/</span>
 	</li>
 </ol>

src/Elastic.Markdown/Slices/Layout/_Header.cshtml

@@ -43,7 +43,7 @@
 							Model.Features,
 							Model.CurrentDocument.UrlPathPrefix,
 							Model.CurrentDocument.Url, 
-							Model.Link("/solutions/security")
+							Model.Link("/solutions/observability")
 						)
 					},
 					new PrimaryNavDropdownItemViewModel