Use SVG screenshot

Fixes atlassian#55

README.md

@@ -4,7 +4,9 @@
 
 Main goal of this library is to provide relevant error messages like the following:
 
-<img width="539" alt="Enum Validation Error" src="https://user-images.githubusercontent.com/208544/36072188-6f559ed4-0f6f-11e8-9a23-0c0477ca7f58.png">
+<p align="center">
+  <img src="screenshot.svg">
+</p>
 
 ## Installation
 
@@ -77,7 +79,10 @@ Default: `cli`
 Values: `cli` `js`
 
 Use default `cli` output format if you want to **print** beautiful validation errors like following:
-<img width="539" alt="Enum Validation Error" src="https://user-images.githubusercontent.com/208544/36072188-6f559ed4-0f6f-11e8-9a23-0c0477ca7f58.png">
+
+<p align="center">
+  <img src="screenshot.svg">
+</p>
 
 Or, use `js` if you are planning to use this with some API. Your output will look like following:
 

package.json

@@ -22,6 +22,18 @@
     "index.js",
     "typings.d.ts"
   ],
+  "scripts": {
+    "prebuild": "rm -rf lib",
+    "build": "yarn build:modern && yarn build:legacy",
+    "build:modern": "BABEL_ENV=modern babel src -d lib/modern/",
+    "build:legacy": "BABEL_ENV=legacy babel src -d lib/legacy",
+    "prerelease": "yarn build",
+    "release": "changeset release",
+    "format": "prettier --write src/*.js src/**/*.js .changeset/*.js",
+    "test": "jest",
+    "test-ci": "jest --coverage --colors",
+    "screenshot": "svg-term --command='node screenshot' --out=screenshot.svg --padding=5 --width=80 --height=13 --at=1000 --no-cursor --term iterm2 --profile='deep' --window"
+  },
   "dependencies": {
     "@babel/code-frame": "^7.0.0",
     "@babel/runtime": "^7.0.0",
@@ -52,22 +64,12 @@
     "jest": "^24.9.0",
     "jest-fixtures": "^0.6.0",
     "prettier": "^1.14.2",
-    "pretty-quick": "^1.6.0"
+    "pretty-quick": "^1.6.0",
+    "svg-term-cli": "^2.1.1"
   },
   "peerDependencies": {
     "ajv": "4.11.8 - 6"
   },
-  "scripts": {
-    "prebuild": "rm -rf lib",
-    "build": "yarn build:modern && yarn build:legacy",
-    "build:modern": "BABEL_ENV=modern babel src -d lib/modern/",
-    "build:legacy": "BABEL_ENV=legacy babel src -d lib/legacy",
-    "prerelease": "yarn build",
-    "release": "changeset release",
-    "format": "prettier --write src/*.js src/**/*.js .changeset/*.js",
-    "test": "jest",
-    "test-ci": "jest --coverage --colors"
-  },
   "jest": {
     "testMatch": [
       "<rootDir>/src/**/__tests__/**/*.js"

usage.js → screenshot.js

@@ -1,3 +1,4 @@
+// iTerm2 Theme: https://raw.githubusercontent.com/mbadolato/iTerm2-Color-Schemes/master/schemes/deep.itermcolors
 const Ajv = require('ajv');
 
 const schema = require('./src/__fixtures__/schema.json');

src/__fixtures__/data.json

@@ -1,20 +1,15 @@
 {
   "type": "doc",
+  "version": 1,
   "content": [
     {
-      "type": "table",
+      "type": "paragarph",
       "content": [
         {
-          "type": "tableRow",
-          "content": [
-            {
-              "type": "tableCell",
-              "content": []
-            }
-          ]
+          "type": "text",
+          "text": "hello?"
         }
       ]
     }
-  ],
-  "version": 1
+  ]
 }