feat: auto generate gifs for docs

.github/workflows/docs.yml

@@ -44,7 +44,8 @@ jobs:
         run: >
           go build
           -ldflags "-X github.com/cfoust/cy/pkg/version.Version=${{ steps.cy.outputs.release }}"
-          -o stories ./cmd/stories/main.go
+          -o docs/stories
+          ./cmd/stories/main.go
       - uses: charmbracelet/vhs-action@v1
         with:
           path: "ci/cy.tape"

docs/.gitignore

@@ -1 +1,2 @@
 book
+/stories

docs/book.toml

@@ -9,6 +9,7 @@ authors = ["Caleb Foust"]
 [output.html]
 default-theme = "ayu"
 preferred-dark-theme = "ayu"
+site-url = "/cy/"
 
 [preprocessor.storybook]
 command = "python3 storybook.py"

docs/src/.gitignore

@@ -1 +1,2 @@
 /generated-api.md
+/images

docs/src/README.md

@@ -1,3 +1,5 @@
+{{main.gif splash}}
+
 **cy** is an experimental terminal multiplexer. It builds on the traditional paradigms of `tmux` and `screen` with advances in form, function, and customization.
 
 Key features:

docs/src/fuzzy-finding.md

@@ -1,5 +1,7 @@
 # Fuzzy finding
 
+{{gif input/find/search}}
+
 Simple, fast, and configurable fuzzy finding is one of `cy`'s most important features. `cy` provides a purpose-built fuzzy finder (similar to [fzf](https://github.com/junegunn/fzf)) in the form of `(input/find)`, which is a function available in the API.
 
 ## Choosing a string from a list

docs/src/replay-mode.md

@@ -1,5 +1,7 @@
 # Replay mode
 
+{{gif replay/time/search-progress}}
+
 One of `cy`'s most important features is the ability to record, play back, and search through everything that happens in your terminal sessions. You can invoke **replay mode** at any time by typing the key sequence `ctrl+a` `p` [by default](./default-keys.md#general).
 
 > ### A note about recording

docs/storybook.py

@@ -1,7 +1,11 @@
+import hashlib
 import json
-import sys
+import os
 import re
-import hashlib
+import subprocess
+import sys
+import tempfile
+from pathlib import Path
 
 STORY_REGEX = re.compile("{{((\w+).)?(png|gif) (.+)}}")
 
@@ -37,19 +41,66 @@
                 filename = h.hexdigest()[:12]
 
             filename += "." + type_
+            filename = "images/" + filename
 
-            jobs[filename] = command
             replace.append(
                 (
                     ref.start(0),
                     ref.end(0),
-                    f"![{command}](./stories/{filename})",
+                    f"![{command}]({filename})",
                 )
             )
 
+            filename = "./src/" + filename
+            jobs[filename] = command
+
         for start, end, text in reversed(replace):
             content = content[:start] + text + content[end:]
 
         section['Chapter']['content'] = content
 
+    Path("./src/images").mkdir(parents=True, exist_ok=True)
+
+    tape = "out.tape"
+    for filename, command in jobs.items():
+        if os.path.exists(filename): continue
+        if os.path.exists(tape): os.unlink(tape)
+
+        script = ""
+        if filename.endswith(".gif"):
+            script = f"""
+Output {filename}
+Set Padding 0
+Set Framerate 23
+Set PlaybackSpeed 0.5
+Hide
+Type "./stories -s {command} && clear"
+Enter
+Sleep 2s
+Show
+Sleep 10s
+"""
+        elif filename.endswith(".png"):
+            script = f"""
+Hide
+Type "./stories -s {command} && clear"
+Enter
+Sleep 2s
+Show
+Screenshot {filename}
+"""
+
+        with open(tape, 'w') as f:
+            f.write(script)
+
+        code = subprocess.call(
+            "vhs -q out.tape",
+            shell=True
+        )
+
+        if code != 0:
+            raise Exception(code)
+
+    if os.path.exists(tape): os.unlink(tape)
+
     print(json.dumps(book))