feat(navbar): Add dialog with presentation of the app

Author: lauthieb

package.json

@@ -23,8 +23,8 @@
     "postinstall": "npm run eslint:fix && npm run prettier"
   },
   "build": {
-    "productName": "bloc-codes",
-    "appId": "org.simulatedgreg.electron-vue",
+    "productName": "Bloc Codes",
+    "appId": "fr.lauthieb.bloc-codes",
     "directories": {
       "output": "build"
     },

src/renderer/Navbar.vue

@@ -1,14 +1,49 @@
 <template>
   <nav>
     <img src="~@/assets/bloc-codes-logo-white-full.png" alt="Bloc-codes logo">
+    <div class="is-pulled-right">
+      <a id="about-bloc-codes" @click="aboutBlocCodesModal = true" title="About Bloc Codes...">
+        <b-icon icon="info-circle"></b-icon>
+      </a>
+      <a id="github" @click="open('https://github.com/lauthieb/bloc-codes')" title="Show on Github...">
+        <b-icon icon="github"></b-icon>
+      </a>
+    </div>
+
+    <b-modal :active.sync="aboutBlocCodesModal" :width="580" scroll="keep">
+      <div class="card">
+        <div class="card-content">
+          <div class="media">
+            <div class="media-content">
+              <img src="~@/assets/bloc-codes-logo-black-full.png" alt="Image">
+            </div>
+          </div>
+          <div class="content">
+            <h4>v{{appVersion}}</h4>
+
+            <p>A simple code snippet manager for developers built with Electron & Vue.js 🚀</p>
+
+            <p>Feel free to contribute on <a @click="open('https://github.com/lauthieb/bloc-codes')">Github</a> 🍻</p>
+
+            <img class="badge" src="http://forthebadge.com/images/badges/built-with-love.svg" alt="Built with love">
+          </div>
+        </div>
+      </div>
+    </b-modal>
   </nav>
 </template>
 
 <script>
+  // eslint-disable-next-line
+  import { remote } from 'electron';
+
   export default {
     name: 'cb-navbar',
     data() {
-      return {}
+      return {
+        appVersion: remote.app.getVersion(),
+        aboutBlocCodesModal: false
+      }
     },
     methods: {
       open(link) {
@@ -32,5 +67,27 @@
       padding: 10px 10px 4px 10px;
       width: 110px;
     }
+
+    #about-bloc-codes, #github {
+      color: $light;
+      position: relative;
+      top: 20px;
+      right: 20px;
+    }
+
+    .modal {
+
+      .media-content {
+        text-align: center;
+      }
+
+      img {
+        width: 250px;
+      }
+
+      .badge {
+        width: 160px;
+      }
+    }
   }
 </style>

src/renderer/components/SnippetsList/CreateSnippetModal.vue

@@ -99,6 +99,7 @@
           'python',
           'ruby',
           'scss',
+          'sh',
           'swift',
           'typescript',
           'xml'

src/renderer/components/SnippetsList/UpdateSnippetModal.vue

@@ -103,6 +103,7 @@
           'python',
           'ruby',
           'scss',
+          'sh',
           'swift',
           'typescript',
           'xml'

src/renderer/main.js

@@ -32,6 +32,7 @@ require('brace/mode/php');
 require('brace/mode/python');
 require('brace/mode/ruby');
 require('brace/mode/scss');
+require('brace/mode/sh');
 require('brace/mode/swift');
 require('brace/mode/typescript');
 require('brace/mode/xml');