Merge pull request #2276 from alphagov/bk-spike-tagcleaner-replacement

Replace metalsmith-tagcleaner with a custom marked renderer

lib/marked-renderer.js

@@ -0,0 +1,13 @@
+// A custom renderer that avoids wrapping <img> tags in <p> tags
+const { marked } = require('marked')
+
+class DesignSystemRenderer extends marked.Renderer {
+  paragraph (text) {
+    if (text.startsWith('<img')) {
+      return `${text}\n`
+    }
+    return super.paragraph(text)
+  }
+}
+
+module.exports = new DesignSystemRenderer()

lib/metalsmith.js

@@ -4,11 +4,11 @@ const metalsmith = require('metalsmith') // static site generator
 const assets = require('metalsmith-assets') // copy static assets
 const brokenLinkChecker = require('metalsmith-broken-link-checker')
 const titleChecker = require('./metalsmith-title-checker.js')
+const markedRenderer = require('./marked-renderer.js')
 const env = require('metalsmith-env') // environment vars plugin
 const hashAssets = require('metalsmith-fingerprint-ignore') // add hash to specified files and ignores files that match a pattern
 const inplace = require('@metalsmith/in-place') // render templating syntax in your source files
 const layouts = require('@metalsmith/layouts') // apply layouts to source files
-const tagcleaner = require('metalsmith-tagcleaner') // Use tag cleaner to remove <p> tags around images
 const permalinks = require('@metalsmith/permalinks') // apply a permalink pattern to files
 const canonical = require('metalsmith-canonical') // add a canonical url property to pages
 
@@ -233,13 +233,11 @@ module.exports = metalsmith(__dirname) // __dirname defined by node.js: name of
       gfm: true,
       tables: true,
       pedantic: true,
+      renderer: markedRenderer,
       highlight: highlighter
     }
   }))
 
-  // use tag cleaner to remove <p> tags around images
-  .use(tagcleaner())
-
   // apply a permalink pattern to files
   .use(permalinks({
     relative: false