📝 add asciinema svg to install doc

website/docs/start/install-adapter.mdx

@@ -3,13 +3,15 @@ sidebar_position: 2
 description: 通过脚手架, pip 安装适配器
 ---
 
+import Asciinema from "@site/src/components/Asciinema";
+
 # 安装协议适配器
 
 ## 查看
 
 前往 [商店](/store) 即可查看所有协议适配器。
 
-或者使用 `nb-cli` 命令行查看：
+或者使用 `nb-cli` 命令行查看:
 
 ```bash
 nb adapter list
@@ -19,13 +21,13 @@ nb adapter list
 
 前往 [商店](/store) 点击复制 `nb-cli` 安装命令至命令行执行即可安装。
 
-或者自行输入命令安装：
+或者自行输入命令安装:
 
 ```bash
 nb adapter install <adapter-name>
 ```
 
-或者使用交互模式安装：
+或者使用交互模式安装:
 
 ```bash
 nb adapter install
@@ -37,4 +39,7 @@ nb adapter install
 pip install <adapter-name>
 ```
 
-<!-- TODO: asciinema for install adapter -->
+<Asciinema
+  url="https://asciinema.org/a/464727.cast"
+  options={{ theme: "monokai", poster: "npt:2.0" }}
+/>

website/docs/start/install-driver.mdx

@@ -3,6 +3,8 @@ sidebar_position: 1
 description: 通过脚手架, pip 安装驱动器
 ---
 
+import Asciinema from "@site/src/components/Asciinema";
+
 # 安装驱动器
 
 NoneBot 在默认安装情况下内置了 `fastapi` 服务端驱动器，其他驱动器如 `httpx`, `aiohttp` 则需要额外安装。
@@ -11,7 +13,7 @@ NoneBot 在默认安装情况下内置了 `fastapi` 服务端驱动器，其他
 
 前往 [商店](/store) 即可查看所有驱动器。
 
-或者使用 `nb-cli` 命令行查看：
+或者使用 `nb-cli` 命令行查看:
 
 ```bash
 nb driver list
@@ -21,13 +23,13 @@ nb driver list
 
 前往 [商店](/store) 点击复制 `nb-cli` 安装命令至命令行执行即可安装。
 
-或者自行输入命令安装：
+或者自行输入命令安装:
 
 ```bash
 nb driver install <driver-name>
 ```
 
-或者使用交互模式安装：
+或者使用交互模式安装:
 
 ```bash
 nb driver install
@@ -39,4 +41,7 @@ nb driver install
 pip install <driver-name>
 ```
 
-<!-- TODO: asciinema for install driver -->
+<Asciinema
+  url="https://asciinema.org/a/464686.cast"
+  options={{ theme: "monokai", poster: "npt:2.8" }}
+/>

website/docs/start/install-plugin.mdx

@@ -3,13 +3,15 @@ sidebar_position: 3
 description: 通过脚手架, pip 安装插件
 ---
 
+import Asciinema from "@site/src/components/Asciinema";
+
 # 安装第三方插件
 
 ## 查看
 
 前往 [商店](/store) 即可查看所有发布的插件。
 
-或者使用 `nb-cli` 命令行查看：
+或者使用 `nb-cli` 命令行查看:
 
 ```bash
 nb plugin list
@@ -19,13 +21,13 @@ nb plugin list
 
 前往 [商店](/store) 点击复制 `nb-cli` 安装命令至命令行执行即可安装。
 
-或者自行输入命令安装：
+或者自行输入命令安装:
 
 ```bash
 nb plugin install <plugin-name>
 ```
 
-或者使用交互模式安装：
+或者使用交互模式安装:
 
 ```bash
 nb plugin install
@@ -37,4 +39,7 @@ nb plugin install
 pip install <plugin-name>
 ```
 
-<!-- TODO: asciinema for install plugin -->
+<Asciinema
+  url="https://asciinema.org/a/464735.cast"
+  options={{ theme: "monokai", poster: "npt:4.3" }}
+/>

website/docs/start/installation.mdx

@@ -8,6 +8,8 @@ options:
     category: guide
 ---
 
+import Asciinema from "@site/src/components/Asciinema";
+
 # 安装 NoneBot
 
 :::warning 注意
@@ -32,7 +34,10 @@ pip uninstall nonebot
    pip install nb-cli
    ```
 
-<!-- TODO: asciinema for installation -->
+<Asciinema
+  url="https://asciinema.org/a/464654.cast"
+  options={{ theme: "monokai", poster: "npt:2.8" }}
+/>
 
 :::important 提示
 `nb-cli` 的使用方法详见 [使用脚手架](./nb-cli.md)
@@ -50,7 +55,7 @@ poetry add nonebot2
 
 ## 从 GitHub 安装
 
-如果你需要使用最新的（可能**尚未发布**的）特性，可以直接从 GitHub 仓库安装：
+如果你需要使用最新的（可能**尚未发布**的）特性，可以直接从 GitHub 仓库安装:
 
 :::warning 注意
 直接从 Github 仓库中安装意味着你将使用最新提交的代码，它们并没有进行充分的稳定性测试
