docs: cleanup intro

website/package.json

@@ -23,9 +23,9 @@
     "dedent": "^0.7.0",
     "framer-motion": "^10.12.4",
     "million": "workspace:*",
-    "next": "^13.4.10",
-    "nextra": "^2.10.0",
-    "nextra-theme-docs": "^2.10.0",
+    "next": "^13.4.19",
+    "nextra": "^2.12.3",
+    "nextra-theme-docs": "^2.12.3",
     "postcss": "^8.4.21",
     "react": "^18.2.0",
     "react-card-flip": "^1.2.0",

website/pages/docs/_meta.json

@@ -1,21 +1,25 @@
 {
+  "-- Getting Started": {
+    "type": "separator",
+    "title": "Getting Started"
+  },
   "index": "Introduction",
   "install": "Installation",
-  "quickstart": "Tutorial",
-  "faq": "FAQ",
+  "automatic": "Automatic Mode",
   "-- API Reference": {
     "type": "separator",
     "title": "API Reference"
   },
   "block": "block()",
   "for": "<For>",
-  "-- Advanced": {
+  "-- Guide": {
     "type": "separator",
-    "title": "Advanced"
+    "title": "Guide"
   },
+  "quickstart": "Tutorial",
   "rules": "Rules of Blocks",
+  "typescript": "Usage with TypeScript",
   "virtualization": "Virtualization",
   "common-errors": "Common Errors",
-  "typescript": "Usage with TypeScript",
   "internals": "Internals"
 }

website/pages/docs/automatic.mdx

@@ -0,0 +1,42 @@
+---
+title: 'Automatic Mode'
+description: 'The default mode of Million.js'
+---
+
+import { Callout, Tabs, Tab, Steps } from 'nextra-theme-docs';
+
+# Automatic Mode
+
+Automatic mode is the default mode of Million.js. It automatically converts React components to Million.js components.
+
+### Ignoring components
+
+If a certain component conflicts with the Million.js runtime, it's possible to skip over them via the `// million-ignore` comment.
+
+```js
+// million-ignore
+function App() {
+  return ...
+}
+```
+
+### Advanced customization
+
+Automatic mode provides options to tune automatic mode:
+
+- `threshold`: The threshold for the heuristic to determine whether a component should be converted to Million.js. The greater the threshold, fewer components will be optimized, and vice versa. The default is `0.1`.
+- `skip`: An array of identifiers that indicate a component should be skipped. You can put hook names, variable names, etc. The default is `[]`.
+
+
+```js
+const options = {
+  auto: {
+    threshold: 0.25, // default: 0.1,
+    skip: ['useBadHook', /badVariable/g] // default []
+  }
+}
+```
+
+### Muting help messages
+
+If you don't want to see the help messages, you can pass the `{ mute: true }{:js}` option to the compiler.

website/pages/docs/common-errors.mdx

@@ -4,28 +4,18 @@ description: 'How to overcome common errors when using Million.js with other tec
 ---
 
 import { Callout } from 'nextra-theme-docs';
-import CommonErrorVideo from '../.././components/common-error-video';
 
-# Common Errors
-
-You are probably here because you got yelled at by your project after adding Million.js.
+<Callout>This page is a stub</Callout>
 
-For example, something of the sort 👇👇👇
-
-<div>
-  <CommonErrorVideo />
-</div>
+# Common Errors
 
-The above video happens to be an error raised by someone that wanted to integrate Million into their project.
+You are probably here because you are having issues integrating your existing project with Million.js.
 
-## MobX Errors
+## MobX Integration
 
-"One of the biggest things in mobx 6 was that they removed decorators "Due to standardized JavaScript limitations 
-in how class fields are constructed, it is no longer possible for MobX to alter the behavior of class fields by means of decorators or the decorate utility. 
-Instead, fields have to be made observable by the constructor." - [Nobert Torok](https://github.com/norbertorok92)
+- Upgrade to MobX v6
+- Remove decorators
 
-### Solution To MobX Error
+## twin.macro
 
-<Callout type="info">
- When using MobX, it is advisable to upgrade to V6 and remove decorators
-</Callout>
+Million.js does not work with `twin.macro` due to their JSX transform override.

website/pages/docs/install.mdx

@@ -177,39 +177,6 @@ Then, add the compiler to your build tool of choice:
   </Tab>
 </Tabs>
 
-### Ignoring components
-
-If a certain component conflicts with the Million.js runtime, it's possible to skip over them via the `// million-ignore` comment.
-
-```js
-// million-ignore
-function App() {
-  return ...
-}
-```
-
-### Advanced customization
-
-Automatic mode provides options to tune automatic mode:
-
-- `threshold`: The threshold for the heuristic to determine whether a component should be converted to Million.js. The greater the threshold, fewer components will be optimized, and vice versa. The default is `0.1`.
-- `skip`: An array of identifiers that indicate a component should be skipped. You can put hook names, variable names, etc. The default is `[]`.
-
-
-```js
-const options = {
-  auto: {
-    threshold: 0.25, // default: 0.1,
-    skip: ['useBadHook', /badVariable/g] // default []
-  }
-}
-```
-
-### Muting help messages
-
-If you don't want to see the help messages, you can pass the `{ mute: true }{:js}` option to the compiler.
-
-
 </Steps>
 
 </Tab>

website/pages/docs/rules.mdx

@@ -4,9 +4,12 @@ description: 'How to use blocks in your projects the right way'
 ---
 
 import { Callout } from 'nextra-theme-docs';
+import { AutomaticModeWarning } from '../../components/automatic-mode-warning';
 
 # Rules of Blocks
 
+<AutomaticModeWarning />
+
 You are probably here because you got a warning message in your console.
 
 <Callout type="warning">

website/pages/docs/typescript.mdx

@@ -4,18 +4,21 @@ description: 'Learn how to use TypeScript with Million.js'
 ---
 
 import { Callout } from 'nextra-theme-docs';
+import { AutomaticModeWarning } from '../../components/automatic-mode-warning';
 
 # Usage with TypeScript
 
+<AutomaticModeWarning />
+
 If your project uses TypeScript, you may want to make your components type-safe.
 
-<Callout type="warning">
-  You must make your Props use `type` instead of `interface`, as this is the
-  [officially recognized
-  behavior](https://github.com/microsoft/TypeScript/issues/15300#issuecomment-332366024)
-  by the TypeScript team. Alternatively, if you want to use interfaces you can
-  add `[key: string]: any` as per [this Stack Overflow
-  comment](https://stackoverflow.com/questions/37006008/typescript-index-signature-is-missing-in-type/65473225#65473225).
+<Callout type="info">
+You must make your Props use `type` instead of `interface`, as this is the [officially recognized
+behavior](https://github.com/microsoft/TypeScript/issues/15300#issuecomment-332366024)
+by the TypeScript team. Alternatively, if you want to use interfaces you can
+add `[key: string]: any` as per [this Stack Overflow
+comment](https://stackoverflow.com/questions/37006008/typescript-index-signature-is-missing-in-type/65473225#65473225).
+
 </Callout>
 
 ```jsx

website/pages/docs/virtualization.mdx

@@ -4,9 +4,12 @@ description: 'List virtualization allows you to render large lists without perfo
 ---
 
 import { Callout, Tabs, Tab, Steps } from 'nextra-theme-docs';
+import { AutomaticModeWarning } from '../../components/automatic-mode-warning';
 
 # Virtualization
 
+<AutomaticModeWarning />
+
 Million.js plays very well with [TanStack Virtual](https://tanstack.com/virtual/v3/docs/guide/introduction). TanStack Virtual is a headless UI utility for virtualizing long lists of elements in React. Together, you can automatically use blocks within virtualized lists.
 
 ## Why Virtualize?