From 5e8dfcc2eac90acc82e949b1934cb1b99ffebbc9 Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Sun, 25 Feb 2018 01:28:26 -0500
Subject: [PATCH] feat: editor preview emoji + task lists

---
 client/components/editor-code.vue            |  6 +++++-
 client/scss/app.scss                         |  2 +-
 client/scss/base/print.scss                  |  2 --
 client/scss/components/markdown-content.scss | 19 +++++++++++++++----
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/client/components/editor-code.vue b/client/components/editor-code.vue
index 3ea2c2fa..05e5545a 100644
--- a/client/components/editor-code.vue
+++ b/client/components/editor-code.vue
@@ -111,6 +111,8 @@ import 'codemirror/addon/search/match-highlighter.js'
 
 // Markdown-it
 import MarkdownIt from 'markdown-it'
+import mdEmoji from 'markdown-it-emoji'
+import mdTaskLists from 'markdown-it-task-lists'
 import Prism from '../libs/prism/prism.js'
 
 const md = new MarkdownIt({
@@ -122,6 +124,8 @@ const md = new MarkdownIt({
     return `<pre class="line-numbers"><code class="language-${lang}">${str}</code></pre>`
   }
 })
+  .use(mdEmoji)
+  .use(mdTaskLists)
 
 export default {
   components: {
@@ -131,7 +135,7 @@ export default {
     return {
       fabMainMenu: false,
       fabInsertMenu: false,
-      code: '# Header 1\n\nSample **Text**\nhttp://wiki.js.org\n\n## Header 2\nSample Text\n\n```javascript\nvar test = require("test");\n\n// some comment\nconst foo = bar(\'param\') + 1.234;\n```',
+      code: '# Header 1\n\nSample **Text**\nhttp://wiki.js.org\n:rocket: :) :( :| :P\n\n## Header 2\nSample Text\n\n```javascript\nvar test = require("test");\n\n// some comment\nconst foo = bar(\'param\') + 1.234;\n```\n\n### Header 3\nLorem *ipsum* ~~text~~',
       cmOptions: {
         tabSize: 2,
         mode: 'text/markdown',
diff --git a/client/scss/app.scss b/client/scss/app.scss
index 358fba1f..67f0454d 100644
--- a/client/scss/app.scss
+++ b/client/scss/app.scss
@@ -12,7 +12,7 @@
 @import 'components/toggle';
 @import 'components/typography';
 
-@import '../libs/twemoji/twemoji-awesome';
+// @import '../libs/twemoji/twemoji-awesome';
 @import '../libs/prism/prism.css';
 @import 'node_modules/diff2html/dist/diff2html.min';
 
diff --git a/client/scss/base/print.scss b/client/scss/base/print.scss
index c5bc685a..f06334e1 100644
--- a/client/scss/base/print.scss
+++ b/client/scss/base/print.scss
@@ -35,6 +35,4 @@
       }
     }
   }
-
-  @import 'node_modules/highlight.js/styles/atom-one-light';
 }
diff --git a/client/scss/components/markdown-content.scss b/client/scss/components/markdown-content.scss
index b7c45ce7..01b5450b 100644
--- a/client/scss/components/markdown-content.scss
+++ b/client/scss/components/markdown-content.scss
@@ -1,13 +1,14 @@
 .markdown-content {
   font-size: 1rem;
-  color: mc('blue-grey', '900');
+  color: mc('blue-grey', '800');
 
   // --------------------------------------------
   // Headers
   // --------------------------------------------
 
   h1, h2, h3, h4, h5, h6 {
-    color: mc('blue-grey', '800');
+    color: mc('blue-grey', '700');
+    font-weight: 600;
   }
 
   > * + h1, > * + h2, > * + h3, > * + h4 {
@@ -15,16 +16,17 @@
   }
   h1 {
     font-size: 1.5rem;
-    border-bottom: 1px solid mc('blue-grey', '100');
+    border-bottom: 2px solid mc('blue-grey', '100');
     margin-bottom: 1rem;
   }
   h2 {
     font-size: 1.25rem;
-    border-bottom: 1px dotted mc('blue-grey', '100');
+    border-bottom: 1px solid mc('blue-grey', '100');
     margin-bottom: .75rem;
   }
   h3 {
     font-size: 1.15rem;
+    border-bottom: 1px dotted mc('blue-grey', '100');
     margin-bottom: .5rem;
   }
   h4 {
@@ -58,4 +60,13 @@
       }
     }
   }
+
+  .task-list-item {
+    display: flex;
+    align-items: center;
+
+    &-checkbox {
+      margin-right: .5rem;
+    }
+  }
 }