📝 Docs: 升级新版 NonePress 主题 (#2375)

website/src/components/Asciinema/container.tsx

@@ -1,6 +1,7 @@
-import * as AsciinemaPlayer from "asciinema-player";
 import React, { useEffect, useRef } from "react";
 
+import * as AsciinemaPlayer from "asciinema-player";
+
 export type AsciinemaOptions = {
   cols: number;
   rows: number;
@@ -16,7 +17,7 @@ export type AsciinemaOptions = {
   fontSize: string;
 };
 
-export type AsciinemaProps = {
+export type Props = {
   url: string;
   options?: Partial<AsciinemaOptions>;
 };
@@ -24,12 +25,12 @@ export type AsciinemaProps = {
 export default function AsciinemaContainer({
   url,
   options = {},
-}: AsciinemaProps): JSX.Element {
+}: Props): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     AsciinemaPlayer.create(url, ref.current, options);
-  }, []);
+  }, [url, options]);
 
-  return <div ref={ref} className="not-prose w-full max-w-full my-4"></div>;
+  return <div ref={ref} className="not-prose ap-container"></div>;
 }

website/src/components/Asciinema/index.tsx

@@ -1,15 +1,24 @@
-import "asciinema-player/dist/bundle/asciinema-player.css";
-
-import "./styles.css";
-
 import React from "react";
 
+import "asciinema-player/dist/bundle/asciinema-player.css";
 import BrowserOnly from "@docusaurus/BrowserOnly";
 
-export default function Asciinema(props): JSX.Element {
+import "./styles.css";
+import type { Props } from "./container";
+
+export type { Props } from "./container";
+
+export default function Asciinema(props: Props): JSX.Element {
   return (
-    <BrowserOnly fallback={<div></div>}>
+    <BrowserOnly
+      fallback={
+        <a href={props.url} title="Asciinema video player">
+          Asciinema cast
+        </a>
+      }
+    >
       {() => {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
         const AsciinemaContainer = require("./container.tsx").default;
         return <AsciinemaContainer {...props} />;
       }}

website/src/components/Asciinema/styles.css

@@ -1,3 +1,7 @@
-.asciinema-player svg {
-  display: inline-block;
+.ap-player svg {
+  @apply inline-block;
+}
+
+.ap-container {
+  @apply w-full my-4;
 }