Add demo reel for deeper example

examples/deeper/README.md

@@ -1,20 +1,20 @@
 # Go Deeper Menu
 
-This example demonstrates using a menu with nested sub views. In this case we will go from Artists to Paintings to Colors.
+This example demonstrates using a menu with nested sub views. In this case we will go from Artists to the colors used in their Paintings.
 
 ```
-Artists -> Paintings -> Colors
+Artists -> Colors
 ```
 
 ## Pushing onto the NavStack 
 
 The artists component will push paintings onto the Navstack. While Paintings will push Colors onto the Navstack. 
 
-## Poping off the NavStack
+## Popping off the NavStack
 
 When a color is selected it will be popped off the navstack. But it will also emit a `ColorSelected` message. Which the Paintings component should handle and follow a similar pattern popping off the navstack and then emitting a `Painting Selected` msg. Likewise the Artist component will do the same and the menu will have all it's selections.
 
-<!-- <img src="out.gif" alt="gif"/> -->
+<img src="demo.gif" alt="vhs recording of this TUI example"/>
 
 
 

examples/deeper/data/data.go

@@ -27,15 +27,15 @@ func GetArtists() []Artist {
 				Description: "Guernica is a large 1937 oil painting on canvas by Spanish artist Pablo Picasso. One of Picasso's best known works, Guernica is regarded by many art critics as one of the most moving and powerful anti-war paintings in history.",
 				Colors: []Color{
 					{
-						RGB:    "black",
+						RGB:    "#000000", //black
 						Sample: "Black of the bull's eye facing down a matador it does not see.",
 					},
 					{
-						RGB:    "white",
+						RGB:    "#FFFFFF", //white
 						Sample: "White of the background rendered against the sun.",
 					},
 					{
-						RGB:    "grey",
+						RGB:    "#808080", //grey
 						Sample: "So grey the Spanish Civil War returned to present day.",
 					},
 				},
@@ -52,15 +52,15 @@ func GetArtists() []Artist {
 				Description: "",
 				Colors: []Color{
 					{
-						RGB:    "yellow",
+						RGB:    "#ffff00", //yellow
 						Sample: "The coat and turban have yellow accents with a golden glow.",
 					},
 					{
-						RGB:    "blue",
+						RGB:    "#0000ff", //blue
 						Sample: "Hat's blue and stunning as the model's distain.",
 					},
 					{
-						RGB:    "ochre",
+						RGB:    "#cc7722",
 						Sample: "Skin tones so ochre they burst with sun burn.",
 					},
 				},
@@ -70,11 +70,11 @@ func GetArtists() []Artist {
 				Description: "This captivating painting depicts a young woman standing by an open window, absorbed in reading a letter.",
 				Colors: []Color{
 					{
-						RGB:    "green",
+						RGB:    "#00ff00", //green
 						Sample: "If only the green curtain could speak.",
 					},
 					{
-						RGB:    "red",
+						RGB:    "#ff0000", //red
 						Sample: "The window drapes are the cheeryest thing in the room.",
 					},
 				},
@@ -84,11 +84,11 @@ func GetArtists() []Artist {
 				Description: "The scene exudes domestic tranquility and everyday beauty",
 				Colors: []Color{
 					{
-						RGB:    "yellow",
+						RGB:    "#ffff00",
 						Sample: "Yellow was a popular color for the Dutch.",
 					},
 					{
-						RGB:    "white",
+						RGB:    "#fdfff5",
 						Sample: "There is a milk the color of her bonet",
 					},
 				},

examples/deeper/demo.tape

@@ -0,0 +1,38 @@
+Output demo.gif
+
+Require echo
+
+Set Shell "bash"
+Set FontSize 32
+Set Width 2400
+Set Height 1200
+
+Sleep 1.5s
+Type "go run ."
+Enter
+Sleep 2.5s
+Down
+Sleep 1s
+Enter
+Sleep 2s
+Down 2
+Sleep 1s
+Down
+Sleep 500ms
+Down
+Sleep 1s
+Enter
+Sleep 1.5s
+Escape
+Sleep 1.5s
+Down
+Enter
+Sleep 1.5s
+Escape 
+Up 3
+Sleep 1.5s
+Enter
+Sleep 2s
+Enter
+Sleep 5s
+

examples/deeper/main.go

@@ -36,6 +36,9 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		if msg.String() == "ctrl+c" {
 			return m, tea.Quit
 		}
+	case tea.WindowSizeMsg:
+		m.menu.SetSize(msg)
+		return m, nil
 	}
 
 	updatedmenu, cmd := m.menu.Update(msg)

examples/deeper/test.tape

@@ -0,0 +1,34 @@
+Set Shell zsh
+Sleep 1.5s
+Type "go run ."
+Sleep 500ms
+Enter
+Sleep 2.5s
+Down
+Sleep 1s
+Enter
+Sleep 2s
+Down 2
+Sleep 1s
+Down
+Sleep 500ms
+Down
+Sleep 1s
+Enter
+Sleep 1.5s
+Escape
+Sleep 1.5s
+Down
+Enter
+Sleep 1.5s
+Escape 2
+Type "[A"
+Escape
+Type "[A"
+Escape
+Type "[A"
+Enter
+Sleep 2s
+Enter
+Sleep 2s
+

examples/simple/main.go

@@ -18,7 +18,6 @@ var docStyle = lipgloss.NewStyle()
 type model struct {
 	SelectedColor string
 	menu          menu.Model
-	window        *window.Model
 }
 
 func (m model) Init() tea.Cmd {
@@ -36,10 +35,6 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 			return m, tea.Quit
 		}
 	case tea.WindowSizeMsg:
-		// h, v := docStyle.GetFrameSize()
-		// m.window.Height = msg.Height
-		// m.window.Width = msg.Width - h
-		// m.window.TopOffset = v
 		m.menu.SetSize(msg)
 		return m, nil
 	}
@@ -79,8 +74,7 @@ func main() {
 	w := window.New(120, 25, top, side)
 	ns := navstack.New(&w)
 	m := model{
-		menu:   menu.New(title, choices, nil),
-		window: &w,
+		menu: menu.New(title, choices, nil),
 	}
 	ns.Push(navstack.NavigationItem{Model: m, Title: "main menu"})