Skip to content

Commit 28fa0db

Browse files
betegonbetegon
committed
docs: fix homepage layout and heading accents
1 parent 77ff151 commit 28fa0db

3 files changed

Lines changed: 117 additions & 44 deletions

File tree

‎docs/src/components/Header.astro‎

Lines changed: 26 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,6 @@
11
---
2-
/**
3-
* CLI-specific Header — conditionally renders:
4-
* - Homepage: branded header with logo, "Docs" link, social icons, no search
5-
* - Docs pages: theme's standard header with text title + search
6-
*/
7-
import config from "virtual:starlight/user-config";
8-
9-
import LanguageSelect from "virtual:starlight/components/LanguageSelect";
10-
import Search from "virtual:starlight/components/Search";
11-
import SiteTitle from "virtual:starlight/components/SiteTitle";
2+
import SentryThemeHeader from "@sentry/starlight-theme/components/Header.astro";
123
import SocialIcons from "virtual:starlight/components/SocialIcons";
13-
import ThemeSelect from "virtual:starlight/components/ThemeSelect";
14-
15-
const shouldRenderSearch =
16-
config.pagefind ||
17-
config.components.Search !== "@astrojs/starlight/components/Search.astro";
184
195
const isHomepage = Astro.locals.starlightRoute.id === "";
206
@@ -23,42 +9,47 @@ const base = baseUrl.endsWith("/") ? baseUrl : baseUrl + "/";
239
---
2410

2511
{isHomepage ? (
26-
<!-- Homepage: branded header with logo -->
27-
<div class="header sentry-header header-homepage">
28-
<div class="title-wrapper sl-flex">
12+
<!-- Homepage: custom landing-page header; docs pages use the shared theme header. -->
13+
<div class="header sl-flex header-homepage">
14+
<div class="sl-flex header-left">
2915
<a href={base} class="site-title sl-flex">
3016
<img src={`${base}wordmark-light.svg`} alt="Sentry CLI" class="homepage-logo" />
3117
</a>
3218
</div>
33-
<div class="sentry-header-actions sl-flex print:hidden">
19+
<div class="sl-flex header-right">
3420
<a href={`${base}getting-started/`} class="header-nav-link">Docs</a>
35-
<div class="sl-hidden md:sl-flex sentry-header-secondary">
36-
<SocialIcons />
37-
</div>
21+
<SocialIcons />
3822
</div>
3923
</div>
4024
) : (
41-
<!-- Docs pages: theme's standard header with text title + search -->
42-
<div class="header sentry-header">
43-
<div class="title-wrapper sl-flex">
44-
<SiteTitle />
45-
</div>
46-
<div class="sentry-header-actions sl-flex print:hidden">
47-
{shouldRenderSearch && <Search />}
48-
<div class="sl-hidden md:sl-flex sentry-header-secondary">
49-
<ThemeSelect />
50-
<LanguageSelect />
51-
</div>
52-
</div>
53-
</div>
25+
<SentryThemeHeader />
5426
)}
5527

5628
<style>
29+
.header {
30+
gap: 1rem;
31+
justify-content: space-between;
32+
align-items: center;
33+
height: 100%;
34+
width: 100%;
35+
padding: 0;
36+
}
37+
5738
.header-homepage {
5839
max-width: var(--sl-content-width);
5940
margin: 0 auto;
6041
}
6142

