Compare commits

...

11 Commits

Author SHA1 Message Date
dependabot[bot] 96c6c7c398 Bump qs from 6.5.2 to 6.5.3
Bumps [qs](https://github.com/ljharb/qs) from 6.5.2 to 6.5.3.
- [Release notes](https://github.com/ljharb/qs/releases)
- [Changelog](https://github.com/ljharb/qs/blob/main/CHANGELOG.md)
- [Commits](https://github.com/ljharb/qs/compare/v6.5.2...v6.5.3)

---
updated-dependencies:
- dependency-name: qs
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
2022-12-09 17:37:41 +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)
[![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)
[![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
**SVG diagrams built from Font-Awesome icons**
@@ -392,6 +395,37 @@ links:
</p>
</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
![](preview/example2.png)
@@ -551,4 +585,88 @@ links:
```
</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 yaml = require('js-yaml');
const svg2img = require('svg2img');
const toml = require('@iarna/toml');
const rendering = require('./src/rendering')({
'scale': 0.05,
@@ -52,6 +53,7 @@ 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');
const tomlRegex = new RegExp(`<!-- data: ${name} -->\\n\`\`\`toml([\\s\\S](?!\`\`\`))*`, 'm');
// JS object
if (jsRegex.test(readme)) {
@@ -73,9 +75,16 @@ ${JSON.stringify(data, null, 2)}`);
\`\`\`yaml
${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)
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);
fs.writeFileSync(`preview/${name}.svg`, svg, {encoding: 'utf-8'});
svg2img(svg, function(error, buffer) {
+14 -9
View File
@@ -3,9 +3,9 @@
<head>
<meta charset="UTF-8">
<title>fa-diagrams example</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-yaml@3.13.1/dist/js-yaml.min.js"></script>
<script src="jquery.min.js"></script>
<script src="github-cdn.js"></script>
<script src="toml-parser.js"></script>
<style>
* {
padding: 0;
@@ -44,13 +44,15 @@
</head>
<body>
<div id="left">
<textarea id="input" autocomplete="false" spellcheck="false"></textarea>
<textarea id="input" autocomplete="false" spellcheck="false">loading...</textarea>
</div>
<div id="right"></div>
<div id="right">loading...</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) => {
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');
});
@@ -67,13 +69,16 @@
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);
$('#right').html(faDiagrams.compute(data));
} 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);
});
});
+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",
"version": "1.0.2",
"version": "1.0.3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -217,6 +217,12 @@
"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": {
"version": "24.7.1",
"resolved": "https://registry.npmjs.org/@jest/console/-/console-24.7.1.tgz",
@@ -5238,9 +5244,9 @@
"dev": true
},
"qs": {
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
"version": "6.5.3",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
"integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
"dev": true
},
"querystring": {
+1
View File
@@ -38,6 +38,7 @@
]
},
"devDependencies": {
"@iarna/toml": "^2.2.3",
"browserify": "^16.3.0",
"coveralls": "^3.0.4",
"jest": "^24.8.0",