Show the content of a post when notifying Slack

[marissamarym]

Description

Show the content of a post in the Slack message when notifying a Slack channel.

Example

Here is an example post on Beam:

Current behaviour of the Slack notification

Shows the link, title, and author

Proposed behaviour of the Slack notification

Shows the link, title, author, and content

Possible solution

Using the https://github.com/instantish/mack package to convert markdown to Slack blocks.

Trade-offs: it adds another dependency, Slack messages will take up more vertical space in the channel.

Alternatives: just show the first few lines of text with an ellipsis, or just preview the images.

[jasonlong]

Showing the same snippet that is shown on the index page could be reasonable but I'm not in favor of rendering the whole post in Slack. This feature is really meant to just be a notification to let you know that a new post has been published.

[luciovilla]

Would suggest this snippet change in lib/slack.tsx as an idea. Will need to figure out the logic on how to get a certain length of the content (text only) and how to get the first image url. And the Slack preview could include the post title as a header, small image preview and button that says "Read" that links to the post:

{
    "blocks": [
        {
            "type": "header",
            "text": {
                "type": "plain_text",
                "text": "Post Title",
                "emoji": true
            }
        },
        {
            "type": "section",
            "text": {
                "type": "plain_text",
                "text": "Could get the first 100 characters of the content and display it as a preview..."
            },
            "accessory": {
                "type": "image",
                "image_url": "https://api.slack.com/img/blocks/bkb_template_images/approvalsNewDevice.png",
                "alt_text": "computer thumbnail"
            }
        },
        {
            "type": "actions",
            "elements": [
                {
                    "type": "button",
                    "text": {
                        "type": "plain_text",
                        "emoji": true,
                        "text": "Read"
                    },
                    "url": "https://google.com"
                }
            ]
        },
        {
            "type": "context",
            "elements": [
                {
                    "type": "plain_text",
                    "text": "By Author Name",
                    "emoji": true
                }
            ]
        }
    ]
}

Which will render this Slack preview: