From a960f50eb33a7842e9489fe3ce6d395906c66340 Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
<264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Thu, 21 May 2026 04:43:23 +0000
Subject: [PATCH 01/12] docs: migrate to @sentry/starlight-theme
Replace the 1900-line custom dark theme CSS and hand-rolled component
overrides with the shared @sentry/starlight-theme Starlight plugin.
Changes:
- Add @sentry/starlight-theme dependency and plugin to astro config
- Use monochromeCodeTheme for syntax highlighting (replaces github-dark)
- Bump @astrojs/starlight to ^0.39.2 (theme peer dep)
- Remove custom ThemeProvider, ThemeSelect, Header components
(now provided by the shared theme)
- Remove CodeBlock, CommandBox (unused)
- Replace 1869-line custom.css with ~250-line cli.css containing only
CLI-specific styles (splash page, feature sections, overscroll)
- Update font references in components to use CSS custom properties
- Update InstallSelector to use shared monochrome code theme
- Use theme design tokens (--ve-*) in PageTitle
---
docs/astro.config.mjs | 32 +-
docs/package.json | 5 +-
docs/src/components/CodeBlock.astro | 115 --
docs/src/components/CommandBox.astro | 138 --
docs/src/components/FeatureTerminal.astro | 4 +-
docs/src/components/Header.astro | 79 -
docs/src/components/InstallSelector.astro | 5 +-
docs/src/components/PackageManagerCode.astro | 2 +-
docs/src/components/PageTitle.astro | 4 +-
docs/src/components/Terminal.astro | 4 +-
docs/src/components/ThemeProvider.astro | 23 -
docs/src/components/ThemeSelect.astro | 3 -
docs/src/content/docs/index.mdx | 1 -
docs/src/styles/cli.css | 385 ++++
docs/src/styles/custom.css | 1869 ------------------
15 files changed, 407 insertions(+), 2262 deletions(-)
delete mode 100644 docs/src/components/CodeBlock.astro
delete mode 100644 docs/src/components/CommandBox.astro
delete mode 100644 docs/src/components/Header.astro
delete mode 100644 docs/src/components/ThemeProvider.astro
delete mode 100644 docs/src/components/ThemeSelect.astro
create mode 100644 docs/src/styles/cli.css
delete mode 100644 docs/src/styles/custom.css
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index 21ebe70e9..8b412dd9b 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -1,5 +1,8 @@
import starlight from "@astrojs/starlight";
import sentry from "@sentry/astro";
+import sentryStarlightTheme, {
+ monochromeCodeTheme,
+} from "@sentry/starlight-theme";
import { defineConfig } from "astro/config";
// Allow base path override via environment variable for PR previews
@@ -10,6 +13,9 @@ export default defineConfig({
base,
markdown: {
smartypants: false,
+ shikiConfig: {
+ theme: monochromeCodeTheme,
+ },
},
// Generate sourcemaps for Sentry. "hidden" produces .map files without
// adding //# sourceMappingURL comments to the output (the debug IDs
@@ -52,28 +58,8 @@ export default defineConfig({
href: "https://github.com/getsentry/cli",
},
],
- expressiveCode: {
- themes: ["github-dark"],
- styleOverrides: {
- frames: {
- frameBoxShadowCssValue: "none",
- editorActiveTabIndicatorTopColor: "transparent",
- editorActiveTabIndicatorBottomColor: "transparent",
- editorTabBarBorderBottomColor: "transparent",
- editorTabBarBackground: "transparent",
- terminalTitlebarBorderBottomColor: "transparent",
- terminalTitlebarBackground: "rgba(255, 255, 255, 0.03)",
- terminalBackground: "#0a0a0f",
- },
- borderRadius: "12px",
- borderColor: "rgba(255, 255, 255, 0.1)",
- codeBackground: "#0a0a0f",
- },
- },
+ plugins: [sentryStarlightTheme()],
components: {
- ThemeProvider: "./src/components/ThemeProvider.astro",
- Header: "./src/components/Header.astro",
- ThemeSelect: "./src/components/ThemeSelect.astro",
PageTitle: "./src/components/PageTitle.astro",
},
head: [
@@ -91,7 +77,7 @@ export default defineConfig({
const path = window.location.pathname;
// Works with both / (prod) and /pr-preview/pr-XX (preview)
return path === '/' ||
- /^\\/_preview\\/pr-(\\d+|main)\\/?$/.test(path);
+ /^\\/\\_preview\\/pr-(\\d+|main)\\/?$/.test(path);
}
function checkAtBottom() {
@@ -245,7 +231,7 @@ export default defineConfig({
],
},
],
- customCss: ["./src/styles/custom.css"],
+ customCss: ["./src/styles/cli.css"],
}),
],
});
diff --git a/docs/package.json b/docs/package.json
index f650e6599..4237c4dd5 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -8,9 +8,10 @@
"preview": "astro preview"
},
"dependencies": {
- "@astrojs/starlight": "^0.38.3",
+ "@astrojs/starlight": "^0.39.2",
"@sentry/astro": "^10.38.0",
- "astro": "^6.1.8",
+ "@sentry/starlight-theme": "^0.2.0",
+ "astro": "^6.3.5",
"sharp": "^0.33.5",
"shiki": "^3.21.0"
}
diff --git a/docs/src/components/CodeBlock.astro b/docs/src/components/CodeBlock.astro
deleted file mode 100644
index c35c3de85..000000000
--- a/docs/src/components/CodeBlock.astro
+++ /dev/null
@@ -1,115 +0,0 @@
----
-interface Props {
- code: string;
- lang?: string;
- title?: string;
-}
-
-const { code, lang = "bash", title = "Terminal" } = Astro.props;
-const codeId = `code-${Math.random().toString(36).substr(2, 9)}`;
----
-
-
-
-
-
-
diff --git a/docs/src/components/CommandBox.astro b/docs/src/components/CommandBox.astro
deleted file mode 100644
index e391c0e3c..000000000
--- a/docs/src/components/CommandBox.astro
+++ /dev/null
@@ -1,138 +0,0 @@
----
-interface Props {
- command?: string;
- docsLink?: string;
- docsText?: string;
-}
-
-const {
- command = "npx sentry@latest",
- docsLink,
- docsText = "Read the docs"
-} = Astro.props;
----
-
-
-
-
-
-
diff --git a/docs/src/components/FeatureTerminal.astro b/docs/src/components/FeatureTerminal.astro
index 3f13576d4..753d4b22e 100644
--- a/docs/src/components/FeatureTerminal.astro
+++ b/docs/src/components/FeatureTerminal.astro
@@ -65,7 +65,7 @@ const { title = "Terminal" } = Astro.props;
.feature-terminal-body {
padding: 0 1.5rem 1.25rem;
- font-family: 'JetBrains Mono', ui-monospace, monospace;
+ font-family: var(--sl-font-mono);
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
}
@@ -108,7 +108,7 @@ const { title = "Terminal" } = Astro.props;
/* Table box styles */
.feature-terminal-body :global(.table-box) {
- font-family: 'JetBrains Mono', ui-monospace, monospace;
+ font-family: var(--sl-font-mono);
font-size: 0.7rem;
line-height: 1.5;
margin: 0;
diff --git a/docs/src/components/Header.astro b/docs/src/components/Header.astro
deleted file mode 100644
index ca2f8d492..000000000
--- a/docs/src/components/Header.astro
+++ /dev/null
@@ -1,79 +0,0 @@
----
-import Search from "@astrojs/starlight/components/Search.astro";
-import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
-import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
-
-// Check if we're on the homepage (splash page).
-// In Starlight >=0.33, route data lives on Astro.locals.starlightRoute; the
-// old `slug` field is now `id` (empty string for the landing page).
-const isHomepage = Astro.locals.starlightRoute.id === "";
-
-// Get base path for links
-const baseUrl = import.meta.env.BASE_URL;
-const base = baseUrl.endsWith('/') ? baseUrl : baseUrl + '/';
----
-
-
-
-
-
-
-
-
diff --git a/docs/src/components/InstallSelector.astro b/docs/src/components/InstallSelector.astro
index 442246e0f..d8a21b90e 100644
--- a/docs/src/components/InstallSelector.astro
+++ b/docs/src/components/InstallSelector.astro
@@ -1,5 +1,6 @@
---
import { codeToTokens } from 'shiki';
+import { monochromeCodeTheme } from '@sentry/starlight-theme';
interface InstallOption {
label: string;
@@ -19,7 +20,7 @@ const { options, defaultIndex = 0 } = Astro.props;
async function highlightCommand(cmd: string): Promise {
const { tokens } = await codeToTokens(cmd, {
lang: 'bash',
- theme: 'github-dark',
+ theme: monochromeCodeTheme,
});
// Convert tokens to inline HTML spans (single line command)
@@ -142,7 +143,7 @@ const defaultOption = highlightedOptions[defaultIndex];
background: transparent;
border: none;
padding: 0.6rem 1rem;
- font-family: 'JetBrains Mono', monospace;
+ font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
font-size: 0.875rem;
line-height: 1;
}
diff --git a/docs/src/components/PackageManagerCode.astro b/docs/src/components/PackageManagerCode.astro
index c10cebc2e..6ee0a28d7 100644
--- a/docs/src/components/PackageManagerCode.astro
+++ b/docs/src/components/PackageManagerCode.astro
@@ -158,7 +158,7 @@ const id = `pm-${Math.random().toString(36).substr(2, 9)}`;
.pm-pre code {
color: rgba(255, 255, 255, 0.85);
- font-family: 'JetBrains Mono', ui-monospace, monospace;
+ font-family: var(--sl-font-mono);
font-size: 0.875rem;
line-height: 1.7;
}
diff --git a/docs/src/components/PageTitle.astro b/docs/src/components/PageTitle.astro
index 9c3c73550..c592d40d7 100644
--- a/docs/src/components/PageTitle.astro
+++ b/docs/src/components/PageTitle.astro
@@ -46,7 +46,7 @@ const title = entry.data.title;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
- color: rgba(255, 255, 255, 0.5);
+ color: var(--ve-text-tertiary, rgba(255, 255, 255, 0.5));
margin-bottom: 0.5rem;
}
@@ -54,7 +54,7 @@ const title = entry.data.title;
font-size: var(--sl-text-h1);
line-height: var(--sl-line-height-headings);
font-weight: 600;
- color: var(--sl-color-white);
+ color: var(--ve-text, var(--sl-color-white));
margin: 0;
}
diff --git a/docs/src/components/Terminal.astro b/docs/src/components/Terminal.astro
index 2b051dce7..7609d2f91 100644
--- a/docs/src/components/Terminal.astro
+++ b/docs/src/components/Terminal.astro
@@ -162,7 +162,7 @@ if (background) {
.terminal-body {
padding: 0 1.5rem 1.25rem;
- font-family: 'JetBrains Mono', monospace;
+ font-family: var(--sl-font-mono);
font-size: 0.8rem;
line-height: 1.6;
}
@@ -245,7 +245,7 @@ if (background) {
}
.table-box {
- font-family: 'JetBrains Mono', monospace;
+ font-family: var(--sl-font-mono);
font-size: 0.7rem;
line-height: 1.5;
margin: 0;
diff --git a/docs/src/components/ThemeProvider.astro b/docs/src/components/ThemeProvider.astro
deleted file mode 100644
index 30f4d8fe1..000000000
--- a/docs/src/components/ThemeProvider.astro
+++ /dev/null
@@ -1,23 +0,0 @@
----
-// Force dark mode only - completely overrides Starlight's theme system
----
-
-{/* Matches Starlight's inline pattern to prevent FOUC */}
-
-
-{/* Empty template to satisfy any code expecting theme icons */}
-
diff --git a/docs/src/components/ThemeSelect.astro b/docs/src/components/ThemeSelect.astro
deleted file mode 100644
index b2cd08d28..000000000
--- a/docs/src/components/ThemeSelect.astro
+++ /dev/null
@@ -1,3 +0,0 @@
----
-// Empty component to hide theme selector - we're dark mode only
----
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index 3a99e84e6..4fbff5831 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -12,7 +12,6 @@ hero:
---
import { Card, CardGrid } from '@astrojs/starlight/components';
-import CommandBox from '../../components/CommandBox.astro';
import InstallSelector from '../../components/InstallSelector.astro';
import Terminal from '../../components/Terminal.astro';
import FeatureTerminal from '../../components/FeatureTerminal.astro';
diff --git a/docs/src/styles/cli.css b/docs/src/styles/cli.css
new file mode 100644
index 000000000..b74ee541a
--- /dev/null
+++ b/docs/src/styles/cli.css
@@ -0,0 +1,385 @@
+/* ==========================================================================
+ Sentry CLI Docs — Project-specific overrides
+ Base theme provided by @sentry/starlight-theme
+ ========================================================================== */
+
+:root,
+:root[data-theme="dark"],
+:root[data-theme="light"] {
+ /* Compat: existing components reference this var */
+ --sl-color-accent-rgb: 139 92 246;
+
+ /* CLI uses Inter + JetBrains Mono */
+ --sl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ --sl-font-mono: "JetBrains Mono", ui-monospace, monospace;
+}
+
+/* Logo sizing */
+.site-title img {
+ height: 2.3rem;
+ width: auto;
+}
+
+/* ==========================================================================
+ Splash / Landing Page Styles
+ ========================================================================== */
+
+/* Hero section */
+.hero {
+ padding: 10rem 0 0.5rem !important;
+ text-align: left !important;
+ max-width: none !important;
+}
+
+.hero > img,
+.hero > .hero-image {
+ display: none !important;
+}
+
+/* Hero title - make it bold and impactful */
+.hero h1 {
+ font-size: clamp(2.5rem, 8vw, 4rem) !important;
+ font-weight: 700 !important;
+ line-height: 1 !important;
+ letter-spacing: -0.03em !important;
+ margin-bottom: 1.5rem !important;
+}
+
+/* Hero tagline */
+.hero .tagline {
+ font-size: 1.125rem !important;
+ line-height: 1.7 !important;
+ color: rgba(255, 255, 255, 0.6) !important;
+ max-width: 540px !important;
+ margin: 0 !important;
+}
+
+/* Hide default hero actions */
+.hero .action,
+.hero .sl-flex.actions {
+ display: none !important;
+}
+
+/* Command box in hero - tight to tagline, space below */
+.hero-command {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.75rem;
+ margin-top: 0.5rem;
+ margin-bottom: 4rem;
+}
+
+.hero-docs-link {
+ color: rgba(255, 255, 255, 0.7) !important;
+ text-decoration: none !important;
+ font-weight: 400;
+ font-size: 0.9rem;
+ transition: color 0.2s ease;
+ margin-top: 0.75rem;
+ position: relative;
+ display: inline-block;
+}
+
+.hero-docs-link::after {
+ content: "";
+ position: absolute;
+ bottom: -3px;
+ right: 0;
+ width: 7.5em; /* Width of "documentation." */
+ height: 1px;
+ background: currentColor;
+ transition: width 0.3s ease;
+}
+
+.hero-docs-link:hover {
+ color: #fff !important;
+}
+
+.hero-docs-link:hover::after {
+ width: 100%;
+}
+
+/* Remove the static underline from the span since pseudo-element handles it */
+.hero-docs-link .underline {
+ text-decoration: none;
+}
+
+/* Stack container - page layout for splash */
+[data-page-type="splash"] .sl-container {
+ max-width: var(--sl-content-width);
+ margin: 0 auto;
+ padding: 0 1.5rem;
+}
+
+[data-page-type="splash"] main {
+ padding-top: 0;
+}
+
+/* ==========================================================================
+ Features Section - Horizontal Rows with Terminals
+ ========================================================================== */
+
+.feature-section {
+ margin: 2rem 0;
+ background: rgba(255, 255, 255, 0.02);
+ border-radius: 16px;
+ overflow: hidden;
+}
+
+.feature-section-inner {
+ display: flex;
+ align-items: stretch;
+}
+
+.feature-section-inner.reverse {
+ flex-direction: row-reverse;
+}
+
+.feature-text {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 2.5rem;
+}
+
+.feature-text h3 {
+ font-size: 1.75rem;
+ font-weight: 600;
+ color: #fff;
+ margin: 0 0 0.75rem 0;
+ line-height: 1.2;
+}
+
+.feature-text p {
+ font-size: 1.05rem;
+ line-height: 1.7;
+ color: rgba(255, 255, 255, 0.55);
+ margin: 0 0 1rem 0;
+}
+
+.feature-text p:last-child {
+ margin-bottom: 0;
+ color: rgba(255, 255, 255, 0.45);
+}
+
+.feature-text code {
+ background: rgba(255, 255, 255, 0.1);
+ padding: 0.15em 0.4em;
+ border-radius: 4px;
+ font-size: 0.9em;
+}
+
+.feature-visual {
+ flex: 0 0 55%;
+ min-height: 420px;
+ margin: 0.5rem 0.75rem 0.75rem 0;
+ padding: 10%;
+ background-size: cover;
+ background-position: center;
+ border-radius: 8px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+}
+
+.feature-section-inner.reverse .feature-visual {
+ margin: 0.75rem 0 0.75rem 0.75rem;
+}
+
+/* Responsive for feature sections */
+@media (max-width: 1000px) {
+ .feature-section-inner,
+ .feature-section-inner.reverse {
+ flex-direction: column;
+ }
+
+ .feature-text {
+ padding: 2rem;
+ text-align: center;
+ }
+
+ .feature-visual,
+ .feature-section-inner.reverse .feature-visual {
+ flex: none;
+ width: calc(100% - 1.5rem);
+ min-height: 380px;
+ margin: 0 0.75rem 0.75rem 0.75rem;
+ }
+}
+
+@media (max-width: 600px) {
+ .feature-section {
+ margin: 1.5rem 0;
+ }
+
+ .feature-text {
+ padding: 1.5rem;
+ }
+
+ .feature-visual {
+ min-height: 340px;
+ margin: 0 0.5rem 0.5rem 0.5rem;
+ padding: 8%;
+ }
+
+ .feature-text h3 {
+ font-size: 1.4rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .feature-visual {
+ margin: 0 0.5rem 0.5rem 0.5rem;
+ min-height: 300px;
+ padding: 6%;
+ }
+
+ .feature-text {
+ padding: 1.25rem;
+ }
+
+ .feature-text h3 {
+ font-size: 1.25rem;
+ }
+}
+
+/* ==========================================================================
+ PackageManagerCode - pm-pre no-border treatment
+ ========================================================================== */
+
+pre.pm-pre,
+.pm-pre {
+ background: transparent !important;
+ border: none !important;
+ border-radius: 0 !important;
+ margin: 0 !important;
+ padding: 0 !important;
+}
+
+/* ASCII art tables inside terminals - no chrome, consistent monospace */
+pre.table-box {
+ background: transparent !important;
+ border: none !important;
+ border-radius: 0 !important;
+ margin: 0 !important;
+ padding: 0 !important;
+}
+
+pre.table-box,
+pre.table-box * {
+ font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
+ "DejaVu Sans Mono", monospace !important;
+ font-size: inherit !important;
+ font-weight: 400 !important;
+ font-style: normal !important;
+ font-variant: normal !important;
+ font-variant-ligatures: none !important;
+ font-feature-settings: normal !important;
+ font-stretch: normal !important;
+ letter-spacing: 0 !important;
+ word-spacing: 0 !important;
+ text-decoration: none !important;
+ text-transform: none !important;
+ -webkit-text-size-adjust: none !important;
+}
+
+/* ==========================================================================
+ Mobile Responsive (splash-specific)
+ ========================================================================== */
+
+@media (max-width: 768px) {
+ .hero {
+ text-align: center !important;
+ }
+
+ .hero h1 {
+ font-size: 2rem !important;
+ }
+
+ .hero .tagline {
+ font-size: 1rem !important;
+ margin: 0 auto !important;
+ }
+
+ .hero-command {
+ align-items: center;
+ }
+
+ .hero-command .command-box-wrapper {
+ justify-content: center;
+ }
+
+ .hero-command .install-selector {
+ max-width: 100%;
+ }
+
+ .hero-command .install-box {
+ flex-shrink: 0;
+ }
+
+ .hero-command .command-area {
+ font-size: 0.7rem;
+ padding: 0.5rem 0.75rem;
+ }
+}
+
+/* ==========================================================================
+ Overscroll Easter Egg
+ ========================================================================== */
+
+.overscroll-message {
+ position: fixed;
+ bottom: -60px;
+ left: 50%;
+ transform: translateX(-50%) translateY(0);
+ z-index: 9999;
+ pointer-events: none;
+ opacity: 0;
+ transition:
+ opacity 0.15s ease-out,
+ transform 0.15s ease-out;
+}
+
+.overscroll-message span {
+ display: inline-block;
+ padding: 0.6rem 1.5rem;
+ background: rgb(var(--sl-color-accent-rgb) / 0.12);
+ border: 1px solid rgb(var(--sl-color-accent-rgb) / 0.25);
+ border-radius: 24px;
+ color: rgba(255, 255, 255, 0.8);
+ font-size: 0.9rem;
+ font-weight: 500;
+ font-family: var(--sl-font);
+ backdrop-filter: blur(12px);
+ white-space: nowrap;
+}
+
+.overscroll-message code {
+ background: rgba(255, 255, 255, 0.1);
+ padding: 0.2em 0.5em;
+ border-radius: 6px;
+ font-family: var(--sl-font-mono);
+ font-size: 0.85em;
+ color: #a78bfa;
+ cursor: pointer;
+ pointer-events: auto;
+}
+
+.overscroll-message code:hover {
+ background: rgba(255, 255, 255, 0.18);
+}
+
+@media (max-width: 640px) {
+ .overscroll-message span {
+ white-space: normal;
+ text-align: center;
+ max-width: calc(100vw - 2rem);
+ font-size: 0.8rem;
+ padding: 0.5rem 1rem;
+ }
+}
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
deleted file mode 100644
index 1a53bf828..000000000
--- a/docs/src/styles/custom.css
+++ /dev/null
@@ -1,1869 +0,0 @@
-/* ==========================================================================
- Sentry CLI Documentation - Dark Theme Only
- ========================================================================== */
-
-/* Force dark mode regardless of system preference */
-:root,
-html,
-html[data-theme="light"],
-html[data-theme="dark"] {
- color-scheme: dark !important;
-}
-
-/* Override all theme states with dark mode values */
-:root,
-html,
-[data-theme="light"],
-[data-theme="dark"] {
- /* Background colors */
- --sl-color-bg: #0a0a0f;
- --sl-color-bg-nav: rgba(10, 10, 15, 0.95);
- --sl-color-bg-sidebar: rgba(10, 10, 15, 0.98);
- --sl-color-bg-inline-code: rgba(255, 255, 255, 0.08);
-
- /* Accent colors - Purple theme */
- --sl-color-accent: #8b5cf6;
- --sl-color-accent-rgb: 139 92 246;
- --sl-color-accent-high: #a78bfa;
- --sl-color-accent-low: rgb(var(--sl-color-accent-rgb) / 0.2);
-
- /* Text colors - BOOSTED CONTRAST */
- --sl-color-white: #ffffff;
- --sl-color-gray-1: #ffffff;
- --sl-color-gray-2: #f1f5f9;
- --sl-color-gray-3: #e2e8f0;
- --sl-color-gray-4: #cbd5e1;
- --sl-color-gray-5: #94a3b8;
- --sl-color-gray-6: #64748b;
- --sl-color-black: #0a0a0f;
-
- /* Border colors */
- --sl-color-hairline: rgba(255, 255, 255, 0.1);
- --sl-color-hairline-shade: rgba(255, 255, 255, 0.1);
- --sl-color-hairline-light: rgba(255, 255, 255, 0.06);
-
- /* Inline code - accent-tinted */
- --sl-color-bg-inline-code: rgb(var(--sl-color-accent-rgb) / 0.15);
-
- /* Typography */
- --sl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
- --sl-font-mono: "JetBrains Mono", ui-monospace, monospace;
-
- /* Sizing */
- --sl-content-width: 50rem;
- --sl-sidebar-width: 17rem;
- --sl-content-pad-x: 2rem;
-}
-
-/* ==========================================================================
- Global Styles
- ========================================================================== */
-
-body {
- background: var(--sl-color-bg);
-}
-
-/* Strip Starlight's default focus outline — our :focus-visible rule below
- provides the purple outline for keyboard users instead.
- NOTE: Do NOT add background-color overrides here — it breaks elements
- with intentional backgrounds (sidebar active link, hover states). */
-:focus {
- outline: none !important;
-}
-
-/* Re-add purple outline for keyboard focus */
-:focus-visible {
- outline: 2px solid rgb(var(--sl-color-accent-rgb) / 0.5) !important;
- outline-offset: 2px !important;
- border-radius: 4px;
-}
-
-/* Skip to content link — visible on any focus (keyboard only element) */
-a[href="#_top"]:focus {
- background: rgb(var(--sl-color-accent-rgb) / 0.9) !important;
- color: #fff !important;
- outline: none !important;
-}
-
-/* Subtle background gradient */
-.sl-layout::before {
- content: "";
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- height: 100vh;
- background:
- radial-gradient(
- ellipse 80% 50% at 50% -20%,
- rgb(var(--sl-color-accent-rgb) / 0.12) 0%,
- transparent 50%
- ),
- radial-gradient(
- ellipse 60% 40% at 100% 0%,
- rgba(59, 130, 246, 0.08) 0%,
- transparent 40%
- );
- pointer-events: none;
- z-index: -1;
-}
-
-/* ==========================================================================
- Header / Navigation
- ========================================================================== */
-
-header.header {
- background: rgba(10, 10, 15, 0.95);
- backdrop-filter: blur(12px);
- border-bottom: none;
-}
-
-/* Ensure hamburger menu button is visible and properly styled */
-starlight-menu-button button {
- background-color: #1a1a1f !important;
- color: #fff !important;
- border: 1px solid rgba(255, 255, 255, 0.2) !important;
- box-shadow: none !important;
-}
-
-/* Logo size - larger */
-.site-title img {
- height: 2.3rem !important;
- width: auto !important;
-}
-
-/* GitHub icon - white */
-.social-icons a,
-.social-icons a svg,
-a[href*="github.com"],
-a[href*="github.com"] svg,
-[class*="astro-wy4te6ga"],
-[class*="astro-wy4te6ga"] svg {
- color: #fff !important;
- fill: #fff !important;
-}
-
-.social-icons a:hover,
-.social-icons a:hover svg,
-a[href*="github.com"]:hover,
-a[href*="github.com"]:hover svg {
- color: rgba(255, 255, 255, 0.8) !important;
- fill: rgba(255, 255, 255, 0.8) !important;
-}
-
-/* Search bar - centered in page */
-site-search {
- --sl-search-width: 22rem;
-}
-
-site-search button {
- background: var(--sl-color-bg) !important;
- border: 1px solid rgba(255, 255, 255, 0.25) !important;
- border-radius: 6px !important;
- padding: 0.35rem 0.75rem !important;
- font-size: 0.8rem !important;
- height: auto !important;
- min-height: unset !important;
- gap: 0.5rem !important;
- width: 22rem !important;
- min-width: 22rem !important;
- justify-content: space-between !important;
- position: fixed !important;
- left: 50% !important;
- transform: translateX(-50%) !important;
- top: 0.75rem !important;
- z-index: 1000 !important;
-}
-
-site-search button:hover {
- border-color: rgba(255, 255, 255, 0.4) !important;
-}
-
-/* Search icon */
-site-search button svg {
- width: 14px !important;
- height: 14px !important;
- color: rgba(255, 255, 255, 0.5) !important;
-}
-
-/* Search text */
-site-search button span {
- font-size: 0.8rem !important;
- color: rgba(255, 255, 255, 0.5) !important;
-}
-
-/* Command+K indicator */
-site-search button kbd {
- background: transparent !important;
- border: none !important;
- color: rgba(255, 255, 255, 0.5) !important;
- font-size: 0.75rem !important;
- padding: 0 !important;
- box-shadow: none !important;
-}
-
-/* ==========================================================================
- Splash / Landing Page Styles
- ========================================================================== */
-
-/* Hero section */
-.hero {
- padding: 10rem 0 0.5rem !important;
- text-align: left !important;
- max-width: none !important;
-}
-
-.hero > img,
-.hero > .hero-image {
- display: none !important;
-}
-
-/* Hero title - make it bold and impactful */
-.hero h1 {
- font-size: clamp(2.5rem, 8vw, 4rem) !important;
- font-weight: 700 !important;
- line-height: 1 !important;
- letter-spacing: -0.03em !important;
- margin-bottom: 1.5rem !important;
-}
-
-/* Hero tagline */
-.hero .tagline {
- font-size: 1.125rem !important;
- line-height: 1.7 !important;
- color: rgba(255, 255, 255, 0.6) !important;
- max-width: 540px !important;
- margin: 0 !important;
-}
-
-/* Hide default hero actions */
-.hero .action,
-.hero .sl-flex.actions {
- display: none !important;
-}
-
-/* Command box in hero - tight to tagline, space below */
-.hero-command {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- gap: 0.75rem;
- margin-top: 0.5rem;
- margin-bottom: 4rem;
-}
-
-.hero-docs-link {
- color: rgba(255, 255, 255, 0.7) !important;
- text-decoration: none !important;
- font-weight: 400;
- font-size: 0.9rem;
- transition: color 0.2s ease;
- margin-top: 0.75rem;
- position: relative;
- display: inline-block;
-}
-
-.hero-docs-link::after {
- content: "";
- position: absolute;
- bottom: -3px;
- right: 0;
- width: 7.5em; /* Width of "documentation." */
- height: 1px;
- background: currentColor;
- transition: width 0.3s ease;
-}
-
-.hero-docs-link:hover {
- color: #fff !important;
-}
-
-.hero-docs-link:hover::after {
- width: 100%;
-}
-
-/* Remove the static underline from the span since pseudo-element handles it */
-.hero-docs-link .underline {
- text-decoration: none;
-}
-
-/* Stack container - page layout for splash */
-[data-page-type="splash"] .sl-container {
- max-width: var(--sl-content-width);
- margin: 0 auto;
- padding: 0 1.5rem;
-}
-
-[data-page-type="splash"] main {
- padding-top: 0;
-}
-
-/* ==========================================================================
- Install Section
- ========================================================================== */
-
-.install-section {
- margin: 3rem 0;
- text-align: left;
-}
-
-.install-section h2 {
- font-size: 1.5rem;
- font-weight: 600;
- margin-bottom: 1rem;
- color: var(--sl-color-white);
-}
-
-/* ==========================================================================
- Tabs Component
- ========================================================================== */
-
-starlight-tabs {
- --sl-color-bg-nav: transparent;
- margin: 1.5rem 0;
-}
-
-starlight-tabs [role="tablist"] {
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
- gap: 0;
- background: transparent;
-}
-
-starlight-tabs [role="tab"] {
- padding: 0.6rem 1rem;
- font-size: 0.85rem;
- font-weight: 500;
- color: rgba(255, 255, 255, 0.5);
- border: none;
- border-bottom: 2px solid transparent;
- background: transparent;
- transition: all 0.15s ease;
- cursor: pointer;
-}
-
-starlight-tabs [role="tab"]:hover {
- color: rgba(255, 255, 255, 0.8);
-}
-
-starlight-tabs [role="tab"][aria-selected="true"] {
- color: #fff;
- border-bottom-color: #fff;
-}
-
-starlight-tabs [role="tabpanel"] {
- padding: 1rem 0 0;
-}
-
-/* ==========================================================================
- Quick Start Section
- ========================================================================== */
-
-.quick-start {
- margin: 4rem 0;
-}
-
-.quick-start h2 {
- font-size: 1.5rem;
- font-weight: 600;
- margin-bottom: 1.5rem;
- color: var(--sl-color-white);
-}
-
-/* ==========================================================================
- Features Section
- ========================================================================== */
-
-.features-section {
- margin: 5rem 0;
-}
-
-.features-section h2 {
- font-size: 1.5rem;
- font-weight: 600;
- margin-bottom: 2rem;
- color: var(--sl-color-white);
-}
-
-/* Feature cards */
-.sl-card-grid {
- --sl-card-grid-cols: 3;
-}
-
-.card {
- background: rgba(255, 255, 255, 0.02) !important;
- border: 1px solid rgba(255, 255, 255, 0.06) !important;
- border-radius: 12px !important;
- padding: 1.5rem !important;
- transition: all 0.3s ease !important;
-}
-
-.card:hover {
- background: rgba(255, 255, 255, 0.04) !important;
- border-color: rgba(255, 255, 255, 0.1) !important;
- transform: translateY(-2px);
-}
-
-.card .title {
- font-size: 1rem !important;
- font-weight: 600 !important;
- margin-bottom: 0.5rem !important;
-}
-
-.card .body {
- color: rgba(255, 255, 255, 0.6) !important;
- font-size: 0.875rem !important;
- line-height: 1.6 !important;
-}
-
-/* ==========================================================================
- Features Section - Horizontal Rows with Terminals
- ========================================================================== */
-
-.feature-section {
- margin: 2rem 0;
- background: rgba(255, 255, 255, 0.02);
- border-radius: 16px;
- overflow: hidden;
-}
-
-.feature-section-inner {
- display: flex;
- align-items: stretch;
-}
-
-.feature-section-inner.reverse {
- flex-direction: row-reverse;
-}
-
-.feature-text {
- flex: 1;
- min-width: 0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- padding: 2.5rem;
-}
-
-.feature-text h3 {
- font-size: 1.75rem;
- font-weight: 600;
- color: #fff;
- margin: 0 0 0.75rem 0;
- line-height: 1.2;
-}
-
-.feature-text p {
- font-size: 1.05rem;
- line-height: 1.7;
- color: rgba(255, 255, 255, 0.55);
- margin: 0 0 1rem 0;
-}
-
-.feature-text p:last-child {
- margin-bottom: 0;
- color: rgba(255, 255, 255, 0.45);
-}
-
-.feature-text code {
- background: rgba(255, 255, 255, 0.1);
- padding: 0.15em 0.4em;
- border-radius: 4px;
- font-size: 0.9em;
-}
-
-.feature-visual {
- flex: 0 0 55%;
- min-height: 420px;
- margin: 0.5rem 0.75rem 0.75rem 0;
- padding: 10%;
- background-size: cover;
- background-position: center;
- border-radius: 8px;
- border: 1px solid rgba(255, 255, 255, 0.1);
- display: flex;
- align-items: center;
- justify-content: center;
- box-sizing: border-box;
-}
-
-.feature-section-inner.reverse .feature-visual {
- margin: 0.75rem 0 0.75rem 0.75rem;
-}
-
-/* Responsive for feature sections */
-@media (max-width: 1000px) {
- .feature-section-inner,
- .feature-section-inner.reverse {
- flex-direction: column;
- }
-
- .feature-text {
- padding: 2rem;
- text-align: center;
- }
-
- .feature-visual,
- .feature-section-inner.reverse .feature-visual {
- flex: none;
- width: calc(100% - 1.5rem);
- min-height: 380px;
- margin: 0 0.75rem 0.75rem 0.75rem;
- }
-}
-
-@media (max-width: 600px) {
- .feature-section {
- margin: 1.5rem 0;
- }
-
- .feature-text {
- padding: 1.5rem;
- }
-
- .feature-visual {
- min-height: 340px;
- margin: 0 0.5rem 0.5rem 0.5rem;
- padding: 8%;
- }
-
- .feature-text h3 {
- font-size: 1.4rem;
- }
-}
-
-@media (max-width: 480px) {
- .feature-visual {
- margin: 0 0.5rem 0.5rem 0.5rem;
- min-height: 300px;
- padding: 6%;
- }
-
- .feature-text {
- padding: 1.25rem;
- }
-
- .feature-text h3 {
- font-size: 1.25rem;
- }
-}
-
-.features-section-new h2 {
- font-size: 1.75rem;
- font-weight: 600;
- color: #fff;
- margin-bottom: 3rem;
- text-align: center;
-}
-
-.feature-row {
- display: flex;
- align-items: center;
- gap: 3rem;
- margin-bottom: 4rem;
-}
-
-.feature-row.reverse {
- flex-direction: row-reverse;
-}
-
-.feature-row:last-child {
- margin-bottom: 0;
-}
-
-.feature-image {
- flex: 0 0 400px;
- height: 280px;
- background-size: cover;
- background-position: center;
- border-radius: 16px;
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: hidden;
-}
-
-.feature-image::before {
- content: "";
- position: absolute;
- inset: 0;
- background: rgba(0, 0, 0, 0.3);
- backdrop-filter: blur(1px);
-}
-
-.feature-command {
- position: relative;
- z-index: 1;
- background: rgba(10, 10, 15, 0.85);
- backdrop-filter: blur(10px);
- border: 1px solid rgba(255, 255, 255, 0.15);
- border-radius: 8px;
- padding: 0.875rem 1.5rem;
- font-family: "JetBrains Mono", ui-monospace, monospace;
- font-size: 1rem;
- color: #fff;
- white-space: nowrap;
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-}
-
-.feature-command .prompt {
- color: rgba(255, 255, 255, 0.5);
- margin-right: 0.5rem;
-}
-
-.feature-content {
- flex: 1;
-}
-
-.feature-content h3 {
- font-size: 1.5rem;
- font-weight: 600;
- color: #fff;
- margin-bottom: 1rem;
-}
-
-.feature-content p {
- font-size: 1rem;
- line-height: 1.7;
- color: rgba(255, 255, 255, 0.6);
- margin: 0;
- max-width: 450px;
-}
-
-/* Responsive for feature rows */
-@media (max-width: 900px) {
- .feature-row,
- .feature-row.reverse {
- flex-direction: column;
- gap: 2rem;
- }
-
- .feature-image {
- flex: none;
- width: 100%;
- height: 220px;
- }
-
- .feature-content {
- text-align: center;
- }
-
- .feature-content p {
- max-width: none;
- }
-}
-
-.features-v1 h2 {
- font-size: 0.75rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- color: rgba(255, 255, 255, 0.4);
- margin-bottom: 2rem;
-}
-
-.v1-grid {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 1.5rem;
-}
-
-.v1-card {
- background: rgba(255, 255, 255, 0.03);
- border: 1px solid rgba(255, 255, 255, 0.08);
- border-radius: 16px;
- overflow: hidden;
- transition: all 0.3s ease;
-}
-
-.v1-card:hover {
- border-color: rgba(255, 255, 255, 0.15);
- transform: translateY(-4px);
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-}
-
-.v1-image {
- height: 180px;
- background-size: cover;
- background-position: center;
- position: relative;
-}
-
-.v1-image::after {
- content: "";
- position: absolute;
- inset: 0;
- background: linear-gradient(
- to bottom,
- transparent 50%,
- rgba(10, 10, 15, 0.8) 100%
- );
-}
-
-.v1-content {
- padding: 1.5rem;
-}
-
-.v1-content h3 {
- font-size: 1.25rem;
- font-weight: 600;
- color: #fff;
- margin-bottom: 0.75rem;
-}
-
-.v1-content p {
- font-size: 0.9rem;
- line-height: 1.6;
- color: rgba(255, 255, 255, 0.6);
- margin: 0;
-}
-
-/* ==========================================================================
- VARIATION 2: Horizontal Feature Rows
- ========================================================================== */
-
-.features-v2 {
- margin: 6rem 0;
- padding: 4rem 0;
- border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.features-v2 h2 {
- font-size: 0.75rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- color: rgba(255, 255, 255, 0.4);
- margin-bottom: 3rem;
-}
-
-.v2-row {
- display: flex;
- align-items: center;
- gap: 3rem;
- margin-bottom: 3rem;
-}
-
-.v2-row.reverse {
- flex-direction: row-reverse;
-}
-
-.v2-image {
- flex: 0 0 280px;
- height: 200px;
- background-size: cover;
- background-position: center;
- border-radius: 12px;
- border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.v2-content {
- flex: 1;
-}
-
-.v2-content h3 {
- font-size: 1.5rem;
- font-weight: 600;
- color: #fff;
- margin-bottom: 1rem;
-}
-
-.v2-content p {
- font-size: 1rem;
- line-height: 1.7;
- color: rgba(255, 255, 255, 0.6);
- margin: 0;
- max-width: 500px;
-}
-
-/* ==========================================================================
- VARIATION 3: Minimal Cards with Accent Bars
- ========================================================================== */
-
-.features-v3 {
- margin: 6rem 0;
- padding: 4rem 0;
- border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.features-v3 h2 {
- font-size: 0.75rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- color: rgba(255, 255, 255, 0.4);
- margin-bottom: 2rem;
-}
-
-.v3-grid {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 1.25rem;
-}
-
-.v3-card {
- background: rgba(255, 255, 255, 0.02);
- border: 1px solid rgba(255, 255, 255, 0.06);
- border-radius: 12px;
- padding: 1.5rem;
- transition: all 0.3s ease;
- position: relative;
- overflow: hidden;
-}
-
-.v3-card:hover {
- background: rgba(255, 255, 255, 0.04);
- border-color: rgba(255, 255, 255, 0.1);
-}
-
-.v3-accent {
- height: 4px;
- border-radius: 2px;
- margin-bottom: 1.25rem;
-}
-
-.v3-accent.purple {
- background: linear-gradient(90deg, #8b5cf6, #a78bfa);
-}
-
-.v3-accent.blue {
- background: linear-gradient(90deg, #3b82f6, #60a5fa);
-}
-
-.v3-accent.pink {
- background: linear-gradient(90deg, #ec4899, #f472b6);
-}
-
-.v3-accent.green {
- background: linear-gradient(90deg, #10b981, #34d399);
-}
-
-.v3-accent.orange {
- background: linear-gradient(90deg, #f59e0b, #fbbf24);
-}
-
-.v3-accent.cyan {
- background: linear-gradient(90deg, #06b6d4, #22d3ee);
-}
-
-.v3-card h3 {
- font-size: 1.1rem;
- font-weight: 600;
- color: #fff;
- margin-bottom: 0.5rem;
-}
-
-.v3-card p {
- font-size: 0.875rem;
- line-height: 1.6;
- color: rgba(255, 255, 255, 0.55);
- margin: 0;
-}
-
-/* Responsive for all variations */
-@media (max-width: 900px) {
- .v1-grid,
- .v3-grid {
- grid-template-columns: repeat(2, 1fr);
- }
-
- .v2-row,
- .v2-row.reverse {
- flex-direction: column;
- }
-
- .v2-image {
- flex: none;
- width: 100%;
- height: 180px;
- }
-}
-
-@media (max-width: 600px) {
- .v1-grid,
- .v3-grid {
- grid-template-columns: 1fr;
- }
-}
-
-/* ==========================================================================
- Why Section
- ========================================================================== */
-
-.why-section {
- margin: 5rem 0;
- padding: 3rem;
- background: rgba(255, 255, 255, 0.02);
- border: 1px solid rgba(255, 255, 255, 0.05);
- border-radius: 16px;
-}
-
-.why-section h2 {
- font-size: 1.5rem;
- font-weight: 600;
- margin-bottom: 1rem;
- color: var(--sl-color-white);
-}
-
-.why-section p {
- color: rgba(255, 255, 255, 0.6);
- margin-bottom: 1.5rem;
- max-width: 600px;
-}
-
-.why-section ul {
- list-style: none;
- padding: 0;
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- gap: 1rem;
-}
-
-.why-section li {
- color: rgba(255, 255, 255, 0.8);
- padding-left: 0;
-}
-
-.why-section li strong {
- color: var(--sl-color-white);
-}
-
-/* ==========================================================================
- Code Blocks
- ========================================================================== */
-
-pre:not(.pm-pre):not(.table-box) {
- background: rgba(20, 20, 25, 0.9) !important;
- border: 1px solid rgba(255, 255, 255, 0.08) !important;
- border-radius: 12px !important;
-}
-
-/* Package Manager Code - no border */
-pre.pm-pre,
-.pm-pre {
- background: transparent !important;
- border: none !important;
- border-radius: 0 !important;
- margin: 0 !important;
- padding: 0 !important;
-}
-
-/* ASCII art tables inside terminals - no chrome, consistent monospace */
-pre.table-box {
- background: transparent !important;
- border: none !important;
- border-radius: 0 !important;
- margin: 0 !important;
- padding: 0 !important;
-}
-
-pre.table-box,
-pre.table-box * {
- font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace !important;
- font-size: inherit !important;
- font-weight: 400 !important;
- font-style: normal !important;
- font-variant: normal !important;
- font-variant-ligatures: none !important;
- font-feature-settings: normal !important;
- font-stretch: normal !important;
- letter-spacing: 0 !important;
- word-spacing: 0 !important;
- text-decoration: none !important;
- text-transform: none !important;
- -webkit-text-size-adjust: none !important;
-}
-
-code {
- font-family: var(--sl-font-mono);
- font-size: 0.9em;
-}
-
-/* ==========================================================================
- Doc Content Pages
- ========================================================================== */
-
-/* Main content area */
-.sl-markdown-content {
- color: rgba(255, 255, 255, 0.8);
- line-height: 1.8;
- font-size: 1rem;
-}
-
-/* Headings - clean hierarchy like reference */
-.sl-markdown-content h1 {
- font-size: 2.25rem;
- font-weight: 700;
- color: #fff;
- margin: 3rem 0 1rem;
- letter-spacing: -0.02em;
-}
-
-.sl-markdown-content h2 {
- font-size: 1.75rem;
- font-weight: 700;
- color: #fff;
- margin: 3rem 0 1rem;
- letter-spacing: -0.01em;
-}
-
-.sl-markdown-content h2:first-child {
- margin-top: 0;
-}
-
-.sl-markdown-content h3 {
- font-size: 1.25rem;
- font-weight: 600;
- color: #fff;
- margin: 2rem 0 0.75rem;
-}
-
-.sl-markdown-content h4 {
- font-size: 1rem;
- font-weight: 600;
- color: rgba(255, 255, 255, 0.95);
- margin: 1.5rem 0 0.5rem;
-}
-
-/* Paragraphs */
-.sl-markdown-content p {
- margin-bottom: 1.5rem;
- color: rgba(255, 255, 255, 0.75);
-}
-
-/* Lists */
-.sl-markdown-content ul,
-.sl-markdown-content ol {
- margin: 1rem 0 1.5rem;
- padding-left: 1.25rem;
-}
-
-.sl-markdown-content li {
- margin-bottom: 0.625rem;
- color: rgba(255, 255, 255, 0.75);
-}
-
-.sl-markdown-content li::marker {
- color: rgba(255, 255, 255, 0.4);
-}
-
-/* Inline code - subtle dark pill */
-.sl-markdown-content code:not(pre code) {
- background: rgba(255, 255, 255, 0.1);
- color: rgba(255, 255, 255, 0.9);
- padding: 0.2em 0.5em;
- border-radius: 5px;
- font-size: 0.875em;
- font-weight: 500;
-}
-
-/* ==========================================================================
- Code Blocks
- ========================================================================== */
-
-/* Container */
-.expressive-code {
- margin: 1.5rem 0 !important;
-}
-
-/* Frame - the outer container */
-.expressive-code figure.frame {
- background: #0d0d12 !important;
- border: 1px solid rgba(255, 255, 255, 0.1) !important;
- border-radius: 12px !important;
- overflow: hidden !important;
- box-shadow: none !important;
-}
-
-/* Header */
-.expressive-code .header {
- background: rgba(255, 255, 255, 0.03) !important;
- padding: 0.35rem 1rem !important;
- border: none !important;
-}
-
-/* Add "Terminal" text via CSS */
-.expressive-code .header .title:empty::before,
-.expressive-code.is-terminal .header::before {
- content: "Terminal";
- color: rgba(255, 255, 255, 0.5);
- font-size: 0.85rem;
- font-weight: 500;
-}
-
-/* Hide sr-only and empty spans */
-.expressive-code .header .sr-only {
- position: absolute !important;
- width: 1px !important;
- height: 1px !important;
- overflow: hidden !important;
- clip: rect(0, 0, 0, 0) !important;
-}
-
-/* Code area */
-.expressive-code pre {
- background: #0a0a0f !important;
- margin: 0 !important;
- padding: 1rem 1.25rem !important;
- border: none !important;
- border-radius: 0 0 11px 11px !important;
-}
-
-.expressive-code code {
- font-family: "JetBrains Mono", ui-monospace, monospace !important;
- font-size: 0.875rem !important;
- line-height: 1.7 !important;
-}
-
-/* Copy button */
-.expressive-code .copy {
- position: absolute !important;
- top: 0.55rem !important;
- right: 0.75rem !important;
-}
-
-.expressive-code .copy button {
- background: transparent !important;
- border: none !important;
- color: rgba(255, 255, 255, 0.4) !important;
- cursor: pointer !important;
-}
-
-.expressive-code .copy button:hover {
- color: rgba(255, 255, 255, 0.7) !important;
-}
-
-/* Standalone pre */
-.sl-markdown-content pre:not(.expressive-code pre):not(.pm-pre):not(.table-box) {
- background: #0a0a0f !important;
- border: 1px solid rgba(255, 255, 255, 0.1) !important;
- border-radius: 12px !important;
- padding: 1rem 1.25rem !important;
- margin: 1.5rem 0 !important;
-}
-
-.sl-markdown-content pre:not(.expressive-code pre):not(.pm-pre) code {
- color: rgba(255, 255, 255, 0.85) !important;
- font-family: "JetBrains Mono", ui-monospace, monospace !important;
- font-size: 0.875rem !important;
- line-height: 1.7 !important;
-}
-
-/* Main container */
-.expressive-code {
- margin: 1rem 0 !important;
- display: block !important;
-}
-
-/* The figure/frame - two-tone look like PackageManagerCode */
-.expressive-code figure,
-.expressive-code figure.frame,
-.expressive-code figure.frame.is-terminal {
- margin: 0 !important;
- padding: 0.5rem !important;
- background: rgba(255, 255, 255, 0.04) !important;
- border: none !important;
- border-radius: 12px !important;
- overflow: visible !important;
- position: relative !important;
- display: block !important;
-}
-
-/* Header area - flex container for label and copy button */
-.expressive-code figcaption,
-.expressive-code figcaption.header,
-.expressive-code figure.frame figcaption.header {
- display: flex !important;
- align-items: center !important;
- justify-content: space-between !important;
- padding: 0.5rem 0.5rem !important;
- background: transparent !important;
- border: none !important;
- margin: 0 !important;
-}
-
-/* Hide the 3 dots from expressive-code terminal styling */
-.expressive-code .frame.is-terminal .header::before {
- display: none !important;
-}
-
-/* Terminal label - replaces the dots */
-.expressive-code figcaption .title {
- display: block !important;
- color: rgba(255, 255, 255, 0.4) !important;
- font-size: 0.8rem !important;
- font-weight: 500 !important;
- font-family: var(--sl-font) !important;
- padding: 0.5rem 0.75rem !important;
-}
-
-.expressive-code figcaption .title::before {
- content: "Terminal" !important;
-}
-
-/* Hide sr-only text */
-.expressive-code figcaption .sr-only {
- display: none !important;
-}
-
-/* Pre/code area - rounded corners */
-.expressive-code pre {
- margin: 0 !important;
- padding: 0.75rem 1rem !important;
- background: #0a0a0f !important;
- border: none !important;
- border-radius: 8px !important;
- overflow-x: auto !important;
-}
-
-.expressive-code pre code,
-.expressive-code code {
- font-family: "JetBrains Mono", ui-monospace, monospace !important;
- font-size: 0.875rem !important;
- line-height: 1.7 !important;
- color: rgba(255, 255, 255, 0.85) !important;
- background: transparent !important;
- padding: 0 !important;
- border: none !important;
- display: block !important;
-}
-
-/* Code lines */
-.expressive-code .ec-line {
- display: block !important;
- padding: 0 !important;
- margin: 0 !important;
-}
-
-.expressive-code .ec-line .code {
- display: inline !important;
-}
-
-/* Copy button - positioned in header area, matching PackageManagerCode style */
-.expressive-code .copy {
- position: absolute !important;
- top: 1rem !important;
- right: 1rem !important;
- z-index: 10 !important;
- flex-direction: row !important;
- gap: 0.25rem !important;
-}
-
-.expressive-code .copy button {
- all: unset !important;
- display: flex !important;
- align-items: center !important;
- gap: 0.25rem !important;
- background: none !important;
- border: none !important;
- color: rgba(255, 255, 255, 0.4) !important;
- cursor: pointer !important;
- padding: 0.5rem !important;
- transition: color 0.15s ease !important;
- width: auto !important;
- height: auto !important;
- opacity: 1 !important;
-}
-
-.expressive-code .copy button:hover {
- color: rgba(255, 255, 255, 0.8) !important;
-}
-
-.expressive-code .copy button:focus-visible {
- color: rgba(255, 255, 255, 0.8) !important;
- outline: 2px solid rgb(var(--sl-color-accent-rgb) / 0.5) !important;
- outline-offset: 2px !important;
- border-radius: 4px !important;
-}
-
-/* Hide the default div background effect */
-.expressive-code .copy button div {
- display: none !important;
-}
-
-/* Hide default border pseudo-element */
-.expressive-code .copy button::before {
- display: none !important;
-}
-
-/* Icon via ::after - matching PackageManagerCode SVG */
-.expressive-code .copy button::after {
- content: "" !important;
- display: block !important;
- width: 16px !important;
- height: 16px !important;
- background-color: currentColor !important;
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E") !important;
- -webkit-mask-repeat: no-repeat !important;
- -webkit-mask-size: contain !important;
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E") !important;
- mask-repeat: no-repeat !important;
- mask-size: contain !important;
- margin: 0 !important;
- position: static !important;
- inset: auto !important;
-}
-
-/* Feedback tooltip - style like PackageManagerCode "Copied!" */
-.expressive-code .copy .feedback {
- background: transparent !important;
- color: #22c55e !important;
- font-size: 0.75rem !important;
- padding: 0 !important;
- margin: 0 !important;
- position: static !important;
- align-self: center !important;
-}
-
-.expressive-code .copy .feedback::after {
- display: none !important;
-}
-
-/* Syntax highlighting colors - keep them */
-.expressive-code span[style*="--0"] {
- color: var(--0) !important;
-}
-
-/* Links in content */
-.sl-markdown-content a {
- color: #93c5fd;
- text-decoration: none;
- transition: all 0.15s ease;
-}
-
-.sl-markdown-content a:hover {
- color: #bfdbfe;
- text-decoration: underline;
-}
-
-/* Callouts/Asides - blue accent like reference */
-.sl-markdown-content aside,
-.starlight-aside {
- background: rgba(59, 130, 246, 0.08) !important;
- border: none !important;
- border-left: 3px solid #3b82f6 !important;
- border-radius: 0 12px 12px 0 !important;
- padding: 1rem 1.25rem !important;
- margin: 1.5rem 0 !important;
-}
-
-.starlight-aside__title {
- color: #60a5fa !important;
- font-weight: 600 !important;
- font-size: 0.9rem !important;
- margin-bottom: 0.5rem !important;
-}
-
-.starlight-aside__content,
-.starlight-aside p {
- color: rgba(255, 255, 255, 0.75) !important;
- font-size: 0.95rem !important;
- margin: 0 !important;
-}
-
-.starlight-aside__icon {
- color: #3b82f6 !important;
-}
-
-/* Note variant */
-.starlight-aside--note {
- background: rgba(59, 130, 246, 0.08) !important;
- border-left-color: #3b82f6 !important;
-}
-
-/* Tip variant */
-.starlight-aside--tip {
- background: rgba(34, 197, 94, 0.08) !important;
- border-left-color: #22c55e !important;
-}
-
-.starlight-aside--tip .starlight-aside__icon {
- color: #22c55e !important;
-}
-
-.starlight-aside--tip .starlight-aside__title {
- color: #4ade80 !important;
-}
-
-/* Caution variant */
-.starlight-aside--caution {
- background: rgba(245, 158, 11, 0.08) !important;
- border-left-color: #f59e0b !important;
-}
-
-.starlight-aside--caution .starlight-aside__icon {
- color: #f59e0b !important;
-}
-
-.starlight-aside--caution .starlight-aside__title {
- color: #fbbf24 !important;
-}
-
-/* Danger variant */
-.starlight-aside--danger {
- background: rgba(239, 68, 68, 0.08) !important;
- border-left-color: #ef4444 !important;
-}
-
-.starlight-aside--danger .starlight-aside__icon {
- color: #ef4444 !important;
-}
-
-.starlight-aside--danger .starlight-aside__title {
- color: #f87171 !important;
-}
-
-/* Blockquotes */
-.sl-markdown-content blockquote {
- border-left: 3px solid rgba(255, 255, 255, 0.2);
- padding-left: 1.25rem;
- margin: 1.5rem 0;
- color: rgba(255, 255, 255, 0.6);
- font-style: italic;
-}
-
-.sl-markdown-content blockquote p {
- color: inherit;
-}
-
-/* Tables */
-.sl-markdown-content table {
- width: 100% !important;
- max-width: 100% !important;
- margin: 1.5rem 0;
- border-collapse: collapse;
- font-size: 0.875rem;
- display: table !important;
-}
-
-.sl-markdown-content th,
-.sl-markdown-content td {
- padding: 0.75rem 1rem;
- text-align: left;
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.sl-markdown-content th {
- color: #fff;
- font-weight: 600;
-}
-
-.sl-markdown-content td {
- color: rgba(255, 255, 255, 0.8);
-}
-
-.sl-markdown-content tr:last-child td {
- border-bottom: none;
-}
-
-/* Horizontal rules */
-.sl-markdown-content hr {
- border: none;
- border-top: 1px solid rgba(255, 255, 255, 0.08);
- margin: 2.5rem 0;
-}
-
-/* Strong/bold text */
-.sl-markdown-content strong {
- color: #fff;
- font-weight: 600;
-}
-
-/* Remove border between header and content */
-.content-panel + .content-panel {
- border-top: none !important;
-}
-
-/* Page title area */
-.content-panel h1#_top {
- font-size: 2.75rem;
- font-weight: 700;
- color: #fff;
- margin-bottom: 0.5rem;
- letter-spacing: -0.025em;
-}
-
-/* Page description if present */
-.content-panel .meta {
- color: rgba(255, 255, 255, 0.5);
- font-size: 1.1rem;
- margin-bottom: 2rem;
-}
-
-/* ==========================================================================
- Pagination (Previous/Next links)
- ========================================================================== */
-
-.pagination-links {
- gap: 0.75rem;
- margin-top: 2rem;
-}
-
-.pagination-links a {
- border: 1px solid rgba(255, 255, 255, 0.1) !important;
- border-radius: 8px !important;
- padding: 0.625rem 0.875rem !important;
- font-size: 0.8rem !important;
- box-shadow: none !important;
- background: transparent !important;
- color: rgba(255, 255, 255, 0.6) !important;
-}
-
-.pagination-links a:hover {
- border-color: rgba(255, 255, 255, 0.2) !important;
- background: rgba(255, 255, 255, 0.03) !important;
- color: rgba(255, 255, 255, 0.9) !important;
-}
-
-.pagination-links .link-title {
- font-size: 0.875rem !important;
- color: rgba(255, 255, 255, 0.9) !important;
-}
-
-.pagination-links a:hover .link-title {
- color: #fff !important;
-}
-
-.pagination-links svg {
- width: 1rem !important;
- height: 1rem !important;
- opacity: 0.5;
-}
-
-/* ==========================================================================
- Links
- ========================================================================== */
-
-a {
- color: var(--sl-color-accent-high);
- transition: color 0.15s ease;
-}
-
-a:hover {
- color: var(--sl-color-white);
-}
-
-/* ==========================================================================
- Table of Contents (Right Sidebar)
- ========================================================================== */
-
-/* Remove left border from right sidebar */
-.right-sidebar {
- border-inline-start: none !important;
-}
-
-starlight-toc a {
- color: rgba(255, 255, 255, 0.6);
- font-size: 0.875rem;
- transition: all 0.15s ease;
-}
-
-starlight-toc a:hover {
- color: rgba(255, 255, 255, 0.9);
-}
-
-starlight-toc a[aria-current="true"] {
- color: #fff;
- font-weight: 500;
-}
-
-starlight-toc h2,
-#starlight__on-this-page,
-#starlight__on-this-page--mobile,
-.right-sidebar h2,
-starlight-toc nav h2 {
- color: #fff !important;
- font-size: 0.75rem;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- font-weight: 600;
-}
-
-/* ==========================================================================
- Sidebar (for docs pages)
- ========================================================================== */
-
-/* Left sidebar border removed */
-.sidebar-pane {
- border-inline-end: none !important;
-}
-
-.sidebar-content {
- background: transparent;
- font-size: 0.875rem;
-}
-
-nav.sidebar a {
- color: rgba(255, 255, 255, 0.75);
- transition: color 0.15s ease, background 0.15s ease;
- padding: 0.5rem 0.75rem;
- border-radius: 6px;
- margin: 1px 0;
-}
-
-nav.sidebar a:hover {
- color: #fff;
- background: rgb(var(--sl-color-accent-rgb) / 0.1);
-}
-
-nav.sidebar a[aria-current="page"] {
- color: #fff;
- background: rgb(var(--sl-color-accent-rgb) / 0.2);
-}
-
-/* Sidebar group labels - "GETTING STARTED", "COMMANDS", etc. */
-.group-label,
-.group-label .large,
-.group-label span,
-.sidebar-content .top-level > li > details > summary,
-.sidebar-content .top-level > li > details > summary .group-label,
-.sidebar-content .top-level > li > details > summary .large {
- color: #fff !important;
- font-weight: 600;
- font-size: 0.75rem;
- text-transform: uppercase;
- letter-spacing: 0.05em;
-}
-
-.sidebar-content .top-level > li > details > summary:hover .group-label,
-.sidebar-content .top-level > li > details > summary:hover .large {
- color: #fff !important;
-}
-
-/* ==========================================================================
- Mobile Responsive
- ========================================================================== */
-
-@media (max-width: 768px) {
- .hero {
- text-align: center !important;
- }
-
- .hero h1 {
- font-size: 2rem !important;
- }
-
- .hero .tagline {
- font-size: 1rem !important;
- margin: 0 auto !important;
- }
-
- .hero-command {
- align-items: center;
- }
-
- .hero-command .command-box-wrapper {
- justify-content: center;
- }
-
- .hero-command .install-selector {
- max-width: 100%;
- }
-
- .hero-command .install-box {
- flex-shrink: 0;
- }
-
- .hero-command .command-area {
- font-size: 0.7rem;
- padding: 0.5rem 0.75rem;
- }
-
- .sl-card-grid {
- --sl-card-grid-cols: 1;
- }
-
- .why-section {
- padding: 1.5rem;
- }
-
- .why-section ul {
- grid-template-columns: 1fr;
- }
-
- /* Reset search bar to flow naturally in header */
- site-search button {
- position: static !important;
- transform: none !important;
- width: auto !important;
- min-width: auto !important;
- padding: 0.5rem !important;
- }
-
- /* Hide search text and kbd shortcut on mobile */
- site-search button span,
- site-search button kbd {
- display: none !important;
- }
-}
-
-/* ==========================================================================
- Force Dark Mode Globally
- Ensures dark theme even if JS fails or system preference leaks through
- ========================================================================== */
-
-:root {
- color-scheme: dark !important;
-}
-
-:root,
-:root[data-theme="light"] {
- --sl-color-bg: #0a0a0f !important;
- --sl-color-bg-nav: #0a0a0f !important;
- --sl-color-bg-sidebar: #0a0a0f !important;
- --sl-color-black: #0a0a0f !important;
- --sl-color-white: #ffffff !important;
- --sl-color-text: rgba(255, 255, 255, 0.9) !important;
- --sl-color-text-accent: #ffffff !important;
- --sl-color-gray-1: #e0e0e0 !important;
- --sl-color-gray-2: #c0c0c0 !important;
- --sl-color-gray-3: #888888 !important;
- --sl-color-gray-4: #555555 !important;
- --sl-color-gray-5: #333333 !important;
- --sl-color-gray-6: #1a1a1a !important;
-}
-
-/* Mobile Table of Contents - Force Dark Theme */
-mobile-starlight-toc {
- --sl-color-black: #0a0a0f !important;
- --sl-color-white: #ffffff !important;
-}
-
-mobile-starlight-toc nav,
-mobile-starlight-toc summary,
-mobile-starlight-toc .toggle {
- background-color: #0a0a0f !important;
- border-color: rgba(255, 255, 255, 0.1) !important;
-}
-
-mobile-starlight-toc .toggle {
- color: #ffffff !important;
- border-color: rgba(255, 255, 255, 0.2) !important;
-}
-
-mobile-starlight-toc .toggle:hover {
- border-color: rgba(255, 255, 255, 0.3) !important;
-}
-
-mobile-starlight-toc .display-current {
- color: rgba(255, 255, 255, 0.9) !important;
-}
-
-mobile-starlight-toc .dropdown {
- background-color: #0a0a0f !important;
- border-color: rgba(255, 255, 255, 0.1) !important;
-}
-
-mobile-starlight-toc a {
- color: rgba(255, 255, 255, 0.7) !important;
-}
-
-mobile-starlight-toc a:hover {
- color: #ffffff !important;
-}
-
-/* Mobile TOC Summary - Direct targeting for light mode override */
-summary#starlight__on-this-page--mobile,
-summary[id="starlight__on-this-page--mobile"] {
- background-color: #0a0a0f !important;
- border: 1px solid rgba(255, 255, 255, 0.1) !important;
- border-radius: 8px !important;
- color: #ffffff !important;
-}
-
-summary#starlight__on-this-page--mobile .toggle,
-summary[id="starlight__on-this-page--mobile"] .toggle {
- background-color: transparent !important;
- color: #ffffff !important;
-}
-
-summary#starlight__on-this-page--mobile .display-current,
-summary[id="starlight__on-this-page--mobile"] .display-current {
- color: rgba(255, 255, 255, 0.7) !important;
-}
-
-summary#starlight__on-this-page--mobile svg,
-summary[id="starlight__on-this-page--mobile"] svg,
-summary#starlight__on-this-page--mobile .caret,
-summary[id="starlight__on-this-page--mobile"] .caret {
- color: rgba(255, 255, 255, 0.5) !important;
- fill: rgba(255, 255, 255, 0.5) !important;
-}
-
-/* ==========================================================================
- Scrollbar
- ========================================================================== */
-
-::-webkit-scrollbar {
- width: 8px;
- height: 8px;
-}
-
-::-webkit-scrollbar-track {
- background: rgba(255, 255, 255, 0.02);
-}
-
-::-webkit-scrollbar-thumb {
- background: rgba(255, 255, 255, 0.1);
- border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: rgba(255, 255, 255, 0.2);
-}
-
-/* ==========================================================================
- Overscroll Easter Egg
- ========================================================================== */
-
-.overscroll-message {
- position: fixed;
- bottom: -60px;
- left: 50%;
- transform: translateX(-50%) translateY(0);
- z-index: 9999;
- pointer-events: none;
- opacity: 0;
- transition:
- opacity 0.15s ease-out,
- transform 0.15s ease-out;
-}
-
-.overscroll-message span {
- display: inline-block;
- padding: 0.6rem 1.5rem;
- background: rgb(var(--sl-color-accent-rgb) / 0.12);
- border: 1px solid rgb(var(--sl-color-accent-rgb) / 0.25);
- border-radius: 24px;
- color: rgba(255, 255, 255, 0.8);
- font-size: 0.9rem;
- font-weight: 500;
- font-family: var(--sl-font);
- backdrop-filter: blur(12px);
- white-space: nowrap;
-}
-
-.overscroll-message code {
- background: rgba(255, 255, 255, 0.1);
- padding: 0.2em 0.5em;
- border-radius: 6px;
- font-family: "JetBrains Mono", ui-monospace, monospace;
- font-size: 0.85em;
- color: #a78bfa;
- cursor: pointer;
- pointer-events: auto;
-}
-
-.overscroll-message code:hover {
- background: rgba(255, 255, 255, 0.18);
-}
-
-@media (max-width: 640px) {
- .overscroll-message span {
- white-space: normal;
- text-align: center;
- max-width: calc(100vw - 2rem);
- font-size: 0.8rem;
- padding: 0.5rem 1rem;
- }
-}
From 13b8f0402049211978a836ab745c5e70835e7ae5 Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
<264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Thu, 21 May 2026 04:48:20 +0000
Subject: [PATCH 02/12] docs: fix sidebar autogenerate format for Starlight
0.39
---
docs/astro.config.mjs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index 8b412dd9b..523341a9e 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -221,7 +221,7 @@ export default defineConfig({
},
{
label: "Commands",
- autogenerate: { directory: "commands" },
+ items: [{ autogenerate: { directory: "commands" } }],
},
{
label: "Resources",
From 4cd915caa4a3ed67c73d287eb35372636edd8d90 Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
<264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Thu, 21 May 2026 04:56:58 +0000
Subject: [PATCH 03/12] docs: restore homepage header and background gradient
- Re-add custom Header component (derived from theme's Header pattern)
with CLI-specific features: homepage detection, 'Docs' nav link,
hide search on splash page, social icons in header
- Restore the purple/blue ambient gradient glow (.main-frame::before)
- Style social icons white in header
---
docs/astro.config.mjs | 1 +
docs/src/components/Header.astro | 72 ++++++++++++++++++++++++++++++++
docs/src/styles/cli.css | 36 ++++++++++++++++
3 files changed, 109 insertions(+)
create mode 100644 docs/src/components/Header.astro
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index 523341a9e..0e49d4499 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -60,6 +60,7 @@ export default defineConfig({
],
plugins: [sentryStarlightTheme()],
components: {
+ Header: "./src/components/Header.astro",
PageTitle: "./src/components/PageTitle.astro",
},
head: [
diff --git a/docs/src/components/Header.astro b/docs/src/components/Header.astro
new file mode 100644
index 000000000..fc2f8d1fd
--- /dev/null
+++ b/docs/src/components/Header.astro
@@ -0,0 +1,72 @@
+---
+/**
+ * CLI-specific Header — extends the shared theme's Header pattern
+ * with homepage detection, "Docs" nav link, and social icons.
+ */
+import config from "virtual:starlight/user-config";
+
+import Search from "virtual:starlight/components/Search";
+import SiteTitle from "virtual:starlight/components/SiteTitle";
+import SocialIcons from "virtual:starlight/components/SocialIcons";
+
+const shouldRenderSearch =
+ config.pagefind ||
+ config.components.Search !== "@astrojs/starlight/components/Search.astro";
+
+// Detect homepage (splash page). In Starlight >=0.33, route data lives on
+// Astro.locals.starlightRoute; the old `slug` field is now `id`.
+const isHomepage = Astro.locals.starlightRoute.id === "";
+
+// Get base path for links
+const baseUrl = import.meta.env.BASE_URL;
+const base = baseUrl.endsWith("/") ? baseUrl : baseUrl + "/";
+---
+
+
+
+
diff --git a/docs/src/styles/cli.css b/docs/src/styles/cli.css
index b74ee541a..fa70ced8c 100644
--- a/docs/src/styles/cli.css
+++ b/docs/src/styles/cli.css
@@ -14,6 +14,42 @@
--sl-font-mono: "JetBrains Mono", ui-monospace, monospace;
}
+/* Subtle background gradient glow */
+.main-frame::before {
+ content: "";
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 100vh;
+ background:
+ radial-gradient(
+ ellipse 80% 50% at 50% -20%,
+ rgb(var(--sl-color-accent-rgb) / 0.12) 0%,
+ transparent 50%
+ ),
+ radial-gradient(
+ ellipse 60% 40% at 100% 0%,
+ rgba(59, 130, 246, 0.08) 0%,
+ transparent 40%
+ );
+ pointer-events: none;
+ z-index: -1;
+}
+
+/* GitHub icon - white in header */
+.social-icons a,
+.social-icons a svg {
+ color: #fff !important;
+ fill: #fff !important;
+}
+
+.social-icons a:hover,
+.social-icons a:hover svg {
+ color: rgba(255, 255, 255, 0.8) !important;
+ fill: rgba(255, 255, 255, 0.8) !important;
+}
+
/* Logo sizing */
.site-title img {
height: 2.3rem;
From ad5d508ba71840304caf10a671fc7338774e2d3a Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
<264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Thu, 21 May 2026 05:02:43 +0000
Subject: [PATCH 04/12] =?UTF-8?q?docs:=20fix=20homepage=20text=20wrapping?=
=?UTF-8?q?=20=E2=80=94=20widen=20splash=20container?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
The shared theme's --sl-content-width (50rem/800px) is too narrow for
the splash page feature sections which use side-by-side layouts with
wide ASCII terminal art. The terminal tables blow out the flex layout
and crush the text column to near-zero width.
Fix:
- Widen the splash page container to 68rem (~1088px) matching production
- Add overflow: hidden + min-width: 0 on .feature-visual to prevent
terminal content from expanding the flex item beyond 55%
---
docs/src/styles/cli.css | 13 +++++++++----
1 file changed, 9 insertions(+), 4 deletions(-)
diff --git a/docs/src/styles/cli.css b/docs/src/styles/cli.css
index fa70ced8c..307483936 100644
--- a/docs/src/styles/cli.css
+++ b/docs/src/styles/cli.css
@@ -141,14 +141,17 @@
text-decoration: none;
}
-/* Stack container - page layout for splash */
-[data-page-type="splash"] .sl-container {
- max-width: var(--sl-content-width);
+/* Stack container - page layout for splash.
+ The splash page needs a wider container than the default
+ --sl-content-width (50rem / 800px) because the feature sections
+ use a side-by-side layout with wide terminal ASCII art. */
+html[data-has-hero] .sl-container {
+ max-width: 68rem;
margin: 0 auto;
padding: 0 1.5rem;
}
-[data-page-type="splash"] main {
+html[data-has-hero] main {
padding-top: 0;
}
@@ -210,6 +213,7 @@
.feature-visual {
flex: 0 0 55%;
+ min-width: 0;
min-height: 420px;
margin: 0.5rem 0.75rem 0.75rem 0;
padding: 10%;
@@ -221,6 +225,7 @@
align-items: center;
justify-content: center;
box-sizing: border-box;
+ overflow: hidden;
}
.feature-section-inner.reverse .feature-visual {
From b0eb045003a00f763582070632d063c9e84c2ee9 Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
<264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Thu, 21 May 2026 05:21:17 +0000
Subject: [PATCH 05/12] docs: fix header and tabs on docs pages
1. Header: on docs pages, use the theme's standard header (text title +
search) instead of the branded logo header. The homepage keeps the
logo + 'Docs' link + GitHub icon. Removed replacesTitle so docs
pages show 'Sentry CLI' as text, not the logo SVG.
2. Tabs: updated PackageManagerCode tabs from underline-style to the
theme's pill-style (rounded, purple accent background on active tab)
to match Starlight tab styling from @sentry/starlight-theme.
---
docs/astro.config.mjs | 1 -
docs/src/components/Header.astro | 56 +++++++++++---------
docs/src/components/PackageManagerCode.astro | 35 ++++++------
3 files changed, 46 insertions(+), 46 deletions(-)
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index 0e49d4499..baad2d7ef 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -49,7 +49,6 @@ export default defineConfig({
favicon: "/favicon.png",
logo: {
src: "./src/assets/logo.svg",
- replacesTitle: true,
},
social: [
{
diff --git a/docs/src/components/Header.astro b/docs/src/components/Header.astro
index fc2f8d1fd..313ffb8e7 100644
--- a/docs/src/components/Header.astro
+++ b/docs/src/components/Header.astro
@@ -1,42 +1,55 @@
---
/**
- * CLI-specific Header — extends the shared theme's Header pattern
- * with homepage detection, "Docs" nav link, and social icons.
+ * CLI-specific Header — conditionally renders:
+ * - Homepage: branded header with logo, "Docs" link, social icons, no search
+ * - Docs pages: theme's standard header with search (no logo)
*/
import config from "virtual:starlight/user-config";
+import LanguageSelect from "virtual:starlight/components/LanguageSelect";
import Search from "virtual:starlight/components/Search";
import SiteTitle from "virtual:starlight/components/SiteTitle";
import SocialIcons from "virtual:starlight/components/SocialIcons";
+import ThemeSelect from "virtual:starlight/components/ThemeSelect";
const shouldRenderSearch =
config.pagefind ||
config.components.Search !== "@astrojs/starlight/components/Search.astro";
-// Detect homepage (splash page). In Starlight >=0.33, route data lives on
-// Astro.locals.starlightRoute; the old `slug` field is now `id`.
const isHomepage = Astro.locals.starlightRoute.id === "";
-// Get base path for links
const baseUrl = import.meta.env.BASE_URL;
const base = baseUrl.endsWith("/") ? baseUrl : baseUrl + "/";
---
-
+ Sentry CLI
+
-