[skip CI]smart github CDN with custom script

build_docs.sh

@@ -1,6 +0,0 @@
-#!/usr/bin/env bash
-
-# temporary file
-
-npm run prepublishOnly
-cp dist/*.min.js docs

docs/github-cdn.js

@@ -0,0 +1,30 @@
+const github = (repo) => {
+  const self = {
+    loadScript: (file) => new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.open('GET', `https://raw.githubusercontent.com/${repo}/master/${file}`);
+      xhr.onload = function () {
+        if (xhr.status === 200) {
+          const u = URL.createObjectURL(new Blob([xhr.responseText], {type: 'text/javascript'}));
+          const s = document.createElement('script');
+          s.src = u;
+          s.onload = resolve;
+          s.onerror = reject;
+          document.body.appendChild(s);
+          document.body.removeChild(s);
+          URL.revokeObjectURL(u);
+        } else
+          reject();
+      };
+      xhr.send();
+    }),
+    loadScripts: (...files) => new Promise((resolve, reject) => {
+      if (!files || !files.length)
+        return resolve();
+      self.loadScript(files.splice(0, 1)).then(() => {
+        self.loadScripts(...files).then(resolve);
+      }).catch(reject);
+    })
+  };
+  return self;
+};

docs/index.html

@@ -5,8 +5,7 @@
     <title>fa-diagrams example</title>
     <script src="jquery-3.4.1.min.js"></script>
     <script src="yaml.min.js"></script>
-    <script src="https://cdn.rawgit.com/Klemek/fa-diagrams/master/dist/fa-diagrams-data.min.js"></script>
+    <script src="github-cdn.js"></script>
-    <script src="https://cdn.rawgit.com/Klemek/fa-diagrams/master/dist/fa-diagrams.min.js"></script>
     <style>
         * {
             padding: 0;
@@ -36,10 +35,10 @@
             height: 100vh;
         }
 
-        #input{
+        #input {
-            width:100%;
+            width: 100%;
-            height:100vh;
+            height: 100vh;
-            padding:1em;
+            padding: 1em;
         }
     </style>
 </head>
@@ -50,6 +49,7 @@
 <div id="right"></div>
 <script>
   $(document).ready(() => {
+    github('klemek/fa-diagrams').loadScripts('dist/fa-diagrams-data.min.js', 'dist/fa-diagrams.min.js').then(function () {
       $.get('sample.yml', (data) => {
         $('#input').val(data).trigger('paste');
       });
@@ -58,25 +58,26 @@
       $('#input').on('change keyup paste', () => {
         clearTimeout(timeout);
         timeout = setTimeout(() => {
-            try{
+          try {
             const findLineBreaks = (data) => {
               Object.keys(data).forEach(key => {
-                  if(typeof data[key] === 'object')
+                if (typeof data[key] === 'object')
                   findLineBreaks(data[key]);
-                  else if(typeof data[key] === 'string')
+                else if (typeof data[key] === 'string')
-                    data[key] = data[key].replace(/\\n/gm,'\n');
+                  data[key] = data[key].replace(/\\n/gm, '\n');
               });
             };
             let data = YAML.parse($('#input').val());
             findLineBreaks(data);
             $('#right').html(faDiagrams.compute(data));
-            }catch(err){
+          } catch (err) {
             $('#right').html(`<h2>${err.toString().replace(/\n/gm, '<br>')}</h2>`);
           }
 
         }, 500);
       });
     });
+  });
 </script>
 </body>
 </html>