[skip CI] write examples into readme

2019-07-18 10:01:09 +02:00
parent e6a2d21268
commit 3a0cf2e75d
3 changed files with 167 additions and 20 deletions
@@ -53,31 +53,34 @@
 ```javascript
 const faDiagrams = require('fa-diagrams');

+// data: sample
 const data = {
-  nodes: [
+  "nodes": [
    {
-      name: 'node1',
-      icon: 'laptop-code',
-      color: '#4E342E',
-      bottom: 'my app',
+      "name": "node1",
+      "icon": "laptop-code",
+      "color": "#4E342E",
+      "bottom": "my app"
    },
    {
-      name: 'node2',
-      icon: 'globe',
-      color: '#455A64',
-      bottom: 'world'
+      "name": "node2",
+      "icon": "globe",
+      "color": "#455A64",
+      "bottom": "world"
    }
  ],
-  links: [
+  "links": [
    {
-      from: 'node1',
-      to: 'node2',
-      color: '#333333',
-      top: {icon: 'envelope'},
-      bottom: '"hello"'
+      "from": "node1",
+      "to": "node2",
+      "color": "#333333",
+      "top": {
+        "icon": "envelope"
+      },
+      "bottom": "\"hello\""
    }
  ]
-};
+}

 const svg = faDiagrams.compute(data); // string containing xml data

@@ -342,4 +345,58 @@ If you want to change the icons you can edit/build your own `resources.json` as
 ## Examples
 *[back to top](#top)*

+<!-- data: example1 -->
+```json
+{
+  "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",
+      "top": {
+        "icon": "envelope"
+      },
+      "bottom": "\"hello\""
+    }
+  ]
+}
+```
+
+<!-- data: example1 -->
+```yaml
+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'
+    top:
+      icon: envelope
+    bottom: '"hello"'
+
+```
+
+![](preview/example1.svg)
+
 (soon)
@@ -38,7 +38,42 @@ fs.writeFileSync(`preview/links.svg`, rendering.toXML({'g': g}, {w: 1536 * 2, h:

 const faDiagrams = require('./src/index');

-const data = {
+let readme = fs.readFileSync('README.md', {encoding: 'utf-8'});
+
+const generatePreview = (name, exportSample, data) => {
+  const jsRegex = new RegExp(`\\/\\/ data: ${name}([\\s\\S](?!};))*\n};`, 'm');
+  const jsonRegex = new RegExp(`<!-- data: ${name} -->\\n\`\`\`json([\\s\\S](?!\`\`\`))*`, 'm');
+  const yamlRegex = new RegExp(`<!-- data: ${name} -->\\n\`\`\`yaml([\\s\\S](?!\`\`\`))*`, 'm');
+
+  console.log('readme : ', readme.length);
+
+  // JS object
+  if (jsRegex.test(readme)) {
+    console.log(`preview ${name}: found JS object`);
+    console.log(jsRegex.exec(readme))
+    readme = readme.replace(jsRegex, `// data: ${name}\nconst data = ${JSON.stringify(data, null, 2)}`);
+  }
+  // JSON
+  if (jsonRegex.test(readme)) {
+    console.log(`preview ${name}: found JSON definition`);
+    readme = readme.replace(jsonRegex, `<!-- data: ${name} -->
+\`\`\`json
+${JSON.stringify(data, null, 2)}`);
+  }
+  // YAML
+  if (yamlRegex.test(readme)) {
+    console.log(`preview ${name}: found YAML definition`);
+    readme = readme.replace(yamlRegex, `<!-- data: ${name} -->
+\`\`\`yaml
+${yaml.safeDump(data)}`);
+  }
+
+  if (exportSample)
+    fs.writeFileSync('docs/sample.yml', yaml.safeDump(data), {encoding: 'utf-8'});
+  fs.writeFileSync(`preview/${name}.svg`, faDiagrams.compute(data), {encoding: 'utf-8'});
+};
+
+generatePreview('sample', false, {
  nodes: [
    {
      name: 'node1',
@@ -62,8 +97,32 @@ const data = {
      bottom: '"hello"'
    }
  ]
-};
+});

-fs.writeFileSync('docs/sample.yml', yaml.safeDump(data), {encoding: 'utf-8'});
+generatePreview('example1', false, {
+  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',
+      top: {icon: 'envelope'},
+      bottom: '"hello"'
+    }
+  ]
+});

-fs.writeFileSync('preview/sample.svg', faDiagrams.compute(data), {encoding: 'utf-8'});
+fs.writeFileSync('README.md', readme, {encoding: 'utf-8'});
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2.6 1" width="832" height="320" font-family="Arial" font-size="15"
+     fill="black" stroke-width="0">
+    <g transform="translate(1.3 0.5) rotate(0)">
+        <g transform="scale(0.00078125 0.00078125) translate(-448 -256)" fill="#333333">
+            <path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h749.941v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/>
+        </g>
+        <g transform="translate(0 0.05) scale(0.0078125 0.0078125)" fill="#333333">
+            <text text-anchor="middle" x="0" y="18.75">"hello"</text>
+        </g>
+        <g transform="translate(0 -0.15) scale(0.00031250000000000006 0.00031250000000000006) translate(-256 -256)"
+           fill="#333333">
+            <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"/>
+        </g>
+    </g>
+    <g transform="translate(0.65 0.5)">
+        <g transform="scale(0.00078125 0.00078125) translate(-320 -256)" fill="#4E342E">
+            <path d="M255.03 261.65c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L253.25 192l35.71-35.72c6.25-6.25 6.25-16.38 0-22.63l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0l-58.34 58.34c-6.25 6.25-6.25 16.38 0 22.63l58.35 58.34zm96.01-11.3l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0l58.34-58.34c6.25-6.25 6.25-16.38 0-22.63l-58.34-58.34c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L386.75 192l-35.71 35.72c-6.25 6.25-6.25 16.38 0 22.63zM624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z"/>
+        </g>
+        <g transform="translate(0 0.2) scale(0.0078125 0.0078125)" fill="#4E342E">
+            <text text-anchor="middle" x="0" y="18.75">my app</text>
+        </g>
+    </g>
+    <g transform="translate(1.9500000000000002 0.5)">
+        <g transform="scale(0.00078125 0.00078125) translate(-248 -256)" fill="#455A64">
+            <path d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"/>
+        </g>
+        <g transform="translate(0 0.2) scale(0.0078125 0.0078125)" fill="#455A64">
+            <text text-anchor="middle" x="0" y="18.75">world</text>
+        </g>
+    </g>
+</svg>