feat: katex + admin SSL UI (wip) + dev warning

client/components/admin.vue

@@ -8,22 +8,22 @@
     v-navigation-drawer.pb-0.admin-sidebar(v-model='adminDrawerShown', app, fixed, clipped, :right='$vuetify.rtl', permanent, width='300')
       vue-scroll(:ops='scrollStyle')
         v-list(dense, nav)
-          v-list-item(to='/dashboard')
+          v-list-item(to='/dashboard', color='primary')
             v-list-item-avatar(size='24'): v-icon mdi-view-dashboard-variant
             v-list-item-title {{ $t('admin:dashboard.title') }}
           template(v-if='hasPermission([`manage:system`, `manage:navigation`, `write:pages`, `manage:pages`, `delete:pages`])')
             v-divider.my-2
             v-subheader.pl-4 {{ $t('admin:nav.site') }}
-            v-list-item(to='/general', v-if='hasPermission(`manage:system`)')
+            v-list-item(to='/general', color='primary', v-if='hasPermission(`manage:system`)')
               v-list-item-avatar(size='24'): v-icon mdi-widgets
               v-list-item-title {{ $t('admin:general.title') }}
-            v-list-item(to='/locale', v-if='hasPermission(`manage:system`)')
+            v-list-item(to='/locale', color='primary', v-if='hasPermission(`manage:system`)')
               v-list-item-avatar(size='24'): v-icon mdi-web
               v-list-item-title {{ $t('admin:locale.title') }}
-            v-list-item(to='/navigation', v-if='hasPermission([`manage:system`, `manage:navigation`])')
+            v-list-item(to='/navigation', color='primary', v-if='hasPermission([`manage:system`, `manage:navigation`])')
               v-list-item-avatar(size='24'): v-icon mdi-near-me
               v-list-item-title {{ $t('admin:navigation.title') }}
-            v-list-item(to='/pages', v-if='hasPermission([`manage:system`, `write:pages`, `manage:pages`, `delete:pages`])')
+            v-list-item(to='/pages', color='primary', v-if='hasPermission([`manage:system`, `write:pages`, `manage:pages`, `delete:pages`])')
               v-list-item-avatar(size='24'): v-icon mdi-file-document-outline
               v-list-item-title {{ $t('admin:pages.title') }}
               v-list-item-action(style='min-width:auto;')
@@ -32,19 +32,19 @@
             v-list-item(to='/tags', v-if='hasPermission([`manage:system`])', disabled)
               v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-tag-multiple
               v-list-item-title {{ $t('admin:tags.title') }}
-            v-list-item(to='/theme', v-if='hasPermission([`manage:system`, `manage:theme`])')
+            v-list-item(to='/theme', color='primary', v-if='hasPermission([`manage:system`, `manage:theme`])')
               v-list-item-avatar(size='24'): v-icon mdi-palette-outline
               v-list-item-title {{ $t('admin:theme.title') }}
           template(v-if='hasPermission([`manage:system`, `manage:groups`, `write:groups`, `manage:users`, `write:users`])')
             v-divider.my-2
             v-subheader.pl-4 {{ $t('admin:nav.users') }}
