Added eslint

Moved package deps to dev deps
Added README

.eslintignore

+/node_modules/
+/fixtures/
+/dist/
+index.js

.eslintrc

+{
+  "extends": "airbnb-base",
+  "plugins": [
+    "html",
+    "jest"
+  ],
+  "rules": {
+    "jest/no-disabled-tests": "error",
+    "jest/no-focused-tests": "error",
+    "jest/no-identical-title": "error",
+  },
+  "env": {
+    "browser": true,
+    "jest/globals": true
+  },
+  "globals": {
+    "katex": true
+  }
+}

.gitlab-ci.yml

@@ -15,6 +15,12 @@ compile:
     - yarn install
     - yarn run webpack
+lint:
+  stage: test
+  script:
+    - yarn install
+    - yarn run eslint
+
 test:
   stage: test
   script:

LICENSE

+Copyright (c) 2011-2017 GitLab B.V.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

+# NotebookLab
+
+[![build status](https://gitlab.com/gitlab-org/notebooklab/badges/master/build.svg)](https://gitlab.com/gitlab-org/notebooklab/commits/master)
+
+NotebookLab is a Vue component that makes it easy to render iPython notebooks. It's as simple as
+passing in the returned iPython JSON and the component renders.
+
+The component is not opinionated on how the notebook is fetched. Your applications should handle
+this and then just pass in the parsed JSON file. See the [example](#example) below.
+
+Supports:
+
+- Markdown
+- Code highlighting with [Prism.JS](http://prismjs.com/)
+  - CSS is compatible with [pygments](http://pygments.org/)
+- [Katex](https://github.com/Khan/KaTeX) library
+
+## Usage
+
+Install the plugin by adding the JS file and then install the plugin
+
+```javascript
+Vue.use(NotebookLab);
+```
+
+Then you can instantiate the component by just doing `<notebook-lab />`
+
+```html
+<notebook-lab :notebook="notebookJson" />
+```
+
+The only required props is `notebook` and this is the parsed JSON from the notebook you want to
+display.
+
+For GitLab, we allow different syntax highlighting colors and this plugin allows the colors to be
+changed with the prop `code-css-class`.
+
+```html
+<notebook-lab :notebook="notebookJson" :code-css-class="code white" />
+```
+
+## Example
+
+A simple example that shows how the notebook can be fetched and parsed with `fetch`
+
+```javascript
+import NotebookLab from 'notebooklab';
+
+new Vue({
+  el: '#js-test',
+  template: `
+    <notebook-lab :notebook="json" />
+  `,
+  data() {
+    return {
+      json: {},
+    };
+  },
+  mounted() {
+    fetch('test.ipynb')
+      .then((res) => {
+        return res.json();
+      })
+      .then((data) => {
+        this.json = data;
+      })
+  },
+});
+```

__tests__/index.test.js

 import Vue from 'vue';
-import json from '../fixtures/file.json';
 import NotebookLab from '../index';
 Vue.use(NotebookLab);
@@ -7,7 +6,7 @@ Vue.use(NotebookLab);
 describe('install function', () => {
   test('creates global component', () => {
     expect(
-      Vue.options.components['notebook-lab']
+      Vue.options.components['notebook-lab'],
     ).not.toBeNull();
   });
 });

package.json

 {
   "name": "notebooklab",
   "version": "0.1.0",
-  "description": "",
+  "description": "Vue component to render iPython notebook files! 🚀",
   "main": "index.js",
   "scripts": {
+    "eslint": "eslint --max-warnings 0 --ext .js,.vue .",
     "test": "jest --no-cache",
     "test-run": "jest --no-cache --watch",
     "webpack-run": "webpack --watch",
     "webpack": "webpack"
   },
   "repository": "git+ssh://git@gitlab.com/gl-frontend/notebooklab.git",
-  "author": "",
+  "author": "Phil Hughes <phughes@gitlab.com>",
   "license": "MIT",
   "bugs": {
     "url": "https://gitlab.com/gl-frontend/notebooklab/issues"
@@ -22,16 +23,21 @@
     "babel-loader": "^6.4.0",
     "babel-preset-env": "^1.2.1",
     "babel-preset-es2015": "^6.24.0",
-    "webpack": "^2.2.1"
-  },
-  "dependencies": {
     "css-loader": "^0.27.3",
+    "eslint": "^3.18.0",
+    "eslint-config-airbnb-base": "^11.1.1",
+    "eslint-plugin-html": "^2.0.1",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jest": "^19.0.1",
     "jest": "^19.0.2",
     "jest-vue-preprocessor": "^0.1.3",
+    "vue-loader": "^11.3.1",
+    "webpack": "^2.2.1"
+  },
+  "dependencies": {
     "marked": "^0.3.6",
     "prismjs": "^1.6.0",
     "vue": "^2.2.4",
-    "vue-loader": "^11.1.4",
     "vue-template-compiler": "^2.2.4"
   },
   "jest": {

src/__tests__/index.test.js

 import Vue from 'vue';
 import json from '../../fixtures/file.json';
-import Notebook from '../index';
+import Notebook from '../index.vue';
 const Component = Vue.extend(Notebook);

src/cells/__tests__/code.test.js

 import Vue from 'vue';
 import json from '../../../fixtures/file.json';
-import CodeComponent from '../code';
+import CodeComponent from '../code.vue';
 const Component = Vue.extend(CodeComponent);

src/cells/__tests__/markdown.test.js

 import Vue from 'vue';
 import json from '../../../fixtures/file.json';
-import MarkdownComponent from '../markdown';
+import MarkdownComponent from '../markdown.vue';
 const cell = json.cells[1];
 const Component = Vue.extend(MarkdownComponent);

src/cells/__tests__/prompt.test.js

 import Vue from 'vue';
-import json from '../../../fixtures/file.json';
-import PromptComponent from '../prompt';
-const cell = json.cells[0];
+import PromptComponent from '../prompt.vue';
 const Component = Vue.extend(PromptComponent);
 describe('Prompt component', () => {

src/cells/code/index.vue

@@ -13,12 +13,12 @@
 </template>
 <script>
-  import Prism from '../../lib/highlight.js';
+  import Prism from '../../lib/highlight';
   import Prompt from '../prompt.vue';
   export default {
     components: {
-      'prompt': Prompt,
+      prompt: Prompt,
     },
     props: {
       count: {
@@ -46,7 +46,7 @@
       promptType() {
         const type = this.type.split('put')[0];
-        return type.charAt(0).toUpperCase() + type.slice(1);;
+        return type.charAt(0).toUpperCase() + type.slice(1);
       },
     },
     mounted() {

src/cells/markdown.vue

@@ -11,7 +11,7 @@
   export default {
     components: {
-      'prompt': Prompt,
+      prompt: Prompt,
     },
     props: {
       cell: {
@@ -21,7 +21,7 @@
     },
     computed: {
       markdown() {
-        const regex = new RegExp('^\$\$(.*)\$\$$', 'g');
+        const regex = new RegExp('^\\$\\$(.*)\\$\\$$', 'g');
         const source = this.cell.source.map((line) => {
           const matches = regex.exec(line.trim());
@@ -29,9 +29,9 @@
           // Only render use the Katex library if it is actually loaded
           if (matches && matches.length > 0 && typeof katex !== 'undefined') {
             return katex.renderToString(matches[1]);
-          } else {
-            return line;
           }
+
+          return line;
         });
         return marked(source.join(''));

src/cells/output/__tests__/index.test.js

 import Vue from 'vue';
 import json from '../../../../fixtures/file.json';
-import CodeComponent from '../index';
+import CodeComponent from '../index.vue';
 const Component = Vue.extend(CodeComponent);
@@ -10,12 +10,12 @@ describe('Output component', () => {
   const createComponent = (output) => {
     vm = new Component({
       propsData: {
-        output: output,
+        output,
         count: 1,
       },
     });
     vm.$mount();
-  }
+  };
   describe('text output', () => {
     beforeEach((done) => {

src/cells/output/html.vue

@@ -16,7 +16,7 @@ export default {
     },
   },
   components: {
-    'prompt': Prompt,
+    prompt: Prompt,
   },
 };
 </script>

src/cells/output/image.vue

@@ -21,7 +21,7 @@ export default {
     },
   },
   components: {
-    'prompt': Prompt,
+    prompt: Prompt,
   },
 };
 </script>

src/cells/output/index.vue

@@ -37,7 +37,7 @@ export default {
   data() {
     return {
       outputType: '',
-    }
+    };
   },
   computed: {
     componentName() {
@@ -55,18 +55,17 @@ export default {
         this.outputType = 'image/svg+xml';
         return 'html-output';
-      } else {
-        this.outputType = 'text/plain';
-
-        return 'code-cell';
       }
+
+      this.outputType = 'text/plain';
+      return 'code-cell';
     },
     rawCode() {
       if (this.output.text) {
         return this.output.text.join('');
-      } else {
-        return this.dataForType(this.outputType);
       }
+
+      return this.dataForType(this.outputType);
     },
   },
   methods: {
@@ -78,7 +77,7 @@ export default {
       }
       return data;
-    }
+    },
   },
 };
 </script>

src/lib/__tests__/highlight.test.js

-import Prism from '../highlight.js';
+import Prism from '../highlight';
 describe('Highlight library', () => {
   test('imports python language', () => {

src/lib/highlight.js

 import Prism from 'prismjs';
-import 'prismjs/components/prism-python.js';
-import 'prismjs/plugins/custom-class/prism-custom-class.js';
+import 'prismjs/components/prism-python';
+import 'prismjs/plugins/custom-class/prism-custom-class';
 Prism.plugins.customClass.map({
   comment: 'c',
@@ -13,7 +13,6 @@ Prism.plugins.customClass.map({
   number: 'm',
   'attr-name': 'na',
   builtin: 'nb',
-  constant: 'no',
   entity: 'ni',
   function: 'nf',
   tag: 'nt',

webpack.config.js

@@ -27,7 +27,7 @@ module.exports = {
   plugins: [
     new webpack.optimize.UglifyJsPlugin({
       include: /\.min\.js$/,
-      minimize: true
+      minimize: true,
     }),
   ],
 };