From 15d68706b37b175cd3d3cc8769c92c5cbf1aa64f Mon Sep 17 00:00:00 2001 From: yanyongyu <42488585+yanyongyu@users.noreply.github.com> Date: Thu, 27 Jan 2022 21:24:56 +0800 Subject: [PATCH] :memo: add asciinema svg to install doc --- ...install-adapter.md => install-adapter.mdx} | 13 +++++-- .../{install-driver.md => install-driver.mdx} | 13 +++++-- .../{install-plugin.md => install-plugin.mdx} | 13 +++++-- .../{installation.md => installation.mdx} | 11 ++++-- .../{create-project.md => create-project.mdx} | 16 +++++++- website/package.json | 1 + website/src/components/Asciinema/index.tsx | 39 +++++++++++++++++++ website/src/components/Asciinema/styles.css | 3 ++ yarn.lock | 13 +++++++ 9 files changed, 105 insertions(+), 17 deletions(-) rename website/docs/start/{install-adapter.md => install-adapter.mdx} (63%) rename website/docs/start/{install-driver.md => install-driver.mdx} (68%) rename website/docs/start/{install-plugin.md => install-plugin.mdx} (62%) rename website/docs/start/{installation.md => installation.mdx} (85%) rename website/docs/tutorial/{create-project.md => create-project.mdx} (75%) create mode 100644 website/src/components/Asciinema/index.tsx create mode 100644 website/src/components/Asciinema/styles.css diff --git a/website/docs/start/install-adapter.md b/website/docs/start/install-adapter.mdx similarity index 63% rename from website/docs/start/install-adapter.md rename to website/docs/start/install-adapter.mdx index 1959c619..bb0177d6 100644 --- a/website/docs/start/install-adapter.md +++ 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 ``` -或者使用交互模式安装： +或者使用交互模式安装: ```bash nb adapter install @@ -37,4 +39,7 @@ nb adapter install pip install ``` - + diff --git a/website/docs/start/install-driver.md b/website/docs/start/install-driver.mdx similarity index 68% rename from website/docs/start/install-driver.md rename to website/docs/start/install-driver.mdx index 8845821f..321e7829 100644 --- a/website/docs/start/install-driver.md +++ 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 ``` -或者使用交互模式安装： +或者使用交互模式安装: ```bash nb driver install @@ -39,4 +41,7 @@ nb driver install pip install ``` - + diff --git a/website/docs/start/install-plugin.md b/website/docs/start/install-plugin.mdx similarity index 62% rename from website/docs/start/install-plugin.md rename to website/docs/start/install-plugin.mdx index a2acd1e1..960c4e3a 100644 --- a/website/docs/start/install-plugin.md +++ 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 ``` -或者使用交互模式安装： +或者使用交互模式安装: ```bash nb plugin install @@ -37,4 +39,7 @@ nb plugin install pip install ``` - + diff --git a/website/docs/start/installation.md b/website/docs/start/installation.mdx similarity index 85% rename from website/docs/start/installation.md rename to website/docs/start/installation.mdx index dfa8d798..73848e65 100644 --- a/website/docs/start/installation.md +++ 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 ``` - + :::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 diff --git a/website/docs/tutorial/create-project.md b/website/docs/tutorial/create-project.mdx similarity index 75% rename from website/docs/tutorial/create-project.md rename to website/docs/tutorial/create-project.mdx index f9d376c6..4984d75e 100644 --- a/website/docs/tutorial/create-project.md +++ 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 ``` + + ## 目录结构 ```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`。 + + 2. 直接通过 `python` 启动 ```bash diff --git a/website/package.json b/website/package.json index 5443b9b7..eafa45e6 100644 --- 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": { diff --git a/website/src/components/Asciinema/index.tsx b/website/src/components/Asciinema/index.tsx new file mode 100644 index 00000000..cda11f71 --- /dev/null +++ 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; +}; + +export default function Asciinema({ + url, + options = {}, +}: AsciinemaProps): JSX.Element { + const ref = useRef(null); + + useEffect(() => { + AsciinemaPlayer.create(url, ref.current, options); + }, []); + + return
; +} diff --git a/website/src/components/Asciinema/styles.css b/website/src/components/Asciinema/styles.css new file mode 100644 index 00000000..48328460 --- /dev/null +++ b/website/src/components/Asciinema/styles.css @@ -0,0 +1,3 @@ +.asciinema-player svg { + display: inline-block; +} diff --git a/yarn.lock b/yarn.lock index f4edfdaa..d093e755 100644 --- 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"