docs: embedd asciinema casts (#1154)

Signed-off-by: Fabian Kammel <fk@edgeless.systems>
Co-authored-by: Moritz Eckert <m1gh7ym0@gmail.com>
Co-authored-by: Thomas Tendyck <tt@edgeless.systems>
Co-authored-by: 3u13r <lc@edgeless.systems>

docs/src/components/AsciinemaWidget/index.js

@@ -0,0 +1,22 @@
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import React, { useEffect, useRef } from 'react';
+import 'asciinema-player/dist/bundle/asciinema-player.css';
+
+const AsciinemaWidget = ({ src, ...asciinemaOptions}) => {
+  return (
+    <BrowserOnly fallback={<div>Loading asciinema cast...</div>}>
+      {() => {
+        const AsciinemaPlayer = require('asciinema-player');
+        const ref = useRef(null);
+
+        useEffect(() => {
+          AsciinemaPlayer.create(src, ref.current, asciinemaOptions);
+        }, [src]);
+
+        return <div ref={ref} />;
+      }}
+    </BrowserOnly>
+  );
+};
+
+export default AsciinemaWidget;