artalk 2.7.0 → 2.7.2

package/src/plugins/list/loading.ts

@@ -1,17 +0,0 @@
-import type { ArtalkPlugin } from '~/types'
-import * as Ui from '@/lib/ui'
-
-export const Loading: ArtalkPlugin = (ctx) => {
-  ctx.on('list-fetch', (p) => {
-    const list = ctx.get('list')
-
-    if (p.offset === 0) // only show loading when fetch first page
-      Ui.setLoading(true, list.$el)
-    // else if not first page, show loading in paginator (code not there)
-  })
-
-  ctx.on('list-fetched', () => {
-    const list = ctx.get('list')
-    Ui.setLoading(false, list.$el)
-  })
-}

package/src/plugins/list/no-comment.ts

@@ -1,25 +0,0 @@
-import type { ArtalkPlugin } from '~/types'
-import * as Utils from '@/lib/utils'
-import { sanitize } from '@/lib/sanitizer'
-
-export const NoComment: ArtalkPlugin = (ctx) => {
-  ctx.on('list-loaded', (comments) => {
-    const list = ctx.get('list')!
-
-    // 无评论
-    const isNoComment = comments.length <= 0
-    let $noComment = list.getCommentsWrapEl().querySelector<HTMLElement>('.atk-list-no-comment')
-
-    if (isNoComment) {
-      if (!$noComment) {
-        $noComment = Utils.createElement('<div class="atk-list-no-comment"></div>')
-
-        // sanitize before set innerHTML
-        $noComment.innerHTML = sanitize(list.ctx.conf.noComment || list.ctx.$t('noComment'))
-        list.getCommentsWrapEl().appendChild($noComment)
-      }
-    } else {
-      $noComment?.remove()
-    }
-  })
-}

package/src/plugins/list/reach-bottom.ts

@@ -1,46 +0,0 @@
-import type { ArtalkPlugin } from '~/types'
-
-export const ReachBottom: ArtalkPlugin = (ctx) => {
-  const scrollEvtAt = document // TODO support ref ctx.conf
-  let observer: IntersectionObserver|null = null
-
-  const setupObserver = ($target: HTMLElement) => {
-    // eslint-disable-next-line compat/compat
-    observer = new IntersectionObserver(([entries]) => {
-      if (entries.isIntersecting) {
-        clearObserver()
-        ctx.trigger('list-reach-bottom')
-      }
-    }, {
-      root: scrollEvtAt
-    })
-    observer.observe($target)
-  }
-
-  const clearObserver = () => {
-    observer?.disconnect()
-    observer = null
-  }
-
-  ctx.on('list-loaded', () => {
-    clearObserver()
-
-    const list = ctx.get('list')
-
-    // use IntersectionObserver to detect reach bottom
-    const $target = list.getCommentsWrapEl().querySelector<HTMLElement>('.atk-comment-wrap:nth-last-child(3)')
-    if (!$target) return
-
-    // check IntersectionObserver support
-    if (!('IntersectionObserver' in window)) {
-      console.warn('IntersectionObserver api not supported')
-      return
-    }
-
-    setupObserver($target)
-  })
-
-  ctx.on('destroy', () => {
-    clearObserver()
-  })
-}

package/src/plugins/list/sidebar-btn.ts

@@ -1,39 +0,0 @@
-import type { ArtalkPlugin } from '~/types'
-import $t from '@/i18n'
-
-export const SidebarBtn: ArtalkPlugin = (ctx) => {
-  let $openSidebarBtn: HTMLElement|null = null
-
-  const syncByUser = () => {
-    if (!$openSidebarBtn) return
-    const user = ctx.get('user').data
-
-    // 已输入个人信息
-    if (!!user.nick && !!user.email) {
-      $openSidebarBtn.classList.remove('atk-hide')
-
-      // update button text (normal user or admin)
-      const $btnText = $openSidebarBtn.querySelector<HTMLElement>('.atk-text')
-      if ($btnText) $btnText.innerText = (!user.isAdmin) ? $t('msgCenter') : $t('ctrlCenter')
-    } else {
-      $openSidebarBtn.classList.add('atk-hide')
-    }
-  }
-
-  ctx.on('conf-loaded', () => {
-    const list = ctx.get('list')
-
-    $openSidebarBtn = list.$el.querySelector<HTMLElement>('[data-action="open-sidebar"]')
-    if (!$openSidebarBtn) return
-
-    $openSidebarBtn.onclick = () => { // use onclick rather than addEventListener to prevent duplicate event
-      ctx.showSidebar()
-    }
-
-    syncByUser()
-  })
-
-  ctx.on('user-changed', (user) => {
-    syncByUser()
-  })
-}

