Gatsby: Help with formatting frontmatter?

[Paddy888]

I am using the Netlify starter, and the pages are written as .md files with the content all in the frontmatter. As I am new to all of this, I am having a lot of difficulty in formatting the results. For example, the products page. I am unable to break sections into multiple lines or paragraphs. It all displays as 1 block of text. I looked at the yaml docs and thought I could use | to preserve line breaks in my text, but nothing I do seems to have any affect.

For example:

`description: |
Kaldi is the ultimate spot for coffee lovers who want to learn about their
java’s origin and support the farmers that grew it.

We take coffee production,
roasting and brewing seriously and we’re glad to pass that knowledge to
anyone.`

Still displays as 1 solid paragraph.

Any help would be greatly appreciated!

[pieh]

The description string should have line-breaks in it, but it doesn't convert to html line breaks or paragraphs automatically.

To format your text you need to manipulate that string in some ways.

Here's one example:
I will treat 2 line breaks as paragraph delimiter, and single line break just as <br>:

const description = `Kaldi is the ultimate spot for coffee lovers who want to learn about their
java’s origin and support the farmers that grew it.

We take coffee production,
roasting and brewing seriously and we’re glad to pass that knowledge to
anyone.`

const formattedDescription = description.split(`\n\n`).map(paragraph => `<p>${paragraph.replace(/\n/g, `<br>`)}</p>`).join(``) 

return <div dangerouslySetInnerHTML={{ __html: formattedDescription }} />

This will render something like this:

<div>
  <p>Kaldi is the ultimate spot for coffee lovers who want to learn about their<br>java’s origin and support the farmers that grew it.</p>
  <p>We take coffee production,<br>roasting and brewing seriously and we’re glad to pass that knowledge to<br>anyone.</p>
</div>

[pieh]

Alternatively you can use packages like https://www.npmjs.com/package/lines-to-paragraphs that do similar thing:

// need to install this package in your project
import paragraphs from "lines-to-paragraphs"

return <div dangerouslySetInnerHTML={{ __html: paragraphs(description) }} />

[Paddy888]

Thank you for the reply. I am unclear on how to actually implement this though. For example using the product page here: https://github.com/netlify-templates/gatsby-starter-netlify-cms/blob/master/src/templates/product-page.js

I import paragraphs, but I do not understand what to do next. I tried this:

<Features gridItems={intro.blurbs} /> <div className="columns"> <div className="column is-7"> <h3 className="has-text-weight-semibold is-size-3"> {main.heading} </h3> <p>{paragraphs(main.description)}</p> </div> </div>

But that literally just displays the html markup in the browser now.

[zslabs]

dangerouslySetInnerHTML is the key as @pieh mentioned above.

<p dangerouslySetInnerHTML={{ __html: paragraphs(main.description) }} />

[Paddy888]

dangerouslySetInnerHTML is the key as @pieh mentioned above.

<p dangerouslySetInnerHTML={{ __html: paragraphs(main.description) }} />

That seemed to work-- thanks!