This package has been deprecated

    Author message:

    Package no longer supported. We recommend using @contentful/rich-text-react-renderer package. Please follow the link to learn more details https://www.gatsbyjs.org/packages/gatsby-source-contentful/\?\=contentful\#contentful-rich-text

    @contentful/gatsby-transformer-contentful-richtext

    13.1.0 • Public • Published

    gatsby-transformer-contentful-richtext

    Parses Contentful Rich Text document

    Install

    npm install --save @contentful/gatsby-transformer-contentful-richtext

    How to use

    plugins: [`@contentful/gatsby-transformer-contentful-richtext`]

    Query

    After adding the plugin you will be able to query the html representation of the rich text field

    {
      allContentfulBlogPost {
        bodyRichText {
          childContentfulRichText {
            html
          }
        }
      }
    }

    Advanced configuration

    Edit gatsby-starter-default

    // npm i @contentful/rich-text-types
    const { BLOCKS, MARKS, INLINES } = require('@contentful/rich-text-types')
    module.exports = {
      siteMetadata: {
        title: 'Gatsby Default Starter',
        description:
          'Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.',
        author: '@gatsbyjs',
      },
      plugins: [
        'gatsby-plugin-react-helmet',
        {
          resolve: `gatsby-source-filesystem`,
          options: {
            name: `images`,
            path: `${__dirname}/src/images`,
          },
        },
        'gatsby-transformer-sharp',
        'gatsby-plugin-sharp',
        {
          resolve: `gatsby-plugin-manifest`,
          options: {
            name: 'gatsby-starter-default',
            short_name: 'starter',
            start_url: '/',
            background_color: '#663399',
            theme_color: '#663399',
            display: 'minimal-ui',
            icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
          },
        },
        {
          resolve: 'gatsby-source-contentful',
          options: {
            spaceId: '<space-id>',
            accessToken:
              '<access-token>',
          },
        },
        {
          resolve: '@contentful/gatsby-transformer-contentful-richtext',
          options: {
            renderOptions: {
              /*
               * Defines custom html string for each node type like heading, embedded entries etc..
               */
              renderNode: {
                // Example
                [INLINES.ASSET_HYPERLINK]: node => {
                  return `<img class='custom-asset' src="${
                    node.data.target.fields.file['en-US'].url
                  }"/>`
                },
                [INLINES.EMBEDDED_ENTRY]: node => {
                  return `<div class='custom-entry' />${
                    node.data.target.fields.name['en-US']
                  }</div>`
                },
              },
              /*
               * Defines custom html string for each mark type like bold, italic etc..
               */
              renderMark: {
                // Example
                [MARKS.BOLD]: text => `<custom-bold>${text}<custom-bold>`,
              },
            },
          },
        },
      ],
    }

    The renderNode keys should be one of the following BLOCKS and INLINES properties as defined in @contentful/rich-text-types:

    • BLOCKS
      • DOCUMENT
      • PARAGRAPH
      • HEADING_1
      • HEADING_2
      • HEADING_3
      • HEADING_4
      • HEADING_5
      • HEADING_6
      • UL_LIST
      • OL_LIST
      • LIST_ITEM
      • QUOTE
      • HR
      • EMBEDDED_ENTRY
      • EMBEDDED_ASSET
    • INLINES
      • EMBEDDED_ENTRY (this is different from the BLOCKS.EMBEDDED_ENTRY)
      • HYPERLINK
      • ENTRY_HYPERLINK
      • ASSET_HYPERLINK

    The renderMark keys should be one of the following MARKS properties as defined in @contentful/rich-text-types:

    • MARKS
      • BOLD
      • ITALIC
      • UNDERLINE
      • CODE

    Install

    npm i @contentful/gatsby-transformer-contentful-richtext

    DownloadsWeekly Downloads

    1,396

    Version

    13.1.0

    License

    MIT

    Unpacked Size

    13 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar