Released gatsby-remark-link-card Plugin for Displaying Links as Cards in Gatsby Blogs
Introduction
It’s a busy 2024 from the start of the year in Japan, but since there’s not much I can do and I have some free time while staying at my parents’ home, I’m coding as usual.
In the process of improving my blog, I wanted to display links within articles as cards. After trying various approaches, I ended up releasing a plugin.
What Is This Plugin?
It’s a plugin that displays links in Markdown as card formats. Links need to be in a paragraph by themselves, so you basically have to put empty lines above and below them.
(empty line)
https://github.com/okaryo/gatsby-remark-link-card
(empty line)Then, a card like the following will be displayed.
The setup is simple: just install the plugin and specify it in gatsby-config.js.
npm install @okaryo/gatsby-remark-link-cardUse it as an option plugin for gatsby-transformer-remark.
// gatsby-config.js
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`@okaryo/gatsby-remark-link-card`
]
}
}
];Why I Made It
I wanted to introduce link cards in my own blog and was looking for a library, but couldn’t find one that suited my needs.
Common methods for displaying link cards in Gatsby blogs include using plugins like these or using iframely.
For the above plugins, you need to write Markdown links in a special syntax like [$card](url) to display link cards. Personally, I didn’t want to write Markdown that depends on special syntax relying on external libraries. The iframely method required creating an account and using an API, which was cumbersome.
So, I thought why not create an easy-to-set-up plugin myself, without needing special syntax, and hence I released the aforementioned plugin.
Helpful Sites & Repositories
The following is the official documentation on creating Remark plugins in Gatsby. It uses Markdown’s AST to manipulate elements.
For traversing tree structures like MarkdownAST, the Visitor pattern is effective. There’s a perfect library for this called unist-util-visit, which allows you to easily obtain and manipulate specific types of nodes like so: visit(markdownAST, "paragraph", (node, index, parent) => {}).
As for implementation using this, the remark-link-card repository’s implementation was helpful. However, be aware that the MarkdownAST it deals with is slightly different from the one used in Gatsby.
Also, for link cards, you need to retrieve site metadata, and there was a perfect library for this called open-graph-scraper. It returns the metadata of the specified site in JSON format when you pass a URL, so it’s very convenient as there’s no need to parse HTML yourself.
Conclusion
Just having links displayed as cards makes articles feel richer.
I’d be happy if you give it a try. The repository is also open, so feel free to contribute if you have any bugs or improvement requests.
