Completed setup docs and code highlighting

docs/getting-started/1-github-app.md

@@ -2,30 +2,38 @@ In order to be able to listen and respond to pull request events, we need to cre
 
 ## 1. Create GitHub App
 
+![Setup GitHub App](/assets/images/screenshots/getting-started/github-app.png)
+{: style="margin: 30px 0 60px 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;"}
+
 1. Navigate to https://github.com and sign in.
 2. Click on your profile photo in the top right and choose **Your Organizations**.
 3. Click on the organization you want to add **prdeploy** to.
 4. Select the **Settings** tab, expand **Developer settings** on the left nav and choose **GitHub Apps**.
 5. Click **New GitHub App** in the top right.
 6. Fill in at least the following information:
 
-| Field           | Value                                                                       |
-| --------------- | --------------------------------------------------------------------------- |
-| GitHub App Name | prdeploy                                                                    |
-| Description     | Allows the entire build-deploy lifecycle to happen within a feature branch. |
-| Homepage URL    | https://prdeploy.myorg.com                                                  |
-| Webhook URL     | https://prdeploy.myorg.com/webhooks                                         |
-| Secret          | _Any secure set of characters (see below)._                                 |
+    | Field           | Value                                                                       |
+    | --------------- | --------------------------------------------------------------------------- |
+    | GitHub App Name | prdeploy                                                                    |
+    | Description     | Allows the entire build-deploy lifecycle to happen within a feature branch. |
+    | Homepage URL    | https://prdeploy.myorg.com                                                  |
+    | Webhook URL     | https://prdeploy.myorg.com/webhooks                                         |
+    | Secret          | _Any secure set of characters (see below)._                                 |
 
-Generating a secret with Node:
+    Generating a secret with Node:
 
-```bash
-node -e "console.log(require('crypto').randomBytes(64).toString('base64'));"
-```
+    ```bash
+    node -e "console.log(require('crypto').randomBytes(64).toString('base64'));"
+    ```
+
+    Make sure to copy the **Secret** set above into your notes for use with AWS Parameter Store.
+
+## 1. Configure permissions and events
 
-Make sure to copy the **Secret** set above into your notes for use with AWS Parameter Store.
+1. Set each of the **Permissions** as follows:
 
-7. Set each of the **Permissions** as follows:
+![Setup GitHub App Permissions](/assets/images/screenshots/getting-started/github-app-permissions.png)
+{: style="margin: 30px 0 60px 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;"}
 
 **Repository Permissions**
 
@@ -39,7 +47,7 @@ Make sure to copy the **Secret** set above into your notes for use with AWS Para
 | Metadata       | Read-only      |
 | Pull requests  | Read and write |
 
-**Organization Permissions**
+  **Organization Permissions**
 
 | Scope   | Permission |
 | ------- | ---------- |
@@ -51,23 +59,23 @@ Make sure to copy the **Secret** set above into your notes for use with AWS Para
 | --------------- | ---------- |
 | Email addresses | Read-only  |
 
-8. Subscribe to the following events:
+2. Subscribe to the following events:
 
 ```
 Issue comment
 Pull request
 Workflow run
 ```
-9. **Where can this GitHub App be installed?** should be set to **Only on this account**.
-10. Click **Create GitHub App**.
+3. **Where can this GitHub App be installed?** should be set to **Only on this account**.
+4. Click **Create GitHub App**.
 
 ## 2. Display information
 
 1. Scroll to the bottom of the GitHub App **About** page.
 2. Under **Display information** click on **Upload a logo...**.
 3. Download and select the file from `https://github.com/greggbjensen/prdeploy/blob/main/docs/assets/images/logo-128x128.png`.
 
-## 3. Credentials and Private key
+## 3. Credentials and private key
 
 1. From the top of the page add the following to your notes for use with AWS Parameter Store:
     * App ID

docs/getting-started/2-github-oauth-app.md

@@ -2,6 +2,9 @@ For authorization of the portal to view deployments, we need to create an GitHub
 
 ## 1. Create GitHub OAuth App
 
