gatsby-directus

0.0.13 • Public • Published

Gatsby Directus

Build Status

A Gatsby source plugin for Directus.

Features

This plugin converts your Directus content schema into Gatsby nodes. Allowing you to use your data in Directus to build out your static sites.

  • Converts image columns into image sharp compatible gatsby nodes
    • requires gatsby-image
    • requires gatsby-plugin-sharp
    • requires gatsby-transformer-sharp
    • if these plugins aren't available, no image processing will be done
  • Converts markdown columns into markdown compatible gatsby nodes
  • Recursively builds child nodes for relational data.
    • Many to One relations
    • Many to Many relations
  • Properly handles toggle ui elements from gatsby to transform them into boolean values

Installation

npm install --save gatsby-directus

Configuration

Add gatsby-directus to the plugins in gatsby-config.js

Example:

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    {
      resolve: `gatsby-directus`,
      options: {
        url: `https://api.mydirectusdomain.com`,
        accessToken: `AKDJFKDJ@#@#@`,
        advancedImageProcessingEnabled: false 
      }
    },
    'gatsby-plugin-react-helmet'
  ],
};
 

Image Processing

This plugin processes directus images into image sharp compatible nodes as long as gatsby-image is installed, however, you may get issues if you don't have gatsby-plugin-sharp and gatsby-transformer-sharp installed as well.

It does this by downloading the images into .cache/directus.

npm install --save gatsby-image gatsby-plugin-sharp gatsby-transformer-sharp

Additionally, in order to transform gatsby image nodes we need to pass in an option to gatsby-directus telling it to include those transformers.

Example Config:

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    {
      resolve: `gatsby-directus`,
      options: {
        url: `https://api.mydirectusdomain.com`,
        accessToken: `AKDJFKDJ@#@#@`,
        advancedImageProcessingEnabled: true
      }
    },
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    'gatsby-plugin-react-helmet'
  ],
};
 

Package Sidebar

Install

npm i gatsby-directus

Weekly Downloads

13

Version

0.0.13

License

MIT

Unpacked Size

89.9 kB

Total Files

30

Last publish

Collaborators

  • bottens