43+
.header-left {
44+
flex: 0 0 auto;
45+
}
46+
47+
.header-right {
48+
flex: 0 0 auto;
49+
gap: 1rem;
50+
align-items: center;
51+
}
52+
6253
.homepage-logo {
6354
height: 2.3rem;
6455
width: auto;

‎docs/src/components/InstallSelector.astro‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
22
import { codeToTokens } from 'shiki';
3-
import { monochromeCodeTheme } from '@sentry/starlight-theme';
43
54
interface InstallOption {
65
label: string;
@@ -20,7 +19,7 @@ const { options, defaultIndex = 0 } = Astro.props;
2019
async function highlightCommand(cmd: string): Promise<string> {
2120
const { tokens } = await codeToTokens(cmd, {
2221
lang: 'bash',
23-
theme: monochromeCodeTheme,
22+
theme: 'github-dark',
2423
});
2524
2625
// Convert tokens to inline HTML spans (single line command)
@@ -151,6 +150,10 @@ const defaultOption = highlightedOptions[defaultIndex];
151150
.command-text {
152151
white-space: nowrap;
153152
background: transparent;
153+
font-size: 0.875em;
154+
font-weight: 500;
155+
line-height: 1;
156+
padding: 0.2em 0.5em;
154157
min-width: 47ch; /* Fixed width for longest command (curl) */
155158
}
156159

‎docs/src/styles/cli.css‎

Lines changed: 86 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,14 @@
5050
fill: rgba(255, 255, 255, 0.8) !important;
5151
}
5252

53+
/* Docs section heading accent - keep it below the text, not through it. */
54+
html[data-has-sidebar] .sl-markdown-content h2:not(:where(.not-content *))::before {
55+
bottom: 0.02em;
56+
height: 0.12em;
57+
left: 0;
58+
right: var(--sl-anchor-icon-space, 0);
59+
transform: none;
60+
}
5361

5462
/* ==========================================================================
5563
Splash / Landing Page Styles
@@ -137,16 +145,87 @@
137145
}
138146

139147
/* Stack container - page layout for splash.
140-
The splash page needs a wider container than the default
141-
--sl-content-width (50rem / 800px) because the feature sections
142-
use a side-by-side layout with wide terminal ASCII art. */
143-
html[data-has-hero] .sl-container {
144-
max-width: 68rem;
148+
Keep the landing page at the pre-theme width; normal docs pages use the
149+
shared Sentry Starlight theme defaults. */
150+
html[data-has-hero]:not([data-has-sidebar]) {
151+
--sl-content-width: 67.5rem !important;
152+
--sl-content-pad-x: 2rem !important;
153+
}
154+
155+
@media (max-width: 49.999rem) {
156+
html[data-has-hero]:not([data-has-sidebar]) {
157+
--sl-nav-height: 3.5rem !important;
158+
--sl-nav-pad-x: 1rem !important;
159+
}
160+
}
161+
162+
@media (min-width: 50rem) {
163+
html[data-has-hero]:not([data-has-sidebar]) {
164+
--sl-nav-height: 4rem !important;
165+
--sl-nav-pad-x: 1.5rem !important;
166+
}
167+
}
168+
169+
html[data-has-hero]:not([data-has-sidebar]) header.header {
170+
background: rgba(10, 10, 15, 0.95);
171+
border-bottom: none;
172+
}
173+
174+
html[data-has-hero]:not([data-has-sidebar]) header.header > .header {
175+
background: transparent;
176+
backdrop-filter: none;
177+
}
178+
179+
html[data-has-hero]:not([data-has-sidebar]) .header-homepage {
180+
display: flex;
181+
align-items: center;
182+
justify-content: space-between;
183+
gap: 1rem;
184+
height: 100%;
185+
width: 100%;
186+
max-width: var(--sl-content-width);
187+
margin: 0 auto;
188+
padding: 0;
189+
}
190+
191+
html[data-has-hero]:not([data-has-sidebar]) .header-left {
192+
flex: 0 0 auto;
193+
}
194+
195+
html[data-has-hero]:not([data-has-sidebar]) .header-right {
196+
display: flex;
197+
flex: 0 0 auto;
198+
align-items: center;
199+
gap: 1rem;
200+
margin-left: auto;
201+
}
202+
203+
html[data-has-hero]:not([data-has-sidebar]) .content-panel {
204+
padding: 1.5rem var(--sl-content-pad-x);
205+
}
206+
207+
html[data-has-hero]:not([data-has-sidebar]) .sl-container {
208+
max-width: var(--sl-content-width);
145209
margin: 0 auto;
146-
padding: 0 1.5rem;
210+
padding: 0;
211+
}
212+
213+
html[data-has-hero]:not([data-has-sidebar]) main > .content-panel:first-child .sl-container > * + * {
214+
margin-top: 1.5rem;
215+
}
216+
217+
html[data-has-hero]:not([data-has-sidebar]) .sl-markdown-content {
218+
line-height: 1.8;
219+
}
220+
221+
html[data-has-hero]:not([data-has-sidebar]) .command-text {
222+
font-size: 0.875em;
223+
font-weight: 500;
224+
line-height: 1;
225+
padding: 0.2em 0.5em;
147226
}
148227

149-
html[data-has-hero] main {
228+
html[data-has-hero]:not([data-has-sidebar]) main {
150229
padding-top: 0;
151230
}
152231

0 commit comments

Comments
 (0)