🎨 add store components

website/docs/advanced/README.md

@@ -10,6 +10,10 @@ options:
 
 # 深入
 
+:::danger 警告
+进阶部分尚未更新完成
+:::
+
 ## 它如何工作？
 
 如同[概览](../README.md)所言:
@@ -36,7 +40,7 @@ options:
 
 2. **调用 `API`**, 在**事件处理**的过程中，`nonebot` 可以通过 `bot` 调用协议端指定的 `API` 来获取更多数据，或者反馈响应给协议端; `nonebot` 也可以通过调用 `API` 向协议端主动请求数据或者主动推送数据。
 
-<!-- 在**指南**模块， 我们已经叙述了[如何配置 nonebot](../guide/tutorial/configuration.md), [如何注册协议适配器](../guide/getting-started.md)，[如何加载插件](../guide/loading-a-plugin.md), 在这里便不再赘述。 -->
+在**指南**模块， 我们已经叙述了[如何配置 nonebot](../tutorial/configuration.md), [如何注册协议适配器](../tutorial/register-adapter.md)，[如何加载插件](../tutorial/plugin/load-plugin.md), 在这里便不再赘述。
 
 下面，我们将对**事件处理**， **调用 API**进行说明。
 
@@ -44,7 +48,7 @@ options:
 
 我们可以先看事件处理的流程图：
 
-<!-- ![handle-event](../guide/images/Handle-Event.png) -->
+![handle-event](./images/Handle-Event.png)
 
 在流程图里，我们可以看到，`nonebot` 会有三个阶段来处理事件：
 
@@ -94,14 +98,14 @@ options:
    关于`hook`的更多信息，可以查阅[这里](./runtime-hook.md)
    :::
 
-<!-- 2. **Matcher**与**matcher**，在**指南**中，我们讲述了[如何注册事件响应器](../guide/creating-a-matcher.md)，这里的事件响应器或者说 `Matcher` 并不是一个具体的实例 `instance`，而是一个具有特定属性的类 `class`。只有当 `Matcher` **响应事件**时，才会实例化为具体的 `instance`，也就是 `matcher`。`matcher` 可以认为是 `nonebot` 处理 `Event` 的基本单位，运行 `matcher` 是`nonebot`工作的主要内容。 -->
+2. **Matcher**与**matcher**，在**指南**中，我们讲述了[如何注册事件响应器](../tutorial/plugin/create-matcher.md)，这里的事件响应器或者说 `Matcher` 并不是一个具体的实例 `instance`，而是一个具有特定属性的类 `class`。只有当 `Matcher` **响应事件**时，才会实例化为具体的 `instance`，也就是 `matcher`。`matcher` 可以认为是 `nonebot` 处理 `Event` 的基本单位，运行 `matcher` 是`nonebot`工作的主要内容。
 
 3. **handler**，或者说**事件处理函数**, 它们可以认为是 `nonebot` 处理 `Event` 的最小单位。在不考虑 `hook` 的情况下，**运行 matcher 就是顺序运行 matcher.handlers**，这句话换种表达方式就是，`handler` 只有添加到 `matcher.handlers` 时，才可以参与到 `nonebot` 的工作中来。
 
    ::: tip
    如何让 `handler` 添加到 `matcher.handlers`？
 
-   <!-- 一方面，我们可以参照[这里](../guide/creating-a-handler.md)利用装饰器来添加；另一方面，我们在用 `on()` 或者 `on_*()` 注册事件响应器时，可以添加 `handlers=[handler1, handler2, ...]` 这样的关键词参数来添加。 -->
+   一方面，我们可以参照[这里](../tutorial/plugin/create-handler.md)利用装饰器来添加；另一方面，我们在用 `on()` 或者 `on_*()` 注册事件响应器时，可以添加 `handlers=[handler1, handler2, ...]` 这样的关键词参数来添加。
 
    :::
 

website/docs/advanced/permission.md

@@ -11,7 +11,7 @@ options:
 
 ## 应用
 
