Announcing gatsby-remark-liquid-tags

Liquid tags on Gatsby Blogs enabled with gatsby-remark-liquid-tags

This tool has actually been around for a while, but I decided to announce it here, being the place I got the inspiration from.

When creating posts here on DEV, you'll usually want to embed services from other sources such as codepen, youtube, tweets and so on. You'd do this with liquid tags ({% %}). I created this tool to help serve the same purpose on Gatsby blogs (with few other services that DEV does not have, like google slides).

Not all embed services are supported currently. You can find a list of the supported services in this file

How it works

Basically, the package parses every line in each markdown post using unist-util-visit and replaces the liquid tags lines with the associated services. For example:

Here's the codepen you can practice `flex` with:

{% codepen codepen-url tab=js %}

And a youtube video example:

{% youtube 343ad4343 %}

I wanted to make services to be in form of URLs (and not partial values, like the hash for youtube) but that would mean, people coming to use the package from DEV, would have to learn a new syntax.

So I tried to maintain the syntax as used here.

Contributions

Pull requests and issue reports are welcome. I'd appreciate much support from contributors as I would like more services added. One problem I'm experiencing currently is performing asynchronous operations before replacing the tags appropriately. Any help here would be appreciated.

I'd also appreciate feedbacks from users of this tool.

Thanks for reading, and using the package : )