How can i have two markdown fields per form

as mentioned above, I have come across an instance where i want to style both bodies of text in markdown. How do i do that? https://tinacms.org/docs/fields/markdown uses rawMarkdownBody as the name, and i’m assuming there’s no rawMarkdownBody2, or for that matter, two markdown bodies in a markdown file

In this instance you may want to use JSON instead of Markdown, but the JSON values can be in Markdown format. This way, you can have as many Markdown values per page as you like. You can reference Tina Grande to see how this approach was used.

Hey @panzerstadt @kendall , I wrote a Gatsby plugin specifically for this purpose. It will transform the incoming JSON to markdown/html. I wrote it specifically so I could use markdown inside the TinaCMS JSON content files and be able to have the markdown at any depth within the JSON. The fields processed to HTML are available in graphql queries with Html appended to the original field names. Or you can query the full MarkdownRemark nodes from childrenJsonRemark.

The Tina Grande starter will only handle markdown that is in the top-level of the JSON tree.

The plugin is a general purpose Gatsby/remark plugin, but fits really well within the TinaCMS approach of using structured JSON content. It’s currently being reviewed by the Tina team to be included in the Tina Grande starter with this PR, but for now you can grab it directly from npmjs: gatsby-plugin-json-remark.

JSON file in content/pages:

{
    "path": "/about",
    "template": "src/templates/home.js",
    "title": "Home Page",
    "message": "*hello*",
    "anotherMessage": "**hello again**"
}

Example query:

query MyQuery {
  allPagesJson(filter: {path: {eq: "/"}}) {
    edges {
      node {
        title
        path
        message
        messageHtml
        anotherMessage
        anotherMessageHtml
        childrenJsonRemark {
          messageMarkdownRemark {
            html
          }
          anotherMessageMarkdownRemark {
            html
          }
        }
      }
    }
  }
}

Results:

{
  "data": {
    "allPagesJson": {
      "edges": [
        {
          "node": {
            "title": "Home Page",
            "path": "/",
            "message": "*hello*",
            "messageHtml": "<p><em>hello</em></p>",
            "anotherMessage": "**hello again**",
            "anotherMessageHtml": "<p><strong>hello again</strong></p>",
            "childrenJsonRemark": [
              {
                "messageMarkdownRemark": {
                  "html": "<p><em>hello</em></p>"
                },
                "anotherMessageMarkdownRemark": {
                  "html": "<p><strong>hello again</strong></p>"
                }
              }
            ]
          }
        }
      ]
    }
  }
}

My other plugin can be used to strip the <p> from the html snippets, gatsby-remark-remove-root-p-tag over at npmjs

4 Likes