write icon defs to shared JavaScript file

Author: mojavelinux

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

@@ -39,73 +39,83 @@ module.exports = (src, previewSrc, previewDest, sink = () => map()) => (done) =>
     ),
   ])
     .then(([baseUiModel, { layouts }]) => [{ ...baseUiModel, env: process.env }, layouts])
-    .then(([baseUiModel, layouts]) =>
+    .then(([baseUiModel, layouts, iconDefs = new Map()]) =>
       vfs
         .src('**/*.adoc', { base: previewSrc, cwd: previewSrc })
         .pipe(
-          map((file, enc, next) => {
-            const siteRootPath = path.relative(ospath.dirname(file.path), ospath.resolve(previewSrc))
-            const uiModel = { ...baseUiModel }
-            uiModel.siteRootPath = siteRootPath
-            uiModel.siteRootUrl = path.join(siteRootPath, 'index.html')
-            uiModel.uiRootPath = path.join(siteRootPath, '_')
-            if (file.stem === '404') {
-              uiModel.page = { layout: '404', title: 'Page Not Found' }
-            } else {
-              const pageModel = (uiModel.page = { ...uiModel.page })
-              const doc = asciidoctor.load(file.contents, { safe: 'safe', attributes: ASCIIDOC_ATTRIBUTES })
-              const attributes = doc.getAttributes()
-              pageModel.layout = doc.getAttribute('page-layout', 'default')
-              pageModel.title = doc.getDocumentTitle()
-              pageModel.url = '/' + file.relative.slice(0, -5) + '.html'
-              if (file.stem === 'home') pageModel.home = true
-              const componentName = doc.getAttribute('page-component-name', pageModel.src.component)
-              const versionString = doc.getAttribute(
-                'page-version',
-                doc.hasAttribute('page-component-name') ? undefined : pageModel.src.version
-              )
-              let component
-              let componentVersion
-              if (componentName) {
-                component = pageModel.component = uiModel.site.components[componentName]
-                componentVersion = pageModel.componentVersion = versionString
-                  ? component.versions.find(({ version }) => version === versionString)
-                  : component.latest
+          map(
+            (file, enc, next) => {
+              const siteRootPath = path.relative(ospath.dirname(file.path), ospath.resolve(previewSrc))
+              const uiModel = {
+                ...baseUiModel,
+                preview: true,
+                siteRootPath,
+                siteRootUrl: path.join(siteRootPath, 'index.html'),
+                uiRootPath: path.join(siteRootPath, '_'),
+              }
+              if (file.stem === '404') {
+                uiModel.page = { layout: '404', title: 'Page Not Found' }
               } else {
-                component = pageModel.component = Object.values(uiModel.site.components)[0]
-                componentVersion = pageModel.componentVersion = component.latest
+                const pageModel = (uiModel.page = { ...uiModel.page })
+                const doc = asciidoctor.load(file.contents, { safe: 'safe', attributes: ASCIIDOC_ATTRIBUTES })
+                const attributes = doc.getAttributes()
+                pageModel.layout = doc.getAttribute('page-layout', 'default')
+                pageModel.title = doc.getDocumentTitle()
+                pageModel.url = '/' + file.relative.slice(0, -5) + '.html'
+                if (file.stem === 'home') pageModel.home = true
+                const componentName = doc.getAttribute('page-component-name', pageModel.src.component)
+                const versionString = doc.getAttribute(
+                  'page-version',
+                  doc.hasAttribute('page-component-name') ? undefined : pageModel.src.version
+                )
+                let component
+                let componentVersion
+                if (componentName) {
+                  component = pageModel.component = uiModel.site.components[componentName]
+                  componentVersion = pageModel.componentVersion = versionString
+                    ? component.versions.find(({ version }) => version === versionString)
+                    : component.latest
+                } else {
+                  component = pageModel.component = Object.values(uiModel.site.components)[0]
+                  componentVersion = pageModel.componentVersion = component.latest
+                }
+                pageModel.module = 'ROOT'
+                pageModel.relativeSrcPath = file.relative
+                pageModel.version = componentVersion.version
+                pageModel.displayVersion = componentVersion.displayVersion
+                pageModel.editUrl = pageModel.origin.editUrlPattern.replace('%s', file.relative)
+                pageModel.navigation = componentVersion.navigation || []
+                pageModel.breadcrumbs = findNavPath(pageModel.url, pageModel.navigation)
+                if (pageModel.component.versions.length > 1) {
+                  pageModel.versions = pageModel.component.versions.map(
+                    ({ version, displayVersion, url }, idx, arr) => {
+                      const pageVersion = { version, displayVersion: displayVersion || version, url }
+                      if (version === component.latest.version) pageVersion.latest = true
+                      if (idx === arr.length - 1) {
+                        delete pageVersion.url
+                        pageVersion.missing = true
+                      }
+                      return pageVersion
+                    }
+                  )
+                }
+                pageModel.attributes = Object.entries({ ...attributes, ...componentVersion.asciidoc.attributes })
+                  .filter(([name, val]) => name.startsWith('page-'))
+                  .reduce((accum, [name, val]) => ({ ...accum, [name.substr(5)]: val }), {})
+                pageModel.contents = Buffer.from(doc.convert())
               }
-              pageModel.module = 'ROOT'
-              pageModel.relativeSrcPath = file.relative
-              pageModel.version = componentVersion.version
-              pageModel.displayVersion = componentVersion.displayVersion
-              pageModel.editUrl = pageModel.origin.editUrlPattern.replace('%s', file.relative)
-              pageModel.navigation = componentVersion.navigation || []
-              pageModel.breadcrumbs = findNavPath(pageModel.url, pageModel.navigation)
-              if (pageModel.component.versions.length > 1) {
-                pageModel.versions = pageModel.component.versions.map(({ version, displayVersion, url }, idx, arr) => {
-                  const pageVersion = { version, displayVersion: displayVersion || version, url }
-                  if (version === component.latest.version) pageVersion.latest = true
-                  if (idx === arr.length - 1) {
-                    delete pageVersion.url
-                    pageVersion.missing = true
-                  }
-                  return pageVersion
-                })
+              file.extname = '.html'
+              try {
+                file.contents = Buffer.from(layouts.get(uiModel.page.layout)(uiModel))
+                registerIconDefs(iconDefs, file)
+                next(null, file)
+              } catch (e) {
+                next(transformHandlebarsError(e, uiModel.page.layout))
               }
-              pageModel.attributes = Object.entries({ ...attributes, ...componentVersion.asciidoc.attributes })
-                .filter(([name, val]) => name.startsWith('page-'))
-                .reduce((accum, [name, val]) => ({ ...accum, [name.substr(5)]: val }), {})
-              pageModel.contents = Buffer.from(doc.convert())
-            }
-            file.extname = '.html'
-            try {
-              file.contents = Buffer.from(layouts.get(uiModel.page.layout)(uiModel))
-              next(null, injectIconDefs(file))
-            } catch (e) {
-              next(transformHandlebarsError(e, uiModel.page.layout))
-            }
-          })
+            },
+            // NOTE parallel build overwrites default fontawesome-icon-defs.js, so we must use an alternate path
+            () => writeIconDefs(iconDefs, ospath.join(previewDest, 'fontawesome-icon-defs.js'))
+          )
         )
         .pipe(vfs.dest(previewDest))
         .on('error', (e) => done)
@@ -201,34 +211,35 @@ function findNavPath (currentUrl, node = [], current_path = [], root = true) {
   if (root) return []
 }
 
-function injectIconDefs (file) {
+function registerIconDefs (iconDefs, file) {
   const contents = file.contents
-  if (!contents.includes('<i class="fa')) return file
+  if (!contents.includes('<i class="fa')) return
   const stringContents = contents.toString()
-  const iconNames = stringContents.match(new RegExp('<i class="fa[brs]? fa-[^" ]+', 'g')).map((it) => {
-    return it.substr(10).replace(' fa-', ' ')
-  })
-  if (!iconNames.length) return file
-  const iconDefs = [...new Set(iconNames)].reduce((accum, it) => {
-    const [iconPrefix, iconName] = it.split(' ').slice(0, 2)
-    let iconDef = (iconPacks[iconPrefix] || {})['fa' + camelCase(iconName)]
-    if (iconDef) {
-      return accum.concat({ ...iconDef, prefix: iconPrefix })
-    } else if (iconPrefix === 'fa') {
-      const [realIconPrefix, realIconName] = iconShims[iconName] || []
-      if (realIconName && (iconDef = (iconPacks[realIconPrefix] || {})['fa' + camelCase(realIconName)])) {
-        return accum.concat({ ...iconDef, prefix: realIconPrefix })
+  const iconNames = stringContents.match(/<i class="fa[brs]? fa-[^" ]+/g).map((it) => it.substr(10).replace('fa-', ''))
+  if (!iconNames.length) return
+  ;[...new Set(iconNames)].reduce((accum, iconKey) => {
+    if (!accum.has(iconKey)) {
+      const [iconPrefix, iconName] = iconKey.split(' ').slice(0, 2)
+      let iconDef = (iconPacks[iconPrefix] || {})['fa' + camelCase(iconName)]
+      if (iconDef) {
+        return accum.set(iconKey, { ...iconDef, prefix: iconPrefix })
+      } else if (iconPrefix === 'fa') {
+        const [realIconPrefix, realIconName] = iconShims[iconName] || []
+        if (
+          !accum.has((iconKey = `${realIconPrefix} ${realIconName}`)) &&
+          realIconName &&
+          (iconDef = (iconPacks[realIconPrefix] || {})['fa' + camelCase(realIconName)])
+        ) {
+          return accum.set(iconKey, { ...iconDef, prefix: realIconPrefix })
+        }
       }
     }
     return accum
-  }, [])
-  const iconData = `<script>\nwindow.FontAwesomeIconDefs = ${JSON.stringify(iconDefs)}\n</script>`
-  file.contents = Buffer.from(
-    stringContents.replace(new RegExp('<script async src="[^"]*_/js/vendor/fontawesome.js"></script>'), function (m) {
-      return [iconData, m].join('\n')
-    })
-  )
-  return file
+  }, iconDefs)
+}
+
+async function writeIconDefs (iconDefs, to) {
+  return fs.writeFile(to, `window.FontAwesomeIconDefs = ${JSON.stringify([...iconDefs.values()])}\n`, 'utf8')
 }
 
 function relativize (url) {
@@ -261,5 +272,7 @@ function toPromise (stream) {
 }
 
 function camelCase (str) {
-  return str.replace(/(?:^|-)(.)/g, function (_, l) { return l.toUpperCase() })
+  return str.replace(/(?:^|-)(.)/g, function (_, l) {
+    return l.toUpperCase()
+  })
 }

preview-src/index.adoc

@@ -11,7 +11,7 @@
 
 [abstract]
 From the *Data Bucket* menu, information and statistics about buckets and nodes is displayed for the entire Couchbase Server cluster.
-The information is aggregated from all the server nodes within the configured cluster for the selected bucket.
+The information is aggregated from all the icon:server[] nodes within the configured cluster for the selected bucket.
 
 From the menu:Couchbase Web Console[Buckets] menu, click the menu:Statistics[] link for each bucket.
 

src/js/vendor/fontawesome-icon-defs.js

@@ -0,0 +1 @@
+window.FontAwesomeIconDefs = []

src/js/vendor/fontawesome.bundle.js

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

src/partials/footer-scripts.hbs

@@ -2,6 +2,8 @@
 {{#with page.attributes.content-scripts}}
 {{{this}}}
 {{/with}}
+<script async src="{{#unless preview}}{{{uiRootPath}}}/js/vendor/{{/unless}}fontawesome-icon-defs.js"></script>
+<script async src="{{{uiRootPath}}}/js/vendor/fontawesome.js"></script>
 <script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
 {{#if env.ALGOLIA_API_KEY}}
 <script async id="search-script" src="{{{uiRootPath}}}/js/vendor/docsearch.js"
@@ -15,6 +17,4 @@
 {{!-- <script async id="feedback-script" src="{{{uiRootPath}}}/js/vendor/feedback.js?v=1" data-collector-id="de2e9313"></script> --}}
 <script async id="feedback-script" src="{{{uiRootPath}}}/js/vendor/feedback.js?v=1" data-collector-id="709818cb"></script>
 {{/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>