From f87d53a5f4a6a2554ff13334c99993dbcd22c4ef Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Sat, 27 Jan 2024 15:04:56 +1100
Subject: [PATCH] docs: Separate publish docs from overview

---
 docs/build.md    | 10 ++++-----
 docs/config.json |  4 ++++
 docs/overview.md | 58 +++++++-----------------------------------------
 docs/publish.md  | 50 +++++++++++++++++++++++++++++++++++++++++
 4 files changed, 67 insertions(+), 55 deletions(-)
 create mode 100644 docs/publish.md

diff --git a/docs/build.md b/docs/build.md
index 1227a65..ecb8558 100644
--- a/docs/build.md
+++ b/docs/build.md
@@ -5,11 +5,11 @@ title: Build
 
 The Vite build setup provided is the culmination of several attempts to make the TanStack libraries work in all environments, including ESM, CJS, the various TypeScript module resolution options, and a diverse bundler ecosystem.
 
-# Usage
+## Usage
 
 The build config is quite opinionated, as it is designed to work with our internal libraries. If you follow the below instructions, it _may_ work for your library too!
 
-## package.json
+### package.json
 
 - Ensure `"type": "module"` is set.
 - Ensure you have [Vite](https://www.npmjs.com/package/vite) installed. Installing [Publint](https://www.npmjs.com/package/publint) is also recommended.
@@ -34,12 +34,12 @@ The build config is quite opinionated, as it is designed to work with our intern
 }
 ```
 
-## tsconfig.json
+### tsconfig.json
 
 - Ensure your `"include"` field includes `"vite.config.ts"`.
 - Set `"moduleResolution"` to `"bundler"`.
 
-## vite.config.ts
+### vite.config.ts
 
 - Import `mergeConfig` and `tanstackBuildConfig`.
 - Merge your custom config first, followed by `tanstackBuildConfig`.
@@ -63,6 +63,6 @@ export default mergeConfig(
 )
 ```
 
-# Caveats
+## Caveats
 
 While this config _will_ work with most frameworks with a Vite adapter, it doesn't mean you _should_ use it for all frameworks. For instance, Svelte publishes [@sveltejs/package](https://www.npmjs.com/package/@sveltejs/package), and Angular publishes [ng-packagr](https://www.npmjs.com/package/ng-packagr). When a framework-specific build tool exists, this should be preferred.
diff --git a/docs/config.json b/docs/config.json
index a120828..06a38e9 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -16,6 +16,10 @@
         {
           "label": "Build",
           "to": "build"
+        },
+        {
+          "label": "Publish",
+          "to": "publish"
         }
       ]
     }
diff --git a/docs/overview.md b/docs/overview.md
index c1d8861..18debee 100644
--- a/docs/overview.md
+++ b/docs/overview.md
@@ -3,10 +3,14 @@ id: overview
 title: Overview
 ---
 
-TanStack Config allows you to publish, update, and maintain your packages
-without having to provide complex configuration.
+TanStack Config allows you to publish, update, and maintain your packages without having to provide complex configuration.
 
-# Required Pre-Requisites
+## Utilities
+
+- [Build](./build)
+- [Publish](./publish)
+
+## Required Pre-Requisites
 
 The following tools are required to be installed on the system running TanStack Config scripts:
 
@@ -17,56 +21,10 @@ The following tools are required to be installed on the system running TanStack
 
 > PNPM is currently the only supported package manager for TanStack Config.
 
-# Installation
+## Installation
 
 To install TanStack Config, run the following command:
 
 ```bash
 pnpm add --save-dev @tanstack/config
 ```
-
-# Usage
-
-You have two options for using TanStack Config:
-
-- [CLI Usage](#cli-usage)
-- [Programmatic Usage](#programmatic-usage)
-
-## CLI Usage
-
-To run the publish script for your package, run the following command:
-
-```bash
-pnpm run tanstack-config publish
-```
-
-## Programmatic Usage
-
-To use the TanStack Config programmatically, you can import the `publish` function:
-
-```ts
-import { publish } from '@tanstack/config';
-
-publish({
-  branchConfigs: configOpts.branchConfigs,
-  packages: configOpts.packages,
-  rootDir: configOpts.rootDir,
-  branch: process.env.BRANCH,
-  tag: process.env.TAG,
-  ghToken: process.env.GH_TOKEN,
-})
-  .then(() => {
-    console.log('Successfully published packages!');
-  })
-  .catch(console.error)
-```
-
-> The programmatic usage is only available for ESM packages. To support this, you have to have:
->
-> ```json
-> {
->   "type": "module"
-> }
-> ```
->
-> in your `package.json` file and use `import` instead of `require`.
diff --git a/docs/publish.md b/docs/publish.md
new file mode 100644
index 0000000..31140de
--- /dev/null
+++ b/docs/publish.md
@@ -0,0 +1,50 @@
+---
+id: publish
+title: Publish
+---
+
+## Usage
+
+You have two options for using TanStack Config to publish:
+
+- [CLI Usage](#cli-usage)
+- [Programmatic Usage](#programmatic-usage)
+
+### CLI Usage
+
+To run the publish script for your package, run the following command:
+
+```bash
+pnpm run tanstack-config publish
+```
+
+### Programmatic Usage
+
+To use the TanStack Config programmatically, you can import the `publish` function:
+
+```ts
+import { publish } from '@tanstack/config';
+
+publish({
+  branchConfigs: configOpts.branchConfigs,
+  packages: configOpts.packages,
+  rootDir: configOpts.rootDir,
+  branch: process.env.BRANCH,
+  tag: process.env.TAG,
+  ghToken: process.env.GH_TOKEN,
+})
+  .then(() => {
+    console.log('Successfully published packages!');
+  })
+  .catch(console.error)
+```
+
+> The programmatic usage is only available for ESM packages. To support this, you have to have:
+>
+> ```json
+> {
+>   "type": "module"
+> }
+> ```
+>
+> in your `package.json` file and use `import` instead of `require`.