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