-            v-list-item(to='/groups', v-if='hasPermission([`manage:system`, `manage:groups`, `write:groups`])')
+            v-list-item(to='/groups', color='primary', v-if='hasPermission([`manage:system`, `manage:groups`, `write:groups`])')
               v-list-item-avatar(size='24'): v-icon mdi-account-group
               v-list-item-title {{ $t('admin:groups.title') }}
               v-list-item-action(style='min-width:auto;')
                 v-chip(x-small, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`')
                   .caption.grey--text {{ info.groupsTotal }}
-            v-list-item(to='/users', v-if='hasPermission([`manage:system`, `manage:groups`, `write:groups`, `manage:users`, `write:users`])')
+            v-list-item(to='/users', color='primary', v-if='hasPermission([`manage:system`, `manage:groups`, `write:groups`, `manage:users`, `write:users`])')
               v-list-item-avatar(size='24'): v-icon mdi-account-box
               v-list-item-title {{ $t('admin:users.title') }}
               v-list-item-action(style='min-width:auto;')
@@ -53,10 +53,10 @@
           template(v-if='hasPermission(`manage:system`)')
             v-divider.my-2
             v-subheader.pl-4 {{ $t('admin:nav.modules') }}
-            v-list-item(to='/analytics')
+            v-list-item(to='/analytics', color='primary')
               v-list-item-avatar(size='24'): v-icon mdi-chart-timeline-variant
               v-list-item-title {{ $t('admin:analytics.title') }}
-            v-list-item(to='/auth')
+            v-list-item(to='/auth', color='primary')
               v-list-item-avatar(size='24'): v-icon mdi-lock-outline
               v-list-item-title {{ $t('admin:auth.title') }}
             v-list-item(to='/comments', disabled)
@@ -68,13 +68,13 @@
             v-list-item(to='/logging', disabled)
               v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-script-text-outline
               v-list-item-title {{ $t('admin:logging.title') }}
-            v-list-item(to='/rendering')
+            v-list-item(to='/rendering', color='primary')
               v-list-item-avatar(size='24'): v-icon mdi-cogs
               v-list-item-title {{ $t('admin:rendering.title') }}
-            v-list-item(to='/search')
+            v-list-item(to='/search', color='primary')
               v-list-item-avatar(size='24'): v-icon mdi-cloud-search-outline
               v-list-item-title {{ $t('admin:search.title') }}
-            v-list-item(to='/storage')
+            v-list-item(to='/storage', color='primary')
               v-list-item-avatar(size='24'): v-icon mdi-harddisk
               v-list-item-title {{ $t('admin:storage.title') }}
           template(v-if='hasPermission([`manage:system`, `manage:api`])')
@@ -83,13 +83,16 @@
             v-list-item(to='/api', v-if='hasPermission([`manage:system`, `manage:api`])', disabled)
               v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-call-split
               v-list-item-title {{ $t('admin:api.title') }}
-            v-list-item(to='/mail', v-if='hasPermission(`manage:system`)')
+            v-list-item(to='/mail', color='primary', v-if='hasPermission(`manage:system`)')
               v-list-item-avatar(size='24'): v-icon mdi-email-multiple-outline
               v-list-item-title {{ $t('admin:mail.title') }}
-            v-list-item(to='/system', v-if='hasPermission(`manage:system`)')
+            v-list-item(to='/ssl', color='primary', v-if='hasPermission(`manage:system`)')
+              v-list-item-avatar(size='24'): v-icon mdi-cloud-lock-outline
+              v-list-item-title {{ $t('admin:ssl.title') }}
+            v-list-item(to='/system', color='primary', v-if='hasPermission(`manage:system`)')
               v-list-item-avatar(size='24'): v-icon mdi-tune
               v-list-item-title {{ $t('admin:system.title') }}
-            v-list-item(to='/utilities', v-if='hasPermission(`manage:system`)')
+            v-list-item(to='/utilities', color='primary', v-if='hasPermission(`manage:system`)')
               v-list-item-avatar(size='24'): v-icon mdi-wrench-outline
               v-list-item-title {{ $t('admin:utilities.title') }}
             v-list-item(to='/webhooks', v-if='hasPermission(`manage:system`)', disabled)
@@ -104,16 +107,16 @@
                 v-list-item-avatar(size='24'): v-icon mdi-dev-to
                 v-list-item-title {{ $t('admin:dev.title') }}
 
-              v-list-item(to='/dev-flags')
+              v-list-item(to='/dev-flags', color='primary')
                 v-list-item-title {{ $t('admin:dev.flags.title') }}
-              v-list-item(href='/graphql')
+              v-list-item(href='/graphql', color='primary')
                 v-list-item-title GraphQL
               //- v-list-item(to='/dev-graphiql')
               //-   v-list-item-title {{ $t('admin:dev.graphiql.title') }}
               //- v-list-item(to='/dev-voyager')
               //-   v-list-item-title {{ $t('admin:dev.voyager.title') }}
             v-divider.my-2
-          v-list-item(to='/contribute')
+          v-list-item(to='/contribute', color='primary')
             v-list-item-avatar(size='24'): v-icon mdi-heart-outline
             v-list-item-title {{ $t('admin:contribute.title') }}
 
@@ -164,6 +167,7 @@ const router = new VueRouter({
     { path: '/storage', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-storage.vue') },
     { path: '/api', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-api.vue') },
     { path: '/mail', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-mail.vue') },
+    { path: '/ssl', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-ssl.vue') },
     { path: '/system', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-system.vue') },
     { path: '/utilities', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-utilities.vue') },
     { path: '/webhooks', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-webhooks.vue') },

client/components/admin/admin-dashboard.vue

@@ -19,7 +19,7 @@
               easing='easeOutQuint'
               )
       v-flex(xs12 md6 lg4 xl3 d-flex)
-        v-card.green.lighten-1.dashboard-card.animated.fadeInUp.wait-p2s(dark)
+        v-card.blue.darken-3.dashboard-card.animated.fadeInUp.wait-p2s(dark)
           v-card-text
             v-icon.dashboard-icon mdi-account
             .overline {{$t('admin:dashboard.users')}}
@@ -30,7 +30,7 @@
               easing='easeOutQuint'
               )
       v-flex(xs12 md6 lg4 xl3 d-flex)
-        v-card.indigo.lighten-1.dashboard-card.animated.fadeInUp.wait-p4s(dark)
+        v-card.blue.darken-4.dashboard-card.animated.fadeInUp.wait-p4s(dark)
           v-card-text
             v-icon.dashboard-icon mdi-account-group
             .overline {{$t('admin:dashboard.groups')}}
@@ -42,11 +42,11 @@
               )
       v-flex(xs12 md6 lg12 xl3 d-flex)
         v-card.dashboard-card.animated.fadeInUp.wait-p6s(
-          :class='isLatestVersion ? "teal lighten-2" : "red lighten-2"'
+          :class='isLatestVersion ? "green" : "red lighten-2"'
           dark
           )
           v-btn.btn-animate-wrench(fab, absolute, :right='!$vuetify.rtl', :left='$vuetify.rtl', top, small, light, to='system', v-if='hasPermission(`manage:system`)')
-            v-icon(:color='isLatestVersion ? `teal` : `red darken-4`', small) mdi-wrench
+            v-icon(:color='isLatestVersion ? `green` : `red darken-4`', small) mdi-wrench
           v-card-text
             v-icon.dashboard-icon mdi-blur
             .subtitle-1 Wiki.js {{info.currentVersion}}

client/components/admin/admin-general.vue

@@ -41,19 +41,26 @@
                       persistent-hint
                       )
                   v-divider
-                  .overline.grey--text.pa-4 {{$t('admin:general.logo')}} #[v-chip.ml-2(label, color='grey', small, outlined) coming soon]
-                  v-card-text.pb-4.pl-5
-                    v-layout.px-3(row, align-center)
-                      v-avatar(size='100', :color='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-3`', :tile='config.logoIsSquare')
-                      .ml-4
-                        v-btn.mr-3(color='teal', depressed, disabled)
-                          v-icon(left) mdi-cloud-upload
-                          span {{$t('admin:general.uploadLogo')}}
-                        v-btn(color='teal', depressed, disabled)
-                          v-icon(left) mdi-close
-                          span {{$t('admin:general.uploadClear')}}
-                        .caption.mt-3.grey--text {{$t('admin:general.uploadSizeHint', { size: '120x120' })}}
-                        .caption.grey--text {{$t('admin:general.uploadTypesHint', { typeList: 'SVG, PNG', lastType: 'JPG' })}}.
+                  .overline.grey--text.pa-4 {{$t('admin:general.logo')}}
+                  .pt-2.pb-7.pl-10.pr-3
+                    .d-flex.align-center
+                      v-avatar(size='100', tile)
+                        v-img(
+                          :src='config.logoUrl'
+                          lazy-src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNcWQ8AAdcBKrJda2oAAAAASUVORK5CYII='
+                          aspect-ratio='1'
+                          )
+                      .ml-4(style='flex: 1 1 auto;')
+                        v-text-field(
+                          outlined
+                          :label='$t(`admin:general.logoUrl`)'
+                          v-model='config.logoUrl'
+                          :hint='$t(`admin:general.logoUrlHint`)'
+                          persistent-hint
+                          append-icon='mdi-folder-image'
+                          @click:append='browseLogo'
+                          @keyup.enter='refreshLogo'
+                        )
                   v-divider
                   .overline.grey--text.pa-4 {{$t('admin:general.footerCopyright')}}
                   .px-3.pb-3
@@ -236,6 +243,7 @@
                     hint='One directive per line.'
                     disabled
                   )
+    component(:is='activeModal')
 
 </template>
 
@@ -245,7 +253,17 @@ import { get, sync } from 'vuex-pathify'
 import siteConfigQuery from 'gql/admin/site/site-query-config.gql'
 import siteUpdateConfigMutation from 'gql/admin/site/site-mutation-save-config.gql'
 
