From 5e34a05a637624126c76b41e76599bbddf20d107 Mon Sep 17 00:00:00 2001
From: Josh McKinney <joshka@users.noreply.github.com>
Date: Wed, 27 Sep 2023 17:29:35 -0700
Subject: [PATCH] docs: update layout example based on discord feedback

https://discord.com/channels/1070692720437383208/1080107705672413264/1156687528003375114
---
 examples/docsrs.rs | 20 +++++++++++++-------
 src/lib.rs         | 26 ++++++++++++++++----------
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/examples/docsrs.rs b/examples/docsrs.rs
index 8029a0764..ab25f2fc1 100644
--- a/examples/docsrs.rs
+++ b/examples/docsrs.rs
@@ -53,7 +53,7 @@ fn handle_events() -> io::Result<bool> {
 }
 
 fn layout(frame: &mut Frame) {
-    let areas = Layout::default()
+    let main_layout = Layout::default()
         .direction(Direction::Vertical)
         .constraints(vec![
             Constraint::Length(1),
@@ -61,20 +61,26 @@ fn layout(frame: &mut Frame) {
             Constraint::Length(1),
         ])
         .split(frame.size());
-    frame.render_widget(Paragraph::new("Title Bar"), areas[0]);
-    frame.render_widget(Paragraph::new("Status Bar"), areas[2]);
+    frame.render_widget(
+        Block::new().borders(Borders::TOP).title("Title Bar"),
+        main_layout[0],
+    );
+    frame.render_widget(
+        Block::new().borders(Borders::TOP).title("Status Bar"),
+        main_layout[2],
+    );
 
-    let areas = Layout::default()
+    let inner_layout = Layout::default()
         .direction(Direction::Horizontal)
         .constraints(vec![Constraint::Percentage(50), Constraint::Percentage(50)])
-        .split(areas[1]);
+        .split(main_layout[1]);
     frame.render_widget(
         Block::default().borders(Borders::ALL).title("Left"),
-        areas[0],
+        inner_layout[0],
     );
     frame.render_widget(
         Block::default().borders(Borders::ALL).title("Right"),
-        areas[1],
+        inner_layout[1],
     );
 }
 
diff --git a/src/lib.rs b/src/lib.rs
index 9ac35ee1c..e609287fd 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -153,7 +153,7 @@
 //!
 //! Running this example produces the following output:
 //!
-//! ![docsrs-hello](https://github.com/ratatui-org/ratatui/assets/381361/9afccfe3-5f33-42e9-9a55-2d143af3b128)
+//! ![docsrs-hello](https://github.com/ratatui-org/ratatui/blob/c3c3c289b1eb8d562afb1931adb4dc719cd48490/examples/docsrs-hello.png?raw=true)
 //!
 //! ## Layout
 //!
@@ -166,7 +166,7 @@
 //! use ratatui::{prelude::*, widgets::*};
 //!
 //! fn ui(frame: &mut Frame) {
-//!     let areas = Layout::default()
+//!     let main_layout = Layout::default()
 //!         .direction(Direction::Vertical)
 //!         .constraints(vec![
 //!             Constraint::Length(1),
@@ -174,27 +174,33 @@
 //!             Constraint::Length(1),
 //!         ])
 //!         .split(frame.size());
-//!     frame.render_widget(Paragraph::new("Title Bar"), areas[0]);
-//!     frame.render_widget(Paragraph::new("Status Bar"), areas[2]);
+//!     frame.render_widget(
+//!         Block::new().borders(Borders::TOP).title("Title Bar"),
+//!         main_layout[0],
+//!     );
+//!     frame.render_widget(
+//!         Block::new().borders(Borders::TOP).title("Status Bar"),
+//!         main_layout[2],
+//!     );
 //!
-//!     let areas = Layout::default()
+//!     let inner_layout = Layout::default()
 //!         .direction(Direction::Horizontal)
 //!         .constraints(vec![Constraint::Percentage(50), Constraint::Percentage(50)])
-//!         .split(areas[1]);
+//!         .split(main_layout[1]);
 //!     frame.render_widget(
 //!         Block::default().borders(Borders::ALL).title("Left"),
-//!         areas[0],
+//!         inner_layout[0],
 //!     );
 //!     frame.render_widget(
 //!         Block::default().borders(Borders::ALL).title("Right"),
-//!         areas[1],
+//!         inner_layout[1],
 //!     );
 //! }
 //! ```
 //!
 //! Running this example produces the following output:
 //!
-//! ![docsrs-layout](https://github.com/ratatui-org/ratatui/assets/381361/a18da2a3-1bf4-4939-a5e1-06f3e32bacd1)
+//! ![docsrs-layout](https://github.com/ratatui-org/ratatui/blob/c3c3c289b1eb8d562afb1931adb4dc719cd48490/examples/docsrs-layout.png?raw=true)
 //!
 //! ## Text and styling
 //!
@@ -255,7 +261,7 @@
 //!
 //! Running this example produces the following output:
 //!
-//! ![docsrs-styling](https://github.com/ratatui-org/ratatui/assets/381361/c16024f7-3d36-4f66-973c-5892b69bca7f)
+//! ![docsrs-styling](https://github.com/ratatui-org/ratatui/blob/c3c3c289b1eb8d562afb1931adb4dc719cd48490/examples/docsrs-styling.png?raw=true)
 #![cfg_attr(feature = "document-features", doc = "\n## Features")]
 #![cfg_attr(feature = "document-features", doc = document_features::document_features!())]
 #![cfg_attr(