docs: restore custom docs header

Author: betegon

docs/astro.config.mjs

@@ -47,6 +47,10 @@ export default defineConfig({
     starlight({
       title: "Sentry CLI",
       favicon: "/favicon.png",
+      logo: {
+        src: "./src/assets/logo.svg",
+        replacesTitle: true,
+      },
       social: [
         {
           icon: "github",

docs/src/components/Header.astro

@@ -1,29 +1,31 @@
 ---
-import SentryThemeHeader from "@sentry/starlight-theme/components/Header.astro";
+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 isHomepage = Astro.locals.starlightRoute.id === "";
+const shouldRenderSearch =
+  config.pagefind ||
+  config.components.Search !== "@astrojs/starlight/components/Search.astro";
 
 const baseUrl = import.meta.env.BASE_URL;
 const base = baseUrl.endsWith("/") ? baseUrl : baseUrl + "/";
 ---
 
-{isHomepage ? (
-  <!-- Homepage: custom landing-page header; docs pages use the shared theme header. -->
-  <div class="header sl-flex header-homepage">
-    <div class="sl-flex header-left">
-      <a href={base} class="site-title sl-flex">
-        <img src={`${base}wordmark-light.svg`} alt="Sentry CLI" class="homepage-logo" />
-      </a>
-    </div>
-    <div class="sl-flex header-right">
-      <a href={`${base}getting-started/`} class="header-nav-link">Docs</a>
-      <SocialIcons />
-    </div>
+<div class:list={["header", "sl-flex", { "header-homepage": isHomepage }]}>
+  <div class="sl-flex header-left">
+    <SiteTitle />
+  </div>
+
+  <div class="sl-flex header-right">
+    {!isHomepage && shouldRenderSearch && <Search />}
+    {isHomepage && <a href={`${base}getting-started/`} class="header-nav-link">Docs</a>}
+    {!isHomepage && <span class="header-nav-link header-nav-active">Docs</span>}
+    <SocialIcons />
   </div>
-) : (
-  <SentryThemeHeader />
-)}
+</div>
 
 <style>
   .header {
@@ -50,11 +52,6 @@ const base = baseUrl.endsWith("/") ? baseUrl : baseUrl + "/";
     align-items: center;
   }
 
-  .homepage-logo {
-    height: 2.3rem;
-    width: auto;
-  }
-
   .header-nav-link {
     color: #fff !important;
     text-decoration: none;
@@ -71,4 +68,13 @@ const base = baseUrl.endsWith("/") ? baseUrl : baseUrl + "/";
     opacity: 1;
     background: rgba(255, 255, 255, 0.1);
   }
+
+  .header-nav-active {
+    opacity: 1;
+    cursor: default;
+  }
+
+  .header-nav-active:hover {
+    background: none;
+  }
 </style>

docs/src/styles/cli.css

@@ -12,6 +12,11 @@
   /* CLI uses Inter + JetBrains Mono */
   --sl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --sl-font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+  /* Match the original CLI docs header sizing. */
+  --sl-nav-height: 4rem !important;
+  --sl-nav-pad-x: 1.5rem !important;
+  --sl-nav-gap: 2rem !important;
 }
 
 /* Subtle background gradient glow */
@@ -39,17 +44,109 @@
 
 /* GitHub icon - white in header */
 .social-icons a,
-.social-icons a svg {
+.social-icons a svg,
+a[href*="github.com"],
+a[href*="github.com"] svg {
   color: #fff !important;
   fill: #fff !important;
 }
 
 .social-icons a:hover,
-.social-icons a:hover svg {
+.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;
 }
 
+/* Header / Navigation */
+header.header {
+  background: rgba(10, 10, 15, 0.95);
+  backdrop-filter: blur(12px);
+  border-bottom: none;
+}
+
+header.header > .header {
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  background: transparent;
+  backdrop-filter: none;
+}
+
+.header-left {
+  flex: 0 0 auto;
+}
+
+.header-right {
+  flex: 0 0 auto;
+  gap: 1rem;
+  align-items: center;
+}
+
+.site-title img {
+  height: 2.3rem !important;
+  width: auto !important;
+}
+
+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;
+}
+
+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;
+}
+
+site-search button svg {
+  width: 14px !important;
+  height: 14px !important;
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+
+site-search button span {
+  font-size: 0.8rem !important;
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+
+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;
+}
+
 /* Docs section heading accent - keep it below the text, not through it. */
 html[data-has-sidebar] .sl-markdown-content h2:not(:where(.not-content *))::before {
   bottom: 0.02em;