Embedd asciinema into docs.

Signed-off-by: Fabian Kammel <fk@edgeless.systems>

docs/docs/workflows/verify-cli.md

@@ -1,5 +1,13 @@
 # Verify the CLI
 
+import AsciinemaWidget from '../../src/components/AsciinemaWidget';
+
+local path:
+<AsciinemaWidget src="/assets/constellation-install-cli.cast" fontSize={16} rows={18} cols={80} idleTimeLimit={3} preload={true} />
+
+URL:
+<AsciinemaWidget src="https://asciinema.org/a/8M4AUPRDWCBN2VuVlhGRM0BZM.cast" fontSize={16} rows={18} cols={80} idleTimeLimit={3} preload={true} />
+
 Edgeless Systems uses [sigstore](https://www.sigstore.dev/) and [SLSA](https://slsa.dev) to ensure supply-chain security for the Constellation CLI and node images ("artifacts"). sigstore consists of three components: [Cosign](https://docs.sigstore.dev/cosign/overview), [Rekor](https://docs.sigstore.dev/rekor/overview), and Fulcio. Edgeless Systems uses Cosign to sign artifacts. All signatures are uploaded to the public Rekor transparency log, which resides at https://rekor.sigstore.dev/.
 
 :::note

docs/package.json

@@ -19,6 +19,7 @@
     "@docusaurus/module-type-aliases": "^2.2.0",
     "@docusaurus/preset-classic": "^2.2.0",
     "@mdx-js/react": "^1.6.22",
+    "asciinema-player": "^3.0.1",
     "clsx": "^1.2.1",
     "mdx-mermaid": "^1.3.2",
     "mermaid": "^9.2.2",

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;