From be207972515c5cf916a5a651104a51b2b6f1ef4b Mon Sep 17 00:00:00 2001 From: David Cramer Date: Thu, 11 Jun 2026 17:53:46 -0700 Subject: [PATCH] docs(website): Adopt Sentry Starlight theme Use the shared Sentry Starlight theme for website docs and its documented monochrome markdown highlighting setup. Remove local docs theme overrides that now conflict with the package while keeping Tailwind available for custom docs components. Close the broken getting-started frontend code fence so the backend example renders as its own section. Co-Authored-By: OpenAI Codex --- packages/website/astro.config.mjs | 19 ++++--- packages/website/package.json | 1 + .../docs/docs/getting-started/index.mdx | 1 + packages/website/src/tailwind.css | 8 --- packages/website/src/theme.css | 55 ------------------- pnpm-lock.yaml | 13 +++++ 6 files changed, 27 insertions(+), 70 deletions(-) delete mode 100644 packages/website/src/theme.css diff --git a/packages/website/astro.config.mjs b/packages/website/astro.config.mjs index f5a2e8497..2790f84d6 100644 --- a/packages/website/astro.config.mjs +++ b/packages/website/astro.config.mjs @@ -1,13 +1,17 @@ import starlight from "@astrojs/starlight"; import vercel from "@astrojs/vercel"; import sentry from "@sentry/astro"; +import sentryStarlightTheme, { + monochromeCodeTheme, +} from "@sentry/starlight-theme"; import { defineConfig } from "astro/config"; import Inspect from "vite-plugin-inspect"; import tailwindcss from "@tailwindcss/vite"; import react from "@astrojs/react"; -// https://astro.build/config +// Website entry point: homepage remains custom Astro/Tailwind, while /docs is owned by +// Starlight plus the shared Sentry theme and project-specific docs metadata. export default defineConfig({ site: "https://spotlightjs.com", vite: { @@ -41,8 +45,8 @@ export default defineConfig({ { icon: "discord", label: "Discord", href: "https://discord.gg/EJjqM3XtXQ" }, { icon: "github", label: "GitHub", href: "https://github.com/getsentry/spotlight" }, ], + plugins: [sentryStarlightTheme()], components: { - Header: "./src/components/docs/Header.astro", ThemeProvider: "./src/components/ThemeProvider.astro", }, @@ -123,18 +127,19 @@ export default defineConfig({ items: [{ autogenerate: { directory: "docs/reference" } }], }, ], - expressiveCode: { - themes: ["starlight-dark"], - useStarlightUiThemeColors: true, - }, editLink: { baseUrl: "https://github.com/getsentry/spotlight/edit/main/packages/website/", }, - customCss: ["./src/tailwind.css", "./src/theme.css"], + customCss: ["./src/tailwind.css"], }), react(), ], + markdown: { + shikiConfig: { + theme: monochromeCodeTheme, + }, + }, output: "static", adapter: vercel(), }); diff --git a/packages/website/package.json b/packages/website/package.json index 75f29ab6a..1577a07bb 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -18,6 +18,7 @@ "@astrojs/vercel": "^10.0.7", "@fontsource/raleway": "catalog:", "@sentry/astro": "catalog:", + "@sentry/starlight-theme": "^0.3.0", "@tailwindcss/vite": "catalog:", "@types/react": "catalog:", "@types/react-dom": "catalog:", diff --git a/packages/website/src/content/docs/docs/getting-started/index.mdx b/packages/website/src/content/docs/docs/getting-started/index.mdx index ebe65e709..c7135bd1e 100644 --- a/packages/website/src/content/docs/docs/getting-started/index.mdx +++ b/packages/website/src/content/docs/docs/getting-started/index.mdx @@ -93,6 +93,7 @@ Sentry.init({ // Capture 100% of transactions locally tracesSampleRate: 1.0, }); +``` ### Backend Applications diff --git a/packages/website/src/tailwind.css b/packages/website/src/tailwind.css index 0ad19cfce..c6efa1e46 100644 --- a/packages/website/src/tailwind.css +++ b/packages/website/src/tailwind.css @@ -22,19 +22,11 @@ } } -.site-title { - @apply font-raleway text-2xl font-light uppercase tracking-widest text-white; -} - .neon-header { @apply font-raleway font-light; word-wrap: break-word; } -header.header { - @apply bg-black/50 backdrop-blur-xs backdrop-filter; -} - .astro-code { @apply rounded-xs; } diff --git a/packages/website/src/theme.css b/packages/website/src/theme.css deleted file mode 100644 index 26b3701a4..000000000 --- a/packages/website/src/theme.css +++ /dev/null @@ -1,55 +0,0 @@ -body { - background: #05010d; -} - -dialog { - color: var(--sl-color-white); -} - -.expressive-code figure.frame { - max-width: 90vw; -} - -:root { - --sl-font: ui-sans-serif, sans-serif, system-ui, "Helvetica", "Arial"; - --sl-font-monospace: ui-monospace, monospace, "Menlo", "Consolas", "Courier New"; -} - -:root, -:root[data-theme='light'] { - --sl-color-white: #fff; - --sl-color-accent-low: #1e1b4b; - --sl-color-accent: #4f46e5; - --sl-color-accent-high: #c7d2fe; - --sl-color-gray-1: hsl(224, 20%, 94%); - --sl-color-gray-2: hsl(224, 6%, 77%); - --sl-color-gray-3: hsl(224, 6%, 56%); - --sl-color-gray-4: hsl(224, 7%, 36%); - --sl-color-gray-5: hsl(228, 13%, 23%); - --sl-color-gray-6: hsl(249, 29%, 13%); - --sl-color-gray-7: hsl(245, 30%, 8%); - --sl-color-black: hsl(249, 36%, 9%); - --sl-color-text-accent: var(--sl-color-accent-high); - --sl-color-text-invert: var(--sl-color-accent-low); - --sl-color-bg-sidebar: var(--sl-color-gray-6); - --sl-hue-orange: 41; - --sl-color-orange-low: hsl(var(--sl-hue-orange), 39%, 22%); - --sl-color-orange: hsl(var(--sl-hue-orange), 82%, 63%); - --sl-color-orange-high: hsl(var(--sl-hue-orange), 82%, 87%); - --sl-hue-green: 101; - --sl-color-green-low: hsl(var(--sl-hue-green), 39%, 22%); - --sl-color-green: hsl(var(--sl-hue-green), 82%, 63%); - --sl-color-green-high: hsl(var(--sl-hue-green), 82%, 80%); - --sl-hue-blue: 234; - --sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 20%); - --sl-color-blue: hsl(var(--sl-hue-blue), 100%, 60%); - --sl-color-blue-high: hsl(var(--sl-hue-blue), 100%, 87%); - --sl-hue-purple: 281; - --sl-color-purple-low: hsl(var(--sl-hue-purple), 39%, 22%); - --sl-color-purple: hsl(var(--sl-hue-purple), 82%, 63%); - --sl-color-purple-high: hsl(var(--sl-hue-purple), 82%, 89%); - --sl-hue-red: 339; - --sl-color-red-low: hsl(var(--sl-hue-red), 39%, 22%); - --sl-color-red: hsl(var(--sl-hue-red), 82%, 63%); - --sl-color-red-high: hsl(var(--sl-hue-red), 82%, 87%); -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d1485fb9d..efac5801d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -378,6 +378,9 @@ importers: '@sentry/astro': specifier: 'catalog:' version: 10.32.1(astro@6.3.3(@types/node@25.5.0)(@vercel/functions@3.5.1)(jiti@2.4.2)(lightningcss@1.32.0)(rollup@4.60.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.9.0)) + '@sentry/starlight-theme': + specifier: ^0.3.0 + version: 0.3.0(@astrojs/starlight@0.39.2(astro@6.3.3(@types/node@25.5.0)(@vercel/functions@3.5.1)(jiti@2.4.2)(lightningcss@1.32.0)(rollup@4.60.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.9.0))(typescript@5.9.2)) '@tailwindcss/vite': specifier: 'catalog:' version: 4.1.11(vite@7.3.3(@types/node@25.5.0)(jiti@2.4.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.9.0)) @@ -2425,6 +2428,12 @@ packages: peerDependencies: react: ^16.14.0 || 17.x || 18.x || 19.x + '@sentry/starlight-theme@0.3.0': + resolution: {integrity: sha512-/6HZoCd54dQ9lJHcF5C5f9EDM1iZZZkMjDaItMPhC5ExpYgwT82sci77a+lFVx/85U7n1/0fGpekB4aozLQXAA==} + engines: {node: '>=22.12.0'} + peerDependencies: + '@astrojs/starlight': '>=0.39.0' + '@sentry/vite-plugin@2.23.0': resolution: {integrity: sha512-iLbqxan3DUkFJqbx7DOtJ2fTd6g+TmNS1PIdaDFfpvVG4Lg9AYp4Xege6BBCrGQYl+wUE3poWfNhASfch/s51Q==} engines: {node: '>= 14'} @@ -9482,6 +9491,10 @@ snapshots: hoist-non-react-statics: 3.3.2 react: 18.3.1 + '@sentry/starlight-theme@0.3.0(@astrojs/starlight@0.39.2(astro@6.3.3(@types/node@25.5.0)(@vercel/functions@3.5.1)(jiti@2.4.2)(lightningcss@1.32.0)(rollup@4.60.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.9.0))(typescript@5.9.2))': + dependencies: + '@astrojs/starlight': 0.39.2(astro@6.3.3(@types/node@25.5.0)(@vercel/functions@3.5.1)(jiti@2.4.2)(lightningcss@1.32.0)(rollup@4.60.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.9.0))(typescript@5.9.2) + '@sentry/vite-plugin@2.23.0': dependencies: '@sentry/bundler-plugin-core': 2.23.0