[skip CI]smart github CDN with custom script

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

@@ -4,9 +4,8 @@
     <meta charset="UTF-8">
     <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="https://cdn.rawgit.com/Klemek/fa-diagrams/master/dist/fa-diagrams.min.js"></script>
+    <script src="yaml.min.js"></script>
+    <script src="github-cdn.js"></script>
     <style>
         * {
             padding: 0;
@@ -36,10 +35,10 @@
             height: 100vh;
         }
 
-        #input{
-            width:100%;
-            height:100vh;
-            padding:1em;
+        #input {
+            width: 100%;
+            height: 100vh;
+            padding: 1em;
         }
     </style>
 </head>
@@ -49,34 +48,36 @@
 </div>
 <div id="right"></div>
 <script>
-    $(document).ready(() => {
+  $(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');
       });
 
       let timeout;
-        $('#input').on('change keyup paste', () => {
-          clearTimeout(timeout);
-          timeout = setTimeout(() => {
-            try{
-              const findLineBreaks = (data) => {
-                Object.keys(data).forEach(key => {
-                  if(typeof data[key] === 'object')
-                    findLineBreaks(data[key]);
-                  else if(typeof data[key] === 'string')
-                    data[key] = data[key].replace(/\\n/gm,'\n');
-                });
-              };
-              let data = YAML.parse($('#input').val());
-              findLineBreaks(data);
-              $('#right').html(faDiagrams.compute(data));
-            }catch(err){
-              $('#right').html(`<h2>${err.toString().replace(/\n/gm, '<br>')}</h2>`);
-            }
+      $('#input').on('change keyup paste', () => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          try {
+            const findLineBreaks = (data) => {
+              Object.keys(data).forEach(key => {
+                if (typeof data[key] === 'object')
+                  findLineBreaks(data[key]);
+                else if (typeof data[key] === 'string')
+                  data[key] = data[key].replace(/\\n/gm, '\n');
+              });
+            };
+            let data = YAML.parse($('#input').val());
+            findLineBreaks(data);
+            $('#right').html(faDiagrams.compute(data));
+          } catch (err) {
+            $('#right').html(`<h2>${err.toString().replace(/\n/gm, '<br>')}</h2>`);
+          }
 
-          }, 500);
-        });
+        }, 500);
+      });
     });
+  });
 </script>
 </body>
 </html>