🐛 fix asciinema ssr failed

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, { useEffect, useRef } from "react";
+import React 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;
-};
+import BrowserOnly from "@docusaurus/BrowserOnly";
 
-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>;
+export default function Asciinema(props): JSX.Element {
+  return (
+    <BrowserOnly fallback={<div></div>}>
+      {() => {
+        const AsciinemaContainer = require("./container.tsx").default;
+        return <AsciinemaContainer {...props} />;
+      }}
+    </BrowserOnly>
+  );
 }

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";