artalk 2.7.0 → 2.7.2

package/src/lib/marked.ts

@@ -1,72 +0,0 @@
-import { marked as libMarked, MarkedOptions } from 'marked'
-
-import { sanitize } from './sanitizer'
-import { renderCode } from './highlight'
-import { getRenderer } from './marked-renderer'
-
-type Replacer = (raw: string) => string
-export type TMarked = typeof libMarked
-
-let instance: (typeof libMarked)|undefined
-let replacers: Replacer[] = []
-
-const markedOptions: MarkedOptions = {
-  pedantic: false,
-  gfm: true,
-  breaks: true,
-  smartLists: true,
-  smartypants: true,
-  xhtml: false,
-  sanitize: false,
-  silent: true,
-}
-
-/** Get Marked instance */
-export function getInstance() {
-  return instance
-}
-
-export function setReplacers(arr: Replacer[]) {
-  replacers = arr
-}
-
-/** 初始化 marked */
-export function initMarked() {
-  try { if (!libMarked.name) return } catch { return }
-
-  // @see https://github.com/markedjs/marked/blob/4afb228d956a415624c4e5554bb8f25d047676fe/src/Tokenizer.js#L329
-  libMarked.setOptions({
-    renderer: getRenderer(),
-    ...markedOptions
-  })
-
-  instance = libMarked
-}
-
-/** 解析 markdown */
-export default function marked(src: string): string {
-  let markedContent = getInstance()?.parse(src)
-  if (!markedContent) { // 无 Markdown 模式简单处理
-    markedContent = simpleMarked(src)
-  }
-
-  let dest = sanitize(markedContent)
-
-  // 内容替换器
-  replacers.forEach((replacer) => {
-    if (typeof replacer === 'function')
-      dest = replacer(dest)
-  })
-
-  return dest
-}
-
-function simpleMarked(src: string) {
-  return src
-    // .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-    .replace(/```\s*([^]+?.*?[^]+?[^]+?)```/g, (_, code) => `<pre><code>${renderCode(code)}</code></pre>`)
-    // .replace(/`([^`]+?)`/g, '<code>$1</code>')
-    .replace(/!\[(.*?)\]\((.*?)\)/g, (_, alt, imgSrc) => `<img src="${imgSrc}" alt="${alt}" />`)
-    .replace(/\[(.*?)\]\((.*?)\)/g, (_, text, link) => `<a href="${link}" target="_blank">${text}</a>`)
-    .replace(/\n/g, '<br>')
-}

package/src/lib/sanitizer.ts

@@ -1,57 +0,0 @@
-import insane from 'insane'
-
-const insaneOptions = {
-  allowedClasses: {},
-  // @refer CVE-2018-8495
-  // @link https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2018-8495
-  // @link https://leucosite.com/Microsoft-Edge-RCE/
-  // @link https://medium.com/@knownsec404team/analysis-of-the-security-issues-of-url-scheme-in-pc-from-cve-2018-8495-934478a36756
-  allowedSchemes: [
-    'http', 'https', 'mailto',
-    'data' // for support base64 encoded image (安全性有待考虑)
-  ],
-  allowedTags: [
-    'a', 'abbr', 'article', 'b', 'blockquote', 'br', 'caption', 'code', 'del', 'details', 'div', 'em',
-    'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'ins', 'kbd', 'li', 'main', 'mark',
-    'ol', 'p', 'pre', 'section', 'span', 'strike', 'strong', 'sub', 'summary', 'sup', 'table',
-    'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'
-  ],
-  allowedAttributes: {
-    '*': ['title', 'accesskey'],
-    a: ['href', 'name', 'target', 'aria-label', 'rel'],
-    img: ['src', 'alt', 'title', 'atk-emoticon', 'aria-label'],
-    // for code highlight
-    code: ['class'],
-    span: ['class', 'style'],
-  },
-  filter: node => {
-    // allow hljs style
-    const allowed = [
-      [ 'code', /^hljs\W+language-(.*)$/ ],
-      [ 'span', /^(hljs-.*)$/ ]
-    ]
-    allowed.forEach(([ tag, reg ]) => {
-      if (
-        node.tag === tag
-        && !!node.attrs.class
-        && !(reg as RegExp).test(node.attrs.class)
-      ) {
-        delete node.attrs.class
-      }
-    })
-
-    // allow <span> set color sty
-    if (node.tag === 'span' && !!node.attrs.style
-        && !/^color:(\W+)?#[0-9a-f]{3,6};?$/i.test(node.attrs.style)) {
-      delete node.attrs.style
-    }
-
-    return true
-  }
-}
-
-export function sanitize(content: string): string {
-  // @link https://github.com/markedjs/marked/discussions/1232
-  // @link https://gist.github.com/lionel-rowe/bb384465ba4e4c81a9c8dada84167225
-  return insane(content, insaneOptions)
-}

