🐛 fix asciinema ssr failed

website/docs/tutorial/choose-driver.md

@@ -15,7 +15,7 @@ options:
 :::
 
 :::tip 提示
-如何**安装**驱动器请参考 [安装驱动器](../start/install-driver.md)
+如何**安装**驱动器请参考 [安装驱动器](../start/install-driver.mdx)
 
 如何**使用**驱动器请参考 [配置](./configuration.md#driver)
 :::

website/docs/tutorial/plugin/introduction.md

@@ -15,7 +15,7 @@ description: 插件入门
 
 ### 模块插件（单文件形式）
 
-在合适的路径创建一个 `.py` 文件即可。例如在 [创建项目](../create-project.md) 中创建的项目中，我们可以在 `awesome_bot/plugins/` 目录中创建一个文件 `foo.py`。
+在合适的路径创建一个 `.py` 文件即可。例如在 [创建项目](../create-project.mdx) 中创建的项目中，我们可以在 `awesome_bot/plugins/` 目录中创建一个文件 `foo.py`。
 
 ```tree title=Project {4}
 📦 AweSome-Bot
@@ -37,7 +37,7 @@ description: 插件入门
 
 ### 包插件（文件夹形式）
 
-在合适的路径创建一个文件夹，并在文件夹内创建文件 `__init__.py` 即可。例如在 [创建项目](../create-project.md) 中创建的项目中，我们可以在 `awesome_bot/plugins/` 目录中创建一个文件夹 `foo`，并在这个文件夹内创建一个文件 `__init__.py`。
+在合适的路径创建一个文件夹，并在文件夹内创建文件 `__init__.py` 即可。例如在 [创建项目](../create-project.mdx) 中创建的项目中，我们可以在 `awesome_bot/plugins/` 目录中创建一个文件夹 `foo`，并在这个文件夹内创建一个文件 `__init__.py`。
 
 ```tree title=Project {4,5}
 📦 AweSome-Bot

website/docs/tutorial/plugin/load-plugin.md

@@ -14,7 +14,7 @@ options:
 请勿在插件被加载前 `import` 插件模块，这会导致 NoneBot 无法将其转换为插件而损失部分功能。
 :::
 
-加载插件通常在机器人的入口文件进行，例如在 [创建项目](../create-project.md) 中创建的项目中的 `bot.py` 文件。在 NoneBot 初始化完成后即可加载插件。
+加载插件通常在机器人的入口文件进行，例如在 [创建项目](../create-project.mdx) 中创建的项目中的 `bot.py` 文件。在 NoneBot 初始化完成后即可加载插件。
 
 ```python title=bot.py {5}
 import nonebot

website/docs/tutorial/register-adapter.md

@@ -11,7 +11,7 @@ options:
 # 使用适配器
 
 :::tip 提示
-如何**安装**协议适配器请参考 [安装协议适配器](../start/install-adapter.md)
+如何**安装**协议适配器请参考 [安装协议适配器](../start/install-adapter.mdx)
 :::
 
 ## 协议适配器的功能

website/src/components/Asciinema/container.tsx

@@ -0,0 +1,35 @@
+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 AsciinemaContainer({
+  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/index.tsx

@@ -2,38 +2,17 @@ import "asciinema-player/dist/bundle/asciinema-player.css";
 
 import "./styles.css";
 
-import * as AsciinemaPlayer from "asciinema-player";
+import React from "react";
-import React, { useEffect, useRef } from "react";
 
-export type AsciinemaOptions = {
+import BrowserOnly from "@docusaurus/BrowserOnly";
-  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 = {
+export default function Asciinema(props): JSX.Element {
-  url: string;
+  return (
-  options?: Partial<AsciinemaOptions>;
+    <BrowserOnly fallback={<div></div>}>
-};
+      {() => {
-
+        const AsciinemaContainer = require("./container.tsx").default;
-export default function Asciinema({
+        return <AsciinemaContainer {...props} />;
-  url,
+      }}
-  options = {},
+    </BrowserOnly>
-}: 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/Card/index.tsx

@@ -3,7 +3,6 @@ import copy from "copy-to-clipboard";
 import React, { useState } from "react";
 
 import Link from "@docusaurus/Link";
-import type { IconName } from "@fortawesome/fontawesome-common-types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import type { Obj } from "../../libs/store";