preparing for google drive link.

package-lock.json

@@ -5252,9 +5252,9 @@
       "dev": true
     },
     "futoji": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/futoji/-/futoji-0.2.0.tgz",
-      "integrity": "sha512-V3q7YwYGisBmr9J0/24yBafW4ClSjbLok/WztF/GtpfVO6K36DCyWMD++68TlyiDN5xxcA+LNue6Zo4iON2BRQ=="
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/futoji/-/futoji-0.2.4.tgz",
+      "integrity": "sha512-m1xTItJgMgy6lJhYIkpZuL5H7Pu+bydzpryrbU4Md2LqSWGyKpOphx7bfjJhgaj8ioVsn25TNy/wOS+mLrld/g=="
     },
     "get-caller-file": {
       "version": "1.0.3",

package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@vue/eslint-plugin": "^4.2.0",
     "axios": "^0.18.0",
-    "futoji": "^0.2.0",
+    "futoji": "^0.2.4",
     "jquery": "^3.3.1",
     "socket.io": "^2.2.0",
     "socket.io-client": "^2.2.0",

src/components/app/GDriveLinkMenu.vue

@@ -0,0 +1,81 @@
+<template>
+	<div class="dark-background">
+		<div class="inner">
+			<div class="text">
+				To upload files and images, You must link your Google Drive account with your Nertivia account.
+			</div>
+			<div class="images">
+					<div class="image GDrive-img"></div>
+					<div class="arrow">></div>
+					<div class="image nertivia-img"></div>
+			</div>
+			<div class="button">Link me</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.dark-background {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.781);
+    z-index: 1;
+    display: flex;
+}
+.inner {
+    margin: auto;
+    height: 400px;
+    width: 400px;
+    background: rgb(32, 32, 32);
+		display: flex;
+		flex-direction: column;
+		color: white;
+		border-radius: 3px;
+}
+.text{
+	color: white;
+	text-align: center;
+	margin-top: 30px;
+	font-size: 17px;
+}
+.images{
+	display: flex;
+	margin: auto;
+	margin-top: 40px;
+}
+.image {
+	width: 120px;
+	height: 120px;
+	background-position: center;
+	background-size: 100%;
+}
+.nertivia-img {
+	background-image: url(./../../assets/logo.png);
+}
+.arrow{
+	font-size: 40px;
+	margin: auto;
+	padding: 20px;
+}
+.GDrive-img {
+	background-image: url(./../../assets/Google_Drive_logo.png);
+}
+.button{
+	display: inline-block;
+	margin: auto;
+	background: rgb(32, 118, 255);
+	padding: 10px;
+	border-radius: 2px;
+	cursor: default;
+	user-select: none;
+	transition: 0.3s;
+}
+.button:hover {
+	background:rgb(58, 134, 255);
+}
+
+</style>
+

src/messageFormatter.js

@@ -35,13 +35,15 @@ export default  (message) => {
     futoji.addTransformer({
         name: 'code-block', 
         symbol: '``\`',
-        transformer: text => `<div class="codeblock"><code>${text.trim()}</code></div>`
+        recursive: false,
+        transformer: text => `<div class="codeblock"><code>${text.trim()}</code></div>`,
     })
     
     futoji.addTransformer({
         name: 'code', 
         symbol: '`',
-        transformer: text => `<code>${text}</code>`
+        recursive: false,
+        transformer: text => `<code>${text}</code>`,
     })
     return futoji.format(message);
 }

src/views/App.vue

@@ -15,6 +15,7 @@
     </transition>
     <transition name="fade">
       <settings v-if="showSettings  && loggedIn" />
+      <!--<GDriveLinkMenu v-if="loggedIn" /> -->
     </transition>
   </div>
 </template>
@@ -22,6 +23,7 @@
 <script>
 import {bus} from '../main'
 import Settings from '@/components/app/Settings.vue'
+import GDriveLinkMenu from '@/components/app/GDriveLinkMenu.vue'
 import LeftPanel from './../components/app/LeftPanel.vue'
 import RightPanel from './../components/app/RightPanel.vue'
 import ConnectingScreen from './../components/app/ConnectingScreen.vue'
@@ -32,7 +34,8 @@ export default {
     LeftPanel,
     RightPanel,
     ConnectingScreen,
-    Settings
+    Settings,
+    GDriveLinkMenu
   },
   data() {
     return {