package/src/lib/ui.ts

@@ -1,193 +0,0 @@
-import type { NotifyLevel } from '~/types'
-import * as Utils from './utils'
-
-/** 显示加载 */
-export function showLoading(parentElem: HTMLElement, conf?: { transparentBg?: boolean }) {
-  // Use :scope https://developer.mozilla.org/en-US/docs/Web/CSS/:scope
-  let $loading = parentElem.querySelector<HTMLElement>(':scope > .atk-loading')
-  if (!$loading) {
-    $loading = Utils.createElement(
-    `<div class="atk-loading atk-fade-in" style="display: none;">
-      <div class="atk-loading-spinner">
-        <svg viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle></svg>
-      </div>
-    </div>`)
-    if (conf?.transparentBg) $loading.style.background = 'transparent'
-    parentElem.appendChild($loading)
-  }
-  $loading.style.display = ''
-
-  // spinner 延迟显示，若加载等待时间太短，没必要显示（闪一下即可）
-  const $spinner = $loading.querySelector<HTMLElement>('.atk-loading-spinner')
-  if ($spinner) {
-    $spinner.style.display = 'none'
-    window.setTimeout(() => {
-      $spinner.style.display = ''
-    }, 500)
-  }
-}
-
-/** 隐藏加载 */
-export function hideLoading(parentElem: HTMLElement) {
-  const $loading = parentElem.querySelector<HTMLElement>(':scope > .atk-loading')
-  if ($loading) $loading.style.display = 'none'
-}
-
-/** 元素加载动画 */
-export function setLoading(val: boolean, parentElem: HTMLElement) {
-  if (val) showLoading(parentElem)
-  else hideLoading(parentElem)
-}
-
-/** 元素是否用户可见 */
-export function isVisible(el: HTMLElement, viewport: HTMLElement = document.documentElement) {
-  const viewportHeight = viewport.clientHeight
-
-  const docViewTop = viewport.scrollTop
-  const docViewBottom = docViewTop + viewportHeight
-
-  const rect = el.getBoundingClientRect()
-  const elemTop = rect.top + docViewTop
-  const elemBottom = elemTop + rect.height
-
-  return (elemBottom <= docViewBottom) //&& (elemTop >= docViewTop) 注释因为假如 el 比 viewport 还高就会失效
-}
-
-/** 滚动到元素中心 */
-export function scrollIntoView(elem: HTMLElement, enableAnim: boolean = true, relativeTo?: HTMLElement) {
-  let top: number
-
-  if (relativeTo) {
-    const containerRect = relativeTo.getBoundingClientRect()
-    const elementRect = elem.getBoundingClientRect()
-    top = elementRect.top - containerRect.top + relativeTo.scrollTop
-    top += Utils.getHeight(relativeTo) / 2 - Utils.getHeight(elem) / 2
-  } else {
-    const rect = elem.getBoundingClientRect()
-    const elemTop = rect.top + window.scrollY
-    top = elemTop - (window.innerHeight / 2 - rect.height / 2)
-  }
-
-  const scrollOptions: ScrollToOptions = {
-    top, left: 0,
-    // behavior: enableAnim ? 'smooth' : 'instant',
-    behavior: 'instant'
-  }
-
-  if (relativeTo) relativeTo.scroll(scrollOptions)
-  else window.scroll(scrollOptions)
-}
-
-/** 显示消息 */
-export function showNotify(
-  wrapElem: HTMLElement,
-  msg: string,
-  type: NotifyLevel,
-) {
-  const colors = { s: '#57d59f', e: '#ff6f6c', w: '#ffc721', i: '#2ebcfc' }
-  const timeout = 3000 // 持续显示时间 ms
-
-  const notifyElem = Utils.createElement(
-    `<div class="atk-notify atk-fade-in" style="background-color: ${colors[type]}"><span class="atk-notify-content"></span></div>`
-  )
-  const notifyContentEl = notifyElem.querySelector<HTMLElement>('.atk-notify-content')!
-  notifyContentEl.innerHTML = Utils.htmlEncode(msg).replace('\n', '<br/>')
-
-  wrapElem.appendChild(notifyElem)
-
-  const notifyRemove = () => {
-    notifyElem.classList.add('atk-fade-out')
-    setTimeout(() => {
-      notifyElem.remove()
-    }, 200)
-  }
-
-  let timeoutFn: number
-  if (timeout > 0) {
-    timeoutFn = window.setTimeout(() => {
-      notifyRemove()
-    }, timeout)
-  }
-
-  notifyElem.addEventListener('click', () => {
-    notifyRemove()
-    window.clearTimeout(timeoutFn)
-  })
-}
-
-/** fade 动画 */
-export function playFadeAnim(
-  elem: HTMLElement,
-  after?: () => void,
-  type: 'in' | 'out' = 'in'
-) {
-  elem.classList.add(`atk-fade-${type}`)
-  // 动画结束清除 class
-  const onAnimEnded = () => {
-    elem.classList.remove(`atk-fade-${type}`)
-    elem.removeEventListener('animationend', onAnimEnded)
-    if (after) after()
-  }
-  elem.addEventListener('animationend', onAnimEnded)
-}
-
-/** 渐入动画 */
-export function playFadeInAnim(elem: HTMLElement, after?: () => void) {
-  playFadeAnim(elem, after, 'in')
-}
-
-/** 渐出动画 */
-export function playFadeOutAnim(elem: HTMLElement, after?: () => void) {
-  playFadeAnim(elem, after, 'out')
-}
-
-/** 设置全局错误 */
-export function setError(parentElem: HTMLElement, html: string | HTMLElement | null, title: string = '<span class="atk-error-title">Artalk Error</span>') {
-  let elem = parentElem.querySelector<HTMLElement>('.atk-error-layer')
-  if (html === null) {
-    if (elem !== null) elem.remove()
-    return
-  }
-  if (!elem) {
-    elem = Utils.createElement(
-      `<div class="atk-error-layer">${title}<span class="atk-error-text"></span></div>`
-    )
-    parentElem.appendChild(elem)
-  }
-
-  const errorTextEl = elem.querySelector<HTMLElement>('.atk-error-text')!
-  errorTextEl.innerHTML = ''
-  if (html === null) return
-
-  if (html instanceof HTMLElement) {
-    errorTextEl.appendChild(html)
-  } else {
-    errorTextEl.innerText = html
-  }
-}
-
-export function getScrollBarWidth() {
-  const inner = document.createElement('p')
-  inner.style.width = '100%'
-  inner.style.height = '200px'
-
-  const outer = document.createElement('div')
-  outer.style.position = 'absolute'
-  outer.style.top = '0px'
-  outer.style.left = '0px'
-  outer.style.visibility = 'hidden'
-  outer.style.width = '200px'
-  outer.style.height = '150px'
-  outer.style.overflow = 'hidden'
-  outer.appendChild(inner)
-
-  document.body.appendChild(outer)
-  const w1 = inner.offsetWidth
-  outer.style.overflow = 'scroll'
-  let w2 = inner.offsetWidth
-  if (w1 === w2) w2 = outer.clientWidth
-
-  document.body.removeChild(outer)
-
-  return (w1 - w2)
-}

package/src/lib/user.ts

@@ -1,55 +0,0 @@
-import type { LocalUser } from '~/types'
-
-const LOCAL_USER_KEY = 'ArtalkUser'
-
-class User {
-  data: LocalUser
-  onUserChanged: ((user: LocalUser) => void) | null = null
-
-  constructor() {
-    // 从 localStorage 导入
-    const localUser = JSON.parse(window.localStorage.getItem(LOCAL_USER_KEY) || '{}')
-    this.data = {
-      nick: localUser.nick || '',
-      email: localUser.email || '',
-      link: localUser.link || '',
-      token: localUser.token || '',
-      isAdmin: localUser.isAdmin || false
-    }
-  }
-
-  /** 保存用户到 localStorage 中 */
-  update(obj: Partial<LocalUser> = {}) {
-    Object.entries(obj).forEach(([key, value]) => {
-      this.data[key] = value
-    })
-
-    window.localStorage.setItem(LOCAL_USER_KEY, JSON.stringify(this.data))
-    this.onUserChanged && this.onUserChanged(this.data)
-  }
-
-  public setOnUserChanged(fn: ((user: LocalUser) => void) | null) {
-    this.onUserChanged = fn
-  }
-
-  /**
-   * Logout
-   *
-   * @description Logout will clear login status, but not clear user data (nick, email, link)
-   */
-  logout() {
-    this.update({
-      token: '',
-      isAdmin: false
-    })
-  }
-
-  /** 是否已填写基本用户信息 */
-  checkHasBasicUserInfo() {
-    return !!this.data.nick && !!this.data.email
-  }
-}
-
-const UserInstance = new User()
-
-export default UserInstance

package/src/lib/utils.ts

