Merge pull request #1557 from hackmdio/release/2.2.0

2020-07-20 14:27:12 +08:00 · 2020-07-20 14:27:12 +08:00 · 3e7544576b
parent 89a0de4205 fad19473e3
commit 3e7544576b
88 changed files with 2090 additions and 244 deletions
--- a/.gitignore
+++ b/.gitignore
@ -28,3 +28,5 @@ public/uploads/*
 !public/uploads/.gitkeep
 /.nyc_output
 /coverage/
+
+.vscode/settings.json
--- a/.nvmrc
+++ b/.nvmrc
@ -0,0 +1 @@
+v10.20.1
--- a/app.js
+++ b/app.js
@ -280,12 +280,18 @@ models.sequelize.sync().then(function () {
  } else {
    throw new Error('server still not ready after db synced')
  }
+}).catch(err => {
+  logger.error('Can\'t sync database')
+  logger.error(err.stack)
+  logger.error('Process will exit now.')
+  process.exit(1)
 })

 // log uncaught exception
 process.on('uncaughtException', function (err) {
  logger.error('An uncaught exception has occured.')
  logger.error(err)
+  console.error(err)
  logger.error('Process will exit now.')
  process.exit(1)
 })
--- a/deployments/docker-compose.yml
+++ b/deployments/docker-compose.yml
@ -10,8 +10,11 @@ services:
      - "database-data:/var/lib/postgresql/data"
    restart: always
  codimd:
-    # you can use image or custom build below
-    image: nabo.codimd.dev/hackmdio/hackmd:2.0.0
+    # you can use image or custom build below,
+    # if you need CJK character with exported PDF files,
+    # please change the image tag with `cjk` postfix version
+    image: nabo.codimd.dev/hackmdio/hackmd:2.1.0
+    # image: nabo.codimd.dev/hackmdio/hackmd:2.1.0-cjk
    # build:
    #   context: ..
    #   dockerfile: ./deployments/Dockerfile
--- a/lib/auth/gitlab/index.js
+++ b/lib/auth/gitlab/index.js
@ -18,8 +18,8 @@ const gitlabAuthStrategy = new GitlabStrategy({
  callbackURL: config.serverURL + '/auth/gitlab/callback'
 }, passportGeneralCallback)

-if (process.env['https_proxy']) {
-  const httpsProxyAgent = new HttpsProxyAgent(process.env['https_proxy'])
+if (process.env.https_proxy) {
+  const httpsProxyAgent = new HttpsProxyAgent(process.env.https_proxy)
  gitlabAuthStrategy._oauth2.setAgent(httpsProxyAgent)
 }

--- a/lib/history/index.js
+++ b/lib/history/index.js
@ -131,7 +131,7 @@ function historyPost (req, res) {
  if (req.isAuthenticated()) {
    var noteId = req.params.noteId
    if (!noteId) {
-      if (typeof req.body['history'] === 'undefined') return response.errorBadRequest(req, res)
+      if (typeof req.body.history === 'undefined') return response.errorBadRequest(req, res)
      if (config.debug) { logger.info('SERVER received history from [' + req.user.id + ']: ' + req.body.history) }
      try {
        var history = JSON.parse(req.body.history)
@ -147,7 +147,7 @@ function historyPost (req, res) {
        return response.errorBadRequest(req, res)
      }
    } else {
-      if (typeof req.body['pinned'] === 'undefined') return response.errorBadRequest(req, res)
+      if (typeof req.body.pinned === 'undefined') return response.errorBadRequest(req, res)
      getHistory(req.user.id, function (err, history) {
        if (err) return response.errorInternalError(req, res)
        if (!history) return response.errorNotFound(req, res)
--- a/lib/imageRouter/filesystem.js
+++ b/lib/imageRouter/filesystem.js
@ -1,10 +1,39 @@
 'use strict'
+
+const crypto = require('crypto')
+const fs = require('fs')
 const URL = require('url').URL
 const path = require('path')

 const config = require('../config')
 const logger = require('../logger')

+/**
+ * generate a random filename for uploaded image
+ */
+function randomFilename () {
+  const buf = crypto.randomBytes(16)
+  return `upload_${buf.toString('hex')}`
+}
+
+/**
+ * pick a filename not exist in filesystem
+ * maximum attempt 5 times
+ */
+function pickFilename (defaultFilename) {
+  let retryCounter = 5
+  let filename = defaultFilename
+  const extname = path.extname(defaultFilename)
+  while (retryCounter-- > 0) {
+    if (fs.existsSync(path.join(config.uploadsPath, filename))) {
+      filename = `${randomFilename()}${extname}`
+      continue
+    }
+    return filename
+  }
+  throw new Error('file exists.')
+}
+
 exports.uploadImage = function (imagePath, callback) {
  if (!imagePath || typeof imagePath !== 'string') {
    callback(new Error('Image path is missing or wrong'), null)
@ -16,11 +45,24 @@ exports.uploadImage = function (imagePath, callback) {
    return
  }

+  let filename = path.basename(imagePath)
+  try {
+    filename = pickFilename(path.basename(imagePath))
+  } catch (e) {
+    return callback(e, null)
+  }
+
+  try {
+    fs.copyFileSync(imagePath, path.join(config.uploadsPath, filename))
+  } catch (e) {
+    return callback(e, null)
+  }
+
  let url
  try {
-    url = (new URL(path.basename(imagePath), config.serverURL + '/uploads/')).href
+    url = (new URL(filename, config.serverURL + '/uploads/')).href
  } catch (e) {
-    url = config.serverURL + '/uploads/' + path.basename(imagePath)
+    url = config.serverURL + '/uploads/' + filename
  }

  callback(null, url)
--- a/lib/imageRouter/index.js
+++ b/lib/imageRouter/index.js
@ -1,5 +1,6 @@
 'use strict'

+const fs = require('fs')
 const Router = require('express').Router
 const formidable = require('formidable')

@ -15,10 +16,6 @@ imageRouter.post('/uploadimage', function (req, res) {

  form.keepExtensions = true

-  if (config.imageUploadType === 'filesystem') {
-    form.uploadDir = config.uploadsPath
-  }
-
  form.parse(req, function (err, fields, files) {
    if (err || !files.image || !files.image.path) {
      response.errorForbidden(req, res)
@ -29,6 +26,8 @@ imageRouter.post('/uploadimage', function (req, res) {

      const uploadProvider = require('./' + config.imageUploadType)
      uploadProvider.uploadImage(files.image.path, function (err, url) {
+        // remove temporary upload file, and ignore any error
+        fs.unlink(files.image.path, () => {})
        if (err !== null) {
          logger.error(err)
          return res.status(500).end('upload image error')
--- a/lib/models/note.js
+++ b/lib/models/note.js
@ -367,8 +367,13 @@ module.exports = function (sequelize, DataTypes) {
  Note.extractNoteTags = function (meta, $) {
    var tags = []
    var rawtags = []
+    var metaTags
    if (meta.tags && (typeof meta.tags === 'string' || typeof meta.tags === 'number')) {
-      var metaTags = ('' + meta.tags).split(',')
+      metaTags = ('' + meta.tags).split(',')
+    } else if (meta.tags && (Array.isArray(meta.tags))) {
+      metaTags = meta.tags
+    }
+    if (metaTags) {
      for (let i = 0; i < metaTags.length; i++) {
        var text = metaTags[i].trim()
        if (text) rawtags.push(text)
--- a/lib/note/index.js
+++ b/lib/note/index.js
@ -2,10 +2,9 @@

 const config = require('../config')
 const logger = require('../logger')
-
 const { Note, User } = require('../models')

-const { newCheckViewPermission, errorForbidden, responseCodiMD, errorNotFound } = require('../response')
+const { newCheckViewPermission, errorForbidden, responseCodiMD, errorNotFound, errorInternalError } = require('../response')
 const { updateHistory } = require('../history')
 const { actionPublish, actionSlide, actionInfo, actionDownload, actionPDF, actionGist, actionRevision, actionPandoc } = require('./noteActions')

@ -121,6 +120,7 @@ async function showPublishNote (req, res) {
  const data = {
    title: title,
    description: meta.description || (markdown ? Note.generateDescription(markdown) : null),
+    image: meta.image,
    viewcount: note.viewcount,
    createtime: createTime,
    updatetime: updateTime,
@ -190,6 +190,49 @@ async function noteActions (req, res) {
  }
 }

+async function getMyNoteList (userId, callback) {
+  const myNotes = await Note.findAll({
+    where: {
+      ownerId: userId
+    }
+  })
+  if (!myNotes) {
+    return callback(null, null)
+  }
+  try {
+    const myNoteList = myNotes.map(note => ({
+      id: Note.encodeNoteId(note.id),
+      text: note.title,
+      tags: Note.parseNoteInfo(note.content).tags,
+      createdAt: note.createdAt,
+      lastchangeAt: note.lastchangeAt,
+      shortId: note.shortid
+    }))
+    if (config.debug) {
+      logger.info('Parse myNoteList success: ' + userId)
+    }
+    return callback(null, myNoteList)
+  } catch (err) {
+    logger.error('Parse myNoteList failed')
+    return callback(err, null)
+  }
+}
+
+function listMyNotes (req, res) {
+  if (req.isAuthenticated()) {
+    getMyNoteList(req.user.id, (err, myNoteList) => {
+      if (err) return errorInternalError(req, res)
+      if (!myNoteList) return errorNotFound(req, res)
+      res.send({
+        myNotes: myNoteList
+      })
+    })
+  } else {
+    return errorForbidden(req, res)
+  }
+}
+
 exports.showNote = showNote
 exports.showPublishNote = showPublishNote
 exports.noteActions = noteActions
+exports.listMyNotes = listMyNotes
--- a/lib/routes.js
+++ b/lib/routes.js
@ -70,6 +70,8 @@ appRouter.get('/s/:shortid/:action', response.publishNoteActions)
 appRouter.get('/p/:shortid', response.showPublishSlide)
 // publish slide actions
 appRouter.get('/p/:shortid/:action', response.publishSlideActions)
+// gey my note list
+appRouter.get('/api/notes/myNotes', noteController.listMyNotes)
 // get note by id
 appRouter.get('/:noteId', wrap(noteController.showNote))
 // note actions
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@ -1,117 +1,121 @@
 {
    "Collaborative markdown notes": "Markdown 协作笔记",
-    "Realtime collaborative markdown notes on all platforms.": "使用 Markdown 的跨平台即时协作笔记",
-    "Best way to write and share your knowledge in markdown.": "您使用 Markdown 写作与分享知识的最佳方式",
+    "Realtime collaborative markdown notes on all platforms.": "使用 Markdown 的跨平台即时协作笔记。",
+    "Best way to write and share your knowledge in markdown.": "写作与分享 Markdown 的最佳平台。",
    "Intro": "简介",
    "History": "历史",
-    "New guest note": "建立访客笔记",
-    "Collaborate with URL": "使用网址协作",
+    "New guest note": "新建访客笔记",
+    "Collaborate with URL": "实时协作",
    "Support charts and MathJax": "支持图表与 MathJax",
-    "Support slide mode": "支持简报模式",
+    "Support slide mode": "支持幻灯模式",
    "Sign In": "登录",
    "Below is the history from browser": "以下为来自浏览器的历史",
    "Welcome!": "欢迎！",
-    "New note": "建立笔记",
+    "New note": "新建笔记",
    "or": "或",
    "Sign Out": "登出",
    "Explore all features": "探索所有功能",
    "Select tags...": "选择标签...",
    "Search keyword...": "搜索关键字...",
-    "Sort by title": "用标题排序",
+    "Sort by title": "按标题排序",
    "Title": "标题",
-    "Sort by time": "用时间排序",
+    "Sort by time": "按时间排序",
    "Time": "时间",
    "Export history": "导出历史",
    "Import history": "导入历史",
    "Clear history": "清空历史",
    "Refresh history": "刷新历史",
-    "No history": "没有历史",
+    "No history": "无历史记录",
    "Import from browser": "从浏览器导入",
    "Releases": "版本",
-    "Are you sure?": "你确定吗？",
-    "Do you really want to delete this note?": "确定要删除这个文件吗？",
-    "All users will lose their connection.": "所有用户将失去连接",
+    "Are you sure?": "您确定吗？",
+    "Do you really want to delete this note?": "您确定要删除这篇笔记吗？",
+    "All users will lose their connection.": "所有用户将失去连接。",
    "Cancel": "取消",
-    "Yes, do it!": "没错，就这样办！",
+    "Yes, do it!": "是的，就这样做！",
    "Choose method": "选择方式",
    "Sign in via %s": "通过 %s 登录",
-    "New": "新增",
+    "New": "新建",
    "Publish": "发表",
-    "Extra": "增益",
+    "Extra": "附加功能",
    "Revision": "修订版本",
-    "Slide Mode": "简报模式",
+    "Slide Mode": "幻灯模式",
    "Export": "导出",
    "Import": "导入",
    "Clipboard": "剪贴板",
    "Download": "下载",
-    "Raw HTML": "纯 HTML",
+    "Raw HTML": "原始 HTML",
    "Edit": "编辑",
-    "View": "检视",
+    "View": "预览",
    "Both": "双栏",
    "Help": "帮助",
    "Upload Image": "上传图片",
    "Menu": "菜单",
-    "This page need refresh": "此页面需要重新整理",
-    "You have an incompatible client version.": "您使用的是不相容的客户端",
-    "Refresh to update.": "请重新整理来更新",
-    "New version available!": "新版本来了！",
-    "See releases notes here": "请由此查阅更新纪录",
-    "Refresh to enjoy new features.": "请重新整理来享受最新功能",
-    "Your user state has changed.": "您的使用者状态已变更",
-    "Refresh to load new user state.": "请重新整理来载入新的使用者状态",
-    "Refresh": "重新整理",
-    "Contacts": "联络方式",
+    "This page need refresh": "此页面需要刷新",
+    "You have an incompatible client version.": "您的客户端版本不兼容。",
+    "Refresh to update.": "刷新页面以更新。",
+    "New version available!": "新版本可用！",
+    "See releases notes here": "在此查看更新记录",
+    "Refresh to enjoy new features.": "刷新页面以体验新功能。",
+    "Your user state has changed.": "您的用户状态已变更。",
+    "Refresh to load new user state.": "刷新页面以加载新的用户状态。",
+    "Refresh": "刷新",
+    "Contacts": "联系我们",
    "Report an issue": "报告问题",
    "Meet us on %s": "在 %s 上联系我们",
-    "Send us email": "寄信给我们",
-    "Documents": "文件",
-    "Features": "功能简介",
-    "YAML Metadata": "YAML Metadata",
-    "Slide Example": "简报范例",
-    "Cheatsheet": "快速简表",
+    "Send us email": "给我们发送电子邮件",
+    "Documents": "文档",
+    "Features": "功能",
+    "YAML Metadata": "YAML 元数据",
+    "Slide Example": "幻灯范例",
+    "Cheatsheet": "速查表",
    "Example": "范例",
    "Syntax": "语法",
    "Header": "标题",
-    "Unordered List": "无序清单",
-    "Ordered List": "有序清单",
-    "Todo List": "待办事项",
+    "Unordered List": "无序列表",
+    "Ordered List": "有序列表",
+    "Todo List": "清单",
    "Blockquote": "引用",
    "Bold font": "粗体",
    "Italics font": "斜体",
    "Strikethrough": "删除线",
-    "Inserted text": "插入文字",
-    "Marked text": "标记文字",
+    "Inserted text": "下划线文字",
+    "Marked text": "高亮文字",
    "Link": "链接",
    "Image": "图片",
    "Code": "代码",
-    "Externals": "外部",
-    "This is a alert area.": "这是警告区块",
+    "Externals": "外部扩展",
+    "This is a alert area.": "这是一个警告区块。",
    "Revert": "还原",
    "Import from clipboard": "从剪贴板导入",
-    "Paste your markdown or webpage here...": "在这里贴上 Markdown 或是网页内容...",
+    "Paste your markdown or webpage here...": "在这里粘贴 Markdown 或网页内容...",
    "Clear": "清除",
-    "This note is locked": "此份笔记已被锁定",
-    "Sorry, only owner can edit this note.": "抱歉，只有拥有者可以编辑此笔记",
+    "This note is locked": "这篇笔记已被锁定",
+    "Sorry, only owner can edit this note.": "抱歉，只有所有者可以编辑这篇笔记。",
    "OK": "好的",
-    "Reach the limit": "到达上限",
-    "Sorry, you've reached the max length this note can be.": "抱歉，您已使用到此份笔记可用的最大长度",
-    "Please reduce the content or divide it to more notes, thank you!": "请减少内容或是将内容切成更多笔记，谢谢！",
+    "Reach the limit": "达到上限",
+    "Sorry, you've reached the max length this note can be.": "抱歉，您的这篇笔记已达到可用的最大长度。",
+    "Please reduce the content or divide it to more notes, thank you!": "请减少笔记的内容。",
    "Import from Gist": "从 Gist 导入",
-    "Paste your gist url here...": "在这里贴上 gist 网址...",
+    "Paste your gist url here...": "在这里粘贴 Gist 网址...",
    "Import from Snippet": "从 Snippet 导入",
    "Select From Available Projects": "从可用的项目中选择",
    "Select From Available Snippets": "从可用的 Snippets 中选择",
-    "OR": "或是",
+    "OR": "或",
    "Export to Snippet": "导出到 Snippet",
    "Select Visibility Level": "选择可见层级",
    "Night Theme": "夜间主题",
-    "Follow us on %s and %s.": "在%s和%s上关注我们",
-    "Privacy": "隐私政策",
+    "Follow us on %s and %s.": "在 %s 和 %s 上关注我们",
+    "Privacy": "隐私",
    "Terms of Use": "使用条款",
-    "Do you really want to delete your user account?": "你确定真的想要删除帐户？",
-    "This will delete your account, all notes that are owned by you and remove all references to your account from other notes.": "我们将会删除你的帐户、你所拥有的笔记、以及你在别人笔记里的作者纪录。",
+    "Do you really want to delete your user account?": "您确定要删除帐户吗？",
+    "This will delete your account, all notes that are owned by you and remove all references to your account from other notes.": "您的帐户、您所拥有的笔记、他人笔记中对您帐户的引用都将被删除。",
    "Delete user": "删除帐户",
-    "Export user data": "汇出使用者资料",
-    "Help us translating on %s": "来 %s 帮我们翻译",
-    "Source Code": "源码"
-}
+    "Export user data": "导出用户数据",
+    "Help us translating on %s": "在 %s 上帮我们翻译",
+    "Source Code": "源代码",
+    "Powered by %s": "由 %s 驱动",
+    "Register": "注册",
+    "Export with pandoc": "使用 Pandoc 导出",
+    "Select output format": "选择输出格式"
+}
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "codimd",
-  "version": "2.1.0",
+  "version": "2.2.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@ -1085,6 +1085,266 @@
        "@types/node": "*"
      }
    },
+    "@types/d3": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-5.7.2.tgz",
+      "integrity": "sha512-7/wClB8ycneWGy3jdvLfXKTd5SoTg9hji7IdJ0RuO9xTY54YpJ8zlcFADcXhY1J3kCBwxp+/1jeN6a5OMwgYOw==",
+      "dev": true,
+      "requires": {
+        "@types/d3-array": "^1",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-collection": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-voronoi": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "@types/d3-array": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-1.2.7.tgz",
+      "integrity": "sha512-51vHWuUyDOi+8XuwPrTw3cFqyh2Slg9y8COYkRfjCPG9TfYqY0hoNPzv/8BrcAy0FeQBzqEo/D/8Nk2caOQJnA==",
+      "dev": true
+    },
+    "@types/d3-axis": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-1.0.12.tgz",
+      "integrity": "sha512-BZISgSD5M8TgURyNtcPAmUB9sk490CO1Thb6/gIn0WZTt3Y50IssX+2Z0vTccoqZksUDTep0b+o4ofXslvNbqg==",
+      "dev": true,
+      "requires": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "@types/d3-brush": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-1.1.1.tgz",
+      "integrity": "sha512-Exx14trm/q2cskHyMjCrdDllOQ35r1/pmZXaOIt8bBHwYNk722vWY3VxHvN0jdFFX7p2iL3+gD+cGny/aEmhlw==",
+      "dev": true,
+      "requires": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "@types/d3-chord": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-1.0.9.tgz",
+      "integrity": "sha512-UA6lI9CVW5cT5Ku/RV4hxoFn4mKySHm7HEgodtfRthAj1lt9rKZEPon58vyYfk+HIAm33DtJJgZwMXy2QgyPXw==",
+      "dev": true
+    },
+    "@types/d3-collection": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-collection/-/d3-collection-1.0.8.tgz",
+      "integrity": "sha512-y5lGlazdc0HNO0F3UUX2DPE7OmYvd9Kcym4hXwrJcNUkDaypR5pX+apuMikl9LfTxKItJsY9KYvzBulpCKyvuQ==",
+      "dev": true
+    },
+    "@types/d3-color": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.2.2.tgz",
+      "integrity": "sha512-6pBxzJ8ZP3dYEQ4YjQ+NVbQaOflfgXq/JbDiS99oLobM2o72uAST4q6yPxHv6FOTCRC/n35ktuo8pvw/S4M7sw==",
+      "dev": true
+    },
+    "@types/d3-contour": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-1.3.0.tgz",
+      "integrity": "sha512-AUCUIjEnC5lCGBM9hS+MryRaFLIrPls4Rbv6ktqbd+TK/RXZPwOy9rtBWmGpbeXcSOYCJTUDwNJuEnmYPJRxHQ==",
+      "dev": true,
+      "requires": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "@types/d3-dispatch": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-1.0.8.tgz",
+      "integrity": "sha512-lCDtqoYez0TgFN3FljBXrz2icqeSzD0gufGook6DPBia+NOh2TBfogjHIsmNa/a+ZOewlHtq4cgLY80O1uLymw==",
+      "dev": true
+    },
+    "@types/d3-drag": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-1.2.3.tgz",
+      "integrity": "sha512-rWB5SPvkYVxW3sqUxHOJUZwifD0KqvKwvt1bhNqcLpW6Azsd0BJgRNcyVW8GAferaAk5r8dzeZnf9zKlg9+xMQ==",
+      "dev": true,
+      "requires": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "@types/d3-dsv": {
+      "version": "1.0.36",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-1.0.36.tgz",
+      "integrity": "sha512-jbIWQ27QJcBNMZbQv0NSQMHnBDCmxghAxePxgyiPH1XPCRkOsTBei7jcdi3fDrUCGpCV3lKrSZFSlOkhUQVClA==",
+      "dev": true
+    },
+    "@types/d3-ease": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-1.0.9.tgz",
+      "integrity": "sha512-U5ADevQ+W6fy32FVZZC9EXallcV/Mi12A5Tkd0My5MrC7T8soMQEhlDAg88XUWm0zoCQlB4XV0en/24LvuDB4Q==",
+      "dev": true
+    },
+    "@types/d3-fetch": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-1.1.5.tgz",
+      "integrity": "sha512-o9c0ItT5/Gl3wbNuVpzRnYX1t3RghzeWAjHUVLuyZJudiTxC4f/fC0ZPFWLQ2lVY8pAMmxpV8TJ6ETYCgPeI3A==",
+      "dev": true,
+      "requires": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "@types/d3-force": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-1.2.1.tgz",
+      "integrity": "sha512-jqK+I36uz4kTBjyk39meed5y31Ab+tXYN/x1dn3nZEus9yOHCLc+VrcIYLc/aSQ0Y7tMPRlIhLetulME76EiiA==",
+      "dev": true
+    },
+    "@types/d3-format": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-1.3.1.tgz",
+      "integrity": "sha512-KAWvReOKMDreaAwOjdfQMm0HjcUMlQG47GwqdVKgmm20vTd2pucj0a70c3gUSHrnsmo6H2AMrkBsZU2UhJLq8A==",
+      "dev": true
+    },
+    "@types/d3-geo": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-1.11.1.tgz",
+      "integrity": "sha512-Ox8WWOG3igDRoep/dNsGbOiSJYdUG3ew/6z0ETvHyAtXZVBjOE0S96zSSmzgl0gqQ3RdZjn2eeJOj9oRcMZPkQ==",
+      "dev": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
+    "@types/d3-hierarchy": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-1.1.6.tgz",
+      "integrity": "sha512-vvSaIDf/Ov0o3KwMT+1M8+WbnnlRiGjlGD5uvk83a1mPCTd/E5x12bUJ/oP55+wUY/4Kb5kc67rVpVGJ2KUHxg==",
+      "dev": true
+    },
+    "@types/d3-interpolate": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-1.3.1.tgz",
+      "integrity": "sha512-z8Zmi08XVwe8e62vP6wcA+CNuRhpuUU5XPEfqpG0hRypDE5BWNthQHB1UNWWDB7ojCbGaN4qBdsWp5kWxhT1IQ==",
+      "dev": true,
+      "requires": {
+        "@types/d3-color": "*"
+      }
+    },
+    "@types/d3-path": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.8.tgz",
+      "integrity": "sha512-AZGHWslq/oApTAHu9+yH/Bnk63y9oFOMROtqPAtxl5uB6qm1x2lueWdVEjsjjV3Qc2+QfuzKIwIR5MvVBakfzA==",
+      "dev": true
+    },
+    "@types/d3-polygon": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-1.0.7.tgz",
+      "integrity": "sha512-Xuw0eSjQQKs8jTiNbntWH0S+Xp+JyhqxmQ0YAQ3rDu6c3kKMFfgsaGN7Jv5u3zG6yVX/AsLP/Xs/QRjmi9g43Q==",
+      "dev": true
+    },
+    "@types/d3-quadtree": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
+      "integrity": "sha512-0ajFawWicfjsaCLh6NzxOyVDYhQAmMFbsiI3MPGLInorauHFEh9/Cl6UHNf+kt/J1jfoxKY/ZJaKAoDpbvde5Q==",
+      "dev": true
+    },
+    "@types/d3-random": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-1.1.2.tgz",
+      "integrity": "sha512-Jui+Zn28pQw/3EayPKaN4c/PqTvqNbIPjHkgIIFnxne1FdwNjfHtAIsZIBMKlquQNrrMjFzCrlF2gPs3xckqaA==",
+      "dev": true
+    },
+    "@types/d3-scale": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-2.2.0.tgz",
+      "integrity": "sha512-oQFanN0/PiR2oySHfj+zAAkK1/p4LD32Nt1TMVmzk+bYHk7vgIg/iTXQWitp1cIkDw4LMdcgvO63wL+mNs47YA==",
+      "dev": true,
+      "requires": {
+        "@types/d3-time": "*"
+      }
+    },
+    "@types/d3-scale-chromatic": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz",
+      "integrity": "sha512-9/D7cOBKdZdTCPc6re0HeSUFBM0aFzdNdmYggUWT9SRRiYSOa6Ys2xdTwHKgc1WS3gGfwTMatBOdWCS863REsg==",
+      "dev": true
+    },
+    "@types/d3-selection": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.4.2.tgz",
+      "integrity": "sha512-ksY8UxvTXpzD91Dy3D9zZg98yF2ZEPMKJd8ZQJlZt1QH3Xxr08s6fESEdC2l0Kbe6Xd9VhaoJX06cRaMR1lEnA==",
+      "dev": true
+    },
+    "@types/d3-shape": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.2.tgz",
+      "integrity": "sha512-LtD8EaNYCaBRzHzaAiIPrfcL3DdIysc81dkGlQvv7WQP3+YXV7b0JJTtR1U3bzeRieS603KF4wUo+ZkJVenh8w==",
+      "dev": true,
+      "requires": {
+        "@types/d3-path": "*"
+      }
+    },
+    "@types/d3-time": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.0.10.tgz",
+      "integrity": "sha512-aKf62rRQafDQmSiv1NylKhIMmznsjRN+MnXRXTqHoqm0U/UZzVpdrtRnSIfdiLS616OuC1soYeX1dBg2n1u8Xw==",
+      "dev": true
+    },
+    "@types/d3-time-format": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.1.1.tgz",
+      "integrity": "sha512-tJSyXta8ZyJ52wDDHA96JEsvkbL6jl7wowGmuf45+fAkj5Y+SQOnz0N7/H68OWmPshPsAaWMQh+GAws44IzH3g==",
+      "dev": true
+    },
+    "@types/d3-timer": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-1.0.9.tgz",
+      "integrity": "sha512-WvfJ3LFxBbWjqRGz9n7GJt08RrTHPJDVsIwwoCMROlqF+iDacYiAFjf9oqnq0mXpb2juA2N/qjKP+MKdal3YNQ==",
+      "dev": true
+    },
+    "@types/d3-transition": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-1.1.6.tgz",
+      "integrity": "sha512-/F+O2r4oz4G9ATIH3cuSCMGphAnl7VDx7SbENEK0NlI/FE8Jx2oiIrv0uTrpg7yF/AmuWbqp7AGdEHAPIh24Gg==",
+      "dev": true,
+      "requires": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "@types/d3-voronoi": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.9.tgz",
+      "integrity": "sha512-DExNQkaHd1F3dFPvGA/Aw2NGyjMln6E9QzsiqOcBgnE+VInYnFBHBBySbZQts6z6xD+5jTfKCP7M4OqMyVjdwQ==",
+      "dev": true
+    },
+    "@types/d3-zoom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-1.7.4.tgz",
+      "integrity": "sha512-5jnFo/itYhJeB2khO/lKe730kW/h2EbKMOvY0uNp3+7NdPm4w63DwPEMxifQZ7n902xGYK5DdU67FmToSoy4VA==",
+      "dev": true,
+      "requires": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
    "@types/estree": {
      "version": "0.0.39",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
@ -1116,6 +1376,12 @@
      "integrity": "sha512-mky/O83TXmGY39P1H9YbUpjV6l6voRYlufqfFCvel8l1phuy8HRjdWc1rrPuN53ITBJlbyMSV6z3niOySO5pgQ==",
      "dev": true
    },