-<!-- 如同 `Rule` 一样, `Permission` 可以在[注册事件响应器](../guide/creating-a-matcher)时添加 `permission` 参数来加以应用，这样 `Nonebot` 会在事件响应时检测事件主体的权限。下面我们以 `SUPERUSER` 为例，对该机制的应用做一下介绍。 -->
+如同 `Rule` 一样, `Permission` 可以在[注册事件响应器](../tutorial/plugin/create-matcher.md)时添加 `permission` 参数来加以应用，这样 `Nonebot` 会在事件响应时检测事件主体的权限。下面我们以 `SUPERUSER` 为例，对该机制的应用做一下介绍。
 
 ```python
 from nonebot.permission import SUPERUSER

website/docs/advanced/publish-plugin.md

@@ -9,7 +9,7 @@ options:
 
 ## 前注
 
-<!-- 本章节仅包含插件发布流程指导，插件开发请查阅 **[创建插件](../guide/creating-a-plugin.md)** 章节与 **[Plugin API 文档](../api/plugin.md)** 。 -->
+本章节仅包含插件发布流程指导，插件开发请查阅 **[创建插件](../tutorial/plugin/config-plugin.md)** 章节与 **[Plugin API 文档](../api/plugin.md)** 。
 
 ## 插件发布流程
 

website/package.json

@@ -30,7 +30,9 @@
     "file-loader": "^6.2.0",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
+    "react-color": "^2.19.3",
     "react-dom": "^17.0.1",
+    "react-paginate": "^8.1.0",
     "url-loader": "^4.1.1"
   },
   "devDependencies": {

website/src/components/Driver.tsx

@@ -1,5 +1,23 @@
 import React from "react";
 
+import drivers from "../../static/drivers.json";
+import { useFilteredObjs } from "../libs/store";
+
 export default function Driver() {
-  return <></>;
+  const {
+    filter,
+    setFilter,
+    filteredObjs: filteredDrivers,
+  } = useFilteredObjs(drivers);
+  return (
+    <>
+      <div>
+        <input
+          value={filter}
+          onChange={(event) => setFilter(event.target.value)}
+        />
+      </div>
+      <div>{filteredDrivers.toString()}</div>
+    </>
+  );
 }

website/src/components/Paginate.tsx

@@ -0,0 +1,5 @@
+import ReactPaginate from "react-paginate";
+
+export function usePagination() {
+  return {};
+}

website/src/libs/store.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+
+type Tag = {
+  label: string;
+  color: string;
+};
+
+type Obj = {
+  module_name?: string;
+  project_link?: string;
+  name: string;
+  desc: string;
+  author: string;
+  homepage: string;
+  tags: Tag[];
+  is_official: boolean;
+};
+
+export function filterObjs(filter: string, objs: Obj[]): Obj[] {
+  return objs.filter((o) => {
+    return (
+      o.module_name?.indexOf(filter) != -1 ||
+      o.project_link?.indexOf(filter) != -1 ||
+      o.name.indexOf(filter) != -1 ||
+      o.desc.indexOf(filter) != -1 ||
+      o.author.indexOf(filter) != -1
+    );
+  });
+}
+
+type useFilteredObjsReturn = {
+  filter: string;
+  setFilter: (filter: string) => void;
+  filteredObjs: Obj[];
+};
+
+export function useFilteredObjs(objs: Obj[]): useFilteredObjsReturn {
+  const [filter, setFilter] = useState<string>("");
+  const filteredObjs = filterObjs(filter, objs);
+  return {
+    filter,
+    setFilter,
+    filteredObjs,
+  };
+}

website/src/pages/index.tsx

@@ -10,30 +10,30 @@ import styles from "../css/index.module.css";
 
 export default function Home() {
   const firstFeature: Feature = {
-    title: "Develop",
+    title: "开发",
     tagline: "fast to code",
     description: "仅需两步，即可开始编写你的机器人",
   } as const;
   const secondFeatures = [
     {
-      title: "Plugin",
+      title: "插件",
       tagline: "build bot with plugins",
       description: "插件化开发，模块化管理",
     },
     {
-      title: "Multi-Platform",
+      title: "跨平台",
       tagline: "write once run everywhere",
       description: "支持多种平台，以及多样的事件响应方式",
     },
   ] as const;
   const thirdFeatures = [
     {
-      title: "Async",
+      title: "异步",
       tagline: "asynchronous first",
       description: "异步优先式开发，提高运行效率",
     },
     {
-      title: "DI",
+      title: "依赖注入",
       tagline: "bultin dependency injection system",
       description: "简单清晰的依赖注入系统，内置依赖函数减少用户代码",
     },

website/static/drivers.json

@@ -0,0 +1,52 @@
+[
+  {
+    "module_name": "nonebot.drivers.fastapi",
+    "project_link": "",
+    "name": "FastAPI",
+    "desc": "FastAPI 驱动器",
+    "author": "yanyongyu",
+    "homepage": "https://v2.nonebot.dev/docs/tutorial/choose-driver",
+    "tags": [],
+    "is_official": true
+  },
+  {
+    "module_name": "nonebot.drivers.quart",
+    "project_link": "quart",
+    "name": "Quart",
+    "desc": "Quart 驱动器",
+    "author": "yanyongyu",
+    "homepage": "https://v2.nonebot.dev/docs/tutorial/choose-driver",
+    "tags": [],
+    "is_official": true
+  },
+  {
+    "module_name": "nonebot.drivers.httpx",
+    "project_link": "",
+    "name": "HTTPX",
+    "desc": "HTTPX 驱动器",
+    "author": "yanyongyu",
+    "homepage": "https://v2.nonebot.dev/docs/tutorial/choose-driver",
+    "tags": [],
+    "is_official": true
+  },
+  {
+    "module_name": "nonebot.drivers.websockets",
+    "project_link": "websockets",
+    "name": "websockets",
+    "desc": "websockets 驱动器",
+    "author": "yanyongyu",
+    "homepage": "https://v2.nonebot.dev/docs/tutorial/choose-driver",
+    "tags": [],
+    "is_official": true
+  },
+  {
+    "module_name": "nonebot.drivers.aiohttp",
+    "project_link": "",
+    "name": "AIOHTTP",
+    "desc": "AIOHTTP 驱动器",
+    "author": "yanyongyu",
+    "homepage": "https://v2.nonebot.dev/docs/tutorial/choose-driver",
+    "tags": [],
+    "is_official": true
+  }
+]

website/tsconfig.json

@@ -7,6 +7,7 @@
       "node",
       "@docusaurus/module-type-aliases",
       "docusaurus-theme-nonepress"
-    ]
+    ],
+    "resolveJsonModule": true
   }
 }