asciidoctor · mojavelinux · Dec 6, 2020
diff --git a/gulp.d/tasks/build.js b/gulp.d/tasks/build.js
@@ -7,6 +7,16 @@ const concat = require('gulp-concat')
 const cssnano = require('cssnano')
 const fs = require('fs')
 const { promises: fsp } = fs
+const iconPacks = {
+  fa: require('@fortawesome/free-solid-svg-icons'),
+  fas: require('@fortawesome/free-solid-svg-icons'),
+  far: require('@fortawesome/free-regular-svg-icons'),
+  fab: require('@fortawesome/free-brands-svg-icons'),
+  __v4__: require('@fortawesome/fontawesome-free/js/v4-shims').reduce(
+    (accum, it) => accum.set(`fa-${it[0]}`, [it[1] || 'fas', `fa-${it[2] || it[0]}`]),
+    new Map()
+  ),
+}
 const imagemin = require('gulp-imagemin')
 const merge = require('merge-stream')
 const ospath = require('path')
@@ -88,6 +98,9 @@ module.exports = (src, dest, preview) => () => {
                   next(bundleError, file)
                 })
               )
+          } else if (file.relative === 'js/vendor/fontawesome-icon-defs.js') {
+            file.contents = Buffer.from(populateIconDefs(require(file.path)))
+            next(null, file)
           } else {
             fsp.readFile(file.path, 'UTF-8').then((contents) => {
               file.contents = Buffer.from(contents)
@@ -129,3 +142,32 @@ function postcssPseudoElementFixer (css, result) {
     rule.selector = rule.selectors.map((it) => it.replace(/(^|[^:]):(before|after)$/, '$1::$2')).join(',')
   })
 }
+
+function populateIconDefs ({ FontAwesomeIconDefs: { includes = [], admonitionIcons = {} } }) {
+  const iconDefs = [...new Set(includes)].reduce((accum, iconKey) => {
+    if (accum.has(iconKey)) return accum
+    const [iconPrefix, iconName] = iconKey.split(' ').slice(0, 2)
+    let iconDef = (iconPacks[iconPrefix] || {})[camelCase(iconName)]
+    if (iconDef) {
+      return accum.set(iconKey, { ...iconDef, prefix: iconPrefix })
+    } else if (iconPrefix === 'fa') {
+      const [realIconPrefix, realIconName] = iconPacks.__v4__.get(iconName) || []
+      if (
+        realIconName &&
+        !accum.has((iconKey = `${realIconPrefix} ${realIconName}`)) &&
+        (iconDef = (iconPacks[realIconPrefix] || {})[camelCase(realIconName)])
+      ) {
+        return accum.set(iconKey, { ...iconDef, prefix: realIconPrefix })
+      }
+    }
+    return accum
+  }, new Map())
+  return [
+    `window.FontAwesomeIconDefs = ${JSON.stringify([...iconDefs.values()])}\n`,
+    `window.FontAwesomeIconDefs.admonitionIcons = ${JSON.stringify(admonitionIcons)}\n`,
+  ].join()
+}
+
+function camelCase (str) {
+  return str.replace(/-(.)/g, (_, l) => l.toUpperCase())
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,11 @@
   ],
   "devDependencies": {
     "@octokit/rest": "~18.0",
+    "@fortawesome/fontawesome-free": "~5.15",
+    "@fortawesome/fontawesome-svg-core": "~1.2",
+    "@fortawesome/free-brands-svg-icons": "~5.15",
+    "@fortawesome/free-solid-svg-icons": "~5.15",
+    "@fortawesome/free-regular-svg-icons": "~5.15",
     "asciidoctor.js": "1.5.9",
     "autoprefixer": "~10.0",
     "browser-pack-flat": "~3.4",

diff --git a/src/css/doc.css b/src/css/doc.css
@@ -123,8 +123,10 @@
   color: var(--link_unresolved-font-color);
 }
 
+/* NOTE reserve space for icon */
 .doc i.fa {
-  font-style: normal;
+  display: inline-block;
+  width: 1em;
 }
 
 .doc p code,
@@ -332,7 +334,7 @@
   width: 100%;
 }
 
