Initial commit

f50ac263 · Phil Hughes · f50ac263 · f50ac263 · f50ac263 · f50ac263
Commit f50ac263 authored 7 years ago by Phil Hughes
--- a/.gitignore
+++ b/.gitignore
+node_modules/
+*.log
--- a/dist/notebooklab.js
+++ b/dist/notebooklab.js
--- a/example/index.html
+++ b/example/index.html
+<head>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js" integrity="sha384-/y1Nn9+QQAipbNQWU65krzJralCnuOasHncUFXGkdwntGeSvQicrYkiUBwsgUqc1" crossorigin="anonymous"></script>
+
+  <link rel="stylesheet" href="../styles/main.css" />
+  <script src="../node_modules/vue/dist/vue.min.js"></script>
+  <script src="../dist/notebooklab.js"></script>
+</head>
+<body>
+  <div id="app">
+    <div v-if="loading">
+      Loading...
+    </div>
+    <notebook-lab
+      v-if="!loading"
+      :notebook="json"></notebook-lab>
+  </div>
+  <script>
+    new Vue({
+      el: '#app',
+      data: {
+        loading: true,
+        json: {},
+      },
+      mounted() {
+        const url = 'https://rawgit.com/rasbt/algorithms_in_ipython_notebooks/master/ipython_nbs/data-structures/stacks.ipynb';
+        fetch(url)
+          .then((res) => {
+            return res.json();
+          })
+          .then((json) => {
+            this.json = json;
+            this.loading = false;
+          });
+      },
+    });
+  </script>
+</body>
--- a/index.js
+++ b/index.js
+// import Vue from 'vue';
+import Notebook from './src';
+
+Vue.component('notebook-lab', Notebook);
--- a/package.json
+++ b/package.json
+{
+  "name": "notebooklab",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "webpack-run": "webpack --watch",
+    "webpack": "webpack"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@gitlab.com/gl-frontend/notebooklab.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://gitlab.com/gl-frontend/notebooklab/issues"
+  },
+  "homepage": "https://gitlab.com/gl-frontend/notebooklab#README",
+  "devDependencies": {
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.0",
+    "babel-preset-env": "^1.2.1",
+    "webpack": "^2.2.1"
+  },
+  "dependencies": {
+    "marked": "^0.3.6",
+    "vue": "^2.2.4"
+  }
+}
--- a/src/cells/code.js
+++ b/src/cells/code.js
+import CodeCell from './code/index';
+
+export default {
+  template: `
+    <div class="cell">
+      <code-cell
+        type="input"
+        :raw-code="rawInputCode"
+        :count="cell.execution_count" />
+      <code-cell
+        v-if="hasOutput"
+        type="output"
+        :raw-code="outputText"
+        :count="output.execution_count" />
+    </div>
+  `,
+  components: {
+    'code-cell': CodeCell,
+  },
+  props: {
+    cell: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    rawInputCode() {
+      return this.cell.source.join('');
+    },
+    hasOutput() {
+      return this.cell.outputs.length;
+    },
+    output() {
+      return this.cell.outputs[0];
+    },
+    outputText() {
+      if (this.output.text) {
+        return this.output.text.join('');
+      } else {
+        return this.output.data[Object.keys(this.output.data)[0]].join('');
+      }
+    },
+  },
+};
--- a/src/cells/code/index.js
+++ b/src/cells/code/index.js
+import Prompt from '../prompt';
+
+export default {
+  template: `
+    <div :class="type">
+      <prompt
+        :type="promptType"
+        :count="count" />
+      <pre v-html="code"></pre>
+    </div>
+  `,
+  components: {
+    'prompt': Prompt,
+  },
+  props: {
+    count: {
+      type: Number,
+      required: false,
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+    rawCode: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    code() {
+      if (this.promptType === 'In') {
+        return hljs.highlightAuto(this.rawCode).value;
+      } else {
+        return this.rawCode;
+      }
+    },
+    promptType() {
+      const type = this.type.split('put')[0];
+
+      return type.charAt(0).toUpperCase() + type.slice(1);;
+    },
+  },
+};
--- a/src/cells/index.js
+++ b/src/cells/index.js
+export { default as MarkdownCell } from './markdown';
+export { default as CodeCell } from './code';
--- a/src/cells/markdown.js
+++ b/src/cells/markdown.js
+import marked from 'marked';
+import Prompt from './prompt';
+
+export default {
+  template: `
+    <div class="cell text-cell">
+      <prompt />
+      <div class="markdown" v-html="markdown"></div>
+    </div>
+  `,
+  components: {
+    'prompt': Prompt,
+  },
+  props: {
+    cell: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    markdown() {
+      const regex = new RegExp(/^\$\$(.*)\$\$$/, 'g');
+
+      const source = this.cell.source.map((line) => {
+        const matches = regex.exec(line.trim());
+
+        // Only render use the Katex library if it is actually loaded
+        if (matches && matches.length > 0 && katex) {
+          return katex.renderToString(matches[1]);
+        } else {
+          return line;
+        }
+      });
+
+      return marked(source.join(''));
+    },
+  },
+};
--- a/src/cells/prompt.js
+++ b/src/cells/prompt.js
+export default {
+  template: `
+    <div class="prompt">
+      <span v-if="type && count">
+        {{ type }} [{{ count }}]:
+      </span>
+    </div>
+  `,
+  props: {
+    type: {
+      type: String,
+      required: false,
+    },
+    count: {
+      type: Number,
+      required: false,
+    },
+  },
+};
--- a/src/index.js
+++ b/src/index.js
+import {
+  MarkdownCell,
+  CodeCell,
+} from './cells';
+
+export default {
+  template: `
+    <div v-if="hasNotebook">
+      <component
+        v-for="cell in notebook.cells"
+        :is="cellType(cell.cell_type)"
+        :cell="cell" />
+    </div>
+  `,
+  components: {
+    'code-cell': CodeCell,
+    'markdown-cell': MarkdownCell,
+  },
+  props: {
+    notebook: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    cellType(type) {
+      return `${type}-cell`;
+    },
+  },
+  computed: {
+    hasNotebook() {
+      return Object.keys(this.notebook).length;
+    },
+  },
+};
--- a/styles/main.css
+++ b/styles/main.css
+.cell,
+.input,
+.output {
+  display: flex;
+  width: 100%;
+}
+
+.cell:not(.text-cell) {
+  flex-direction: column;
+}
+
+.prompt {
+  padding: 0 10px;
+  min-width: 6em;
+  font-family: monospace;
+}
+
+.cell pre {
+  margin: 0;
+}
+
+.markdown .katex {
+  display: block;
+  text-align: center;
+}
--- a/webpack.config.js
+++ b/webpack.config.js
+const path = require('path');
+
+module.exports = {
+  entry: './index.js',
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    filename: 'notebooklab.js',
+  },
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      use: ['babel-loader'],
+      exclude: /node_modules/,
+    }],
+  },
+};