ui-default: init

将ui-default合并至主存储库便于维护

packages/ui-default/backendlib/markdown-it-katex.js

@@ -0,0 +1,136 @@
+// https://github.com/waylonflinn/markdown-it-katex/blob/master/index.js
+const katex = require('katex');
+
+const logger = new global.Hydro.Logger('katex');
+
+function isValidDelim(state, pos) {
+  const max = state.posMax;
+  const prevChar = pos > 0 ? state.src.charCodeAt(pos - 1) : -1;
+  const nextChar = pos + 1 <= max ? state.src.charCodeAt(pos + 1) : -1;
+  let canOpen = true;
+  let canClose = true;
+  if (prevChar === 0x09
+    ||/* \t */ (nextChar >= 0x30/* "0" */ && nextChar <= 0x39/* "9" */)) canClose = false;
+  if (nextChar === 0x09/* \t */) canOpen = false;
+  return {
+    canOpen,
+    canClose,
+  };
+}
+
+function inline(state, silent) {
+  let pos;
+  if (state.src[state.pos] !== '$') return false;
+  let res = isValidDelim(state, state.pos);
+  if (!res.canOpen) {
+    if (!silent) state.pending += '$';
+    state.pos += 1;
+    return true;
+  }
+  const start = state.pos + 1;
+  let match = start;
+  // eslint-disable-next-line no-cond-assign
+  while ((match = state.src.indexOf('$', match)) !== -1) {
+    pos = match - 1;
+    while (state.src[pos] === '\\') pos -= 1;
+    if ((match - pos) % 2) break;
+    match += 1;
+  }
+  if (match === -1) {
+    if (!silent) state.pending += '$';
+    state.pos = start;
+    return true;
+  }
+  if (match - start === 0) {
+    if (!silent) state.pending += '$$';
+    state.pos = start + 1;
+    return true;
+  }
+  res = isValidDelim(state, match);
+  if (!res.canClose) {
+    if (!silent) state.pending += '$';
+    state.pos = start;
+    return true;
+  }
+  if (!silent) {
+    const token = state.push('math_inline', 'math', 0);
+    token.markup = '$';
+    token.content = state.src.slice(start, match);
+  }
+  state.pos = match + 1;
+  return true;
+}
+
+function block(state, start, end, silent) {
+  let lastLine;
+  let lastPos;
+  let found = false;
+  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;
+  let firstLine = state.src.slice(pos, max);
+  if (silent) return true;
+  if (firstLine.trim().slice(-2) === '$$') {
+    firstLine = firstLine.trim().slice(0, -2);
+    found = true;
+  }
+  let next = start;
+  while (!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) 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;
+  const token = state.push('math_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;
+}
+
+module.exports = function plugin(md) {
+  const options = { throwOnError: false, strict: false };
+  const katexInline = function (latex) {
+    options.displayMode = false;
+    try {
+      return katex.renderToString(latex, options);
+    } catch (error) {
+      if (options.throwOnError) logger.error(error);
+      return latex;
+    }
+  };
+  const inlineRenderer = function (tokens, idx) {
+    return katexInline(tokens[idx].content);
+  };
+  const katexBlock = function (latex) {
+    options.displayMode = true;
+    try {
+      return `<p>${katex.renderToString(latex, options)}</p>`;
+    } catch (error) {
+      if (options.throwOnError) logger.error(error);
+      return latex;
+    }
+  };
+
+  const blockRenderer = function (tokens, idx) {
+    return `${katexBlock(tokens[idx].content)}\n`;
+  };
+  md.inline.ruler.after('escape', 'math_inline', inline);
+  md.block.ruler.after('blockquote', 'math_block', block, {
+    alt: ['paragraph', 'reference', 'blockquote', 'list'],
+  });
+  md.renderer.rules.math_inline = inlineRenderer;
+  md.renderer.rules.math_block = blockRenderer;
+};

packages/ui-default/backendlib/markdown-it-media.js

@@ -0,0 +1,161 @@
+/* eslint-disable max-len */
+/* eslint-disable prefer-destructuring */
+/* eslint-disable no-restricted-properties */
+const ytRegex = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+function youtubeParser(url) {
+  const match = url.match(ytRegex);
+  return match && match[7].length === 11 ? match[7] : url;
+}
+const vimeoRegex = /https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|)(\d+)(?:$|\/|\?)/;
+function vimeoParser(url) {
+  const match = url.match(vimeoRegex);
+  return match && typeof match[3] === 'string' ? match[3] : url;
+}
+const vineRegex = /^http(?:s?):\/\/(?:www\.)?vine\.co\/v\/([a-zA-Z0-9]{1,13}).*/;
+function vineParser(url) {
+  const match = url.match(vineRegex);
+  return match && match[1].length === 11 ? match[1] : url;
+}
+const preziRegex = /^https:\/\/prezi.com\/(.[^/]+)/;
+function preziParser(url) {
+  const match = url.match(preziRegex);
+  return match ? match[1] : url;
+}
+// TODO: Write regex for staging and local servers.
+const mfrRegex = /^http(?:s?):\/\/(?:www\.)?mfr\.osf\.io\/render\?url=http(?:s?):\/\/osf\.io\/([a-zA-Z0-9]{1,5})\/\?action=download/;
+function mfrParser(url) {
+  const match = url.match(mfrRegex);
+  return match ? match[1] : url;
+}
+const EMBED_REGEX = /@\[([a-zA-Z].+)]\((.*?)[)]/im;
+function extractVideoParameters(url) {
+  const parameterMap = new Map();
+  const params = url.replace(/&/gi, '&').split(/[#?&]/);
+  if (params.length > 1) {
+    for (let i = 1; i < params.length; i += 1) {
+      const keyValue = params[i].split('=');
+      if (keyValue.length > 1) parameterMap.set(keyValue[0], keyValue[1]);
+    }
+  }
+  return parameterMap;
+}
+function videoUrl(service, videoID, url, options) {
+  switch (service) {
+  case 'youtube': {
+    const parameters = extractVideoParameters(url);
+    if (options.youtube.parameters) {
+      Object.keys(options.youtube.parameters).forEach((key) => {
+        parameters.set(key, options.youtube.parameters[key]);
+      });
+    }
+    const timeParameter = parameters.get('t');
+    if (timeParameter !== undefined) {
+      let startTime = 0;
+      const timeParts = timeParameter.match(/[0-9]+/g);
+      let j = 0;
+      while (timeParts.length > 0) {
+        startTime += Number(timeParts.pop()) * Math.pow(60, j);
+        j += 1;
+      }
+      parameters.set('start', startTime);
+      parameters.delete('t');
+    }
+    parameters.delete('v');
+    parameters.delete('feature');
+    parameters.delete('origin');
+    const parameterArray = Array.from(parameters, (p) => p.join('='));
+    const parameterPos = videoID.indexOf('?');
+    let finalUrl = 'https://www.youtube';
+    if (options.youtube.nocookie || url.indexOf('youtube-nocookie.com') > -1) finalUrl += '-nocookie';
+    finalUrl += `.com/embed/${parameterPos > -1 ? videoID.substr(0, parameterPos) : videoID}`;
+    if (parameterArray.length > 0) finalUrl += `?${parameterArray.join('&')}`;
+    return finalUrl;
+  }
+  case 'vimeo':
+    return `https://player.vimeo.com/video/${videoID}`;
+  case 'vine':
+    return `https://vine.co/v/${videoID}/embed/${options.vine.embed}`;
+  case 'prezi':
+    return `https://prezi.com/embed/${videoID
+    }/?bgcolor=ffffff&amp;lock_to_path=0&amp;autoplay=0&amp;autohide_ctrls=0&amp;`
+        + 'landing_data=bHVZZmNaNDBIWnNjdEVENDRhZDFNZGNIUE43MHdLNWpsdFJLb2ZHanI5N1lQVHkxSHFxazZ0UUNCRHloSXZROHh3PT0&amp;'
+        + 'landing_sign=1kD6c0N6aYpMUS0wxnQjxzSqZlEB8qNFdxtdjYhwSuI';
+  case 'osf':
+    return `https://mfr.osf.io/render?url=https://osf.io/${videoID}/?action=download`;
+  default:
+    return service;
+  }
+}
+
+module.exports = function videoPlugin(md) {
+  const options = {
+    url: videoUrl,
+    youtube: { width: 640, height: 390, nocookie: false },
+    vimeo: { width: 500, height: 281 },
+    vine: { width: 600, height: 600, embed: 'simple' },
+    prezi: { width: 550, height: 400 },
+    osf: { width: '100%', height: '100%' },
+    pdf: videoUrl,
+  };
+  md.renderer.rules.video = function tokenizeReturn(tokens, idx) {
+    const videoID = md.utils.escapeHtml(tokens[idx].videoID);
+    const service = md.utils.escapeHtml(tokens[idx].service).toLowerCase();
+    const checkUrl = /http(?:s?):\/\/(?:www\.)?[a-zA-Z0-9-:.]{1,}\/render(?:\/)?[a-zA-Z0-9.&;?=:%]{1,}url=http(?:s?):\/\/[a-zA-Z0-9 -:.]{1,}\/[a-zA-Z0-9]{1,5}\/\?[a-zA-Z0-9.=:%]{1,}/;
+    let num;
+    if (service === 'osf' && videoID) {
+      num = Math.random() * 0x10000;
+      if (videoID.match(checkUrl)) {
+        return `<div id="${num}" class="mfr mfr-file"></div><script>`
+          + `$(document).ready(function () {new mfr.Render("${num}", "${videoID}");`
+          + '    }); </script>';
+      }
+      return `<div id="${num}" class="mfr mfr-file"></div><script>`
+        + `$(document).ready(function () {new mfr.Render("${num}", "https://mfr.osf.io/`
+        + `render?url=https://osf.io/${videoID}/?action=download%26mode=render");`
+        + '    }); </script>';
+    }
+    if (service === 'pdf') return `<iframe src="${videoID}?noDisposition=on#view=fit" width="100%" style="min-height: 100vh;border: none;"></iframe>`;
+    return videoID === '' ? ''
+      : `<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item ${service}-player" type="text/html" width="${options[service].width
+      }" height="${options[service].height
+      }" src="${options.url(service, videoID, tokens[idx].url, options)
+      }" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>`;
+  };
+  md.inline.ruler.before('emphasis', 'video', (state, silent) => {
+    let token;
+    let videoID;
+    const theState = state;
+    const oldPos = state.pos;
+    if (state.src.charCodeAt(oldPos) !== 0x40
+      ||/* @ */ state.src.charCodeAt(oldPos + 1) !== 0x5B/* [ */) {
+      return false;
+    }
+    const match = EMBED_REGEX.exec(state.src.slice(state.pos, state.src.length));
+    if (!match || match.length < 3) return false;
+    const service = match[1];
+    videoID = match[2];
+    const serviceLower = service.toLowerCase();
+    if (serviceLower === 'youtube') videoID = youtubeParser(videoID);
+    else if (serviceLower === 'vimeo') videoID = vimeoParser(videoID);
+    else if (serviceLower === 'vine') videoID = vineParser(videoID);
+    else if (serviceLower === 'prezi') videoID = preziParser(videoID);
+    else if (serviceLower === 'osf') videoID = mfrParser(videoID);
+    else if (!options[serviceLower]) return false;
+    if (videoID === ')') videoID = '';
+    const serviceStart = oldPos + 2;
+    const serviceEnd = md.helpers.parseLinkLabel(state, oldPos + 1, false);
+    if (!silent) {
+      theState.pos = serviceStart;
+      theState.service = theState.src.slice(serviceStart, serviceEnd);
+      const newState = new theState.md.inline.State(service, theState.md, theState.env, []);
+      newState.md.inline.tokenize(newState);
+      token = theState.push('video', '');
+      token.videoID = videoID;
+      token.service = service;
+      token.url = match[2];
+      token.level = theState.level;
+    }
+    theState.pos += theState.src.indexOf(')', theState.pos);
+    return true;
+  });
+};

packages/ui-default/backendlib/markdown.js

@@ -0,0 +1,73 @@
+const MarkdownIt = require('markdown-it');
+const Prism = require('prismjs');
+
+// For math: $a\times b\eq 10$
+// Specific image size: ![image](image.png =100x100)
+const Imsize = require('markdown-it-imsize');
+/* Footnote support.
+Here is a footnote reference,[^1] and another.[^longnote]
+
+[^1]: Here is the footnote.
+
+[^longnote]: Here's one with multiple blocks.
+
+    Subsequent paragraphs are indented to show that they
+belong to the previous footnote.
+*/
+const Footnote = require('markdown-it-footnote');
+// ==Highlight==
+const Mark = require('markdown-it-mark');
+const TOC = require('markdown-it-table-of-contents');
+const Anchor = require('markdown-it-anchor');
+// @[url](videourl)
+// @[youtube](https://youtube.com/watch?v=xxx)
+// @[pdf](https://foo.com/bar.pdf)
+const Media = require('./markdown-it-media');
+const Katex = require('./markdown-it-katex');
+
+require('prismjs/components/index');
+
+class Markdown extends MarkdownIt {
+  constructor() {
+    super({
+      linkify: true,
+      highlight(str, lang) {
+        if (lang && Prism.languages[lang]) {
+          try {
+            return Prism.highlight(str, Prism.languages[lang], lang);
+          } catch (__) { } // eslint-disable-line no-empty
+        }
+        return '';
+      },
+    });
+    this.linkify.tlds('.py', false);
+    this.use(Media);
+    this.use(Imsize);
+    this.use(Footnote);
+    this.use(Mark);
+    this.use(Anchor);
+    this.use(TOC);
+    this.use(Katex);
+  }
+}
+
+const md = new Markdown();
+
+function plugin(func, ...args) {
+  md.use(func, ...args);
+}
+
+function render(text, html = false) {
+  md.set({ html: !!html });
+  return md.render(text);
+}
+
+function renderInline(text, html = false) {
+  md.set({ html: !!html });
+  return md.renderInline(text);
+}
+
+// eslint-disable-next-line no-multi-assign
+global.Hydro.lib.markdown = module.exports = {
+  md, plugin, render, renderInline,
+};

packages/ui-default/backendlib/template.js

@@ -0,0 +1,206 @@
+const fs = require('fs');
+const path = require('path');
+const yaml = require('js-yaml');
+const serialize = require('serialize-javascript');
+const nunjucks = require('nunjucks');
+const { filter } = require('lodash');
+const { argv } = require('yargs');
+const Xss = require('xss');
+const markdown = require('./markdown');
+
+const { misc, buildContent } = global.Hydro.lib;
+
+const xss = new Xss.FilterXSS({
+  whiteList: {
+    a: ['target', 'href', 'title'],
+    abbr: ['title'],
+    address: [],
+    area: ['shape', 'coords', 'href', 'alt'],
+    article: [],
+    aside: [],
+    audio: ['autoplay', 'controls', 'loop', 'preload', 'src'],
+    b: [],
+    bdi: ['dir'],
+    bdo: ['dir'],
+    big: [],
+    blockquote: ['cite'],
+    br: [],
+    caption: [],
+    center: [],
+    cite: [],
+    code: [],
+    col: ['align', 'valign', 'span', 'width'],
+    colgroup: ['align', 'valign', 'span', 'width'],
+    dd: [],
+    del: ['datetime'],
+    details: ['open'],
+    div: [],
+    dl: [],
+    dt: [],
+    em: [],
+    font: ['color', 'size', 'face'],
+    h1: [],
+    h2: [],
+    h3: [],
+    h4: [],
+    h5: [],
+    h6: [],
+    header: [],
+    hr: [],
+    i: [],
+    img: ['src', 'alt', 'title', 'width', 'height'],
+    ins: ['datetime'],
+    li: [],
+    mark: [],
+    ol: [],
+    p: [],
+    pre: [],
+    s: [],
+    section: [],
+    small: [],
+    span: ['class'],
+    sub: [],
+    sup: [],
+    strong: [],
+    table: ['width', 'border', 'align', 'valign'],
+    tbody: ['align', 'valign'],
+    td: ['width', 'rowspan', 'colspan', 'align', 'valign'],
+    tfoot: ['align', 'valign'],
+    th: ['width', 'rowspan', 'colspan', 'align', 'valign'],
+    thead: ['align', 'valign'],
+    tr: ['rowspan', 'align', 'valign'],
+    tt: [],
+    u: [],
+    ul: [],
+    video: ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width'],
+  },
+});
+
+class Loader extends nunjucks.Loader {
+  // eslint-disable-next-line class-methods-use-this
+  getSource(name) {
+    if (!argv.template) {
+      if (!global.Hydro.ui.template[name]) throw new Error(`Cannot get template ${name}`);
+      return {
+        src: global.Hydro.ui.template[name],
+        path: name,
+        noCache: false,
+      };
+    }
+    let fullpath = null;
+    const p = path.resolve(process.cwd(), argv.template, name);
+    if (fs.existsSync(p)) fullpath = p;
+    if (!fullpath) throw new Error(`Cannot get template ${name}`);
+    return {
+      src: fs.readFileSync(fullpath, 'utf-8').toString(),
+      path: fullpath,
+      noCache: true,
+    };
+  }
+}
+
+class Nunjucks extends nunjucks.Environment {
+  constructor() {
+    super(new Loader(), { autoescape: true, trimBlocks: true });
+    this.addFilter('json', (self) => JSON.stringify(self));
+    this.addFilter('parseYaml', (self) => yaml.load(self));
+    this.addFilter('dumpYaml', (self) => yaml.dump(self));
+    this.addFilter('xss', (self) => xss.process(self));
+    this.addFilter('serialize', (self, ignoreFunction = true) => serialize(self, { ignoreFunction }));
+    this.addFilter('assign', (self, data) => Object.assign(self, data));
+    this.addFilter('markdown', (self, html = false) => markdown.render(self, html));
+    this.addFilter('markdownInline', (self, html = false) => markdown.renderInline(self, html));
+    this.addFilter('ansi', (self) => misc.ansiToHtml(self));
+    this.addFilter('base64_encode', (s) => Buffer.from(s).toString('base64'));
+    this.addFilter('base64_decode', (s) => Buffer.from(s, 'base64').toString());
+    this.addFilter('bitand', (self, val) => self & val);
+    this.addFilter('toString', (self) => (typeof self === 'string' ? self : JSON.stringify(self)));
+    this.addFilter('content', (content, language, html) => {
+      let s = '';
+      try {
+        s = JSON.parse(content);
+      } catch {
+        s = content;
+      }
+      if (typeof s === 'object' && !(s instanceof Array)) {
+        if (s[language]) s = s[language];
+        else s = s[Object.keys(s)[0]];
+      }
+      if (s instanceof Array) s = buildContent(s, html ? 'html' : 'markdown', (str) => str.translate(language));
+      return html ? xss.process(s) : markdown.render(s);
+    });
+    this.addFilter('log', (self) => {
+      console.log(self);
+      return self;
+    });
+  }
+}
+nunjucks.runtime.memberLookup = function memberLookup(obj, val) {
+  if ((obj || {})._original) obj = obj._original;
+  if (obj === undefined || obj === null) return undefined;
+  if (typeof obj[val] === 'function') {
+    const fn = function () {
+      // eslint-disable-next-line
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        // eslint-disable-next-line prefer-rest-params
+        args[_key2] = arguments[_key2];
+      }
+      // eslint-disable-next-line block-scoped-var
+      return obj[val].call(obj, ...args);
+    };
+    fn._original = obj[val];
+    return fn;
+  }
+  return obj[val];
+};
+const env = new Nunjucks();
+env.addGlobal('static_url', (assetName) => {
+  const cdnPrefix = global.Hydro.model.system.get('server.cdn');
+  if (global.Hydro.ui.manifest[assetName]) {
+    return `${cdnPrefix}${global.Hydro.ui.manifest[assetName]}`;
+  }
+  return `${cdnPrefix}${assetName}`;
+});
+// eslint-disable-next-line no-eval
+env.addGlobal('eval', eval);
+env.addGlobal('typeof', (o) => typeof o);
+env.addGlobal('datetimeSpan', misc.datetimeSpan);
+env.addGlobal('paginate', misc.paginate);
+env.addGlobal('size', misc.size);
+env.addGlobal('gravatar', misc.gravatar);
+env.addGlobal('model', global.Hydro.model);
+env.addGlobal('ui', global.Hydro.ui);
+env.addGlobal('isIE', (str) => str.includes('MSIE') || str.includes('rv:11.0'));
+env.addGlobal('set', (obj, key, val) => {
+  if (val !== undefined) obj[key] = val;
+  else obj = { ...obj, key };
+  return '';
+});
+env.addGlobal('findSubModule', (prefix) => {
+  filter(Object.keys(global.Hydro.ui.template), (n) => n.startsWith(prefix));
+});
+
+async function render(name, state) {
+  // eslint-disable-next-line no-return-await
+  return await new Promise((resolve, reject) => {
+    env.render(name, {
+      page_name: name.split('.')[0],
+      ...state,
+      formatJudgeTexts: (texts) => texts.map((text) => {
+        if (typeof text === 'string') return text;
+        return state._(text.message).format(...text.params || []) + ((argv.debug && text.stack) ? `\n${text.stack}` : '');
+      }).join('\n'),
+      perm: global.Hydro.model.builtin.PERM,
+      PRIV: global.Hydro.model.builtin.PRIV,
+      STATUS: global.Hydro.model.builtin.STATUS,
+      UiContext: state.handler.UiContext,
+    }, (err, res) => {
+      if (err) reject(err);
+      else resolve(res);
+    });
+  });
+}
+
+module.exports = render;
+
+global.Hydro.lib.template = { render };