-.doc .admonitionblock .icon {
+.doc .admonitionblock td.icon {
   position: absolute;
   top: 0;
   left: 0;
@@ -346,39 +348,52 @@
   transform: translate(-0.5rem, -50%);
 }
 
-.doc .admonitionblock.caution .icon {
+.doc .admonitionblock td.icon i {
+  display: inline-flex;
+  align-items: center;
+  width: auto;
+  height: 100%;
+}
+
+.doc .admonitionblock td.icon i:empty::before,
+.doc .admonitionblock td.icon .svga {
+  content: "";
+  height: inherit;
+  width: 1.5rem;
+  margin: 0 0.25rem 0 -0.5rem;
+  border-radius: 0.45rem 0 0 0.45rem;
+  padding: 0.2em 0.2em 0.3em 0.3em;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.doc .admonitionblock.caution td.icon {
   background-color: var(--caution-color);
   color: var(--caution-on-color);
 }
 
-.doc .admonitionblock.important .icon {
+.doc .admonitionblock.important td.icon {
   background-color: var(--important-color);
   color: var(--important-on-color);
 }
 
-.doc .admonitionblock.note .icon {
+.doc .admonitionblock.note td.icon {
   background-color: var(--note-color);
   color: var(--note-on-color);
 }
 
-.doc .admonitionblock.tip .icon {
+.doc .admonitionblock.tip td.icon {
   background-color: var(--tip-color);
   color: var(--tip-on-color);
 }
 
-.doc .admonitionblock.warning .icon {
+.doc .admonitionblock.warning td.icon {
   background-color: var(--warning-color);
   color: var(--warning-on-color);
 }
 
-.doc .admonitionblock .icon i {
-  display: inline-flex;
-  align-items: center;
-  height: 100%;
-}
-
-.doc .admonitionblock .icon i::after {
+.doc .admonitionblock td.icon i::after {
   content: attr(title);
+  font-style: normal;
 }
 
 .doc .imageblock {
@@ -516,21 +531,14 @@
   padding-left: 0.5rem;
 }
 
-.doc ul.checklist p > i.fa-check-square-o:first-child,
-.doc ul.checklist p > i.fa-square-o:first-child {
-  display: inline-flex;
-  justify-content: center;
+.doc ul.checklist p > .fa-check-square-o:first-child,
+.doc ul.checklist p > .fa-square-o:first-child,
+.doc ul.checklist p > :first-child .svga.fa-check-square,
+.doc ul.checklist p > :first-child .svga.fa-square {
+  display: inline-block;
   width: 1.25rem;
 }
 
-.doc ul.checklist i.fa-check-square-o::before {
-  content: "\2713";
-}
-
-.doc ul.checklist i.fa-square-o::before {
-  content: "\274f";
-}
-
 .doc .dlist .dlist,
 .doc .dlist .olist,
 .doc .dlist .ulist,
@@ -825,11 +833,9 @@
   margin-right: 0;
 }
 
-.doc .menuseq i.caret::before {
-  content: "\203a";
-  font-size: 1.1em;
-  font-weight: var(--body-font-weight-bold);
-  line-height: calc(1 / 1.1);
+.doc .menuseq .caret {
+  display: inline-block;
+  width: 0.5em;
 }
 
 .doc a.bare,

diff --git a/src/css/header.css b/src/css/header.css
@@ -182,10 +182,11 @@ body {
   padding: 0;
 }
 
-.navbar-item .icon {
+.navbar-item .icon,
+.navbar-item .icon .svga {
   width: 1.25rem;
   height: 1.25rem;
-  display: block;
+  display: inline-block;
 }
 
 .navbar-link {

diff --git a/src/css/vars.css b/src/css/vars.css
@@ -68,16 +68,15 @@
   --toc-border-color: var(--panel-border-color);
   --toc-line-height: 1.2;
   /* admonitions */
-  --caution-color: #a0439c;
+  --caution-color: #802392;
   --caution-on-color: var(--color-white);
-  --important-color: #d32f2f;
   --important-color: var(--color-brand-primary);
   --important-on-color: var(--color-white);
-  --note-color: #217ee7;
+  --note-color: #2d7dd2;
   --note-on-color: var(--color-white);
-  --tip-color: #41af46;
+  --tip-color: #43b929;
   --tip-on-color: var(--color-white);
-  --warning-color: #e18114;
+  --warning-color: #f70;
   --warning-on-color: var(--color-white);
   /* doc */
   --doc-font-color: var(--color-jet-50);

diff --git a/src/js/vendor/fontawesome-icon-defs.js b/src/js/vendor/fontawesome-icon-defs.js
@@ -0,0 +1,23 @@
+var window
+;(function (scope) {
+  'use strict'
+
+  var admonitionIcons = {
+    caution: 'fas fa-fire',
+    important: 'fas fa-exclamation-circle',
+    note: 'fas fa-info-circle',
+    tip: 'fas fa-lightbulb',
+    warning: 'fas fa-exclamation-triangle',
+  }
+  var additionalIcons = [
+    'fas fa-angle-right',
+    'far fa-copy',
+    'far fa-check-square',
+    'fab fa-github',
+    'far fa-square',
+    'fab fa-twitter',
+  ]
+  var iconDefs = (scope.FontAwesomeIconDefs = [])
+  iconDefs.admonitionIcons = admonitionIcons
+  iconDefs.includes = Object.values(admonitionIcons).concat(additionalIcons)
+})(window || module.exports)
diff --git a/src/js/vendor/fontawesome.bundle.js b/src/js/vendor/fontawesome.bundle.js
@@ -0,0 +1,30 @@
+;(function () {
+  'use strict'
+
+  // NOTE: v4-shims required to support the output of icon macro generated from AsciiDoc content
+  require('@fortawesome/fontawesome-free/js/v4-shims')
+  var fa = require('@fortawesome/fontawesome-svg-core')
+
+  Object.assign(fa.config, {
+    autoReplaceSvg: 'nest',
+    keepOriginalSource: false,
+    observeMutations: false,
+    replacementClass: 'svga',
+  })
+
+  var iconDefs = window.FontAwesomeIconDefs || []
+  iconDefs.forEach(function (iconDef) {
+    fa.library.add(iconDef)
+  })
+
+  var admonitionIcons = iconDefs.admonitionIcons || {}
+  ;[].slice.call(document.querySelectorAll('td.icon > i.fa')).forEach(function (i) {
+    var name = i.className.substr(8)
+    i.className = admonitionIcons[name] || 'fas fa-' + name
+  })
+
+  fa.dom.i2svg()
+
+  delete window.___FONT_AWESOME___
+  delete window.FontAwesomeIconDefs
+})()
diff --git a/src/partials/footer-scripts.hbs b/src/partials/footer-scripts.hbs
@@ -1,4 +1,6 @@
 <script src="{{{uiRootPath}}}/js/site.js"></script>
+<script async src="{{{uiRootPath}}}/js/vendor/fontawesome-icon-defs.js"></script>
+<script async src="{{{uiRootPath}}}/js/vendor/fontawesome.js"></script>
 <script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
 {{#with (resolvePage page.relativeSrcPath model=false)}}
 {{#unless (eq ./asciidoc.attributes.stem undefined)}}

diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs
@@ -83,12 +83,7 @@
           --}}
         </div>
         <a class="navbar-item" href="https://github.com/asciidoctor" target="_blank" rel="noopener">
-          <span class="icon">
-            <!-- Font Awesome Free 5.15.1 by @fontawesome - License: https://fontawesome.com/license/free -->
-            <svg aria-hidden="true" data-prefix="fab" data-icon="github" data-version="5.0.0" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
-              <path fill="#ffffff" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
-            </svg>
-          </span>
+          <i class="fab fa-github icon"></i>
         </a>
       </div>
     </div>