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

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
+}