Finalize workflow for README svg.

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

docs/screencasts/README.md

@@ -44,20 +44,14 @@ when it is [embedded in the docs](../docs/workflows/verify-cli.md#5). Check the
 
 ## GitHub README.md
 
-The GitHub `README.md` does not support embedding the `asciinema-player`, therefore we generate an
+The GitHub `README.md` does not support embedding the JavaScript `asciinema-player`, therefore we generate an
 `svg` file for that usecase.
 
-{"version": 2, "width": 0, "height": 0, "timestamp": 1676289328, "env": {"SHELL": "/bin/bash", "TERM": "xterm-256color"}}
-
-=> TODO: Automate that change
-
-{"version": 2, "width": 95, "height": 17, "timestamp": 1676289328, "env": {"SHELL": "/bin/bash", "TERM": "xterm-256color"}}
-
 ```sh
+# Make sure to install the converter.
 # https://github.com/nbedos/termtosvg
-# Archived since 2020, do we want to change?
 pip3 install termtosvg
-# Window-frame.svg contains the styling information
-termtosvg render recordings/readme.cast readme.svg -t window-frame.svg
-cp readme.svg ../static/img/shell-windowframe.svg
+
+# Generate SVG. This takes ~10min, since it actually creates a cluster in GCP.
+./generate-readme-svg.sh
 ```

docs/screencasts/docker/Dockerfile

@@ -23,6 +23,8 @@ RUN curl -sLO https://github.com/edgelesssys/constellation/releases/latest/downl
 # As mount point for $HOME/.config/gcloud
 RUN mkdir /root/.config
 
+# Disable spinner when running Constellation CLI commands
+ENV CONSTELL_NO_SPINNER=1
 # Enable RGB colors in PS1
 ENV TERM=xterm-256color
 # Set width of terminal, default is ~80 and leads to broken lines for long lines,

docs/screencasts/docker/configure-cluster.expect

@@ -31,6 +31,7 @@ send "y"
 send "\r"
 expect_prompt
 
+# TODO: Delete step once #1149 released
 run_command "# Step 2: Fill in configuration"
 expect_prompt
 run_command "yq '.provider.gcp.project = \"constellation-331613\"' -i constellation-conf.yaml"

docs/screencasts/docker/github-readme.expect

@@ -0,0 +1,88 @@
+#!/usr/bin/expect -f
+# Note: Expects to be able to run 'sudo install' without a password
+
+set timeout -1
+set send_human {0.05 0 1 0.05 0.3}
+set CTRLC \003
+set CTRLX \030
+set record_name [lindex $argv 0];
+
+proc expect_prompt {} {
+    # This matches the trailing 0m of our ANSI control sequence. See PS1 in Dockerfile.
+    expect "0m "
+}
+
+proc run_command {cmd} {
+    send -h "$cmd"
+    send "\r"
+    expect -timeout 1
+}
+
+# Start recording
+spawn asciinema rec --overwrite /recordings/github-readme.cast
+send "\r"
+expect_prompt
+
+run_command "# Step 1: Create IAM configuration"
+expect_prompt
+run_command "constellation iam create gcp --generate-config --projectID constellation-331613 --serviceAccountID constellation-demo --zone europe-west3-b"
+expect -re "y\/n"
+send "y"
+send "\r"
+expect_prompt
+
+# TODO: Delete step once #1149 released
+run_command "# Step 2: Fill in configuration"
+expect_prompt
+run_command "yq '.provider.gcp.project = \"constellation-331613\"' -i constellation-conf.yaml"
+expect_prompt
+run_command "yq '.provider.gcp.zone = \"europe-west3-b\"' -i constellation-conf.yaml"
+expect_prompt
+run_command "yq '.provider.gcp.region = \"europe-west3\"' -i constellation-conf.yaml"
+expect_prompt
+run_command "cat constellation-conf.yaml | head -n15"
+expect_prompt
+
+run_command "# Step 3: Create cloud environment"
+expect_prompt
+run_command "constellation create --control-plane-nodes 3 --worker-nodes 2"
+expect -re "y\/n"
+send "y"
+send "\r"
+expect_prompt
+
+run_command "# Step 4: Initialize Constellation"
+expect_prompt
+run_command "constellation init"
+expect_prompt
+
+run_command "# Wait for cluster to finish bootstrapping..."
+expect_prompt
+# Without a sleep we only see a single node, not 5.
+run_command "sleep 300"
+expect_prompt
+
+run_command "# Step 5: Connect to Constellation"
+expect_prompt
+run_command "export KUBECONFIG=/constellation/constellation-admin.conf"
+expect_prompt
+run_command "kubectl get nodes"
+
+run_command "# Step 6: Delete Constellation cluster"
+expect_prompt
+run_command "constellation terminate"
+expect -re "y\/n"
+send "y"
+send "\r"
+expect_prompt
+
+run_command "# Step 7: Remove IAM resources"
+expect_prompt
+run_command "cd constellation-iam-terraform"
+expect_prompt
+run_command "terraform apply -destroy -auto-approve"
+expect -timeout 25
+run_command "# All resources are cleaned up."
+
+# Stop recording
+send "exit"

docs/screencasts/generate-readme-svg.sh

@@ -0,0 +1,32 @@
+#!/usr/bin/env bash
+#
+# This script prepares the environment for expect scripts to be recorded in,
+# executes all scripts, and copies the .cast files to our doc's asset folder.
+#
+# Note: A cluster is created in GCP. Therefore you are expected to be logged in
+# via `gcloud` CLI. You credentials at $HOME/.config/gcloud are mounted into the
+# screenrecordings container. A full script run takes ~20min.
+#
+
+docker build -t screenrecodings docker
+
+# Create cast
+docker run -it \
+    -v "${HOME}"/.config/gcloud:/root/.config/gcloud \
+    -v "$(pwd)"/recordings:/recordings \
+    -v "$(pwd)"/constellation:/constellation \
+    screenrecodings /scripts/github-readme.expect
+
+# Fix meta data: width and height are always zero in Docker produced cast files.
+# Header is the first lint of cast file in JSON format, we read, fix and write it.
+head recordings/github-readme.cast -n 1 | yq e -M '.width = 95 | .height = 17' - > new_header.cast
+# Then append everything, expect first line from original cast file.
+tail -n+2 recordings/github-readme.cast >> new_header.cast
+
+# Then render cast into svg using:
+#   https://github.com/nbedos/termtosvg
+termtosvg render new_header.cast readme.svg -t window-frame.svg
+
+# Copy and cleanup
+cp readme.svg ../static/img/shell-windowframe.svg
+rm readme.svg new_header.cast