[skip CI] updated docs to use YAML

2019-07-16 19:48:13 +02:00
parent 244dc7af6b
commit d80af61e7a
7 changed files with 974 additions and 883 deletions
@@ -1,4 +1,5 @@
 const fs = require('fs');
+const YAML = require('yaml');

 const rendering = require('./src/rendering')({
  'scale': 0.05,
@@ -62,6 +63,6 @@ const data = {
  ]
 };

-fs.writeFileSync('docs/sample.json', JSON.stringify(data, null, 4), {encoding: 'utf-8'});
+fs.writeFileSync('docs/sample.yml', YAML.stringify(data, null, 4), {encoding: 'utf-8'});

 fs.writeFileSync('preview/sample.svg', faDiagrams.compute(data), {encoding: 'utf-8'});
@@ -4,6 +4,7 @@
    <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="fa-diagrams-data.min.js"></script>
    <script src="fa-diagrams.min.js"></script>
    <style>
@@ -44,13 +45,13 @@
 </head>
 <body>
 <div id="left">
-    <textarea id="input"></textarea>
+    <textarea id="input" autocomplete="false" spellcheck="false"></textarea>
 </div>
 <div id="right"></div>
 <script>
    $(document).ready(() => {
-      $.getJSON('sample.json', (data) => {
-        $('#input').val(JSON.stringify(data, null, 4)).trigger('paste');
+      $.getJSON('sample.yml', (data) => {
+        $('#input').val(YAML.stringify(data, null, 4)).trigger('paste');
      });

      let timeout;
@@ -58,7 +59,7 @@
          clearTimeout(timeout);
          timeout = setTimeout(() => {
            try{
-              let data = JSON.parse($('#input').val());
+              let data = YAML.parse($('#input').val());
              $('#right').html(faDiagrams.compute(data));
            }catch(err){
              $('#right').html(`<h2>${err.toString().replace(/\n/gm, '<br>')}</h2>`);
@@ -1,24 +0,0 @@
-{
-  "nodes": [
-    {
-      "name": "node1",
-      "icon": "laptop-code",
-      "color": "#4E342E",
-      "bottom": "my app"
-    },
-    {
-      "name": "node2",
-      "icon": "globe",
-      "color": "#455A64",
-      "bottom": "world"
-    }
-  ],
-  "links": [
-    {
-      "from": "node1",
-      "to": "node2",
-      "color": "#333333",
-      "bottom": "hello"
-    }
-  ]
-}
@@ -0,0 +1,14 @@
+nodes:
+  - name: node1
+    icon: laptop-code
+    color: "#4E342E"
+    bottom: my app
+  - name: node2
+    icon: globe
+    color: "#455A64"
+    bottom: world
+links:
+  - from: node1
+    to: node2
+    color: "#333333"
+    bottom: hello