📝 add asciinema svg to install doc

2024-11-27 18:45:05 +08:00 · 2022-01-27 21:24:56 +08:00 · 2022-01-27 21:24:56 +08:00 · 15d68706b3
commit 15d68706b3
parent afea004421
9 changed files with 105 additions and 17 deletions
--- a/website/docs/start/install-adapter.mdx
+++ b/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" }}
+/>
--- a/website/docs/start/install-driver.mdx
+++ b/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" }}
+/>
--- a/website/docs/start/install-plugin.mdx
+++ b/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" }}
+/>
--- a/website/docs/start/installation.mdx
+++ b/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
--- a/website/docs/tutorial/create-project.mdx
+++ b/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
--- a/website/package.json
+++ b/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": {
--- a/website/src/components/Asciinema/index.tsx
+++ b/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>;
+}
--- a/website/src/components/Asciinema/styles.css
+++ b/website/src/components/Asciinema/styles.css
@ -0,0 +1,3 @@
+.asciinema-player svg {
+  display: inline-block;
+}
--- a/yarn.lock
+++ b/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"