Merge pull request #29 from opendevise/load-required-icons

load required icons

Author: amarantha-k

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

@@ -123,7 +123,11 @@ module.exports = (src, previewSrc, previewDest, sink = () => map()) => (done) =>
               }
             },
             // 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'))
+            () =>
+              fs
+                .readFile(ospath.join(src, 'js/vendor/fontawesome-icon-defs.js'), 'utf8')
+                .then((contents) => registerIconDefs(iconDefs, { contents }))
+                .then(() => writeIconDefs(iconDefs, ospath.join(previewDest, 'fontawesome-icon-defs.js')))
           )
         )
         .pipe(vfs.dest(previewDest))
@@ -223,9 +227,14 @@ function findNavPath (currentUrl, node = [], current_path = [], root = true) {
 
 function registerIconDefs (iconDefs, file) {
   const contents = file.contents
-  if (!contents.includes('<i class="fa')) return
-  const stringContents = contents.toString()
-  const iconNames = stringContents.match(/<i class="fa[brs]? fa-[^" ]+/g).map((it) => it.substr(10))
+  let iconNames = []
+  if (!file.path) {
+    try {
+      iconNames = JSON.parse(contents.match(/\biconNames: *(\[.*?\])/)[1].replace(/'/g, '"'))
+    } catch (e) {}
+  } else if (contents.includes('<i class="fa')) {
+    iconNames = contents.toString().match(/<i class="fa[brs]? fa-[^" ]+/g).map((it) => it.substr(10))
+  }
   if (!iconNames.length) return
   ;[...new Set(iconNames)].reduce((accum, iconKey) => {
     if (!accum.has(iconKey)) {

src/css/clipboard.css

@@ -1,12 +1,6 @@
 .view-source-button {
   color: var(--color-brand-gray4);
-  font-family: "Source Code Pro", sans-serif;
-  background: url(../img/awesome-github.svg) no-repeat center center;
-  background-size: cover;
   display: inline-block;
-  width: 16px;
-  height: 15.5px;
-  font-size: 0;
   margin-left: 0.5rem;
 }
 
@@ -34,8 +28,6 @@
 }
 
 .view-source-button:hover::before {
-  width: 0;
-  height: 0;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
   border-bottom: 10px solid var(--color-brand-white);
@@ -48,16 +40,15 @@
 }
 
 .copy-code-button {
-  background: url(../img/copy.png) no-repeat center right/contain;
-  width: 13px;
-  height: 16px;
-  cursor: pointer;
-  font-family: "Source Sans Pro", sans-serif;
   color: var(--color-brand-gray4);
+  cursor: pointer;
+  display: inline-block;
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
 
+a.view-source-button:focus,
+a.view-source-button:hover,
 a.copy-code-button:focus,
 a.copy-code-button:hover {
   color: var(--color-brand-gray4);
@@ -87,8 +78,6 @@ a.copy-code-button:hover {
 }
 
 .copy-code-button:hover::before {
-  width: 0;
-  height: 0;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
   border-bottom: 10px solid var(--color-brand-white);

src/css/doc.css

@@ -74,29 +74,13 @@
 .doc h5 > a.anchor,
 .doc h6 > a.anchor {
   color: var(--color-brand-blue-secondary);
-  /* background-image: linear-gradient(-45deg, var(--color-brand-purple), var(--color-brand-red) 75%);
-  background-clip: text;
-  -webkit-text-fill-color: transparent; */
-  font-weight: var(--weight-normal);
   position: absolute;
   text-decoration: none;
-  width: 2ex;
-  margin-left: -2ex;
+  width: 3ex;
+  margin-left: -2.5ex;
   visibility: hidden;
-  transform: scale(0.75);
   text-align: center;
-  font-size: 30px;
-}
-
-.doc h1 a.anchor::before,
-.doc h2 a.anchor::before,
-.doc h3 a.anchor::before,
-.doc h4 a.anchor::before,
-.doc h5 a.anchor::before,
-.doc h6 a.anchor::before {
-  content: "\f0c1";
-  font-family: "Font Awesome 5 Free", sans-serif;
-  font-weight: 900;
+  transform: scale(0.75);
 }
 
 .doc h1:hover a.anchor,