Add demo gif showing the control-r integration

README.md

@@ -2,7 +2,7 @@
 
 `hishtory` is a better shell history. It stores your shell history in context (what directory you ran the command in, whether it succeeded or failed, how long it took, etc). This is all stored locally and end-to-end encrypted for syncing to to all your other computers. All of this is easily queryable via the `hishtory` CLI. This means from your laptop, you can easily find that complex bash pipeline you wrote on your server, and see the context in which you ran it. 
 
-![demo](https://raw.githubusercontent.com/ddworken/hishtory/master/backend/web/landing/www/img/hishtory.svg)
+![demo](https://raw.githubusercontent.com/ddworken/hishtory/master/backend/web/landing/www/img/demo.gif)
 
 ## Getting Started
 

backend/web/landing/www/index.html

@@ -61,9 +61,8 @@
           <h2 class="text-white font-weight-bold">Your shell history: synced, queryable, and in context</h2>
           <hr class="divider my-4">
         </div>
-        <div class="col-lg-8 align-self-baseline">
-          <script id="asciicast-xW0ddZdZm7Utv1iLATegM4Oe4" src="https://asciinema.org/a/xW0ddZdZm7Utv1iLATegM4Oe4.js" async data-autoplay=
-          "true" data-speed="1.5"></script>
+        <div class="col-lg-12 align-self-baseline justify-content-center">
+          <img src="img/demo.gif" style="width: 80vw">
         </div>
       </div>
     </div>

demo.vhs

@@ -0,0 +1,35 @@
+# Demo file used https://github.com/charmbracelet/vhs
+Output backend/web/landing/www/img/demo.gif
+Set FontSize 22
+Set Width 2500
+Set Height 1050
+
+# Set up 
+Hide 
+Type "zsh" 
+Enter 
+Type "clear"
+Enter
+Show 
+
+Type "find . -iname '*.go' | xargs -I {} -- gofmt -w {}"
+Enter 
+Sleep 2000ms
+
+Type "ssh server"
+Enter
+Sleep 200ms
+Type "# Then press control + r to search your history"
+Enter 
+Sleep 2800ms
+
+Ctrl+R
+Sleep 4000ms
+Type "g"
+Sleep 400ms
+Type "of
+Sleep 400ms
+Type "mt"
+Sleep 6000ms
+Enter
+Sleep 5000ms