artalk 2.7.1 → 2.7.2

package/src/plugins/stat.ts

@@ -1,82 +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 initialData = opt.pvAdd ? {
-    [opt.pageKey]: (await opt.getApi().page.pv()) // pv+1 and get pv count
-  } : undefined
-
-  if (opt.pvEl && document.querySelector(opt.pvEl)) {
-    refreshStatCount(opt, {
-      query: 'page_pv',
-      numEl: opt.pvEl,
-      data: initialData,
-    })
-  }
-}
-
-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 which will be queried
-  let queryPageKeys = Array.from(document.querySelectorAll(args.numEl))
-    .map((e) => e.getAttribute('data-page-key') || opt.pageKey)
-    .filter((k) => typeof data[k] !== 'number') // filter out keys that already have data
-
-  queryPageKeys = [...new Set(queryPageKeys)] // deduplicate
-
-  // Fetch count data from server
-  if (queryPageKeys.length > 0) {
-    const res = await opt.getApi().page.stat(args.query, queryPageKeys) 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,36 +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>${$t('updateMsg', { name: (comp < 0) ? $t('frontend') : $t('backend') })}` +
-    `<br/><br/><span style="color: var(--at-color-meta);">` +
-    `${$t('currentVersion')}: ${$t('frontend')} ${feVer} / ${$t('backend')} ${beVer}` +
-    `</span><br/><br/></div>`)
-  const ignoreBtn = Utils.createElement(`<span style="cursor:pointer">${$t('ignore')}</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;

package/src/style/comment.scss

@@ -1,360 +0,0 @@
-.atk-comment-wrap {
-  overflow: hidden;
-  position: relative;
-  border-bottom: 1px solid transparent;
-
-  &.atk-flash-once {
-    animation: atkFlashOnce 1s ease-in-out 0s;
-
-    @keyframes atkFlashOnce {
-      from { background: rgba(0, 131, 255, 0.2); }
-      to { background: transparent; }
-    }
-  }
-
-  &.atk-unread:before {
-    content: ' ';
-    position: absolute;
-    left: 0;
-    top: 10%;
-    width: 3px;
-    height: 80%;
-    background: var(--at-color-main);
-  }
-
-  &.atk-openable {
-    cursor: pointer;
-
-    &:hover {
-      background: var(--at-color-bg-grey);
-    }
-
-    .atk-height-limit:after {
-      background: transparent !important;
-    }
-  }
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.atk-comment {
-  display: block;
-  padding: 10px;
-
-  & > .atk-avatar {
-    display: block;
-    padding: 2px 0;
-    float: left;
-
-    img {
-      width: 50px;
-      height: 50px;
-      border-radius: calc($block-radius / 2);
-    }
-  }
-
-  & > .atk-main {
-    display: block;
-    margin-left: 63px;
-
-    & > .atk-header {
-      line-height: 1.5;
-      font-size: 13px;
-      margin-bottom: .5em;
-      overflow: hidden;
-      position: relative;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-
-      .atk-item {
-        display: flex;
-        align-items: center;
-        margin-top: 2px;
-        margin-bottom: 2px;
-        color: var(--at-color-meta);
-
-        &:not(:last-child) {
-          margin-right: 6px;
-        }
-
-        &.atk-nick, &.atk-nick a {
-          font-size: 14px;
-          color: var(--at-color-main);
-          text-decoration: none;
-        }
-
-        &.atk-reply-at {
-          margin-left: 2px;
-
-          & > .atk-arrow:before {
-            content: '';
-            vertical-align: middle;
-            transform: rotate(90deg);
-            border-bottom: 4px solid var(--at-color-grey);
-            border-left: 3px solid transparent;
-            border-right: 3px solid transparent;
-            display: inline-block;
-            margin-top: -1px;
-          }
-
-          & > .atk-nick {
-            color: var(--at-color-main);
-            cursor: pointer;
-            margin-left: 6px;
-          }
-        }
-      }
-
-      .badge {
-        display: inline-block;
-        color: var(--at-color-meta);
-        background: var(--at-color-bg-grey);
-        padding: 0px 6px;
-        line-height: 17px;
-        border-radius: calc($block-radius / 2);
-
-        &:not(:last-child) {
-          margin-right: 6px;
-        }
-      }
-
-      .atk-badge-wrap > *:last-child {
-        margin-right: 6px;
-      }
-
-      .atk-badge {
-        @extend .badge;
-        color: #fff;
-      }
-
-      .atk-region-badge {
-        @extend .badge;
-      }
-
-      .atk-pinned-badge {
-        @extend .badge;
-        color: #fff;
-        background: #f44336;
-      }
-
-      .atk-ua {
-        @extend .badge;
-      }
-
-      .atk-ua-wrap {
-        @media only screen and (max-width: 768px) {
-          display: block;
-        }
-      }
-    }
-
-    & > .atk-body {
-      display: block;
-      overflow: hidden;
-      position: relative;
-
-      img {
-        max-width: 100%;
-      }
-
-      & > .atk-content {
-        word-break: break-all;
-
-        &.atk-type-collapsed {
-          border: 3px solid var(--at-color-bg-grey);
-          border-bottom: 0;
-          padding: 5px 10px;
-          border-radius: $block-radius $block-radius 0 0;
-          margin-bottom: -5px;
-        }
-
-        & > *:first-child {
-          margin-top: 0;
-        }
-
-        & > *:last-child {
-          margin-bottom: 0;
-        }
-
-        .atk-height-limit-btn {
-          bottom: 5px;
-        }
-      }
-
-      & > .atk-pending {
-        color: var(--at-color-meta);
-        margin: 3px 0;
-        font-size: 13px;
-        padding: 10px 18px;
-        display: block;
-        background: var(--at-color-bg-grey);
-        border-left: 4px solid #f44336;
-      }
-
-      & > .atk-reply-to {
-        padding: 5px 15px;
-        border-left: 3px solid var(--at-color-border);
-        margin-bottom: 10px;
-        position: relative;
-        margin-top: 10px;
-
-        .atk-meta {
-          font-size: 15px;
-
-          .atk-nick {
-            color: var(--at-color-main)
-          }
-        }
-
-        .atk-content {
-          margin-top: 5px;
-        }
-      }
-
-      & > .atk-collapsed {
-        margin: 3px 0;
-        font-size: 13px;
-        padding: 10px 18px;
-        display: block;
-        background: var(--at-color-bg-grey);
-        border-radius: $block-radius;
-
-        .atk-text {
-          color: var(--at-color-meta);
-        }
-
-        .atk-show-btn {
-          color: var(--at-color-main);
-          cursor: pointer;
-          user-select: none;
-          margin-left: 3px;
-          &:hover {
-            color: var(--at-color-main);
-          }
-        }
-      }
-    }
-
-    & > .atk-footer {
-      margin-top: 5px;
-
-      .atk-actions {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        flex-wrap: wrap;
-
-        & > span {
-          color: var(--at-color-meta);
-          font-size: 13px;
-          line-height: 25px;
-          display: inline-flex;
-          cursor: pointer;
-          user-select: none;
-
-          &.atk-error, &.atk-error:hover {
-            color: var(--at-color-red);
-          }
-
-          &:not(:last-child):not(.atk-hide) {
-            margin-right: 16px;
-          }
-
-          &:hover {
-            color: var(--at-color-deep);
-          }
-        }
-      }
-    }
-  }
-
-  /** 内容限高 **/
-  .atk-height-limit:after {
-    position: absolute;
-    z-index: 1;
-    display: block;
-    overflow: hidden;
-    width: 100%;
-    content: " ";
-    bottom: 0;
-    height: 80px;
-    background: var(--at-color-gradient);
-  }
-
-  .atk-height-limit-btn {
-    z-index: 2;
-    position: absolute;
-    left: 50%;
-    bottom: 10px;
-    transform: translateX(-50%);
-    cursor: pointer;
-    border: 1px solid var(--at-color-border);
-    border-radius: $block-radius;
-    background: var(--at-color-bg);
-    padding: 1px 20px;
-    font-size: 15px;
-    color: var(--at-color-meta);
-    user-select: none;
-
-    &:hover {
-      background: var(--at-color-bg-grey);
-    }
-  }
-
-  // 避免重复显示按钮
-  .atk-height-limit .atk-height-limit .atk-height-limit-btn {
-    display: none;
-  }
-
-  // 限高可滚动
-  .atk-height-limit-scroll {
-    // @extend .atk-slim-scrollbar;
-    margin-top: 10px;
-    overflow-y: auto;
-    $cBorder: var(--at-color-border);
-    $cOverwrite: var(--at-color-bg);
-    background:
-      /* Shadow covers */
-      linear-gradient($cOverwrite 1px, transparent 1px calc(100% - 1px)) center top,
-      linear-gradient(transparent calc(100% - 1px), $cOverwrite calc(100% - 1px) 1px) center bottom,
-      /* Shadows */
-      linear-gradient($cBorder 1px, transparent 1px calc(100% - 1px)) center top,
-      linear-gradient(transparent calc(100% - 1px), $cBorder calc(100% - 1px) 1px) center bottom;
-    background-repeat: no-repeat;
-    background-color: transparent;
-    background-size: 100% 1px, 100% 1px, 100% 1px, 100% 1px;
-    /* Opera doesn't support this in the shorthand */
-    background-attachment: local, local, scroll, scroll;
-  }
-}
-
-/** 子评论区域 **/
-.atk-comment-children {
-  & > .atk-comment-wrap {
-    margin-top: 10px;
-    border-left: 1px dashed transparent;
-    border-bottom-color: transparent;
-    &:not(:last-child) {
-      margin-bottom: 10px;
-    }
-
-    & > .atk-comment {
-      padding: 0;
-
-      & > .atk-avatar img {
-        width: 36px;
-        height: 36px;
-      }
-
-      & > .atk-main {
-        margin-left: 47px;
-
-        & > .atk-body > .atk-content {
-        }
-      }
-    }
-  }
-}