npm's personal messenger

    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,280

    Version

    13.1.0

    License

    MIT

    Unpacked Size

    13 kB

    Total Files

    8

    Last publish

    Collaborators

    • max.cheremisin
    • sofia_margariti
    • dineshswamy_paranthaman
    • dmytro.filippov
    • arjun-londhey
    • eric-miller2129
    • liamstokingercontentful
    • aodhagan-cf
    • vikaskumr
    • dennise917
    • alicankargin
    • cf-aleks
    • jeffm_cf
    • bvkr
    • ebctfl
    • sjouli
    • mayakarabula
    • cf-engit
    • harshil1712
    • paradoja
    • mattvanvoorst-contentful
    • bruce.felt
    • holgerstorm
    • grassator
    • cf-remylenoir
    • mayagillilan
    • ahsen
    • mar.contentful
    • rowadz_contentful
    • edblankenship
    • 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
    • felixboenke
    • farruco.sanjurjo
    • ronaldronson
    • silhoue
    • phbschmidt
    • timbeyer
    • kathrinholzmann
    • inbal.gordon
    • poberherr
    • mikita.savanovich
    • laurenceb
    • stupchiy
    • elblivion
    • fabianheymann
    • it-internal
    • sbezludny
    • medturki
    • danwe
    • marina-cf
    • dlitvakb
    • yann-cf
    • makinwa37
    • diacono
    • whydah-gally
    • tauraz
    • cakejelly
    • martin3walker
    • argvk_cf
    • yiotis
    • leonardofreitass
    • hwartig
    • davidfateh
    • dvasylenko
    • ruderngespra
    • janikomu
    • mshaaban0
    • kdamball
    • burakukula
    • gregferg
    • marcolink
    • gosiaszporer
    • miretxu
    • z0al
    • mspagnolo
    • thomas.spiesser
    • kbarnett
    • jwhiles
    • anho
    • didi96
    • fs
    • cgrabo
    • dana_grn
    • andipaetzold-cf
    • eva.martinez
    • lucabianconi
    • denkristoffer
    • luizfonseca
    • juliabiro
    • vinz93
    • jbourne
    • 0mathcrap
    • damienxy
    • roryscarson
    • m99coder-cf
    • loweisz
    • thomas.contentful
    • marceltoben
    • anwar.ahmad
    • massao
    • bohdan.hutsol
    • contentful-ecosystem
    • vida.momenzadeh
    • yuri.mazursky
    • rebecca.koenig
    • annmary