package/src/plugins/list/time-ticking.ts

@@ -1,22 +0,0 @@
-import type { ArtalkPlugin } from '~/types'
-import * as Utils from '@/lib/utils'
-
-/** 评论时间自动更新 */
-export const TimeTicking: ArtalkPlugin = (ctx) => {
-  let timer: number|null = null
-
-  ctx.on('inited', () => {
-    timer = window.setInterval(() => {
-      const list = ctx.get('list')
-
-      list.$el.querySelectorAll<HTMLElement>('[data-atk-comment-date]').forEach(el => {
-        const date = el.getAttribute('data-atk-comment-date')
-        el.innerText = Utils.timeAgo(new Date(Number(date)), ctx.$t)
-      })
-    }, 30 * 1000) // 30s 更新一次
-  })
-
-  ctx.on('destroy', () => {
-    timer && window.clearInterval(timer)
-  })
-}

package/src/plugins/list/unread-badge.ts

@@ -1,26 +0,0 @@
-import type { ArtalkPlugin } from '~/types'
-
-export const UnreadBadge: ArtalkPlugin = (ctx) => {
-  let $unreadBadge: HTMLElement|null = null
-
-  const showUnreadBadge = (count: number) => {
-    if (!$unreadBadge) return
-
-    if (count > 0) {
-      $unreadBadge.innerText = `${Number(count || 0)}`
-      $unreadBadge.style.display = 'block'
-    } else {
-      $unreadBadge.style.display = 'none'
-    }
-  }
-
-  ctx.on('conf-loaded', () => {
-    const list = ctx.get('list')
-
-    $unreadBadge = list.$el.querySelector<HTMLElement>('.atk-unread-badge')
-  })
-
-  ctx.on('unreads-updated', (unreads) => {
-    showUnreadBadge(unreads.length || 0)
-  })
-}

package/src/plugins/list/unread.ts

@@ -1,38 +0,0 @@
-import type { ArtalkPlugin } from '~/types'
-import * as Utils from '@/lib/utils'
-
-export const Unread: ArtalkPlugin = (ctx) => {
-  ctx.on('comment-rendered', (comment) => {
-    // comment unread highlight
-    if (ctx.conf.listUnreadHighlight === true) {
-      const unreads = ctx.getData().getUnreads()
-      const notify = unreads.find(o => o.comment_id === comment.getID())
-
-      if (notify) {
-        // if comment contains in unread list
-        comment.getRender().setUnread(true)
-        comment.getRender().setOpenAction(() => {
-          window.open(notify.read_link)
-
-          // remove notify which has been read
-          ctx.getData().updateUnreads(unreads.filter(o => o.comment_id !== comment.getID()))
-        })
-      } else {
-        // comment not in unread list
-        comment.getRender().setUnread(false)
-      }
-    }
-  })
-
-  ctx.on('list-goto', (commentID) => {
-    const notifyKey = Utils.getQueryParam('atk_notify_key')
-    if (notifyKey) {
-      // mark as read
-      ctx.getApi().user.markRead(commentID, notifyKey)
-        .then(() => {
-          // remove from unread list
-          ctx.getData().updateUnreads(ctx.getData().getUnreads().filter(o => o.comment_id !== commentID))
-        })
-    }
-  })
-}

package/src/plugins/list/with-editor.ts

