Add support for CSS markdown themes

.stylelintrc

@@ -1,7 +1,8 @@
 {
   "processors": ["stylelint-processor-html"],
   "extends": "stylelint-config-standard",
+  "ignoreFiles": "src/styles/themes/*",
   "rules": {
-    "no-empty-source": null
+    "no-empty-source": null,
   }
-}
+}

src/components/Modal.vue

@@ -27,6 +27,7 @@ import ModalInner from './modals/common/ModalInner';
 import FilePropertiesModal from './modals/FilePropertiesModal';
 import SettingsModal from './modals/SettingsModal';
 import TemplatesModal from './modals/TemplatesModal';
+import ThemesModal from './modals/ThemesModal';
 import AboutModal from './modals/AboutModal';
 import HtmlExportModal from './modals/HtmlExportModal';
 import PdfExportModal from './modals/PdfExportModal';
@@ -79,6 +80,7 @@ export default {
     FilePropertiesModal,
     SettingsModal,
     TemplatesModal,
+    ThemesModal,
     AboutModal,
     HtmlExportModal,
     PdfExportModal,

src/components/Preview.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="preview">
-    <div class="preview__inner-1" @click="onClick" @scroll="onScroll">
-      <div class="preview__inner-2" :style="{padding: styles.previewPadding}">
+    <div class="preview__inner-1" :class="{[theme.name]: true}" @click="onClick" @scroll="onScroll">
+      <div class="preview__inner-2 markdown-body" :style="{padding: styles.previewPadding}">
       </div>
       <div class="gutter" :style="{left: styles.previewGutterLeft + 'px'}">
         <comment-list v-if="styles.previewGutterWidth"></comment-list>
@@ -40,6 +40,10 @@ export default {
     ...mapGetters('layout', [
       'styles',
     ]),
+    ...mapGetters('data', [
+      'allThemesById',
+      'theme',
+    ]),
   },
   methods: {
     ...mapActions('data', [

src/components/menus/MainMenu.vue

@@ -99,6 +99,11 @@
       <div><div class="menu-entry__label menu-entry__label--count">{{templateCount}}</div> Templates</div>
       <span>Configure Handlebars templates for your exports.</span>
     </menu-entry>
+    <menu-entry @click.native="themes">
+      <icon-eye slot="icon"></icon-eye>
+      <div>Themes</div>
+      <span>Configure Markdown preview theme.</span>
+    </menu-entry>
     <menu-entry @click.native="settings">
       <icon-settings slot="icon"></icon-settings>
       <div>Settings</div>
@@ -203,6 +208,11 @@ export default {
         await store.dispatch('modal/open', 'templates');
       } catch (e) { /* Cancel */ }
     },
+    async themes() {
+      try {
+        await store.dispatch('modal/open', 'themes');
+      } catch (e) { /* Cancel */ }
+    },
     async accounts() {
       try {
         await store.dispatch('modal/open', 'accountManagement');

src/store/data.js

@@ -30,6 +30,8 @@ const empty = (id) => {
       return itemTemplate(id, defaultLocalSettings());
     case 'layoutSettings':
       return itemTemplate(id, defaultLayoutSettings());
+    case 'themeId':
+      return itemTemplate(id, 'default');
     default:
       return itemTemplate(id);
   }
@@ -100,6 +102,15 @@ const defaultTemplates = {
   jekyllSite: makeAdditionalTemplate('Jekyll site', jekyllSiteTemplate),
 };
 
+const defaultThemes = {
+  default: makeAdditionalTemplate('default', 'default'),
+  splendor: makeAdditionalTemplate('splendor', 'splendor'),
+  foghorn: makeAdditionalTemplate('foghorn', 'foghorn'),
+  gentle: makeAdditionalTemplate('gentle', 'gentle'),
+  retro: makeAdditionalTemplate('retro', 'retro'),
+  github: makeAdditionalTemplate('github', 'github'),
+};
+
 // For tokens
 const tokenAdder = providerId => ({ getters, dispatch }, token) => {
   dispatch('patchTokensByType', {
@@ -173,6 +184,12 @@ export default {
       ...templatesById,
       ...defaultTemplates,
     }),
+    allThemesById: (state, { themesById }) => ({
+      ...themesById,
+      ...defaultThemes,
+    }),
+    themeId: getter('themeId'),
+    theme: (state, { allThemesById, themeId }) => allThemesById[themeId],
     lastCreated: getter('lastCreated'),
     lastOpened: getter('lastOpened'),
     lastOpenedIds: (state, { lastOpened }, rootState) => {
@@ -282,6 +299,18 @@ export default {
       });
       commit('setItem', itemTemplate('templates', templatesToCommit));
     },
+    setThemesById: ({ commit }, themesById) => {
+      const themesToCommit = {
+        ...themesById,
+      };
+      // We don't store additional themes
+      Object.keys(defaultThemes).forEach((id) => {
+        delete themesToCommit[id];
+      });
+      commit('setItem', itemTemplate('themes', themesToCommit));
+    },
+    setThemeId: setter('themeId'),
+
     setLastCreated: setter('lastCreated'),
     setLastOpenedId: ({ getters, commit, rootState }, fileId) => {
       const lastOpened = { ...getters.lastOpened };

src/styles/index.js

@@ -1,4 +1,5 @@
 import 'katex/dist/katex.css';
 import './fonts.scss';
 import './prism.scss';
-import './base.scss';
+// import './base.scss';
+import './themes.scss';

src/styles/themes.scss

@@ -0,0 +1,23 @@
+.default {
+  @import './themes/base';
+}
+
+.splendor {
+  @import './themes/splendor';
+}
+
+.foghorn {
+  @import './themes/foghorn';
+}
+
+.gentle {
+  @import './themes/gentle';
+}
+
+.retro {
+  @import './themes/retro';
+}
+
+.github {
+  @import './themes/github';
+}

src/styles/themes/foghorn.scss

@@ -0,0 +1,156 @@
+@import url(http://fonts.googleapis.com/css?family=Vollkorn:400,400italic,700,700italic&subset=latin);
+
+img {
+	max-width: 100%;
+}
+
+table {
+	width: 100%;
+}
+
+table, th, td {
+	padding: 5px;
+}
+
+
+html, .markdown-body {
+        padding:1em;
+        margin:auto;
+        max-width:42em;
+        background:#fefefe;
+	}
+.markdown-body {
+	font: 1.3em "Vollkorn", Palatino, Times;
+	color: #333;
+	line-height: 1.4;
+	text-align: justify;
+	}
+header, nav, article, footer {
+	width: 700px;
+	margin:0 auto;
+	}
+article {
+	margin-top: 4em;
+	margin-bottom: 4em;
+	min-height: 400px;
+	}
+footer {
+	margin-bottom:50px;
+	}
+video {
+	margin: 2em 0;
+	border:1px solid #ddd;
+	}
+
+nav {
+	font-size: .9em;
+	font-style: italic;
+	border-bottom: 1px solid #ddd;
+	padding: 1em 0;
+	}
+nav p {
+	margin: 0;
+	}
+
+/* Typography
+-------------------------------------------------------- */
+
+h1 {
+	margin-top: 0;
+	font-weight: normal;
+	}
+h2 {
+	font-weight: normal;
+	}
+h3 {
+	font-weight: normal;
+	font-style: italic;
+	margin-top:3em;
+	}
+p {
+	margin-top:0;
+	-webkit-hypens:auto;
+	-moz-hypens:auto;
+	hyphens:auto;
+	}
+ul {
+	list-style: square;
+	padding-left:1.2em;
+	}
+ol {
+	padding-left:1.2em;
+	}
+blockquote {
+	margin-left: 1em;
+	padding-left: 1em;
+	border-left: 1px solid #ddd;
+	}
+code {
+	font-family: "Consolas", "Menlo", "Monaco", monospace, serif;
+	font-size: .9em;
+	background: white;
+	}
+a {
+	color: #2484c1;
+	text-decoration: none;
+	}
+a:hover {
+	text-decoration: underline;
+	}
+a img {
+	border:none;
+	}
+h1 a, h1 a:hover {
+	color: #333;
+	text-decoration: none;
+	}
+hr {
+	color : #ddd;
+	height : 1px;
+	margin: 2em 0;
+	border-top : solid 1px #ddd;
+	border-bottom : none;
+	border-left: 0;
+	border-right: 0;
+	}
+p#heart{
+	font-size: 2em;
+	line-height: 1;
+	text-align: center;
+	color: #ccc;
+	}
+.red {
+	color:#B50000;
+	}
+
+/* Home Page
+--------------------------- */
+
+.markdown-body#index li {
+	margin-bottom: 1em;
+	}
+
+
+/* iPad
+-------------------------------------------------------- */
+@media only screen and (max-device-width: 1024px) {
+.markdown-body {
+	font-size: 120%;
+	line-height: 1.4;
+	}
+} /* @iPad */
+
+/* iPhone
+-------------------------------------------------------- */
+@media only screen and (max-device-width: 480px) {
+.markdown-body {
+	text-align: left;
+	}
+article, footer {
+	width: auto;
+	}
+article {
+	padding: 0 10px;
+	}
+} /* @iPhone */
+