Loads raw JSON & displays in the component

[ci skip]

app/assets/javascripts/blob/notebook_viewer.js

 import Vue from 'vue';
+import VueResource from 'vue-resource';
 import NotebookLab from 'vendor/notebooklab';
 
+Vue.use(VueResource);
 Vue.use(NotebookLab);
 
 $(() => {
+  const el = document.getElementById('js-notebook-viewer');
+
   new Vue({
-    el: '#js-notebook-viewer',
+    el,
     data() {
       return {
+        loading: true,
         json: {},
       };
     },
     template: `
-      <div>
-        <notebook-lab :notebook="json" />
+      <div class="container-fluid">
+        <i
+          class="fa fa-spinner fa-spin"
+          v-if="loading">
+        </i>
+        <notebook-lab
+          v-if="!loading"
+          :notebook="json" />
       </div>
     `,
+    mounted() {
+      $.get(gon.katex_css_url, () => {
+        const css = $('<link>', {
+          rel: 'stylesheet',
+          type: 'text/css',
+          href: gon.katex_css_url,
+        });
+        css.appendTo('head');
+      });
+
+      $.getScript(gon.katex_js_url, () => {
+        this.$http.get(el.dataset.endpoint)
+          .then((res) => {
+            this.json = res.json();
+            this.loading = false;
+          });
+      });
+    },
   });
 });

app/assets/stylesheets/application.scss

@@ -7,6 +7,7 @@
  *= require_self
  *= require dropzone/basic
  *= require cropper.css
+ *= require notebooklab.css
 */
 
 /*

app/views/projects/blob/_notebook.html.haml

@@ -2,4 +2,4 @@
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('notebook_viewer')
 
-.file-content#js-notebook-viewer
+.file-content#js-notebook-viewer{ data: { endpoint: namespace_project_raw_path(@project.namespace, @project, @id) } }

vendor/assets/stylesheets/notebooklab.css

+.cell,
+.input,
+.output {
+  display: flex;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.cell:not(.text-cell) {
+  flex-direction: column;
+}
+
+.prompt {
+  padding: 0 10px;
+  min-width: 7em;
+  font-family: monospace;
+}
+
+.cell pre {
+  margin: 0;
+  width: 100%;
+}
+
+.markdown .katex {
+  display: block;
+  text-align: center;
+}