status-im
/
codimd
mirror of https://github.com/status-im/codimd.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Feature/support vega lite (#1251) 

Feature/support vega lite
This commit is contained in:
Max Wu 2019-08-06 23:03:37 +08:00 committed by GitHub
parent 59c3452d39 71ea581796
commit e89f820542
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 103 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -138,6 +138,9 @@
"turndown": "~5.0.3",
"uuid": "~3.3.2",
"validator": "~11.1.0",
"vega": "~5.4.0",
"vega-embed": "~4.2.2",
"vega-lite": "~3.4.0",
"velocity-animate": "~1.5.2",
"visibilityjs": "~2.0.2",
"viz.js": "~2.1.2",

9
public/css/markdown.css
View File

@ -126,7 +126,8 @@
.markdown-body pre.sequence-diagram,
.markdown-body pre.graphviz,
.markdown-body pre.mermaid,
.markdown-body pre.abc {
.markdown-body pre.abc,
.markdown-body pre.vega {
text-align: center;
background-color: inherit;
border-radius: 0;
@ -147,7 +148,8 @@
.markdown-body pre.sequence-diagram > code,
.markdown-body pre.graphviz > code,
.markdown-body pre.mermaid > code,
.markdown-body pre.abc > code {
.markdown-body pre.abc > code,
.markdown-body pre.vega > code {
text-align: left;
}
@ -155,7 +157,8 @@
.markdown-body pre.sequence-diagram > svg,
.markdown-body pre.graphviz > svg,
.markdown-body pre.mermaid > svg,
.markdown-body pre.abc > svg {
.markdown-body pre.abc > svg,
.markdown-body pre.vega > svg {
max-width: 100%;
height: 100%;
}

9
public/css/slide.css
View File

@ -223,7 +223,8 @@ pre.flow-chart,
pre.sequence-diagram,
pre.graphviz,
pre.mermaid,
pre.abc {
pre.abc,
pre.vega {
text-align: center;
background-color: white;
border-radius: 0;
@ -234,7 +235,8 @@ pre.flow-chart > code,
pre.sequence-diagram > code,
pre.graphviz > code,
pre.mermaid > code,
pre.abc > code {
pre.abc > code,
pre.vega > code {
text-align: left;
}
@ -242,7 +244,8 @@ pre.flow-chart > svg,
pre.sequence-diagram > svg,
pre.graphviz > svg,
pre.mermaid > svg,
pre.abc > svg {
pre.abc > svg,
pre.vega > svg {
max-width: 100%;
height: 100%;
}

34
public/docs/features.md
View File

@ -313,11 +313,45 @@ GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|
```
### PlantUML
```plantuml
start
if (condition A) then (yes)
:Text 1;
elseif (condition B) then (yes)
:Text 2;
stop
elseif (condition C) then (yes)
:Text 3;
elseif (condition D) then (yes)
:Text 4;
else (nothing)
:Text else;
endif
stop
```
### Vega-Lite
```vega
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"data": {"url": "https://vega.github.io/editor/data/barley.json"},
"mark": "bar",
"encoding": {
"x": {"aggregate": "sum", "field": "yield", "type": "quantitative"},
"y": {"field": "variety", "type": "nominal"},
"color": {"field": "site", "type": "nominal"}
}
}
```
> More information about **sequence diagrams** syntax [here](http://bramp.github.io/js-sequence-diagrams/).
> More information about **flow charts** syntax [here](http://adrai.github.io/flowchart.js/).
> More information about **graphviz** syntax [here](http://www.tonyballantyne.com/graphs.html)
> More information about **mermaid** syntax [here](http://knsv.github.io/mermaid)
> More information about **abc** syntax [here](http://abcnotation.com/learn)
> More information about **plantuml** syntax [here](http://plantuml.com/index)
> More information about **vega** syntax [here](https://vega.github.io/vega-lite/docs)
Alert Area
---

28
public/js/extra.js
View File

@ -419,6 +419,32 @@ export function finishView (view) {
console.warn(err)
}
})
// vega-lite
const vegas = view.find('div.vega.raw').removeClass('raw')
vegas.each((key, value) => {
try {
var $value = $(value)
var $ele = $(value).parent().parent()
const specText = $value.text()
$value.unwrap()
window.vegaEmbed($ele[0], JSON.parse(specText))
.then(result => {
$ele.addClass('vega')
})
.catch(err => {
$ele.append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
console.warn(err)
})
.finally(() => {
if (window.viewAjaxCallback) window.viewAjaxCallback()
})
} catch (err) {
$ele.append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
console.warn(err)
}
})
// image href new window(emoji not included)
const images = view.find('img.raw[src]').removeClass('raw')
images.each((key, value) => {
@ -926,6 +952,8 @@ function highlightRender (code, lang) {
return `<div class="mermaid raw">${code}</div>`
} else if (lang === 'abc') {
return `<div class="abc raw">${code}</div>`
} else if (lang === 'vega') {
return `<div class="vega raw">${code}</div>`
}
const result = {
value: code

2
public/js/index.js
View File

@ -100,7 +100,7 @@ var cursorActivityDebounce = 50
var cursorAnimatePeriod = 100
var supportContainers = ['success', 'info', 'warning', 'danger', 'spoiler']
var supportCodeModes = ['javascript', 'typescript', 'jsx', 'htmlmixed', 'htmlembedded', 'css', 'xml', 'clike', 'clojure', 'ruby', 'python', 'shell', 'php', 'sql', 'haskell', 'coffeescript', 'yaml', 'pug', 'lua', 'cmake', 'nginx', 'perl', 'sass', 'r', 'dockerfile', 'tiddlywiki', 'mediawiki', 'go', 'gherkin'].concat(hljs.listLanguages())
var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml']
var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega']
var supportHeaders = [
{
text: '# h1',

5
public/views/codimd/foot.ejs
View File

@ -19,7 +19,10 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.6.0/gist-embed.min.js" integrity="sha256-KyF2D6xPIJUW5sUDSs93vWyZm+1RzIpKCexxElmxl8g=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/1.7.0/viz.js" integrity="sha256-8t+rndrF+TU4JtelmOH1lDHTMe2ovhO2UbzDArp5lY8=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.8/validator.min.js" integrity="sha256-LHeY7YoYJ0SSXbCx7sR14Pqna+52moaH3bhv0Mjzd/M=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.4.0/vega.min.js" integrity="sha256-PrkRj4B3I5V9yHBLdO3jyyqNUwSKS1CXXIh3VrnFPEU=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/3.4.0/vega-lite.min.js" integrity="sha256-ro+FWr16NboXJ5rSwInNli1P16ObUXnWUJMgKc8KnHI=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/4.2.2/vega-embed.min.js" integrity="sha256-FvIpRBgWEczIjFNpbshtVJbx3QlxqxkBkf+xqZeOxUU=" crossorigin="anonymous" defer></script>
<%- include ../build/index-scripts %>
<% } else { %>
<script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>

5
public/views/pretty.ejs
View File

@ -88,7 +88,10 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.6.0/gist-embed.min.js" integrity="sha256-KyF2D6xPIJUW5sUDSs93vWyZm+1RzIpKCexxElmxl8g=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/1.7.0/viz.js" integrity="sha256-8t+rndrF+TU4JtelmOH1lDHTMe2ovhO2UbzDArp5lY8=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.4.0/vega.min.js" integrity="sha256-PrkRj4B3I5V9yHBLdO3jyyqNUwSKS1CXXIh3VrnFPEU=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/3.4.0/vega-lite.min.js" integrity="sha256-ro+FWr16NboXJ5rSwInNli1P16ObUXnWUJMgKc8KnHI=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/4.2.2/vega-embed.min.js" integrity="sha256-FvIpRBgWEczIjFNpbshtVJbx3QlxqxkBkf+xqZeOxUU=" crossorigin="anonymous" defer></script>
<%- include build/pretty-scripts %>
<% } else { %>
<script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>

5
public/views/slide.ejs
View File

@ -104,7 +104,10 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.6.0/gist-embed.min.js" integrity="sha256-KyF2D6xPIJUW5sUDSs93vWyZm+1RzIpKCexxElmxl8g=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/viz.js" integrity="sha256-8t+rndrF+TU4JtelmOH1lDHTMe2ovhO2UbzDArp5lY8=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic-min.js" integrity="sha256-Sq1r2XXWXQoShQKsS0Wrf5r7fRkErd9Fat9vHYeU68s=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.4.0/vega.min.js" integrity="sha256-PrkRj4B3I5V9yHBLdO3jyyqNUwSKS1CXXIh3VrnFPEU=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/3.4.0/vega-lite.min.js" integrity="sha256-ro+FWr16NboXJ5rSwInNli1P16ObUXnWUJMgKc8KnHI=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/4.2.2/vega-embed.min.js" integrity="sha256-FvIpRBgWEczIjFNpbshtVJbx3QlxqxkBkf+xqZeOxUU=" crossorigin="anonymous" defer></script>
<%- include build/slide-scripts %>
<% } else { %>
<script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>

14
webpack.common.js
View File

@ -257,6 +257,9 @@ module.exports = {
'imports-loader?Raphael=raphael!js-sequence-diagrams',
'expose-loader?Viz!viz.js',
'script-loader!abcjs',
'script-loader!vega',
'script-loader!vega-lite',
'script-loader!vega-embed',
'expose-loader?io!socket.io-client',
'expose-loader?RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/index.js')
@ -292,6 +295,9 @@ module.exports = {
'imports-loader?Raphael=raphael!js-sequence-diagrams',
'expose-loader?Viz!viz.js',
'script-loader!abcjs',
'script-loader!vega',
'script-loader!vega-lite',
'script-loader!vega-embed',
'expose-loader?RevealMarkdown!reveal-markdown',
path.join(__dirname, 'public/js/pretty.js')
],
@ -330,6 +336,9 @@ module.exports = {
'imports-loader?Raphael=raphael!js-sequence-diagrams',
'expose-loader?Viz!viz.js',
'script-loader!abcjs',
'script-loader!vega',
'script-loader!vega-lite',
'script-loader!vega-embed',
'headjs',
'expose-loader?Reveal!reveal.js',
'expose-loader?RevealMarkdown!reveal-markdown',
@ -362,7 +371,10 @@ module.exports = {
'reveal-markdown': path.join(__dirname, 'public/js/reveal-markdown.js'),
abcjs: path.join(__dirname, 'public/vendor/abcjs_basic_3.1.1-min.js'),
raphael: path.join(__dirname, 'node_modules/raphael/raphael.min.js'),
'js-sequence-diagrams': path.join(__dirname, 'node_modules/@hackmd/js-sequence-diagrams/build/main.js')
'js-sequence-diagrams': path.join(__dirname, 'node_modules/@hackmd/js-sequence-diagrams/build/main.js'),
vega: path.join(__dirname, 'node_modules/vega/build/vega.min.js'),
'vega-lite': path.join(__dirname, 'node_modules/vega-lite/build/vega-lite.min.js'),
'vega-embed': path.join(__dirname, 'node_modules/vega-embed/build/vega-embed.min.js')
}
},