docs: display presets + installation

Author: kireevmp

docs/.vitepress/config.ts

@@ -36,8 +36,8 @@ export default defineConfig({
     ],
 
     nav: [
-      { text: "Presets", link: "/presets/", activeMatch: "^/presets/" },
-      { text: "Rules", link: "/rules/", activeMatch: "^/rules/" },
+      { text: "Installation", link: "/installation"},
+      { text: "Rules", link: "/rules", activeMatch: "^/rules/" },
       { text: "Changelog", link: "/changelog" },
       { text: "effector.dev", link: "https://effector.dev" },
     ],

docs/index.md

@@ -7,23 +7,23 @@ hero:
   tagline: Enforcing best practices for Effector
   actions:
     - theme: brand
-      text: All Rules
-      link: /rules/
+      text: See Rules
+      link: /rules
     - theme: alt
-      text: All Presets
-      link: /presets/
+      text: Install Plugin
+      link: /installation
 
 features:
   - icon: ☄️
     title: Recommended preset
     details: Config preset that is recommended for all projects using Effector
-    link: /presets/recommended
+    link: /rules#recommended
   - icon: 🔮
     title: Future preset
     details: Effector is evolving, this preset enforces best-practices for future releases of Effector
-    link: /presets/future
+    link: /rules#future
   - icon: ⚛️
     title: React preset
     details: This preset is recommended for projects that use React with Effector.
-    link: /presets/react
+    link: /rules#react
 ---

docs/installation.md

@@ -0,0 +1,41 @@
+# Installation
+
+To install and configure this ESLint plugin, follow the steps below:
+
+## Install the Plugin
+
+Use your preferred package manager to install the plugin along with ESLint:
+
+::: code-group
+
+```sh [npm]
+npm install --save-dev eslint-plugin-effector eslint
+```
+
+```sh [yarn]
+yarn add --dev eslint-plugin-effector eslint
+```
+
+```sh [pnpm]
+pnpm install --save-dev eslint-plugin-effector eslint
+```
+
+:::
+
+## Configure ESLint
+
+If you are using the flat config format, import the plugin and apply its `recommended` configuration. Here's an example:
+
+```ts
+import effector from "eslint-plugin-effector" // [!code focus]
+
+const config = [
+  effector.configs.recommended, // [!code focus]
+]
+```
+
+The `recommended` configuration is a preset that enforces best practices for using Effector. To explore all available rules and other presets, refer to the [Rules](./rules/) section of the documentation.
+
+:::info
+This plugin requires TypeScript and type-aware linting to be enabled in your ESLint configuration. Refer to the official [`typescript-eslint` documentation](https://typescript-eslint.io/getting-started/typed-linting/) for guidance on providing type information to ESLint.
+:::

docs/rules/index.data.ts

@@ -1,13 +1,21 @@
 import path from "node:path"
 import { ContentData, createContentLoader } from "vitepress"
+import { ruleset } from "../../src/ruleset"
 
 const rules = path.join(process.cwd(), "src/rules")
 const watch = path.relative(path.dirname(__dirname), rules)
 
-type RuleEntry = { key: string; description: string }
+type RuleEntry = { key: string; description: string; category: string | undefined }
+
+const presetMap = ruleset as Record<string, Record<string, unknown>>
+const categoryOf = (name: string): keyof typeof ruleset | undefined =>
+  Object.keys(ruleset).find((preset) => presetMap[preset][`effector/${name}`]) as keyof typeof ruleset
 
 const transform = (data: ContentData[]) =>
-  data.map<RuleEntry>((item) => ({ key: path.basename(item.url, ".html"), description: item.frontmatter.description }))
+  data.map<RuleEntry>((item) => {
+    const key = path.basename(item.url, ".html")
+    return { key, description: item.frontmatter.description, category: categoryOf(key) }
+  })
 
 const loader = createContentLoader(path.join(watch, "*/*.md"), { transform })
 

docs/rules/index.md

@@ -4,21 +4,29 @@ aside: false
 
 <script setup>
 import { data } from "./index.data"
+
+const categories = { recommended: "Recommended", react: "React", scope: "Scope" }
+
+const rulesByCategory = (category) => data.filter((rule) => rule.category === category)
 </script>
 
 # Rules
 
-<table>
-  <thead>
-    <tr>
-      <th>Rule</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr v-for="rule in data" :key="rule.key">
-      <td><a :href="`/rules/${rule.key}`">{{rule.key}}</a></td>
-      <td>{{rule.description}}</td>
-    </tr>
-  </tbody>
-</table>
+<template v-for="(title, category) in categories" :key="category">
+  <h2 :id="category">{{ title }}</h2>
+
+  <table>
+    <thead>
+      <tr>
+        <th>Rule</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="rule in rulesByCategory(category)" :key="rule.key">
+        <td><a :href="`/rules/${rule.key}`">{{rule.key}}</a></td>
+        <td>{{rule.description}}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>