add images and relevant links throughout docs, add Disconnect Asana doc

docs/_docs/automated-tasks.md

@@ -132,6 +132,12 @@ Here are two use-case examples to demonstrate:
       ```
       {: .ws-normal}
 
+### Dynamic Pin to Post
+
+To automatically pin the created Asana task to the WordPress post that triggered the Automation, focus the *Pin to Post* input field and select the revealed option. The input field must be blank for the available dynamic options to be revealed.
+
+[![Automation action with dynamic merge fields]({{ site.baseurl }}/assets/images/automation-action-dynamic-pin.png)]({{ site.baseurl }}/assets/images/automation-action-dynamic-pin.png){:target="_blank"}
+
 ## Review Automation Statistics
 
 In the main Automations screen, all Automations are listed with useful information:

docs/_docs/disconnect-asana.md

@@ -0,0 +1,22 @@
+---
+title: Disconnect Asana
+nav_order: 7
+---
+
+# Disconnecting Your Asana Account
+
+To disconnect your Asana account from Completionist, click the red _Disconnect_ button in the last section of Completionist's _Settings_ screen.
+
+This will delete the encrypted Personal Access Token and user GID associated with your Asana account, making it impossible for Completionist to take actions in Asana on your behalf.
+
+After disconnecting your Asana account:
+
+1. [Shortcodes]({{ site.baseurl }}/shortcodes/) where you are the authentication user will no longer render
+1. [Automation Actions]({{ site.baseurl }}/automated-tasks/) where you are the task creator will no longer work
+1. You will not be able to access Completionist's settings
+1. You will not be able to see the [Dashboard Widget]({{ site.baseurl }}/dashboard-widget/)'s content
+1. You will not be able to see or manage [Pinned Tasks]({{ site.baseurl }}/pinned-tasks/) on WordPress posts
+
+**Be mindful of these consequences before disconnecting your Asana account!** You can always [reconnect your Asana account]({{ site.baseurl }}/getting-started/#connect-your-asana-account) again in case you need access to Completionist's settings and features again.
+
+[![Settings section to disconnect your Asana account from the Completionist WordPress plugin]({{ site.baseurl }}/assets/images/settings-disconnect-asana.png)]({{ site.baseurl }}/assets/images/settings-disconnect-asana.png){:target="_blank"}

docs/_docs/getting-started.md

@@ -31,12 +31,11 @@ Completionist may be installed by extracting the zip file contents into your `wp
 
 Completionist is fully compatible with WordPress multisite networks. Feel free to activate the plugin at the network level or per blog/subsite. If you decide to uninstall Completionist, all plugin data will be properly removed across your network.
 
-
 ## Connect Your Asana Account
 
 <div class="banner banner-danger">
   <h3>Asana Account Required</h3>
-  <p>Completionist depends on an Asana account connection to function. <a href="https://asana.com/create-account" target="_blank">Create an Asana account</a> for free before continuing this setup guide.</p>
+  <p>Completionist depends on an Asana account connection to function.<br /><a href="https://asana.com/create-account" target="_blank"><strong>Create an Asana account for free</strong></a> before continuing this setup guide.</p>
 </div>
 
 1. Navigate to the Completionist settings screen by clicking *Completionist* toward the bottom of your WordPress admin menu.
@@ -45,6 +44,10 @@ Completionist is fully compatible with WordPress multisite networks. Feel free t
 4. Back in Completionist, paste your Personal Access Token into the Asana Connect form, agree to let Completionist perform actions in your Asana account on your behalf, and click *Authorize*.
 5. Once successfully connected, you'll now be able to access Completionist's settings.
 
+[![Connect your Asana account to the Completionist WordPress plugin by entering your account's Personal Access Token]({{ site.baseurl }}/assets/images/settings-connect-asana.png)]({{ site.baseurl }}/assets/images/settings-connect-asana.png){:target="_blank"}
+
+[![Completionist displays a green checkmark and helpful links once your Asana account is successfully connected]({{ site.baseurl }}/assets/images/settings-connection-success-helpful-links.png)]({{ site.baseurl }}/assets/images/settings-connection-success-helpful-links.png){:target="_blank"}
+
 ## Set a Site Tag
 
 The final step to get started using Completionist's admin features is to set a *"site tag"*. A site tag is required to use Completionist.
@@ -54,6 +57,8 @@ The final step to get started using Completionist's admin features is to set a *
 3. Once the tag options for your chosen workspace have loaded, choose the tag that Completionist will use to associate Asana tasks to your WordPress site.
 4. Click *Save* to confirm your chosen workspace and site tag.
 
+[![Settings section to set the Asana workspace and tag, plus see all collaborators on the WordPress site and if they've connected their Asana account]({{ site.baseurl }}/assets/images/settings-workspace-tag-collaborators.png)]({{ site.baseurl }}/assets/images/settings-workspace-tag-collaborators.png){:target="_blank"}
+
 ### What does this do?
 
 Pulling Asana tasks into WordPress by a specific tag has many benefits, such as:
@@ -65,14 +70,15 @@ Pulling Asana tasks into WordPress by a specific tag has many benefits, such as:
 
 ## Set a Frontend Authentication User
 
-
-If you'd like to use Completionist's shortcodes on your WordPress website, you should specify a default "frontend authentication user".
+If you'd like to [use Completionist's shortcodes]({{ site.baseurl }}/shortcodes/) on your WordPress website, you should specify a default "frontend authentication user".
 
 1. From the dropdown options, select a WordPress user. Only users that have connected their Asana account with Completionist will be listed.
 2. Click *Save* to confirm your chosen user.
 3. In a post or page on your WordPress website (can be any status, such as *Draft*), enter [a Completionist shortcode]({{ site.baseurl }}/shortcodes/) in the content area. Save the post.
 4. Preview the post or page to confirm that the shortcode works as expected.
 
+[![Settings section to choose which Asana user will authenticate frontend requests]({{ site.baseurl }}/assets/images/settings-frontend-authentication-user.png)]({{ site.baseurl }}/assets/images/settings-frontend-authentication-user.png){:target="_blank"}
+
 ### Who should I choose?
 
 The authentication user determines which tasks will be displayed and is based on their visibility permissions within Asana.

docs/_docs/shortcodes/caching.md

@@ -32,10 +32,12 @@ But what if you want your Asana changes to be reflected more often than just eve
 
 ## Changing the Cache TTL
 
-**Frontend requests are cached by default for 15 minutes (900 seconds).** This immensely improves website performance by reducing how often data is requested from Asana.
+In Completionist's *Settings* screen, you can manage the Asana data cache records. **Frontend requests are cached by default for 15 minutes (900 seconds).** This immensely improves website performance by reducing how often data is requested from Asana.
 
 If you find that Asana data is not updated often enough, you can decrease the *Cache Duration (TTL)* setting in Completionist's settings. For example, to reflect new changes from Asana on your WordPress website every **5 minutes**, set the *Cache Duration (TTL)* setting to **300 seconds**. Note that you must be an administrator (have the `manage_options` capability) in WordPress to update this setting.
 
+[![Settings section to manage the Asana data cache records]({{ site.baseurl }}/assets/images/settings-asana-data-cache.png)]({{ site.baseurl }}/assets/images/settings-asana-data-cache.png){:target="_blank"}
+
 ### Overriding in PHP
 
 For a custom or dynamic solution, the following filter hook is also available in PHP.

docs/_docs/shortcodes/customizations.md

@@ -147,3 +147,7 @@ A common request from users of Completionist is to add support for Asana Busines
 You can access a free add-on plugin on GitHub to get started at [https://github.com/PurpleTurtleCreative/completionist-custom-fields](https://github.com/PurpleTurtleCreative/completionist-custom-fields)
 
 Downloading this plugin from GitHub and installing it alongside Completionist on your WordPress website will cause custom fields to be displayed on tasks in [Project Embeds]({{ site.baseurl }}/shortcodes/).
+
+[![Tasks with inline custom fields and full custom fields table]({{ site.baseurl }}/assets/images/completionist-custom-fields.png)]({{ site.baseurl }}/assets/images/completionist-custom-fields.png){:target="_blank"}
+
+This simple add-on plugin currently adds a *Custom Fields* section to the task's expanded details. By editing the JavaScript file, you can also [specify key custom fields](https://github.com/PurpleTurtleCreative/completionist-custom-fields/blob/main/script.js#L38-L42) to feature in the task's main row.

docs/_sass/custom/custom.scss

@@ -60,7 +60,6 @@
   }
 }
 
-
 //
 // Style Overrides
 //
@@ -199,6 +198,27 @@ h2:not(#table-of-contents) {
   white-space: normal;
 }
 
+//
+// Rich Content
+//
+
+#main-content {
+
+  a:has(> img) {
+    cursor: zoom-in;
+    display: block;
+    line-height: 1;
+    overflow: visible;
+    text-align: center;
+  }
+
+  img {
+    border-radius: .8rem;
+    box-shadow: 0 .1875rem .8rem 0 $grey-lt-100;
+    border: $border $grey-lt-100;
+  }
+}
+
 //
 // Custom Banner Components
 //