List of Body Markdown

Newbie question. How do you add markdown to each of the 4 text blocks below the header on the example sites product page for gatsby-starter-netlify-cms?

I thought it would be as simple as changing:
label: Text, name: text, widget: text
to :
label: Text, name: body, widget: markdown

But, I think this may not be possible as they are nested within:
{label: Intro, name: intro, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Blurbs, name: blurbs, widget: list, fields: [{label: Image, name: image, widget: image}, {label: Text, name: text, widget: text}]}]}


When I did this, my markdown didn’t appear at all or didn’t format at all. I then found out that I can only use body markdown at the top level, which I guess means removing the parent List widget and its parent object widget.

As my client will need to create the text blocks (and any additional ones) via the CMS admin. Am I forced to create all formattable elements as separate fields:? and dictate exactly how many text block they can have?

I’ve been trying to work this out all day, so any help is greatly appreciated.

Try this:

- label: Intro
  name: intro
  widget: object
    - {label: Heading, name: heading, widget: string}
    - {label: Description, name: description, widget: text}
    - label: Blurbs
      name: blurbs
      widget: list
        - {label: Image, name: image, widget: image}
        - {label: Text, name: text, widget: markdown}

I’m pretty sure the problem is that name: body is reserved to export markdown outside of the frontmatter block. It’s actually easier to leave the name as it is.


Thanks for the reply.

I did this but get markdown code on the CMS right preview panel and on the final website.

The docs say:

Please note: The markdown widget outputs a raw markdown string. Your static site generator may or may not render the markdown to HTML automatically. Consult with your static site generator’s documentation for more information about rendering markdown.

Is this the issue?

This post talks about the issue:

The gatsby-transformer-remark transform will only transform the markdown within the body of your .md file. It does not know to transform fields within your frontmatter .

As you can see from the query results above, your html is empty because the body is empty.

But it’s still not clear for to get markdownRemark on a list widget. Is it not possible?

Seems silly that any widget in a list can’t have markdown (or Richtext). Maybe I need to make this a collection instead? But then how do you put a collection withing a section of a page?

Getting closer after finding this post.

But still can’t work it out.

I still haven’t done this myself, but it’s a Gatsby issue - Netlify CMS will happily output markdown wherever you tell it to. Your issue is rendering markdown, which Gatsby doesn’t do out of the box yet. I don’t have time to dig in at the moment, unfortunately, but if I were going to, I would start with this comment and google my way through a manual solution:

You could also reach out to the various Gatsby support channels:

@LincMitch this worked for me to solve this issue:

import React from 'react'
import remark from 'remark'
import remarkHTML from 'remark-html'

const toHTML = value => remark()

const YourPreviewTemplate({ entry, getAsset }) => {
  const asMarkdown = entry.getIn(['data', 'something']) 
  const asHTML = toHTML(asMarkdown)
  // ... etc etc ...

@agervais, first, welcome to our Netlify community site and, second, thank you so much for sharing this solution! :slight_smile:

I’ve also mentioned your solution on the Gatsby issue which @erquhart linked to above.

1 Like

Solved my issue finally!

Thank you @agervais.

I actually just added this code to my page and wrapped the data from props before passing to the netlify-gatsby template “Content” component:

const toHTML = value => remark()

… Then in the component:

<PageContent className="content" content={toHTML(item.text)} />