docs(site): improve UI, add catppuccin theme, fix MDX bugs
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
import { defineConfig } from 'astro/config';
|
||||
import starlight from '@astrojs/starlight';
|
||||
import starlightLinksValidator from 'starlight-links-validator';
|
||||
import starlightCatppuccin from '@catppuccin/starlight';
|
||||
import sidebar from './src/sidebar.json' with { type: 'json' };
|
||||
|
||||
export default defineConfig({
|
||||
@@ -25,7 +27,13 @@ export default defineConfig({
|
||||
content: 'document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll("starlight-file-tree").forEach(tree => { tree.querySelectorAll("details").forEach((d, i) => { if (i !== 0) d.removeAttribute("open"); }); }); });',
|
||||
},
|
||||
],
|
||||
customCss: ['./src/styles/catppuccin.css'],
|
||||
plugins: [
|
||||
starlightLinksValidator(),
|
||||
starlightCatppuccin({
|
||||
dark: { flavor: "mocha", accent: "green" },
|
||||
light: { flavor: "latte", accent: "sky" },
|
||||
}),
|
||||
],
|
||||
expressiveCode: {
|
||||
// Shiki ships both Catppuccin flavours; Starlight picks by the
|
||||
// reader's colour scheme, matching the palette in catppuccin.css.
|
||||
|
||||
Generated
+159
-1
@@ -9,8 +9,10 @@
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@astrojs/starlight": "^0.41.4",
|
||||
"@catppuccin/starlight": "^2.1.0",
|
||||
"astro": "^7.0.2",
|
||||
"sharp": "^0.34.5"
|
||||
"sharp": "^0.34.5",
|
||||
"starlight-links-validator": "^0.25.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@astrojs/compiler-binding": {
|
||||
@@ -596,6 +598,19 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@catppuccin/starlight": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@catppuccin/starlight/-/starlight-2.1.0.tgz",
|
||||
"integrity": "sha512-S5zr0WMHUZgsKzoAebj48DAT5r96jRgJSNftNEIoSi9Nk9KatxP5IUntYqmX5B2L5PGfvKO/oEjINuLLaiRn0g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@astrojs/starlight": "^0.41.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@astrojs/starlight": ">=0.38",
|
||||
"astro": "^6.0.0 || ^7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@clack/core": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@clack/core/-/core-1.4.3.tgz",
|
||||
@@ -2326,6 +2341,12 @@
|
||||
"undici-types": "~7.18.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/picomatch": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/picomatch/-/picomatch-4.0.3.tgz",
|
||||
"integrity": "sha512-iG0T6+nYJ9FAPmx9SsUlnwcq1ZVRuCXcVEvWnntoPlrOpwtSTKNDC9uVAxTsC3PUvJ+99n4RpAcNgBbHX3JSnQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/sax": {
|
||||
"version": "1.2.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.7.tgz",
|
||||
@@ -2380,6 +2401,21 @@
|
||||
"am-i-vibing": "dist/cli.mjs"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-escapes": {
|
||||
"version": "7.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.3.0.tgz",
|
||||
"integrity": "sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"environment": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/anymatch": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
|
||||
@@ -3038,6 +3074,18 @@
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/environment": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
|
||||
"integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/es-module-lexer": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.1.tgz",
|
||||
@@ -3367,6 +3415,18 @@
|
||||
"uncrypto": "^0.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/has-flag": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-5.0.1.tgz",
|
||||
"integrity": "sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/hast-util-embedded": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/hast-util-embedded/-/hast-util-embedded-3.0.0.tgz",
|
||||
@@ -3807,6 +3867,18 @@
|
||||
"url": "https://github.com/sponsors/brc-dd"
|
||||
}
|
||||
},
|
||||
"node_modules/is-absolute-url": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-5.0.0.tgz",
|
||||
"integrity": "sha512-sdJyNpBnQHuVnBunfzjAecOhZr2+A30ywfFvu3EnxtKLUWfwGgyWUmqHbGZiU6vTfHpCPm5GvLe4BAvlU9n8VQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/is-alphabetical": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
|
||||
@@ -6272,6 +6344,33 @@
|
||||
"url": "https://github.com/sponsors/wooorm"
|
||||
}
|
||||
},
|
||||
"node_modules/starlight-links-validator": {
|
||||
"version": "0.25.2",
|
||||
"resolved": "https://registry.npmjs.org/starlight-links-validator/-/starlight-links-validator-0.25.2.tgz",
|
||||
"integrity": "sha512-RQiHkM8FHKermsjMkSb+uS/q50Dv5P0O0ECWKxJyTv4stuO8QTorIEKnITDDLEf9/xyg7M69arxiK2ola3OMqA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@astrojs/markdown-satteri": "^0.3.2",
|
||||
"@types/picomatch": "^4.0.2",
|
||||
"github-slugger": "^2.0.0",
|
||||
"hast-util-from-html": "^2.0.3",
|
||||
"is-absolute-url": "^5.0.0",
|
||||
"mdast-util-mdx-jsx": "^3.2.0",
|
||||
"mdast-util-to-hast": "^13.2.1",
|
||||
"picomatch": "^4.0.3",
|
||||
"satteri": "^0.9.3",
|
||||
"terminal-link": "^5.0.0",
|
||||
"unist-util-visit": "^5.1.0",
|
||||
"yaml": "^2.8.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=22.12.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@astrojs/starlight": ">=0.41.0",
|
||||
"astro": ">=7.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/stream-replace-string": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/stream-replace-string/-/stream-replace-string-2.0.0.tgz",
|
||||
@@ -6310,6 +6409,34 @@
|
||||
"inline-style-parser": "0.2.7"
|
||||
}
|
||||
},
|
||||
"node_modules/supports-color": {
|
||||
"version": "10.2.2",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-10.2.2.tgz",
|
||||
"integrity": "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/supports-color?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/supports-hyperlinks": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-4.5.0.tgz",
|
||||
"integrity": "sha512-ZW2OvfeCXrNTbLakPUzjQG922EeGCOteFSVoek5DKStTh898wf7zgtuFlzQN8HfZCxC3Eh02yJVrRW51hADf+w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"has-flag": "^5.0.1",
|
||||
"supports-color": "^10.2.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/supports-hyperlinks?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/svgo/-/svgo-4.0.2.tgz",
|
||||
@@ -6335,6 +6462,22 @@
|
||||
"url": "https://opencollective.com/svgo"
|
||||
}
|
||||
},
|
||||
"node_modules/terminal-link": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-5.0.0.tgz",
|
||||
"integrity": "sha512-qFAy10MTMwjzjU8U16YS4YoZD+NQLHzLssFMNqgravjbvIPNiqkGFR4yjhJfmY9R5OFU7+yHxc6y+uGHkKwLRA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ansi-escapes": "^7.0.0",
|
||||
"supports-hyperlinks": "^4.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/tiny-inflate": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
|
||||
@@ -6860,6 +7003,21 @@
|
||||
"integrity": "sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/yaml": {
|
||||
"version": "2.9.0",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
|
||||
"integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
|
||||
"license": "ISC",
|
||||
"bin": {
|
||||
"yaml": "bin.mjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14.6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/eemeli"
|
||||
}
|
||||
},
|
||||
"node_modules/yargs-parser": {
|
||||
"version": "22.0.0",
|
||||
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-22.0.0.tgz",
|
||||
|
||||
@@ -11,7 +11,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/starlight": "^0.41.4",
|
||||
"@catppuccin/starlight": "^2.1.0",
|
||||
"astro": "^7.0.2",
|
||||
"sharp": "^0.34.5"
|
||||
"sharp": "^0.34.5",
|
||||
"starlight-links-validator": "^0.25.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,153 +0,0 @@
|
||||
/* Catppuccin Mocha (dark) / Latte (light) mapped onto Starlight tokens. */
|
||||
:root {
|
||||
--ctp-rosewater: #f5e0dc;
|
||||
--ctp-pink: #f5c2e7;
|
||||
--ctp-mauve: #cba6f7;
|
||||
--ctp-red: #f38ba8;
|
||||
--ctp-peach: #fab387;
|
||||
--ctp-yellow: #f9e2af;
|
||||
--ctp-green: #a6e3a1;
|
||||
--ctp-teal: #94e2d5;
|
||||
--ctp-sky: #89dceb;
|
||||
--ctp-blue: #89b4fa;
|
||||
--ctp-lavender: #b4befe;
|
||||
--ctp-surface: #313244;
|
||||
|
||||
--sl-color-accent-low: #1e1e2e;
|
||||
--sl-color-accent: #89b4fa;
|
||||
--sl-color-accent-high: #b4befe;
|
||||
--sl-color-white: #cdd6f4;
|
||||
--sl-color-gray-1: #bac2de;
|
||||
--sl-color-gray-2: #a6adc8;
|
||||
--sl-color-gray-3: #7f849c;
|
||||
--sl-color-gray-4: #585b70;
|
||||
--sl-color-gray-5: #45475a;
|
||||
--sl-color-gray-6: #313244;
|
||||
--sl-color-black: #181825;
|
||||
}
|
||||
|
||||
:root[data-theme='light'] {
|
||||
--ctp-rosewater: #dc8a78;
|
||||
--ctp-pink: #ea76cb;
|
||||
--ctp-mauve: #8839ef;
|
||||
--ctp-red: #d20f39;
|
||||
--ctp-peach: #fe640b;
|
||||
--ctp-yellow: #df8e1d;
|
||||
--ctp-green: #40a02b;
|
||||
--ctp-teal: #179299;
|
||||
--ctp-sky: #04a5e5;
|
||||
--ctp-blue: #1e66f5;
|
||||
--ctp-lavender: #7287fd;
|
||||
--ctp-surface: #ccd0da;
|
||||
|
||||
--sl-color-accent-low: #dce0e8;
|
||||
--sl-color-accent: #1e66f5;
|
||||
--sl-color-accent-high: #7287fd;
|
||||
--sl-color-white: #4c4f69;
|
||||
--sl-color-gray-1: #5c5f77;
|
||||
--sl-color-gray-2: #6c6f85;
|
||||
--sl-color-gray-3: #7c7f93;
|
||||
--sl-color-gray-4: #9ca0b0;
|
||||
--sl-color-gray-5: #bcc0cc;
|
||||
--sl-color-gray-6: #ccd0da;
|
||||
--sl-color-black: #eff1f5;
|
||||
}
|
||||
|
||||
/* ── Headings ──────────────────────────────────────────────────────── */
|
||||
/* The manual is one long reference; tinting each level makes the
|
||||
hierarchy scannable without relying on size alone. */
|
||||
.sl-markdown-content h1 {
|
||||
color: var(--ctp-lavender);
|
||||
}
|
||||
|
||||
.sl-markdown-content h2 {
|
||||
color: var(--ctp-green);
|
||||
border-bottom: 1px solid var(--sl-color-gray-5);
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.sl-markdown-content h3 {
|
||||
color: var(--ctp-blue);
|
||||
}
|
||||
|
||||
.sl-markdown-content h4 {
|
||||
color: var(--ctp-teal);
|
||||
}
|
||||
|
||||
/* ── Inline code ───────────────────────────────────────────────────── */
|
||||
/* Function names, variables, and flags appear inline constantly; peach
|
||||
separates them from prose the way the fenced blocks separate examples. */
|
||||
.sl-markdown-content :not(pre) > code {
|
||||
color: var(--ctp-peach);
|
||||
background: var(--ctp-surface);
|
||||
border: 1px solid var(--sl-color-gray-5);
|
||||
border-radius: 0.3em;
|
||||
padding: 0.1em 0.35em;
|
||||
}
|
||||
|
||||
.sl-markdown-content a > code {
|
||||
color: var(--ctp-sky);
|
||||
}
|
||||
|
||||
/* ── Links ─────────────────────────────────────────────────────────── */
|
||||
.sl-markdown-content a:not(:where(.not-content *)) {
|
||||
color: var(--ctp-sky);
|
||||
text-decoration-color: var(--sl-color-gray-4);
|
||||
}
|
||||
|
||||
.sl-markdown-content a:not(:where(.not-content *)):hover {
|
||||
color: var(--ctp-teal);
|
||||
text-decoration-color: currentColor;
|
||||
}
|
||||
|
||||
.sl-link-button.primary {
|
||||
color: var(--sl-color-black) !important;
|
||||
}
|
||||
|
||||
|
||||
/* ── Cards ─────────────────────────────────────────────────────────── */
|
||||
/* Each function category is a grid of LinkCards; a hover accent makes the
|
||||
grid feel navigable rather than like a wall of boxes. */
|
||||
.card {
|
||||
border-color: var(--sl-color-gray-5);
|
||||
transition:
|
||||
border-color 150ms ease,
|
||||
transform 150ms ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: var(--ctp-green);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card .title {
|
||||
color: var(--ctp-lavender);
|
||||
}
|
||||
|
||||
/* ── Asides ────────────────────────────────────────────────────────── */
|
||||
.starlight-aside--note {
|
||||
--sl-color-asides-text-accent: var(--ctp-blue);
|
||||
}
|
||||
|
||||
.starlight-aside--tip {
|
||||
--sl-color-asides-text-accent: var(--ctp-mauve);
|
||||
}
|
||||
|
||||
.starlight-aside--caution {
|
||||
--sl-color-asides-text-accent: var(--ctp-yellow);
|
||||
}
|
||||
|
||||
.starlight-aside--danger {
|
||||
--sl-color-asides-text-accent: var(--ctp-red);
|
||||
}
|
||||
|
||||
/* ── Site chrome ───────────────────────────────────────────────────── */
|
||||
.site-title {
|
||||
color: var(--ctp-green);
|
||||
}
|
||||
|
||||
/* Table headers carry the accent so the many reference tables in the
|
||||
manual read as structured data at a glance. */
|
||||
.sl-markdown-content th {
|
||||
color: var(--ctp-yellow);
|
||||
}
|
||||
Reference in New Issue
Block a user