Compare commits

..

11 Commits

Author SHA1 Message Date
dependabot[bot] a1a838e90c Bump hosted-git-info from 2.7.1 to 2.8.9
Bumps [hosted-git-info](https://github.com/npm/hosted-git-info) from 2.7.1 to 2.8.9.
- [Release notes](https://github.com/npm/hosted-git-info/releases)
- [Changelog](https://github.com/npm/hosted-git-info/blob/v2.8.9/CHANGELOG.md)
- [Commits](https://github.com/npm/hosted-git-info/compare/v2.7.1...v2.8.9)

Signed-off-by: dependabot[bot] <support@github.com>
2021-05-10 22:23:50 +00:00
Klemek 602a0892bf Update README.md 2019-10-01 09:13:09 +02:00
Klemek 1b29590bc6 Merge pull request #2 from Klemek/lgtm-fix
Create .lgtm.yml
2019-09-19 10:44:34 +02:00
Klemek 0b38f343b5 Create .lgtm.yml 2019-09-19 10:40:16 +02:00
Klemek f6762dd639 [CI skip] updated README.md 2019-09-19 09:23:02 +02:00
Klemek 91a9a3b949 [skip CI] update docs 2019-08-19 14:33:26 +02:00
Klemek 1f793a659b [skip CI] update docs 2019-08-19 14:33:06 +02:00
Klemek 85c7757cff [skip CI] update docs 2019-08-19 14:29:47 +02:00
Klemek e8d4529ff3 [skip CI] update docs 2019-08-19 14:28:40 +02:00
Klemek 83f6ea4c0a [skip CI] load jquery via http 2019-08-19 13:59:04 +02:00
Klemek 51984d1dba [skip CI] using TOML instead of YAML 2019-08-19 13:53:22 +02:00
10 changed files with 1839 additions and 67 deletions
+7
View File
@@ -0,0 +1,7 @@
path_classifiers:
docs:
- docs
generated:
- dist
test:
- test
+119 -1
View File
@@ -1,6 +1,9 @@
[![npm version](https://img.shields.io/npm/v/fa-diagrams.svg)](https://www.npmjs.com/package/fa-diagrams) [![npm version](https://img.shields.io/npm/v/fa-diagrams.svg)](https://www.npmjs.com/package/fa-diagrams)
[![Build Status](https://img.shields.io/travis/Klemek/fa-diagrams.svg?branch=master)](https://travis-ci.org/Klemek/fa-diagrams) [![Build Status](https://img.shields.io/travis/Klemek/fa-diagrams.svg?branch=master)](https://travis-ci.org/Klemek/fa-diagrams)
[![Scc Count Badge](https://sloc.xyz/github/klemek/fa-diagrams/?category=code)](https://github.com/boyter/scc/#badges-beta)
[![Coverage Status](https://img.shields.io/coveralls/github/Klemek/fa-diagrams.svg?branch=master)](https://coveralls.io/github/Klemek/fa-diagrams?branch=master) [![Coverage Status](https://img.shields.io/coveralls/github/Klemek/fa-diagrams.svg?branch=master)](https://coveralls.io/github/Klemek/fa-diagrams?branch=master)
[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/Klemek/fa-diagrams.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/Klemek/fa-diagrams/context:javascript)
[![Total alerts](https://img.shields.io/lgtm/alerts/g/Klemek/fa-diagrams.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/Klemek/fa-diagrams/alerts/)
# fa-diagrams # fa-diagrams
**SVG diagrams built from Font-Awesome icons** **SVG diagrams built from Font-Awesome icons**
@@ -392,6 +395,37 @@ links:
</p> </p>
</details> </details>
<details>
<summary>TOML data (click)</summary>
<p>
<!-- data: example1 -->
```toml
[[nodes]]
name = "node1"
icon = "laptop-code"
color = "#4E342E"
bottom = "my app"
[[nodes]]
name = "node2"
icon = "globe"
color = "#455A64"
bottom = "world"
[[links]]
from = "node1"
to = "node2"
color = "#333333"
bottom = '"hello"'
[links.top]
icon = "envelope"
```
</p>
</details>
### Example 2 : Web App ### Example 2 : Web App
![](preview/example2.png) ![](preview/example2.png)
@@ -551,4 +585,88 @@ links:
``` ```
</p> </p>
</details> </details>
<details>
<summary>TOML data (click)</summary>
<p>
<!-- data: example2 -->
```toml
[options.placing]
diagonals = false
[options.rendering.icons]
color = "#00695C"
[options.rendering.links]
color = "#26A69A"
[options.rendering.texts]
color = "#004D40"
font = "mono"
font-size = 12
margin = 0.25
[options.rendering.sub-icons]
color = "#004D40"
[[nodes]]
name = "client"
icon = "laptop"
bottom = "user"
[[nodes]]
name = "page"
icon = "file-code"
top = "index.html"
[[nodes]]
name = "js"
icon = "js-square"
bottom = "front-end"
[[nodes]]
name = "server"
icon = "node"
bottom = "back-end"
[[nodes]]
name = "db"
icon = "database"
[[links]]
from = "client"
to = "page"
[[links]]
from = "page"
to = "js"
type = "double"
bottom = "VueJS"
direction = "down"
[links.top]
icon = "vuejs"
[[links]]
from = "js"
to = "server"
type = "split-double"
direction = "right"
[links.top]
text = "Ajax"
[links.bottom]
text = "JSON"
[[links]]
from = "db"
to = "server"
type = "double"
bottom = "Sequelize"
```
</p>
</details>
+10 -1
View File
@@ -1,6 +1,7 @@
const fs = require('fs'); const fs = require('fs');
const yaml = require('js-yaml'); const yaml = require('js-yaml');
const svg2img = require('svg2img'); const svg2img = require('svg2img');
const toml = require('@iarna/toml');
const rendering = require('./src/rendering')({ const rendering = require('./src/rendering')({
'scale': 0.05, 'scale': 0.05,
@@ -52,6 +53,7 @@ const generatePreview = (name, exportSample, data) => {
const jsRegex = new RegExp(`\\/\\/ data: ${name}([\\s\\S](?!};))*\n};`, 'm'); const jsRegex = new RegExp(`\\/\\/ data: ${name}([\\s\\S](?!};))*\n};`, 'm');
const jsonRegex = new RegExp(`<!-- data: ${name} -->\\n\`\`\`json([\\s\\S](?!\`\`\`))*`, 'm'); const jsonRegex = new RegExp(`<!-- data: ${name} -->\\n\`\`\`json([\\s\\S](?!\`\`\`))*`, 'm');
const yamlRegex = new RegExp(`<!-- data: ${name} -->\\n\`\`\`yaml([\\s\\S](?!\`\`\`))*`, 'm'); const yamlRegex = new RegExp(`<!-- data: ${name} -->\\n\`\`\`yaml([\\s\\S](?!\`\`\`))*`, 'm');
const tomlRegex = new RegExp(`<!-- data: ${name} -->\\n\`\`\`toml([\\s\\S](?!\`\`\`))*`, 'm');
// JS object // JS object
if (jsRegex.test(readme)) { if (jsRegex.test(readme)) {
@@ -73,9 +75,16 @@ ${JSON.stringify(data, null, 2)}`);
\`\`\`yaml \`\`\`yaml
${yaml.safeDump(data)}`); ${yaml.safeDump(data)}`);
} }
// TOML
if (tomlRegex.test(readme)) {
console.log(`preview ${name}: found TOML definition`);
readme = readme.replace(tomlRegex, `<!-- data: ${name} -->
\`\`\`toml
${toml.stringify(data)}`);
}
if (exportSample) if (exportSample)
fs.writeFileSync('docs/sample.yml', yaml.safeDump(data), {encoding: 'utf-8'}); fs.writeFileSync('docs/sample.toml', toml.stringify(data), {encoding: 'utf-8'});
const svg = faDiagrams.compute(data); const svg = faDiagrams.compute(data);
fs.writeFileSync(`preview/${name}.svg`, svg, {encoding: 'utf-8'}); fs.writeFileSync(`preview/${name}.svg`, svg, {encoding: 'utf-8'});
svg2img(svg, function(error, buffer) { svg2img(svg, function(error, buffer) {
+14 -9
View File
@@ -3,9 +3,9 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>fa-diagrams example</title> <title>fa-diagrams example</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-yaml@3.13.1/dist/js-yaml.min.js"></script>
<script src="github-cdn.js"></script> <script src="github-cdn.js"></script>
<script src="toml-parser.js"></script>
<style> <style>
* { * {
padding: 0; padding: 0;
@@ -44,13 +44,15 @@
</head> </head>
<body> <body>
<div id="left"> <div id="left">
<textarea id="input" autocomplete="false" spellcheck="false"></textarea> <textarea id="input" autocomplete="false" spellcheck="false">loading...</textarea>
</div> </div>
<div id="right"></div> <div id="right">loading...</div>
<script> <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) => { github('klemek/fa-diagrams').loadScripts('dist/fa-diagrams-data.min.js', 'dist/fa-diagrams.min.js').then(() => {
$.get('sample.toml', (data) => {
$('#input').val(data).trigger('paste'); $('#input').val(data).trigger('paste');
}); });
@@ -67,13 +69,16 @@
data[key] = data[key].replace(/\\n/gm, '\n'); data[key] = data[key].replace(/\\n/gm, '\n');
}); });
}; };
let data = jsyaml.load($('#input').val()); const parser = new TOMLParser();
parser.parse($('#input').val());
let data = parser.finish();
console.log(data);
findLineBreaks(data); findLineBreaks(data);
$('#right').html(faDiagrams.compute(data)); $('#right').html(faDiagrams.compute(data));
} catch (err) { } catch (err) {
$('#right').html(`<h2>${err.toString().replace(/\n/gm, '<br>')}</h2>`); $('#right').html(`<h2>${err.toString().replace(/\n/gm, '<br>')}</h2><h3>(More info at <a target="_blank" href="https://github.com/Klemek/fa-diagrams">fa-diagrams</a> and <a target="_blank" href="https://github.com/toml-lang/toml">TOML</a>)</h3>`);
console.error(err);
} }
}, 500); }, 500);
}); });
}); });
+2
View File
File diff suppressed because one or more lines are too long
+73
View File
@@ -0,0 +1,73 @@
[options.placing]
diagonals = false
[options.rendering.icons]
color = "#00695C"
[options.rendering.links]
color = "#26A69A"
[options.rendering.texts]
color = "#004D40"
font = "mono"
font-size = 12
margin = 0.25
[options.rendering.sub-icons]
color = "#004D40"
[[nodes]]
name = "client"
icon = "laptop"
bottom = "user"
[[nodes]]
name = "page"
icon = "file-code"
top = "index.html"
[[nodes]]
name = "js"
icon = "js-square"
bottom = "front-end"
[[nodes]]
name = "server"
icon = "node"
bottom = "back-end"
[[nodes]]
name = "db"
icon = "database"
[[links]]
from = "client"
to = "page"
[[links]]
from = "page"
to = "js"
type = "double"
bottom = "VueJS"
direction = "down"
[links.top]
icon = "vuejs"
[[links]]
from = "js"
to = "server"
type = "split-double"
direction = "right"
[links.top]
text = "Ajax"
[links.bottom]
text = "JSON"
[[links]]
from = "db"
to = "server"
type = "double"
bottom = "Sequelize"
-52
View File
@@ -1,52 +0,0 @@
options:
placing:
diagonals: false
rendering:
icons:
color: '#00695C'
links:
color: '#26A69A'
texts:
color: '#004D40'
font: mono
font-size: 12
margin: 0.25
sub-icons:
color: '#004D40'
nodes:
- name: client
icon: laptop
bottom: user
- name: page
icon: file-code
top: index.html
- name: js
icon: js-square
bottom: front-end
- name: server
icon: node
bottom: back-end
- name: db
icon: database
links:
- from: client
to: page
- from: page
to: js
type: double
top:
icon: vuejs
bottom: VueJS
direction: down
- from: js
to: server
type: split-double
direction: right
top:
text: Ajax
bottom:
text: JSON
- from: db
to: server
type: double
bottom: Sequelize
+1603
View File
File diff suppressed because it is too large Load Diff
+10 -4
View File
@@ -1,6 +1,6 @@
{ {
"name": "fa-diagrams", "name": "fa-diagrams",
"version": "1.0.2", "version": "1.0.3",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@@ -217,6 +217,12 @@
"minimist": "^1.2.0" "minimist": "^1.2.0"
} }
}, },
"@iarna/toml": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.3.tgz",
"integrity": "sha512-FmuxfCuolpLl0AnQ2NHSzoUKWEJDFl63qXjzdoWBVyFCXzMGm1spBzk7LeHNoVCiWCF7mRVms9e6jEV9+MoPbg==",
"dev": true
},
"@jest/console": { "@jest/console": {
"version": "24.7.1", "version": "24.7.1",
"resolved": "https://registry.npmjs.org/@jest/console/-/console-24.7.1.tgz", "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.7.1.tgz",
@@ -3140,9 +3146,9 @@
} }
}, },
"hosted-git-info": { "hosted-git-info": {
"version": "2.7.1", "version": "2.8.9",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
"integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==", "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
"dev": true "dev": true
}, },
"html-encoding-sniffer": { "html-encoding-sniffer": {
+1
View File
@@ -38,6 +38,7 @@
] ]
}, },
"devDependencies": { "devDependencies": {
"@iarna/toml": "^2.2.3",
"browserify": "^16.3.0", "browserify": "^16.3.0",
"coveralls": "^3.0.4", "coveralls": "^3.0.4",
"jest": "^24.8.0", "jest": "^24.8.0",