TanStack · rkulinski · Mar 21, 2023 · Mar 7, 2023 · Mar 21, 2023 · Mar 21, 2023
diff --git a/docs/adapters/react-ranger.md b/docs/adapters/react-ranger.md
@@ -0,0 +1,9 @@
+---
+title: React Router
+---
+
+You can install TanStack Router with any [NPM](https://npmjs.com) package manager.
+
+```sh
+npm install @tanstack/react-ranger
+```
diff --git a/docs/api/basic.md → docs/api/react/basic.md b/docs/api/basic.md → docs/api/react/basic.md
diff --git a/docs/api/custom-steps.md → docs/api/react/custom-steps.md b/docs/api/custom-steps.md → docs/api/react/custom-steps.md
diff --git a/docs/api/custom-styles.md → docs/api/react/custom-styles.md b/docs/api/custom-styles.md → docs/api/react/custom-styles.md
diff --git a/docs/api/logarithmic-interpolator.md → docs/api/react/logarithmic-interpolator.md b/docs/api/logarithmic-interpolator.md → docs/api/react/logarithmic-interpolator.md
diff --git a/docs/api/update-on-drag.md → docs/api/react/update-on-drag.md b/docs/api/update-on-drag.md → docs/api/react/update-on-drag.md
diff --git a/docs/config.json b/docs/config.json
@@ -0,0 +1,94 @@
+{
+  "docSearch": {
+    "appId": "FQ0DQ6MA3C",
+    "apiKey": "8264730bab8a9b7fa6a0c85761d7a3fe",
+    "indexName": "tanstack"
+  },
+  "menu": [
+    {
+      "label": "Getting Started",
+      "children": [
+        {
+          "label": "Overview",
+          "to": "overview"
+        },
+        {
+          "label": "Installation",
+          "to": "installation"
+        },
+        {
+          "label": "Quick Start",
+          "to": "quick-start"
+        }
+      ]
+    },
+    {
+      "label": "Adapters",
+      "children": [
+        {
+          "label": "React",
+          "to": "adapters/react-ranger"
+        }
+      ]
+    },
+    {
+      "label": "API",
+      "children": [
+        {
+          "label": "Core API",
+          "to": "api/core"
+        }
+      ]
+    },
+    {
+      "label": "React Ranger",
+      "children": [
+        {
+          "label": "Basic",
+          "to": "api/react/basic"
+        },
+        {
+          "label": "Custom Steps",
+          "to": "api/react/custom-steps"
+        },
+        {
+          "label": "Custom Styles",
+          "to": "api/react/custom-styles"
+        },
+        {
+          "label": "Logarithmic Interpolator",
+          "to": "api/react/logarithmic-interpolator"
+        },
+        {
+          "label": "Update on Drag",
+          "to": "api/react/update-on-drag"
+        }
+      ]
+    },
+    {
+      "label": "React Examples",
+      "children": [
+        {
+          "label": "Basic",
+          "to": "examples/react/basic?file=src%2Fmain.tsx"
+        },
+        {
+          "label": "Custom Steps",
+          "to": "examples/react/custom-steps?file=src%2Fmain.tsx"
+        },
+        {
+          "label": "Custom Styles",
+          "to": "examples/react/custom-styles?file=src%2Fmain.tsx"
+        },
+        {
+          "label": "Logarithmic Interpolator",
+          "to": "examples/react/logarithmic-interpolator?file=src%2Fmain.tsx"
+        },
+        {
+          "label": "Update on Drag",
+          "to": "examples/react/update-on-drag?file=src%2Fmain.tsx"
+        }
+      ]
+    }
+  ]
+}
diff --git a/docs/installation.md b/docs/installation.md
@@ -1,24 +1,13 @@
 ---
-name: Installation
-route: /installation
+title: Installation
 ---
 
-# Installation
+You can install TanStack Ranger with any [NPM](https://npmjs.com) package manager.
 
-Install React Ranger as a dependency using `npm` or `yarn`
+Depending on your framework of choice, install one of the following packages:
 
-```bash
-# NPM
-$ npm install react-ranger
-
-# Yarn
-$ yarn add react-ranger
-```
-
-To import React Ranger:
-
-```js
-import { useRanger } from '@tanstack/react-ranger'
-```
-
-Once you've installed React Ranger, continue to [Concepts](./concepts) to read more about how to utilize its API
+- [React](./adapters/react-ranger)
+- Solid (coming soon!)
+- Vue (coming soon!)
+- Svelte (coming soon!)
+- Angular (coming soon!)
diff --git a/docs/overview.md b/docs/overview.md
@@ -0,0 +1,15 @@
+---
+title: Overview
+---
+
+Feature Rich and Lightweight Headless utility, which means out of the box, it doesn't render or supply any actual UI elements. Some of its features include:
+
+- 100% Typesafe
+- Lightweight (10kb)
+- Easy to maintain
+- Extensible
+- Not dictating UI
+
+## Let's go!
+
+Enough overview, there's so much more to do with TanStack Ranger. Hit that next button and let's get started!
diff --git a/docs/quick-start.md b/docs/quick-start.md
@@ -0,0 +1,112 @@
+---
+title: Quick Start
+---
+
+If you're feeling impatient and prefer to skip all of our wonderful documentation, here is the bare minimum to get going with TanStack Router. We'll use React for this example, but the same principles apply to other frameworks.
+
+```tsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { useRanger, Ranger } from '@tanstack/react-ranger'
+
+function App() {
+  const rangerRef = React.useRef<HTMLDivElement>(null)
+  const [values, setValues] = React.useState<ReadonlyArray<number>>([
+    10, 15, 50,
+  ])
+
+  const rangerInstance = useRanger<HTMLDivElement>({
+    getRangerElement: () => rangerRef.current,
+    values,
+    min: 0,
+    max: 100,
+    stepSize: 5,
+    onChange: (instance: Ranger<HTMLDivElement>) =>
+      setValues(instance.sortedValues),
+  })
+
+  return (
+    <div className="App" style={{ padding: 10 }}>
+      <h1>Basic Range</h1>
+      <span>Active Index: {rangerInstance.activeHandleIndex}</span>
+      <br />
+      <br />
+      <div
+        ref={rangerRef}
+        style={{
+          position: 'relative',
+          userSelect: 'none',
+          height: '4px',
+          background: '#ddd',
+          boxShadow: 'inset 0 1px 2px rgba(0,0,0,.6)',
+          borderRadius: '2px',
+        }}
+      >
+        {rangerInstance
+          .handles()
+          .map(
+            (
+              {
+                value,
+                onKeyDownHandler,
+                onMouseDownHandler,
+                onTouchStart,
+                isActive,
+              },
+              i,
+            ) => (
+              <button
+                key={i}
+                onKeyDown={onKeyDownHandler}
+                onMouseDown={onMouseDownHandler}
+                onTouchStart={onTouchStart}
+                role="slider"
+                aria-valuemin={rangerInstance.options.min}
+                aria-valuemax={rangerInstance.options.max}
+                aria-valuenow={value}
+                style={{
+                  position: 'absolute',
+                  top: '50%',
+                  left: `${rangerInstance.getPercentageForValue(value)}%`,
+                  zIndex: isActive ? '1' : '0',
+                  transform: 'translate(-50%, -50%)',
+                  width: '14px',
+                  height: '14px',
+                  outline: 'none',
+                  borderRadius: '100%',
+                  background: 'linear-gradient(to bottom, #eee 45%, #ddd 55%)',
+                  border: 'solid 1px #888',
+                }}
+              />
+            ),
+          )}
+      </div>
+      <br />
+      <br />
+      <br />
+      <pre
+        style={{
+          display: 'inline-block',
+          textAlign: 'left',
+        }}
+      >
+        <code>
+          {JSON.stringify({
+            values,
+          })}
+        </code>
+      </pre>
+    </div>
+  )
+}
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root'),
+)
+
+```
+
+If you skipped this example or didn't understand something, we don't blame you, because there's so much more to learn to really take advantage of TanStack Router! Let's move on.
diff --git a/examples/react/basic/tsconfig.dev.json b/examples/react/basic/tsconfig.dev.json
@@ -0,0 +1,12 @@
+{
+  "composite": true,
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./build/types"
+  },
+  "files": ["src/main.tsx"],
+  "include": [
+    "src"
+    // "__tests__/**/*.test.*"
+  ]
+}
diff --git a/examples/react/basic/tsconfig.json b/examples/react/basic/tsconfig.json
@@ -1,12 +1,7 @@
 {
-  "composite": true,
-  "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "./build/types"
-  },
-  "files": ["src/main.tsx"],
-  "include": [
-    "src"
-    // "__tests__/**/*.test.*"
-  ]
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "react"
+  }
 }