docs(examples): fix the logo pixels

README.md

@@ -1,5 +1,5 @@
 ![Demo of
-Ratatui](https://raw.githubusercontent.com/ratatui-org/ratatui/ca2a0219f0a7496cd379d3de1382d86f9651f73a/examples/demo2-noborders.gif?raw=true)
+Ratatui](https://raw.githubusercontent.com/ratatui-org/ratatui/2ec571113f081373f59d206c1fa51b26c761f81f/examples/demo2.gif)
 <!-- See RELEASE.md for instructions on creating the demo gif --->
 
 <div align="center">

examples/demo2-social.tape

@@ -0,0 +1,43 @@
+# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
+# To run this script, install vhs and run `vhs ./examples/demo.tape`
+
+Output "target/demo2-social.gif"
+Set Theme "OceanicMaterial"
+# Github social preview size (1280x640 with 80px padding) and must be < 1MB
+# This puts some constraints on the amount of interactivity we can do.
+Set Width 1280
+Set Height 640
+Set Padding 80
+Hide
+Type "cargo run --example demo2 --features crossterm,widget-calendar"
+Enter
+Sleep 2s
+Show
+# About screen
+Sleep 3.5s
+Down # Red eye
+Sleep 0.4s
+Down # black eye
+Sleep 1s
+Tab
+# Recipe
+Sleep 1s
+Set TypingSpeed 500ms
+Down 7
+Sleep 1s
+Tab
+# Email
+Sleep 2s
+Down 4
+Sleep 2s
+Tab
+# Trace route
+Sleep 1s
+Set TypingSpeed 200ms
+Down 10
+Sleep 2s
+Tab
+# Weather
+Set TypingSpeed 100ms
+Down 40
+Sleep 2s

examples/demo2.tape

@@ -1,13 +1,11 @@
 # This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
 # To run this script, install vhs and run `vhs ./examples/demo.tape`
+# NOTE: Requires VHS 0.6.1 or later for Screenshot support
 Output "target/demo2.gif"
 Set Theme "OceanicMaterial"
-# Github social preview size (1280x640 with 80px padding) and must be < 1MB
-# This puts some constraints on the amount of interactivity we can do.
-# Set Width 1280
-# Set Height 640
-# Set Padding 80
-# Without the padding for README.md, etc.
+# The reason for this strange size is that the social preview image for this
+# demo is 1280x64 with 80 pixels of padding on each side. We want a version
+# without the padding for README.md, etc.
 Set Width 1120
 Set Height 480
 Set Padding 0
@@ -17,30 +15,35 @@ Enter
 Sleep 2s
 Show
 # About screen
+Screenshot "target/demo2-about.png"
 Sleep 3.5s
 Down # Red eye
 Sleep 0.4s
 Down # black eye
 Sleep 1s
 Tab
 # Recipe
+Screenshot "target/demo2-recipe.png"
 Sleep 1s
 Set TypingSpeed 500ms
 Down 7
 Sleep 1s
 Tab
 # Email
+Screenshot "target/demo2-email.png"
 Sleep 2s
 Down 4
 Sleep 2s
 Tab
 # Trace route
+Screenshot "target/demo2-trace.png"
 Sleep 1s
 Set TypingSpeed 200ms
 Down 10
 Sleep 2s
 Tab
 # Weather
+Screenshot "target/demo2-weather.png"
 Set TypingSpeed 100ms
 Down 40
 Sleep 2s

examples/demo2/tabs/about.rs

@@ -4,8 +4,8 @@ use ratatui::{prelude::*, widgets::*};
 use crate::{colors, layout, THEME};
 
 const RATATUI_LOGO: [&str; 32] = [
-    "                                ",
-    "              ████             ",
+    "               ███              ",
+    "             ██████             ",
     "            ███████             ",
     "           ████████             ",
     "          █████████             ",
@@ -33,9 +33,9 @@ const RATATUI_LOGO: [&str; 32] = [
     "  █xxxxxxxxx██xxxxx█ ████  ███  ",
     " █xxxxxxxxxxxxxxxxxx█ ██   ███  ",
     "█xxxxxxxxxxxxxxxxxxxx█ █   ███  ",
-    " █xxxxxxxxxxxxxxxxxxxx█   ███   ",
-    "  █xxxxxxxxxxxxxxxxxxxx█ ██     ",
-    "   █xxxxxxxxxxxxxxxxxxxx█ █     ",
+    "█xxxxxxxxxxxxxxxxxxxxx█   ███   ",
+    " █xxxxxxxxxxxxxxxxxxxxx█ ███    ",
+    "  █xxxxxxxxxxxxxxxxxxxxx█ █     ",
 ];
 
 pub struct AboutTab {

src/lib.rs

@@ -3,7 +3,7 @@
 //! [ratatui](https://github.com/ratatui-org/ratatui) is a library that is all about cooking up terminal user
 //! interfaces (TUIs).
 //!
-//! ![Demo](https://raw.githubusercontent.com/ratatui-org/ratatui/ca2a0219f0a7496cd379d3de1382d86f9651f73a/examples/demo2-noborders.gif?raw=true)
+//! ![Demo](https://raw.githubusercontent.com/ratatui-org/ratatui/2ec571113f081373f59d206c1fa51b26c761f81f/examples/demo2.gif)
 //!
 //! # Get started
 //!