@@ -1,236 +0,0 @@
-export function createElement<E extends HTMLElement = HTMLElement>(htmlStr: string = ''): E {
-  const div = document.createElement('div')
-  div.innerHTML = htmlStr.trim()
-  return (div.firstElementChild || div) as E
-}
-
-export function getHeight(el: HTMLElement) {
-  return parseFloat(getComputedStyle(el, null).height.replace('px', ''))
-}
-
-export function htmlEncode(str: string) {
-  const temp = document.createElement('div')
-  temp.innerText = str
-  const output = temp.innerHTML
-  return output
-}
-
-export function htmlDecode(str: string) {
-  const temp = document.createElement('div')
-  temp.innerHTML = str
-  const output = temp.innerText
-  return output
-}
-
-export function getQueryParam(name: string) {
-  const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);
-  return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
-}
-
-export function getOffset(el: HTMLElement, relativeTo?: HTMLElement) {
-  const getOffsetRecursive = (element: HTMLElement): { top: number, left: number } => {
-    const rect = element.getBoundingClientRect()
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
-    const scrollTop = window.pageYOffset || document.documentElement.scrollTop
-    return {
-      top: rect.top + scrollTop,
-      left: rect.left + scrollLeft
-    }
-  }
-
-  const elOffset = getOffsetRecursive(el)
-  if (!relativeTo) return elOffset
-
-  const relativeToOffset = getOffsetRecursive(relativeTo)
-
-  return {
-    top: elOffset.top - relativeToOffset.top,
-    left: elOffset.left - relativeToOffset.left
-  }
-}
-
-export function padWithZeros(vNumber: number, width: number) {
-  let numAsString = vNumber.toString()
-  while (numAsString.length < width) {
-    numAsString = `0${numAsString}`
-  }
-  return numAsString
-}
-
-export function dateFormat(date: Date) {
-  const vDay = padWithZeros(date.getDate(), 2)
-  const vMonth = padWithZeros(date.getMonth() + 1, 2)
-  const vYear = padWithZeros(date.getFullYear(), 2)
-  // var vHour = padWithZeros(date.getHours(), 2);
-  // var vMinute = padWithZeros(date.getMinutes(), 2);
-  // var vSecond = padWithZeros(date.getSeconds(), 2);
-  return `${vYear}-${vMonth}-${vDay}`
-}
-
-export function timeAgo(date: Date, $t: Function = (n: string) => n) {
-  try {
-    const oldTime = date.getTime()
-    const currTime = new Date().getTime()
-    const diffValue = currTime - oldTime
-
-    const days = Math.floor(diffValue / (24 * 3600 * 1000))
-    if (days === 0) {
-      // 计算相差小时数
-      const leave1 = diffValue % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
-      const hours = Math.floor(leave1 / (3600 * 1000))
-      if (hours === 0) {
-        // 计算相差分钟数
-        const leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
-        const minutes = Math.floor(leave2 / (60 * 1000))
-        if (minutes === 0) {
-          // 计算相差秒数
-          const leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
-          const seconds = Math.round(leave3 / 1000)
-          if (seconds < 10) return $t('now')
-          return `${seconds} ${$t('seconds')}`
-        }
-        return `${minutes} ${$t('minutes')}`
-      }
-      return `${hours} ${$t('hours')}`
-    }
-    if (days < 0) return $t('now')
-
-    if (days < 8) {
-      return `${days} ${$t('days')}`
-    }
-
-    return dateFormat(date)
-  } catch (error) {
-    console.error(error)
-    return ' - '
-  }
-}
-
-/** 所有图片加载完毕后执行 */
-export function onImagesLoaded($container: HTMLElement, event: Function) {
-  if (!$container) return
-  const images = $container.getElementsByTagName('img')
-  if (!images.length) return
-  let loaded = images.length
-  for (let i = 0; i < images.length; i++) {
-    if (images[i].complete) {
-      loaded--
-    } else {
-      // eslint-disable-next-line @typescript-eslint/no-loop-func
-      images[i].addEventListener('load', () => {
-        loaded--
-        if (loaded === 0) event()
-      })
-    }
-
-    if (loaded === 0) event()
-  }
-}
-
-export function getGravatarURL(opts: { params: string, mirror: string, emailMD5: string }) {
-  return `${opts.mirror.replace(/\/$/, '')}/${opts.emailMD5}?${opts.params.replace(/^\?/, '')}`
-}
-
-export function sleep(ms: number) {
-  return new Promise(resolve => { setTimeout(resolve, ms) });
-}
-
-/** 版本号比较（a < b :-1 | 0 | b < a :1） */
-export function versionCompare(a: string, b: string) {
-  const pa = a.split('.')
-  const pb = b.split('.')
-  for (let i = 0; i < 3; i++) {
-      const na = Number(pa[i])
-      const nb = Number(pb[i])
-      if (na > nb) return 1
-      if (nb > na) return -1
-      if (!Number.isNaN(na) && Number.isNaN(nb)) return 1
-      if (Number.isNaN(na) && !Number.isNaN(nb)) return -1
-  }
-  return 0
-}
-
-/** 获取修正后的 UserAgent */
-export async function getCorrectUserAgent() {
-  const uaRaw = navigator.userAgent
-  if (!(navigator as any).userAgentData || !(navigator as any).userAgentData.getHighEntropyValues) {
-    return uaRaw
-  }
-
-  // @link https://web.dev/migrate-to-ua-ch/
-  // @link https://web.dev/user-agent-client-hints/
-  const uaData = (navigator as any).userAgentData
-  let uaGot: any = null
-  try {
-    uaGot = await uaData.getHighEntropyValues(["platformVersion"])
-  } catch (err) { console.error(err); return uaRaw }
-  const majorPlatformVersion = Number(uaGot.platformVersion.split('.')[0])
-
-  if (uaData.platform === "Windows") {
-    if (majorPlatformVersion >= 13) { // @link https://docs.microsoft.com/en-us/microsoft-edge/web-platform/how-to-detect-win11
-      // @date 2022-4-29
-      // Win 11 样本："Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36"
-      return uaRaw.replace(/Windows NT 10.0/, 'Windows NT 11.0')
-    }
-  }
-  if (uaData.platform === "macOS") {
-    if (majorPlatformVersion >= 11) { // 11 => BigSur
-      // @date 2022-4-29
-      // (Intel Chip) macOS 12.3 样本："Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36"
-      // (Arm Chip) macOS 样本："Mozilla/5.0 (Macintosh; ARM Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15"
-      return uaRaw.replace(/(Mac OS X \d+_\d+_\d+|Mac OS X)/, `Mac OS X ${uaGot.platformVersion.replace(/\./g, '_')}`)
-    }
-  }
-
-  return uaRaw
-}
-
-/** 是否为完整的 URL */
-export function isValidURL(urlRaw: string) {
-  // @link https://www.rfc-editor.org/rfc/rfc3986
-  let url: URL
-  try {
-    url = new URL(urlRaw)
-  } catch (_) { return false }
-  return url.protocol === "http:" || url.protocol === "https:"
-}
-
-/** 获取基于 conf.server 的 URL */
-export function getURLBasedOnApi(opts: { base: string, path: string }) {
-  return getURLBasedOn(opts.base, opts.path)
-}
-
-/** 获取基于某个 baseURL 的 URL */
-export function getURLBasedOn(baseURL: string, path: string) {
-  return `${baseURL.replace(/\/$/, '')}/${path.replace(/^\//, '')}`
-}
-
-/**
- * Performs a deep merge of `source` into `target`.
- * Mutates `target` only but not its objects and arrays.
- *
- * @author inspired by [jhildenbiddle](https://stackoverflow.com/a/48218209).
- * @link https://gist.github.com/ahtcx/0cd94e62691f539160b32ecda18af3d6
- */
-export function mergeDeep(target: any, source: any) {
-  const isObject = (obj: any) => obj && typeof obj === 'object'
-
-  if (!isObject(target) || !isObject(source)) {
-    return source
-  }
-
-  Object.keys(source).forEach(key => {
-    const targetValue = target[key]
-    const sourceValue = source[key]
-
-    if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
-      target[key] = targetValue.concat(sourceValue)
-    } else if (isObject(targetValue) && isObject(sourceValue)) {
-      target[key] = mergeDeep({ ...targetValue}, sourceValue)
-    } else {
-      target[key] = sourceValue
-    }
-  })
-
-  return target
-}

package/src/list/comment.ts

@@ -1,20 +0,0 @@
-import type { ContextApi, CommentData } from '~/types'
-import Comment from '../comment/comment'
-
-export function createComment(ctx: ContextApi, comment: CommentData, ctxComments: CommentData[]): Comment {
-  const instance = new Comment(ctx, comment, {
-    isFlatMode: ctx.getData().getListLastFetch()?.params.flatMode!,
-    afterRender: () => {
-      ctx.trigger('comment-rendered', instance)
-    },
-    onDelete: (c: Comment) => {
-      ctx.getData().deleteComment(c.getID())
-    },
-    replyTo: (comment.rid ? ctxComments.find(c => c.id === comment.rid) : undefined)
-  })
-
-  // 渲染元素
-  instance.render()
-
-  return instance
-}