minor: dialog documentation progress

src/pages/_data/navigation/mainNav.json5

@@ -50,7 +50,7 @@
             {
               "title": "Spring",
               "url": "/getting-started/frameworks/spring/"
-            },
+            }
           ]
         },
         {
@@ -159,13 +159,41 @@
               "url": "/concepts/views/#important-classes"
             },
             {
-              "title": "Rendering a Skill View",
+              "title": "Root Skill View",
+              "url": "/concepts/views/#root-skill-view"
+            },
+            {
+              "title": "Skill View Lifecycle",
+              "url": "/concepts/views/#skill-view-lifecycle"
+            },
+            {
+              "title": "Rendering Skill Views",
               "url": "/concepts/views/#rendering-a-skill-view"
             },
+            {
+              "title": " - Root Skill View",
+              "url": "/concepts/views/#root-skill-view"
+            },
+            {
+              "title": " - Arbitrary Skill Views",
+              "url": "/concepts/views/#root-skill-view"
+            },
+            {
+              "title": " - Redirecting Between Skill Views",
+              "url": "/concepts/views/#redirecting-between-skill-views"
+            },
             {
               "title": "Rendering Cards",
               "url": "/concepts/views/#rendering-cards"
             },
+            {
+              "title": " - Asserting by Id",
+              "url": "/concepts/views/#asserting-card-by-id"
+            },
+            {
+              "title": "Rendering a Dialog",
+              "url": "/concepts/views/#rendering-a-dialog"
+            },
             {
               "title": "View Controller Plugins",
               "url": "/concepts/views/#view-controller-plugins"
@@ -207,6 +235,10 @@
             {
               "title": " - Request new example",
               "url": "/help/new-example"
+            },
+            {
+              "title": "In event contracts",
+              "url": "/concepts/permissions/#in-event-contracts"
             }
           ]
         },
@@ -234,9 +266,29 @@
               "title": "Timezones",
               "url": "/concepts/dates-times/#timezones"
             },
+            {
+              "title": " - Based on Location",
+              "url": "/concepts/dates-times/#based-on-location"
+            },
+            {
+              "title": " - Based on Person",
+              "url": "/concepts/dates-times/#based-on-person"
+            },
             {
               "title": "Rendering time until a date",
               "url": "/concepts/dates-times/#rendering-time-until-a-date"
+            },
+            {
+              "title": " - In the Backend",
+              "url": "/concepts/dates-times/#duration-util-in-the-backend"
+            },
+            {
+              "title": " - In Views",
+              "url": "/concepts/dates-times/#duration-util-in-views"
+            },
+            {
+              "title": " - In Messages",
+              "url": "/concepts/dates-times/#duration-util-in-messages"
             }
           ]
         },

src/pages/concepts/views.md

