Skip to content

Commit 546c9e6

Browse files
Mpdreamzclaudecotti
authored
Improve isolated build UX and fix git worktree serve (#3210)
* Improve isolated build UX and fix git worktree scoped filesystem Header: light grey gradient with bottom border and shadow, replacing the blue background. GitHub link and deployment-info buttons share a muted grey gradient style with blue hover, using the system monospace font stack. Logo hover uses a subtle dark tint with consistent vertical padding. Nav: index page now surfaces as the first nav item using navigation_title from YAML front matter. Single-item breadcrumbs are hidden (no navigation value). Breadcrumb vertical padding reduced from py-6 to pt-4/pb-2. Sidebar: version selector, report-a-docs-issue, and learn-how-to-contribute are now gated on PrimaryNavEnabled so they don't show in isolated builds. Bug fixes: root page View-as-Markdown URL was .md, now correctly /index.md. h1 gains mt-6 top margin. FileSystemFactory.RealGitRootForPath adds the main repo's .git directory to scope roots when running from a git worktree, fixing ScopedFileSystemException when serving docs from a worktree checkout. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> * Fix isolated-build nav and breadcrumb scoping Index item in nav: only render when not hidden, not in assembler/primary-nav builds. Breadcrumb single-item suppression scoped to isolated builds only; breadcrumb py-6 padding restored to match production. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> * Fix h1 top spacing without breaking assembler breadcrumb layout The mt-6 on h1 compounded the breadcrumb's pb-6, pushing h1 24px lower than production on assembler builds. Remove mt-6 from h1 and instead add pt-6 to the content wrapper only when no breadcrumb is visible (isolated builds with a single-crumb or zero-crumb page). This gives isolated landing pages breathing room while leaving assembler/multi-crumb pages unchanged. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> * Fix Prettier formatting in Header and DeploymentInfo Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> * Fix TypeScript compile error: use colors.textInk instead of colors.ink The EUI theme types don't expose a `colors.ink` property — `colors.textInk` is the correct token. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Made-with: Cursor * Add button type --------- Co-authored-by: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Felipe Cotti <felipe.cotti@elastic.co>
1 parent cff7668 commit 546c9e6

8 files changed

Lines changed: 123 additions & 47 deletions

File tree

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

Lines changed: 51 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,37 @@ import {
1212
useGeneratedHtmlId,
1313
IconType,
1414
EuiThemeComputed,
15-
EuiButton,
1615
} from '@elastic/eui'
1716
import { css } from '@emotion/react'
1817
import { useState } from 'react'
1918

19+
export const headerButtonCss = (euiTheme: EuiThemeComputed) => css`
20+
background: linear-gradient(to bottom, #f5f7fa 0%, #ffffff 100%);
21+
border: 1px solid ${euiTheme.colors.lightShade};
22+
border-radius: ${euiTheme.border.radius.small};
23+
color: ${euiTheme.colors.textInk};
24+
font-family:
25+
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
26+
'Liberation Mono', 'Courier New', monospace;
27+
font-size: 14px;
28+
font-weight: 400;
29+
padding: ${euiTheme.size.xs} ${euiTheme.size.m};
30+
cursor: pointer;
31+
display: inline-flex;
32+
align-items: center;
33+
gap: ${euiTheme.size.s};
34+
text-decoration: none;
35+
transition:
36+
background 0.15s ease,
37+
border-color 0.15s ease,
38+
color 0.15s ease;
39+
&:hover {
40+
background: ${euiTheme.colors.primary};
41+
border-color: ${euiTheme.colors.primary};
42+
color: white;
43+
}
44+
`
45+
2046
interface DeploymentInfoProps {
2147
gitBranch: string
2248
gitCommit: string
@@ -43,45 +69,35 @@ export const DeploymentInfo = ({
4369

4470
const popoverButton = (
4571
<EuiHeaderSectionItem>
46-
<EuiButton
47-
size="s"
48-
fill
49-
color="primary"
50-
// onClickAriaLabel="Show deployment info"
72+
<button
73+
type="button"
5174
onClick={() => setIsOpen((prev) => !prev)}
5275
css={css`
76+
${headerButtonCss(euiTheme)};
5377
margin-inline: ${euiTheme.size.s};
54-
font-family: ${euiTheme.font.familyCode};
5578
`}
5679
>
57-
<div
80+
<span
81+
css={css`
82+
display: inline-flex;
83+
align-items: center;
84+
gap: ${euiTheme.size.xs};
85+
`}
86+
>
87+
<EuiIcon type="branch" color="inherit" />
88+
{gitBranch}
89+
</span>
90+
<span
5891
css={css`
59-
display: flex;
60-
gap: ${euiTheme.size.s};
92+
display: inline-flex;
93+
align-items: center;
94+
gap: ${euiTheme.size.xs};
6195
`}
6296
>
63-
<span
64-
css={css`
65-
display: inline-flex;
66-
align-items: center;
67-
gap: ${euiTheme.size.xs};
68-
`}
69-
>
70-
<EuiIcon type="branch" />
71-
{gitBranch}
72-
</span>
73-
<span
74-
css={css`
75-
display: inline-flex;
76-
align-items: center;
77-
gap: ${euiTheme.size.xs};
78-
`}
79-
>
80-
<EuiIcon type={commitSvg} />
81-
{gitCommit}
82-
</span>
83-
</div>
84-
</EuiButton>
97+
<EuiIcon type={commitSvg} color="inherit" />
98+
{gitCommit}
99+
</span>
100+
</button>
85101
</EuiHeaderSectionItem>
86102
)
87103

@@ -181,7 +197,9 @@ const DeploymentInfoRow = ({
181197
size="xs"
182198
css={css`
183199
color: ${euiTheme.colors.textInk};
184-
font-family: ${euiTheme.font.familyCode};
200+
font-family:
201+
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
202+
'Liberation Mono', 'Courier New', monospace;
185203
`}
186204
>
187205
{value}

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

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import '../../eui-icons-cache'
22
import { useHtmxContainer } from '../shared/htmx/useHtmxContainer'
3-
import { DeploymentInfo } from './DeploymentInfo'
3+
import { DeploymentInfo, headerButtonCss } from './DeploymentInfo'
44
import {
55
EuiHeader,
66
EuiHeaderLogo,
7+
EuiIcon,
78
EuiProvider,
89
useEuiTheme,
910
} from '@elastic/eui'
@@ -28,6 +29,7 @@ export const Header = ({
2829
title,
2930
logoHref,
3031
githubRepository,
32+
githubLink,
3133
gitBranch,
3234
gitCommit,
3335
githubRef,
@@ -45,7 +47,13 @@ export const Header = ({
4547
>
4648
<EuiHeader
4749
css={css`
48-
background-color: ${euiTheme.colors.primary};
50+
background: linear-gradient(
51+
to bottom,
52+
#ffffff 0%,
53+
#f5f7fa 100%
54+
);
55+
border-bottom: 1px solid ${euiTheme.colors.lightShade};
56+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
4957
`}
5058
sections={[
5159
{
@@ -54,8 +62,21 @@ export const Header = ({
5462
<EuiHeaderLogo
5563
href={logoHref}
5664
css={css`
65+
padding-block: 7px;
66+
height: auto;
67+
line-height: normal;
68+
border-radius: ${euiTheme.border.radius
69+
.small};
70+
&:hover {
71+
background: rgba(
72+
0,
73+
0,
74+
0,
75+
0.06
76+
) !important;
77+
}
5778
& > span {
58-
color: var(--color-white);
79+
color: ${euiTheme.colors.textInk};
5980
}
6081
`}
6182
>
@@ -68,6 +89,28 @@ export const Header = ({
6889
? [
6990
{
7091
items: [
92+
...(githubLink
93+
? [
94+
<a
95+
href={githubLink}
96+
target="_blank"
97+
rel="noopener noreferrer"
98+
css={css`
99+
${headerButtonCss(
100+
euiTheme
101+
)};
102+
margin-inline: ${euiTheme
103+
.size.s};
104+
`}
105+
>
106+
<EuiIcon
107+
type="logoGithub"
108+
color="inherit"
109+
/>
110+
GitHub
111+
</a>,
112+
]
113+
: []),
71114
<DeploymentInfo
72115
gitBranch={gitBranch}
73116
gitCommit={gitCommit}

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,7 @@
5757
}
5858
else
5959
{
60-
@* <a *@
61-
@* href="@Model.TitleUrl" *@
62-
@* @Htmx.GetNavHxAttributes(Model.Tree.Id == currentTopLevelItem.Id) *@
63-
@* class="inline-block mx-4 mt-6 font-semibold text-ink hover:text-black"> *@
64-
@* @Model.Title *@
65-
@* </a> *@
60+
@* index page surfaces as the first nav item via _TocTreeNav *@
6661
}
6762
</div>
6863
</div>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,19 @@
66
@{
77
var isTopLevel = Model.Level == 0;
88
}
9+
@if (isTopLevel && !Model.IsGlobalAssemblyBuild && !Model.IsPrimaryNavEnabled && !Model.SubTree.Index.Hidden)
10+
{
11+
var idx = Model.SubTree.Index;
12+
<li class="flex group/li pr-8 mt-6">
13+
<a
14+
href="@idx.Url"
15+
@Model.Htmx.GetNavHxAttributes(true)
16+
class="sidebar-link grow group-[.current]/li:text-blue-elastic!"
17+
>
18+
@idx.NavigationTitle
19+
</a>
20+
</li>
21+
}
922
@foreach (var item in Model.SubTree.NavigationItems)
1023
{
1124
if (item.Hidden)

‎src/Elastic.Markdown/HtmlWriter.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ private async Task<RenderResult> RenderLayout(MarkdownFile markdown, MarkdownDoc
162162
SiteRootPath = DocumentationSet.Context.SiteRootPath,
163163
AppliesTo = markdown.YamlFrontMatter?.AppliesTo,
164164
GithubEditUrl = editUrl,
165-
MarkdownUrl = current.Url.TrimEnd('/') + ".md",
165+
MarkdownUrl = current.Url == "/" ? "/index.md" : current.Url.TrimEnd('/') + ".md",
166166
AllowIndexing = DocumentationSet.Context.AllowIndexing && markdown.YamlFrontMatter?.NoIndex != true && (markdown.CrossLink.Equals("docs-content://index.md", StringComparison.OrdinalIgnoreCase) || markdown is DetectionRuleFile || !current.Hidden),
167167
CanonicalBaseUrl = DocumentationSet.Context.CanonicalBaseUrl,
168168
GoogleTagManager = DocumentationSet.Context.GoogleTagManager,

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
var crumbs = targets.ToList();
55
}
66

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

‎src/Elastic.Markdown/Layout/_TableOfContents.cshtml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
@inherits RazorSlice<Elastic.Markdown.MarkdownLayoutViewModel>
44
<aside class="sidebar md:block w-full lg:max-w-65 md:order-2">
55
<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">
6-
@if (!Model.VersioningSystem.IsVersionless && Model.BuildType != BuildType.Codex)
6+
@if (Model.Features.PrimaryNavEnabled && !Model.VersioningSystem.IsVersionless && Model.BuildType != BuildType.Codex)
77
{
88
<div class="mt-4">
99
<version-dropdown all-versions-url="@Model.AllVersionsUrl" current-version='@(Model.CurrentVersion)' items='@(new HtmlString(Model.VersionDropdownSerializedModel))'>
@@ -37,7 +37,7 @@
3737
View as Markdown
3838
</a>
3939
</li>
40-
@if (Model.BuildType != BuildType.Codex)
40+
@if (Model.Features.PrimaryNavEnabled && Model.BuildType != BuildType.Codex)
4141
{
4242
<li class="report-an-issue lg:not-first:mt-1">
4343
<a href="@Model.ReportIssueUrl" class="link text-sm" target="_blank">
@@ -59,7 +59,7 @@
5959
</a>
6060
</li>
6161
}
62-
@if (Model.BuildType != BuildType.Codex)
62+
@if (Model.Features.PrimaryNavEnabled && Model.BuildType != BuildType.Codex)
6363
{
6464
<li class="learn-how-to-contribute hidden lg:block lg:not-first:mt-1">
6565
<a href="https://www.elastic.co/docs/contribute-docs/" class="link text-sm" target="_blank">

‎src/Elastic.Markdown/_Layout.cshtml‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,11 @@
3333
@await RenderPartialAsync(_PagesNav.Create<GlobalLayoutViewModel>(Model))
3434
<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">
3535
@await RenderPartialAsync(_TableOfContents.Create(Model))
36-
<div class="mb-9 mt-0 min-w-0">
36+
@{
37+
var breadcrumbs = Model.Breadcrumbs.ToList();
38+
var breadcrumbVisible = breadcrumbs.Count > 0 && (breadcrumbs.Count > 1 || Model.BuildType != BuildType.Isolated);
39+
}
40+
<div class="mb-9 mt-0 min-w-0 @(breadcrumbVisible ? "" : "pt-6")">
3741
@await RenderPartialAsync(_Breadcrumbs.Create(Model))
3842
<article id="markdown-content" class="markdown-content min-w-0">
3943
<input type="checkbox" class="hidden" id="pages-nav-hamburger">

0 commit comments

Comments
 (0)