YAML markdown description to HTML on build time

README.md

@@ -42,10 +42,11 @@ The whole [portfolio](https://matthiaskretschmann.com) is a React-based Single P
 
 ### 💍 One data file to rule all pages
 
-All content is powered by one YAML file where all the portfolio's projects are defined. The project description itself is transformed from Markdown written inside the YAML file.
+All content is powered by one YAML file where all the portfolio's projects are defined. The project description itself is transformed from Markdown written inside the YAML file int HTML on build time.
 
 Gatsby automatically creates pages from each item in that file utilizing the [`Project.jsx`](src/templates/Project.jsx) template.
 
+- [`gatsby-node.js`](gatsby-node.js)
 - [`data/projects.yml`](data/projects.yml)
 - [`src/templates/Project.jsx`](src/templates/Project.jsx)
 

gatsby-node.js

@@ -1,4 +1,36 @@
 const path = require('path')
+const remark = require('remark')
+const markdown = require('remark-parse')
+const html = require('remark-html')
+
+exports.onCreateNode = ({ node, actions }) => {
+  const { createNodeField } = actions
+
+  // Projects YAML nodes
+  if (node.internal.type === 'ProjectsYaml') {
+    // Add transformed Markdown descriptions
+    const description = node.description
+    const descriptionWithLineBreaks = description.split('\n').join('\n\n')
+
+    let descriptionHtml
+
+    remark()
+      .use(markdown, { gfm: true, commonmark: true, pedantic: true })
+      .use(html)
+      .process(descriptionWithLineBreaks, (err, file) => {
+        if (err) throw Error('Could not transform project description')
+
+        descriptionHtml = file.contents
+        return descriptionHtml
+      })
+
+    createNodeField({
+      node,
+      name: 'descriptionHtml',
+      value: descriptionHtml
+    })
+  }
+}
 
 //
 // Create project pages from projects.yml

package.json

@@ -44,8 +44,10 @@
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-helmet": "^5.2.0",
-    "react-markdown": "^4.0.3",
     "react-pose": "^4.0.2",
+    "remark": "^10.0.1",
+    "remark-html": "^9.0.0",
+    "remark-parse": "^6.0.3",
     "suncalc": "^1.8.0",
     "vcf": "^2.0.1"
   },

src/templates/Project.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import ReactMarkdown from 'react-markdown'
 import { graphql } from 'gatsby'
 import FullWidth from '../components/atoms/FullWidth'
 import ProjectImage from '../components/molecules/ProjectImage'
@@ -42,9 +41,9 @@ const Project = ({ data }) => {
         <header>
           <h1 className={styles.title}>{title}</h1>
         </header>
-        <ReactMarkdown
-          source={descriptionWithLineBreaks}
+          <div
           className={styles.description}
+            dangerouslySetInnerHTML={{ __html: descriptionHtml }}
         />
         <ProjectImages projectImages={projectImages} title={title} />
         <ProjectMeta links={links} techstack={techstack} />