On the first post of this series “Improving Drupal and Gatsby Integration – The Drupal Modules”. I introduced two contributed modules we wrote to simplify the Drupal usage while working with Gatsby. One of the modules mentioned was tui_editor a WYSIWYG markdown editor integration with the Toast UI Editor project. This module allows content editors to enter content as markdown, making easy to implement JSON-API endpoints that return markdown.
In this post, I will mention you how to take advantage of that markdown using gatsby-remark-drupal the Gatsby plugin we wrote. This plugin provides support for markdown preprocessing to Drupal body fields. In order to take advantage of Gatsby gatsby-transformer-remark to parse markdown as HTML, gatsby-remark-images to processes images in markdown so they can be used in the production build, and gatsby-remark-external-links among others.
What does this plugin do?
- Creates a new
text/markdownfield for drupal body fields of the selected content types. - Replaces Drupal relative image paths to previously downloaded and cached images by the gatsby-source-drupal plugin.
Where can you find the plugin?
How can you install this plugin?
By executing npm, from the root of your project:
npm install --save @weknow/gatsby-remark-drupal
How can you configure this plugin?
As any other Gatsby plugin by registering in your gatsby-config.js file.
By default this plugin process page and article content types.
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`@weknow/gatsby-remark-drupal`,
But you can customize which content types to process.
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `@weknow/gatsby-remark-drupal`,
options: {
nodes: [`article`,`page`, `landing`, `cta`]
}
}
NOTE: In order to keep this series of publications clear and simple. We will be extended with a one or a couple of extra posts instead of the original planned three, for your ease of reading and comprehension of each topic.
Are you excited as we are with GatsbyJS and this new API Driven approach?
We invite you to check back as this series continues, exploring more tools we are building to contribute back to Drupal and Gatsby ecosystems that will allow you to implement a Drupal and Gatsby integration without needing to DIY.