+import editorStore from '../../store/editor'
+
+/* global WIKI */
+
+WIKI.$store.registerModule('editor', editorStore)
+
 export default {
+  i18nOptions: { namespaces: 'editor' },
+  components: {
+    editorModalMedia: () => import(/* webpackChunkName: "editor", webpackMode: "lazy" */ '../editor/editor-modal-media.vue')
+  },
   data() {
     return {
       analyticsServices: [
@@ -262,8 +280,7 @@ export default {
         analyticsService: '',
         analyticsId: '',
         company: '',
-        hasLogo: false,
-        logoIsSquare: false,
+        logoUrl: '',
         featureAnalytics: false,
         featurePageRatings: false,
         featurePageComments: false,
@@ -297,7 +314,9 @@ export default {
   computed: {
     darkMode: get('site/dark'),
     siteTitle: sync('site/title'),
-    company: sync('site/company')
+    logoUrl: sync('site/logoUrl'),
+    company: sync('site/company'),
+    activeModal: sync('editor/activeModal')
   },
   methods: {
     async save () {
@@ -312,8 +331,7 @@ export default {
             analyticsService: _.get(this.config, 'analyticsService', ''),
             analyticsId: _.get(this.config, 'analyticsId', ''),
             company: _.get(this.config, 'company', ''),
-            hasLogo: _.get(this.config, 'hasLogo', false),
-            logoIsSquare: _.get(this.config, 'logoIsSquare', false),
+            logoUrl: _.get(this.config, 'logoUrl', ''),
             featurePageRatings: _.get(this.config, 'featurePageRatings', false),
             featurePageComments: _.get(this.config, 'featurePageComments', false),
             featurePersonalWikis: _.get(this.config, 'featurePersonalWikis', false),
@@ -337,11 +355,27 @@ export default {
         })
         this.siteTitle = this.config.title
         this.company = this.config.company
+        this.logoUrl = this.config.logoUrl
       } catch (err) {
         this.$store.commit('pushGraphError', err)
       }
+    },
+    browseLogo () {
+      this.$store.set('editor/editorKey', 'common')
+      this.activeModal = 'editorModalMedia'
+    },
+    refreshLogo () {
+      this.$forceUpdate()
     }
   },
+  mounted () {
+    this.$root.$on('editorInsert', opts => {
+      this.config.logoUrl = opts.path
+    })
+  },
+  beforeDestroy() {
+    this.$root.$off('editorInsert')
+  },
   apollo: {
     config: {
       query: siteConfigQuery,

client/components/admin/admin-rendering.vue

@@ -6,7 +6,6 @@
           img.animated.fadeInUp(src='/svg/icon-process.svg', alt='Rendering', style='width: 80px;')
           .admin-header-title
             .headline.primary--text.animated.fadeInLeft Rendering
-            .subtitle-1.grey--text.animated.fadeInLeft.wait-p4s Configure how content is rendered #[v-chip(label, color='primary', small).white--text coming soon]
           v-spacer
           v-btn.mx-3.animated.fadeInDown.wait-p2s(outlined, color='grey', @click='refresh', large)
             v-icon mdi-refresh

client/components/admin/admin-ssl.vue

@@ -0,0 +1,173 @@
+<template lang='pug'>
+  v-container(fluid, grid-list-lg)
+    v-layout(row wrap)
+      v-flex(xs12)
+        .admin-header
+          img.animated.fadeInUp(src='/svg/icon-validation.svg', alt='SSL', style='width: 80px;')
+          .admin-header-title
+            .headline.primary--text.animated.fadeInLeft {{ $t('admin:ssl.title') }}
+            .subtitle-1.grey--text.animated.fadeInLeft {{ $t('admin:ssl.subtitle') }}
+          v-spacer
+          v-btn.animated.fadeInDown(color='success', depressed, @click='save', large)
+            v-icon(left) mdi-check
+            span {{$t('common:actions.apply')}}
+        v-form.pt-3
+          v-layout(row wrap)
+            v-flex(lg6 xs12)
+              v-form
+                v-card.animated.fadeInUp
+                  v-toolbar(color='primary', dark, dense, flat)
+                    v-toolbar-title.subtitle-1 {{ $t('admin:ssl.provider') }}
+                  v-card-text
+                    v-select(
+                      :items='providers'
+                      outlined
+                      :label='$t(`admin:ssl.provider`)'
+                      required
+                      :counter='255'
+                      v-model='config.provider'
+                      prepend-icon='mdi-handshake'
+                      :hint='$t(`admin:ssl.providerHint`)'
+                      persistent-hint
+                      )
+                    v-text-field.mt-3(
+                      outlined
+                      :label='$t(`admin:ssl.domain`)'
+                      required
+                      :counter='255'
+                      v-model='config.domain'
+                      prepend-icon='mdi-earth'
+                      :hint='$t(`admin:ssl.domainHint`)'
+                      persistent-hint
+                      :disabled='config.provider === ``'
+                      )
+
+              v-card.animated.fadeInUp.wait-p2s.mt-3(v-if='config.provider !== ``')
+                v-toolbar(color='primary', dark, dense, flat)
+                  v-toolbar-title.subtitle-1 {{$t('admin:ssl.providerOptions')}}
+                v-card-text ---
+
+            v-flex(lg6 xs12)
+              v-card.animated.fadeInUp.wait-p2s
+                  v-toolbar(color='primary', dark, dense, flat)
+                    v-toolbar-title.subtitle-1 {{ $t('admin:ssl.ports') }}
+                  v-card-text
+                    v-row
+                      v-col(cols='6')
+                        v-text-field(
+                          outlined
+                          :label='$t(`admin:ssl.httpPort`)'
+                          v-model='config.httpPort'
+                          prepend-icon='mdi-lock-open-variant-outline'
+                          :hint='$t(`admin:ssl.httpPortHint`)'
+                          persistent-hint
+                          )
+                      v-col(cols='6')
+                        v-checkbox(
+                          :label='$t(`admin:ssl.httpPortRedirect`)'
+                          v-model='config.httpRedirect'
+                          :hint='$t(`admin:ssl.httpPortRedirectHint`)'
+                          :disabled='config.provider === ``'
+                          persistent-hint
+                          color='primary'
+                          )
+                      v-col(cols='6')
+                        v-text-field(
+                          outlined
+                          :label='$t(`admin:ssl.httpsPort`)'
+                          v-model='config.httpsPort'
+                          prepend-icon='mdi-lock'
+                          :hint='$t(`admin:ssl.httpsPortHint`)'
+                          persistent-hint
+                          :disabled='config.provider === ``'
+                          )
+                  v-card-text.grey(:class='$vuetify.theme.dark ? `darken-4-l5` : `lighten-4`')
+                    .caption {{$t(`admin:ssl.writableConfigFileWarning`)}}
+
+</template>
+
+<script>
+import _ from 'lodash'
+import siteConfigQuery from 'gql/admin/site/site-query-config.gql'
+import siteUpdateConfigMutation from 'gql/admin/site/site-mutation-save-config.gql'
+
+export default {
+  data() {
+    return {
+      config: {
+        provider: '',
+        domain: '',
+        httpPort: 3000,
+        httpPortRedirect: true,
+        httpsPort: 443
+      }
+    }
+  },
+  computed: {
+    providers () {
+      return [
+        { text: this.$t('admin:ssl.providerDisabled'), value: '' },
+        { text: this.$t('admin:ssl.providerLetsEncrypt'), value: 'letsencrypt' },
+        { text: this.$t('admin:ssl.providerCustomCertificate'), value: 'custom' }
+      ]
+    }
+  },
+  methods: {
+    async save () {
+      try {
+        await this.$apollo.mutate({
+          mutation: siteUpdateConfigMutation,
+          variables: {
+            host: _.get(this.config, 'host', ''),
+            title: _.get(this.config, 'title', ''),
+            description: _.get(this.config, 'description', ''),
+            robots: _.get(this.config, 'robots', []),
+            analyticsService: _.get(this.config, 'analyticsService', ''),
+            analyticsId: _.get(this.config, 'analyticsId', ''),
+            company: _.get(this.config, 'company', ''),
+            hasLogo: _.get(this.config, 'hasLogo', false),
+            logoIsSquare: _.get(this.config, 'logoIsSquare', false),
+            featurePageRatings: _.get(this.config, 'featurePageRatings', false),
+            featurePageComments: _.get(this.config, 'featurePageComments', false),
+            featurePersonalWikis: _.get(this.config, 'featurePersonalWikis', false),
+            securityIframe: _.get(this.config, 'securityIframe', false),
+            securityReferrerPolicy: _.get(this.config, 'securityReferrerPolicy', false),
+            securityTrustProxy: _.get(this.config, 'securityTrustProxy', false),
+            securitySRI: _.get(this.config, 'securitySRI', false),
+            securityHSTS: _.get(this.config, 'securityHSTS', false),
+            securityHSTSDuration: _.get(this.config, 'securityHSTSDuration', 0),
+            securityCSP: _.get(this.config, 'securityCSP', false),
+            securityCSPDirectives: _.get(this.config, 'securityCSPDirectives', '')
+          },
+          watchLoading (isLoading) {
+            this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-site-update')
+          }
+        })
+        this.$store.commit('showNotification', {
+          style: 'success',
+          message: 'Configuration saved successfully.',
+          icon: 'check'
+        })
+        this.siteTitle = this.config.title
+        this.company = this.config.company
+      } catch (err) {
+        this.$store.commit('pushGraphError', err)
+      }
+    }
+  }
+  // apollo: {
+  //   config: {
+  //     query: siteConfigQuery,
+  //     fetchPolicy: 'network-only',
+  //     update: (data) => _.cloneDeep(data.site.config),
+  //     watchLoading (isLoading) {
+  //       this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-site-refresh')
+  //     }
+  //   }
+  // }
+}
+</script>
+
+<style lang='scss'>
+
+</style>

client/components/common/nav-header.vue

@@ -19,28 +19,30 @@
     v-layout(row)
       v-flex(xs6, md4)
         v-toolbar.nav-header-inner.pl-3(color='black', dark, flat)
-          v-menu(open-on-hover, offset-y, bottom, left, min-width='250', transition='slide-y-transition')
-            template(v-slot:activator='{ on }')
-              v-app-bar-nav-icon.btn-animate-app(v-on='on', :class='$vuetify.rtl ? `mx-0` : ``')
-                v-icon mdi-menu
-            v-list(nav, :light='!$vuetify.theme.dark', :dark='$vuetify.theme.dark', :class='$vuetify.theme.dark ? `grey darken-4` : ``')
-              v-list-item.pl-4(href='/')
-                v-list-item-avatar(size='24'): v-icon(color='blue') mdi-home
-                v-list-item-title.body-2 {{$t('common:header.home')}}
-              v-list-item.pl-4(@click='')
-                v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-file-tree
-                v-list-item-content
-                  v-list-item-title.body-2.grey--text.text--ligten-2 {{$t('common:header.siteMap')}}
-                  v-list-item-subtitle.overline.grey--text.text--lighten-2 Coming soon
-              v-list-item.pl-4(href='/t')
-                v-list-item-avatar(size='24'): v-icon(color='teal') mdi-tag-multiple
-                v-list-item-title.body-2 {{$t('common:header.browseTags')}}
-              v-list-item.pl-4(@click='assets')
-                v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-folder-multiple-image
-                v-list-item-content
-                  v-list-item-title.body-2.grey--text.text--ligten-2 {{$t('common:header.imagesFiles')}}
-                  v-list-item-subtitle.overline.grey--text.text--lighten-2 Coming soon
-          v-toolbar-title(:class='{ "mx-2": $vuetify.breakpoint.mdAndUp, "mx-0": $vuetify.breakpoint.smAndDown }')
+          v-avatar(tile, size='34', @click='goHome')
+            v-img.org-logo(:src='logoUrl')
+          //- v-menu(open-on-hover, offset-y, bottom, left, min-width='250', transition='slide-y-transition')
+          //-   template(v-slot:activator='{ on }')
+          //-     v-app-bar-nav-icon.btn-animate-app(v-on='on', :class='$vuetify.rtl ? `mx-0` : ``')
+          //-       v-icon mdi-menu
+          //-   v-list(nav, :light='!$vuetify.theme.dark', :dark='$vuetify.theme.dark', :class='$vuetify.theme.dark ? `grey darken-4` : ``')
+          //-     v-list-item.pl-4(href='/')
+          //-       v-list-item-avatar(size='24'): v-icon(color='blue') mdi-home
+          //-       v-list-item-title.body-2 {{$t('common:header.home')}}
+          //-     v-list-item.pl-4(@click='')
+          //-       v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-file-tree
+          //-       v-list-item-content
+          //-         v-list-item-title.body-2.grey--text.text--ligten-2 {{$t('common:header.siteMap')}}
+          //-         v-list-item-subtitle.overline.grey--text.text--lighten-2 Coming soon
+          //-     v-list-item.pl-4(href='/t')
+          //-       v-list-item-avatar(size='24'): v-icon(color='teal') mdi-tag-multiple
+          //-       v-list-item-title.body-2 {{$t('common:header.browseTags')}}
+          //-     v-list-item.pl-4(@click='assets')
+          //-       v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-folder-multiple-image
+          //-       v-list-item-content
+          //-         v-list-item-title.body-2.grey--text.text--ligten-2 {{$t('common:header.imagesFiles')}}
+          //-         v-list-item-subtitle.overline.grey--text.text--lighten-2 Coming soon
+          v-toolbar-title(:class='{ "mx-3": $vuetify.breakpoint.mdAndUp, "mx-0": $vuetify.breakpoint.smAndDown }')
             span.subheading {{title}}
       v-flex(md4, v-if='$vuetify.breakpoint.mdAndUp')
         v-toolbar.nav-header-inner(color='black', dark, flat)
@@ -197,6 +199,12 @@
     page-selector(mode='create', v-model='newPageModal', :open-handler='pageNewCreate', :locale='locale')
     page-selector(mode='move', v-model='movePageModal', :open-handler='pageMoveRename', :path='path', :locale='locale')
     page-delete(v-model='deletePageModal', v-if='path && path.length')
+
+    .nav-header-dev(v-if='isDevMode')
+      v-icon mdi-alert
+      div
+        .overline DEVELOPMENT VERSION
+        .overline This code base is NOT for production use!
 </template>
 
 <script>
@@ -206,7 +214,7 @@ import Cookies from 'js-cookie'
 
 import movePageMutation from 'gql/common/common-pages-mutation-move.gql'
 
-/* global siteLangs */
+/* global siteConfig, siteLangs */
 
 export default {
   components: {
@@ -230,7 +238,8 @@ export default {
       newPageModal: false,
       movePageModal: false,
       deletePageModal: false,
-      locales: siteLangs
+      locales: siteLangs,
+      isDevMode: false
     }
   },
   computed: {
@@ -241,6 +250,7 @@ export default {
     searchRestrictPath: sync('site/searchRestrictPath'),
     isLoading: get('isLoading'),
     title: get('site/title'),
+    logoUrl: get('site/logoUrl'),
     path: get('page/path'),
     locale: get('page/locale'),
     mode: get('page/mode'),
@@ -292,6 +302,7 @@ export default {
     this.$root.$on('pageDelete', () => {
       this.pageDelete()
     })
+    this.isDevMode = siteConfig.devMode === true
   },
   methods: {
     searchFocus () {
@@ -388,6 +399,9 @@ export default {
     logout () {
       Cookies.remove('jwt')
       window.location.assign('/')
+    },
+    goHome () {
+      window.location.assign('/')
     }
   }
 }
@@ -410,6 +424,10 @@ export default {
     }
   }
 
+  .org-logo {
+    cursor: pointer;
+  }
+
   &-inner {
     .v-toolbar__content {
       padding: 0;
@@ -439,6 +457,24 @@ export default {
       }
     }
   }
+
+  &-dev {
+    background-color: mc('red', '600');
+    position: absolute;
+    top: 10px;
+    left: 255px;
+    padding: 5px 15px;
+    border-radius: 5px;
+    display: flex;
+
+    .v-icon {
+      margin-right: 15px;
+    }
+
+    .overline:nth-child(2) {
+      text-transform: none;
+    }
+  }
 }
 
 .navHeaderSearch {

client/components/editor/editor-modal-media.vue

@@ -578,6 +578,20 @@ export default {
     }
   }
 
+  &.is-editor-common {
+    top: 64px;
+    left: 0;
+    width: 100%;
+    height: calc(100vh - 64px);
+
+    @include until($tablet) {
+      top: 56px;
+      left: 0;
+      width: 100%;
+      height: calc(100vh - 56px);
+    }
+  }
+
   .filepond--root {
     margin-bottom: 0;
   }

client/graph/admin/site/site-mutation-save-config.gql

@@ -6,8 +6,7 @@ mutation (
   $analyticsService: String!
   $analyticsId: String!
   $company: String!
-  $hasLogo: Boolean!
-  $logoIsSquare: Boolean!
+  $logoUrl: String!
   $featurePageRatings: Boolean!
   $featurePageComments: Boolean!
   $featurePersonalWikis: Boolean!
@@ -29,8 +28,7 @@ mutation (
       analyticsService: $analyticsService,
       analyticsId: $analyticsId,
       company: $company,
-      hasLogo: $hasLogo,
-      logoIsSquare: $logoIsSquare,
+      logoUrl: $logoUrl,
       featurePageRatings: $featurePageRatings,
       featurePageComments: $featurePageComments,
       featurePersonalWikis: $featurePersonalWikis,

client/graph/admin/site/site-query-config.gql

@@ -8,8 +8,7 @@
       analyticsService
       analyticsId
       company
-      hasLogo
-      logoIsSquare
+      logoUrl
       featurePageRatings
       featurePageComments
       featurePersonalWikis

client/scss/app.scss

@@ -5,8 +5,10 @@
 @import "base/animation";
 
 @import '~vuescroll/dist/vuescroll.css';
+@import '~katex/dist/katex.min.css';
 @import '~diff2html/dist/diff2html.min.css';
 
+@import 'components/katex';
 @import 'components/v-btn';
 @import 'components/v-data-table';
 @import 'components/v-dialog';

client/scss/components/katex.scss

@@ -0,0 +1,4 @@
+.v-application .katex .accent {
+  background-color: inherit !important;
+  border-color: inherit !important;
+}

client/store/site.js

@@ -7,6 +7,7 @@ const state = {
   dark: siteConfig.darkMode,
   mascot: true,
   title: siteConfig.title,
+  logoUrl: siteConfig.logoUrl,
   search: '',
   searchIsFocused: false,
   searchIsLoading: false,

dev/templates/master.pug

@@ -29,7 +29,13 @@ html(lang=siteConfig.lang)
 
     //- Site Properties
     script.
-      var siteConfig = !{JSON.stringify(siteConfig)}; var siteLangs = !{JSON.stringify(langs)}
+      var siteConfig = !{JSON.stringify(siteConfig)}
+      var siteLangs = !{JSON.stringify(langs)}
+
+    //- Dev Mode Warning
+    if devMode
+      script.
+        siteConfig.devMode = true
 
     //- Icon Set
     if config.theming.iconset === 'fa'

package.json

@@ -4,6 +4,7 @@
   "releaseDate": "2019-01-01T01:01:01.000Z",
   "description": "A modern, lightweight and powerful wiki app built on NodeJS, Git and Markdown",
   "main": "wiki.js",
+  "dev": true,
   "scripts": {
     "start": "node server",
     "dev": "node dev",
@@ -39,10 +40,10 @@
     "@exlinc/keycloak-passport": "1.0.2",
     "algoliasearch": "3.35.1",
     "apollo-fetch": "0.7.0",
-    "apollo-server": "2.9.12",
-    "apollo-server-express": "2.9.12",
+    "apollo-server": "2.9.13",
+    "apollo-server-express": "2.9.13",
     "auto-load": "3.0.4",
-    "aws-sdk": "2.580.0",
+    "aws-sdk": "2.590.0",
     "azure-search-client": "3.1.5",
     "bcryptjs-then": "1.0.1",
     "bluebird": "3.7.2",
@@ -57,7 +58,7 @@
     "cookie-parser": "1.4.4",
     "cors": "2.8.5",
     "custom-error-instance": "2.1.1",
-    "dependency-graph": "0.8.0",
+    "dependency-graph": "0.8.1",
     "diff": "4.0.1",
     "diff2html": "2.12.1",
     "dotize": "0.3.0",
@@ -77,17 +78,18 @@
     "graphql-subscriptions": "1.1.0",
     "graphql-tools": "4.0.6",
     "he": "1.2.0",
-    "highlight.js": "9.16.2",
-    "i18next": "19.0.1",
-    "i18next-express-middleware": "1.8.2",
+    "highlight.js": "9.17.1",
+    "i18next": "19.0.2",
+    "i18next-express-middleware": "1.9.1",
     "i18next-node-fs-backend": "2.1.3",
     "image-size": "0.8.3",
     "js-base64": "2.5.1",
     "js-binary": "1.2.0",
     "js-yaml": "3.13.1",
     "jsonwebtoken": "8.5.1",
+    "katex": "0.11.1",
     "klaw": "3.0.0",
-    "knex": "0.20.3",
+    "knex": "0.20.4",
     "lodash": "4.17.15",
     "markdown-it": "10.0.0",
     "markdown-it-abbr": "1.0.4",
@@ -106,17 +108,17 @@
     "mime-types": "2.1.25",
     "moment": "2.24.0",
     "moment-timezone": "0.5.27",
-    "mongodb": "3.3.5",
+    "mongodb": "3.4.0",
     "mssql": "6.0.1",
     "multer": "1.4.2",
-    "mysql2": "2.0.1",
+    "mysql2": "2.0.2",
     "nanoid": "2.1.7",
     "node-2fa": "1.1.2",
-    "node-cache": "5.0.2",
-    "nodemailer": "6.3.1",
+    "node-cache": "5.1.0",
+    "nodemailer": "6.4.2",
     "objection": "1.6.11",
-    "passport": "0.4.0",
-    "passport-auth0": "1.3.0",
+    "passport": "0.4.1",
+    "passport-auth0": "1.3.1",
     "passport-azure-ad": "4.2.0",
     "passport-cas": "0.1.1",
     "passport-discord": "0.1.3",
@@ -150,9 +152,9 @@
     "scim-query-filter-parser": "2.0.2",
     "semver": "6.3.0",
     "serve-favicon": "2.5.0",
-    "simple-git": "1.126.0",
+    "simple-git": "1.129.0",
     "solr-node": "1.2.1",
-    "sqlite3": "4.1.0",
+    "sqlite3": "4.1.1",
     "striptags": "3.1.1",
     "subscriptions-transport-ws": "0.9.16",
     "tar-fs": "2.0.0",
@@ -165,8 +167,8 @@
     "yargs": "15.0.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.7.4",
-    "@babel/core": "^7.7.4",
+    "@babel/cli": "^7.7.5",
+    "@babel/core": "^7.7.5",
     "@babel/plugin-proposal-class-properties": "^7.7.4",
     "@babel/plugin-proposal-decorators": "^7.7.4",
     "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
@@ -177,22 +179,22 @@
     "@babel/plugin-syntax-dynamic-import": "^7.7.4",
     "@babel/plugin-syntax-import-meta": "^7.7.4",
     "@babel/polyfill": "^7.7.0",
-    "@babel/preset-env": "^7.7.4",
-    "@mdi/font": "4.6.95",
+    "@babel/preset-env": "^7.7.6",
+    "@mdi/font": "4.7.95",
     "@panter/vue-i18next": "0.15.1",
     "@requarks/ckeditor5": "12.4.0-wiki.14",
     "@vue/babel-preset-app": "4.1.1",
     "animate-sass": "0.8.2",
     "animated-number-vue": "1.0.0",
-    "apollo-cache-inmemory": "1.6.3",
-    "apollo-client": "2.6.4",
+    "apollo-cache-inmemory": "1.6.5",
+    "apollo-client": "2.6.8",
     "apollo-link": "1.2.13",
     "apollo-link-batch-http": "1.2.13",
     "apollo-link-error": "1.1.12",
     "apollo-link-http": "1.5.16",
     "apollo-link-persisted-queries": "0.2.2",
     "apollo-link-ws": "1.0.19",
-    "apollo-utilities": "1.3.2",
+    "apollo-utilities": "1.3.3",
     "autoprefixer": "9.7.3",
     "babel-eslint": "10.0.3",
     "babel-jest": "24.9.0",
@@ -206,26 +208,26 @@
     "clean-webpack-plugin": "3.0.0",
     "clipboard": "2.0.4",
     "codemirror": "5.49.2",
-    "copy-webpack-plugin": "5.0.5",
-    "core-js": "3.4.5",
-    "css-loader": "3.2.0",
+    "copy-webpack-plugin": "5.1.1",
+    "core-js": "3.5.0",
+    "css-loader": "3.3.2",
     "cssnano": "4.1.10",
     "duplicate-package-checker-webpack-plugin": "3.0.0",
     "epic-spinners": "1.1.0",
     "eslint": "6.7.2",
     "eslint-config-requarks": "1.0.7",
     "eslint-config-standard": "14.1.0",
-    "eslint-plugin-import": "2.18.2",
+    "eslint-plugin-import": "2.19.1",
     "eslint-plugin-node": "10.0.0",
     "eslint-plugin-promise": "4.2.1",
     "eslint-plugin-standard": "4.0.1",
     "eslint-plugin-vue": "6.0.1",
     "fibers": "4.0.2",
     "file-loader": "5.0.2",
-    "filepond": "4.7.4",
+    "filepond": "4.9.2",
     "filepond-plugin-file-validate-type": "1.2.4",
     "filesize.js": "2.0.0",
-    "graphql-persisted-document-loader": "1.0.1",
+    "graphql-persisted-document-loader": "2.0.0",
     "graphql-tag": "^2.10.1",
     "hammerjs": "2.0.8",
     "html-webpack-plugin": "4.0.0-beta.8",
@@ -259,12 +261,12 @@
     "script-ext-html-webpack-plugin": "2.1.4",
     "simple-progress-webpack-plugin": "1.1.2",
     "style-loader": "1.0.1",
-    "terser": "4.4.0",
+    "terser": "4.4.2",
     "twemoji-awesome": "1.0.6",
     "url-loader": "3.0.0",
     "velocity-animate": "1.5.2",
     "viz.js": "2.1.2",
-    "vue": "2.6.10",
+    "vue": "2.6.11",
     "vue-apollo": "3.0.2",
     "vue-chartjs": "3.5.0",
     "vue-clipboards": "1.3.0",
@@ -274,12 +276,12 @@
     "vue-moment": "4.0.0",
     "vue-router": "3.1.3",
     "vue-status-indicator": "1.2.1",
-    "vue-template-compiler": "2.6.10",
+    "vue-template-compiler": "2.6.11",
     "vue2-animate": "2.1.3",
     "vuedraggable": "2.23.2",
     "vuescroll": "4.14.4",
-    "vuetify": "2.1.12",
-    "vuetify-loader": "1.4.2",
+    "vuetify": "2.1.14",
+    "vuetify-loader": "1.4.3",
     "vuex": "3.1.2",
     "vuex-pathify": "1.4.0",
     "vuex-persistedstate": "2.7.0",
@@ -293,7 +295,7 @@
     "webpackbar": "4.0.0",
     "whatwg-fetch": "3.0.0",
     "write-file-webpack-plugin": "4.5.1",
-    "xterm": "4.2.0",
+    "xterm": "4.3.0",
     "zxcvbn": "4.4.2"
   },
   "browserslist": [

server/app/data.yml

@@ -38,6 +38,7 @@ defaults:
       clientId: ''
       isEnabled: false
     title: Wiki.js
+    logoUrl: https://static.requarks.io/logo/wikijs-butterfly.svg
     theming:
       theme: 'default'
       iconset: 'md'

server/core/config.js

@@ -74,6 +74,7 @@ module.exports = {
     WIKI.data = appdata
     WIKI.version = packageInfo.version
     WIKI.releaseDate = packageInfo.releaseDate
+    WIKI.devMode = (packageInfo.dev === true)
   },
 
   /**

server/graph/resolvers/site.js

@@ -15,8 +15,8 @@ module.exports = {
         host: WIKI.config.host,
         title: WIKI.config.title,
         company: WIKI.config.company,
+        logoUrl: WIKI.config.logoUrl,
         ...WIKI.config.seo,
-        ...WIKI.config.logo,
         ...WIKI.config.features,
         ...WIKI.config.security
       }
@@ -34,10 +34,7 @@ module.exports = {
           analyticsService: args.analyticsService,
           analyticsId: args.analyticsId
         }
-        WIKI.config.logo = {
-          hasLogo: args.hasLogo,
-          logoIsSquare: args.logoIsSquare
-        }
+        WIKI.config.logoUrl = args.logoUrl
         WIKI.config.features = {
           featurePageRatings: args.featurePageRatings,
           featurePageComments: args.featurePageComments,
@@ -53,7 +50,7 @@ module.exports = {
           securityCSP: args.securityCSP,
           securityCSPDirectives: args.securityCSPDirectives
         }
-        await WIKI.configSvc.saveToDb(['host', 'title', 'company', 'seo', 'logo', 'features', 'security'])
+        await WIKI.configSvc.saveToDb(['host', 'title', 'company', 'seo', 'logoUrl', 'features', 'security'])
 
         if (WIKI.config.security.securityTrustProxy) {
           WIKI.app.enable('trust proxy')

server/graph/schemas/site.graphql

@@ -31,8 +31,7 @@ type SiteMutation {
     analyticsService: String!
     analyticsId: String!
     company: String!
-    hasLogo: Boolean!
-    logoIsSquare: Boolean!
+    logoUrl: String!
     featurePageRatings: Boolean!
     featurePageComments: Boolean!
     featurePersonalWikis: Boolean!
@@ -59,8 +58,7 @@ type SiteConfig {
   analyticsService: String!
   analyticsId: String!
   company: String!
-  hasLogo: Boolean!
-  logoIsSquare: Boolean!
+  logoUrl: String!
   featurePageRatings: Boolean!
   featurePageComments: Boolean!
   featurePersonalWikis: Boolean!

server/master.js

@@ -113,6 +113,7 @@ module.exports = async () => {
     image: '',
     url: '/'
   }
+  app.locals.devMode = WIKI.devMode
 
   // ----------------------------------------
   // HMR (Dev Mode Only)
@@ -151,7 +152,8 @@ module.exports = async () => {
       darkMode: WIKI.config.theming.darkMode,
       lang: WIKI.config.lang.code,
       rtl: WIKI.config.lang.rtl,
-      company: WIKI.config.company
+      company: WIKI.config.company,
+      logoUrl: WIKI.config.logoUrl
     }
     res.locals.langs = await WIKI.models.locales.getNavLocales({ cache: true })
     res.locals.analyticsCode = await WIKI.models.analytics.getCode({ cache: true })

server/modules/rendering/html-security/renderer.js

@@ -6,31 +6,35 @@ module.exports = {
       input = xss(input, {
         whiteList: {
           ...xss.whiteList,
-          a: ['class', 'id', 'href', 'target', 'title'],
-          blockquote: ['class', 'id'],
-          code: ['class'],
-          div: ['class', 'id'],
-          em: ['class'],
-          h1: ['class', 'id'],
-          h2: ['class', 'id'],
-          h3: ['class', 'id'],
-          h4: ['class', 'id'],
-          h5: ['class', 'id'],
-          h6: ['class', 'id'],
-          img: ['alt', 'class', 'draggable', 'height', 'src', 'width'],
-          li: ['class'],
-          ol: ['class'],
-          p: ['class'],
-          pre: ['class'],
-          strong: ['class'],
-          table: ['border', 'class', 'id', 'width'],
-          tbody: ['class'],
-          td: ['align', 'class', 'colspan', 'rowspan', 'valign'],
-          th: ['align', 'class', 'colspan', 'rowspan', 'valign'],
-          thead: ['class'],
-          tr: ['class', 'rowspan', 'align', 'valign'],
-          ul: ['class']
-        }
+          a: ['class', 'id', 'href', 'style', 'target', 'title'],
+          blockquote: ['class', 'id', 'style'],
+          code: ['class', 'style'],
+          div: ['class', 'id', 'style'],
+          em: ['class', 'style'],
+          h1: ['class', 'id', 'style'],
+          h2: ['class', 'id', 'style'],
+          h3: ['class', 'id', 'style'],
+          h4: ['class', 'id', 'style'],
+          h5: ['class', 'id', 'style'],
+          h6: ['class', 'id', 'style'],
+          img: ['alt', 'class', 'draggable', 'height', 'src', 'style', 'width'],
+          li: ['class', 'style'],
+          ol: ['class', 'style'],
+          p: ['class', 'style'],
+          path: ['d', 'style'],
+          pre: ['class', 'style'],
+          span: ['class', 'style'],
+          strong: ['class', 'style'],
+          svg: ['width', 'height', 'viewBox', 'preserveAspectRatio', 'style'],
+          table: ['border', 'class', 'id', 'style', 'width'],
+          tbody: ['class', 'style'],
+          td: ['align', 'class', 'colspan', 'rowspan', 'style', 'valign'],
+          th: ['align', 'class', 'colspan', 'rowspan', 'style', 'valign'],
+          thead: ['class', 'style'],
+          tr: ['class', 'rowspan', 'style', 'align', 'valign'],
+          ul: ['class', 'style']
+        },
+        css: false
       })
     }
     return input

server/modules/rendering/markdown-katex/definition.yml

@@ -0,0 +1,20 @@
+key: markdownKatex
+title: Katex
+description: LaTeX Math Typesetting Renderer
+author: requarks.io
+icon: mdi-math-integral
+enabledDefault: true
+dependsOn: markdownCore
+props:
+  useInline:
+    type: Boolean
+    default: true
+    title: Inline TeX
+    hint: Process inline TeX expressions surrounded by $ symbols.
+    order: 1
+  useBlocks:
+    type: Boolean
+    default: true
+    title: TeX Blocks
+    hint: Process TeX blocks enclosed by $$ symbols.
+    order: 2

server/modules/rendering/markdown-katex/renderer.js

@@ -0,0 +1,181 @@
+const katex = require('katex')
+
+/* global WIKI */
+
+// ------------------------------------
+// Markdown - KaTeX Renderer
+// ------------------------------------
+//
+// Includes code from https://github.com/liradb2000/markdown-it-katex
+
+module.exports = {
+  init (mdinst, conf) {
+    if (conf.useInline) {
+      mdinst.inline.ruler.after('escape', 'katex_inline', katexInline)
+      mdinst.renderer.rules.katex_inline = (tokens, idx) => {
+        try {
+          return katex.renderToString(tokens[idx].content, {
+            displayMode: false
+          })
+        } catch (err) {
+          WIKI.logger.warn(err)
+          return tokens[idx].content
+        }
+      }
+    }
+    if (conf.useBlocks) {
+      mdinst.block.ruler.after('blockquote', 'katex_block', katexBlock, {
+        alt: [ 'paragraph', 'reference', 'blockquote', 'list' ]
+      })
+      mdinst.renderer.rules.katex_block = (tokens, idx) => {
+        try {
+          return `<p>` + katex.renderToString(tokens[idx].content, {
+            displayMode: true
+          }) + `</p>`
+        } catch (err) {
+          WIKI.logger.warn(err)
+          return tokens[idx].content
+        }
+      }
+    }
+  }
+}
+
+// Test if potential opening or closing delimieter
+// Assumes that there is a "$" at state.src[pos]
+function isValidDelim (state, pos) {
+  let prevChar
+  let nextChar
+  let max = state.posMax
+  let canOpen = true
+  let canClose = true
+
+  prevChar = pos > 0 ? state.src.charCodeAt(pos - 1) : -1
+  nextChar = pos + 1 <= max ? state.src.charCodeAt(pos + 1) : -1
+
+  // Check non-whitespace conditions for opening and closing, and
+  // check that closing delimeter isn't followed by a number
+  if (prevChar === 0x20/* " " */ || prevChar === 0x09/* \t */ ||
+          (nextChar >= 0x30/* "0" */ && nextChar <= 0x39/* "9" */)) {
+    canClose = false
+  }
+  if (nextChar === 0x20/* " " */ || nextChar === 0x09/* \t */) {
+    canOpen = false
+  }
+
+  return {
+    canOpen: canOpen,
+    canClose: canClose
+  }
+}
+
+function katexInline (state, silent) {
+  let start, match, token, res, pos
+
+  if (state.src[state.pos] !== '$') { return false }
+
+  res = isValidDelim(state, state.pos)
+  if (!res.canOpen) {
+    if (!silent) { state.pending += '$' }
+    state.pos += 1
+    return true
+  }
+
+  // First check for and bypass all properly escaped delimieters
+  // This loop will assume that the first leading backtick can not
+  // be the first character in state.src, which is known since
+  // we have found an opening delimieter already.
+  start = state.pos + 1
+  match = start
+  while ((match = state.src.indexOf('$', match)) !== -1) {
+    // Found potential $, look for escapes, pos will point to
+    // first non escape when complete
+    pos = match - 1
+    while (state.src[pos] === '\\') { pos -= 1 }
+
+    // Even number of escapes, potential closing delimiter found
+    if (((match - pos) % 2) === 1) { break }
+    match += 1
+  }
+
+  // No closing delimter found.  Consume $ and continue.
+  if (match === -1) {
+    if (!silent) { state.pending += '$' }
+    state.pos = start
+    return true
+  }
+
+  // Check if we have empty content, ie: $$.  Do not parse.
+  if (match - start === 0) {
+    if (!silent) { state.pending += '$$' }
+    state.pos = start + 1
+    return true
+  }
+
+  // Check for valid closing delimiter
+  res = isValidDelim(state, match)
+  if (!res.canClose) {
+    if (!silent) { state.pending += '$' }
+    state.pos = start
+    return true
+  }
+
+  if (!silent) {
+    token = state.push('katex_inline', 'math', 0)
+    token.markup = '$'
+    token.content = state.src.slice(start, match)
+  }
+
+  state.pos = match + 1
+  return true
+}
+
+function katexBlock (state, start, end, silent) {
+  let firstLine; let lastLine; let next; let lastPos; let found = false; let token
+  let pos = state.bMarks[start] + state.tShift[start]
+  let max = state.eMarks[start]
+
+  if (pos + 2 > max) { return false }
+  if (state.src.slice(pos, pos + 2) !== '$$') { return false }
+
+  pos += 2
+  firstLine = state.src.slice(pos, max)
+
+  if (silent) { return true }
+  if (firstLine.trim().slice(-2) === '$$') {
+    // Single line expression
+    firstLine = firstLine.trim().slice(0, -2)
+    found = true
+  }
+
+  for (next = start; !found;) {
+    next++
+
+    if (next >= end) { break }
+
+    pos = state.bMarks[next] + state.tShift[next]
+    max = state.eMarks[next]
+
+    if (pos < max && state.tShift[next] < state.blkIndent) {
+      // non-empty line with negative indent should stop the list:
+      break
+    }
+
+    if (state.src.slice(pos, max).trim().slice(-2) === '$$') {
+      lastPos = state.src.slice(0, max).lastIndexOf('$$')
+      lastLine = state.src.slice(pos, lastPos)
+      found = true
+    }
+  }
+
+  state.line = next + 1
+
+  token = state.push('katex_block', 'math', 0)
+  token.block = true
+  token.content = (firstLine && firstLine.trim() ? firstLine + '\n' : '') +
+  state.getLines(start + 1, next, state.tShift[start], true) +
+  (lastLine && lastLine.trim() ? lastLine : '')
+  token.map = [ start, state.line ]
+  token.markup = '$$'
+  return true
+}