@@ -65,7 +70,7 @@ poetry add git+https://github.com/nonebot/nonebot2.git#master
 poetry add git+https://github.com/nonebot/nonebot2.git#dev
 ```
 
-或者在克隆 Git 仓库后手动安装：
+或者在克隆 Git 仓库后手动安装:
 
 ```bash
 git clone https://github.com/nonebot/nonebot2.git

website/docs/tutorial/create-project.mdx

@@ -8,14 +8,21 @@ options:
     category: guide
 ---
 
+import Asciinema from "@site/src/components/Asciinema";
+
 # 创建项目
 
-可以使用 `nb-cli` 或者自行创建完整的项目目录：
+可以使用 `nb-cli` 或者自行创建完整的项目目录:
 
 ```bash
 nb create
 ```
 
+<Asciinema
+  url="https://asciinema.org/a/464654.cast"
+  options={{ theme: "monokai", startAt: 4.5, poster: "npt:6.5" }}
+/>
+
 ## 目录结构
 
 ```tree title=Project
@@ -44,7 +51,7 @@ nb create
 :::warning 提示
 如果您使用如 `VSCode` / `PyCharm` 等 IDE 启动 nonebot，请检查 IDE 当前工作空间目录是否与当前侧边栏打开目录一致。
 
-> 注意：在二者不一致的环境下可能导致 nonebot 读取配置文件和插件等不符合预期
+> 注意: 在二者不一致的环境下可能导致 nonebot 读取配置文件和插件等不符合预期
 
 :::
 
@@ -56,6 +63,11 @@ nb create
 
    其中 `--file` 参数可以指定 bot 入口文件，默认为 `bot.py`，`--app` 参数可以指定 asgi server，默认为 `app`。
 
+   <Asciinema
+     url="https://asciinema.org/a/464654.cast"
+     options={{ theme: "monokai", startAt: 15.3, poster: "npt:20.3" }}
+   />
+
 2. 直接通过 `python` 启动
 
    ```bash

website/package.json

@@ -41,6 +41,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.0.0-beta.9",
     "@tsconfig/docusaurus": "^1.0.4",
+    "asciinema-player": "^3.0.0-rc.1",
     "typescript": "^4.3.5"
   },
   "browserslist": {

website/src/components/Asciinema/index.tsx

@@ -0,0 +1,39 @@
+import "asciinema-player/dist/bundle/asciinema-player.css";
+
+import "./styles.css";
+
+import * as AsciinemaPlayer from "asciinema-player";
+import React, { useEffect, useRef } from "react";
+
+export type AsciinemaOptions = {
+  cols: number;
+  rows: number;
+  autoPlay: boolean;
+  preload: boolean;
+  loop: boolean;
+  startAt: number | string;
+  speed: number;
+  idleTimeLimit: number;
+  theme: string;
+  poster: string;
+  fit: string;
+  fontSize: string;
+};
+
+export type AsciinemaProps = {
+  url: string;
+  options?: Partial<AsciinemaOptions>;
+};
+
+export default function Asciinema({
+  url,
+  options = {},
+}: AsciinemaProps): JSX.Element {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    AsciinemaPlayer.create(url, ref.current, options);
+  }, []);
+
+  return <div ref={ref} className="not-prose w-full max-w-full my-4"></div>;
+}

website/src/components/Asciinema/styles.css

@@ -0,0 +1,3 @@
+.asciinema-player svg {
+  display: inline-block;
+}

yarn.lock

@@ -2344,6 +2344,14 @@ array-union@^2.1.0:
   resolved "https://registry.npm.taobao.org/array-union/download/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha1-t5hCCtvrHego2ErNii4j0+/oXo0=
 
+asciinema-player@^3.0.0-rc.1:
+  version "3.0.0-rc.1"
+  resolved "https://registry.npmmirror.com/asciinema-player/download/asciinema-player-3.0.0-rc.1.tgz#dfb6394307490ecfac49bead9381de5c52ebf243"
+  integrity sha512-r0yRCnifQ+UuyInLBwanupOUk7FPIs1NgD3D+egaSCXzK1+PSQf0aHo/dfpZFY2sml9mA0cqUHJFQ4KnuUJS1Q==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    solid-js "^1.1.6"
+
 async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.npmmirror.com/async/download/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
@@ -6992,6 +7000,11 @@ sockjs@^0.3.21:
     uuid "^8.3.2"
     websocket-driver "^0.7.4"
 
+solid-js@^1.1.6:
+  version "1.3.3"
+  resolved "https://registry.npmmirror.com/solid-js/download/solid-js-1.3.3.tgz#e60a6c5ed29f216e0484673967788f4f174c5f89"
+  integrity sha512-0pyHpLZIgQDI1Z+MgxXQRPY10dhXfKJdptb4UCJQ9ArQOLq2gtFA1acEsvSAtPMVdqQ8bqj68FOTXLpz6hm2Mg==
+
 sort-css-media-queries@2.0.4:
   version "2.0.4"
   resolved "https://registry.nlark.com/sort-css-media-queries/download/sort-css-media-queries-2.0.4.tgz#b2badfa519cb4a938acbc6d3aaa913d4949dc908"