diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 21ebe70e9..0e49d4499 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,9 @@ 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 +78,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() { @@ -235,7 +222,7 @@ export default defineConfig({ }, { label: "Commands", - autogenerate: { directory: "commands" }, + items: [{ autogenerate: { directory: "commands" } }], }, { label: "Resources", @@ -245,7 +232,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..c73b5ce29 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.3.0", + "astro": "^6.3.5", "sharp": "^0.33.5", "shiki": "^3.21.0" } diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml index b0714788e..0c39ec74e 100644 --- a/docs/pnpm-lock.yaml +++ b/docs/pnpm-lock.yaml @@ -9,13 +9,16 @@ importers: .: dependencies: '@astrojs/starlight': - specifier: ^0.38.3 - version: 0.38.5(astro@6.3.7(@types/node@25.9.1)(rollup@4.60.4)) + specifier: ^0.39.2 + version: 0.39.2(astro@6.3.7(@types/node@25.9.1)(rollup@4.60.4)) '@sentry/astro': specifier: ^10.38.0 version: 10.53.1(astro@6.3.7(@types/node@25.9.1)(rollup@4.60.4))(rollup@4.60.4) + '@sentry/starlight-theme': + specifier: ^0.3.0 + version: 0.3.0(@astrojs/starlight@0.39.2(astro@6.3.7(@types/node@25.9.1)(rollup@4.60.4))) astro: - specifier: ^6.1.8 + specifier: ^6.3.5 version: 6.3.7(@types/node@25.9.1)(rollup@4.60.4) sharp: specifier: ^0.33.5 @@ -48,8 +51,8 @@ packages: '@astrojs/sitemap@3.7.2': resolution: {integrity: sha512-PqkzkcZTb5ICiyIR8VoKbIAP/laNRXi5tw616N1Ckk+40oNB8Can1AzVV56lrbC5GKSZFCyJYUVYqVivMisvpA==} - '@astrojs/starlight@0.38.5': - resolution: {integrity: sha512-35xLSOtZDAMAilHG2zAEZoJ4AaPb+doYOvxuuRTAnmIBSOvujffOAHv3/rr6W/LJtkhBU38PjRDJ4i8QT1uGVw==} + '@astrojs/starlight@0.39.2': + resolution: {integrity: sha512-vlw+bwnjtf5buCTUtLU7JfV6D3knslxqnspr6LKs6hfRuFZiyr5hT44F7GyDqR9FKANUqFxnIzWM81F1k/kOUA==} peerDependencies: astro: ^6.0.0 @@ -112,10 +115,6 @@ packages: engines: {node: '>=6.0.0'} hasBin: true - '@babel/runtime@7.29.2': - resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==} - engines: {node: '>=6.9.0'} - '@babel/template@7.28.6': resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==} engines: {node: '>=6.9.0'} @@ -372,155 +371,183 @@ packages: resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==} cpu: [arm64] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-arm64@1.2.4': resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==} cpu: [arm64] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-arm@1.0.5': resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==} cpu: [arm] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-arm@1.2.4': resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==} cpu: [arm] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-ppc64@1.2.4': resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==} cpu: [ppc64] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-riscv64@1.2.4': resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==} cpu: [riscv64] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-s390x@1.0.4': resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==} cpu: [s390x] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-s390x@1.2.4': resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==} cpu: [s390x] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-x64@1.0.4': resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==} cpu: [x64] os: [linux] + libc: [glibc] '@img/sharp-libvips-linux-x64@1.2.4': resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==} cpu: [x64] os: [linux] + libc: [glibc] '@img/sharp-libvips-linuxmusl-arm64@1.0.4': resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==} cpu: [arm64] os: [linux] + libc: [musl] '@img/sharp-libvips-linuxmusl-arm64@1.2.4': resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==} cpu: [arm64] os: [linux] + libc: [musl] '@img/sharp-libvips-linuxmusl-x64@1.0.4': resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==} cpu: [x64] os: [linux] + libc: [musl] '@img/sharp-libvips-linuxmusl-x64@1.2.4': resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==} cpu: [x64] os: [linux] + libc: [musl] '@img/sharp-linux-arm64@0.33.5': resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm64] os: [linux] + libc: [glibc] '@img/sharp-linux-arm64@0.34.5': resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm64] os: [linux] + libc: [glibc] '@img/sharp-linux-arm@0.33.5': resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm] os: [linux] + libc: [glibc] '@img/sharp-linux-arm@0.34.5': resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm] os: [linux] + libc: [glibc] '@img/sharp-linux-ppc64@0.34.5': resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [ppc64] os: [linux] + libc: [glibc] '@img/sharp-linux-riscv64@0.34.5': resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [riscv64] os: [linux] + libc: [glibc] '@img/sharp-linux-s390x@0.33.5': resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [s390x] os: [linux] + libc: [glibc] '@img/sharp-linux-s390x@0.34.5': resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [s390x] os: [linux] + libc: [glibc] '@img/sharp-linux-x64@0.33.5': resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [x64] os: [linux] + libc: [glibc] '@img/sharp-linux-x64@0.34.5': resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [x64] os: [linux] + libc: [glibc] '@img/sharp-linuxmusl-arm64@0.33.5': resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm64] os: [linux] + libc: [musl] '@img/sharp-linuxmusl-arm64@0.34.5': resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [arm64] os: [linux] + libc: [musl] '@img/sharp-linuxmusl-x64@0.33.5': resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [x64] os: [linux] + libc: [musl] '@img/sharp-linuxmusl-x64@0.34.5': resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} cpu: [x64] os: [linux] + libc: [musl] '@img/sharp-wasm32@0.33.5': resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==} @@ -846,66 +873,79 @@ packages: resolution: {integrity: sha512-EIPRXTVQpHyF8WOo219AD2yEltPehLTcTMz2fn6JsatLYSzQf00hj3rulF+yauOlF9/FtM2WpkT/hJh/KJFGhA==} cpu: [arm] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm-musleabihf@4.60.4': resolution: {integrity: sha512-J3Yh9PzzF1Ovah2At+lHiGQdsYgArxBbXv/zHfSyaiFQEqvNv7DcW98pCrmdjCZBrqBiKrKKe2V+aaSGWuBe/w==} cpu: [arm] os: [linux] + libc: [musl] '@rollup/rollup-linux-arm64-gnu@4.60.4': resolution: {integrity: sha512-BFDEZMYfUvLn37ONE1yMBojPxnMlTFsdyNoqncT0qFq1mAfllL+ATMMJd8TeuVMiX84s1KbcxcZbXInmcO2mRg==} cpu: [arm64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm64-musl@4.60.4': resolution: {integrity: sha512-pc9EYOSlOgdQ2uPl1o9PF6/kLSgaUosia7gOuS8mB69IxJvlclko1MECXysjs5ryez1/5zjYqx3+xYU0TU6R1A==} cpu: [arm64] os: [linux] + libc: [musl] '@rollup/rollup-linux-loong64-gnu@4.60.4': resolution: {integrity: sha512-NxnomyxYerDh5n4iLrNa+sH+Z+U4BMEE46V2PgQ/hoB909i8gV1M5wPojWg9fk1jWpO3IQnOs20K4wyZuFLEFQ==} cpu: [loong64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-loong64-musl@4.60.4': resolution: {integrity: sha512-nbJnQ8a3z1mtmrwImCYhc6BGpThAyYVRQxw9uKSKG4wR6aAYno9sVjJ0zaZcW9BPJX1GbrDPf+SvdWjgTuDmnw==} cpu: [loong64] os: [linux] + libc: [musl] '@rollup/rollup-linux-ppc64-gnu@4.60.4': resolution: {integrity: sha512-2EU6acNrQLd8tYvo/LXW535wupT3m6fo7HKo6lr7ktQoItxTyOL1ZCR/GfGCuXl2vR+zmfI6eRXkSemafv+iVg==} cpu: [ppc64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-ppc64-musl@4.60.4': resolution: {integrity: sha512-WeBtoMuaMxiiIrO2IYP3xs6GMWkJP2C0EoT8beTLkUPmzV1i/UcOSVw1d5r9KBODtHKilG5yFxsGRnBbK3wJ4A==} cpu: [ppc64] os: [linux] + libc: [musl] '@rollup/rollup-linux-riscv64-gnu@4.60.4': resolution: {integrity: sha512-FJHFfqpKUI3A10WrWKiFbBZ7yVbGT4q4B5o1qKFFojqpaYoh9LrQgqWCmmcxQzVSXYtyB5bzkXrYzlHTs21MYA==} cpu: [riscv64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-riscv64-musl@4.60.4': resolution: {integrity: sha512-mcEl6CUT5IAUmQf1m9FYSmVqCJlpQ8r8eyftFUHG8i9OhY7BkBXSUdnLH5DOf0wCOjcP9v/QO93zpmF1SptCCw==} cpu: [riscv64] os: [linux] + libc: [musl] '@rollup/rollup-linux-s390x-gnu@4.60.4': resolution: {integrity: sha512-ynt3JxVd2w2buzoKDWIyiV1pJW93xlQic1THVLXilz429oijRpSHivZAgp65KBu+cMcgf1eVVjdnTLvPxgCuoQ==} cpu: [s390x] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-gnu@4.60.4': resolution: {integrity: sha512-Boiz5+MsaROEWDf+GGEwF8VMHGhlUoQMtIPjOgA5fv4osupqTVnJteQNKJwUcnUog2G55jYXH7KZFFiJe0TEzQ==} cpu: [x64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-musl@4.60.4': resolution: {integrity: sha512-+qfSY27qIrFfI/Hom04KYFw3GKZSGU4lXus51wsb5EuySfFlWRwjkKWoE9emgRw/ukoT4Udsj4W/+xxG8VbPKg==} cpu: [x64] os: [linux] + libc: [musl] '@rollup/rollup-openbsd-x64@4.60.4': resolution: {integrity: sha512-VpTfOPHgVXEBeeR8hZ2O0F3aSso+JDWqTWmTmzcQKted54IAdUVbxE+j/MVxUsKa8L20HJhv3vUezVPoquqWjA==} @@ -1073,6 +1113,12 @@ packages: rollup: optional: true + '@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@5.3.0': resolution: {integrity: sha512-qcoSzo4n2MulVQ70UUPLq6dTleb2a2HwL2wuwvAgWhPChrYTuk6A6mDg6aQb9fairPAwFPiU9PzOANpoDJcz1A==} engines: {node: '>= 18'} @@ -1636,8 +1682,13 @@ packages: resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==} engines: {node: '>= 6'} - i18next@23.16.8: - resolution: {integrity: sha512-06r/TitrM88Mg5FdUXAKL96dJMzgqLE5dv3ryBAra4KCwD9mJ4ndOTS95ZuymIGoE+2hzfdaMak2X11/es7ZWg==} + i18next@26.2.0: + resolution: {integrity: sha512-zwBHldHdTmwN7r6UNc7lC6GWNN+YYg3DrRSeHR5PRRBf5QnJZcYHrQc0uaU26qZeYxR7iFZD+Y315dPnKP47wA==} + peerDependencies: + typescript: ^5 || ^6 + peerDependenciesMeta: + typescript: + optional: true import-in-the-middle@2.0.6: resolution: {integrity: sha512-3vZV3jX0XRFW3EJDTwzWoZa+RH1b8eTTx6YOCjglrLyPuepwoBti1k3L2dKwdCUrnVEfc5CuRuGstaC/uQJJaw==} @@ -2579,7 +2630,7 @@ snapshots: stream-replace-string: 2.0.0 zod: 4.4.3 - '@astrojs/starlight@0.38.5(astro@6.3.7(@types/node@25.9.1)(rollup@4.60.4))': + '@astrojs/starlight@0.39.2(astro@6.3.7(@types/node@25.9.1)(rollup@4.60.4))': dependencies: '@astrojs/markdown-remark': 7.1.2 '@astrojs/mdx': 5.0.6(astro@6.3.7(@types/node@25.9.1)(rollup@4.60.4)) @@ -2595,7 +2646,7 @@ snapshots: hast-util-select: 6.0.4 hast-util-to-string: 3.0.1 hastscript: 9.0.1 - i18next: 23.16.8 + i18next: 26.2.0 js-yaml: 4.1.1 klona: 2.0.6 magic-string: 0.30.21 @@ -2612,6 +2663,7 @@ snapshots: vfile: 6.0.3 transitivePeerDependencies: - supports-color + - typescript '@astrojs/telemetry@3.3.2': dependencies: @@ -2698,8 +2750,6 @@ snapshots: dependencies: '@babel/types': 7.29.0 - '@babel/runtime@7.29.2': {} - '@babel/template@7.28.6': dependencies: '@babel/code-frame': 7.29.0 @@ -3586,6 +3636,10 @@ snapshots: - encoding - supports-color + '@sentry/starlight-theme@0.3.0(@astrojs/starlight@0.39.2(astro@6.3.7(@types/node@25.9.1)(rollup@4.60.4)))': + dependencies: + '@astrojs/starlight': 0.39.2(astro@6.3.7(@types/node@25.9.1)(rollup@4.60.4)) + '@sentry/vite-plugin@5.3.0(rollup@4.60.4)': dependencies: '@sentry/bundler-plugin-core': 5.3.0 @@ -3724,7 +3778,7 @@ snapshots: '@types/sax@1.2.7': dependencies: - '@types/node': 24.12.4 + '@types/node': 25.9.1 '@types/tedious@4.0.14': dependencies: @@ -4392,9 +4446,7 @@ snapshots: transitivePeerDependencies: - supports-color - i18next@23.16.8: - dependencies: - '@babel/runtime': 7.29.2 + i18next@26.2.0: {} import-in-the-middle@2.0.6: dependencies: 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)}`; ---- - -
-
- {title} - -
-
- 
{code}
-
-
- - - - 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; ---- - -
-
- $ - {command} - -
- {docsLink && ( - - {docsText} - - - - - - )} -
- - - - 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 index ca2f8d492..cffb606fe 100644 --- a/docs/src/components/Header.astro +++ b/docs/src/components/Header.astro @@ -1,16 +1,17 @@ --- -import Search from "@astrojs/starlight/components/Search.astro"; -import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro"; -import SocialIcons from "@astrojs/starlight/components/SocialIcons.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"; -// 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 === ""; +const shouldRenderSearch = + config.pagefind || + config.components.Search !== "@astrojs/starlight/components/Search.astro"; -// Get base path for links const baseUrl = import.meta.env.BASE_URL; -const base = baseUrl.endsWith('/') ? baseUrl : baseUrl + '/'; +const base = baseUrl.endsWith("/") ? baseUrl : baseUrl + "/"; ---
@@ -19,7 +20,7 @@ const base = baseUrl.endsWith('/') ? baseUrl : baseUrl + '/';
- {!isHomepage && } + {!isHomepage && shouldRenderSearch && } {isHomepage && Docs} {!isHomepage && Docs} diff --git a/docs/src/components/InstallSelector.astro b/docs/src/components/InstallSelector.astro index 442246e0f..d6cd91c65 100644 --- a/docs/src/components/InstallSelector.astro +++ b/docs/src/components/InstallSelector.astro @@ -142,7 +142,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; } @@ -150,6 +150,10 @@ const defaultOption = highlightedOptions[defaultIndex]; .command-text { white-space: nowrap; background: transparent; + font-size: 0.875em; + font-weight: 500; + line-height: 1; + padding: 0.2em 0.5em; min-width: 47ch; /* Fixed width for longest command (curl) */ } diff --git a/docs/src/components/PackageManagerCode.astro b/docs/src/components/PackageManagerCode.astro index c10cebc2e..fdb9a6758 100644 --- a/docs/src/components/PackageManagerCode.astro +++ b/docs/src/components/PackageManagerCode.astro @@ -18,6 +18,12 @@ const id = `pm-${Math.random().toString(36).substr(2, 9)}`;
+ +
+ 
{npm}
+ + +
-
- 
{npm}
- - - -
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..146348cfe --- /dev/null +++ b/docs/src/styles/cli.css @@ -0,0 +1,614 @@ +/* ========================================================================== + 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; + + /* 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 */ +.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, +a[href*="github.com"], +a[href*="github.com"] 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; +} + +/* 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; + height: 0.12em; + left: 0; + right: var(--sl-anchor-icon-space, 0); + transform: none; +} + +/* ========================================================================== + 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. + Keep the landing page at the pre-theme width; normal docs pages use the + shared Sentry Starlight theme defaults. */ +html[data-has-hero]:not([data-has-sidebar]) { + --sl-content-width: 67.5rem !important; + --sl-content-pad-x: 2rem !important; +} + +@media (max-width: 49.999rem) { + html[data-has-hero]:not([data-has-sidebar]) { + --sl-nav-height: 3.5rem !important; + --sl-nav-pad-x: 1rem !important; + } +} + +@media (min-width: 50rem) { + html[data-has-hero]:not([data-has-sidebar]) { + --sl-nav-height: 4rem !important; + --sl-nav-pad-x: 1.5rem !important; + } +} + +html[data-has-hero]:not([data-has-sidebar]) header.header { + background: rgba(10, 10, 15, 0.95); + border-bottom: none; +} + +html[data-has-hero]:not([data-has-sidebar]) header.header > .header { + background: transparent; + backdrop-filter: none; +} + +html[data-has-hero]:not([data-has-sidebar]) .header-homepage { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + height: 100%; + width: 100%; + max-width: var(--sl-content-width); + margin: 0 auto; + padding: 0; +} + +html[data-has-hero]:not([data-has-sidebar]) .header-left { + flex: 0 0 auto; +} + +html[data-has-hero]:not([data-has-sidebar]) .header-right { + display: flex; + flex: 0 0 auto; + align-items: center; + gap: 1rem; + margin-left: auto; +} + +html[data-has-hero]:not([data-has-sidebar]) .content-panel { + padding: 1.5rem var(--sl-content-pad-x); +} + +html[data-has-hero]:not([data-has-sidebar]) .sl-container { + max-width: var(--sl-content-width); + margin: 0 auto; + padding: 0; +} + +html[data-has-hero]:not([data-has-sidebar]) main > .content-panel:first-child .sl-container > * + * { + margin-top: 1.5rem; +} + +html[data-has-hero]:not([data-has-sidebar]) .sl-markdown-content { + line-height: 1.8; +} + +html[data-has-hero]:not([data-has-sidebar]) .command-text { + font-size: 0.875em; + font-weight: 500; + line-height: 1; + padding: 0.2em 0.5em; +} + +html[data-has-hero]:not([data-has-sidebar]) 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-width: 0; + 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; + overflow: hidden; +} + +.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 + ========================================================================== */ + +@media (max-width: 768px) { + /* Reset search bar to flow naturally in the compact docs header. */ + site-search button { + position: static !important; + left: auto !important; + top: auto !important; + transform: none !important; + z-index: auto !important; + width: auto !important; + min-width: auto !important; + padding: 0.5rem !important; + } + + site-search button span, + site-search button kbd { + display: none !important; + } + + .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; - } -}