+    "@types/geojson": {
+      "version": "7946.0.7",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
+      "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==",
+      "dev": true
+    },
    "@types/http-assert": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/@types/http-assert/-/http-assert-1.5.1.tgz",
@ -4665,6 +4931,15 @@
        "d3-dsv": "1"
      }
    },
+    "d3-flextree": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-flextree/-/d3-flextree-2.1.1.tgz",
+      "integrity": "sha512-P0SK6bRm0PT5ZZON8Lh/aOcFfr4rO53kaYCXCgwBCvsHJcYjtOb8fNrgmpOmCMCgfrT9EczXzD8wqEO8mlkBrA==",
+      "dev": true,
+      "requires": {
+        "d3-hierarchy": "^1.1.5"
+      }
+    },
    "d3-force": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.2.1.tgz",
@ -7159,28 +7434,28 @@
      "dependencies": {
        "abbrev": {
          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+          "resolved": false,
          "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
          "dev": true,
          "optional": true
        },
        "ansi-regex": {
          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "resolved": false,
          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
          "dev": true,
          "optional": true
        },
        "aproba": {
          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+          "resolved": false,
          "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
          "dev": true,
          "optional": true
        },
        "are-we-there-yet": {
          "version": "1.1.5",
-          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+          "resolved": false,
          "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
          "dev": true,
          "optional": true,
@ -7191,14 +7466,14 @@
        },
        "balanced-match": {
          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
          "dev": true,
          "optional": true
        },
        "brace-expansion": {
          "version": "1.1.11",
-          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+          "resolved": false,
          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
          "dev": true,
          "optional": true,
@ -7209,42 +7484,42 @@
        },
        "chownr": {
          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.3.tgz",
+          "resolved": false,
          "integrity": "sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==",
          "dev": true,
          "optional": true
        },
        "code-point-at": {
          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+          "resolved": false,
          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
          "dev": true,
          "optional": true
        },
        "concat-map": {
          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+          "resolved": false,
          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
          "dev": true,
          "optional": true
        },
        "console-control-strings": {
          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+          "resolved": false,
          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
          "dev": true,
          "optional": true
        },
        "core-util-is": {
          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+          "resolved": false,
          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
          "dev": true,
          "optional": true
        },
        "debug": {
          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "resolved": false,
          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
          "dev": true,
          "optional": true,
@ -7254,28 +7529,28 @@
        },
        "deep-extend": {
          "version": "0.6.0",
-          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+          "resolved": false,
          "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
          "dev": true,
          "optional": true
        },
        "delegates": {
          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
          "dev": true,
          "optional": true
        },
        "detect-libc": {
          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+          "resolved": false,
          "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
          "dev": true,
          "optional": true
        },
        "fs-minipass": {
          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz",
+          "resolved": false,
          "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==",
          "dev": true,
          "optional": true,
@ -7285,14 +7560,14 @@
        },
        "fs.realpath": {
          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
          "dev": true,
          "optional": true
        },
        "gauge": {
          "version": "2.7.4",
-          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+          "resolved": false,
          "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
          "dev": true,
          "optional": true,
@ -7309,7 +7584,7 @@
        },
        "glob": {
          "version": "7.1.6",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+          "resolved": false,
          "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
          "dev": true,
          "optional": true,
@ -7324,14 +7599,14 @@
        },
        "has-unicode": {
          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+          "resolved": false,
          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
          "dev": true,
          "optional": true
        },
        "iconv-lite": {
          "version": "0.4.24",
-          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+          "resolved": false,
          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
          "dev": true,
          "optional": true,
@ -7341,7 +7616,7 @@
        },
        "ignore-walk": {
          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.3.tgz",
+          "resolved": false,
          "integrity": "sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==",
          "dev": true,
          "optional": true,
@ -7351,7 +7626,7 @@
        },
        "inflight": {
          "version": "1.0.6",
-          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+          "resolved": false,
          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
          "dev": true,
          "optional": true,
@ -7362,21 +7637,21 @@
        },
        "inherits": {
          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "resolved": false,
          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
          "dev": true,
          "optional": true
        },
        "ini": {
          "version": "1.3.5",
-          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+          "resolved": false,
          "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
          "dev": true,
          "optional": true
        },
        "is-fullwidth-code-point": {
          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
          "dev": true,
          "optional": true,
@ -7386,14 +7661,14 @@
        },
        "isarray": {
          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
          "dev": true,
          "optional": true
        },
        "minimatch": {
          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "resolved": false,
          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
          "dev": true,
          "optional": true,
@ -7403,14 +7678,14 @@
        },
        "minimist": {
          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": false,
          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
          "dev": true,
          "optional": true
        },
        "minipass": {
          "version": "2.9.0",
-          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz",
+          "resolved": false,
          "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
          "dev": true,
          "optional": true,
@ -7421,7 +7696,7 @@
        },
        "minizlib": {
          "version": "1.3.3",
-          "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz",
+          "resolved": false,
          "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==",
          "dev": true,
          "optional": true,
@ -7431,7 +7706,7 @@
        },
        "mkdirp": {
          "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "resolved": false,
          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
          "dev": true,
          "optional": true,
@ -7441,14 +7716,14 @@
        },
        "ms": {
          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "resolved": false,
          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
          "dev": true,
          "optional": true
        },
        "needle": {
          "version": "2.4.0",
-          "resolved": "https://registry.npmjs.org/needle/-/needle-2.4.0.tgz",
+          "resolved": false,
          "integrity": "sha512-4Hnwzr3mi5L97hMYeNl8wRW/Onhy4nUKR/lVemJ8gJedxxUyBLm9kkrDColJvoSfwi0jCNhD+xCdOtiGDQiRZg==",
          "dev": true,
          "optional": true,
@ -7460,7 +7735,7 @@
        },
        "node-pre-gyp": {
          "version": "0.14.0",
-          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz",
+          "resolved": false,
          "integrity": "sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==",
          "dev": true,
          "optional": true,
@ -7479,7 +7754,7 @@
        },
        "nopt": {
          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
+          "resolved": false,
          "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
          "dev": true,
          "optional": true,
@ -7490,7 +7765,7 @@
        },
        "npm-bundled": {
          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.1.tgz",
+          "resolved": false,
          "integrity": "sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==",
          "dev": true,
          "optional": true,
@ -7500,14 +7775,14 @@
        },
        "npm-normalize-package-bin": {
          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
+          "resolved": false,
          "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
          "dev": true,
          "optional": true
        },
        "npm-packlist": {
          "version": "1.4.7",
-          "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.7.tgz",
+          "resolved": false,
          "integrity": "sha512-vAj7dIkp5NhieaGZxBJB8fF4R0078rqsmhJcAfXZ6O7JJhjhPK96n5Ry1oZcfLXgfun0GWTZPOxaEyqv8GBykQ==",
          "dev": true,
          "optional": true,
@ -7518,7 +7793,7 @@
        },
        "npmlog": {
          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+          "resolved": false,
          "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
          "dev": true,
          "optional": true,
@ -7531,21 +7806,21 @@
        },
        "number-is-nan": {
          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+          "resolved": false,
          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
          "dev": true,
          "optional": true
        },
        "object-assign": {
          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "resolved": false,
          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
          "dev": true,
          "optional": true
        },
        "once": {
          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+          "resolved": false,
          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
          "dev": true,
          "optional": true,
@ -7555,21 +7830,21 @@
        },
        "os-homedir": {
          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+          "resolved": false,
          "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
          "dev": true,
          "optional": true
        },
        "os-tmpdir": {
          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+          "resolved": false,
          "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
          "dev": true,
          "optional": true
        },
        "osenv": {
          "version": "0.1.5",
-          "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+          "resolved": false,
          "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
          "dev": true,
          "optional": true,
@ -7580,21 +7855,21 @@
        },
        "path-is-absolute": {
          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+          "resolved": false,
          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
          "dev": true,
          "optional": true
        },
        "process-nextick-args": {
          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+          "resolved": false,
          "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
          "dev": true,
          "optional": true
        },
        "rc": {
          "version": "1.2.8",
-          "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+          "resolved": false,
          "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
          "dev": true,
          "optional": true,
@ -7607,7 +7882,7 @@
          "dependencies": {
            "minimist": {
              "version": "1.2.0",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+              "resolved": false,
              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
              "dev": true,
              "optional": true
@ -7616,7 +7891,7 @@
        },
        "readable-stream": {
          "version": "2.3.6",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "resolved": false,
          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
          "dev": true,
          "optional": true,
@ -7632,7 +7907,7 @@
        },
        "rimraf": {
          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "resolved": false,
          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
          "dev": true,
          "optional": true,
@ -7642,49 +7917,49 @@
        },
        "safe-buffer": {
          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "resolved": false,
          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
          "dev": true,
          "optional": true
        },
        "safer-buffer": {
          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+          "resolved": false,
          "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
          "dev": true,
          "optional": true
        },
        "sax": {
          "version": "1.2.4",
-          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+          "resolved": false,
          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
          "dev": true,
          "optional": true
        },
        "semver": {
          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "resolved": false,
          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
          "dev": true,
          "optional": true
        },
        "set-blocking": {
          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
          "dev": true,
          "optional": true
        },
        "signal-exit": {
          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+          "resolved": false,
          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
          "dev": true,
          "optional": true
        },
        "string-width": {
          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "resolved": false,
          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
          "dev": true,
          "optional": true,
@ -7696,7 +7971,7 @@
        },
        "string_decoder": {
          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "resolved": false,
          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
          "dev": true,
          "optional": true,
@ -7706,7 +7981,7 @@
        },
        "strip-ansi": {
          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "resolved": false,
          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
          "dev": true,
          "optional": true,
@ -7716,14 +7991,14 @@
        },
        "strip-json-comments": {
          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "resolved": false,
          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
          "dev": true,
          "optional": true
        },
        "tar": {
          "version": "4.4.13",
-          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz",
+          "resolved": false,
          "integrity": "sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==",
          "dev": true,
          "optional": true,
@ -7739,14 +8014,14 @@
        },
        "util-deprecate": {
          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+          "resolved": false,
          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
          "dev": true,
          "optional": true
        },
        "wide-align": {
          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+          "resolved": false,
          "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
          "dev": true,
          "optional": true,
@ -7756,14 +8031,14 @@
        },
        "wrappy": {
          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+          "resolved": false,
          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
          "dev": true,
          "optional": true
        },
        "yallist": {
          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "resolved": false,
          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
          "dev": true,
          "optional": true
@ -8888,6 +9163,12 @@
      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
      "dev": true
    },
+    "is-docker": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.0.0.tgz",
+      "integrity": "sha512-pJEdRugimx4fBMra5z2/5iRdZ63OhYV0vr0Dwm5+xtW4D1FvRkB8hamMIhnWfyJeDdyr/aa7BDyNbtG38VxgoQ==",
+      "dev": true
+    },
    "is-dotfile": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
@ -10180,6 +10461,63 @@
      "resolved": "https://registry.npmjs.org/marked/-/marked-0.6.3.tgz",
      "integrity": "sha512-Fqa7eq+UaxfMriqzYLayfqAE40WN03jf+zHjT18/uXNuzjq3TY0XTbrAoPeqSJrAmPz11VuUA+kBPYOhHt9oOQ=="
    },
+    "markmap-lib": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/markmap-lib/-/markmap-lib-0.4.2.tgz",
+      "integrity": "sha512-/1ITvE8HiI+8GLgL//ggH2LNy19Kg3nNcOijK/DcKtH7grJ1TO6k4No/IqCSiM8JjiQbxYDosSHGZKqp6Lyj1A==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.9.2",
+        "@types/d3": "^5.7.2",
+        "commander": "^5.0.0",
+        "d3": "^5.15.0",
+        "d3-flextree": "^2.1.1",
+        "open": "^7.0.3",
+        "remarkable": "^2.0.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.9.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz",
+          "integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "autolinker": {
+          "version": "3.14.1",
+          "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-3.14.1.tgz",
+          "integrity": "sha512-yvsRHIaY51EYDml6MGlbqyJGfl4n7zezGYf+R7gvM8c5LNpRGc4SISkvgAswSS8SWxk/OrGCylKV9mJyVstz7w==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.9.3"
+          }
+        },
+        "commander": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-5.0.0.tgz",
+          "integrity": "sha512-JrDGPAKjMGSP1G0DUoaceEJ3DZgAfr/q6X7FVk4+U5KxUSKviYGM2k6zWkfyyBHy5rAtzgYJFa1ro2O9PtoxwQ==",
+          "dev": true
+        },
+        "regenerator-runtime": {
+          "version": "0.13.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
+          "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
+          "dev": true
+        },
+        "remarkable": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/remarkable/-/remarkable-2.0.0.tgz",
+          "integrity": "sha512-3gvKFAgL4xmmVRKAMNm6UzDo/rO2gPVkZrWagp6AXEA4JvCcMcRx9aapYbb7AJAmLLvi/u06+EhzqoS7ha9qOg==",
+          "dev": true,
+          "requires": {
+            "argparse": "^1.0.10",
+            "autolinker": "^3.11.0"
+          }
+        }
+      }
+    },
    "math-interval-parser": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/math-interval-parser/-/math-interval-parser-1.1.0.tgz",
@ -11490,6 +11828,24 @@
        }
      }
    },
+    "open": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/open/-/open-7.0.3.tgz",
+      "integrity": "sha512-sP2ru2v0P290WFfv49Ap8MF6PkzGNnGlAwHweB4WR4mr5d2d0woiCluUeJ218w7/+PmoBy9JmYgD5A4mLcWOFA==",
+      "dev": true,
+      "requires": {
+        "is-docker": "^2.0.0",
+        "is-wsl": "^2.1.1"
+      },
+      "dependencies": {
+        "is-wsl": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.1.1.tgz",
+          "integrity": "sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog==",
+          "dev": true
+        }
+      }
+    },
    "openid": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/openid/-/openid-2.0.6.tgz",
@ -11668,6 +12024,12 @@
      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
      "dev": true
    },
+    "papaparse": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.2.0.tgz",
+      "integrity": "sha512-ylq1wgUSnagU+MKQtNeVqrPhZuMYBvOSL00DHycFTCxownF95gpLAk1HiHdUW77N8yxRq1qHXLdlIPyBSG9NSA==",
+      "dev": true
+    },
    "parallel-transform": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "codimd",
