create pretty html plugin

Author: alampros

gatsby-config.js

@@ -21,6 +21,7 @@ module.exports = {
     'gatsby-plugin-netlify',
     'gatsby-plugin-resolve-src',
     'gatsby-transformer-remark',
+    'pretty-html',
     {
       resolve: 'gatsby-plugin-typescript',
       options: {

package.json

@@ -40,6 +40,7 @@
     "gatsby-plugin-typescript": "^2.0.6",
     "gatsby-source-filesystem": "^2.0.20",
     "gatsby-transformer-remark": "^2.2.4",
+    "js-beautify": "^1.8.9",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-helmet": "^5.2.0",

plugins/pretty-html/gatsby-ssr.js

@@ -0,0 +1,8 @@
+const { renderToString } = require('react-dom/server')
+const jsbeautify = require('js-beautify')
+
+exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
+  const bodyHTML = renderToString(bodyComponent)
+  const prettyHTML = jsbeautify.html(bodyHTML, { indent_size: 2 })
+  replaceBodyHTMLString(prettyHTML)
+}

plugins/pretty-html/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "pretty-html",
+  "author": "Aaron Lampros <[email protected]>"
+}