status-im/codimd
2
0
Fork 0
mirror of https://github.com/status-im/codimd.git synced 2025-02-25 18:25:14 +00:00
Code Issues Projects Releases Wiki Activity

feat: add support of vega-lite

Browse Source 
Signed-off-by: Max Wu <jackymaxj@gmail.com>
This commit is contained in:
Max Wu 2019-08-04 20:12:39 +08:00
parent 9042b19a66
commit 49c6672b95
9 changed files with 69 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -139,6 +139,9 @@
"turndown": "~5.0.1",
"uuid": "~3.1.0",
"validator": "~10.4.0",
"vega": "~5.4.0",
"vega-embed": "~4.2.2",
"vega-lite": "~3.4.0",
"velocity-animate": "~1.4.0",
"visibilityjs": "~1.2.4",
"viz.js": "~1.7.0",

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%;
}

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

@ -97,7 +97,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.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/slide-scripts %>
<% } else { %>
<script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>

14
webpack.common.js
View File

@ -258,6 +258,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')
@ -293,6 +296,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')
],
@ -331,6 +337,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',
@ -363,7 +372,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')
}
},