-  "version": "2.1.0",
+  "version": "2.2.0",
  "description": "Realtime collaborative markdown notes on all platforms.",
  "keywords": [
    "Collaborative",
@ -161,6 +161,7 @@
    "markdown-it-sub": "~1.0.0",
    "markdown-it-sup": "~1.0.0",
    "markdownlint": "^0.17.0",
+    "markmap-lib": "^0.4.2",
    "mathjax": "~2.7.5",
    "mermaid": "~8.4.8",
    "mini-css-extract-plugin": "~0.4.1",
@ -168,6 +169,7 @@
    "mock-require": "~3.0.3",
    "nyc": "~14.0.0",
    "optimize-css-assets-webpack-plugin": "~5.0.0",
+    "papaparse": "^5.2.0",
    "pdfobject": "~2.1.1",
    "plantuml-encoder": "^1.2.5",
    "power-assert": "~1.6.1",
--- a/public/css/cover.css
+++ b/public/css/cover.css
@ -397,7 +397,23 @@ select {
    color: #fff;
 }

-a.btn.btn-social > i.oauth-icon {
+/* add btn-login-method replaced of btn-social, to avoid ad block delete the login button */
+.btn-login-method {
+  padding-left: 61px;
+  position: relative;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.btn-login-method.btn-lg :first-child {
+  line-height:45px;
+  width:45px;
+  font-size:1.8em;
+}
+.btn-login-method>:first-child {position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)}
+
+a.btn.btn-login-method > i.oauth-icon {
    display: inline-flex;
    height: 45px;
    width: 45px;
@ -405,7 +421,7 @@ a.btn.btn-social > i.oauth-icon {
    padding: 6px;
 }

-a.btn.btn-social > i.oauth-icon > img {
+a.btn.btn-login-method > i.oauth-icon > img {
    width: 100%;
    height: 100%;
    line-height: inherit;
--- a/public/css/extra.css
+++ b/public/css/extra.css
@ -84,6 +84,16 @@
  height: 250px;
 }

+/* markmap */
+.markmap-container {
+  height: 300px;
+}
+
+.markmap-container > svg {
+  width: 100%;
+  height: 100%;
+}
+
 .MJX_Assistive_MathML {
    display: none;
 }
--- a/public/css/font.css
+++ b/public/css/font.css
@ -3,7 +3,7 @@
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 300;
-  src: local('Source Code Pro Light'), local('SourceCodePro-Light'), url('/fonts/SourceCodePro-Light.woff') format('woff');
+  src: local('Source Code Pro Light'), local('SourceCodePro-Light'), url('../fonts/SourceCodePro-Light.woff') format('woff');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@ -11,7 +11,7 @@
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 300;
-  src: local('Source Code Pro Light'), local('SourceCodePro-Light'), url('/fonts/SourceCodePro-Light.woff') format('woff');
+  src: local('Source Code Pro Light'), local('SourceCodePro-Light'), url('../fonts/SourceCodePro-Light.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 /* latin-ext */
@ -19,7 +19,7 @@
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
-  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url('/fonts/SourceCodePro-Regular.woff') format('woff');
+  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url('../fonts/SourceCodePro-Regular.woff') format('woff');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@ -27,7 +27,7 @@
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
-  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url('/fonts/SourceCodePro-Regular.woff') format('woff');
+  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url('../fonts/SourceCodePro-Regular.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 /* latin-ext */
@ -35,7 +35,7 @@
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 500;
-  src: local('Source Code Pro Medium'), local('SourceCodePro-Medium'), url('/fonts/SourceCodePro-Medium.woff') format('woff');
+  src: local('Source Code Pro Medium'), local('SourceCodePro-Medium'), url('../fonts/SourceCodePro-Medium.woff') format('woff');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@ -43,7 +43,7 @@
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 500;
-  src: local('Source Code Pro Medium'), local('SourceCodePro-Medium'), url('/fonts/SourceCodePro-Medium.woff') format('woff');
+  src: local('Source Code Pro Medium'), local('SourceCodePro-Medium'), url('../fonts/SourceCodePro-Medium.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 /* vietnamese */
@ -51,7 +51,7 @@
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
-  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('/fonts/SourceCodePro-Medium.woff') format('woff');
+  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('../fonts/SourceCodePro-Medium.woff') format('woff');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
@ -59,7 +59,7 @@
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
-  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('/fonts/SourceSansPro-Light.woff') format('woff');
+  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('../fonts/SourceSansPro-Light.woff') format('woff');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@ -67,7 +67,7 @@
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
-  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('/fonts/SourceSansPro-Light.woff') format('woff');
+  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('../fonts/SourceSansPro-Light.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 /* vietnamese */
@ -75,7 +75,7 @@
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
-  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('/fonts/SourceSansPro-Regular.woff') format('woff');
+  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('../fonts/SourceSansPro-Regular.woff') format('woff');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
@ -83,7 +83,7 @@
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
-  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('/fonts/SourceSansPro-Regular.woff') format('woff');
+  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('../fonts/SourceSansPro-Regular.woff') format('woff');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@ -91,7 +91,7 @@
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
-  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('/fonts/SourceSansPro-Regular.woff') format('woff');
+  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('../fonts/SourceSansPro-Regular.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 /* vietnamese */
@ -99,7 +99,7 @@
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
-  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('/fonts/SourceSansPro-Semibold.woff') format('woff');
+  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('../fonts/SourceSansPro-Semibold.woff') format('woff');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
@ -107,7 +107,7 @@
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
-  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('/fonts/SourceSansPro-Semibold.woff') format('woff');
+  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('../fonts/SourceSansPro-Semibold.woff') format('woff');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@ -115,7 +115,7 @@
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
-  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('/fonts/SourceSansPro-Semibold.woff') format('woff');
+  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('../fonts/SourceSansPro-Semibold.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 /* vietnamese */
@ -123,7 +123,7 @@
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 300;
-  src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'), url('/fonts/SourceSansPro-LightItalic.woff') format('woff');
+  src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'), url('../fonts/SourceSansPro-LightItalic.woff') format('woff');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
@ -131,7 +131,7 @@
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 300;
-  src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'), url('/fonts/SourceSansPro-LightItalic.woff') format('woff');
+  src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'), url('../fonts/SourceSansPro-LightItalic.woff') format('woff');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@ -139,7 +139,7 @@
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 300;
-  src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'), url('/fonts/SourceSansPro-LightItalic.woff') format('woff');
+  src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'), url('../fonts/SourceSansPro-LightItalic.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 /* vietnamese */
@ -147,7 +147,7 @@
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url('/fonts/SourceSansPro-Italic.woff') format('woff');
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url('../fonts/SourceSansPro-Italic.woff') format('woff');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
@ -155,7 +155,7 @@
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url('/fonts/SourceSansPro-Italic.woff') format('woff');
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url('../fonts/SourceSansPro-Italic.woff') format('woff');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@ -163,7 +163,7 @@
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url('/fonts/SourceSansPro-Italic.woff') format('woff');
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url('../fonts/SourceSansPro-Italic.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 /* vietnamese */
@ -171,7 +171,7 @@
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 600;
-  src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'), url('/fonts/SourceSansPro-SemiboldItalic.woff') format('woff');
+  src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'), url('../fonts/SourceSansPro-SemiboldItalic.woff') format('woff');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
@ -179,7 +179,7 @@
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 600;
-  src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'), url('/fonts/SourceSansPro-SemiboldItalic.woff') format('woff');
+  src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'), url('../fonts/SourceSansPro-SemiboldItalic.woff') format('woff');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@ -187,7 +187,7 @@
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 600;
-  src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'), url('/fonts/SourceSansPro-SemiboldItalic.woff') format('woff');
+  src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'), url('../fonts/SourceSansPro-SemiboldItalic.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 /* latin-ext */
@ -195,7 +195,7 @@
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
-  src: local('Source Serif Pro'), local('SourceSerifPro-Regular'), url('/fonts/SourceSerifPro-Regular.woff') format('woff');
+  src: local('Source Serif Pro'), local('SourceSerifPro-Regular'), url('../fonts/SourceSerifPro-Regular.woff') format('woff');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@ -203,6 +203,6 @@
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
-  src: local('Source Serif Pro'), local('SourceSerifPro-Regular'), url('/fonts/SourceSerifPro-Regular.woff') format('woff');
+  src: local('Source Serif Pro'), local('SourceSerifPro-Regular'), url('../fonts/SourceSerifPro-Regular.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
--- a/public/css/slide.css
+++ b/public/css/slide.css
@ -344,3 +344,7 @@ html, body {
 .print-pdf .footer {
    display: none;
 }
+
+.markmap-container {
+  background: #f7f7f7;
+}
--- a/public/docs/features.md
+++ b/public/docs/features.md
@ -208,6 +208,30 @@ When you’re a carpenter making a beautiful chest of drawers, you’re not goin
 > > Even support the nest blockquotes!
 > > [name=ChengHan Wu] [time=Sun, Jun 28, 2015 10:00 PM] [color=red]

+### Render CSV as table
+
+You can use write csv in the codeblock:
+
+~~~md
+```csvpreview {header="true"}
+firstName,lastName,email,phoneNumber
+John,Doe,john@doe.com,0123456789
+Jane,Doe,jane@doe.com,9876543210
+James,Bond,james.bond@mi6.co.uk,0612345678
+```
+~~~
+
+which rendered to:
+
+```csvpreview {header="true"}
+firstName,lastName,email,phoneNumber
+John,Doe,john@doe.com,0123456789
+Jane,Doe,jane@doe.com,9876543210
+James,Bond,james.bond@mi6.co.uk,0612345678
+```
+
+We use [Papa Parse](https://www.papaparse.com/) for parsing csv. The parsing option is given in braces: `{}`, and multiple options are seperated by a space. e.g. `{header="true" delimiter="."}`. Please read [their documentation](https://www.papaparse.com/docs#config) as reference.
+
 ## Externals

 ### YouTube
@ -345,6 +369,40 @@ stop
 }
 ```

+### Fretboad
+
+```fretboard {title="horizontal, 5 frets", type="h6 noNut"}
+-oO-*-
+--o-o-
+-o-oo-
+-o-oO-
+-oo-o-
+-*O-o-
+```
+
+### Mindmap
+
+```markmap
+# markmap-lib
+
+## Links
+
+- <https://markmap.js.org/>
+- [GitHub](https://github.com/gera2ld/markmap-lib)
+
+## Related
+
+- [coc-markmap](https://github.com/gera2ld/coc-markmap)
+- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)
+
+## Features
+
+- links
+- **inline** ~~text~~ *styles*
+- multiline
+  text
+```
+
 > More information about **sequence diagrams** syntax [here](http://bramp.github.io/js-sequence-diagrams/).
 > More information about **flow charts** syntax [here](http://adrai.github.io/flowchart.js/).
 > More information about **graphviz** syntax [here](http://www.tonyballantyne.com/graphs.html)
@ -352,6 +410,7 @@ stop
 > More information about **abc** syntax [here](http://abcnotation.com/learn)
 > More information about **plantuml** syntax [here](http://plantuml.com/index)
 > More information about **vega** syntax [here](https://vega.github.io/vega-lite/docs)
+> More information about **fretboard** syntax [here](https://hackmd.io/c/codimd-documentation/%2F%40codimd%2Ffretboard-syntax)

 Alert Area
 ---
--- a/public/docs/release-notes.md
+++ b/public/docs/release-notes.md
@ -1,6 +1,82 @@
 Release Notes
 ===

+<i class="fa fa-tag"></i> 2.2.0 Diploderma swinhonis <i class="fa fa-clock-o"></i> 2020-07-20
+---
+
+<div style="text-align: center; margin-bottom: 1em;">
+  <img src="https://i.imgur.com/P1HXrhw.jpg" width="600">
+  <small style="display: block;">Diploderma swinhonis</small>
+</div>
+
+> Diploderma swinhonis, also known as the Taiwan japalure, Swinhoe's japalure, and Swinhoe's tree lizard, is a species of lizard in the family Agamidae. The species is endemic to Taiwan.
+> \- Wikipedia [Diploderma swinhonis](https://en.wikipedia.org/wiki/Diploderma_swinhonis)
+
+In this release, we've added some Markdown renderer plugins, including fretboard guitar, Mindmap, and CSV. We believe the simplicity and the extensibility of markdown can bring more possibilities to you and your workflow. So let's find out more about what we can do with markdown. :100: 
+
+We also fixed a long-lasting issue: CodiMD cannot be hosted under URL subpath perfectly. Check PR [#1551](https://github.com/hackmdio/codimd/pull/1551) for details.
+
+Last but not least, we start standarizing CodiMD API. We drafted [`List my notes`](https://github.com/hackmdio/codimd/pull/1548) API in this release. Stay tuned. :person_in_lotus_position: 
+
+Here are some highlights from this release:
+
+- [Fretboard Guitar tab renderer](#Fretboard-Guitar-tab-renderer)
+- [Mindmap rendrer](#Mindmap)
+- [Image Lightbox](#Image-Lightbox-Support)
+- [CSV renderer](#Render-csv-codeblock-as-table)
+
+[Check out the complete release note][v2_2_0]. Thank you CodiMD community and all our contributors. ❤️
+
+[v2_2_0]: https://hackmd.io/@codimd/release-notes/%2F%40codimd%2Fv2_2_0
+
+### Enhancements
+
+- Use array for tags when available
+- Replace btn-social with btn-login-method
+- Set html image meta tag with YAML metadata
+- List my note API
+
+### Fixes
+
+- Update Simplified Chinese translation and fix typography
+- Fix webpack urlpath font loading error
+
+
+
+<i class="fa fa-tag"></i> 2.1.0 Zhangixalus prasinatus <i class="fa fa-clock-o"></i> 2020-05-18
+---
+
+<div style="text-align: center; margin-bottom: 1em;">
+  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Rhacophorus_prasinatus.jpg/640px-Rhacophorus_prasinatus.jpg" width="450">
+  <small style="display: block;">Zhangixalus prasinatus</small>
+</div>
+
+> Zhangixalus prasinatus is a species of frog in the family Rhacophoridae endemic to northern Taiwan. It is the largest tree frog in Taiwan; females can reach 7 cm (2.8 in) in snout-vent length. It is known from Taipei, Yilan, and Taoyuan.
+> \- Wikipedia [Zhangixalus prasinatus](https://en.wikipedia.org/wiki/Zhangixalus_prasinatus)
+
+During this hard time of COVID-19, it's a pleasure to help people collaborate better with CodiMD. We hope the world will recover from this situation soon. :sunrise: 
+
+Good news, we have some goodies for CodiMD including:
+
+- [Support Prometheus metrics](https://hackmd.io/@codimd/v2_1_0#Support-Prometheus-metrics)
+- [Cut docker image size by 57%](https://hackmd.io/@codimd/v2_1_0#Cut-docker-image-size-by-57)
+- [Drop Node 8 Support](https://hackmd.io/@codimd/v2_1_0#Drop-Node-8-Support)
+
+[Check out the complete release note][v2_1_0]. Thank you CodiMD community and all our contributors. ❤️
+
+[v2_1_0]: https://hackmd.io/@codimd/release-notes/%2F%40codimd%2Fv2_1_0
+
+### Enhancements
+
+- Optimize module size
+- Support brace wrapped param in fence lang
+- Upgrade Node.JS version to 10.20.1
+
+### Fixes
+
+- Fix getStatus caused "TypeError: Converting circular structure to JSON"
+
+
 <i class="fa fa-tag"></i> 2.0.1 Urocissa caerulea <i class="fa fa-clock-o"></i> 2020-04-09
 ---

--- a/public/docs/yaml-metadata.md
+++ b/public/docs/yaml-metadata.md
@ -40,6 +40,17 @@ This option will set the note description.
 description: meta description
 ```

+image
+---
+This option will set the html meta tag 'image'.
+
+> default: not set
+
+**Example**
+```yml
+image: https://raw.githubusercontent.com/hackmdio/codimd/develop/public/screenshot.png
+```
+
 tags
 ---
 This option will set the tags which prior than content tags.
--- a/public/js/extra.js
+++ b/public/js/extra.js
@ -11,11 +11,21 @@ import unescapeHTML from 'lodash/unescape'

 import isURL from 'validator/lib/isURL'

+import { transform } from 'markmap-lib/dist/transform.common'
+import { markmap } from 'markmap-lib/dist/view.common'
+
 import { stripTags } from '../../utils/string'

 import getUIElements from './lib/editor/ui-elements'
 import { emojifyImageDir } from './lib/editor/constants'
-import { parseFenceCodeParams, serializeParamToAttribute } from './lib/markdown/utils'
+import {
+  parseFenceCodeParams,
+  serializeParamToAttribute,
+  deserializeParamAttributeFromElement
+} from './lib/markdown/utils'
+import { renderFretBoard } from './lib/renderer/fretboard/fretboard'
+import './lib/renderer/lightbox'
+import { renderCSVPreview } from './lib/renderer/csvpreview'

 import markdownit from 'markdown-it'
 import markdownitContainer from 'markdown-it-container'
@ -464,7 +474,7 @@ export function finishView (view) {
        const { lat, lon } = data[0]
        position = [lat, lon]
      }
-      $elem.html(`<div class="geo-map"></div>`)
+      $elem.html('<div class="geo-map"></div>')
      const map = L.map($elem.find('.geo-map')[0]).setView(position, zoom || 16)

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@ -483,6 +493,38 @@ export function finishView (view) {
      console.warn(err)
    }
  })
+  // fretboard
+  const fretboard = view.find('div.fretboard_instance.raw').removeClass('raw')
+  fretboard.each((key, value) => {
+    const params = deserializeParamAttributeFromElement(value)
+    const $value = $(value)
+
+    try {
+      const $ele = $(value).parent().parent()
+      $ele.html(renderFretBoard($value.text(), params))
+    } catch (err) {
+      $value.unwrap()
+      $value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
+      console.warn(err)
+    }
+  })
+  // markmap
+  view.find('div.markmap.raw').removeClass('raw').each(async (key, value) => {
+    const $elem = $(value).parent().parent()
+    const $value = $(value)
+    const content = $value.text()
+    $value.unwrap()
+    try {
+      const data = transform(content)
+      $elem.html(`<div class="markmap-container"><svg></svg></div>`)
+      markmap($elem.find('svg')[0], data, {
+        duration: 0
+      })
+    } catch (err) {
+      $elem.html(`<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')
@ -975,7 +1017,7 @@ export function deduplicatedHeaderId (view) {
  if (window.linkifyHeaderStyle === 'gfm') {
    // consistent with GitHub, GitLab, Pandoc & co.
    // all headers contained in the document, in order of appearance
-    const allHeaders = view.find(`:header`).toArray()
+    const allHeaders = view.find(':header').toArray()
    // list of finaly assigned header IDs
    const headerIds = new Set()
    for (let j = 0; j < allHeaders.length; j++) {
@ -1036,7 +1078,9 @@ const fenceCodeAlias = {
  mermaid: 'mermaid',
  abc: 'abc',
  vega: 'vega',
-  geo: 'geo'
+  geo: 'geo',
+  fretboard: 'fretboard_instance',
+  markmap: 'markmap'
 }

 function highlightRender (code, lang) {
@ -1133,7 +1177,7 @@ md.use(markdownitContainer, 'spoiler', {
      if (summary) {
        return `<details><summary>${md.renderInline(summary)}</summary>\n`
      } else {
-        return `<details>\n`
+        return '<details>\n'
      }
    } else {
      // closing tag
@ -1145,6 +1189,7 @@ md.use(markdownitContainer, 'spoiler', {
 const defaultImageRender = md.renderer.rules.image
 md.renderer.rules.image = function (tokens, idx, options, env, self) {
  tokens[idx].attrJoin('class', 'raw')
+  tokens[idx].attrJoin('class', 'md-image')
  return defaultImageRender(...arguments)
 }
 md.renderer.rules.list_item_open = function (tokens, idx, options, env, self) {
@ -1167,6 +1212,12 @@ md.renderer.rules.fence = (tokens, idx, options, env, self) => {

  if (info) {
    langName = info.split(/\s+/g)[0]
+
+    if (langName === 'csvpreview') {
+      const params = parseFenceCodeParams(info)
+      return renderCSVPreview(token.content, params)
+    }
+
    if (/!$/.test(info)) token.attrJoin('class', 'wrap')
    token.attrJoin('class', options.langPrefix + langName.replace(/=$|=\d+$|=\+$|!$|=!$/, ''))
    token.attrJoin('class', 'hljs')
--- a/public/js/index.js
+++ b/public/js/index.js
@ -102,7 +102,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', 'vega', 'geo']
+var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega', 'geo', 'fretboard', 'markmap']
 var supportHeaders = [
  {
    text: '# h1',
@ -588,6 +588,7 @@ function checkEditorStyle () {
  }
  // workaround editor will have wrong doc height when editor height changed
  editor.setSize(null, ui.area.edit.height())
+  checkEditorScrollOverLines()
  // make editor resizable
  if (!ui.area.resize.handle.length) {
    ui.area.edit.resizable({
@ -674,6 +675,15 @@ function checkEditorScrollbarInner () {
  editor.scrollTo(null, scrollInfo.top)
 }

+function checkEditorScrollOverLines () {
+  const desireHeight = parseInt(ui.area.codemirrorScroll[0].style.height) || parseInt(ui.area.codemirrorScroll[0].style.minHeight)
+  // make editor have extra padding in the bottom (except small screen)
+  const paddingBottom = editor.doc && editor.doc.height > defaultTextHeight ? (desireHeight - defaultTextHeight) : 0
+  if (parseInt(ui.area.codemirrorLines.css('padding-bottom')) !== paddingBottom) {
+    ui.area.codemirrorLines.css('padding-bottom', paddingBottom + 'px')
+  }
+}
+
 function checkTocStyle () {
  // toc right
  var paddingRight = parseFloat(ui.area.markdown.css('padding-right'))
@ -1779,7 +1789,7 @@ socket.on('reconnect', function (data) {
 socket.on('connect', function (data) {
  clearInterval(retryTimer)
  retryTimer = null
-  personalInfo['id'] = socket.id
+  personalInfo.id = socket.id
  showStatus(statusType.connected)
  socket.emit('version')
 })
@ -2349,8 +2359,8 @@ function emitUserStatus (force) {
  var type = null
  if (visibleXS) { type = 'xs' } else if (visibleSM) { type = 'sm' } else if (visibleMD) { type = 'md' } else if (visibleLG) { type = 'lg' }

-  personalInfo['idle'] = idle.isAway
-  personalInfo['type'] = type
+  personalInfo.idle = idle.isAway
+  personalInfo.type = type

  for (var i = 0; i < onlineUsers.length; i++) {
    if (onlineUsers[i].id === personalInfo.id) {
@ -2554,9 +2564,11 @@ function enforceMaxLength (cm, change) {
  }
  return false
 }
+let lastDocHeight
 var ignoreEmitEvents = ['setValue', 'ignoreHistory']
 editorInstance.on('beforeChange', function (cm, change) {
  if (debug) { console.debug(change) }
+  lastDocHeight = editor.doc.height
  removeNullByte(cm, change)
  if (enforceMaxLength(cm, change)) {
    $('.limit-modal').modal('show')
@ -2590,6 +2602,7 @@ editorInstance.on('paste', function () {
  // na
 })
 editorInstance.on('changes', function (editor, changes) {
+  const docHeightChanged = editor.doc.height !== lastDocHeight
  updateHistory()
  var docLength = editor.getValue().length
  // workaround for big documents
@ -2605,13 +2618,18 @@ editorInstance.on('changes', function (editor, changes) {
    viewportMargin = newViewportMargin
    windowResize()
  }
-  checkEditorScrollbar()
-  if (ui.area.codemirrorScroll[0].scrollHeight > ui.area.view[0].scrollHeight && editorHasFocus()) {
-    postUpdateEvent = function () {
-      syncScrollToView()
-      postUpdateEvent = null
+  if (docHeightChanged) {
+    checkEditorScrollbar()
+    checkEditorScrollOverLines()
+    // always sync edit scrolling to view if user is editing
+    if (ui.area.codemirrorScroll[0].scrollHeight > ui.area.view[0].scrollHeight && editorHasFocus()) {
+      postUpdateEvent = function () {
+        syncScrollToView()
+        postUpdateEvent = null
+      }
    }
  }
+  lastDocHeight = editor.doc.height
 })
 editorInstance.on('focus', function (editor) {
  for (var i = 0; i < onlineUsers.length; i++) {
@ -2619,7 +2637,7 @@ editorInstance.on('focus', function (editor) {
      onlineUsers[i].cursor = editor.getCursor()
    }
  }
-  personalInfo['cursor'] = editor.getCursor()
+  personalInfo.cursor = editor.getCursor()
  socket.emit('cursor focus', editor.getCursor())
 })

@ -2632,7 +2650,7 @@ function cursorActivityInner (editor) {
        onlineUsers[i].cursor = editor.getCursor()
      }
    }
-    personalInfo['cursor'] = editor.getCursor()
+    personalInfo.cursor = editor.getCursor()
    socket.emit('cursor activity', editor.getCursor())
  }
 }
@ -2679,7 +2697,7 @@ editorInstance.on('blur', function (cm) {
      onlineUsers[i].cursor = null
    }
  }
-  personalInfo['cursor'] = null
+  personalInfo.cursor = null
  socket.emit('cursor blur')
 })

--- a/public/js/lib/editor/constants.js
+++ b/public/js/lib/editor/constants.js
@ -16,4 +16,4 @@ export const availableThemes = [
  { name: 'Tomorror Night Eighties', value: 'tomorrow-night-eighties' }
 ]

-export const emojifyImageDir = window.USE_CDN ? `https://cdn.jsdelivr.net/npm/@hackmd/emojify.js@2.1.0/dist/images/basic` : `${serverurl}/build/emojify.js/dist/images/basic`
+export const emojifyImageDir = window.USE_CDN ? 'https://cdn.jsdelivr.net/npm/@hackmd/emojify.js@2.1.0/dist/images/basic' : `${serverurl}/build/emojify.js/dist/images/basic`
--- a/public/js/lib/editor/index.js
+++ b/public/js/lib/editor/index.js
@ -139,9 +139,14 @@ export default class Editor {
        return null
      }
    }
+
    CodeMirror.defineMode('vega', function (config, modeConfig) {
      return CodeMirror.overlayMode(CodeMirror.getMode(config, 'application/ld+json'), ignoreOverlay)
    })
+
+    CodeMirror.defineMode('markmap', function (config, modeConfig) {
+      return CodeMirror.overlayMode(CodeMirror.getMode(config, 'gfm'), ignoreOverlay)
+    })
  }

  on (event, cb) {
@ -587,7 +592,7 @@ export default class Editor {
    if (lang) {
      this.statusIndicators.find(`.status-spellcheck li[value="${lang}"]`).addClass('active')
    } else {
-      this.statusIndicators.find(`.status-spellcheck li[value="disabled"]`).addClass('active')
+      this.statusIndicators.find('.status-spellcheck li[value="disabled"]').addClass('active')
    }
  }

@ -627,7 +632,7 @@ export default class Editor {
    }

    const self = this
-    this.statusIndicators.find(`.status-spellcheck li`).click(function () {
+    this.statusIndicators.find('.status-spellcheck li').click(function () {
      const lang = $(this).attr('value')

      if (lang === 'disabled') {
--- a/public/js/lib/editor/markdown-lint/index.js
+++ b/public/js/lib/editor/markdown-lint/index.js
@ -2,7 +2,6 @@

 // load CM lint plugin explicitly
 import '@hackmd/codemirror/addon/lint/lint'
-import './lint.css'

 window.markdownit = require('markdown-it')
 // eslint-disable-next-line
--- a/public/js/lib/editor/spellcheck.js
+++ b/public/js/lib/editor/spellcheck.js
@ -23,11 +23,11 @@ export const supportLanguages = [
    value: 'de',
    aff: {
      url: `${serverurl}/build/dictionary-de/index.aff`,
-      cdnUrl: `https://cdn.jsdelivr.net/npm/dictionary-de@2.0.3/index.aff`
+      cdnUrl: 'https://cdn.jsdelivr.net/npm/dictionary-de@2.0.3/index.aff'
    },
    dic: {
      url: `${serverurl}/build/dictionary-de/index.dic`,
-      cdnUrl: `https://cdn.jsdelivr.net/npm/dictionary-de@2.0.3/index.dic`
+      cdnUrl: 'https://cdn.jsdelivr.net/npm/dictionary-de@2.0.3/index.dic'
    }
  },
  {
@ -35,11 +35,11 @@ export const supportLanguages = [
    value: 'de_AT',
    aff: {
      url: `${serverurl}/build/dictionary-de-at/index.aff`,
-      cdnUrl: `https://cdn.jsdelivr.net/npm/dictionary-de-at@2.0.3/index.aff`
+      cdnUrl: 'https://cdn.jsdelivr.net/npm/dictionary-de-at@2.0.3/index.aff'
    },
    dic: {
      url: `${serverurl}/build/dictionary-de-at/index.dic`,
-      cdnUrl: `https://cdn.jsdelivr.net/npm/dictionary-de-at@2.0.3/index.dic`
+      cdnUrl: 'https://cdn.jsdelivr.net/npm/dictionary-de-at@2.0.3/index.dic'
    }
  },
  {
@ -47,11 +47,11 @@ export const supportLanguages = [
    value: 'de_CH',
    aff: {
      url: `${serverurl}/build/dictionary-de-ch/index.aff`,
-      cdnUrl: `https://cdn.jsdelivr.net/npm/dictionary-de-ch@2.0.3/index.aff`
+      cdnUrl: 'https://cdn.jsdelivr.net/npm/dictionary-de-ch@2.0.3/index.aff'
    },
    dic: {
      url: `${serverurl}/build/dictionary-de-ch/index.dic`,
-      cdnUrl: `https://cdn.jsdelivr.net/npm/dictionary-de-ch@2.0.3/index.dic`
+      cdnUrl: 'https://cdn.jsdelivr.net/npm/dictionary-de-ch@2.0.3/index.dic'
    }
  }
 ]
--- a/public/js/lib/editor/ui-elements.js
+++ b/public/js/lib/editor/ui-elements.js
@ -70,6 +70,9 @@ export const getUIElements = () => ({
    codemirrorSizerInner: $(
      '.ui-edit-area .CodeMirror .CodeMirror-sizer > div'
    ),
+    codemirrorLines: $(
+      '.ui-edit-area .CodeMirror .CodeMirror-lines'
+    ),
    markdown: $('.ui-view-area .markdown-body'),
    resize: {
      handle: $('.ui-resizable-handle'),
--- a/public/js/lib/markdown/utils.js
+++ b/public/js/lib/markdown/utils.js
@ -7,10 +7,10 @@ export function parseFenceCodeParams (lang) {
    paraMatch && paraMatch.forEach(param => {
      param = param.trim()
      if (param[0] === '#') {
-        params['id'] = param.slice(1)
+        params.id = param.slice(1)
      } else if (param[0] === '.') {
-        if (params['class']) params['class'] = []
-        params['class'] = params['class'].concat(param.slice(1))
+        if (params.class) params.class = []
+        params.class = params.class.concat(param.slice(1))
      } else {
        const offset = param.indexOf('=')
        const id = param.substring(0, offset).trim().toLowerCase()
@ -21,8 +21,8 @@ export function parseFenceCodeParams (lang) {
          val = val.substring(1, val.length - 1)
        }
        if (id === 'class') {
-          if (params['class']) params['class'] = []
-          params['class'] = params['class'].concat(val)
+          if (params.class) params.class = []
+          params.class = params.class.concat(val)
        } else {
          params[id] = val
        }
--- a/public/js/lib/renderer/csvpreview.js
+++ b/public/js/lib/renderer/csvpreview.js
@ -0,0 +1,44 @@
+import Papa from 'papaparse'
+import escapeHTML from 'lodash/escape'
+
+const safeParse = d => {
+  try {
+    return JSON.parse(d)
+  } catch (err) {
+    return d
+  }
+}
+
+export function renderCSVPreview (csv, options = {}, attr = '') {
+  const opt = Object.keys(options).reduce((acc, key) => {
+    return Object.assign(acc, {
+      [key]: safeParse(options[key])
+    })
+  }, {})
+
+  const results = Papa.parse(csv.trim(), opt)
+
+  if (opt.header) {
+    const fields = results.meta.fields
+    return `<table ${attr}>
+      <thead>
+        <tr>
+          ${fields.map(f => `<th>${escapeHTML(f)}</th>`).join('')}
+        </tr>
+      </thead>
+      <tbody>
+        ${results.data.map(d => `<tr>
+          ${fields.map(f => `<td>${escapeHTML(d[f])}</td>`).join('')}
+        </tr>`).join('')}
+      </tbody>
+    </table>`
+  } else {
+    return `<table ${attr}>
+      <tbody>
+        ${results.data.map(d => `<tr>
+          ${d.map(f => `<td>${escapeHTML(f)}</td>`).join('')}
+        </tr>`).join('')}
+      </tbody>
+    </table>`
+  }
+}
--- a/public/js/lib/renderer/fretboard/css/i.css
+++ b/public/js/lib/renderer/fretboard/css/i.css
@ -0,0 +1,183 @@
+/* -- GENERAL TYPOGRAPHY -- */
+.fretTitle {
+  color: #555;
+  font-family: "Helvetica Neue", sans-serif;
+  background: #eee;
+  line-height: 1.4;
+  font-size: 1.6em;
+  margin: 10px 0 10px 0;
+  font-weight: 900;
+  padding: 5px;
+}
+
+section {
+  padding: 20px;
+}
+
+.content {
+  max-width: 960px;
+  margin: auto;
+}
+
+/* Fretboard Container/Wrapper */
+.fretContainer {
+  width: 320px;
+  margin: 0 auto;
+}
+
+.fretContainer_h {
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+@media all and (max-width: 400px) {
+  .fretContainer_h {
+    max-width: 288px;
+  }
+}
+@media all and (max-width: 420px) {
+  .fretContainer {
+    max-width: 220px;
+  }
+}
+.svg_wrapper {
+  background-color: #fff;
+  position: relative;
+  height: 0;
+}
+
+.svg_wrapper svg.fretboard_bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+}
+
+.svg_wrapper .cells {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+}
+
+.svg_wrapper.v4 {
+  padding-top: 91.6666666667%;
+}
+
+.svg_wrapper.v5 {
+  padding-top: 106.9444444444%;
+}
+
+.svg_wrapper.v7 {
+  padding-top: 137.5%;
+}
+
+.svg_wrapper.v9 {
+  padding-top: 168.0555555556%;
+}
+
+.svg_wrapper.v12 {
+  padding-top: 213.8888888889%;
+}
+
+.svg_wrapper.v15 {
+  padding-top: 259.7222222222%;
+}
+
+.svg_wrapper.v .cell svg {
+  width: 12.5%;
+  float: left;
+  display: block;
+}
+
+.svg_wrapper.v4 .cell svg {
+  height: 16.6666666667%;
+}
+
+.svg_wrapper.v5 .cell svg {
+  height: 14.2857142857%;
+}
+
+.svg_wrapper.v7 .cell svg {
+  height: 11.1111111111%;
+}
+
+.svg_wrapper.v9 .cell svg {
+  height: 9.0909090909%;
+}
+
+.svg_wrapper.v12 .cell svg {
+  height: 7.1428571429%;
+}
+
+.svg_wrapper.v15 .cell svg {
+  height: 5.8823529412%;
+}
+
+.svg_wrapper.h5 {
+  padding-top: 85.7142857143%;
+}
+
+.svg_wrapper.h6 {
+  padding-top: 75%;
+}
+
+.svg_wrapper.h7 {
+  padding-top: 72.7272727273%;
+}
+
+.svg_wrapper.h .cell svg {
+  height: 12.5%;
+  float: left;
+  display: block;
+  z-index: 2;
+}
+
+.svg_wrapper.h5 .cell svg {
+  width: 14.2857142857%;
+}
+
+.svg_wrapper.h6 .cell svg {
+  width: 12.5%;
+}
+
+.svg_wrapper.h7 .cell svg {
+  width: 12.1212121212%;
+}
+
+/* Fretboard Element Styles */
+.cell.dot .fretb_dot {
+  fill: #27a9e1;
+}
+
+.cell.dot.root .fretb_dot {
+  fill: #F05A28;
+}
+
+.cell.dot.faded .fretb_dot {
+  opacity: 0.25;
+}
+
+.fretboard_bg .fret_bg rect {
+  fill: #fff;
+}
+
+.fretboard_bg .frets rect {
+  fill: #ddd;
+}
+
+.fretboard_bg .nut rect {
+  fill: #6e6e6e;
+}
+
+.fretboard_bg .strings rect {
+  fill: #6e6e6e;
+}
+
+.svg_wrapper.noNut .fretboard_bg .nut rect {
+  fill: none;
+}
+
+/*# sourceMappingURL=i.css.map */
--- a/public/js/lib/renderer/fretboard/fretboard.js
+++ b/public/js/lib/renderer/fretboard/fretboard.js
@ -0,0 +1,81 @@
+/* global $ */
+
+import './css/i.css'
+import dotEmpty from './svg/dotEmpty.svg'
+import dotEmptyH from './svg/dotEmpty_h.svg'
+import dot from './svg/dot.svg'
+import dotH from './svg/dot_h.svg'
+import dotWideLeft from './svg/dotWideLeft.svg'
+import dotWideRight from './svg/dotWideRight.svg'
+import dotWideMiddle from './svg/dotWideMiddle.svg'
+import stringO from './svg/string_o.svg'
+import stringX from './svg/string_x.svg'
+
+const switchListV = {
+  o: `<div class='cell dot'>${dot}</div>`,
+  '*': `<div class='cell dot faded'>${dot}</div>`,
+  '(': `<div class='cell'>${dotWideLeft}</div>`,
+  ')': `<div class='cell'>${dotWideRight}</div>`,
+  '=': `<div class='cell'>${dotWideMiddle}</div>`,
+  '^': `<div class='cell'>${stringO}</div>`,
+  x: `<div class='cell'>${stringX}</div>`,
+  '|': `<div class='cell empty'>${dotEmpty}</div>`,
+  ' ': `<div class='cell empty'>${dotEmpty}</div>`,
+  '\n': `<div class='cell empty'>${dotEmpty}</div>`
+}
+const switchListH = {
+  o: `<div class='cell dot'>${dotH}</div>`,
+  '*': `<div class='cell dot faded'>${dotH}</div>`,
+  O: `<div class='cell dot root'>${dotH}</div>`,
+  '-': `<div class='cell empty'>${dotEmptyH}</div>`,
+  ' ': `<div class='cell empty'>${dotEmptyH}</div>`,
+  '\n': `<div class='cell empty'>${dotEmptyH}</div><div class='cell empty'>${dotEmptyH}</div>`
+}
+
+export const renderFretBoard = (content, { title: fretTitle, type }) => {
+  const fretType = type.split(' ')
+  const containerClass = fretType && fretType[0].startsWith('h') ? 'fretContainer_h' : 'fretContainer'
+  const fretboardHTML = $(`<div class="${containerClass}"></div>`)
+
+  $(fretboardHTML).append($(`<div class="fretTitle">${fretTitle}</div>`))
+
+  // create fretboard background HTML
+  const fretbOrientation = fretType && fretType[0].startsWith('v') ? 'vert' : 'horiz'
+  const fretbLen = fretType && fretType[0].substring(1)
+  const fretbClass = fretType && fretType[0][0] + ' ' + fretType[0]
+  const nut = (fretType[1] && fretType[1] === 'noNut') ? 'noNut' : ''
+  const svgHTML = $(`<div class="svg_wrapper ${fretbClass} ${nut}"></div>`)
+  const fretbBg = require(`./svg/fretb_${fretbOrientation}_${fretbLen}.svg`)
+  $(svgHTML).append($(fretbBg))
+
+  // create cells HTML
+  const cellsHTML = $('<div class="cells"></div>')
+  let switchList = ''
+  if (fretbOrientation && fretbOrientation === 'vert') {
+    switchList = switchListV
+  } else {
+    // calculate position
+    const emptyFill = new Array(Number(fretbLen) + 3).fill(' ').join('')
+    content = `${emptyFill}${content}`
+
+    switchList = switchListH
+  }
+
+  const contentCell = content && content.split('')
+  // Go through each ASCII character...
+  const numArray = [...Array(10).keys()].slice(1)
+  contentCell && contentCell.forEach(char => {
+    if (numArray.toString().indexOf(char) !== -1) {
+      const numType = fretType && fretType[0].startsWith('h') ? '_h' : ''
+      const numSvg = require(`./svg/number${char}${numType}.svg`)
+      cellsHTML.append($(`<div class='cell empty'>${numSvg}</div>`))
+    } else if (switchList[char] !== undefined) {
+      cellsHTML.append($(switchList[char]))
+    }
+  })
+
+  $(svgHTML).append($(cellsHTML))
+  $(fretboardHTML).append($(svgHTML))
+
+  return fretboardHTML[0].outerHTML
+}
--- a/public/js/lib/renderer/fretboard/svg/dot.svg
+++ b/public/js/lib/renderer/fretboard/svg/dot.svg
@ -0,0 +1,3 @@
+<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">
+  <circle class="fretb_dot" fill="#27AAE1" cx="36" cy="44" r="32"/>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/dotEmpty.svg
+++ b/public/js/lib/renderer/fretboard/svg/dotEmpty.svg
@ -0,0 +1,3 @@
+<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">
+  <circle class="fretb_dot_empty" fill="none" cx="36" cy="44" r="32"/>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/dotEmpty_h.svg
+++ b/public/js/lib/renderer/fretboard/svg/dotEmpty_h.svg
@ -0,0 +1,3 @@
+<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 96 72" enable-background="new 0 0 96 72" xml:space="preserve">
+  <circle class="fretb_dot_empty" fill="none" cx="48" cy="36" r="32"/>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/dotWideLeft.svg
+++ b/public/js/lib/renderer/fretboard/svg/dotWideLeft.svg
@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">
+  <path fill="#27AAE1" d="M36,16C20.537,16,8,28.537,8,44s12.537,28,28,28v0.125h36V16H36z"/>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/dotWideMiddle.svg
+++ b/public/js/lib/renderer/fretboard/svg/dotWideMiddle.svg
@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">
+  <rect y="16" fill="#27AAE1" width="72" height="56"/>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/dotWideRight.svg
+++ b/public/js/lib/renderer/fretboard/svg/dotWideRight.svg
@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">
+  <path fill="#27AAE1" d="M36,72.125c15.463,0,28-12.537,28-28s-12.537-28-28-28V16H0l0,56.125H36z"/>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/dot_h.svg
+++ b/public/js/lib/renderer/fretboard/svg/dot_h.svg
@ -0,0 +1,3 @@
+<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 96 72" enable-background="new 0 0 96 72" xml:space="preserve">
+ <circle class="fretb_dot dot_h" fill="#27AAE1" cx="48" cy="36" r="32"/>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/fretb_horiz_5.svg
+++ b/public/js/lib/renderer/fretboard/svg/fretb_horiz_5.svg
@ -0,0 +1,24 @@
+<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 672 576" enable-background="new 0 0 672 576" xml:space="preserve">
+  <g class="fret_bg">
+    <rect x="78" y="102" fill="#FFFFFF" width="512" height="372"/>
+  </g>
+  <g class="frets">
+    <rect x="92" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="188" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="284" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="380" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="476" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="572" y="108" fill="#C7C8CA" width="8" height="360"/>
+  </g>
+  <g class="strings">
+    <rect x="78" y="102" width="512" height="12"/>
+    <rect x="78" y="174" width="512" height="12"/>
+    <rect x="78" y="246" width="512" height="12"/>
+    <rect x="78" y="318" width="512" height="12"/>
+    <rect x="78" y="390" width="512" height="12"/>
+    <rect x="78" y="462" width="512" height="12"/>
+  </g>
+  <g class="nut">
+    <rect x="78" y="102" width="22" height="372"/>
+  </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/fretb_horiz_6.svg
+++ b/public/js/lib/renderer/fretboard/svg/fretb_horiz_6.svg
@ -0,0 +1,25 @@
+<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 768 576" enable-background="new 0 0 768 576" xml:space="preserve">
+  <g class="fret_bg">
+    <rect x="78" y="102" fill="#FFFFFF" width="608" height="372"/>
+  </g>
+  <g class="frets">\
+    <rect x="92" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="188" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="284" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="380" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="476" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="572" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="668" y="108" fill="#C7C8CA" width="8" height="360"/>
+  </g>
+  <g class="strings">
+    <rect x="78" y="102" width="608" height="12"/>
+    <rect x="78" y="174" width="608" height="12"/>
+    <rect x="78" y="246" width="608" height="12"/>
+    <rect x="78" y="318" width="608" height="12"/>
+    <rect x="78" y="390" width="608" height="12"/>
+    <rect x="78" y="462" width="608" height="12"/>
+  </g>
+  <g class="nut">
+    <rect x="78" y="102" width="22" height="372"/>
+  </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/fretb_horiz_7.svg
+++ b/public/js/lib/renderer/fretboard/svg/fretb_horiz_7.svg
@ -0,0 +1,26 @@
+<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 792 576" enable-background="new 0 0 792 576" xml:space="preserve">
+  <g class="fret_bg">
+    <rect x="72" y="102" fill="#FFFFFF" width="648" height="372"/>
+  </g>
+  <g class="frets">
+    <rect x="84" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="172" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="260" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="348" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="436" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="524" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="612" y="108" fill="#C7C8CA" width="8" height="360"/>
+    <rect x="700" y="108" fill="#C7C8CA" width="8" height="360"/>
+  </g>
+  <g class="strings">
+    <rect x="72" y="462" width="648" height="12"/>
+    <rect x="72" y="390" width="648" height="12"/>
+    <rect x="72" y="318" width="648" height="12"/>
+    <rect x="72" y="246" width="648" height="12"/>
+    <rect x="72" y="174" width="648" height="12"/>
+    <rect x="72" y="102" width="648" height="12"/>
+  </g>
+  <g class="nut">
+    <rect x="72" y="106" width="20" height="368"/>
+  </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/fretb_vert_12.svg
+++ b/public/js/lib/renderer/fretboard/svg/fretb_vert_12.svg
@ -0,0 +1,31 @@
+<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 1232" enable-background="new 0 0 576 1232" xml:space="preserve">
+  <g class="fret_bg">
+    <rect x="102" y="72" fill="#FFFFFF" width="372" height="1088"/>
+  </g>
+  <g class="frets">
+    <rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="612" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="700" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="788" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="876" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="964" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="1052" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="1140" fill="#C7C8CA" width="360" height="8"/>
+  </g>
+  <g class="strings">
+    <rect x="102" y="72" width="12" height="1088"/>
+    <rect x="174" y="72" width="12" height="1088"/>
+    <rect x="246" y="72" width="12" height="1088"/>
+    <rect x="318" y="72" width="12" height="1088"/>
+    <rect x="390" y="72" width="12" height="1088"/>
+    <rect x="462" y="72" width="12" height="1088"/>
+  </g>
+  <g class="nut">
+    <rect x="104" y="72" width="368" height="20"/>
+  </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/fretb_vert_15.svg
+++ b/public/js/lib/renderer/fretboard/svg/fretb_vert_15.svg
@ -0,0 +1,34 @@
+<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 1496" enable-background="new 0 0 576 1496" xml:space="preserve">
+  <g class="fret_bg">
+    <rect x="102" y="72" fill="#FFFFFF" width="372" height="1352"/>
+  </g>
+  <g class="frets">
+    <rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="612" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="700" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="788" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="876" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="964" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="1052" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="1140" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="1228" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="1316" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="1404" fill="#C7C8CA" width="360" height="8"/>
+  </g>
+  <g class="strings">
+    <rect x="102" y="72" width="12" height="1352"/>
+    <rect x="174" y="72" width="12" height="1352"/>
+    <rect x="246" y="72" width="12" height="1352"/>
+    <rect x="318" y="72" width="12" height="1352"/>
+    <rect x="390" y="72" width="12" height="1352"/>
+    <rect x="462" y="72" width="12" height="1352"/>
+  </g>
+  <g class="nut">
+    <rect x="104" y="72" width="368" height="20"/>
+  </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/fretb_vert_4.svg
+++ b/public/js/lib/renderer/fretboard/svg/fretb_vert_4.svg
@ -0,0 +1,23 @@
+<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 528" enable-background="new 0 0 576 528" xml:space="preserve">
+  <g class="fret_bg">
+  	<rect x="102" y="72" fill="#FFFFFF" width="372" height="384"/>
+  </g>
+  <g class="frets">
+  	<rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>
+  	<rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>
+  	<rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>
+  	<rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>
+  	<rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>
+  </g>
+  <g class="strings">
+  	<rect x="102" y="72" width="12" height="384"/>
+  	<rect x="174" y="72" width="12" height="384"/>
+  	<rect x="246" y="72" width="12" height="384"/>
+  	<rect x="318" y="72" width="12" height="384"/>
+  	<rect x="390" y="72" width="12" height="384"/>
+  	<rect x="462" y="72" width="12" height="384"/>
+  </g>
+  <g class="nut">
+  	<rect x="102" y="72" width="368" height="20"/>
+  </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/fretb_vert_5.svg
+++ b/public/js/lib/renderer/fretboard/svg/fretb_vert_5.svg
@ -0,0 +1,24 @@
+<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 616" enable-background="new 0 0 576 616" xml:space="preserve">
+  <g class="fret_bg">
+    <rect x="102" y="72" fill="#FFFFFF" width="372" height="472"/>
+  </g>
+  <g class="frets">
+    <rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>
+  </g>
+  <g class="strings">
+    <rect x="102" y="72" width="12" height="472"/>
+    <rect x="174" y="72" width="12" height="472"/>
+    <rect x="246" y="72" width="12" height="472"/>
+    <rect x="318" y="72" width="12" height="472"/>
+    <rect x="390" y="72" width="12" height="472"/>
+    <rect x="462" y="72" width="12" height="472"/>
+  </g>
+  <g class="nut">
+    <rect x="102" y="72" width="368" height="20"/>
+  </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/fretb_vert_7.svg
+++ b/public/js/lib/renderer/fretboard/svg/fretb_vert_7.svg
@ -0,0 +1,26 @@
+<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 792" enable-background="new 0 0 576 792" xml:space="preserve">
+  <g class="fret_bg">
+    <rect x="102" y="71" fill="#FFFFFF" width="372" height="649"/>
+  </g>
+  <g class="frets">
+    <rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="612" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="700" fill="#C7C8CA" width="360" height="8"/>
+  </g>
+  <g class="strings">
+    <rect x="102" y="72" width="12" height="648"/>
+    <rect x="174" y="72" width="12" height="648"/>
+    <rect x="246" y="72" width="12" height="648"/>
+    <rect x="318" y="72" width="12" height="648"/>
+    <rect x="390" y="72" width="12" height="648"/>
+    <rect x="462" y="72" width="12" height="648"/>
+  </g>
+  <g class="nut">
+    <rect x="102" y="72" width="368" height="20"/>
+  </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/fretb_vert_9.svg
+++ b/public/js/lib/renderer/fretboard/svg/fretb_vert_9.svg
@ -0,0 +1,28 @@
+<svg class="fretboard_bg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 576 968" enable-background="new 0 0 576 968" xml:space="preserve">\
+  <g class="fret_bg">
+    <rect x="102" y="72" fill="#FFFFFF" width="372" height="824"/>
+  </g>
+  <g class="frets">
+    <rect x="108" y="84" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="172" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="260" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="348" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="436" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="524" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="612" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="700" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="788" fill="#C7C8CA" width="360" height="8"/>
+    <rect x="108" y="876" fill="#C7C8CA" width="360" height="8"/>
+  </g>
+  <g class="strings">
+    <rect x="102" y="72" width="12" height="824"/>
+    <rect x="174" y="72" width="12" height="824"/>
+    <rect x="246" y="72" width="12" height="824"/>
+    <rect x="318" y="72" width="12" height="824"/>
+    <rect x="390" y="72" width="12" height="824"/>
+    <rect x="462" y="72" width="12" height="824"/>
+  </g>
+  <g class="nut">
+    <rect x="102" y="72" width="368" height="20"/>
+  </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number1.svg
+++ b/public/js/lib/renderer/fretboard/svg/number1.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="72px" height="88px" viewBox="0 0 72 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M37.5216469,64.7094058 C35.4194397,62.8473515 32.3496604,61.6953141 28.2635824,61.2358913 C27.111545,61.1071138 25.2912564,60.992258 24.4211376,60.992258 L24.0696095,60.992258 L24.0626485,59.5478608 L24.0522071,58.099983 L24.1566214,57.9990492 L24.2610357,57.8981155 L26.819185,57.8841936 C28.9770798,57.8737521 29.439983,57.8598302 29.7775892,57.8111036 C30.29618,57.7345331 30.6616299,57.6370798 30.8774194,57.5117826 C31.1628183,57.3516808 31.3055178,57.0175552 31.4377759,56.2170459 C31.4934635,55.8864007 31.5004245,54.9257894 31.5108659,43.4680646 C31.5178269,34.4431918 31.5108659,30.9696774 31.4830221,30.6773175 C31.3298812,29.1250254 30.8669779,28.192258 30.0351443,27.7606791 C29.0640917,27.2594906 27.7275892,27.0576231 25.3365025,27.0576231 L24.1879457,27.0576231 L24.0939729,26.9601698 L24,26.8627165 L24,25.5088115 L24,24.1549067 L24.0939729,24.0574533 L24.1879457,23.96 L35.9728353,23.96 L47.757725,23.96 L47.8516977,24.0574533 L47.9456706,24.1549067 L47.9456706,25.512292 L47.9456706,26.8696774 L47.8516977,26.9601698 L47.7542445,27.0506622 L46.3968591,27.0680646 C44.9524618,27.0854669 44.4582343,27.1272326 43.6855687,27.283854 C42.947708,27.4335144 42.4082343,27.6423429 42.0149406,27.9347029 C41.4719864,28.3349576 41.110017,29.1424278 40.9290322,30.3466723 C40.8698642,30.7434465 40.8663837,31.5648388 40.8559423,47.7664516 L40.8455008,64.7650933 L40.7515281,64.8625467 L40.6575552,64.96 L39.2305603,64.9565195 L37.8000849,64.9565195 L37.5216469,64.7094058 Z" id="Path" fill="#6E6E6E" fill-rule="nonzero" transform="translate(35.972835, 44.460000) scale(1, -1) translate(-35.972835, -44.460000) "></path>
+        <rect id="Rectangle" x="0" y="0" width="72" height="88"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number1_h.svg
+++ b/public/js/lib/renderer/fretboard/svg/number1_h.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="96px" height="72px" viewBox="0 0 96 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M49.1812393,57.7371817 C46.9764855,55.7842955 43.7569609,54.5760612 39.471562,54.0942275 C38.2633276,53.9591681 36.3542444,53.8387096 35.4416808,53.8387096 L35.0730051,53.8387096 L35.0657045,52.323854 L35.0547538,50.8053481 L35.1642615,50.6994906 L35.2737691,50.5936333 L37.9567062,50.5790323 C40.2198641,50.5680815 40.705348,50.5534805 41.0594228,50.5023769 C41.6033107,50.4220713 41.9865874,50.3198642 42.2129032,50.188455 C42.5122241,50.0205433 42.6618846,49.6701188 42.8005942,48.8305603 C42.8589983,48.4837861 42.8662988,47.4763157 42.8772496,35.4596775 C42.8845501,25.994567 42.8772496,22.3516129 42.8480475,22.0449915 C42.6874364,20.4169779 42.2019524,19.4387096 41.3295416,18.9860781 C40.3111206,18.4604414 38.9094228,18.2487266 36.4016978,18.2487266 L35.1971138,18.2487266 L35.0985569,18.1465195 L35,18.0443124 L35,16.6243633 L35,15.2044143 L35.0985569,15.1022071 L35.1971138,15 L47.556876,15 L59.9166384,15 L60.0151952,15.1022071 L60.1137521,15.2044143 L60.1137521,16.6280136 L60.1137521,18.0516129 L60.0151952,18.1465195 L59.9129881,18.2414262 L58.4893888,18.2596775 C56.9745331,18.2779287 56.4561969,18.3217317 55.6458404,18.4859932 C54.8719864,18.6429541 54.3061969,18.8619694 53.8937181,19.1685908 C53.3242785,19.5883701 52.944652,20.4352292 52.7548387,21.6982173 C52.6927844,22.1143463 52.6891341,22.9758065 52.6781834,39.9677419 L52.6672326,57.7955857 L52.5686758,57.8977929 L52.4701188,58 L50.9735145,57.9963497 L49.4732598,57.9963497 L49.1812393,57.7371817 Z" id="Path" fill="#6E6E6E" fill-rule="nonzero" transform="translate(47.556876, 36.500000) scale(-1, 1) rotate(180.000000) translate(-47.556876, -36.500000) "></path>
+        <rect id="Rectangle" x="0" y="0" width="96" height="72"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number2.svg
+++ b/public/js/lib/renderer/fretboard/svg/number2.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="72px" height="88px" viewBox="0 0 72 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M34.0545059,64.3502018 C31.9234742,64.178616 30.3684926,63.8039289 28.8559196,63.0965755 C26.8026369,62.1370962 25.1769743,60.6523546 24.3005301,58.9364974 C23.7845589,57.9244919 23.5265733,56.877469 23.4806307,55.6378497 C23.4134838,53.7504069 23.9188528,52.3006828 25.0250102,51.208137 C25.7106158,50.5287976 26.4810384,50.1190929 27.4741063,49.9054863 C27.9618051,49.8004338 29.1845861,49.7899286 29.6616827,49.8879775 C30.5911377,50.0735702 31.3792306,50.4832749 32.0153595,51.1065862 C32.8175887,51.8944798 33.2169362,52.7243944 33.3335598,53.8449541 C33.485524,55.3366993 32.8918037,56.7479043 31.8139188,57.4552575 C31.6866929,57.5392996 31.114177,57.8159377 30.541661,58.0715654 C29.969145,58.3236913 29.4602419,58.5583085 29.4107653,58.5898243 C29.2658692,58.677368 29.1245073,58.817438 29.0679625,58.9189888 C28.9089302,59.2236409 29.177518,59.7454015 29.7182275,60.1691131 C30.6335463,60.8939753 31.8881337,61.2931747 33.2310724,61.2931747 C36.2350143,61.2896729 38.0621177,59.6578578 38.5922251,56.5062835 C38.7194508,55.7569092 38.7512573,55.3051836 38.7512573,54.3246938 C38.7477233,52.5633139 38.510942,51.1310985 37.94196,49.4397537 C37.3623759,47.716893 36.6661682,46.4177441 35.4115808,44.729901 C34.4079108,43.3817275 33.3971727,42.1701223 31.6831589,40.261669 C28.8064428,37.0610702 27.880522,35.9685245 26.9298627,34.6413615 C24.4030175,31.1221036 23.2438494,27.9670275 23.0247383,24.024058 L23,23.575834 L23.0989534,23.4707815 L23.2014408,23.3692308 L35.2772869,23.3692308 L47.349599,23.3692308 L47.3708033,23.4847885 C47.3778714,23.5443183 47.7489465,26.1846371 48.1942367,29.3467167 L49,35.1000907 L48.8975126,35.2051432 L48.7950251,35.3101956 L47.4238141,35.3101956 L46.0526029,35.3101956 L46.0384668,35.2331571 C46.0278646,35.1876344 45.985456,34.9390102 45.9430475,34.6798807 C45.7946173,33.7554189 45.5366318,32.9149992 45.2503737,32.4037438 C44.833356,31.6648747 44.0700014,31.353219 42.4302025,31.2481665 C42.1262743,31.2271561 39.2248199,31.2131491 35.5953513,31.2131491 L29.2941416,31.2131491 L29.3188799,31.311198 C29.3966291,31.6298572 29.9161343,32.652368 30.3331521,33.3141985 C31.2166644,34.7113965 32.6868288,36.2696749 34.3937746,37.6248518 C35.4469213,38.4617699 36.2350143,39.004541 37.8005981,39.967522 C40.7197227,41.7604176 41.9566399,42.5938339 43.3879299,43.7284007 C45.3917357,45.3111913 46.5120293,46.5963332 47.3566672,48.2666677 C48.2225092,49.9860265 48.6077205,51.7929291 48.5511757,53.9044838 C48.5299715,54.7414019 48.4769607,55.2316468 48.3285306,55.9319966 C47.7136061,58.887473 45.7804811,61.2966765 42.8189479,62.8024286 C41.1084681,63.6743642 39.1753432,64.1751143 36.8817453,64.3396965 C36.4364551,64.3712122 34.4079108,64.3817174 34.0545059,64.3502018 Z" id="Path" fill="#6E6E6E" fill-rule="nonzero" transform="translate(36.000000, 43.869231) scale(1, -1) translate(-36.000000, -43.869231) "></path>
+        <rect id="Rectangle" x="0" y="0" width="72" height="88"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number2_h.svg
+++ b/public/js/lib/renderer/fretboard/svg/number2_h.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="96px" height="72px" viewBox="0 0 96 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M45.5937501,57.9800427 C43.3587656,57.8000869 41.7279313,57.4071224 40.1415742,56.665264 C37.9881314,55.6589808 36.2831682,54.1018128 35.3639705,52.3022552 C34.8228301,51.2408836 34.5522598,50.1427864 34.5040761,48.8426979 C34.4336537,46.8631847 34.9636749,45.3427423 36.1237912,44.1969016 C36.8428409,43.4844237 37.6508452,43.0547335 38.6923554,42.830707 C39.2038443,42.72053 40.4862732,42.7095123 40.9866429,42.8123441 C41.9614371,43.0069901 42.7879736,43.4366804 43.4551332,44.0903972 C44.2964955,44.9167245 44.7153234,45.7871228 44.8376359,46.9623439 C44.9970129,48.5268572 44.3743307,50.0069014 43.243866,50.7487597 C43.110434,50.8369014 42.5099905,51.1270341 41.9095469,51.3951314 C41.3091033,51.6595562 40.7753757,51.9056181 40.7234855,51.9386712 C40.5715213,52.0304854 40.4232637,52.1773881 40.3639606,52.2838925 C40.1971707,52.6034057 40.4788604,53.150618 41.045946,53.5949985 C42.0059144,54.3552198 43.3217012,54.7738924 44.7301491,54.7738924 C47.8806248,54.7702198 49.7968551,53.0588039 50.3528214,49.7534943 C50.4862533,48.9675651 50.5196114,48.4938041 50.5196114,47.4654856 C50.5159049,45.6181848 50.2675733,44.1161051 49.6708361,42.3422557 C49.0629796,40.5353531 48.3328106,39.172831 47.0170238,37.4026541 C45.9643943,35.988716 44.9043519,34.7180081 43.1067276,32.7164595 C40.0896839,29.359734 39.1185962,28.2138934 38.1215633,26.8219907 C35.4714574,23.1310617 34.2557445,19.8220795 34.025945,15.68677 L34,15.2166814 L34.1037804,15.1065044 L34.2112672,15 L46.876179,15 L59.5373843,15 L59.559623,15.1211947 C59.5670358,15.1836283 59.9562122,17.9527432 60.4232239,21.2690706 L61.2682927,27.3030969 L61.1608059,27.4132739 L61.0533191,27.5234508 L59.6152197,27.5234508 L58.1771201,27.5234508 L58.1622944,27.4426545 C58.1511751,27.3949111 58.1066978,27.1341589 58.0622205,26.8623889 C57.9065499,25.8928314 57.6359797,25.0114156 57.3357578,24.475221 C56.8983977,23.7003094 56.0978063,23.373451 54.3780172,23.263274 C54.0592633,23.2412387 51.0162745,23.2265484 47.2097587,23.2265484 L40.6011729,23.2265484 L40.627118,23.3293802 C40.7086598,23.6635837 41.2535067,24.7359732 41.6908669,25.4300881 C42.6174773,26.895442 44.1593571,28.529734 45.9495685,29.9510172 C47.0540882,30.8287605 47.8806248,31.3980083 49.5225785,32.407964 C52.5840994,34.2883179 53.8813541,35.1623886 55.382463,36.3523001 C57.4840155,38.0123001 58.6589576,39.3601318 59.5447973,41.111946 C60.4528755,42.9151759 60.8568776,44.8102201 60.7975745,47.0247776 C60.775336,47.9025209 60.7197393,48.4166802 60.5640687,49.1511934 C59.9191479,52.2508394 57.8917241,54.777565 54.7857258,56.3567684 C52.991808,57.2712374 50.9643844,57.7964144 48.5589036,57.969025 C48.0918919,58.0020781 45.9643943,58.0130957 45.5937501,57.9800427 Z" id="Path" fill="#6E6E6E" fill-rule="nonzero" transform="translate(47.634146, 36.500000) scale(1, -1) translate(-47.634146, -36.500000) "></path>
+        <rect id="Rectangle" x="0" y="0" width="96" height="72"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number3.svg
+++ b/public/js/lib/renderer/fretboard/svg/number3.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="72px" height="88px" viewBox="0 0 72 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M34.7569053,64.5178842 C33.9960835,64.4662448 33.5106723,64.4249332 33.1560811,64.380179 C30.646402,64.0668994 28.6083634,63.2957497 27.0281951,62.0564019 C26.6185218,61.7362372 25.9368806,61.0511532 25.6649126,60.6827915 C25.0796651,59.8944287 24.7181887,59.0578689 24.5254012,58.0319644 C24.4599912,57.7014717 24.4496633,57.5086842 24.4462207,56.8614693 C24.4462207,56.1935986 24.4565486,56.0352375 24.5219586,55.7081875 C24.6596639,55.0368741 24.8765498,54.4860529 25.1967145,53.9903137 C25.9437659,52.8473598 27.0832772,52.1485053 28.5016419,51.9729311 C28.9319709,51.9178489 29.8890228,51.9488326 30.2470566,52.0245706 C31.1111573,52.2139153 31.789356,52.582277 32.4262431,53.2053936 C33.1113269,53.8767069 33.4969018,54.6926108 33.5932955,55.6634332 C33.7447713,57.2263884 33.0424743,58.6895072 31.4864043,60.0459045 C31.0629605,60.4142662 30.9700094,60.5313157 30.9975505,60.6655784 C31.0423048,60.913448 31.582798,61.2818097 32.1749309,61.4745971 C32.9082116,61.7121387 33.9995262,61.7396798 34.8946106,61.5434497 C35.3214971,61.4539412 35.5865798,61.3575475 36.0134662,61.1475469 C37.3939618,60.4659057 38.4508501,58.9890163 38.9569171,57.0370436 C39.4182299,55.2640878 39.4870825,52.7750644 39.125606,50.9573545 C38.8364249,49.5011208 38.2683905,48.3237405 37.4628145,47.5112792 C36.9188786,46.960458 36.3955984,46.6575063 35.6898588,46.4750468 C35.2423166,46.3614399 34.7844464,46.3407841 33.9203455,46.3993089 C33.5175575,46.42685 32.9254248,46.4475057 32.6052599,46.4475057 L32.0200124,46.4475057 L31.789356,46.3338988 C31.5242733,46.2030788 31.2006659,45.8966845 31.0629605,45.6453723 C30.6360741,44.8604521 30.9390258,43.9240561 31.7446018,43.5384812 C32.1818161,43.3284806 32.7223095,43.287169 33.775755,43.3835627 C34.4849373,43.4489727 34.8188727,43.4489727 35.2664149,43.3801201 C36.1890405,43.2424148 36.9051081,42.8809383 37.5660935,42.2165103 C38.4646206,41.3076553 39.0739666,39.9168317 39.3872461,38.0509248 C39.5111809,37.3038735 39.5697057,36.6910849 39.6179026,35.6651804 C39.7005257,33.8440278 39.5283941,32.2156625 39.125606,30.9522164 C38.3751122,28.6077836 36.9085507,27.1549926 34.8670696,26.7418767 C34.1028051,26.5835156 33.1285401,26.5628598 32.4159152,26.6867946 C31.3521417,26.8726968 30.2883682,27.4786001 30.1368924,27.9881097 L30.0955807,28.1223724 L30.2677124,28.2841761 C30.3641061,28.3702419 30.6291888,28.6008983 30.8598452,28.7971284 C31.8891923,29.6681144 32.5260794,30.6630352 32.763621,31.7646777 C32.8634574,32.2363183 32.8737853,33.1038617 32.7842769,33.5651745 C32.5088662,34.9559981 31.6034539,36.0369847 30.2470566,36.5946912 C29.5860711,36.8666592 28.9457415,36.9768235 28.0265586,36.9768235 C27.2863925,36.9768235 26.9765556,36.9355118 26.401636,36.7702655 C25.2139277,36.4294448 24.0881869,35.4792782 23.5132672,34.3363242 C23.0485118,33.4136986 22.8901507,32.1915641 23.0760529,30.955659 C23.3686766,28.9830305 24.5254012,27.2961405 26.5358986,25.9018744 C28.6496751,24.4353128 31.3073875,23.6435074 34.4298552,23.5402284 C39.4251152,23.3784246 43.4288968,24.6728545 46.0659535,27.3064684 C47.522187,28.7592594 48.3449762,30.3945099 48.6685837,32.4876306 C48.7374363,32.9179596 48.7477642,33.1245175 48.7477642,34.0023889 C48.7512069,35.0764902 48.7271084,35.3759993 48.5756326,36.2401 C47.8182534,40.4814234 44.7164414,43.2355295 39.1462619,44.6091399 C38.7675722,44.702091 38.4301943,44.7778289 38.3992106,44.7778289 C38.2546201,44.7778289 38.3578991,44.8363537 38.6401949,44.9120916 C38.8054413,44.9568458 39.2942951,45.1083216 39.7280668,45.2494696 C43.7697175,46.5645552 46.2036587,48.4304621 47.3053011,51.0606334 C47.7356302,52.086538 47.9043193,52.9678518 47.9318603,54.3070359 C47.9559588,55.5773674 47.8802208,56.3175334 47.6116954,57.3399953 C47.4498917,57.9665544 47.2984159,58.3624572 46.9782511,59.0131147 C46.4205446,60.1422982 45.6562802,61.0924648 44.6510314,61.9014834 C42.8402067,63.3577171 40.588725,64.1805063 37.6659299,64.4559168 C37.149535,64.5041137 35.1734639,64.5454254 34.7569053,64.5178842 Z" id="Path" fill="#6E6E6E" fill-rule="nonzero" transform="translate(35.874033, 44.026725) scale(1, -1) translate(-35.874033, -44.026725) "></path>
+        <rect id="Rectangle" x="0" y="0" width="72" height="88"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number3_h.svg
+++ b/public/js/lib/renderer/fretboard/svg/number3_h.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="97px" height="73px" viewBox="0 0 97 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M47.3304129,57.9907284 C46.5324778,57.9365699 46.023388,57.8932431 45.6514997,57.8463058 C43.0193972,57.5177443 40.8819421,56.7089775 39.2246924,55.4091738 C38.795035,55.0733912 38.0801431,54.3548886 37.7949083,53.968558 C37.1811122,53.1417384 36.8020028,52.2643709 36.599811,51.1884222 C36.5312103,50.841808 36.5203786,50.6396162 36.516768,49.9608298 C36.516768,49.26038 36.5275997,49.094294 36.5962005,48.7512903 C36.7406231,48.0472299 36.9680888,47.4695394 37.3038713,46.9496179 C38.0873642,45.75091 39.2824615,45.0179651 40.7700147,44.8338263 C41.2213354,44.7760572 42.2250727,44.8085523 42.6005715,44.8879848 C43.5068236,45.0865659 44.2181051,45.4728964 44.8860598,46.1264089 C45.6045624,46.8304693 46.0089458,47.6861734 46.1100416,48.704353 C46.2689065,50.3435498 45.5323511,51.8780403 43.9003753,53.3006033 C43.4562756,53.6869339 43.3587904,53.8096931 43.387675,53.9505052 C43.4346123,54.2104659 44.0014711,54.5967965 44.6224885,54.7989882 C45.391539,55.0481172 46.5360884,55.0770018 47.4748355,54.8711994 C47.9225457,54.7773247 48.2005593,54.6762289 48.6482694,54.4559844 C50.0961063,53.7410924 51.2045501,52.1921595 51.7353033,50.1449687 C52.2191191,48.2855272 52.2913304,45.6750881 51.912221,43.7687094 C51.6089335,42.2414399 51.0131901,41.0066264 50.1683177,40.1545328 C49.5978483,39.5768423 49.0490423,39.2591125 48.3088763,39.0677526 C47.8395027,38.9486039 47.3592975,38.9269404 46.4530453,38.9883201 C46.0306091,39.0172047 45.4095918,39.038868 45.0738092,39.038868 L44.460013,39.038868 L44.2181051,38.9197193 C43.9400915,38.7825178 43.6006983,38.4611775 43.4562756,38.1976062 C43.0085655,37.3743971 43.3262953,36.3923232 44.1711677,35.9879398 C44.6297095,35.7676953 45.1965685,35.7243685 46.3014016,35.8254643 C47.0451781,35.8940651 47.3954031,35.8940651 47.8647766,35.8218538 C48.8324083,35.6774312 49.583406,35.2983217 50.2766347,34.6014825 C51.2189923,33.6482931 51.8580625,32.1896245 52.186624,30.2326978 C52.3166044,29.4492049 52.377984,28.8065242 52.428532,27.7305756 C52.5151855,25.8205862 52.3346573,24.1127886 51.912221,22.7877109 C51.1251176,20.3289155 49.5870166,18.8052567 47.445951,18.3719888 C46.6444054,18.2059027 45.6226152,18.1842394 44.8752281,18.3142197 C43.7595632,18.5091903 42.6438984,19.1446499 42.4850335,19.6790137 L42.4417066,19.8198257 L42.622235,19.9895223 C42.7233308,20.0797864 43.0013444,20.3216944 43.2432522,20.5274966 C44.3228115,21.4409698 44.9907662,22.4844233 45.2398952,23.6398045 C45.3446016,24.1344519 45.3554333,25.0443145 45.2615587,25.5281303 C44.9727133,26.986799 44.0231345,28.1205167 42.6005715,28.7054284 C41.9073429,28.9906631 41.2357777,29.1062012 40.2717566,29.1062012 C39.4954848,29.1062012 39.1705339,29.0628744 38.5675695,28.8895673 C37.3219242,28.5321212 36.1412692,27.535605 35.5383046,26.3368971 C35.0508782,25.3692654 34.8847922,24.0875146 35.0797628,22.7913215 C35.3866609,20.7224672 36.599811,18.9532899 38.7083815,17.4910107 C40.925269,15.9529096 43.7126259,15.1224795 46.9874091,15.0141625 C52.2263403,14.8444659 56.4254284,16.2020387 59.1911219,18.9641216 C60.7183913,20.4877804 61.5813165,22.2027992 61.9207097,24.3980233 C61.992921,24.849344 62.0037527,25.0659779 62.0037527,25.9866723 C62.0073633,27.1131688 61.9820893,27.4272881 61.8232244,28.3335401 C61.0288999,32.7817573 57.77578,35.67021 51.9338844,37.1108258 C51.5367221,37.2083111 51.1828867,37.2877436 51.1503916,37.2877436 C50.9987479,37.2877436 51.1070649,37.3491232 51.4031312,37.4285556 C51.5764384,37.4754929 52.0891387,37.6343578 52.5440701,37.7823911 C56.7828745,39.1616273 59.3355445,41.1185539 60.4909256,43.8770263 C60.9422464,44.952975 61.1191641,45.8772798 61.1480486,47.2817899 C61.1733226,48.6140887 61.0938901,49.3903605 60.8122659,50.4626985 C60.6425693,51.1198215 60.4837044,51.5350366 60.1479219,52.2174335 C59.5630102,53.4016992 58.7614646,54.3982153 57.7071793,55.2466983 C55.8080217,56.7739677 53.4467115,57.636893 50.3813411,57.9257382 C49.8397562,57.9762861 47.7672914,58.019613 47.3304129,57.9907284 Z" id="Path" fill="#6E6E6E" fill-rule="nonzero" transform="translate(48.502035, 36.500000) scale(1, -1) translate(-48.502035, -36.500000) "></path>
+        <rect id="Rectangle" x="0.1201773" y="0.89003138" width="96" height="72"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number4.svg
+++ b/public/js/lib/renderer/fretboard/svg/number4.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="72px" height="88px" viewBox="0 0 72 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M38.2937605,64.4310793 C37.7095279,63.4596628 25.3023609,42.7453289 23.4770657,39.7031703 L23,38.9046037 L23,36.7785497 L23,34.6559528 L23.0967959,34.5626138 L23.1935919,34.4692749 L29.5475548,34.4692749 L35.9049747,34.4692749 L35.8842327,32.6301518 C35.8669477,30.7080607 35.8358348,30.2309949 35.6906408,29.5707083 C35.4901349,28.6442327 35.1755481,28.1429679 34.6224284,27.8525801 C33.9102867,27.4826813 32.4860033,27.1853794 30.9510962,27.0885835 C30.7713322,27.0782125 30.5708263,27.0609275 30.5120573,27.0505565 L30.3979764,27.0332715 L30.3979764,25.5951602 L30.3979764,24.1535919 L30.4913153,24.0567959 L30.5846543,23.96 L40.0775716,23.96 L49.570489,23.96 L49.663828,24.0567959 L49.757167,24.1535919 L49.757167,25.5951602 L49.757167,27.0332715 L49.646543,27.0505565 C49.584317,27.0609275 49.3838111,27.0782125 49.2040472,27.0885835 C48.3639967,27.1369815 47.3787521,27.3098313 46.7876054,27.5068803 C46.0512647,27.7523271 45.7021079,28.018516 45.4532041,28.5370657 C45.0660202,29.3390894 44.9519393,30.3243339 44.9519393,32.9412816 L44.9519393,34.4692749 L47.2577572,34.4692749 L49.5635751,34.4692749 L49.660371,34.5626138 L49.757167,34.6559528 L49.757167,36.4743339 L49.757167,38.296172 L49.677656,38.3687689 L49.598145,38.4448229 L47.2819561,38.451737 L44.9692243,38.4621079 L44.9588533,51.6125295 L44.9519393,64.7664081 L44.8586004,64.8632041 L44.7652614,64.96 L41.6885329,64.96 L38.6083474,64.96 L38.2937605,64.4310793 Z M37.1494941,57.1748398 C37.1149242,56.9501349 36.5479764,49.2721417 36.3440134,46.2057841 C36.1780776,43.6821753 35.8946037,38.9080607 35.8946037,38.5589038 L35.8946037,38.4448229 L30.8301012,38.4448229 C28.0437605,38.4448229 25.7655986,38.455194 25.7655986,38.465565 C25.7655986,38.5035919 37.1218381,57.2508937 37.1425801,57.2508937 C37.1529511,57.2508937 37.1598651,57.2163238 37.1494941,57.1748398 Z" id="Shape" fill="#6E6E6E" fill-rule="nonzero" transform="translate(36.378583, 44.460000) scale(1, -1) translate(-36.378583, -44.460000) "></path>
+        <rect id="Rectangle" x="0" y="0" width="72" height="88"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number4_h.svg
+++ b/public/js/lib/renderer/fretboard/svg/number4_h.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="96px" height="72px" viewBox="0 0 96 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M50.0397976,57.4052783 C49.4270658,56.3864756 36.4146712,34.6616864 34.5003372,31.4711298 L34,30.6336088 L34,28.4038448 L34,26.1777066 L34.1015177,26.0798145 L34.2030354,25.9819224 L40.8669477,25.9819224 L47.5344857,25.9819224 L47.5127318,24.053086 C47.4946037,22.0372344 47.461973,21.5368971 47.3096965,20.8444013 C47.0994098,19.8727318 46.7694773,19.3470152 46.1893761,19.0424621 C45.4424958,18.6545194 43.9487352,18.342715 42.3389545,18.2411973 C42.1504216,18.2303204 41.9401349,18.2121923 41.8784992,18.2013153 L41.7588533,18.1831872 L41.7588533,16.6749241 L41.7588533,15.1630354 L41.8567453,15.0615177 L41.9546374,14.96 L51.9106239,14.96 L61.8666104,14.96 L61.9645025,15.0615177 L62.0623946,15.1630354 L62.0623946,16.6749241 L62.0623946,18.1831872 L61.9463744,18.2013153 C61.881113,18.2121923 61.6708263,18.2303204 61.4822934,18.2411973 C60.6012648,18.2919562 59.5679596,18.4732377 58.9479764,18.6798988 C58.1757167,18.9373187 57.8095278,19.2164924 57.5484823,19.7603372 C57.1424115,20.601484 57.0227656,21.6347892 57.0227656,24.3793929 L57.0227656,25.9819224 L59.4410624,25.9819224 L61.8593592,25.9819224 L61.9608769,26.0798145 L62.0623946,26.1777066 L62.0623946,28.0847892 L62.0623946,29.9954975 L61.9790051,30.0716357 L61.8956155,30.1513997 L59.4664418,30.158651 L57.0408938,30.1695278 L57.0300168,43.9614334 L57.0227656,57.7569646 L56.9248736,57.8584823 L56.8269815,57.96 L53.6001687,57.96 L50.3697302,57.96 L50.0397976,57.4052783 Z M48.8397133,49.7950759 C48.803457,49.5594098 48.2088533,41.5068803 47.9949409,38.2909443 C47.8209106,35.6442327 47.5236088,30.6372344 47.5236088,30.2710455 L47.5236088,30.1513997 L42.2120574,30.1513997 C39.2897976,30.1513997 36.9005059,30.1622766 36.9005059,30.1731535 C36.9005059,30.2130354 48.8107083,49.8748398 48.8324621,49.8748398 C48.8433389,49.8748398 48.8505902,49.8385835 48.8397133,49.7950759 Z" id="Shape" fill="#6E6E6E" fill-rule="nonzero" transform="translate(48.031197, 36.460000) scale(1, -1) translate(-48.031197, -36.460000) "></path>
+        <rect id="Rectangle" x="0" y="0" width="96" height="72"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number5.svg
+++ b/public/js/lib/renderer/fretboard/svg/number5.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="72px" height="88px" viewBox="0 0 72 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M46.1255177,64.7937228 C45.1705152,64.4008849 44.7268794,64.2315582 44.1951936,64.058845 C42.9184705,63.6389149 41.6451339,63.3781518 40.2160168,63.2393039 C38.8072189,63.100456 35.8270693,63.1478675 33.8324012,63.3442865 C31.9731943,63.5237727 30.0631894,63.964022 28.2310748,64.6345557 C27.9093542,64.7496979 27.6316584,64.8479073 27.6147257,64.8479073 C27.597793,64.8479073 27.5334489,64.8140419 27.4691048,64.7734036 L27.3573492,64.6988998 L27.3336434,63.8522665 C27.3065512,62.8600122 27.2557531,61.3665508 27.2286609,60.8348651 C27.0051497,56.3206161 26.6292444,52.5039928 25.9891896,48.321624 C25.8740476,47.5562674 25.515075,45.4464571 25.420252,44.9520232 C25.3694541,44.6946466 25.3626809,44.6032102 25.3931598,44.576118 C25.4405713,44.532093 27.8483966,43.0724971 27.8721023,43.0724971 C27.8856483,43.0724971 28.1227057,43.2384373 28.4071746,43.4382427 C30.4120024,44.8673598 31.6684063,45.5243473 32.8875583,45.7851104 C33.3650595,45.8867064 34.2116929,45.9104122 34.7230595,45.8359085 C36.142017,45.6259434 37.2426403,44.8842925 38.0418623,43.5940233 C38.8580168,42.2766617 39.3219719,40.4851855 39.4675929,38.0942929 C39.5048448,37.4813304 39.487912,35.4257044 39.4371141,34.7924227 C39.2339221,32.1272209 38.7056228,30.2341487 37.7777127,28.8422835 C36.802391,27.3725279 35.430845,26.6478098 33.6292092,26.6410367 C32.802895,26.6410367 32.1797728,26.7697249 31.5735833,27.074513 C31.082536,27.3183434 30.7540422,27.5994257 30.632127,27.8771214 C30.5711695,28.0159693 30.5677828,28.0498346 30.6050348,28.0938595 C30.6287404,28.1243384 31.0385111,28.4731513 31.5126257,28.8659892 C32.5624511,29.7397149 32.7216181,29.9158145 33.0196331,30.5524829 C33.3345808,31.2230165 33.463269,31.9070962 33.4327902,32.7774354 C33.3887653,34.0304528 32.9925409,34.9346571 32.105269,35.7846771 C31.4347355,36.431505 30.7201769,36.8040237 29.7516283,37.0173752 C29.4366807,37.0851059 29.3046059,37.091879 28.6171397,37.091879 C27.8517831,37.091879 27.8314639,37.0884924 27.4318529,36.98351 C26.9509651,36.8548217 26.3312295,36.5635798 25.9756435,36.2926571 C25.1425562,35.6627619 24.505888,34.7009863 24.2146461,33.6376148 C24.0588656,33.0788368 24.0216136,32.787595 24.004681,32.0459441 C23.9775888,31.0265975 24.0656386,30.3763832 24.3331748,29.5602285 C25.2238331,26.8340691 27.9838579,24.8326278 31.7158178,24.1959596 C33.3447403,23.9182638 35.3766605,23.8708523 37.1308848,24.0740443 C40.4361415,24.453336 43.0336126,25.5979844 45.0384404,27.5587873 C46.0205351,28.5239493 46.6707496,29.397675 47.2600064,30.5592559 C47.9576323,31.9240289 48.3843355,33.4208767 48.6010736,35.2496048 C48.6721908,35.8693404 48.7026696,37.803051 48.6518717,38.5006769 C48.4588392,41.0304174 47.7273481,43.1808662 46.4472383,44.9689558 C44.191807,48.1218185 40.7104507,49.743968 36.4400319,49.6322125 C35.0244609,49.5949605 33.8628799,49.3849955 32.498107,48.9142673 C31.3128202,48.5044967 30.2494487,47.9694245 29.1962369,47.2480929 L28.8304912,46.9974894 L28.8474239,47.1431103 C28.86097,47.2243871 29.0607755,49.3680628 29.2978328,51.9113495 C29.5315037,54.454636 29.7279227,56.5373542 29.7313092,56.5407407 C29.7346957,56.5441273 29.8599973,56.5001023 30.0090049,56.4425312 C31.0960822,56.0192145 32.1018826,55.9210051 35.0515532,55.9514839 C37.5440419,55.9785762 38.7699669,56.0767856 40.199084,56.3680275 C42.6238421,56.8590748 44.4491836,57.9292195 45.9528044,59.7342417 C46.0848793,59.8934088 46.3083904,60.1473988 46.4540114,60.2997928 C47.2295275,61.1328801 47.6968692,62.2944611 47.7883056,63.6185956 L47.8120114,63.9606355 L47.683323,64.1943064 C47.5139963,64.4957078 47.2532333,64.7700171 47.0398817,64.8682265 C46.7723455,64.9935282 46.5725401,64.9765956 46.1255177,64.7937228 Z" id="Path" fill="#6E6E6E" fill-rule="nonzero" transform="translate(36.338548, 44.449093) scale(1, -1) translate(-36.338548, -44.449093) "></path>
+        <rect id="Rectangle" x="0" y="0" width="72" height="88"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number5_h.svg
+++ b/public/js/lib/renderer/fretboard/svg/number5_h.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="96px" height="72px" viewBox="0 0 96 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M58.2048112,57.7861438 C57.2032233,57.374143 56.7379467,57.1965565 56.180325,57.0154182 C54.8413227,56.5750037 53.5058721,56.3015205 52.007042,56.1558995 C50.5295222,56.0102786 47.4039995,56.0600028 45.3120305,56.2660032 C43.3621307,56.4542449 41.3589548,56.9159698 39.4374687,57.6192124 C39.1000544,57.7399713 38.8088124,57.8429714 38.7910538,57.8429714 C38.7732951,57.8429714 38.7058123,57.8074541 38.6383295,57.7648334 L38.5211223,57.6866952 L38.4962602,56.7987627 C38.4678464,55.7581058 38.4145704,54.1917927 38.3861566,53.634171 C38.1517423,48.8997147 37.7575003,44.8969148 37.0862233,40.5105279 C36.9654645,39.7078369 36.5889811,37.495109 36.4895326,36.9765564 C36.4362567,36.7066248 36.4291532,36.6107281 36.4611188,36.5823143 C36.510843,36.5361418 39.0361232,35.0053461 39.0609854,35.0053461 C39.0751922,35.0053461 39.3238133,35.1793809 39.6221587,35.388933 C41.724783,36.887763 43.0424749,37.5767987 44.3210978,37.8502819 C44.8218917,37.9568339 45.7098243,37.981696 46.2461355,37.903558 C47.7343105,37.6833507 48.8886228,36.9055217 49.7268312,35.5523125 C50.5827981,34.1706894 51.0693852,32.2918242 51.2221096,29.7843027 C51.2611787,29.1414395 51.2434199,26.9855391 51.190144,26.3213656 C50.9770402,23.5261539 50.4229703,21.5407367 49.4497963,20.0809757 C48.4268979,18.5395247 46.9884472,17.7794545 45.0989267,17.772351 C44.2323045,17.772351 43.5787862,17.9073167 42.9430264,18.2269725 C42.4280255,18.4826971 42.0835077,18.7774907 41.9556454,19.0687325 C41.8917143,19.2143535 41.8881625,19.2498707 41.9272316,19.2960432 C41.9520936,19.3280089 42.3818531,19.693837 42.8790952,20.1058378 C43.9801316,21.0221842 44.1470629,21.2068741 44.4596152,21.8745995 C44.7899262,22.577842 44.9248918,23.2952915 44.8929263,24.2080862 C44.8467538,25.5222264 44.4312014,26.4705383 43.500648,27.3620226 C42.7974055,28.0404031 42.0479904,28.4310935 41.0321955,28.6548524 C40.7018847,28.725887 40.5633671,28.7329905 39.842366,28.7329905 C39.0396749,28.7329905 39.0183645,28.7294387 38.5992603,28.6193352 C38.0949146,28.4843694 37.444948,28.1789206 37.0720164,27.8947821 C36.1982907,27.2341604 35.5305655,26.2254689 35.2251167,25.1102256 C35.0617371,24.5241902 35.022668,24.2187414 35.0049094,23.4409125 C34.9764955,22.3718416 35.0688405,21.6899095 35.3494272,20.8339424 C36.2835323,17.9747997 39.1781924,15.875727 43.0921991,15.2080018 C44.8005813,14.9167599 46.9316195,14.8670357 48.7714157,15.0801395 C52.2379045,15.4779333 54.9620815,16.6784181 57.0647058,18.7348699 C58.0947076,19.747113 58.7766398,20.6634594 59.3946408,21.8817029 C60.1262973,23.3130501 60.5738153,24.8829149 60.801126,26.8008493 C60.8757123,27.4508158 60.9076779,29.4788538 60.854402,30.2105103 C60.6519533,32.8636527 59.8847797,35.1190014 58.5422256,36.994315 C56.1767732,40.3009758 52.5255946,42.0022546 48.0468627,41.8850475 C46.5622395,41.8459784 45.343996,41.6257712 43.9126488,41.1320807 C42.6695431,40.7023213 41.5542999,40.141148 40.4497119,39.3846294 L40.0661249,39.1218014 L40.0838836,39.2745258 C40.0980905,39.3597673 40.3076426,41.6080125 40.5562637,44.275362 C40.8013331,46.9427113 41.0073335,49.1270254 41.0108852,49.1305771 C41.0144369,49.1341289 41.1458509,49.0879564 41.302127,49.027577 C42.4422326,48.5836107 43.4970964,48.4806106 46.5906534,48.5125762 C49.2047268,48.54099 50.4904531,48.6439901 51.9892833,48.949439 C54.5323222,49.4644398 56.4467047,50.5867866 58.0236729,52.4798587 C58.1621905,52.6467901 58.3966046,52.9131698 58.5493291,53.0729977 C59.3626752,53.9467234 59.8528141,55.1649668 59.9487108,56.5536933 L59.9735729,56.9124181 L59.838607,57.1574875 C59.6610206,57.4735914 59.3875373,57.7612817 59.1637783,57.8642818 C58.8831916,57.9956958 58.6736396,57.9779372 58.2048112,57.7861438 Z" id="Path" fill="#6E6E6E" fill-rule="nonzero" transform="translate(47.940429, 36.449093) scale(1, -1) translate(-47.940429, -36.449093) "></path>
+        <rect id="Rectangle" transform="translate(48.000000, 36.000000) scale(1, -1) translate(-48.000000, -36.000000) " x="0" y="0" width="96" height="72"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number6.svg
+++ b/public/js/lib/renderer/fretboard/svg/number6.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="72px" height="88px" viewBox="0 0 72 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M37.6319059,64.094947 C37.0038369,64.0548575 36.1753204,63.9446113 35.5138437,63.8109796 C31.9659224,63.0993908 29.0527516,61.1149603 26.8378064,57.9011182 C24.1384463,53.9790283 22.8388782,48.4633804 23.0159401,41.6648683 C23.162935,36.0222703 24.3322122,31.6625366 26.5772246,28.3952418 C28.869008,25.0544496 31.972604,23.3038745 35.8746492,23.1435165 C40.909223,22.9397282 44.8146091,24.8172534 47.1732084,28.5789853 C48.1988315,30.209292 48.8202189,32.2137672 49.0440519,34.6157968 C49.1008454,35.2271618 49.1008454,37.2115923 49.0440519,37.7895494 C48.7099727,41.1670903 47.5941481,43.7060923 45.5495834,45.7406347 C43.899232,47.3843045 41.9782765,48.2829776 39.5829286,48.533537 C39.0250162,48.5903305 37.7922639,48.5836489 37.2310108,48.5134923 C35.5672963,48.3163855 34.2844321,47.8186075 32.8846402,46.829733 L32.550561,46.5925368 L32.5405386,47.6883166 C32.5004491,51.7507199 33.0516798,55.3253675 34.0706214,57.6338549 C34.9692946,59.6683974 36.1920245,60.8176299 37.8457166,61.1784353 C38.256634,61.2686368 39.5394982,61.2686368 39.9504156,61.1784353 C40.8791559,60.974647 41.4370682,60.5770928 41.5339511,60.0492476 C41.5874038,59.7485763 41.3034365,59.447905 40.3179028,58.7697242 C39.943734,58.5124832 39.542839,58.2118119 39.4325929,58.1015658 C38.6608699,57.3465468 38.3234498,56.0536602 38.5639869,54.7908408 C38.7844792,53.6315858 39.5495206,52.6460521 40.6586635,52.0847991 C41.5940854,51.6137474 42.7834075,51.4667525 44.0261821,51.6738816 C45.1019172,51.8542844 45.9437968,52.278565 46.6854526,53.0202209 C47.4271085,53.7652175 47.8413668,54.5803709 48.0384735,55.6961954 C48.095267,56.0135707 48.1086301,56.234063 48.111971,56.7652489 C48.111971,57.48686 48.0651998,57.9011182 47.9148642,58.5024609 C47.3135216,60.8877865 45.3057055,62.7786748 42.452669,63.6405992 C41.1330561,64.0414942 39.382481,64.2051931 37.6319059,64.094947 Z M36.9771106,45.1225882 C38.1296839,44.8386209 38.8112056,43.9900597 39.1653295,42.3998425 C39.5227943,40.7929216 39.6965155,37.699348 39.6163365,34.3151256 C39.5495206,31.38191 39.3624362,29.6580612 38.9916083,28.4687392 C38.6441659,27.3562554 37.9526219,26.6413259 36.9938146,26.3974481 C36.1485942,26.1836373 35.186446,26.2938836 34.5249692,26.688097 C34.2543649,26.848455 33.8701739,27.2159422 33.6797487,27.4999095 C32.9748416,28.5522591 32.63074,30.3496052 32.4971083,33.713783 C32.453678,34.806222 32.4738044,37.8563653 32.533857,38.7416752 C32.7075783,41.444376 33.0115903,42.9310285 33.5728434,43.8530871 C33.8200621,44.2539822 34.271069,44.6983076 34.6218521,44.8787104 C34.9158418,45.029046 35.2499211,45.1392922 35.5572739,45.189404 C35.8813308,45.239516 36.649713,45.2027672 36.9771106,45.1225882 Z" id="Shape" fill="#6E6E6E" fill-rule="nonzero" transform="translate(36.043323, 43.628528) scale(1, -1) translate(-36.043323, -43.628528) "></path>
+        <rect id="Rectangle" x="0" y="0" width="72" height="88"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number6_h.svg
+++ b/public/js/lib/renderer/fretboard/svg/number6_h.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="96px" height="72px" viewBox="0 0 96 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M49.3456574,57.0933089 C48.6869509,57.0512638 47.818019,56.9356398 47.1242751,56.7954895 C43.4032844,56.049189 40.3480078,53.967957 38.0250164,50.5973421 C35.1939803,46.4839307 33.8310186,40.6992269 34.0167177,33.56908 C34.170883,27.6512334 35.3971982,23.0788297 37.7517233,19.6521547 C40.155301,16.148397 43.410292,14.312428 47.5026808,14.1442477 C52.7828436,13.9305185 56.8787363,15.8996302 59.3523893,19.8448613 C60.4280428,21.5546951 61.0797417,23.6569496 61.3144935,26.1761514 C61.3740574,26.817339 61.3740574,28.8985711 61.3144935,29.5047211 C60.9641177,33.0470201 59.7938627,35.7098759 57.649563,37.8436643 C55.9187067,39.5675131 53.904046,40.5100239 51.3918519,40.7728058 C50.8067243,40.8323696 49.5138378,40.8253621 48.9252064,40.7517832 C47.1803352,40.5450615 45.8348922,40.0230016 44.3668178,38.9858893 L44.016442,38.7371226 L44.0059307,39.8863551 C43.9638857,44.1469243 44.5420056,47.895945 45.6106517,50.3170416 C46.5531626,52.45083 47.8355379,53.6561226 49.5698979,54.0345284 C50.0008601,54.1291299 51.346303,54.1291299 51.7772652,54.0345284 C52.7513098,53.8207992 53.3364373,53.403852 53.4380463,52.8502583 C53.4941064,52.5349201 53.196287,52.2195819 52.1626786,51.5083191 C51.7702576,51.2385298 51.3498068,50.9231916 51.2341828,50.8075676 C50.4248148,50.0157184 50.0709352,48.6597642 50.3232058,47.3353438 C50.5544538,46.1195399 51.3568142,45.0859313 52.5200618,44.4973001 C53.501114,44.0032703 54.7484517,43.8491049 56.0518496,44.0663379 C57.1800595,44.2555408 58.0630064,44.7005181 58.8408406,45.4783523 C59.6186748,46.2596902 60.0531407,47.1146071 60.2598625,48.2848621 C60.3194264,48.6177191 60.3334414,48.8489671 60.3369452,49.4060646 C60.3369452,50.1628762 60.2878925,50.5973421 60.1302234,51.2280186 C59.499547,53.7297015 57.3937887,55.7128283 54.4015797,56.6167978 C53.0175954,57.0372487 51.1816264,57.2089329 49.3456574,57.0933089 Z M48.6589209,37.1954692 C49.8677173,36.8976498 50.5824839,36.0076953 50.9538822,34.3399067 C51.3287842,32.6545993 51.5109797,29.4101197 51.4268895,25.8608132 C51.3568142,22.7845139 51.1606038,20.976575 50.7716868,19.7292373 C50.4072959,18.562486 49.6820181,17.8126819 48.6764397,17.5569076 C47.789989,17.3326671 46.7809068,17.4482911 46.0871628,17.8617345 C45.8033584,18.0299149 45.4004263,18.4153282 45.2007121,18.7131477 C44.4614192,19.8168313 44.1005322,21.7018529 43.9603819,25.2301369 C43.914833,26.3758656 43.9359401,29.5747963 43.9989232,30.5032921 C44.1811187,33.337832 44.4999605,34.8970041 45.0885919,35.8640412 C45.34787,36.2844922 45.8208772,36.7504919 46.1887718,36.9396949 C46.4971024,37.097364 46.8474782,37.212988 47.1698239,37.2655443 C47.5096884,37.3181007 48.3155526,37.2795594 48.6589209,37.1954692 Z" id="Shape" fill="#6E6E6E" fill-rule="nonzero" transform="translate(47.679583, 35.628528) scale(1, -1) translate(-47.679583, -35.628528) "></path>
+        <rect id="Rectangle" x="0" y="0" width="96" height="72"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number7.svg
+++ b/public/js/lib/renderer/fretboard/svg/number7.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="72px" height="88px" viewBox="0 0 72 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M24.1797818,64.3324622 C24.1797818,64.308385 23.9149329,61.1783515 23.5916107,57.3810361 L23,50.4743246 L23.0997483,50.3711368 L23.196057,50.2713884 L24.4033557,50.2713884 L25.6072148,50.2713884 L25.6519295,50.5052811 C25.9993289,52.3523448 26.5875,54.1134186 27.1550336,54.9836367 C27.7260068,55.8641736 28.5927852,56.2906838 30.2953859,56.5245763 C30.6462249,56.5692911 31.4407719,56.5796099 36.572651,56.5899287 L42.4474833,56.6036871 L42.3202182,56.4041905 C38.8083893,50.9283515 35.7746645,45.6864052 33.7590604,41.6208011 C31.9739094,38.0161032 30.8388423,35.1405998 30.2403523,32.6950462 C29.8860739,31.2641737 29.7519296,30.2598113 29.7519296,29.0972274 C29.7519296,27.810818 29.9376678,26.8890059 30.3744966,26.0119085 C31.234396,24.2783515 32.8854027,23.3737374 35.1830537,23.3737374 C38.4369127,23.3737374 40.3114933,25.0557005 40.7723994,28.3852307 C40.9237416,29.475583 40.9168624,30.4042743 40.741443,33.2281837 C40.6967282,33.9676972 40.6382551,34.8860696 40.6141778,35.2747441 C40.5557047,36.2171938 40.5557047,39.7668582 40.6141778,40.554526 C40.7311241,42.1470595 40.8687081,43.330281 41.0854027,44.6132508 C42.1104026,50.7082173 44.5834732,56.2081333 48.5114933,61.1061199 L48.6353188,61.2609018 L48.6353188,62.7261703 L48.6353188,64.1879991 L48.5390101,64.2808683 L48.4427014,64.3737374 L36.3112417,64.3737374 C26.6287751,64.3737374 24.1797818,64.3634186 24.1797818,64.3324622 Z" id="Path" fill="#6E6E6E" fill-rule="nonzero" transform="translate(35.817659, 43.873737) scale(1, -1) translate(-35.817659, -43.873737) "></path>
+        <rect id="Rectangle" x="0" y="0" width="72" height="88"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number7_h.svg
+++ b/public/js/lib/renderer/fretboard/svg/number7_h.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="96px" height="72px" viewBox="0 0 96 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M36.2373322,57.3304488 C36.2373322,57.3051971 35.9595638,54.022479 35.6204698,50.0399287 L35,42.7963045 L35.1046141,42.6880831 L35.2056208,42.583469 L36.4718121,42.583469 L37.734396,42.583469 L37.7812919,42.828771 C38.1456376,44.7659354 38.7625,46.6129153 39.3577182,47.525583 C39.9565437,48.449073 40.865604,48.8963885 42.6512584,49.1416904 C43.0192115,49.1885864 43.8525168,49.1994086 49.2347315,49.2102307 L55.396141,49.2246602 L55.2626678,49.0154321 C51.5795302,43.2724791 48.3978188,37.7748281 46.2838926,33.5109018 C44.4116611,29.730365 43.2212248,26.7145931 42.5935403,24.1497442 C42.2219799,22.649073 42.081292,21.5957173 42.081292,20.376422 C42.081292,19.0272609 42.2760906,18.0604824 42.7342282,17.1405998 C43.6360738,15.3224791 45.3676174,14.3737374 47.777349,14.3737374 C51.1899328,14.3737374 53.1559564,16.1377475 53.6393457,19.6296938 C53.7980705,20.7732341 53.7908557,21.7472273 53.6068792,24.7088884 C53.5599832,25.4844757 53.4986578,26.4476468 53.473406,26.855281 C53.4120805,27.8437038 53.4120805,31.5665227 53.473406,32.3926133 C53.596057,34.0628313 53.7403524,35.3037709 53.9676174,36.6493247 C55.0426174,43.0416065 57.6363255,48.8098112 61.7559564,53.9467239 L61.8858221,54.1090562 L61.8858221,55.6458011 L61.8858221,57.1789387 L61.7848154,57.2763381 L61.6838088,57.3737374 L48.9605705,57.3737374 C38.8057886,57.3737374 36.2373322,57.3629152 36.2373322,57.3304488 Z" id="Path" fill="#6E6E6E" fill-rule="nonzero" transform="translate(48.442911, 35.873737) scale(1, -1) translate(-48.442911, -35.873737) "></path>
+        <rect id="Rectangle" x="7.10542736e-15" y="0" width="96" height="72"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number8.svg
+++ b/public/js/lib/renderer/fretboard/svg/number8.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="72px" height="88px" viewBox="0 0 72 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M34.4630314,64.5126549 C31.2896684,64.2593336 28.7222226,63.1878529 26.801773,61.3153291 C25.9836136,60.5211324 25.4187755,59.7543219 24.9600586,58.8163484 C23.7893033,56.4200657 23.7174148,53.3562469 24.7649327,50.7032196 C25.7611017,48.1836995 27.7397466,45.8456121 30.6358255,43.7539996 L31.1082356,43.4150967 L30.2592667,42.9837658 C25.1004123,40.351278 22.8752925,37.2463802 23.0053765,32.8714525 C23.0841115,30.1739228 24.1213596,28.0069985 26.1102743,26.3775262 C28.0273005,24.8062494 30.4920486,23.9059317 33.6414487,23.6252243 C33.9700818,23.5978382 34.6650038,23.5636056 35.1819163,23.5499126 C39.2898296,23.4609078 42.6275091,24.3612254 45.1230665,26.2405958 C47.4337677,27.9796124 48.7209138,30.2252717 49.0666632,33.1076575 C49.1351285,33.6964585 49.1453983,35.0520699 49.0837795,35.6408708 C48.7243371,39.0675552 47.043516,41.9157083 43.7674551,44.6577405 C43.0964959,45.2157321 42.0832106,45.9688495 41.3677491,46.4412595 C41.0356927,46.6569249 40.7652551,46.8417811 40.7652551,46.8520509 C40.7618318,46.8623206 40.974074,46.9752883 41.2342419,47.1053722 C41.8470056,47.4100424 42.5521973,47.8139872 43.1067657,48.1768529 C45.8659141,49.987758 47.3208001,52.0519845 47.7281682,54.7255514 C47.8034799,55.2253475 47.8342892,56.3276376 47.7829403,56.8171639 C47.6015075,58.5287945 46.913432,59.9734106 45.6879045,61.1955149 C43.753762,63.1296574 40.9021855,64.2730266 37.4070359,64.5160782 C36.8285048,64.5537341 34.9833671,64.5537341 34.4630314,64.5126549 Z M37.0749797,61.5173015 C38.6976053,61.2537103 40.0018679,60.3773555 40.8439901,58.9806649 C41.432791,58.0016123 41.7306148,56.6699637 41.6758426,55.2732732 C41.5868378,53.1200419 40.8097575,51.271481 39.2076712,49.4023804 C38.9372336,49.0840171 38.3929351,48.5294489 38.351856,48.5294489 C38.3005071,48.5294489 37.3180311,49.135366 36.6025696,49.607776 C33.6859511,51.5419186 32.0393625,53.3185911 31.4197522,55.204808 C30.957612,56.6151915 31.0295005,58.1180031 31.6148782,59.2613724 C32.2961071,60.5861744 33.6517185,61.4146036 35.3941584,61.5686504 C35.8391824,61.6097294 36.6641883,61.5823434 37.0749797,61.5173015 Z M34.3603336,41.1215118 C36.6710348,39.7385143 38.5161725,38.3281307 39.6595418,37.0615241 C41.1623534,35.4012425 41.8846614,33.6074537 41.812773,31.7041205 C41.7580008,30.256081 41.2958606,29.1264049 40.3750033,28.1884314 C39.5602672,27.3531557 38.5504051,26.8362432 37.3043381,26.6171545 C36.8011188,26.5247264 35.7262148,26.4939171 35.178493,26.5486893 C33.7715326,26.6958895 32.6384333,27.1511832 31.6662271,27.9659194 C30.3688111,29.0579397 29.5848843,30.6292165 29.3931817,32.5222799 C29.3692189,32.7756013 29.3589491,33.2035088 29.3726421,33.6690724 C29.4000283,34.7028973 29.5061494,35.3327773 29.8245126,36.2947136 C30.3653878,37.937879 31.3204777,39.4406906 32.9362569,41.1797073 C33.3710111,41.6452707 33.4120902,41.6795033 33.4805554,41.6452707 C33.5216346,41.6213079 33.9187329,41.3885261 34.3603336,41.1215118 Z" id="Shape" fill="#6E6E6E" fill-rule="nonzero" transform="translate(36.062271, 44.043906) scale(1, -1) translate(-36.062271, -44.043906) "></path>
+        <rect id="Rectangle" x="0" y="0" width="72" height="88"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number8_h.svg
+++ b/public/js/lib/renderer/fretboard/svg/number8_h.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="96px" height="72px" viewBox="0 0 96 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M46.0222037,57.5111304 C42.6940424,57.245452 40.0013554,56.1217039 37.9872254,54.1578375 C37.1291558,53.3248996 36.5367646,52.5206837 36.0556712,51.5369553 C34.8278059,49.0237808 34.7524106,45.8105074 35.851027,43.0280642 C36.8957895,40.3856406 38.9709537,37.9335002 42.0083048,35.7398578 L42.5037593,35.384423 L41.6133773,34.9320517 C36.2028714,32.1711498 33.8692092,28.9147936 34.0056388,24.3264548 C34.0882145,21.4973382 35.17606,19.2247103 37.261995,17.5157516 C39.2725347,15.8678271 41.8575143,14.9235915 45.1605438,14.629191 C45.5052078,14.6004691 46.2340284,14.5645666 46.7761561,14.5502056 C51.0844554,14.4568591 54.5849486,15.4010947 57.2022405,17.3721416 C59.6256588,19.1959883 60.9755926,21.551192 61.3382078,24.574182 C61.4100128,25.191705 61.4207836,26.6134437 61.356159,27.2309667 C60.9791828,30.8248063 59.2163704,33.8118938 55.7805017,36.6876837 C55.0768127,37.2728943 54.014099,38.0627492 53.2637368,38.5582036 C52.9154826,38.7843893 52.6318529,38.9782628 52.6318529,38.9890335 C52.6282626,38.9998043 52.8508581,39.1182826 53.1237171,39.254712 C53.7663718,39.5742442 54.5059631,39.9978936 55.0875835,40.3784601 C57.9813246,42.277702 59.5071806,44.4426225 59.9344203,47.2466073 C60.0134057,47.7707837 60.045718,48.926844 59.9918642,49.4402496 C59.801581,51.2353744 59.0799408,52.7504596 57.7946316,54.0321788 C55.7661407,56.0606696 52.7754629,57.259813 49.1098182,57.5147207 C48.503066,57.5542135 46.5679215,57.5542135 46.0222037,57.5111304 Z M48.761564,54.3696622 C50.4633422,54.0932129 51.8312273,53.1741091 52.7144287,51.7092873 C53.3319515,50.682476 53.6443033,49.2858689 53.5868593,47.8210472 C53.4935128,45.5627802 52.6785262,43.6240456 50.9982893,41.6637693 C50.7146597,41.3298762 50.14381,40.7482558 50.1007271,40.7482558 C50.0468733,40.7482558 49.0164717,41.3837299 48.2661095,41.8791843 C45.207217,43.9076753 43.4803071,45.7710148 42.8304719,47.7492422 C42.3457882,49.2284249 42.4211834,50.8045445 43.0351161,52.0036878 C43.7495758,53.3931143 45.1713145,54.2619547 46.9987515,54.4235159 C47.4654839,54.4665989 48.3307341,54.4378769 48.761564,54.3696622 Z M45.9144962,32.978956 C48.3379145,31.5284952 50.273059,30.0493124 51.4722023,28.7209201 C53.0483218,26.9796492 53.8058644,25.0983585 53.7304693,23.1021797 C53.6730252,21.5835042 53.1883416,20.3987219 52.2225645,19.4149936 C51.3680851,18.5389727 50.3089615,17.996845 49.0021107,17.7670691 C48.4743441,17.6701323 47.3470057,17.6378201 46.7725658,17.6952641 C45.2969732,17.8496448 44.1086007,18.3271479 43.0889699,19.1816274 C41.7282653,20.326917 40.9060982,21.9748414 40.7050442,23.9602493 C40.6799125,24.2259279 40.6691417,24.6747089 40.6835027,25.1629829 C40.7122248,26.2472383 40.8235225,26.9078442 41.1574157,27.9167042 C41.7246751,29.640024 42.7263547,31.2161435 44.4209524,33.0399902 C44.8769141,33.5282641 44.919997,33.5641666 44.991802,33.5282641 C45.0348851,33.5031324 45.451354,33.2589954 45.9144962,32.978956 Z" id="Shape" fill="#6E6E6E" fill-rule="nonzero" transform="translate(47.699455, 36.043906) scale(1, -1) translate(-47.699455, -36.043906) "></path>
+        <rect id="Rectangle" x="0" y="0" width="96" height="72"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number9.svg
+++ b/public/js/lib/renderer/fretboard/svg/number9.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="72px" height="88px" viewBox="0 0 72 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M34.8273654,64.0232498 C31.4961018,63.8339734 28.8152606,62.7086396 26.7401037,60.6231585 C24.3793116,58.2520422 23.2057983,55.0343444 23.2057983,50.9494168 C23.2057983,46.967731 24.3896358,43.79133 26.7538693,41.4339792 C27.8482307,40.3430592 28.9907714,39.623809 30.387975,39.1420147 C32.5181941,38.4055578 35.0648212,38.4089991 37.1503024,39.1488976 C37.8936421,39.4138845 39.1187763,40.0815136 39.6900467,40.5288942 L39.817378,40.6321357 L39.817378,39.5687468 C39.817378,34.3653683 39.036183,30.5351035 37.5150895,28.2500219 C36.3725487,26.5362106 34.8514552,25.7687811 32.907071,25.927085 C31.5924608,26.033768 30.7699691,26.5121209 30.7665276,27.1728674 C30.7665276,27.4894751 31.0900182,27.8232898 32.0191929,28.4530637 C32.3048281,28.6457814 32.6524083,28.9107683 32.7900638,29.041541 C33.3613342,29.581839 33.6848247,30.3114132 33.7536524,31.1992913 C33.9085149,33.1643239 32.8760984,34.7301553 31.0315145,35.3427224 C30.1677262,35.6249163 29.0251853,35.6730957 28.0237415,35.463171 C26.2342197,35.0915011 24.8817542,33.8560428 24.3861943,32.1525558 C24.2450974,31.6673201 24.1900352,31.285326 24.1693869,30.6589934 C24.1143247,29.0518652 24.5169671,27.7097239 25.4254935,26.4811484 C25.6732735,26.1438924 26.2961647,25.5072356 26.6884829,25.1906279 C27.6761613,24.3887845 28.9116196,23.7796589 30.2331125,23.4389614 C31.8264751,23.0328776 33.7570938,22.9399602 35.6532986,23.1808574 C40.0995718,23.7418035 43.5306356,26.0544163 45.9843453,30.1427853 C47.6706254,32.9440751 48.7099246,36.4680563 49.0884772,40.6596669 C49.2089258,41.9742771 49.2295741,42.5248991 49.2261327,44.4624005 C49.2261327,46.5719714 49.1951602,47.2568076 49.0196494,48.8157563 C48.3761099,54.6420262 46.3525738,59.0229131 43.1039035,61.6349265 C40.9014152,63.4072413 38.1242151,64.2090848 34.8273654,64.0232498 Z M36.9162879,60.8434073 C38.1896015,60.5956274 38.9880035,59.6182732 39.3872045,57.8218687 C39.6625155,56.5692035 39.7898469,55.2408277 39.8586746,52.8628286 C39.8999714,51.3899145 39.8655575,49.2080746 39.7829641,48.041444 C39.5558325,44.8822499 39.0774796,43.330184 38.0794771,42.5283405 C37.5254137,42.0844014 36.9025225,41.9054493 36.038734,41.9433045 C34.4040748,42.0121323 33.4989897,42.9722795 33.0722575,45.0921746 C32.7625327,46.6339164 32.6455254,48.3821415 32.6455254,51.4312112 C32.6455254,54.4974879 32.765974,56.2973338 33.075699,57.8115445 C33.4336033,59.5769765 34.1322051,60.4958271 35.3435737,60.8089935 C35.7875127,60.9260006 36.4241695,60.9363248 36.9162879,60.8434073 Z" id="Shape" fill="#6E6E6E" fill-rule="nonzero" transform="translate(36.216138, 43.549488) scale(1, -1) translate(-36.216138, -43.549488) "></path>
+        <rect id="Rectangle" x="0" y="0" width="72" height="88"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/number9_h.svg
+++ b/public/js/lib/renderer/fretboard/svg/number9_h.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="96px" height="72px" viewBox="0 0 96 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M46.1884728,57.5058354 C42.6947086,57.307326 39.8830947,56.1270979 37.7067105,53.9398859 C35.2307578,51.4531055 34,48.0784468 34,43.7942545 C34,39.6183401 35.2415857,36.2869926 37.7211476,33.8146491 C38.8688925,32.6705135 40.067167,31.916178 41.5325268,31.4108815 C43.766659,30.6384998 46.4375119,30.6421091 48.6247238,31.4181001 C49.404324,31.6960132 50.6892208,32.3962097 51.2883581,32.8654136 L51.4219007,32.9736913 L51.4219007,31.8584298 C51.4219007,26.4012279 50.6025985,22.3841209 49.0073054,19.9875719 C47.8090309,18.1901601 46.2137377,17.3852951 44.1745055,17.5513211 C42.795768,17.6632081 41.9331547,18.1648953 41.9295454,18.8578733 C41.9295454,19.1899253 42.268816,19.5400236 43.2433163,20.2005182 C43.5428849,20.4026369 43.9074202,20.6805499 44.0517907,20.8177018 C44.6509279,21.3843557 44.9901984,22.149519 45.0623836,23.0807082 C45.2248003,25.141596 44.1420221,26.7838095 42.2074584,27.4262579 C41.3015341,27.7222173 40.1032596,27.772747 39.0529648,27.5525821 C37.1761493,27.1627819 35.7577098,25.8670573 35.2379763,24.0804734 C35.0899966,23.5715677 35.0322485,23.1709397 35.0105929,22.5140543 C34.9528448,20.8285296 35.3751283,19.420918 36.327973,18.132412 C36.5878398,17.7787044 37.2411159,17.1109912 37.6525716,16.7789392 C38.6884294,15.9379816 39.984154,15.2991425 41.37011,14.9418256 C43.0411977,14.5159329 45.0659928,14.4184828 47.0546954,14.6711311 C51.7178601,15.2594405 55.3162928,17.6848637 57.8896956,21.9726653 C59.6582333,24.9106033 60.74823,28.6064861 61.1452486,33.0025655 C61.2715727,34.381303 61.2932283,34.9587847 61.2896191,36.9907983 C61.2896191,39.2032752 61.2571357,39.9215179 61.0730634,41.556513 C60.3981317,47.6669911 58.2758865,52.2615798 54.8687445,55.0010085 C52.5588177,56.8597777 49.6461444,57.7007355 46.1884728,57.5058354 Z M48.379294,54.1708787 C49.7147204,53.9110119 50.5520689,52.8859819 50.9707431,51.0019478 C51.2594839,49.6881771 51.3930265,48.2950025 51.4652118,45.8010033 C51.508523,44.2562398 51.4724304,41.9679687 51.3858081,40.7444293 C51.1475968,37.4311281 50.6459096,35.8033517 49.5992241,34.9623939 C49.0181332,34.4967993 48.364857,34.3091178 47.4589326,34.3488196 C45.7445339,34.4210048 44.7952983,35.4279885 44.3477499,37.6512931 C44.0229165,39.2682418 43.9002016,41.1017462 43.9002016,44.299551 C43.9002016,47.5154022 44.0265258,49.4030454 44.3513593,50.9911201 C44.7267224,52.8426707 45.4594022,53.8063433 46.729862,54.134786 C47.1954566,54.2575008 47.8631698,54.2683287 48.379294,54.1708787 Z" id="Shape" fill="#6E6E6E" fill-rule="nonzero" transform="translate(47.644990, 36.033354) scale(1, -1) translate(-47.644990, -36.033354) "></path>
+        <rect id="Rectangle" x="0" y="0" width="96" height="72"></rect>
+    </g>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/string_o.svg
+++ b/public/js/lib/renderer/fretboard/svg/string_o.svg
@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">
+  <path fill="#27AAE1" d="M36,21c6.065,0,11,4.935,11,11s-4.935,11-11,11s-11-4.935-11-11S29.935,21,36,21 M36,14c-9.94,0-18,8.06-18,18s8.06,18,18,18s18-8.06,18-18S45.94,14,36,14L36,14z"/>
+</svg>
--- a/public/js/lib/renderer/fretboard/svg/string_x.svg
+++ b/public/js/lib/renderer/fretboard/svg/string_x.svg
@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 88" enable-background="new 0 0 72 88" xml:space="preserve">
+  <path fill="#27AAE1" d="M51.067,41.831L41.236,32l9.831-9.831c-1.365-2.087-3.149-3.871-5.236-5.236L36,26.764l-9.831-9.831c-2.087,1.365-3.871,3.149-5.236,5.236L30.764,32l-9.831,9.831c1.365,2.087,3.149,3.871,5.236,5.236L36,37.236l9.831,9.831C47.918,45.702,49.702,43.918,51.067,41.831z"/>
+</svg>
--- a/public/js/lib/renderer/lightbox/index.js
+++ b/public/js/lib/renderer/lightbox/index.js
@ -0,0 +1,212 @@
+import './lightbox.css'
+
+let images = []
+/** @type {HTMLImageElement} */
+let currentImage = null
+let currentIndexIndex = 0
+
+let hideContainer
+
+function findOrCreateLightboxContainer () {
+  const lightboxContainerSelector = '.lightbox-container'
+
+  let lightBoxContainer = document.querySelector(lightboxContainerSelector)
+  if (!lightBoxContainer) {
+    lightBoxContainer = document.createElement('div')
+    lightBoxContainer.className = 'lightbox-container'
+
+    lightBoxContainer.innerHTML = `
+      <i class="fa fa-chevron-left lightbox-control-previous" aria-hidden="true"></i>
+      <i class="fa fa-chevron-right lightbox-control-next" aria-hidden="true"></i>
+      <i class="fa fa-close lightbox-control-close" aria-hidden="true"></i>
+
+      <div class="lightbox-inner">
+      </div>
+    `
+
+    addImageZoomListener(lightBoxContainer)
+
+    hideContainer = () => {
+      lightBoxContainer.classList.remove('show')
+      document.body.classList.remove('no-scroll')
+      currentImage = null
+    }
+
+    lightBoxContainer.querySelector('.lightbox-control-previous').addEventListener('click', (e) => {
+      e.stopPropagation()
+      switchImage(-1)
+    })
+    lightBoxContainer.querySelector('.lightbox-control-next').addEventListener('click', (e) => {
+      e.stopPropagation()
+      switchImage(1)
+    })
+    lightBoxContainer.querySelector('.lightbox-control-close').addEventListener('click', (e) => {
+      e.stopPropagation()
+      hideContainer()
+    })
+    lightBoxContainer.addEventListener('click', (e) => {
+      e.stopPropagation()
+      hideContainer()
+    })
+
+    document.body.appendChild(lightBoxContainer)
+  }
+
+  return lightBoxContainer
+}
+
+function switchImage (dir) {
+  const lightBoxContainer = findOrCreateLightboxContainer()
+
+  currentIndexIndex += dir
+  if (currentIndexIndex >= images.length) {
+    currentIndexIndex = 0
+  } else if (currentIndexIndex < 0) {
+    currentIndexIndex = images.length - 1
+  }
+
+  const img = images[currentIndexIndex]
+
+  setImageInner(img, lightBoxContainer)
+}
+
+function setImageInner (img, lightBoxContainer) {
+  const src = img.getAttribute('src')
+  const alt = img.getAttribute('alt')
+
+  lightBoxContainer.querySelector('.lightbox-inner').innerHTML = `<img src="${src}" alt="${alt}" draggable="false">`
+  addImageDragListener(lightBoxContainer.querySelector('.lightbox-inner img'))
+}
+
+function onClickImage (img) {
+  const lightBoxContainer = findOrCreateLightboxContainer()
+
+  setImageInner(img, lightBoxContainer)
+
+  lightBoxContainer.classList.add('show')
+  document.body.classList.add('no-scroll')
+
+  currentImage = img
+  updateLightboxImages()
+}
+
+function updateLightboxImages () {
+  images = [...document.querySelectorAll('.markdown-body img.md-image')]
+
+  if (currentImage) {
+    currentIndexIndex = images.findIndex(image => image === currentImage)
+  }
+}
+
+function addImageZoomListener (container) {
+  container.addEventListener('wheel', function (e) {
+    // normalize scroll position as percentage
+    e.preventDefault()
+
+    /** @type {HTMLImageElement} */
+    const image = container.querySelector('img')
+
+    if (!image) {
+      return
+    }
+
+    let scale = image.getBoundingClientRect().width / image.offsetWidth
+    scale += e.deltaY * -0.01
+
+    // Restrict scale
+    scale = Math.min(Math.max(0.125, scale), 4)
+
+    var transformValue = `scale(${scale})`
+
+    image.style.WebkitTransform = transformValue
+    image.style.MozTransform = transformValue
+    image.style.OTransform = transformValue
+    image.style.transform = transformValue
+  })
+}
+
+/**
+ * @param {HTMLImageElement} image
+ */
+function addImageDragListener (image) {
+  let moved = false
+  let pos = []
+
+  const container = findOrCreateLightboxContainer()
+  const inner = container.querySelector('.lightbox-inner')
+
+  const onMouseDown = (evt) => {
+    moved = true
+
+    const { left, top } = image.getBoundingClientRect()
+
+    pos = [
+      evt.pageX - left,
+      evt.pageY - top
+    ]
+  }
+  image.addEventListener('mousedown', onMouseDown)
+  inner.addEventListener('mousedown', onMouseDown)
+
+  const onMouseMove = (evt) => {
+    if (!moved) {
+      return
+    }
+
+    image.style.left = `${evt.pageX - pos[0]}px`
+    image.style.top = `${evt.pageY - pos[1]}px`
+    image.style.position = 'absolute'
+  }
+  image.addEventListener('mousemove', onMouseMove)
+  inner.addEventListener('mousemove', onMouseMove)
+
+  const onMouseUp = () => {
+    moved = false
+    pos = []
+  }
+  image.addEventListener('mouseup', onMouseUp)
+  inner.addEventListener('mouseup', onMouseUp)
+
+  inner.addEventListener('click', (e) => {
+    e.stopPropagation()
+  })
+  image.addEventListener('click', (e) => {
+    e.stopPropagation()
+  })
+}
+
+const init = () => {
+  const markdownBody = document.querySelector('.markdown-body')
+  if (!markdownBody) {
+    return
+  }
+
+  markdownBody.addEventListener('click', function (e) {
+    const img = e.target
+    if (img.nodeName === 'IMG' && img.classList.contains('md-image')) {
+      onClickImage(img)
+      e.stopPropagation()
+    }
+  })
+
+  window.addEventListener('keydown', function (e) {
+    if (!currentImage) {
+      return
+    }
+
+    if (e.key === 'ArrowRight') {
+      switchImage(1)
+      e.stopPropagation()
+    } else if (e.key === 'ArrowLeft') {
+      switchImage(-1)
+      e.stopPropagation()
+    } else if (e.key === 'Escape') {
+      if (hideContainer) {
+        hideContainer()
+        e.stopPropagation()
+      }
+    }
+  })
+}
+
+init()
--- a/public/js/lib/renderer/lightbox/lightbox.css
+++ b/public/js/lib/renderer/lightbox/lightbox.css
@ -0,0 +1,115 @@
+.lightbox-container.show {
+  display: flex !important;
+}
+
+.lightbox-container {
+  display: none;
+
+  position: fixed;
+  z-index: 99999;
+  background-color: rgba(255, 255, 255, 0.8);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  justify-content: center;
+  align-items: center;
+  padding: 0px 40px;
+}
+
+.night .lightbox-container {
+  background-color: rgba(47, 47, 47, 0.8);;
+}
+
+.lightbox-container .lightbox-control-previous,
+.lightbox-container .lightbox-control-next,
+.lightbox-container .lightbox-control-close {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  color: rgba(65, 65, 65, 0.8);
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  font-size: 25px;
+  z-index: 1;
+}
+
+.night .lightbox-container .lightbox-control-previous,
+.night .lightbox-container .lightbox-control-next,
+.night .lightbox-container .lightbox-control-close {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.lightbox-container .lightbox-control-previous:hover,
+.lightbox-container .lightbox-control-next:hover,
+.lightbox-container .lightbox-control-close:hover {
+  color: rgba(130, 130, 130, 0.78);
+}
+
+.night .lightbox-container .lightbox-control-previous:hover,
+.night .lightbox-container .lightbox-control-next:hover,
+.night .lightbox-container .lightbox-control-close:hover {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.lightbox-container .lightbox-control-next,
+.lightbox-container .lightbox-control-previous {
+  top: calc(50% - 10px);
+}
+
+.lightbox-container .lightbox-control-previous {
+  left: 0;
+}
+
+.lightbox-container .lightbox-control-next {
+  right: 0;
+}
+
+.lightbox-container .lightbox-control-close {
+  top: 10px;
+  right: 10px;
+}
+
+.lightbox-container .lightbox-inner {
+  width: 100%;
+  height: 100%;
+  cursor: move;
+
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+     -moz-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+     -moz-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.lightbox-container .lightbox-inner img {
+  max-width: 100%;
+  cursor: move;
+
+  transform-origin: 0 0;
+  -moz-transform-origin: 0 0;
+  -webkit-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  -o-transform-origin: 0 0;
+}
+
+.markdown-body img.md-image {
+  cursor: zoom-in;
+}
+
+body.no-scroll {
+  overflow: hidden;
+}
--- a/public/js/lib/syncscroll.js
+++ b/public/js/lib/syncscroll.js
@ -7,6 +7,8 @@ import markdownitContainer from 'markdown-it-container'
 import { md } from '../extra'
 import modeType from './modeType'
 import appState from './appState'
+import { renderCSVPreview } from './renderer/csvpreview'
+import { parseFenceCodeParams } from './markdown/utils'

 function addPart (tokens, idx) {
  if (tokens[idx].map && tokens[idx].level === 0) {
@ -27,6 +29,11 @@ md.renderer.rules.table_open = function (tokens, idx, options, env, self) {
  addPart(tokens, idx)
  return self.renderToken(...arguments)
 }
+const defaultImageRender = md.renderer.rules.image
+md.renderer.rules.image = function (tokens, idx, options, env, self) {
+  tokens[idx].attrJoin('class', 'md-image')
+  return defaultImageRender(...arguments)
+}
 md.renderer.rules.bullet_list_open = function (tokens, idx, options, env, self) {
  addPart(tokens, idx)
  return self.renderToken(...arguments)
@ -66,6 +73,18 @@ md.renderer.rules.fence = (tokens, idx, options, env, self) => {

  if (info) {
    langName = info.split(/\s+/g)[0]
+
+    if (langName === 'csvpreview') {
+      const params = parseFenceCodeParams(info)
+      let attr = ''
+      if (tokens[idx].map && tokens[idx].level === 0) {
+        const startline = tokens[idx].map[0] + 1
+        const endline = tokens[idx].map[1]
+        attr = `class="part" data-startline="${startline}" data-endline="${endline}"`
+      }
+      return renderCSVPreview(token.content, params, attr)
+    }
+
    if (/!$/.test(info)) token.attrJoin('class', 'wrap')
    token.attrJoin('class', options.langPrefix + langName.replace(/=$|=\d+$|=\+$|!$|=!/, ''))
    token.attrJoin('class', 'hljs')
--- a/public/js/render.js
+++ b/public/js/render.js
@ -12,27 +12,27 @@ var dataUriRegex = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base
 // custom white list
 var whiteList = filterXSS.whiteList
 // allow ol specify start number
-whiteList['ol'] = ['start']
+whiteList.ol = ['start']
 // allow li specify value number
-whiteList['li'] = ['value']
+whiteList.li = ['value']
 // allow style tag
-whiteList['style'] = []
+whiteList.style = []
 // allow kbd tag
-whiteList['kbd'] = []
+whiteList.kbd = []
 // allow ifram tag with some safe attributes
-whiteList['iframe'] = ['allowfullscreen', 'name', 'referrerpolicy', 'src', 'width', 'height']
+whiteList.iframe = ['allowfullscreen', 'name', 'referrerpolicy', 'src', 'width', 'height']
 // allow summary tag
-whiteList['summary'] = []
+whiteList.summary = []
 // allow ruby tag
-whiteList['ruby'] = []
+whiteList.ruby = []
 // allow rp tag for ruby
-whiteList['rp'] = []
+whiteList.rp = []
 // allow rt tag for ruby
-whiteList['rt'] = []
+whiteList.rt = []
 // allow figure tag
-whiteList['figure'] = []
+whiteList.figure = []
 // allow figcaption tag
-whiteList['figcaption'] = []
+whiteList.figcaption = []

 var filterXSSOptions = {
  allowCommentTag: true,
--- a/public/js/lib/editor/markdown-lint/lint.css
+++ b/public/js/lib/editor/markdown-lint/lint.css
@ -31,11 +31,11 @@
 }

 .CodeMirror-lint-mark-error {
-  background-image: url(/images/lint/mark-error.png);
+  background-image: url(../images/mark-error.png);
 }

 .CodeMirror-lint-mark-warning {
-  background-image: url(/images/lint/mark-warning.png);
+  background-image: url(../images/mark-warning.png);
 }

 .CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning {
@ -58,15 +58,15 @@
 }

 .CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
-  background-image: url(/images/lint/message-error.png);
+  background-image: url(../images/message-error.png);
 }

 .CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
-  background-image: url(/images/lint/message-warning.png);
+  background-image: url(../images/message-warning.png);
 }

 .CodeMirror-lint-marker-multiple {
-  background-image: url(/images/lint/mark-multiple.png);
+  background-image: url(../images/mark-multiple.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  width: 100%; height: 100%;
--- a/public/markdown-lint/images/mark-error.png
+++ b/public/markdown-lint/images/mark-error.png
--- a/public/markdown-lint/images/mark-multiple.png
+++ b/public/markdown-lint/images/mark-multiple.png
--- a/public/markdown-lint/images/mark-warning.png
+++ b/public/markdown-lint/images/mark-warning.png
--- a/public/markdown-lint/images/message-error.png
+++ b/public/markdown-lint/images/message-error.png
--- a/public/markdown-lint/images/message-warning.png
+++ b/public/markdown-lint/images/message-warning.png
--- a/public/views/codimd/head.ejs
+++ b/public/views/codimd/head.ejs
@ -18,5 +18,8 @@
 <%- include ../shared/polyfill %>
 <% } else { %>
 <link rel="stylesheet" href='<%- serverURL %>/build/emojify.js/dist/css/basic/emojify.min.css'>
+<link rel="stylesheet" href='<%- serverURL %>/css/font.css'>
+<link rel="stylesheet" href='<%- serverURL %>/build/fork-awesome/css/fork-awesome.min.css'>
 <%- include ../build/index-pack-header %>
 <% } %>
+<link rel="stylesheet" href='<%- serverURL %>/markdown-lint/css/lint.css'>
--- a/public/views/includes/scripts.ejs
+++ b/public/views/includes/scripts.ejs
@ -1,4 +1,4 @@
-<script src="<%= webpackConfig.output.baseUrl %>/config"></script>
+<script src="<%= '\<\%= serverURL \%\>' %>/config"></script>
 <% for (var js in htmlWebpackPlugin.files.js) { %>
 <script src="<%= '\<\%= serverURL \%\>'%><%= htmlWebpackPlugin.files.js[js] %>" defer></script>
 <% } %>
--- a/public/views/index/body.ejs
+++ b/public/views/index/body.ejs
@ -151,7 +151,7 @@
                        <option value="sr">српски</option>
                    </select>
                    <p>
-                        <%- __('Powered by %s', '<a href="https://github.com/hackmdio/codimd">CodiMD</a>') %> | <a href="<%- serverURL %>/s/release-notes" target="_blank" rel="noopener"><%= __('Releases') %></a>| <a href="<%- sourceURL %>" target="_blank" rel="noopener"><%= __('Source Code') %></a><% if(privacyStatement) { %> | <a href="<%- serverURL %>/s/privacy" target="_blank" rel="noopener"><%= __('Privacy') %></a><% } %><% if(termsOfUse) { %> | <a href="<%- serverURL %>/s/terms-of-use" target="_blank" rel="noopener"><%= __('Terms of Use') %></a><% } %>
+                        <%- __('Powered by %s', '<a href="https://github.com/hackmdio/codimd">CodiMD</a>') %> | <a href="<%- serverURL %>/s/release-notes" target="_blank" rel="noopener"><%= __('Releases') %></a> | <a href="<%- sourceURL %>" target="_blank" rel="noopener"><%= __('Source Code') %></a><% if(privacyStatement) { %> | <a href="<%- serverURL %>/s/privacy" target="_blank" rel="noopener"><%= __('Privacy') %></a><% } %><% if(termsOfUse) { %> | <a href="<%- serverURL %>/s/terms-of-use" target="_blank" rel="noopener"><%= __('Terms of Use') %></a><% } %>
                    </p>
                    <h6 class="social-foot">
                        <%- __('Follow us on %s and %s.', '<a href="https://github.com/hackmdio/CodiMD" target="_blank" rel="noopener"><i class="fa fa-github"></i> GitHub</a>, <a href="https://gitter.im/hackmdio/hackmd" target="_blank" rel="noopener"><i class="fa fa-comments"></i> Gitter</a>', '<a href="https://poeditor.com/join/project/q0nuPWyztp" target="_blank" rel="noopener"><i class="fa fa-globe"></i> POEditor</a>') %>
--- a/public/views/index/head.ejs
+++ b/public/views/index/head.ejs
@ -18,5 +18,7 @@
 <%- include ../build/cover-header %>
 <%- include ../shared/polyfill %>
 <% } else { %>
+<link rel="stylesheet" href='<%- serverURL %>/css/font.css'>
+  <link rel="stylesheet" href='<%- serverURL %>/build/fork-awesome/css/fork-awesome.min.css'>
 <%- include ../build/cover-pack-header %>
 <% } %>
--- a/public/views/pretty.ejs
+++ b/public/views/pretty.ejs
@ -11,6 +11,9 @@
    <% if(typeof robots !== 'undefined' && robots) { %>
    <meta name="robots" content="<%= robots %>">
    <% } %>
+    <% if(typeof image !== 'undefined' && image) { %>
+    <meta name="image" content="<%= image %>">
+    <% } %>
    <% if(typeof description !== 'undefined' && description) { %>
    <meta name="description" content="<%= description %>">
    <% } %>
@ -27,6 +30,8 @@
    <%- include shared/polyfill %>
  <% } else { %>
    <link rel="stylesheet" href='<%- serverURL %>/build/emojify.js/dist/css/basic/emojify.min.css'>
+    <link rel="stylesheet" href='<%- serverURL %>/css/font.css'>
+    <link rel="stylesheet" href='<%- serverURL %>/build/fork-awesome/css/fork-awesome.min.css'>
    <%- include build/pretty-pack-header %>
  <% } %>
 </head>
--- a/public/views/shared/signin-modal.ejs
+++ b/public/views/shared/signin-modal.ejs
@ -9,52 +9,52 @@
            </div>
            <div class="modal-body" style="text-align: center;">
                <% if (authProviders.facebook) { %>
-                <a href="<%- serverURL %>/auth/facebook" class="btn btn-lg btn-block btn-social btn-facebook">
+                <a href="<%- serverURL %>/auth/facebook" class="btn btn-lg btn-block btn-login-method btn-facebook">
                    <i class="fa fa-facebook"></i> <%= __('Sign in via %s', 'Facebook') %>
                </a>
                <% } %>
                <% if (authProviders.twitter) { %>
-                <a href="<%- serverURL %>/auth/twitter" class="btn btn-lg btn-block btn-social btn-twitter">
+                <a href="<%- serverURL %>/auth/twitter" class="btn btn-lg btn-block btn-login-method btn-twitter">
                    <i class="fa fa-twitter"></i> <%= __('Sign in via %s', 'Twitter') %>
                </a>
                <% } %>
                <% if (authProviders.github) { %>
-                <a href="<%- serverURL %>/auth/github" class="btn btn-lg btn-block btn-social btn-github">
+                <a href="<%- serverURL %>/auth/github" class="btn btn-lg btn-block btn-login-method btn-github">
                    <i class="fa fa-github"></i> <%= __('Sign in via %s', 'GitHub') %>
                </a>
                <% } %>
                <% if (authProviders.bitbucket) { %>
-                <a href="<%- serverURL %>/auth/bitbucket" class="btn btn-lg btn-block btn-social btn-bitbucket">
+                <a href="<%- serverURL %>/auth/bitbucket" class="btn btn-lg btn-block btn-login-method btn-bitbucket">
                    <i class="fa fa-bitbucket"></i> <%= __('Sign in via %s', 'Bitbucket') %>
                </a>
                <% } %>
                <% if (authProviders.gitlab) { %>
-                <a href="<%- serverURL %>/auth/gitlab" class="btn btn-lg btn-block btn-social btn-gitlab">
+                <a href="<%- serverURL %>/auth/gitlab" class="btn btn-lg btn-block btn-login-method btn-gitlab">
                    <i class="fa fa-gitlab"></i> <%= __('Sign in via %s', 'GitLab') %>
                </a>
                <% } %>
                <% if (authProviders.mattermost) { %>
-                <a href="<%- serverURL %>/auth/mattermost" class="btn btn-lg btn-block btn-social btn-mattermost">
+                <a href="<%- serverURL %>/auth/mattermost" class="btn btn-lg btn-block btn-login-method btn-mattermost">
                    <i class="oauth-icon"><img alt="mattermost-logo" src="<%- serverURL %>/images/mattermost-logo.svg" /></i> <%= __('Sign in via %s', 'Mattermost') %>
                </a>
                <% } %>
                <% if (authProviders.dropbox) { %>
-                <a href="<%- serverURL %>/auth/dropbox" class="btn btn-lg btn-block btn-social btn-dropbox">
+                <a href="<%- serverURL %>/auth/dropbox" class="btn btn-lg btn-block btn-login-method btn-dropbox">
                    <i class="fa fa-dropbox"></i> <%= __('Sign in via %s', 'Dropbox') %>
                </a>
                <% } %>
                <% if (authProviders.google) { %>
-                <a href="<%- serverURL %>/auth/google" class="btn btn-lg btn-block btn-social btn-google">
+                <a href="<%- serverURL %>/auth/google" class="btn btn-lg btn-block btn-login-method btn-google">
                    <i class="fa fa-google"></i> <%= __('Sign in via %s', 'Google') %>
                </a>
                <% } %>
                <% if (authProviders.saml) { %>
-                <a href="<%- serverURL %>/auth/saml" class="btn btn-lg btn-block btn-social btn-success">
+                <a href="<%- serverURL %>/auth/saml" class="btn btn-lg btn-block btn-login-method btn-success">
                    <i class="fa fa-users"></i> <%= __('Sign in via %s', 'SAML') %>
                </a>
                <% } %>
                <% if (authProviders.oauth2) { %>
-                <a href="<%- serverURL %>/auth/oauth2" class="btn btn-lg btn-block btn-social btn-soundcloud">
+                <a href="<%- serverURL %>/auth/oauth2" class="btn btn-lg btn-block btn-login-method btn-soundcloud">
                    <i class="fa fa-mail-forward"></i> <%= __('Sign in via %s', authProviders.oauth2ProviderName || 'OAuth2') %>
                </a>
                <% } %>
--- a/public/views/slide.ejs
+++ b/public/views/slide.ejs
@ -26,6 +26,8 @@
        <% } else { %>
        <link rel="stylesheet" href="<%- serverURL %>/build/reveal.js/css/reveal.css">
        <link rel="stylesheet" href='<%- serverURL %>/build/emojify.js/dist/css/basic/emojify.min.css'>
+        <link rel="stylesheet" href='<%- serverURL %>/css/font.css'>
+        <link rel="stylesheet" href='<%- serverURL %>/build/fork-awesome/css/fork-awesome.min.css'>
        <%- include build/slide-pack-header %>
        <% } %>

--- a/test/realtime/dirtyNoteUpdate.test.js
+++ b/test/realtime/dirtyNoteUpdate.test.js
@ -50,7 +50,7 @@ describe('realtime#update note is dirty timer', function () {
      callback(null, note)
    })

-    realtime.notes['note1'] = {
+    realtime.notes.note1 = {
      server: {
        isDirty: false
      },
@ -64,7 +64,7 @@ describe('realtime#update note is dirty timer', function () {
      socks: []
    }

-    realtime.notes['note2'] = note2
+    realtime.notes.note2 = note2

    clock.tick(1000)
    setTimeout(() => {
@ -75,7 +75,7 @@ describe('realtime#update note is dirty timer', function () {

  it('should not do anything when note missing', function (done) {
    sinon.stub(realtime, 'updateNote').callsFake(function (note, callback) {
-      delete realtime.notes['note']
+      delete realtime.notes.note
      callback(null, note)
    })

@ -85,7 +85,7 @@ describe('realtime#update note is dirty timer', function () {
      },
      socks: [makeMockSocket()]
    }
-    realtime.notes['note'] = note
+    realtime.notes.note = note

    clock.tick(1000)

@ -115,7 +115,7 @@ describe('realtime#update note is dirty timer', function () {
      },
      socks: [makeMockSocket(), undefined, makeMockSocket()]
    }
-    realtime.notes['note'] = note
+    realtime.notes.note = note

    clock.tick(1000)

--- a/utils/string.js
+++ b/utils/string.js
@ -1,7 +1,7 @@
 'use strict'

 function stripTags (s) {
-  return s.replace(RegExp(`</?[^<>]*>`, 'gi'), '')
+  return s.replace(RegExp('</?[^<>]*>', 'gi'), '')
 }

 exports.stripTags = stripTags
--- a/webpack.common.js
+++ b/webpack.common.js
@ -31,7 +31,7 @@ module.exports = {
    }),
    new HtmlWebpackPlugin({
      template: 'public/views/includes/header.ejs',
-      chunks: ['font-pack', 'index-styles-pack', 'index-styles', 'index'],
+      chunks: ['index-styles-pack', 'index-styles', 'index'],
      filename: path.join(__dirname, 'public/views/build/index-pack-header.ejs'),
      inject: false,
      chunksSortMode: 'manual'
@ -58,7 +58,7 @@ module.exports = {
    }),
    new HtmlWebpackPlugin({
      template: 'public/views/includes/header.ejs',
-      chunks: ['font-pack', 'cover-styles-pack', 'cover'],
+      chunks: ['cover-styles-pack', 'cover'],
      filename: path.join(__dirname, 'public/views/build/cover-pack-header.ejs'),
      inject: false,
      chunksSortMode: 'manual'
@ -85,7 +85,7 @@ module.exports = {
    }),
    new HtmlWebpackPlugin({
      template: 'public/views/includes/header.ejs',
-      chunks: ['font-pack', 'pretty-styles-pack', 'pretty-styles', 'pretty'],
+      chunks: ['pretty-styles-pack', 'pretty-styles', 'pretty'],
      filename: path.join(__dirname, 'public/views/build/pretty-pack-header.ejs'),
      inject: false,
      chunksSortMode: 'manual'
@ -112,7 +112,7 @@ module.exports = {
    }),
    new HtmlWebpackPlugin({
      template: 'public/views/includes/header.ejs',
-      chunks: ['font-pack', 'slide-styles-pack', 'slide-styles', 'slide'],
+      chunks: ['slide-styles-pack', 'slide-styles', 'slide'],
      filename: path.join(__dirname, 'public/views/build/slide-pack-header.ejs'),
      inject: false,
      chunksSortMode: 'manual'
@ -185,6 +185,16 @@ module.exports = {
        context: path.join(__dirname, 'node_modules/leaflet'),
        from: 'dist',
        to: 'leaflet'
+      },
+      {
+        context: path.join(__dirname, 'node_modules/fork-awesome'),
+        from: 'fonts',
+        to: 'fork-awesome/fonts'
+      },
+      {
+        context: path.join(__dirname, 'node_modules/fork-awesome'),
+        from: 'css',
+        to: 'fork-awesome/css'
      }
    ]),
    new MiniCssExtractPlugin()
@ -192,7 +202,6 @@ module.exports = {

  entry: {
    font: path.join(__dirname, 'public/css/google-font.css'),
-    'font-pack': path.join(__dirname, 'public/css/font.css'),
    common: [
      'expose-loader?jQuery!expose-loader?$!jquery',
      'velocity-animate',
@ -205,7 +214,6 @@ module.exports = {
    ],
    'cover-styles-pack': [
      path.join(__dirname, 'node_modules/bootstrap/dist/css/bootstrap.min.css'),
-      path.join(__dirname, 'node_modules/fork-awesome/css/fork-awesome.min.css'),
      path.join(__dirname, 'public/css/bootstrap-social.css'),
      path.join(__dirname, 'node_modules/select2/select2.css'),
      path.join(__dirname, 'node_modules/select2/select2-bootstrap.css')
@ -260,7 +268,6 @@ module.exports = {
    ],
    'index-styles-pack': [
      path.join(__dirname, 'node_modules/bootstrap/dist/css/bootstrap.min.css'),
-      path.join(__dirname, 'node_modules/fork-awesome/css/fork-awesome.min.css'),
      path.join(__dirname, 'public/css/bootstrap-social.css'),
      path.join(__dirname, 'node_modules/ionicons/css/ionicons.min.css'),
      path.join(__dirname, 'node_modules/leaflet/dist/leaflet.css')
@ -309,7 +316,6 @@ module.exports = {
    ],
    'pretty-styles-pack': [
      path.join(__dirname, 'node_modules/bootstrap/dist/css/bootstrap.min.css'),
-      path.join(__dirname, 'node_modules/fork-awesome/css/fork-awesome.min.css'),
      path.join(__dirname, 'node_modules/ionicons/css/ionicons.min.css'),
      path.join(__dirname, 'node_modules/leaflet/dist/leaflet.css')
    ],
@ -349,7 +355,6 @@ module.exports = {
      path.join(__dirname, 'public/css/markdown.css')
    ],
    'slide-styles-pack': [
-      path.join(__dirname, 'node_modules/fork-awesome/css/fork-awesome.min.css'),
      path.join(__dirname, 'node_modules/ionicons/css/ionicons.min.css'),
      path.join(__dirname, 'node_modules/leaflet/dist/leaflet.css')
    ],
@ -484,10 +489,14 @@ module.exports = {
      }]
    }, {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+      exclude: path.resolve(__dirname, 'public/js/lib/renderer/fretboard'),
      use: [{
        loader: 'url-loader',
        options: { limit: '10000', mimetype: 'svg+xml' }
      }]
+    }, {
+      test: /.*\/fretboard\/svg\/.*\.svg$/,
+      loader: 'string-loader'
    }, {
      test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
      use: [{