Documentation Pictures (#1324)

Adds pictures and videos to documentation for clarity

docs/docs/customwidgets.mdx

@@ -6,7 +6,12 @@ title: "Custom Widgets"
 
 # Custom Widgets
 
-Wave allows users to create their own widgets to uniquely customize their experience for what works for them. While we plan on greatly expanding on this in the future, it is already possible to make some widgets that you can access at the press of a button. All widgets can be created by modifying the `<WAVETERM_HOME>/config/widgets.json` file.
+Wave allows users to create their own widgets to uniquely customize their experience for what works for them. While we plan on greatly expanding on this in the future, it is already possible to make some widgets that you can access at the press of a button. All widgets can be created by modifying the `<WAVETERM_HOME>/config/widgets.json` file. By adding a widget to this file, it is possible to add widgets to the widget bar. By default, the widget bar looks like this:
+![The default widget bar](/img/all-widgets-default.webp)
+
+By adding additional widgets, it is possible to get a widget bar that looks like this:
+
+![A widget bar with custom widgets added](/img/all-widgets-extra.webp)
 
 ## The Structure of a Widget
 
@@ -29,7 +34,7 @@ All widgets share a similar structure that roughly looks like the example below:
 
 This consists of a couple different parts. First and foremost, each widget has a unique identifying name. The value associated with this name is the outer `WidgetConfigType`. It is outlined in red below:
 
-![An example of a widget with outer keys labeled as WidgetConfigType and inner keys labeled as MetaTSType. In the example, the outer keys are icon, label, color, and blockdef. The inner keys are view, controller, and cmd.](/img/widget-example.png)
+![An example of a widget with outer keys labeled as WidgetConfigType and inner keys labeled as MetaTSType. In the example, the outer keys are icon, label, color, and blockdef. The inner keys are view, controller, and cmd.](/img/widget-example.webp)
 
 This `WidgetConfigType` is shared between all types of widgets. That is to say, all widgets&mdash;regardless of type&mdash; will use the same keys for this. The accepted keys are:
 
@@ -126,6 +131,9 @@ Suppose I want a widget that will run speedtest-go when opened. Then, I can defi
 }
 ```
 
+This adds an icon to the widget bar that you can press to launch a terminal running the `speedtest-go --unix` command.
+![The example speedtest widget](/img/widget-example-speed.webp)
+
 Using `"cmd"` for the `"controller"` is the simplest way to accomplish this. `"cmd:clearonstart"` isn't necessary, but it makes it so every time the command is run (which can be done by right clicking the header and selecting `Force Controller Restart`), the previous contents are cleared out.
 
 Now suppose I wanted to run a TUI app, for instance, `dua`. Well, it turns out that you can more or less do the same thing:
@@ -146,6 +154,9 @@ Now suppose I wanted to run a TUI app, for instance, `dua`. Well, it turns out t
     <... other widgets go here ...>
 ```
 
+This adds an icon to the widget bar that you can press to launch a terminal running the `dua` command.
+![The example speedtest widget](/img/widget-example-dua.webp)
+
 Because this is a TUI app that does not return anything when closed, the `"cmd:clearonstart"` option doesn't change the behavior, so it has been excluded.
 
 # Web Widgets
@@ -197,6 +208,9 @@ Say you want a widget that automatically starts at YouTube and will use YouTube
     <... other widgets go here ...>
 ```
 
+This adds an icon to the widget bar that you can press to launch a web widget on the youtube homepage.
+![The example speedtest widget](/img/widget-example-youtube.webp)
+
 Alternatively, say you want a web widget that opens to github as if it were a bookmark, but will use google as its home page after that. This can easily be done with:
 
 ```json
@@ -215,15 +229,20 @@ Alternatively, say you want a web widget that opens to github as if it were a bo
     <... other widgets go here ...>
 ```
 
+This adds an icon to the widget bar that you can press to launch a web widget on the github homepage.
+![The example speedtest widget](/img/widget-example-github.webp)
+
 # Sysinfo Widgets
 
 The Sysinfo Widget is intentionally kept to a very small subset of possible values that we will expand over time. But it is still possible to configure your own version of it&mdash;for instance, if you want to load a different plot by default. The general form of this widget is:
 
 ```json