+![Setup GitHub OAuth App](/assets/images/screenshots/getting-started/github-oauth-app.png)
+{: style="margin: 30px 0 60px 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;"}
+
 1. Still on your organization page, expand **Developer settings** on the left nav and choose **OAuth Apps**.
 2. Click **New Org OAuth App**.
 3. Enter the following information:

docs/getting-started/3-slack-app.md

@@ -5,7 +5,10 @@ The prdeploy app is able to post deployment and release notifications to Slack a
 
 ## 1. Create Slack App
 
-1. Navigate to https://api.slack.com/apps.
+![Setup Slack App](/assets/images/screenshots/getting-started/slack-app.png)
+{: style="margin: 30px 0 60px 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;"}
+
+1. Navigate to [https://api.slack.com/apps](https://api.slack.com/apps).
 2. Click on **Create New App** and choose **From scratch**.
 3. In **App Name** type `prdeploy`.
 4. Under **Pick a workspace to develop your app in:** select your Slack organization.
@@ -47,6 +50,9 @@ users:read.email
 
 ## 4. Webhook configuration
 
+![Setup Slack App Webhooks](/assets/images/screenshots/getting-started/slack-app-webhooks.png)
+{: style="margin: 30px 0 50px 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;"}
+
 1. Click on **Incoming Webhooks** on the left nav.
 2. To the right of **Activate Incoming Webhooks** toggle `Off` to `On`.
 3. At the bottom of the page, click on **Add New Webhook to Workspace**.

docs/getting-started/4-jira-integration.md

@@ -1,6 +1,10 @@
 When a pull request is create the prdeploy app will check the branch name for any issue IDs in JIRA and link them to your description.
 
 ## 1. Create JIRA API token
+
+![Setup JiRA API Token](/assets/images/screenshots/getting-started/jira-token.png)
+{: style="margin: 30px 0 60px 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;"}
+
 1. Navigate to your JIRA instance https://myorg.atlassian.net/jira.
 2. Click on your user photo in the top right and choose **Manage Account**.
 3. Click on the **Security** tab.

docs/getting-started/5-aws-configuration.md

@@ -2,7 +2,12 @@ The **prdeploy** app loads external secrets, saves settings, and tracks deployme
 
 ## 1. AWS role and permissions
 
-1. Create a new role of `prdeloy-backend` with the following assume policy.
+![Setup AWS Role](/assets/images/screenshots/getting-started/aws-role.png)
+{: style="margin: 30px 0 60px 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;"}
+
+1. Navigate to [https://aws.amazon.com](https://aws.amazon.com).
+2. Go to **IAM**, then **Roles**.
+3. Create a new role of `prdeloy-backend` with the following assume policy.
 
 ```json
 {
@@ -24,7 +29,11 @@ The **prdeploy** app loads external secrets, saves settings, and tracks deployme
 }
 ```
 
-2. Create the following IAM policy as `prdeploy-backend` and associate it to the role:
+4. Go to **Policies**.
+5. Create the following IAM policy as `prdeploy-backend` and associate it to the role:
+
+![Setup AWS Policy](/assets/images/screenshots/getting-started/aws-policy.png)
+{: style="margin: 30px 0 60px 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;"}
 
 ```json
 {
@@ -47,7 +56,10 @@ The **prdeploy** app loads external secrets, saves settings, and tracks deployme
 
 ## 2. Parameter store configuration.
 
-1. Navigate to...
+![Setup AWS Parameter Store](/assets/images/screenshots/getting-started/aws-parameter-store.png)
+{: style="margin: 30px 0 60px 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;"}
+
+1. Navigate to **AWS Systems Manager**, then **Parameter Store**.
 2. Add the following entries as `SecureString` to AWS Parameter Store:
 
 | Name                                 | Value                                                                   |

docs/getting-started/6-prdeploy-portal.md

@@ -1,5 +1,8 @@
 The web portal for **prdeploy** allows you to view and manage settings and deployments. These are the installation instructions for Kubernetes.
 
+![prdeploy settings](/assets/images/screenshots/prdeploy-portal-settings.png)
+{: style="margin: 30px 0 40px 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;"}
+
 ## 1. Helm chart install
 
 1. Install the prerequists in Kubernetes:
@@ -37,6 +40,9 @@ helm upgrade prdeploy oci://registry-1.docker.io/greggbjensen/prdeploy \
 
 ## 2. Repositories
 
+![prdeploy repositories](/assets/images/screenshots/prdeploy-portal-repositories.png)
+{: style="margin: 30px 0 40px 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;"}
+
 _NOTE: For each of the following sections, you can enter the settings either in **Owner Defaults** for all repositories or **Repository Override** for a specific repository.  Any repository can override the **Owner Defaults**._
 
 1. Log into your **prdeploy.myorg.com** site with your GitHub account.
@@ -53,6 +59,9 @@ _NOTE: You must click **Save** in the top right before leaving the **Settings**
 
 ## 3. Environments
 
+![prdeploy settings Environments](/assets/images/screenshots/prdeploy-portal-settings-environments.png)
+{: style="margin: 30px 0 40px 0;"}
+
 1. In the portal, click **Settings** on the left nav.
 2. Go to the **Repository Override** tab and click **Add Environent**.
 3. Type in the **Name** of the environment and click **Add environment**
@@ -66,6 +75,9 @@ _NOTE: You must click **Save** in the top right before leaving the **Settings**
 
 ## 4. Services
 
+![prdeploy settings Services](/assets/images/screenshots/prdeploy-portal-settings-services.png)
+{: style="margin: 30px 0 40px 0;"}
+
 1. Go to the **Services** link on the left panel.
 2. Click on **Add Service**.
 3. Type the **Service Name** of what you want deployed and click **Add Service**.
@@ -75,6 +87,9 @@ _NOTE: You must click **Save** in the top right before leaving the **Settings**
 
 ## 5. Slack
 
+![prdeploy settings Slack](/assets/images/screenshots/prdeploy-portal-settings-slack.png)
+{: style="margin: 30px 0 60px 0;"}
+
 1. Check the **Notifications enabled** box.
 2. Fill in the fields as follows:
 
@@ -89,6 +104,9 @@ _NOTE: As necessary, you can fill in email aliases if **prdeploy** finds the inc
 
 ## 6. JIRA
 
+![prdeploy settings JIRA](/assets/images/screenshots/prdeploy-portal-settings-jira.png)
+{: style="margin: 30px 0 40px 0;"}
+
 1. Check the **Add issues enabled** box.
 2. Fill in the fields as follows:
 
@@ -100,6 +118,9 @@ _NOTE: As necessary, you can fill in email aliases if **prdeploy** finds the inc
 
 ## 7. Deployment
 
+![prdeploy settings Deployment](/assets/images/screenshots/prdeploy-portal-settings-deployment.png)
+{: style="margin: 30px 0 40px 0;"}
+
 1. The defaults here will generall be correct, verify the **Release Environment** and the **Default Environment**.
 2. Make sure the **prdeploy portal URL** reflects the current site (https://prdeploy.myorg.com).
     1. This is used in pull request comment links.

docs/getting-started/7-github-actions.md

@@ -6,6 +6,9 @@ The deployment process keeps all environments in sync with production except wha
 
 ## Combined Deploy Workflow
 
+![GitHub Actions Workflows](/assets/images/screenshots/getting-started/github-actions-workflows.png)
+{: style="margin: 30px 0 30px 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;"}
+
 In order for a repository to handle deployments, it must contain and workflow of `combined-deploy.yaml` with the following inputs:
 
 ```yaml
@@ -80,6 +83,9 @@ Actions that apply and retrieve the information needed for builds and deployment
 3. In order for a completed or failed deploy status message to show the version, you must provide a `build-details` artifact to your builds that includes a `build-details.json` file with at least the following:
    1. The [build-details](/.github/actions/build-details/README.md#build-details-action) action can provide this.
 
+    ![GitHub Actions Build Details](/assets/images/screenshots/getting-started/github-actions-build-details.png)
+    {: style="margin: 30px 0 30px 0;"}
+
 ```json
 {
   "version": "2023.11.30-r7040754105"

docs/getting-started/overview.md

@@ -1,5 +1,9 @@
 Here is how to get started by configuring your GitHub organization with a GitHub App and a GitHub OAuth app. For notifications we will also setup a Slack App.
 
+![Setup GitHub App](/assets/images/screenshots/getting-started/github-app.png)
+{: style="margin: 30px 0 60px 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;"}
+
+
 ## Setup steps
 
 1. [GitHub App](./1-github-app.md) - Webhooks for responding to GitHub events.

docs/index.md

@@ -11,31 +11,42 @@ Release multiple times per day with less issues.
 
 The **prdeploy** application supplies the following features:
 
-1. [Comment commands](comment-commands.md) to manage your deployments without leaving your pull request.
+### Commend commands
 
-    ![Deploy comment command](./assets/images/screenshots/prcomment-deploy.png)
-    {: style="margin: 30px 0;"}
+Post [comment commands](comment-commands.md) to manage your deployments without leaving your pull request.
 
-2. [prdeploy portal](prdeploy-portal.md) dashboard to overview releases and deployment queues and act on them.
+![Deploy comment command](./assets/images/screenshots/prcomment-deploy.png)
+{: style="margin: 30px 0;"}
 
-    ![prdeploy deployments](./assets/images/screenshots/prdeploy-portal.png)
-    {: style="margin: 30px 0 60px 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;"}
 
+### prdeploy portal
 
-3. [Slack notifications](slack-notifications.md) for posting events to keep your process moving.
+The [prdeploy portal](prdeploy-portal.md) dashboard to overview releases and deployment queues and act on them.
 
-    ![Slack deploy notification](./assets/images/screenshots/slack-deploy-notification.png)
-    {: style="margin: 30px 0;"}
+![prdeploy deployments](./assets/images/screenshots/prdeploy-portal.png)
+{: style="margin: 30px 0 60px 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;"}
 
-4. [JIRA links](jira-links.md) update your pull request with a link to each issue in the branch name.
 
-    ![JIRA issue link](./assets/images/screenshots/jira-links.png)
-    {: style="margin: 30px 0 0 0;"}
+### Slack notifications
 
-5. [Deployment queues](deployment-queues.md) organize environment use by putting a pull request in waiting.
+Automated [Slack notifications](slack-notifications.md) for posting events to keep your process moving.
 
-    ![Deployment queue comment](./assets/images/screenshots/deployment-queues.png)
-    {: style="margin: 30px 0 0 0;"}
+![Slack deploy notification](./assets/images/screenshots/slack-deploy-notification.png)
+{: style="margin: 30px 0;"}
+
+### JIRA links
+
+Associate [JIRA links](jira-links.md) update your pull request with a link to each issue in the branch name.
+
+![JIRA issue link](./assets/images/screenshots/jira-links.png)
+{: style="margin: 30px 0 0 0;"}
+
+### Deployment queues
+
+The [deployment queues](deployment-queues.md) organize environment use by putting a pull request in waiting.
+
+![Deployment queue comment](./assets/images/screenshots/deployment-queues.png)
+{: style="margin: 30px 0 0 0;"}
 
 ## Getting started
 

mkdocs.yml

@@ -10,6 +10,13 @@ markdown_extensions:
   - toc:
       permalink: true
   - attr_list
+  - pymdownx.highlight:
+      anchor_linenums: true
+      line_spans: __span
+      pygments_lang_class: true
+  - pymdownx.inlinehilite
+  - pymdownx.snippets
+  - pymdownx.superfences
 nav:
   - Introduction: 'index.md'
   - 'Getting started':