Added thumbnail generation + insert image files display + Create page fix

client/js/components/editor-image.js

@@ -46,7 +46,10 @@ let vueImage = new Vue({
 			vueImage.isLoadingText = 'Fetching images...';
 			Vue.nextTick(() => {
 				socket.emit('uploadsGetImages', { folder: vueImage.currentFolder }, (data) => {
-					vueImage.images = data;
+					vueImage.images = _.map(data, (f) => {
+						f.thumbpath = (f.folder === '') ? f.basename + '.png' : _.join([ f.folder, f.basename + '.png' ], '/');
+						return f;
+					});
 					vueImage.isLoading = false;
 				});
 			});

client/scss/app.scss

@@ -7,6 +7,7 @@ $orange: #FB8C00;
 $blue: #039BE5;
 $turquoise: #00ACC1;
 $green: #7CB342;
+$purple: #673AB7;
 
 $warning: $orange;
 

client/scss/layout/_base.scss

@@ -9,7 +9,7 @@ html {
 	padding-top: 52px;
 }
 
-//$family-sans-serif: "Roboto", "Helvetica", "Arial", sans-serif;
+$family-monospace: monospace;
 $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
 [v-cloak] {

client/scss/layout/_content.scss

@@ -35,7 +35,7 @@
 		border-bottom: 1px dotted $grey-light;
 		padding-bottom: 4px;
 		font-weight: 400;
-		color: desaturate(darken($purple, 15%), 10%);
+		color: desaturate($purple, 20%);
 	}
 
 	a.toc-anchor {