Cleanup and work in feedback.

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

docs/docs/workflows/sbom.md

@@ -1,8 +1,6 @@
 # Consume software bill of materials (SBOMs)
 
-import AsciinemaWidget from '../../src/components/AsciinemaWidget';
-
-<AsciinemaWidget src="/constellation/assets/check-sbom.cast" fontSize={16} rows={18} cols={80} idleTimeLimit={3} preload={true} />
+<asciinemaWidget src="/constellation/assets/check-sbom.cast" fontSize={16} rows={18} cols={80} idleTimeLimit={3} preload={true} />
 
 Constellation builds produce a [software bill of materials (SBOM)](https://www.ntia.gov/SBOM) for each generated [artifact](../architecture/microservices.md).
 You can use SBOMs to make informed decisions about dependencies and vulnerabilities in a given application. Enterprises rely on SBOMs to maintain an inventory of used applications, which allows them to take data-driven approaches to managing risks related to vulnerabilities.

docs/docs/workflows/verify-cli.md

@@ -1,8 +1,6 @@
 # Verify the CLI
 
-import AsciinemaWidget from '../../src/components/AsciinemaWidget';
-
-<AsciinemaWidget src="/constellation/assets/verify-cli.cast" fontSize={16} rows={18} cols={80} idleTimeLimit={3} preload={true} theme={'edgeless'} />
+<asciinemaWidget src="/constellation/assets/verify-cli.cast" fontSize={16} rows={18} cols={80} idleTimeLimit={3} preload={true} theme={'edgeless'} />
 
 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/.
 

docs/screencasts/demo.svg

@@ -1,66 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="terminal" baseProfile="full" viewBox="0 0 143 285" width="143" version="1.1">
-    <defs>
-        <termtosvg:template_settings xmlns:termtosvg="https://github.com/nbedos/termtosvg">
-            <termtosvg:screen_geometry columns="12" rows="12"/>
-            <termtosvg:animation type="css"/>
-        </termtosvg:template_settings>
-        <style type="text/css" id="generated-style"><![CDATA[#screen {
-                font-family: 'DejaVu Sans Mono', monospace;
-                font-style: normal;
-                font-size: 14px;
-            }
-
-        text {
-            dominant-baseline: text-before-edge;
-            white-space: pre;
-        }
-    
-            :root {
-                --animation-duration: 1001ms;
-            }
-
-            @keyframes roll {
-                0.000%{transform:translateY(0px)}
-0.100%{transform:translateY(-238px)}
-100.000%{transform:translateY(-238px)}
-            }
-
-            #screen_view {
-                animation-duration: 1001ms;
-                animation-iteration-count:infinite;
-                animation-name:roll;
-                animation-timing-function: steps(1,end);
-                animation-fill-mode: forwards;
-            }
-        ]]></style>
-        <style type="text/css" id="user-style">
-            /* The colors defined below are the default 16 colors used for rendering text of the terminal. Adjust
-               them as needed.
-               gjm8 color theme (source: https://terminal.sexy/) */
-            /* customized colors 10, 11, and 14 */
-            .foreground {fill: #f8f8f2}
-            .background {fill: #272822}
-            .color0 {fill: #272822}
-            .color1 {fill: #f92672}
-            .color2 {fill: #a6e22e}
-            .color3 {fill: #f4bf75}
-            .color4 {fill: #66d9ef}
-            .color5 {fill: #ae81ff}
-            .color6 {fill: #a1efe4}
-            .color7 {fill: #f8f8f2}
-            .color8 {fill: #75715e}
-            .color9 {fill: #fd971f}
-            .color10 {fill: #8b04dd}
-            .color11 {fill: #dcaf3b}
-            .color12 {fill: #a59f85}
-            .color13 {fill: #f5f4f1}
-            .color14 {fill: #90ff99}
-            .color15 {fill: #f9f8f5}
-        </style>
-    </defs>
-    <rect id="terminalui" class="background" width="100%" height="100%" ry="4.5826941"/>
-    <circle cx="24" cy="23" r="7" class="color1"/>
-    <circle cx="44" cy="23" r="7" class="color3"/>
-    <circle cx="64" cy="23" r="7" class="color2"/>
-    <svg id="screen" width="96" height="204" x="23" y="50" viewBox="0 0 96 204" preserveAspectRatio="xMidYMin slice"><rect class="background" height="100%" width="100%" x="0" y="0"/><defs><g id="g1"><text x="0" textLength="8" class="background"> </text></g><g id="g2"><text x="0" textLength="96" class="foreground">\[\e[43;30m\</text></g><g id="g3"><text x="0" textLength="96" class="foreground">][\t]\w\r\n[</text></g><g id="g4"><text x="0" textLength="96" class="foreground">\u@\h]\$\[\e</text></g><g id="g5"><text x="0" textLength="40" class="foreground">[0m\]</text><text x="40" textLength="8" class="background"> </text></g></defs><g id="screen_view"><g><rect x="0" y="0" width="8" height="17" class="foreground"/><use xlink:href="#g1" y="0"/></g><g><use xlink:href="#g2" y="238"/><use xlink:href="#g3" y="255"/><use xlink:href="#g4" y="272"/><rect x="40" y="289" width="8" height="17" class="foreground"/><use xlink:href="#g5" y="289"/></g></g></svg>
-</svg>

docs/screencasts/docker/Dockerfile

@@ -29,8 +29,8 @@ ENV SHELL=/bin/bash
 RUN echo 'export PS1="\[\033[38;2;144;255;153m\]~/constellation\[\033[0m\]\r\n\[\033[38;2;139;4;221m\]$\[\033[0m\] "' >> /root/.bashrc
 
 # Copy install scripts
-COPY ./*.sh /root/
+COPY ./*.expect /root/
 
 WORKDIR /root
 ENTRYPOINT ["/usr/bin/expect", "-f"]
-CMD ["verify-cli.sh"]
+CMD ["verify-cli.expect"]

docs/screencasts/generate-screencasts.sh

@@ -3,9 +3,9 @@
 docker build -t screenrecodings docker
 
 # Generate cast to verify CLI
-docker run -it -v "$(pwd)"/recordings:/recordings screenrecodings verify-cli.sh
+docker run -it -v "$(pwd)"/recordings:/recordings screenrecodings verify-cli.expect
 cp recordings/verify-cli.cast ../static/assets/verify-cli.cast
 
 # Generate cast to check SBOM
-docker run -it -v "$(pwd)"/recordings:/recordings screenrecodings check-sbom.sh
+docker run -it -v "$(pwd)"/recordings:/recordings screenrecodings check-sbom.expect
 cp recordings/check-sbom.cast ../static/assets/check-sbom.cast

docs/src/css/custom.css

@@ -77,6 +77,7 @@ html[data-theme='dark'] .header-github-link:before {
 .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;

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,
+};