Add documentation for new workspace and graphics properties

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-	"prettier.enable": false
+	"prettier.enable": false,
+	"markdown.validate.enabled": false
 }

docs/concepts-and-terminology.md

@@ -27,6 +27,10 @@ Graphics are defined in your bundle's `package.json` file, in the `nodecg.graphi
 - `singleInstance`, an optional property, that only allows your graphic to be open in one place at a time.
   - This is useful in scenarios where your graphic has fragile or highly stateful logic.
   - Ideally, you'd never need to use `singleInstance`. However, it is sometimes hard to avoid, and can be the fastest route to shipping a complex graphic.
+- `name`, optional, a custom display name.
+- `description`, optional, text that displays below the graphic
+- `group`, optional, what sub-group the graphic should be in. (Graphics are already grouped by bundle).
+- `order`, optional, a number which determines where the graphic should be in the list
 
 ### Related Docs {#graphics-manifest}
 
@@ -51,6 +55,7 @@ The dashboard is where all your controls for your graphics end up. Each panel is
   - Each `fullbleed` panel gets its own dedicated workspace.
 - `dialog`, an optional property, that will turn the panel into a dialog that other panels are able to open.
 - `dialogButtons`, an optional property, that will show buttons for `confirm`, `dismiss`, or both on the dialog.
+- `workspaceOrder`, an optional property, that sets the order of the workspace as it appears in the tab list.
 
 ### Related Docs {#dashboard-manifest}
 

docs/manifest.md

@@ -118,11 +118,70 @@ less boilerplate.
 
 This field is only required if your bundle has dashboard panels.
 
+### Config {#dashboard-panel-config}
+
+| Name           | Type    | Attributes | Default | Description                                                                                                                                             |
+| -------------- | ------- | ---------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name           | string  |            |         | Internal name of the dashboard panel.                                                                                                                   |
+| title          | string  |            |         | Title of the dashboard panel as it appears in the NodeCG workspace.                                                                                     |
+| file           | string  |            |         | The location of the dashboard panel relative to "/dashboard".                                                                                           |
+| width          | number  | optional   | 2       | The width of the panel on the dashboard. Valid values are 1-8.                                                                                          |
+| headerColor    | string  | optional   |         | A hexadecimal color value that will change the color of the panel's header.                                                                             |
+| workspace      | string  | optional   |         | The name of the workspace the panel should be placed in. (Workspaces are shared between bundles).                                                       |
+| workspaceOrder | number  | optional   |         | A number which sets the order of the workspace as it appears in the tab list.                                                                           |
+| fullbleed      | boolean | optional   | false   | Whether or not the panel should be fullbleed in its own workspace.                                                                                      |
+| dialog         | boolean | optional   | false   | Whether or not the panel is a dialog.                                                                                                                   |
+| dialogButtons  | array   | optional   |         | An array of buttons to show on the dialog. Each button is an object with a `name` and `type` property. The `type` can be either `confirm` or `dismiss`. |
+
+### Example {#dashboard-panels-example}
+
+```json
+"dashboardPanels": [
+    {
+        "name": "sample-panel",
+        "title": "Sample Panel",
+        "file": "sample-panel.html",
+        "width": 2,
+        "headerColor": "#2d4e8a",
+        "workspace": "My Workspace",
+        "workspaceOrder": 1
+    },
+]
+```
+
 ## nodecg.graphics {#graphics}
 
 An array of objects, each object describing a graphic.
-Each graphic must have a `file`, `width`, and `height`. `file` is relative to the bundle's `graphics` folder.
-If you wish to enforce that your graphic only ever be open in one place at a time, set `singleInstance` to `true`
-(defaults to `false`).
 
 This field is only required if your bundle has graphics.
+
+### Config {#graphics-config}
+
+| Name           | Type    | Attributes | Default | Description                                                                        |
+| -------------- | ------- | ---------- | ------- | ---------------------------------------------------------------------------------- |
+| file           | string  |            |         | The location of the graphic relative to "/graphics".                               |
+| width          | number  |            |         | The designed width of the graphic.                                                 |
+| height         | number  |            |         | The designed height of the graphic.                                                |
+| name           | string  | optional   |         | A custom display name for the graphic.                                             |
+| description    | string  | optional   |         | Text that displays below the graphic in the dashboard.                             |
+| group          | string  | optional   |         | What sub-group the graphic should be in. (Graphics are already grouped by bundle). |
+| order          | number  | optional   |         | A number which determines where the graphic should be in the list.                 |
+| singleInstance | boolean | optional   | false   | Whether or not the graphic can be opened in multiple places at once.               |
+
+### Example {#graphics-example}
+
+```json
+"graphics": [
+    {
+        "file": "main.html",
+        "width": 1920,
+        "height": 1080,
+        "name": "Main Graphic",
+        "description": "This is the main graphic.",
+        "group": "Overlays",
+        "order": 1,
+    }
+]
+```
+
+![Graphics page example](/img/graphics-page.png)