@@ -1,59 +0,0 @@
-import type { ContextApi, ArtalkPlugin, PageData } from '~/types'
-import $t from '@/i18n'
-
-export const WithEditor: ArtalkPlugin = (ctx) => {
-  let $closeCommentBtn: HTMLElement|undefined
-
-  // on Artalk inited
-  // (after all components had mounted)
-  ctx.on('inited', () => {
-    const list = ctx.get('list')
-
-    $closeCommentBtn = list.$el.querySelector<HTMLElement>('[data-action="admin-close-comment"]')!
-
-    // bind editor close button click event
-    $closeCommentBtn.addEventListener('click', () => {
-      const page = ctx.getData().getPage()
-      if (!page) throw new Error('Page data not found')
-
-      page.admin_only = !page.admin_only
-      adminPageEditSave(ctx, page)
-    })
-  })
-
-  // on comment list loaded (it will include page data update)
-  ctx.on('page-loaded', (page) => {
-    const editor = ctx.get('editor')
-
-    // if page comment is closed
-    if (page?.admin_only === true) {
-      // then close editor
-      editor.getPlugs()?.getEvents().trigger('editor-close')
-      $closeCommentBtn && ($closeCommentBtn.innerText = $t('openComment'))
-    } else {
-      // the open editor
-      editor.getPlugs()?.getEvents().trigger('editor-open')
-      $closeCommentBtn && ($closeCommentBtn.innerText = $t('closeComment'))
-    }
-  })
-
-  ctx.on('list-loaded', (comments) => {
-    // 防止评论框被吞
-    ctx.editorResetState()
-  })
-}
-
-/** 管理员设置页面信息 */
-function adminPageEditSave(ctx: ContextApi, page: PageData) {
-  ctx.editorShowLoading()
-  ctx.getApi().page.pageEdit(page)
-    .then((respPage) => {
-      ctx.getData().updatePage(respPage)
-    })
-    .catch(err => {
-      ctx.editorShowNotify(`${$t('editFail')}: ${err.msg || String(err)}`, 'e')
-    })
-    .finally(() => {
-      ctx.editorHideLoading()
-    })
-}

package/src/plugins/markdown.ts

@@ -1,10 +0,0 @@
-import type { ArtalkPlugin } from '~/types'
-import * as marked from '@/lib/marked'
-
-export const Markdown: ArtalkPlugin = (ctx) => {
-  marked.initMarked()
-
-  ctx.on('conf-loaded', (conf) => {
-    if (conf.markedReplacers) marked.setReplacers(conf.markedReplacers)
-  })
-}

package/src/plugins/stat.ts

@@ -1,79 +0,0 @@
-import type { ContextApi, ArtalkPlugin } from '~/types'
-import Api from '../api'
-
-export interface CountOptions {
-  getApi(): Api
-
-  pageKey: string
-  countEl: string
-  pvEl: string
-
-  /** 是否增加当前页面 PV 数 */
-  pvAdd?: boolean
-}
-
-export const PvCountWidget: ArtalkPlugin = (ctx: ContextApi) => {
-  ctx.on('conf-loaded', () => {
-    initCountWidget({
-      getApi: () => ctx.getApi(),
-      pageKey: ctx.conf.pageKey,
-      countEl: ctx.conf.countEl,
-      pvEl: ctx.conf.pvEl,
-      pvAdd: true,
-    })
-  })
-}
-
-/** 初始化评论数和 PV 数量展示元素 */
-export async function initCountWidget(opt: CountOptions) {
-  // 评论数
-  if (opt.countEl && document.querySelector(opt.countEl)) {
-    refreshStatCount(opt, { query: 'page_comment', numEl: opt.countEl })
-  }
-
-  // PV
-  const curtPagePvNum = opt.pvAdd ? await opt.getApi().page.pv() : NaN
-  if (opt.pvEl && document.querySelector(opt.pvEl)) {
-    refreshStatCount(opt, {
-      query: 'page_pv',
-      numEl: opt.pvEl,
-      data: { [opt.pageKey]: curtPagePvNum },
-    })
-  }
-}
-
-type CountData = { [pageKey: string]: number }
-
-async function refreshStatCount(
-  opt: CountOptions,
-  args: {
-    query: 'page_pv' | 'page_comment'
-    numEl: string
-    data?: CountData
-  }
-) {
-  let data: CountData = args.data || {}
-
-  // Get page keys from DOM
-  let pageKeys = Array.from(document.querySelectorAll(args.numEl))
-    .map((e) => e.getAttribute('data-page-key') || opt.pageKey)
-    .filter((e) => Number.isNaN(data[e])) // filter out keys that already have data
-
-  pageKeys = [...new Set(pageKeys)] // deduplicate
-
-  // Fetch count data from server
-  if (pageKeys.length > 0) {
-    const res = await opt.getApi().page.stat(args.query, pageKeys) as CountData
-    data = { ...data, ...res }
-  }
-
-  applyCountData(args.numEl, data, data[opt.pageKey])
-}
-
-function applyCountData(selector: string, data: CountData, defaultCount: number) {
-  document.querySelectorAll(selector).forEach((el) => {
-    const pageKey = el.getAttribute('data-page-key')
-    const count = Number(pageKey ? (data[pageKey]) : defaultCount)
-    el.innerHTML = `${count}`
-  })
-}