@@ -196,17 +196,24 @@ Coming soon...
 [Storybook](https://storybook.spruce.bot/?path=/story/components-tool-belt-tool-belt--tool-belt).
 </details>
 
+## Skill View Lifecycle
+
+<img src="../../assets/img/diagrams/skill_view_lifecycle.png">
+
 ## Root Skill View
 
 Coming soon...
 
-## Skill View Lifecycle
+## Rendering Skill Views
 
-<img src="../../assets/img/diagrams/skill_view_lifecycle.png">
+Skill Views are the equivalent of pages in a "standard" web application. They are accessible via the url in 2 ways.
+
+1. Subdomain: `https://{skillNamespace}.spruce.bot`
+2. Hash: `https://spruce.bot/#/views/{skillNamespace}.{viewId}`
 
-## Rendering a Skill View
+### Root Skill View
 
-Let's get started on rendering a `SkillView`. In this example I'll use the `RootSkillViewController`, but you can name your `SkillViewController` anything you want.
+Let's get started on rendering a `RootSkillView`.
 
 <details>
 <summary><strong>Test 1</strong>: Load Your (Root) Skill View</summary>
@@ -230,10 +237,23 @@ This part is pretty easy! Run this following command and follow the instructions
 ```shell
 spruce create.view
 ```
+
 </details>
 
+### Rendering A Different Skill View
+
+Coming soon...
+
+### Redirecting Between Skill Views
+
+Coming soon...
+
 ## Rendering Cards
 
+
+
+### Asserting Card by Id
+
 Now that you have your `RootSkillViewController`, you can start adding cards to it. Here is how you can test and implement some cards.
 
 <details>
@@ -256,6 +276,192 @@ protected static async rendersExpectedCard() {
 
 </details>
 
+<details>
+<summary><strong>Production 1</strong>: Render your card</summary>
+
+Coming soon...
+
+</details>
+
+## Rendering Dialogs
+
+Dialogs are cards rendered modally. You can render a basic `Card` `ViewModel` or you can render a `CardViewController` as a dialog.
+
+### Rendering a simple `ViewModel` based `Dialog` on load
+
+This is the simplest way to render a dialog. You can render a `Card` `ViewModel` by calling `this.renderInDialog(...)` from your `SkillViewController` or `ViewController`.
+
+<details>
+<summary><strong>Test 1</strong>: Assert dialog is rendered on load</summary>
+
+For this example, we'll keep the dialog simple and render a `Card` `ViewModel` in the `RootSkillViewController`'s `load()` `Lifecycle` method.
+```ts
+import {
+    vcAssert,
+    vcPluginAssert,
+} from '@sprucelabs/heartwood-view-controllers'
+
+...
+
+@test()
+protected static async rendersAlertOnLoad() {
+    const vc = this.views.Controller('eightbitstories.root', {})
+    await vcAssert.assertRendersDialog(vc, () => this.views.load(vc))
+}
+```
+
+</details>
+
+<details>
+<summary><strong>Production 1</strong>: Render a dialog on load</summary>
+
+```ts
+import { AbstractSkillViewController } from '@sprucelabs/heartwood-view-controllers'
+
+class RootSkillView extends AbstractSkillViewController {
+    public async load() {
+        this.renderInDialog({
+            header: {
+                title: 'Hello, World!',
+            },
+        })
+    }
+}
+```
+
+</details>
+
+
+
+### Rendering a `CardViewController` based `Dialog` on load
+
+Now lets make this dialog more powerful by rendering a `CardViewController` of our own!
+
+<details>
+<summary><strong>Test 1</strong>: Assert dialog is rendered on load</summary>
+
+This first test is very simple, just making sure a dialog is rendered.
+
+```ts
+import {
+    vcAssert,
+    vcPluginAssert,
+} from '@sprucelabs/heartwood-view-controllers'
+
+...
+
+@test()
+protected static async rendersAlertOnLoad() {
+    const vc = this.views.Controller('eightbitstories.root', {})
+    await vcAssert.assertRendersDialog(vc, () => this.views.load(vc))
+}
+```
+</details>
+
+<details>
+<summary><strong>Production 1</strong>: Render a simple dialog on load</summary>
+
+```ts
+import { AbstractSkillViewController } from '@sprucelabs/heartwood-view-controllers'
+
+class RootSkillView extends AbstractSkillViewController {
+    public async load() {
+        this.renderInDialog({})
+    }
+}
+```
+</details>
+
+<details>
+<summary><strong>Test 2</strong>: Assert dialog is a specific type</summary>
+
+```ts
+import {
+    vcAssert,
+    vcPluginAssert,
+} from '@sprucelabs/heartwood-view-controllers'
+
+...
+
+@test()
+protected static async rendersAlertOnLoad() {
+    const vc = this.views.Controller('eightbitstories.root', {})
+    const dlgVc = await vcAssert.assertRendersDialog(vc, () => this.views.load(vc))
+    vcAssert.assertRendersAsInstanceOf(dlgVc, MyCardViewController)
+}
+```
+You're going to get a failure here because `MyCardViewController` doesn't exist yet. Let's create it!
+
+</details>
+
+<details>
+<summary><strong>Production 2a</strong>: Create <em>MyCardViewController</em> to fail next assertion</summary>
+
+When you are creating your `View`, make sure to base it on a `Card`.
+
+```bash
+spruce create.view
+```
+
+Call it `My Card` (or whatever you want). 
+
+> **Note**: Don't add `ViewController` to the end of the name of `ViewControllers`. That'll be added for you.
+
+> **Note**: It is helpful to add the name of the `ViewModel` being rendered. Examples: If you render a `Card`, end your name in `Card`. If you render a `Form`, end your name in `Form`.
+
+> **Note**: Don't add `Dialog` to name of your `ViewController`. Because a `CardViewController` can be rendered in a dialog or in a `SkillView`, it is better to keep the name free from where it is rendered.
+
+</details>
+
+<details>
+<summary><strong>Production 2b</strong>: Make <em>MyCardViewController</em> render a <em>Card</em></summary>
+
+It is much better to use composition over inheritance. This is how you can make `MyCardViewController` render a `CardViewController`.
+
+```ts
+import { CardViewController, AbstractViewController, Card } from '@sprucelabs/heartwood-view-controllers'
+
+export default class MyCardViewController extends AbstractViewController<Card> {
+
+    public static id = 'my-card'
+
+    public constructor(options: ViewControllerOptions) {
+        super(options)
+        this.cardVc = this.Controller('card', {
+            header: {
+                title: 'Hello, World!',
+            },
+        })
+    }
+
+    public render(): CardViewController {
+        return this.cardVc.render()
+    }
+}
+
+```
+</details>
+
+<details>
+<summary><strong>Production 2c</strong>: Render <em>MyCardViewController</em> in the dialog</summary>
+
+```ts
+
+import { AbstractSkillViewController } from '@sprucelabs/heartwood-view-controllers'
+
+class RootSkillView extends AbstractSkillViewController {
+    public async load() {
+        const myCardVc = this.Controller('eightbitstories.my-card', {})
+        this.renderInDialog(myCardVc.render())
+    }
+}
+```
+</details>
+
+### Running code when a dialog is closed
+
+Coming soon...
+
 ## View Controller Plugins
 
 You can globally enhance View Controller functionality by using View Controller Plugins. Here are some plugins that are already available:

src/scss/site.scss

@@ -67,6 +67,11 @@ h1 {
   padding-bottom: 20px;
 }
 
+h3 {
+  border-bottom: 1px solid $cl-gray;
+  padding-bottom: 5px;
+}
+
 .main-area > h2 {
   background: rgba($cl-gray, 30%); 
   padding: 10px;