diff --git a/docs/screencasts/README.md b/docs/screencasts/README.md index 0ea2242af..12e979a21 100644 --- a/docs/screencasts/README.md +++ b/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 ``` diff --git a/docs/screencasts/docker/Dockerfile b/docs/screencasts/docker/Dockerfile index ea062a4f4..86f0c9dec 100644 --- a/docs/screencasts/docker/Dockerfile +++ b/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, diff --git a/docs/screencasts/docker/configure-cluster.expect b/docs/screencasts/docker/configure-cluster.expect index bde45a242..567cc2b40 100755 --- a/docs/screencasts/docker/configure-cluster.expect +++ b/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" diff --git a/docs/screencasts/docker/github-readme.expect b/docs/screencasts/docker/github-readme.expect new file mode 100644 index 000000000..f8582d844 --- /dev/null +++ b/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" diff --git a/docs/screencasts/generate-readme-svg.sh b/docs/screencasts/generate-readme-svg.sh new file mode 100755 index 000000000..a762db81b --- /dev/null +++ b/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