+{
     <... other widgets go here ...>,
-    "youtube" : {
-        "icon": "brands@youtube",
-        "label": "youtube",
+    "<widget name>": {
+        "icon": "<font awesome icon name>",
+        "label": "<the text label of the widget>",
+        "color": "<the color of the label>",
         "blockdef": {
             "meta": {
                 "view": "sysinfo",
@@ -233,6 +252,7 @@ The Sysinfo Widget is intentionally kept to a very small subset of possible valu
         }
     },
     <... other widgets go here ...>
+}
 ```
 
 The `WidgetConfigType` takes the usual options common to all widgets. The `MetaTSType` can include the keys listed below:
@@ -262,7 +282,8 @@ Suppose you have a build process that lasts 3 minutes and you'd like to be able
     <... other widgets go here ...>
 ```
 
-This will load show both the CPU and Memory plots by default while showing 180 seconds worth of data.
+This adds an icon to the widget bar that you can press to launch the CPU and Memory plots by default with 180 seconds of data.
+![The example speedtest widget](/img/widget-example-3mininfo.webp)
 
 Now, suppose you are fine with the default 100 points (and 100 seconds) but would like to show all of the CPU data when launched. In that case, you can write:
 
@@ -280,3 +301,7 @@ Now, suppose you are fine with the default 100 points (and 100 seconds) but woul
     },
     <... other widgets go here ...>
 ```
+
+This adds an icon to the widget bar that you can press to launch All CPU plots by default.
+
+![The example speedtest widget](/img/widget-example-all-cpu.webp)

docs/docs/layout.mdx

@@ -48,7 +48,9 @@ You can move blocks by clicking on the block header and dragging the block aroun
 
 There are 7 different drop targets for any given block. A block is divided into quadrants along its diagonals. If the block is tiling as a row (left-to-right), dropping a block into the left or right quadrant will place the dropped block in the same level as the targeted block. This can be considered dropping the block inline. If you drop the block out of line (in quadrants corresponding to opposite tiling direction), the block will either be placed one level above or one level below the targeted block. Dropping the block towards the outside will place it in the same level as the target block's parent, while dropping it towards the center of the block will create a new level, where both the target block and the dropped block will be moved. The middle fifth of the block is reserved for the swap action. Dropping a block here will cause the target block and the dropped block to swap positions in the layout.
 
-![screenshot showing a block being dragged over another block, with the placeholder depicting a swap movement](./img/drag-swap.png)
+<video width="100%" height="100%" playsinline autoplay muted controls>
+  <source src="/img/drag-move-24fps-crf43.mp4" type="video/mp4" />
+</video>
 
 #### Possible block movements
 
@@ -56,6 +58,7 @@ There are 7 different drop targets for any given block. A block is divided into
 All block movements except for Swap will cause the rest of the layout to shift to accommodate the block's new displacement.
 :::
 
+![screenshot showing a block being dragged over another block, with the placeholder depicting a swap movement](./img/drag-swap.png)
 ![annotated example showing the drop targets within a block](./img/block-drag-example.jpg)
 
 1. Inline before: Drops the block under the same node as the target block, placing it before the target in the same tiling direction
@@ -68,7 +71,12 @@ All block movements except for Swap will cause the rest of the layout to shift t
 
 ### Resize a block
 
-![screenshot showing the line that appears when the cursor hovers over the margin of a block, indicating which blocks will be resized by dragging the margin](./img/node-resize.png)
+<video width="100%" height="100%" playsinline autoplay muted controls>
+  <source src="/img/resize-24fps-crf43.mp4" type="video/mp4" />
+</video>
+
+![screenshot showing the line that appears when the cursor hovers over the margin of a block, indicating which blocks
+will be resized by dragging the margin](./img/node-resize.png)
 
 You do not directly resize a block. Rather, you resize the nodes containing the blocks. If you hover your mouse over the margin of a block, you will see the cursor change to <i className="fa-sharp fa-arrows-left-right"/> or <i className="fa-sharp fa-arrows-up-down"/> to indicate the direction the node can be resized. You will also see a line appear after 500ms to show you how many blocks will be resized by moving that margin. Clicking and dragging on this margin will cause the block(s) to get resized.
 

pkg/wconfig/defaultconfig/connections.json

@@ -0,0 +1,3 @@
+{
+    "askbeforewshinstall": true
+}