feat: add support of vega-lite

Signed-off-by: Max Wu <jackymaxj@gmail.com>

package.json

@@ -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",

public/css/markdown.css

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

public/css/slide.css

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

public/js/extra.js

@@ -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

public/js/index.js

@@ -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',

public/views/codimd/foot.ejs

@@ -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>

public/views/pretty.ejs

@@ -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>

public/views/slide.ejs

@@ -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>

webpack.common.js

@@ -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')
     }
   },