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;

docs/src/css/custom.css

@@ -5,7 +5,7 @@
  */
 
 /**
- * Fonts 
+ * Fonts
  */
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 /* You can override the default Infima variables here. */
@@ -69,4 +69,21 @@ html[data-theme='dark'] .header-github-link:before {
 
 .footer--dark {
   background-color: black;
-}
+}
+
+/*
+ * https://github.com/asciinema/asciinema-player/wiki/Custom-terminal-themes
+ */
+.asciinema-theme-edgeless .asciinema-terminal {
+  color: #ffffff;                    /* default text color */
+  background-color: #000000;         /* terminal background color */
+  border-color: #000000;
+}
+
+.asciinema-theme-edgeless .fg-bg {    /* inverse for default text color */
+  color: #000000;
+}
+
+.asciinema-theme-edgeless .bg-fg {    /* inverse for terminal background color */
+  background-color: #ffffff; /* controls color of the cursor */
+}

docs/src/theme/MDXComponents.js

@@ -3,6 +3,7 @@ import React from 'react';
 import MDXComponents from '@theme-original/MDXComponents';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import AsciinemaWidget from '@site/src/components/AsciinemaWidget';
 
 export default {
     // Re-use the default mapping
@@ -11,4 +12,5 @@ export default {
     // `Highlight` will receive all props that were passed to `highlight` in MDX
     tabs: Tabs,
     tabItem: TabItem,
-};
+    asciinemaWidget: AsciinemaWidget,
+};