package/src/plugins/version-check.ts

@@ -1,37 +0,0 @@
-import type { ArtalkPlugin } from '~/types'
-import { version as ARTALK_VERSION } from '~/package.json'
-import type List from '~/src/list/list'
-import * as Ui from '@/lib/ui'
-import * as Utils from '@/lib/utils'
-import $t from '@/i18n'
-
-let IgnoreVersionCheck = false
-
-export const VersionCheck: ArtalkPlugin = (ctx) => {
-  ctx.on('conf-loaded', () => {
-    const list = ctx.get('list')
-    if (ctx.conf.apiVersion && ctx.conf.versionCheck && !IgnoreVersionCheck)
-      versionCheck(list, ARTALK_VERSION, ctx.conf.apiVersion)
-  })
-}
-
-function versionCheck(list: List, feVer: string, beVer: string) {
-  const comp = Utils.versionCompare(feVer, beVer)
-  const sameVer = (comp === 0)
-  if (sameVer) return
-
-  const errEl = Utils.createElement(
-    `<div>请更新 Artalk ${comp < 0 ? $t('frontend') : $t('backend')}以获得完整体验 ` +
-    `(<a href="https://artalk.js.org/" target="_blank">帮助文档</a>)` +
-    `<br/><br/><span style="color: var(--at-color-meta);">` +
-    `当前版本：${$t('frontend')} ${feVer} / ${$t('backend')} ${beVer}` +
-    `</span><br/><br/></div>`)
-  const ignoreBtn = Utils.createElement('<span style="cursor:pointer">忽略</span>')
-  ignoreBtn.onclick = () => {
-    Ui.setError(list.$el.parentElement!, null)
-    IgnoreVersionCheck = true
-    list.ctx.fetch({ offset: 0 })
-  }
-  errEl.append(ignoreBtn)
-  Ui.setError(list.$el.parentElement!, errEl, '<span class="atk-warn-title">Artalk Warn</span>')
-}

package/src/service.ts

