Improve isolated build UX and fix git worktree serve

src/Elastic.Documentation.Site/Assets/web-components/Header/DeploymentInfo.tsx

@@ -12,11 +12,37 @@ import {
     useGeneratedHtmlId,
     IconType,
     EuiThemeComputed,
-    EuiButton,
 } from '@elastic/eui'
 import { css } from '@emotion/react'
 import { useState } from 'react'
 
+export const headerButtonCss = (euiTheme: EuiThemeComputed) => css`
+    background: linear-gradient(to bottom, #f5f7fa 0%, #ffffff 100%);
+    border: 1px solid ${euiTheme.colors.lightShade};
+    border-radius: ${euiTheme.border.radius.small};
+    color: ${euiTheme.colors.textInk};
+    font-family:
+        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+        'Liberation Mono', 'Courier New', monospace;
+    font-size: 14px;
+    font-weight: 400;
+    padding: ${euiTheme.size.xs} ${euiTheme.size.m};
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: ${euiTheme.size.s};
+    text-decoration: none;
+    transition:
+        background 0.15s ease,
+        border-color 0.15s ease,
+        color 0.15s ease;
+    &:hover {
+        background: ${euiTheme.colors.primary};
+        border-color: ${euiTheme.colors.primary};
+        color: white;
+    }
+`
+
 interface DeploymentInfoProps {
     gitBranch: string
     gitCommit: string
@@ -43,45 +69,35 @@ export const DeploymentInfo = ({
 
     const popoverButton = (
         <EuiHeaderSectionItem>
-            <EuiButton
-                size="s"
-                fill
-                color="primary"
-                // onClickAriaLabel="Show deployment info"
+            <button
+                type="button"
                 onClick={() => setIsOpen((prev) => !prev)}
                 css={css`
+                    ${headerButtonCss(euiTheme)};
                     margin-inline: ${euiTheme.size.s};
-                    font-family: ${euiTheme.font.familyCode};
                 `}
             >
-                <div
+                <span
+                    css={css`
+                        display: inline-flex;
+                        align-items: center;
+                        gap: ${euiTheme.size.xs};
+                    `}
+                >
+                    <EuiIcon type="branch" color="inherit" />
+                    {gitBranch}
+                </span>
+                <span
                     css={css`
-                        display: flex;
-                        gap: ${euiTheme.size.s};
+                        display: inline-flex;
+                        align-items: center;
+                        gap: ${euiTheme.size.xs};
                     `}
                 >
-                    <span
-                        css={css`
-                            display: inline-flex;
-                            align-items: center;
-                            gap: ${euiTheme.size.xs};
-                        `}
-                    >
-                        <EuiIcon type="branch" />
-                        {gitBranch}
-                    </span>
-                    <span
-                        css={css`
-                            display: inline-flex;
-                            align-items: center;
-                            gap: ${euiTheme.size.xs};
-                        `}
-                    >
-                        <EuiIcon type={commitSvg} />
-                        {gitCommit}
-                    </span>
-                </div>
-            </EuiButton>
+                    <EuiIcon type={commitSvg} color="inherit" />
+                    {gitCommit}
+                </span>
+            </button>
         </EuiHeaderSectionItem>
     )
 
@@ -181,7 +197,9 @@ const DeploymentInfoRow = ({
                 size="xs"
                 css={css`
                     color: ${euiTheme.colors.textInk};
-                    font-family: ${euiTheme.font.familyCode};
+                    font-family:
+                        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+                        'Liberation Mono', 'Courier New', monospace;
                 `}
             >
                 {value}

src/Elastic.Documentation.Site/Assets/web-components/Header/Header.tsx

@@ -1,9 +1,10 @@
 import '../../eui-icons-cache'
 import { useHtmxContainer } from '../shared/htmx/useHtmxContainer'
-import { DeploymentInfo } from './DeploymentInfo'
+import { DeploymentInfo, headerButtonCss } from './DeploymentInfo'
 import {
     EuiHeader,
     EuiHeaderLogo,
+    EuiIcon,
     EuiProvider,
     useEuiTheme,
 } from '@elastic/eui'
@@ -28,6 +29,7 @@ export const Header = ({
     title,
     logoHref,
     githubRepository,
+    githubLink,
     gitBranch,
     gitCommit,
     githubRef,
@@ -45,7 +47,13 @@ export const Header = ({
         >
             <EuiHeader
                 css={css`
-                    background-color: ${euiTheme.colors.primary};
+                    background: linear-gradient(
+                        to bottom,
+                        #ffffff 0%,
+                        #f5f7fa 100%
+                    );
+                    border-bottom: 1px solid ${euiTheme.colors.lightShade};
+                    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
                 `}
                 sections={[
                     {
@@ -54,8 +62,21 @@ export const Header = ({
                                 <EuiHeaderLogo
                                     href={logoHref}
                                     css={css`
+                                        padding-block: 7px;
+                                        height: auto;
+                                        line-height: normal;
+                                        border-radius: ${euiTheme.border.radius
+                                            .small};
+                                        &:hover {
+                                            background: rgba(
+                                                0,
+                                                0,
+                                                0,
+                                                0.06
+                                            ) !important;
+                                        }
                                         & > span {
-                                            color: var(--color-white);
+                                            color: ${euiTheme.colors.textInk};
                                         }
                                     `}
                                 >
@@ -68,6 +89,28 @@ export const Header = ({
                         ? [
                               {
                                   items: [
+                                      ...(githubLink
+                                          ? [
+                                                <a
+                                                    href={githubLink}
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                    css={css`
+                                                        ${headerButtonCss(
+                                                            euiTheme
+                                                        )};
+                                                        margin-inline: ${euiTheme
+                                                            .size.s};
+                                                    `}
+                                                >
+                                                    <EuiIcon
+                                                        type="logoGithub"
+                                                        color="inherit"
+                                                    />
+                                                    GitHub
+                                                </a>,
+                                            ]
+                                          : []),
                                       <DeploymentInfo
                                           gitBranch={gitBranch}
                                           gitCommit={gitCommit}

src/Elastic.Documentation.Site/Navigation/_TocTree.cshtml

@@ -57,12 +57,7 @@
 		}
 		else
 		{
-			@* <a *@
-			@* 	href="@Model.TitleUrl" *@
-			@* 	@Htmx.GetNavHxAttributes(Model.Tree.Id == currentTopLevelItem.Id) *@
-			@* 	class="inline-block mx-4 mt-6 font-semibold text-ink hover:text-black"> *@
-			@* 	@Model.Title *@
-			@* </a> *@
+			@* index page surfaces as the first nav item via _TocTreeNav *@
 		}
 		</div>
 	</div>

src/Elastic.Documentation.Site/Navigation/_TocTreeNav.cshtml

@@ -6,6 +6,19 @@
 @{
 	var isTopLevel = Model.Level == 0;
 }
+@if (isTopLevel && !Model.IsGlobalAssemblyBuild && !Model.IsPrimaryNavEnabled && !Model.SubTree.Index.Hidden)
+{
+	var idx = Model.SubTree.Index;
+	<li class="flex group/li pr-8 mt-6">
+		<a
+			href="@idx.Url"
+			@Model.Htmx.GetNavHxAttributes(true)
+			class="sidebar-link grow group-[.current]/li:text-blue-elastic!"
+		>
+			@idx.NavigationTitle
+		</a>
+	</li>
+}
 @foreach (var item in Model.SubTree.NavigationItems)
 {
 	if (item.Hidden)

src/Elastic.Markdown/HtmlWriter.cs

@@ -162,7 +162,7 @@ private async Task<RenderResult> RenderLayout(MarkdownFile markdown, MarkdownDoc
 			SiteRootPath = DocumentationSet.Context.SiteRootPath,
 			AppliesTo = markdown.YamlFrontMatter?.AppliesTo,
 			GithubEditUrl = editUrl,
-			MarkdownUrl = current.Url.TrimEnd('/') + ".md",
+			MarkdownUrl = current.Url == "/" ? "/index.md" : current.Url.TrimEnd('/') + ".md",
 			AllowIndexing = DocumentationSet.Context.AllowIndexing && markdown.YamlFrontMatter?.NoIndex != true && (markdown.CrossLink.Equals("docs-content://index.md", StringComparison.OrdinalIgnoreCase) || markdown is DetectionRuleFile || !current.Hidden),
 			CanonicalBaseUrl = DocumentationSet.Context.CanonicalBaseUrl,
 			GoogleTagManager = DocumentationSet.Context.GoogleTagManager,

src/Elastic.Markdown/Layout/_Breadcrumbs.cshtml

@@ -4,6 +4,8 @@
 	var crumbs = targets.ToList();
 }
 
+@if (crumbs.Count > 0 && (crumbs.Count > 1 || Model.BuildType != BuildType.Isolated))
+{
 <ol id="breadcrumbs" class="flex flex-wrap gap-1 items-center w-full py-6">
 	@for (var i = 0; i < crumbs.Count; i++)
 	{
@@ -23,3 +25,4 @@
 		</li>
 	}
 </ol>
+}

src/Elastic.Markdown/Layout/_TableOfContents.cshtml

@@ -3,7 +3,7 @@
 @inherits RazorSlice<Elastic.Markdown.MarkdownLayoutViewModel>
 <aside class="sidebar md:block w-full lg:max-w-65 md:order-2">
 	<nav id="toc-nav" class="sidebar-nav lg:h-full flex flex-row-reverse lg:block items-center justify-between md:justify-start gap-4 pb-3 md:pb-9 simple-scrollbar">
-		@if (!Model.VersioningSystem.IsVersionless && Model.BuildType != BuildType.Codex)
+		@if (Model.Features.PrimaryNavEnabled && !Model.VersioningSystem.IsVersionless && Model.BuildType != BuildType.Codex)
 		{
 			<div class="mt-4">
 				<version-dropdown all-versions-url="@Model.AllVersionsUrl" current-version='@(Model.CurrentVersion)' items='@(new HtmlString(Model.VersionDropdownSerializedModel))'>
@@ -37,7 +37,7 @@
 					View as Markdown
 				</a>
 			</li>
-			@if (Model.BuildType != BuildType.Codex)
+			@if (Model.Features.PrimaryNavEnabled && Model.BuildType != BuildType.Codex)
 			{
 				<li class="report-an-issue lg:not-first:mt-1">
 					<a href="@Model.ReportIssueUrl" class="link text-sm" target="_blank">
@@ -59,7 +59,7 @@
 					</a>
 				</li>
 			}
-			@if (Model.BuildType != BuildType.Codex)
+			@if (Model.Features.PrimaryNavEnabled && Model.BuildType != BuildType.Codex)
 			{
 				<li class="learn-how-to-contribute hidden lg:block lg:not-first:mt-1">
 					<a href="https://www.elastic.co/docs/contribute-docs/" class="link text-sm" target="_blank">

src/Elastic.Markdown/_Layout.cshtml

@@ -33,7 +33,11 @@
 					@await RenderPartialAsync(_PagesNav.Create<GlobalLayoutViewModel>(Model))
 					<main id="content-container" class="min-w-0 lg:grid lg:grid-cols-[minmax(0,var(--max-text-width))_minmax(0,var(--max-sidebar-width))] justify-end mx-4 gap-4">
 						@await RenderPartialAsync(_TableOfContents.Create(Model))
-						<div class="mb-9 mt-0 min-w-0">
+						@{
+							var breadcrumbs = Model.Breadcrumbs.ToList();
+							var breadcrumbVisible = breadcrumbs.Count > 0 && (breadcrumbs.Count > 1 || Model.BuildType != BuildType.Isolated);
+						}
+						<div class="mb-9 mt-0 min-w-0 @(breadcrumbVisible ? "" : "pt-6")">
 							@await RenderPartialAsync(_Breadcrumbs.Create(Model))
 							<article id="markdown-content" class="markdown-content min-w-0">
 								<input type="checkbox" class="hidden" id="pages-nav-hamburger">