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

Package Sidebar

Install

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

Weekly Downloads

363

Version

13.1.0

License

MIT

Unpacked Size

13 kB

Total Files

8

Last publish

Collaborators

  • eozelius
  • fisher-contentful
  • jonathanstoye
  • trburgess
  • 2wce
  • tnugmanov-contentful
  • primeinteger
  • david-shibley-contentful
  • jjolton_contentful
  • nealdavies
  • dkim-cf
  • t-col
  • chasepoirier
  • ryunsong-contentful
  • elylucas
  • fidanism
  • jsdalton
  • lewiscowper
  • rafafelix0
  • felixboenke
  • lillianbitner
  • mateojgordo
  • brettjackson
  • brnrossi
  • julija.a
  • doetter
  • jose.medrano
  • jonathan-contentful
  • georgechios.contentful
  • inbal.gordon
  • anwar.ahmad
  • ghepting
  • camposcontentful
  • benjaminrobertlees
  • whitelisab
  • mgoudy_contentful
  • marcopieatcontentful
  • jbcontentful
  • floriank
  • pkeavenycontentful
  • msieroslawska
  • miguelcrespo
  • chrishelgert
  • cdun.ctfl
  • asleepysamurai
  • budimir.budimir.cf
  • seth-carter-contentful
  • bhekanik
  • konstantinminster
  • invalid_json
  • douglasnsovenhi
  • dropecostareis
  • lorenzonibrunno
  • baskiers
  • dancontentful
  • ivo-contentful
  • thy.pham
  • adrian-contentful
  • alvinometric
  • dimitrycf
  • cormac.debarra
  • jites
  • nhanlon-cf
  • cbentham-cf
  • cempesket
  • jfctfl
  • nkoyo.ating
  • evgeniip
  • max.cheremisin
  • sofia_margariti
  • dineshswamy_paranthaman
  • dmytro.filippov
  • arjun-londhey
  • eric-miller2129
  • liamstokingercontentful
  • aodhagan-cf
  • vikaskumr
  • dennise917
  • alicankargin
  • cf-aleks
  • bvkr
  • ebctfl
  • sjouli
  • mayakarabula
  • cf-engit
  • harshil1712
  • paradoja
  • mattvanvoorst-contentful
  • holgerstorm
  • cf-remylenoir
  • mayagillilan
  • ahsen
  • mar.contentful
  • rowadz_contentful
  • kiyutink_contentful
  • roosterhack
  • kurtulus-contentful
  • omasopust-cf
  • cemre.yuksel
  • peacemukke
  • sophiiistika
  • stephanleece
  • dogukano
  • 3b3ziz
  • or_yoffe_contentful
  • hennadii.shymanskyi
  • m.bensalem
  • sxagoraris
  • stathis.xagoraris
  • andreascful
  • richard_moran
  • yvesrijckaert_contentful
  • mehdi_contentful
  • georgpanok
  • riqwan.thahamir
  • piotr.ciazynski
  • farruco.sanjurjo
  • ronaldronson
  • silhoue
  • phbschmidt
  • kathrinholzmann
  • poberherr
  • mikita.savanovich
  • laurenceb
  • elblivion
  • fabianheymann
  • it-internal
  • sbezludny
  • medturki
  • danwe
  • yann-cf
  • makinwa37
  • diacono
  • whydah-gally
  • tauraz
  • cakejelly
  • martin3walker
  • argvk_cf
  • yiotis
  • leonardofreitass
  • hwartig
  • davidfateh
  • dvasylenko
  • ruderngespra
  • mshaaban0
  • kdamball
  • marcolink
  • gosiaszporer
  • z0al
  • mspagnolo
  • thomas.spiesser
  • anho
  • didi96
  • fs
  • cgrabo
  • dana_grn
  • andipaetzold-cf
  • denkristoffer
  • luizfonseca
  • juliabiro
  • vinz93
  • jbourne
  • 0mathcrap
  • damienxy
  • roryscarson
  • m99coder-cf
  • loweisz
  • thomas.contentful
  • marceltoben
  • massao
  • bohdan.hutsol
  • contentful-ecosystem
  • vida.momenzadeh
  • yuri.mazursky
  • rebecca.koenig
  • annmary