diff --git a/README.md b/README.md index 90cba4aa..2aae87b1 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,19 @@ -# Welcome to TanStack.com! +
-This site is built with TanStack Router! +# TanStack.com -- [TanStack Router Docs](https://tanstack.com/router) +The home of the TanStack ecosystem. Built with [TanStack Router](https://tanstack.com/router) and deployed automagically with [Netlify](https://netlify.com/). -It's deployed automagically with Netlify! +Follow @TanStack -- [Netlify](https://netlify.com/) +### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) + +
## Development +### Quick Start + From your terminal: ```sh @@ -19,54 +23,66 @@ pnpm dev This starts your app in development mode, rebuilding assets on file changes. -## Editing and previewing the docs of TanStack projects locally +### Local Setup -The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. -In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. +The documentation for all TanStack projects (except `React Charts`) is hosted on [tanstack.com](https://tanstack.com). In production, doc pages are fetched from GitHub. In development, they're read from your local file system. -Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : +Pre-commit hooks run smoke tests against these docs, so you'll need sibling repos cloned for commits to pass. -1. Create a new directory called `tanstack`. +Create a `tanstack` parent directory and clone this repo alongside the projects: ```sh -mkdir tanstack +mkdir tanstack && cd tanstack +git clone git@github.com:TanStack/tanstack.com.git +git clone git@github.com:TanStack/query.git +git clone git@github.com:TanStack/router.git +git clone git@github.com:TanStack/table.git ``` -2. Enter the directory and clone this repo and the repo of the project there. +Your directory structure should look like this: -```sh -cd tanstack -git clone git@github.com:TanStack/tanstack.com.git -git clone git@github.com:TanStack/form.git ``` +tanstack/ + ├── tanstack.com/ + ├── query/ + ├── router/ + └── table/ +``` + +> [!WARNING] +> Directory names must match repo names exactly (e.g., `query` not `tanstack-query`). The app finds docs by looking for sibling directories by name. + +### Editing Docs + +To edit docs for a project, make changes in its `docs/` folder (e.g., `../form/docs/`) and visit http://localhost:3000/form/latest/docs/overview to preview. > [!NOTE] -> Your `tanstack` directory should look like this: -> -> ``` -> tanstack/ -> | -> +-- form/ -> | -> +-- tanstack.com/ -> ``` +> Updated pages need to be manually reloaded in the browser. > [!WARNING] -> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. +> Update the project's `docs/config.json` if you add a new doc page! -3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: +## Get Involved -```sh -cd tanstack.com -pnpm i -# The app will run on https://localhost:3000 by default -pnpm dev -``` +- We welcome issues and pull requests! +- Participate in [GitHub Discussions](https://github.com/TanStack/tanstack.com/discussions) +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) -4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. +## Explore the TanStack Ecosystem -> [!NOTE] -> The updated pages need to be manually reloaded in the browser. +- TanStack Config – Tooling for JS/TS packages +- TanStack DB – Reactive sync client store +- TanStack DevTools – Unified devtools panel +- TanStack Form – Type‑safe form state +- TanStack Pacer – Debouncing, throttling, batching +- TanStack Query – Async state & caching +- TanStack Ranger – Range & slider primitives +- TanStack Router – Type‑safe routing, caching & URL state +- TanStack Start – Full‑stack SSR & streaming +- TanStack Store – Reactive data store +- TanStack Table – Headless datagrids +- TanStack Virtual – Virtualized rendering -> [!WARNING] -> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page! +… and more at TanStack.com » + +