@@ -1,91 +0,0 @@
-import type { ContextApi } from '~/types'
-import CheckerLauncher from './components/checker'
-import Editor from './editor/editor'
-import SidebarLayer from './layer/sidebar-layer'
-
-import User from './lib/user'
-import List from './list/list'
-
-import * as I18n from './i18n'
-import { PlugManager } from './plugins/editor-kit'
-import { LayerManager } from './layer/layer-manager'
-
-/**
- * Services
- *
- * @description Call these services by `ctx.get('serviceName')` or `ctx.serviceName`
- */
-const services = {
-  // I18n
-  i18n(ctx: ContextApi) {
-    I18n.setLocale(ctx.conf.locale)
-
-    ctx.on('conf-loaded', () => {
-      I18n.setLocale(ctx.conf.locale)
-    })
-  },
-
-  // User Store
-  user(ctx: ContextApi) {
-    User.setOnUserChanged((user) => {
-      ctx?.trigger('user-changed', user)
-    })
-    return User
-  },
-
-  // 弹出层
-  layerManager(ctx: ContextApi) {
-    return new LayerManager(ctx)
-  },
-
-  // CheckerLauncher
-  checkerLauncher(ctx: ContextApi) {
-    const checkerLauncher = new CheckerLauncher({
-      getCtx: () => ctx,
-      getApi: () => ctx.getApi(),
-      getIframeURLBase: () => ctx.conf.server,
-      onReload: () => ctx.reload()
-    })
-    return checkerLauncher
-  },
-
-  // 编辑器
-  editor(ctx: ContextApi) {
-    const editor = new Editor(ctx)
-    ctx.$root.appendChild(editor.$el)
-    return editor
-  },
-
-  // 评论列表
-  list(ctx: ContextApi): List {
-    const list = new List(ctx)
-    ctx.$root.appendChild(list.$el)
-    return list
-  },
-
-  // 侧边栏 Layer
-  sidebarLayer(ctx: ContextApi) {
-    const sidebarLayer = new SidebarLayer(ctx)
-    return sidebarLayer
-  },
-
-  // Extra Service
-  // -----------------------------------------
-  // Only for type check
-  // Not inject to ctx immediately,
-  // but can be injected by other occasions
-
-  editorPlugs(): PlugManager|undefined {
-    return undefined
-  }
-}
-
-export default services
-
-// type tricks for dependency injection
-type TServiceImps = typeof services
-type TObjectWithFuncs = {[k: string]: (...args: any) => any}
-type TKeysOnlyReturn<T extends TObjectWithFuncs, V> = {[K in keyof T]: ReturnType<T[K]> extends V ? K : never}[keyof T]
-type TOmitConditions = TKeysOnlyReturn<TServiceImps, void>
-type TServiceInjectors = Omit<TServiceImps, TOmitConditions>
-export type TInjectedServices = {[K in keyof TServiceInjectors]: ReturnType<TServiceInjectors[K]>}

package/src/style/_color.scss

@@ -1,41 +0,0 @@
-.artalk, .atk-layer-wrap {
-  --at-color-font: #2a2e2e;
-  --at-color-deep: #2a2e2e;
-  --at-color-sub: #757575;
-  --at-color-grey: #747474;
-  --at-color-meta: #697182;
-  --at-color-border: #eceff2;
-  --at-color-light: #4285f4;
-  --at-color-bg: #FFF;
-  --at-color-bg-transl: rgba(255, 255, 255, 0.94);
-  --at-color-bg-grey: #f3f4f5;
-  --at-color-bg-grey-transl: rgba(244, 244, 244, 0.75);
-  --at-color-bg-light: rgba(29, 161, 242, 0.1);
-  --at-color-main: #0083ff;
-  --at-color-red: #ff5652;
-  --at-color-pink: #fa5a57;
-  --at-color-yellow: #ff7c37;
-  --at-color-green: #4caf50;
-  --at-color-gradient: linear-gradient(180deg, transparent, rgba(255, 255, 255));
-
-  &.atk-dark-mode {
-    --at-color-font: #fff;
-    --at-color-deep: #e7e7e7;
-    --at-color-sub: #e7e7e7;
-    --at-color-grey: #fff;
-    --at-color-meta: #fff;
-    --at-color-border: #2d3235;
-    --at-color-light: #687a86;
-    --at-color-bg: #1e2224;
-    --at-color-bg-transl: rgba(30, 34, 36, 0.95);
-    --at-color-bg-grey: #46494e;
-    --at-color-bg-grey-transl:  rgba(8, 8, 8, 0.95);
-    --at-color-bg-light: rgba(29, 161, 242, 0.1);
-    --at-color-main: #0083ff;
-    --at-color-red: #ff5652;
-    --at-color-pink: #fa5a57;
-    --at-color-yellow: #ff7c37;
-    --at-color-green: #4caf50;
-    --at-color-gradient: linear-gradient(180deg, transparent, rgba(30, 34, 36, 1));
-  }
-}

package/src/style/_extend.scss

@@ -1,20 +0,0 @@
-.atk-slim-scrollbar {
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb,
-  &::-webkit-scrollbar-thumb:window-inactive {
-    background: rgba(86,86,86,.3);
-  }
-
-  &::-webkit-scrollbar-thumb:vertical:hover {
-    background: rgba(65,74,82,.77);
-  }
-
-  &::-webkit-scrollbar-thumb:vertical:active {
-    background: rgba(41,47,53,.77);
-  }
-}

package/src/style/_variables.scss

@@ -1,3 +0,0 @@
-$font-size: 14px;
-$line-height: 1.6em;
-$block-radius: 6px;