Improving Drupal and Gatsby Integration - The Gatsby Plugin

By | Dec 5, 2018

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](https://www.drupal.org/project/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](https://www.gatsbyjs.org/packages/@weknow/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](https://www.gatsbyjs.org/packages/gatsby-transformer-remark/) to parse markdown as HTML, [gatsby-remark-images](https://www.gatsbyjs.org/packages/gatsby-remark-images/) to processes images in markdown so they can be used in the production build, and [gatsby-remark-external-links](https://www.gatsbyjs.org/packages/gatsby-remark-external-links/) among others.

What does this plugin do?

  • Creates a new text/markdown field 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](https://www.gatsbyjs.org/packages/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.

LinkedIn
Reddit
WhatsApp

Related Posts

Gatsby YAML
Improving Drupal and Gatsby Integration - The Drupal Modules

By WeKnow | December 2, 2018

Check out our time-saving solutions while implementing Drupal with GatsbyJS

At weKnow we are not only using Drupal, we also take contributing back very seriously and now is the time for improving the Drupal and…

- READ MORE
Gatsby YAML
Improving Drupal and Gatsby Integration - The Drupal Boina Distribution

By WeKnow | January 4, 2019

Take a look into the ways you will benefit from our work with Boina Distribution

Drupal 8 has plenty of contributed modules to help you building a headless/decoupled web application. However, getting all those set up…

- READ MORE
Gatsby YAML
Improving Drupal and Gatsby Integration - The Gatsby Boina Starter

By WeKnow | February 5, 2019

Start working with Gatsby right away; using the Boina Starter

This is the latest post of the “Improving Drupal and Gatsby Integration” series. This time I will be talking about the Gatsby Boina Starter…

- READ MORE
Want to learn how to take advantage of these modules?

We can show you how these modules can improve your Drupal and Gatsby integration.

Contact us for a 30-minute demo today!