integrate Font Awesome Pro 5 into UI preview

Author: mojavelinux

gulp.d/tasks/build-preview-pages.js

@@ -3,6 +3,20 @@
 const asciidoctor = require('asciidoctor.js')()
 const fs = require('fs-extra')
 const handlebars = require('handlebars')
+const iconPacks = {
+  fas: (() => {
+    try {
+      return require('@fortawesome/pro-solid-svg-icons')
+    } catch (e) {}
+  })(),
+  far: (() => {
+    try {
+      return require('@fortawesome/pro-regular-svg-icons')
+    } catch (e) {}
+  })(),
+  fab: require('@fortawesome/free-brands-svg-icons'),
+}
+iconPacks.fa = iconPacks.fas
 const { obj: map } = require('through2')
 const merge = require('merge-stream')
 const ospath = require('path')
@@ -83,7 +97,7 @@ module.exports = (src, previewSrc, previewDest, sink = () => map()) => (done) =>
             file.extname = '.html'
             try {
               file.contents = Buffer.from(layouts.get(uiModel.page.layout)(uiModel))
-              next(null, file)
+              next(null, injectIconDefs(file))
             } catch (e) {
               next(transformHandlebarsError(e, uiModel.page.layout))
             }
@@ -183,6 +197,30 @@ function findNavPath (currentUrl, node = [], current_path = [], root = true) {
   if (root) return []
 }
 
+function injectIconDefs (file) {
+  const contents = file.contents
+  if (!contents.includes('<i class="fa')) return file
+  const contentsString = contents.toString()
+  const iconNames = contentsString.match(new RegExp('<i class="fa[brs]? fa-[^" ]+', 'g')).map((it) => {
+    let [iconPrefix, iconName, ] = it.substr(10).split(' fa-')
+    iconName = iconName.replace(/(?:^|-)(.)/g, function (_, l) { return l.toUpperCase() })
+    return iconPrefix + '|' + iconName
+  })
+  if (!iconNames.length) return file
+  const iconDefs = [...new Set(iconNames)].reduce((accum, it) => {
+    const [iconPrefix, iconName, ] = it.split('|')
+    const iconDef = iconPacks[iconPrefix] && iconPacks[iconPrefix]['fa' + iconName]
+    return iconDef ? accum.concat({ ...iconDef, prefix: iconPrefix }) : accum
+  }, [])
+  const iconData = `<script>\nwindow.FontAwesomeIconDefs = ${JSON.stringify(iconDefs)}\n</script>`
+  file.contents = Buffer.from(
+    contentsString.replace(new RegExp('<script async src="[^"]*_/js/vendor/fontawesome.js"></script>'), function (m) {
+      return [iconData, m].join('\n')
+    })
+  )
+  return file
+}
+
 function relativize (url) {
   return url ? (url.charAt() === '#' ? url : url.slice(1)) : '#'
 }

package-lock.json

@@ -15,6 +15,8 @@
   ],
   "devDependencies": {
     "@octokit/rest": "~18.0",
+    "@fortawesome/fontawesome-svg-core": "~1.2",
+    "@fortawesome/free-brands-svg-icons": "~5.13",
     "asciidoctor.js": "1.5.9",
     "autoprefixer": "~9.8",
     "browser-pack-flat": "~3.4",
@@ -59,5 +61,9 @@
     "typeface-roboto-mono": "0.0.75",
     "vinyl-buffer": "~1.0",
     "vinyl-fs": "~3.0"
+  },
+  "optionalDependencies": {
+    "@fortawesome/pro-solid-svg-icons": "~5.13",
+    "@fortawesome/pro-regular-svg-icons": "~5.13"
   }
 }

package.json

@@ -0,0 +1,15 @@
+;(function () {
+  'use strict'
+
+  ;[].slice.call(document.querySelectorAll('td.icon>i.fa')).forEach(function (el) {
+    el.classList.remove('fa')
+  })
+
+  var fa = require('@fortawesome/fontawesome-svg-core')
+
+  window.FontAwesomeIconDefs.forEach(function (faIconDef) {
+    fa.library.add(faIconDef)
+  })
+
+  fa.dom.i2svg()
+})()

src/js/vendor/fontawesome.bundle.js

@@ -17,3 +17,4 @@
 {{/if}}
 
 <script async id="feedback-script" src="{{{uiRootPath}}}/js/vendor/feedback.js?v=1" data-collector-id="709818cb"></script>
+<script async src="{{{uiRootPath}}}/js/vendor/fontawesome.js"></script>

src/partials/footer-scripts.hbs

@@ -1,6 +1,4 @@
     <link rel="stylesheet" href="{{{uiRootPath}}}/css/site.css">
-    {{!-- include fontAwesome CDN --}}
-    <script src="https://kit.fontawesome.com/4a5569d39d.js" crossorigin="anonymous"></script>
     <script src="{{{uiRootPath}}}/js/vendor/jquery.js"></script>
     {{#with env.OPTANON_SCRIPT_URL}}
     <script src="{{{@root.uiRootPath}}}/js/vendor/jquery.js"></script>