From 9f31fe4998704e8603856344f741ceacd60bc4f4 Mon Sep 17 00:00:00 2001 From: bsevern Date: Thu, 28 May 2026 13:19:49 -0400 Subject: [PATCH] docs: Astro Starlight site scaffold + seed pages (#128, phase 1) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit docs/API.md doesn't scale across 15 charts and 27 vibes. Bootstraps an Astro Starlight site so we get sidebar nav, MDX, search, dark mode, and a stable place to grow per-chart references and recipes. - new docs-site/ workspace: package.json, astro.config.mjs, tsconfig, content.config.ts - seed pages: - Introduction (splash) - Quick start - Brand vs. vibe - BarChart reference (full prop table — template for the other charts) - Recipes: Responsive sizing, Dark mode, Export to PNG/SVG - MCP server overview - Vibe gallery (with a link to the playground for live previews) - root package.json gains `docs:dev` / `docs:build` scripts proxying into docs-site - README inside docs-site documents the phase-1 scope and what's deferred (14 more chart pages, auto-generated prop tables off TS types, CI deploy alongside the existing GH Pages playground) No library changes; existing typecheck/test/build/bundle all unchanged. --- docs-site/.gitignore | 18 ++++ docs-site/README.md | 22 +++++ docs-site/astro.config.mjs | 53 ++++++++++++ docs-site/package.json | 16 ++++ docs-site/src/content.config.ts | 7 ++ .../src/content/docs/charts/bar-chart.md | 84 +++++++++++++++++++ docs-site/src/content/docs/index.mdx | 44 ++++++++++ docs-site/src/content/docs/mcp/overview.md | 47 +++++++++++ .../src/content/docs/recipes/dark-mode.md | 49 +++++++++++ docs-site/src/content/docs/recipes/export.md | 45 ++++++++++ .../src/content/docs/recipes/responsive.md | 38 +++++++++ .../src/content/docs/start/brand-vs-vibe.md | 72 ++++++++++++++++ .../src/content/docs/start/quick-start.md | 57 +++++++++++++ docs-site/tsconfig.json | 5 ++ package.json | 4 +- 15 files changed, 560 insertions(+), 1 deletion(-) create mode 100644 docs-site/.gitignore create mode 100644 docs-site/README.md create mode 100644 docs-site/astro.config.mjs create mode 100644 docs-site/package.json create mode 100644 docs-site/src/content.config.ts create mode 100644 docs-site/src/content/docs/charts/bar-chart.md create mode 100644 docs-site/src/content/docs/index.mdx create mode 100644 docs-site/src/content/docs/mcp/overview.md create mode 100644 docs-site/src/content/docs/recipes/dark-mode.md create mode 100644 docs-site/src/content/docs/recipes/export.md create mode 100644 docs-site/src/content/docs/recipes/responsive.md create mode 100644 docs-site/src/content/docs/start/brand-vs-vibe.md create mode 100644 docs-site/src/content/docs/start/quick-start.md create mode 100644 docs-site/tsconfig.json diff --git a/docs-site/.gitignore b/docs-site/.gitignore new file mode 100644 index 0000000..5dc2082 --- /dev/null +++ b/docs-site/.gitignore @@ -0,0 +1,18 @@ +# build output +dist/ +.astro/ + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment +.env +.env.production + +# macOS +.DS_Store diff --git a/docs-site/README.md b/docs-site/README.md new file mode 100644 index 0000000..c64b0ee --- /dev/null +++ b/docs-site/README.md @@ -0,0 +1,22 @@ +# GoldenChart docs site + +Astro Starlight site. Independent of the library build; deployed under +`/docs/` of the GitHub Pages site alongside the existing playground. + +## Local development + +```bash +cd docs-site +npm install +npm run dev +``` + +Open . + +## Status + +Phase 1 scaffold — only seed pages are filled in (Quick start, Brand vs. vibe, +BarChart reference, Responsive / Dark mode / Export recipes, MCP overview, +Vibe gallery). Filling in the remaining 14 chart pages, auto-generating prop +tables off the TypeScript types, and wiring CI deploy are tracked under #128 +follow-ups. diff --git a/docs-site/astro.config.mjs b/docs-site/astro.config.mjs new file mode 100644 index 0000000..10abbcb --- /dev/null +++ b/docs-site/astro.config.mjs @@ -0,0 +1,53 @@ +import { defineConfig } from 'astro/config'; +import starlight from '@astrojs/starlight'; + +// Goldchart docs site. Built independently of the library; deployed under +// `/docs/` of the GitHub Pages site alongside the existing playground. +export default defineConfig({ + site: 'https://benseverndev-oss.github.io', + base: '/GoldenChart/docs', + integrations: [ + starlight({ + title: 'GoldenChart', + description: + 'Hand-drawn, sketchy React charts and flowcharts. D3 does the math, Rough.js does the drawing, and a Vibe engine dials in the aesthetic.', + social: [ + { + icon: 'github', + label: 'GitHub', + href: 'https://github.com/benseverndev-oss/GoldenChart', + }, + ], + sidebar: [ + { + label: 'Start here', + items: [ + { label: 'Introduction', link: '/' }, + { label: 'Quick start', link: '/start/quick-start/' }, + { label: 'Brand vs. vibe', link: '/start/brand-vs-vibe/' }, + ], + }, + { + label: 'Charts', + items: [{ label: 'BarChart', link: '/charts/bar-chart/' }], + }, + { + label: 'Recipes', + items: [ + { label: 'Responsive sizing', link: '/recipes/responsive/' }, + { label: 'Dark mode', link: '/recipes/dark-mode/' }, + { label: 'Export to PNG/SVG', link: '/recipes/export/' }, + ], + }, + { + label: 'MCP server', + items: [{ label: 'Overview', link: '/mcp/overview/' }], + }, + { + label: 'Gallery', + items: [{ label: 'Vibes', link: '/gallery/vibes/' }], + }, + ], + }), + ], +}); diff --git a/docs-site/package.json b/docs-site/package.json new file mode 100644 index 0000000..df15669 --- /dev/null +++ b/docs-site/package.json @@ -0,0 +1,16 @@ +{ + "name": "goldenchart-docs-site", + "version": "0.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "astro dev", + "build": "astro build", + "preview": "astro preview", + "astro": "astro" + }, + "dependencies": { + "@astrojs/starlight": "^0.36.0", + "astro": "^5.16.0" + } +} diff --git a/docs-site/src/content.config.ts b/docs-site/src/content.config.ts new file mode 100644 index 0000000..6a7b7a0 --- /dev/null +++ b/docs-site/src/content.config.ts @@ -0,0 +1,7 @@ +import { defineCollection } from 'astro:content'; +import { docsLoader } from '@astrojs/starlight/loaders'; +import { docsSchema } from '@astrojs/starlight/schema'; + +export const collections = { + docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }), +}; diff --git a/docs-site/src/content/docs/charts/bar-chart.md b/docs-site/src/content/docs/charts/bar-chart.md new file mode 100644 index 0000000..61b6ec7 --- /dev/null +++ b/docs-site/src/content/docs/charts/bar-chart.md @@ -0,0 +1,84 @@ +--- +title: BarChart +description: Single, grouped, or stacked bar chart. d3-scale computes the geometry; sketches each bar. +--- + +The reference chart for the calc/render split. `bandScale` + `linearScale` lay out the geometry; `` draws each bar. Supports single-series and multi-series (grouped or stacked) modes. + +## Single series + +```tsx +import { BarChart } from 'goldenchart'; + + +``` + +## Grouped multi-series + +```tsx + +``` + +## Stacked + +```tsx + +``` + +## Props + +| Prop | Type | Default | Notes | +|---|---|---|---| +| `data` | `ChartDatum[] \| MultiSeriesDatum[]` | required | `{label, value}` for single; `{label, values}` for grouped/stacked. | +| `width` | `number` | required | Pixel width of the surface. | +| `height` | `number` | required | Pixel height of the surface. | +| `mode` | `'single' \| 'grouped' \| 'stacked'` | `'single'` | Layout for multi-series data. | +| `seriesKeys` | `string[]` | union of value keys | Order/filter the series in multi-series modes. | +| `margin` | `Partial` | per-chart defaults | Plot inset. | +| `vibe` | `VibeConfig` | inherited | Aesthetic. See [Brand vs. vibe](/start/brand-vs-vibe/). | +| `brand` | `BrandConfig` | inherited | Identity (palette / ink / page / font / logo). | +| `title` | `string` | — | Rendered as `` / `aria-label`. | +| `description` | `string` | auto from data | Rendered as `<desc>`. Falls back to a generated summary. | +| `ariaLabel` | `string` | falls back to `title` | Explicit accessible label. | +| `dataTable` | `boolean` | — | Emit a visually-hidden data table for screen readers. | +| `showAxes` | `boolean` | `true` | | +| `showGrid` | `boolean` | `true` | | +| `showLegend` | `boolean` | `true` | Multi-series only. | +| `annotations` | `Annotation[]` | — | Lines, bands, callouts. | +| `xAxis` / `yAxis` | `AxisFormat` | — | Tick/format overrides. | +| `transitions` | `{ enabled?, durationMs? }` | `{ enabled: false }` | Opt-in enter/update animation on data change. Honours `prefers-reduced-motion`. | + +## Accessibility + +`BarChart` sets `role="img"` on the SVG, emits a `<title>` from the `title` prop, and a `<desc>` from the `description` prop (or an auto-generated summary like "Bar chart with 4 categories, values from 7 to 24."). Pair with `dataTable={true}` for full screen-reader parity. + +## See also + +- [Stacked vs. grouped semantics](/start/brand-vs-vibe/) +- [Responsive sizing](/recipes/responsive/) +- [Export to PNG/SVG](/recipes/export/) diff --git a/docs-site/src/content/docs/index.mdx b/docs-site/src/content/docs/index.mdx new file mode 100644 index 0000000..a1d75ea --- /dev/null +++ b/docs-site/src/content/docs/index.mdx @@ -0,0 +1,44 @@ +--- +title: GoldenChart +description: Hand-drawn, sketchy React charts and flowcharts. +template: splash +hero: + tagline: Hand-drawn, sketchy React charts and flowcharts. D3 does the math, Rough.js does the drawing, and a Vibe engine dials in the aesthetic. + actions: + - text: Quick start + link: /start/quick-start/ + icon: right-arrow + variant: primary + - text: Live demo + link: https://benseverndev-oss.github.io/GoldenChart/ + icon: external + - text: GitHub + link: https://github.com/benseverndev-oss/GoldenChart + icon: external +--- + +import { Card, CardGrid } from '@astrojs/starlight/components'; + +<CardGrid stagger> + <Card title="Calc / render / vibe split" icon="puzzle"> + Calculation layer (`d3-scale`, `d3-shape`, `d3-hierarchy`) computes coordinates + and never touches the DOM. The render layer (`roughjs`) turns those coordinates + into hand-drawn SVG. The Vibe engine translates `messy_sketch` into concrete + Rough.js parameters. + </Card> + <Card title="27 vibes, layered with brand" icon="seti:image"> + Every chart can take a vibe preset (`chaotic_notebook`, `chalkboard`, `neon`, …) + plus a brand identity (palette, primary, ink, page, font, logo). Swap either + independently. + </Card> + <Card title="Headless + MCP first-class" icon="seti:python"> + `goldenchart/server`'s `renderToSVGString` is the seam every server-side and + LLM-driven path builds on. The `goldenchart-mcp` package exposes the whole + library to agents level by level. + </Card> + <Card title="Interactive, accessible, exportable" icon="seti:react"> + Hover/focus tooltips, brush-zoom, linked selection, screen-reader-friendly + `<title>` / `<desc>` / SR-only data tables, PNG/SVG client-side export — all + opt-in, all under a 75 KB gzipped budget. + </Card> +</CardGrid> diff --git a/docs-site/src/content/docs/mcp/overview.md b/docs-site/src/content/docs/mcp/overview.md new file mode 100644 index 0000000..b2468fb --- /dev/null +++ b/docs-site/src/content/docs/mcp/overview.md @@ -0,0 +1,47 @@ +--- +title: MCP server overview +description: goldenchart-mcp exposes the whole library to LLM agents — render tools at every level, plus a critique-and-revise loop. +--- + +The `goldenchart-mcp` package ([npm](https://www.npmjs.com/package/goldenchart-mcp)) exposes GoldenChart over the Model Context Protocol so an agent can render hand-drawn charts and diagrams by calling tools. The defining idea: **a tool at every level of the library's architecture**, so an agent can work top-down (`render a bar chart`) or drop to the lowest level (`draw this rough path with this vibe`) when it needs full control. + +``` +Level 4 Orchestration / export ── compose_surface, export_* +Level 3 Charts ── render_bar_chart, render_line_chart, … +Level 2 Primitives ── render_rough_path, render_rough_rect, … +Level 1 Calculation (D3, pure) ── compute_scale, compute_pie, layout_tree, … +Level 0 Vibe (configuration) ── list_vibe_presets, resolve_vibe, preview_vibe +``` + +## Smart entry: `visualize_data` + +Feed raw records and an optional plain-English query: + +```jsonc +{ + "data": [ + { "month": "Jan", "revenue": 120 }, + { "month": "Feb", "revenue": 180 }, + { "month": "Mar", "revenue": 240 } + ], + "query": "revenue by month as a line in pencil", + "width": 480, + "height": 300 +} +``` + +The server profiles the data, picks the best-fit chart, applies any parsed vibe from the query, and returns the SVG plus a rationale and ranked alternatives. + +## Critique-and-revise loop + +`suggest_improvements` profiles + renders + critiques. Each critique carries a machine-readable `fix` patch. `render_with_revision` accepts the original data plus a `Revisions` patch (`keepTopCategories`, `groupRemainderAs`, `maxSeries`, `chartType`), re-renders, and returns the next critique pass. + +The `iterate-until-good` prompt wires these together: an agent calls `suggest_improvements`, picks the highest-severity fix, applies it via `render_with_revision`, and repeats until critiques empty (capped at 3 iterations). + +## Install + +```bash +npm install goldenchart-mcp +``` + +See the [`mcp/README.md`](https://github.com/benseverndev-oss/GoldenChart/tree/main/mcp) on GitHub for the full tool list and stdio configuration. diff --git a/docs-site/src/content/docs/recipes/dark-mode.md b/docs-site/src/content/docs/recipes/dark-mode.md new file mode 100644 index 0000000..bf1e0e4 --- /dev/null +++ b/docs-site/src/content/docs/recipes/dark-mode.md @@ -0,0 +1,49 @@ +--- +title: Dark mode +description: Pass a ThemedBrand to follow prefers-color-scheme automatically. SSR-safe. +--- + +A `ThemedBrand` carries a `light` and a `dark` `Brand`; `BrandProvider` (or `useResolvedBrand`) picks the right side based on the OS preference. + +```tsx +import { BrandProvider, BarChart } from 'goldenchart'; + +<BrandProvider + brand={{ + // `mode` defaults to `'auto'` — follows the OS. + light: { + palette: ['#0ea5e9', '#8b5cf6'], + ink: '#0f172a', + page: '#ffffff', + }, + dark: { + palette: ['#38bdf8', '#a78bfa'], + ink: '#e2e8f0', + page: '#0f172a', + }, + }} +> + <BarChart width={400} height={300} data={data} /> +</BrandProvider> +``` + +## Pinning a side + +```tsx +brand={{ mode: 'light', light: {...}, dark: {...} }} +brand={{ mode: 'dark', light: {...}, dark: {...} }} +``` + +## SSR + +`useColorScheme()` defaults to `'light'` until a browser is available, then upgrades to the live `prefers-color-scheme` value on hydration. No layout shift if your initial server render uses the light palette. + +## Charts that don't wrap in BrandProvider + +Charts read `resolveBrand(brand).palette` directly inside their own body (their layout runs above `Surface`'s providers), so a chart that *doesn't* sit under a `BrandProvider` will default a `ThemedBrand` to the light side. To get auto-theming inside a chart's body, swap `resolveBrand(brand)` for `useResolvedBrand(brand)`: + +```tsx +import { useResolvedBrand } from 'goldenchart'; + +const { palette } = useResolvedBrand(brand); +``` diff --git a/docs-site/src/content/docs/recipes/export.md b/docs-site/src/content/docs/recipes/export.md new file mode 100644 index 0000000..5be2f98 --- /dev/null +++ b/docs-site/src/content/docs/recipes/export.md @@ -0,0 +1,45 @@ +--- +title: Export to PNG / SVG +description: Client-side rasterisation, downloads, and clipboard copy via toPng / toSvgString / downloadChart. +--- + +`goldenchart` ships browser-side export helpers that work against a live `<svg>`. Attach a ref to the chart's `<Surface>` (or its outer container) and pass the `<svg>` to one of the helpers. + +## Grabbing the SVG ref + +```tsx +import { useRef } from 'react'; +import { BarChart, downloadChart } from 'goldenchart'; + +function ExportableChart({ data }) { + const svgRef = useRef<SVGSVGElement>(null); + return ( + <> + <BarChart svgRef={svgRef} width={480} height={300} data={data} /> + <button + onClick={() => + downloadChart(svgRef.current!, { filename: 'sales', format: 'png', scale: 2 }) + } + > + Download PNG + </button> + </> + ); +} +``` + +(`svgRef` is available on `Surface` and forwards through every chart that wraps it.) + +## API + +| Function | Signature | Notes | +|---|---|---| +| `toSvgString(svg)` | `(SVGSVGElement) => string` | XML-serialises the live SVG, ensures `xmlns` is set. No font embedding. | +| `toPng(svg, opts?)` | `(SVGSVGElement, {scale?, width?, height?, background?}) => Promise<Blob>` | Off-DOM `<canvas>` rasterisation. `scale: 2` by default. | +| `downloadChart(svg, opts)` | `(SVGSVGElement, {filename, format, ...}) => Promise<void>` | Triggers an `<a download>` click. | +| `copyToClipboard(svg, format?)` | `(SVGSVGElement, 'svg' \| 'png') => Promise<void>` | Requires HTTPS + user gesture. Uses `ClipboardItem` for PNG. | +| `chartSvgFrom(container)` | `(Element \| null) => SVGSVGElement \| null` | Find the inner `<svg>` from a container ref. | + +## Font handling + +These helpers don't embed `@font-face`. The browser is already painting the chart, so the rasterised PNG matches what the user sees. For a *standalone* SVG that renders identically without the consumer's CSS-loaded fonts, use `goldenchart/server`'s `renderToSVGString` instead — that path embeds the font bytes. diff --git a/docs-site/src/content/docs/recipes/responsive.md b/docs-site/src/content/docs/recipes/responsive.md new file mode 100644 index 0000000..642dc48 --- /dev/null +++ b/docs-site/src/content/docs/recipes/responsive.md @@ -0,0 +1,38 @@ +--- +title: Responsive sizing +description: Fill the parent container with <ResponsiveContainer>, a ResizeObserver-backed render-prop wrapper. +--- + +GoldenChart components require explicit pixel `width` / `height`. To fill a parent, wrap the chart in `<ResponsiveContainer>`: + +```tsx +import { BarChart, ResponsiveContainer } from 'goldenchart'; + +<ResponsiveContainer aspectRatio={16 / 9} maxHeight={400}> + {({ width, height }) => ( + <BarChart width={width} height={height} data={data} /> + )} +</ResponsiveContainer> +``` + +## Options + +| Prop | Default | Notes | +|---|---|---| +| `aspectRatio` | `16 / 9` | Used to derive `height` from observed width when the parent doesn't constrain height. | +| `minWidth` | — | Lower bound on the emitted width. | +| `minHeight` / `maxHeight` | — | Clamp the emitted height. | +| `debounceMs` | `80` | Debounce resize callbacks (one frame at 60Hz ≈ 16ms; 80ms feels smooth without churning). | +| `defaultSize` | — | Initial size used during SSR / before the first measurement. Without one, the container renders nothing until measured. | + +## SSR + +Pass `defaultSize` so the server emits something: + +```tsx +<ResponsiveContainer defaultSize={{ width: 800, height: 450 }}> + {(size) => <BarChart {...size} data={data} />} +</ResponsiveContainer> +``` + +On hydration the container measures the real width and re-renders. diff --git a/docs-site/src/content/docs/start/brand-vs-vibe.md b/docs-site/src/content/docs/start/brand-vs-vibe.md new file mode 100644 index 0000000..8597508 --- /dev/null +++ b/docs-site/src/content/docs/start/brand-vs-vibe.md @@ -0,0 +1,72 @@ +--- +title: Brand vs. vibe +description: Two independent layers — vibe controls how the chart is drawn; brand controls the identity (palette, ink, page, font, logo). +--- + +GoldenChart separates *how* something is drawn (the **vibe** — roughness, hachure, stroke width) from *what* it looks like (the **brand** — colours, font, logo). Either layer is optional. Both can be overridden per-chart. + +## Vibe — the aesthetic + +A vibe is either a preset name or a preset plus targeted overrides: + +```tsx +<BarChart vibe="messy_sketch" data={data} width={400} height={300} /> +<BarChart + vibe={{ preset: 'clean_blueprint', roughness: 2, stroke: '#0f766e' }} + data={data} + width={400} + height={300} +/> +``` + +Available presets include `messy_sketch`, `clean_blueprint`, `chaotic_notebook`, `pencil`, `marker`, `ink`, `crayon`, `davinci_journal`, `chalkboard`, `neon`, `comic_book`, `terminal`, `watercolor`, `newsprint`, `whiteboard`, `typewriter`, `midnight`, `art_deco`, `manga`, `highlighter`, `kraft`, `synthwave`, `botanical`, `risograph`, `sticky_note`, `amber_crt`. + +See the [Vibe gallery](/gallery/vibes/) for side-by-side previews. + +## Brand — the identity + +A brand recolours the same vibe with your palette without changing the hand-drawn feel: + +```tsx +<BarChart + vibe="pencil" + brand={{ + palette: ['#0ea5e9', '#8b5cf6', '#f59e0b', '#10b981'], + primary: '#0ea5e9', + ink: '#1f2937', + page: '#ffffff', + font: 'Inter', + logo: { src: '/logo.svg', position: 'bottom-right' }, + }} + data={data} + width={400} + height={300} +/> +``` + +## Precedence + +`resolveVibe(config, brandOverrides?)`: + +1. Preset defaults +2. Brand overrides (ink → stroke, primary → fill, page → background, font → fontFamily) +3. Explicit `vibe` overrides (always win) + +## Auto dark mode + +Pass a `ThemedBrand` to follow `prefers-color-scheme`: + +```tsx +<BrandProvider + brand={{ + light: { palette: ['#0ea5e9', '#8b5cf6'], ink: '#0f172a', page: '#ffffff' }, + dark: { palette: ['#38bdf8', '#a78bfa'], ink: '#e2e8f0', page: '#0f172a' }, + }} +> + <BarChart data={data} width={400} height={300} /> +</BrandProvider> +``` + +Pin a side with `mode: 'light'` / `mode: 'dark'`; omit `mode` to auto-track the OS theme. + +See [Dark mode](/recipes/dark-mode/) for the full pattern. diff --git a/docs-site/src/content/docs/start/quick-start.md b/docs-site/src/content/docs/start/quick-start.md new file mode 100644 index 0000000..5a9e86d --- /dev/null +++ b/docs-site/src/content/docs/start/quick-start.md @@ -0,0 +1,57 @@ +--- +title: Quick start +description: Install GoldenChart and render your first hand-drawn chart in under a minute. +--- + +## Install + +```bash +npm install goldenchart roughjs d3-scale d3-shape d3-hierarchy +``` + +`react` / `react-dom` (v18+) are peer dependencies. + +## Render a chart + +```tsx +import { BarChart } from 'goldenchart'; + +export function Sales() { + return ( + <BarChart + width={480} + height={300} + vibe="chaotic_notebook" + data={[ + { label: 'Q1', value: 12 }, + { label: 'Q2', value: 19 }, + { label: 'Q3', value: 7 }, + { label: 'Q4', value: 24 }, + ]} + /> + ); +} +``` + +That's it — a hand-drawn bar chart, no extra setup. + +## Make it fit the page + +`<BarChart>` requires explicit pixel dimensions. To fill the parent container, wrap it in `<ResponsiveContainer>`: + +```tsx +import { BarChart, ResponsiveContainer } from 'goldenchart'; + +<ResponsiveContainer aspectRatio={16 / 9} maxHeight={400}> + {({ width, height }) => ( + <BarChart width={width} height={height} data={data} /> + )} +</ResponsiveContainer> +``` + +## Next steps + +- **[Brand vs. vibe](/start/brand-vs-vibe/)** — how identity (palette/ink/page/font) layers on top of the hand-drawn aesthetic. +- **[BarChart reference](/charts/bar-chart/)** — every prop, with examples for single, grouped, and stacked. +- **[Recipes](/recipes/responsive/)** — responsive layouts, dark mode, PNG export. +- **[MCP server](/mcp/overview/)** — generate charts from an LLM agent. diff --git a/docs-site/tsconfig.json b/docs-site/tsconfig.json new file mode 100644 index 0000000..8bf91d3 --- /dev/null +++ b/docs-site/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "astro/tsconfigs/strict", + "include": [".astro/types.d.ts", "**/*"], + "exclude": ["dist"] +} diff --git a/package.json b/package.json index e3999ca..7c262cd 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,9 @@ "lint": "eslint src", "lint:fix": "eslint src --fix", "format": "prettier --write \"src/**/*.{ts,tsx}\"", - "format:check": "prettier --check \"src/**/*.{ts,tsx}\"" + "format:check": "prettier --check \"src/**/*.{ts,tsx}\"", + "docs:dev": "npm --prefix docs-site run dev", + "docs:build": "npm --prefix docs-site run build" }, "keywords": [ "react",