diff --git a/_site/content/posts/configuration.md b/_site/content/posts/configuration.md index 183f0119..46e9e03a 100644 --- a/_site/content/posts/configuration.md +++ b/_site/content/posts/configuration.md @@ -51,3 +51,30 @@ wouldn't want to have laying about in the config files. For modules that require them, the name of the required environment variable(s) can be found in that module's "Required ENV Variables" section of the documentation. See OpsGenie for an example. + +## Grid Layout + +WTF uses the `Grid` layout system from [tview](https://github.com/rivo/tview/blob/master/grid.go) to position widgets +onscreen. It's not immediately obvious how this works, so here's an +explanation: + +Think of your terminal screen as a matrix of letter positions, say `100` chrs wide and `58` chrs tall. + +Columns breaks up the width of the screen into chunks, each chunk a specified number of characters wide. use + +`[10, 10, 10, 10, 10, 10, 10, 10, 10, 10]` + +Ten columns that are ten characters wide + +Rows break up the height of the screen into chunks, each chunk a specified number of characters tall. If we wanted to have five rows: + +`[10, 10, 10, 10, 18]` + +The co-ordinate system starts at top-left and defines how wide and tall a widget is. If we wanted to put a 2-col, 2-row widget in the bottom of the screen, we'd position it at: + +``` + top: 4 // top starts in the 4th row + left: 9 // left starts in the 9th column + height: 2 // span down rows 4 & 5 (18 characters in size, total) + width: 2 // span across cols 9 & 10 (20 characters in size, total) +``` diff --git a/docs/posts/configuration/index.html b/docs/posts/configuration/index.html index 02125fe1..8520f951 100644 --- a/docs/posts/configuration/index.html +++ b/docs/posts/configuration/index.html @@ -156,6 +156,32 @@ wouldn’t want to have laying about in the config files.
variable(s) can be found in that module’s “Required ENV Variables” section of the documentation. See OpsGenie for an example. +WTF uses the Grid
layout system from tview to position widgets
+onscreen. It’s not immediately obvious how this works, so here’s an
+explanation:
Think of your terminal screen as a matrix of letter positions, say 100
chrs wide and 58
chrs tall.
Columns breaks up the width of the screen into chunks, each chunk a specified number of characters wide. use
+ +[10, 10, 10, 10, 10, 10, 10, 10, 10, 10]
Ten columns that are ten characters wide
+ +Rows break up the height of the screen into chunks, each chunk a specified number of characters tall. If we wanted to have five rows:
+ +[10, 10, 10, 10, 18]
The co-ordinate system starts at top-left and defines how wide and tall a widget is. If we wanted to put a 2-col, 2-row widget in the bottom of the screen, we’d position it at:
+ + top: 4 // top starts in the 4th row
+ left: 9 // left starts in the 9th column
+ height: 2 // span down rows 4 & 5 (18 characters in size, total)
+ width: 2 // span across cols 9 & 10 (20 characters in size, total)
+
+