docs: modify docs

docs/.vitepress/config.ts

@@ -20,13 +20,13 @@ export default defineConfig({
       {
         text: 'Guide',
         items: [
-          { text: 'Introduction', link: '/introduction' },
+          { text: 'What is Reactive', link: '/what-is-reactive' },
+          { text: 'Installation', link: '/installation' },
           {
-            text: 'Get Started',
-            link: '/get-started',
+            text: 'Usage',
             items: [
-              { text: 'React', link: '/get-started/react' },
-              { text: 'Vanilla JS', link: '/get-started/vanilla' },
+              { text: 'React', link: '/usage/react' },
+              { text: 'Vanilla JS', link: '/usage/vanilla' },
             ],
           },
           { text: 'FAQ', link: '/faq' },

docs/.vitepress/theme/custom.less

@@ -0,0 +1,53 @@
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #b647e9, #5f88f1 70%);
+
+  --vp-c-brand-1: #527dec;
+  --vp-c-brand-light: #5f88f1;
+  --vp-c-brand-lighter: #7799ed;
+  --vp-c-brand-dark: #395dba;
+  --vp-c-brand-darker: #3e62bc;
+
+  .VPFooter {
+    a {
+      text-decoration: underline;
+    }
+  }
+
+  .vp-doc {
+    & :not(pre) > code {
+      font-weight: bold;
+      padding: 1px 1px 4px 1px;
+
+      &::before,
+      &::after {
+        content: '`';
+        opacity: 0.3;
+      }
+    }
+
+    & a {
+      transition: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      img {
+        border-radius: 4px;
+        display: inline-block;
+        margin: 2px 4px;
+      }
+    }
+
+    & img {
+      border-radius: 8px;
+    }
+  }
+
+  @media (min-width: 640px) {
+    .image-src {
+      max-width: 420px;
+    }
+  }
+}

docs/.vitepress/theme/index.ts

@@ -0,0 +1,5 @@
+import DefaultTheme from 'vitepress/theme'
+
+import './custom.less'
+
+export default DefaultTheme

docs/index.md

@@ -9,7 +9,7 @@ hero:
   actions:
     - theme: brand
       text: Get Started
-      link: /get-started
+      link: /what-is-reactive
     - theme: alt
       text: API Reference
       link: /reference/api
@@ -26,7 +26,7 @@ features:
     details: Cover over 80% of the use cases in one method.
   - title: Optimized Performance
     icon: ⚡️
-    details: Leverages Proxy API for efficient rendering.
+    details: Leverages Proxy API to provide the best performance.
   - title: Unopinionated
     icon: 🏄
     details: Works well both in React and Vanilla JS.

docs/get-started.md → docs/installation.md

@@ -28,5 +28,5 @@ bun add @shined/reactive
 
 Reactive is designed to work well both in **React** and **Vanilla JS**, so you can choose the guide that fits your needs:
 
-- [I use it in React](/get-started/react) ⚛️
-- [I use it in Vanilla JS](/get-started/vanilla) 🟡
+- [I use it in React](/useage/react) ⚛️
+- [I use it in Vanilla JS](/useage/vanilla) 🟡

docs/what-is-reactive.md

@@ -0,0 +1,45 @@
+# What is Reactive?
+
+<a href="https://npmjs.com/package/@shined/reactive"><img src="https://img.shields.io/npm/v/@shined/reactive.svg" alt="npm package"></a>
+<a href="https://pkg-size.dev/@shined/reactive"><img src="https://pkg-size.dev/badge/bundle/17299" title="Bundle size for @shined/reactive"></a>
+<a href="https://github.com/sheinsight/reactive/blob/main/LICENSE"><img alt="NPM" src="https://img.shields.io/npm/l/%40shined%2Freactive"></a>
+
+⚛️ Reactive is a library to manage state in JavaScript app. It has many features that make it easy to use and powerful.
+
+- **🧩 Flexible**: Wanna to change store state? Just [mutate](/reference/api#mutate) it anywhere you want.
+- **😊 User-Friendly**: Cover over 80% of the use cases with [create](/reference/api#create) method.
+- **⚡️ Optimized Performance**: Leverages [Proxy API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) to provide the best performance.
+- **🏄 Unopinionated**: Works well both in [React](https://react.dev/) and Vanilla JS.
+- **🦄 TypeScript**: Written in [TypeScript](https://www.typescriptlang.org/), fully typed, better DX.
+- **🛠️ DevTools Integration**: Out-of-the-box [Redux DevTools](https://github.com/reduxjs/redux-devtools#redux-devtools) compatibility.
+
+Go [installation](/installation) section to get started.
+
+## Write freely, read safely.
+
+It's **read-write-separated**, which provide a freedom and way to change state by modifying the `store.mutate` object. Whenever you want to change state, just modify it!
+
+For read side, it provide a safe way to read state by using `useSnapshot()` in React or `getSnapshot()` in Vanilla JS, which generate non-extensible snapshot state to ensure the state is not modified by mistake.
+
+### Usage Example of React
+
+```tsx
+import { create } from '@shined/reactive'
+
+const store = create({ count: 1 })
+
+function App() {
+  const count = store.useSnapshot((s) => s.count)
+
+  return (
+    <div>
+      <p>Count is {count}</p>
+      <button onClick={() => store.mutate.count++}>increment</button>
+    </div>
+  )
+}
+
+export default App
+```
+
+See [React Usage](/useage/react) or [API Reference](/reference/api) for more details.

package.json

@@ -28,6 +28,7 @@
     "execa": "^8.0.1",
     "find-packages": "^10.0.4",
     "happy-dom": "^13.10.1",
+    "less": "^4.2.0",
     "read-pkg": "^9.0.1",
     "read-yaml-file": "^2.1.0",
     "semver": "^7.6.0",