mattes3 / remark-tweetthis

Plug-in for gatsby-transformer-remark that makes a piece of Markdown tweetable

remark-tweetthis

A plug-in for gatsby-transformer-remark that makes a paragraph of your Markdown text tweetable.

It turns this markdown syntax...

[Don't write post-it notes for the observations you make during a usability test. That's a mistake that will lead you into trouble. #uxresearch][tweet]

into this tweetable snippet:

When a reader clicks on the text in the box or on "Tweet this", the text will be shared on Twitter (click this link to see what will happen).

How to make it work

These are the steps that you need to get started:

Install the plug-in

Edit the plugins section of gatsby-config.js, look for gatsby-transformer-remark and add this plug-in to the list of transformers, like this:

plugins: [
    {
        resolve: `gatsby-transformer-remark`,
        options: {
            plugins: [
                {
                    resolve: `remark-tweetthis`,
                    options: {
                        siteUrl: 'https://yourownsite.com',
                        tweetAs: 'yourtwitteruser'
                    },
                },
            ],
        },
    },
]

Modify your markdown rendering class

Somewhere in your Gatsby-based site, you'll have a blog-post.jsx file with a line where you insert the rendered HTML into the output, similar to this:

<div dangerouslySetInnerHTML={{ __html: post.html }} />

Edit it like this:

<div dangerouslySetInnerHTML={{ __html: post.html.replace(/PAGE_SLUG/gi, post.fields.slug) }} />

You may have to modify your GraphQL query accordingly so that you get post.fields.slug at all:

query BlogPostBySlug($slug: String!) {
    site {
        siteMetadata {
            title
            author
        }
    }
    markdownRemark(fields: {slug: {eq: $slug } }) {
        id
        html
        fields {
            slug
        }
        frontmatter {
            title
            date(formatString: "MMMM DD, YYYY")
        }
    }
}

Copy the CSS and the PNG icon file

Copy tweetthis.css and twitterbird.png into your web application. Edit tweetthis.css in two places so that it matches the URL of twitterbird.png:

background: transparent url(/images/remark-tweetthis/twitterbird.png) no-repeat right top 8px;