Improve the readability of example payloads (#47)

README.md

@@ -28,7 +28,7 @@ you will need to define expected variables in the payload the webhook will recei
 
 Add this Action as a [step][job-step] to your project's GitHub Action Workflow file:
 
-```
+```yaml
 - name: Send GitHub Action trigger data to Slack workflow
   id: slack
   uses: slackapi/[email protected]
@@ -38,12 +38,17 @@ Add this Action as a [step][job-step] to your project's GitHub Action Workflow f
 
 or
 
-```
+```yaml
 - name: Send custom JSON data to Slack workflow
   id: slack
   uses: slackapi/[email protected]
   with:
-    payload: "{\"key\":\"value\",\"foo\":\"bar\"}" # This data can be any valid JSON from a previous step in the GitHub Action
+    # This data can be any valid JSON from a previous step in the GitHub Action
+    payload: |
+      {
+        "key": "value",
+        "foo": "bar"
+      }
   env:
     SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
 ```
@@ -77,13 +82,44 @@ By creating a new Slack app or using an existing one, this approach allows your
 
 Add this Action as a [step][job-step] to your project's GitHub Action Workflow file:
 
-```
+```yaml
 - name: Post to a Slack channel
   id: slack
   uses: slackapi/[email protected]
   with:
-    channel-id: 'CHANNEL_ID'  # Slack channel id or user id to post message. https://api.slack.com/methods/chat.postMessage#channels
-    slack-message: 'posting from a github action!'
+    # Slack channel id, channel name, or user id to post message.
+    # See also: https://api.slack.com/methods/chat.postMessage#channels
+    channel-id: 'CHANNEL_ID'
+    # For posting a simple plain text message
+    slack-message: "GitHub build result: ${{ job.status }}\n${{ github.event.pull_request.html_url || github.event.head_commit.url }}"
+  env:
+    SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
+```
+
+Using JSON payload for constructing a message is also available:
+
+```yaml
+- name: Post to a Slack channel
+  id: slack
+  uses: slackapi/[email protected]
+  with:
+    # Slack channel id, channel name, or user id to post message.
+    # See also: https://api.slack.com/methods/chat.postMessage#channels
+    channel-id: 'CHANNEL_ID'
+    # For posting a rich message using Block Kit
+    payload: |
+      {
+        "text": "GitHub Action build result: ${{ job.status }}\n${{ github.event.pull_request.html_url || github.event.head_commit.url }}",
+        "blocks": [
+          {
+            "type": "section",
+            "text": {
+              "type": "mrkdwn",
+              "text": "GitHub Action build result: ${{ job.status }}\n${{ github.event.pull_request.html_url || github.event.head_commit.url }}"
+            }
+          }
+        ]
+      }
   env:
     SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
 ```
@@ -104,12 +140,25 @@ Incoming Webhooks conform to the same rules and functionality as any of Slack's
 
 ### Usage
 
-```
+```yaml
 - name: Send custom JSON data to Slack workflow
   id: slack
   uses: slackapi/[email protected]
   with:
-    payload: "{\"blocks\":[{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"You have a new request: \"}},{\"type\":\"section\",\"fields\":[{\"type\":\"mrkdwn\",\"text\":\"*Type:* Computer (laptop)\"},{\"type\":\"mrkdwn\",\"text\":\"*When:* Submitted Aut 10\"}]}]}"
+    # For posting a rich message using Block Kit
+    payload: |
+      {
+        "text": "GitHub Action build result: ${{ job.status }}\n${{ github.event.pull_request.html_url || github.event.head_commit.url }}",
+        "blocks": [
+          {
+            "type": "section",
+            "text": {
+              "type": "mrkdwn",
+              "text": "GitHub Action build result: ${{ job.status }}\n${{ github.event.pull_request.html_url || github.event.head_commit.url }}"
+            }
+          }
+        ]
+      }
   env:
     SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
     SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK

example-workflows/Technique_1_Slack_Workflow_Builder/JSON_payload.yml

@@ -9,6 +9,10 @@ jobs:
       id: slack
       uses: slackapi/[email protected]
       with:
-        payload: "{\"key\":\"value\",\"foo\":\"bar\"}"
+        payload: |
+          {
+            "key": "value",
+            "foo": "bar"
+          }
       env:
         SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

example-workflows/Technique_1_Slack_Workflow_Builder/JSON_payload_from_file.yml

@@ -9,6 +9,6 @@ jobs:
       id: slack
       uses: slackapi/[email protected]
       with:
-        payload-file-path: "./example-workflows/payloads/example.json"
+        payload-file-path: "./example-workflows/Technique_1_Slack_Workflow_Builder/payloads/example.json"
       env:
         SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

example-workflows/Technique_2_Slack_App/JSON_payload_as_text.yml

@@ -10,6 +10,6 @@ jobs:
       uses: slackapi/[email protected]
       with:
         channel-id: 'SLACK_CHANNEL_ID' # ID of Slack Channel you want to post to
-        payload: "{\"text\":\"posting from a github action\"}"
+        payload: "{\"text\": \"posting from a github action\"}"
       env:
         SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}

example-workflows/Technique_3_Slack_Incoming_Webhook/main.yml

@@ -0,0 +1,51 @@
+on: [push]
+
+jobs:
+  new_push_job:
+    runs-on: ubuntu-latest
+    name: New push to repo
+    steps:
+    - name: Send GitHub trigger payload to Slack Workflow Builder
+      id: slack
+      uses: slackapi/[email protected]
+      with:
+        payload: |
+          {
+            "text": "Danny Torrence left a 1 star review for your property.",
+            "blocks": [
+              {
+                "type": "section",
+                "text": {
+                  "type": "mrkdwn",
+                  "text": "Danny Torrence left the following review for your property:"
+                }
+              },
+              {
+                "type": "section",
+                "block_id": "section567",
+                "text": {
+                  "type": "mrkdwn",
+                  "text": "<https://example.com|Overlook Hotel> \\n :star: \\n Doors had too many axe holes, guest in room 237 was far too rowdy, whole place felt stuck in the 1920s."
+                },
+                "accessory": {
+                  "type": "image",
+                  "image_url": "https://is5-ssl.mzstatic.com/image/thumb/Purple3/v4/d3/72/5c/d3725c8f-c642-5d69-1904-aa36e4297885/source/256x256bb.jpg",
+                  "alt_text": "Haunted hotel image"
+                }
+              },
+              {
+                "type": "section",
+                "block_id": "section789",
+                "fields": [
+                  {
+                    "type": "mrkdwn",
+                    "text": "*Average Rating*\\n1.0"
+                  }
+                ]
+              }
+            ]
+          }
+      env:
+        SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
+