artalk 2.2.7 → 2.2.8

package/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="zh-CN">
 <head>
   <meta charset="UTF-8">
   <title>Artalk DEMO</title>
@@ -16,7 +16,8 @@
     .title > a:hover { margin-left:0 }
     .title > a > span { opacity:0 }
     .title > a:hover>span { opacity:1 }
-    .desc { font-size:12px;color:#757e91 }
+    .desc { font-size:12px;color:#697182 }
+    body.dark-mode .desc { color:#848da3 }
     .social { margin-top:20px }
     .social > a:not(:last-child) { margin-right:2px }
     @media only screen and (max-width: 768px) {
@@ -26,7 +27,7 @@
     }
     .float-btn { user-select: none;bottom: 25px;display: block;cursor: pointer;text-align: center;width: 60px;height: 37px;line-height: 37px;font-size: 13px;color: #757e91;background: #fff;opacity: 0.8;border-radius: 4px;border: 1px solid #eceff2;position: fixed; }
     .to-night { z-index: 99999;left: 25px;background: #1e2223;color: #fff; }
-    body.dark-mode .to-night { background: #fff;border: 1px solid #2d3235;color: #0083ff; }
+    body.dark-mode .to-night { background: #006fd9;border: 1px solid #2d3235;color: #fff; }
     .to-top { right: 25px; }
   </style>
   <!--<link rel="stylesheet"
@@ -45,11 +46,11 @@
     <div class="title"><a href="https://github.com/ArtalkJS/Artalk" target="_blank"><span>『 </span>Artalk<span> 』</span></a></div>
     <div class="desc">一款简洁的自托管评论系统 <span id="ArtalkPV"></span></div>
     <div class="social">
-      <a href="https://www.npmjs.com/package/artalk" target="_blank"><img src="https://img.shields.io/npm/v/artalk.svg?style=flat-square"></a>
-      <a href="https://www.npmjs.com/package/artalk" target="_blank"><img src="https://img.shields.io/npm/dt/artalk.svg?style=flat-square"></a>
-      <a href="https://github.com/ArtalkJS/Artalk/commits/master" target="_blank"><img src="https://img.shields.io/github/last-commit/ArtalkJS/Artalk?style=flat-square"></a>
-      <a href="https://github.com/ArtalkJS/Artalk/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/ArtalkJS/Artalk.svg?style=flat-square"></a>
-      <a href="https://github.com/ArtalkJS/Artalk" target="_blank"><img src="https://img.shields.io/github/stars/ArtalkJS/Artalk?style=flat-square"></a>
+      <a href="https://www.npmjs.com/package/artalk" aria-label="npm package version" target="_blank"><img src="https://img.shields.io/npm/v/artalk.svg?style=flat-square"></a>
+      <a href="https://www.npmjs.com/package/artalk" aria-label="npm package download number" target="_blank"><img src="https://img.shields.io/npm/dt/artalk.svg?style=flat-square"></a>
+      <a href="https://github.com/ArtalkJS/Artalk/commits/master" aria-label="last commit" target="_blank"><img src="https://img.shields.io/github/last-commit/ArtalkJS/Artalk?style=flat-square"></a>
+      <a href="https://github.com/ArtalkJS/Artalk/blob/master/LICENSE" aria-label="open source license" target="_blank"><img src="https://img.shields.io/github/license/ArtalkJS/Artalk.svg?style=flat-square"></a>
+      <a href="https://github.com/ArtalkJS/Artalk" aria-label="GitHub star number" target="_blank"><img src="https://img.shields.io/github/stars/ArtalkJS/Artalk?style=flat-square"></a>
     </div>
   </div>
   <div class="card atk-fade-in">
@@ -66,6 +67,7 @@
       pageTitle: 'Artalk Home',
       server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366' : 'https://artalk.qwqaq.com',
       site: 'ArtalkDemo',
+      //useBackendConf: true,
     });
 
     window.artalk = artalk;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "artalk",
-  "version": "2.2.7",
-  "backendMinVersion": "2.1.2",
+  "version": "2.2.8",
+  "backendMinVersion": "2.1.4",
   "license": "LGPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [

package/src/api/index.ts

@@ -1,4 +1,5 @@
 import { CommentData, ListData, UserData, PageData, SiteData, NotifyData } from '~/types/artalk-data'
+import ArtalkConfig from '~/types/artalk-config'
 import Context from '../context'
 import { Fetch, ToFormData, POST, GET } from './request'
 import * as Utils from '../lib/utils'
@@ -294,7 +295,22 @@ export default class Api {
 
     const json = await Fetch(this.ctx, `${this.baseURL}/img-upload`, init)
     return ((json.data || {}) as any) as { img_file: string, img_url: string }
+  }
+
+  /** 获取配置 */
+  public async conf() {
+    const data = await POST<any>(this.ctx, `${this.baseURL}/conf`)
+    const conf = (data.frontend_conf || {}) as ArtalkConfig
+
+    // Patch: `emoticons` config string to json
+    if (conf.emoticons && typeof conf.emoticons === "string") {
+      conf.emoticons = conf.emoticons.trim()
+      if (conf.emoticons.startsWith("[") || conf.emoticons.startsWith("{")) {
+        conf.emoticons = JSON.parse(conf.emoticons) // pase json
+      }
+    }
 
+    return conf
   }
 
   // ============================

package/src/artalk.ts

@@ -13,6 +13,7 @@ import SidebarLayer from './components/sidebar-layer'
 import Layer, { GetLayerWrap } from './components/layer'
 import Api from './api'
 import * as Utils from './lib/utils'
+import * as Ui from './lib/ui'
 
 /**
  * Artalk
@@ -21,18 +22,18 @@ import * as Utils from './lib/utils'
 export default class Artalk {
   public static readonly defaults: ArtalkConfig = defaults
 
-  public ctx: Context
-  public conf: ArtalkConfig
-  public $root: HTMLElement
+  public ctx!: Context
+  public conf!: ArtalkConfig
+  public $root!: HTMLElement
 
-  public checkerLauncher: CheckerLauncher
-  public editor: Editor
-  public list: List
-  public sidebarLayer: SidebarLayer
+  public checkerLauncher!: CheckerLauncher
+  public editor!: Editor
+  public list!: List
+  public sidebarLayer!: SidebarLayer
 
   constructor (customConf: ArtalkConfig) {
     // 配置
-    this.conf = { ...Artalk.defaults, ...customConf }
+    this.conf = Utils.mergeDeep(Artalk.defaults, customConf)
     this.conf.server = this.conf.server.replace(/\/$/, '').replace(/\/api\/?$/, '')
 
     // 默认 pageKey
@@ -66,10 +67,25 @@ export default class Artalk {
     // 界面初始化
     this.$root.classList.add('artalk')
     this.$root.innerHTML = ''
-    this.initLayer()
-    this.initDarkMode()
 
+    // 初始化组件
+    if (this.conf.useBackendConf) {
+      // 复用后端的配置
+      // @ts-ignore
+      return (async () => {
+        await this.loadConfRemote()
+        this.initCore()
+        return this // Promise<Artalk>
+      })()
+    }
+
+    this.initCore()
+  }
+
+  private initCore() {
     // 组件初始化
+    this.initLayer()
+    this.initDarkMode()
     this.checkerLauncher = new CheckerLauncher(this.ctx)
     Utils.initMarked(this.ctx) // 初始化 marked
 
@@ -102,6 +118,17 @@ export default class Artalk {
     })
   }
 
+  /** 获取远程配置 */
+  private async loadConfRemote() {
+    Ui.showLoading(this.$root)
+    let backendConf = {}
+    try {
+      backendConf = await (new Api(this.ctx)).conf()
+    } catch (err) { console.error("配置远程获取失败", err) }
+    this.ctx.conf = Utils.mergeDeep(this.ctx.conf, backendConf)
+    Ui.hideLoading(this.$root)
+  }
+
   /** 事件绑定 · 初始化 */
   private initEventBind() {
     // 锚点快速跳转评论

package/src/components/pagination.ts

@@ -38,7 +38,7 @@ export default class Pagination {
       `<div class="atk-pagination-wrap">
         <div class="atk-pagination">
           <div class="atk-btn atk-btn-prev">Prev</div>
-          <input type="text" class="atk-input" />
+          <input type="text" class="atk-input" aria-label="Enter the number of page" />
           <div class="atk-btn atk-btn-next">Next</div>
         </div>
       </div>`)

package/src/defaults.ts

@@ -40,6 +40,7 @@ const defaults: ArtalkConfig = {
   imgUpload: true,
   reqTimeout: 15000,
   versionCheck: true,
+  useBackendConf: false,
 }
 
 export default defaults

package/src/lib/utils.ts

@@ -293,3 +293,33 @@ export function getURLBasedOnApi(ctx: Context, path: string) {
 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/style/_color.less

@@ -2,8 +2,8 @@
   --at-color-font: #2a2e2e;
   --at-color-deep: #2a2e2e;
   --at-color-sub: #757575;
-  --at-color-grey: #999;
-  --at-color-meta: #757e91;
+  --at-color-grey: #747474;
+  --at-color-meta: #697182;
   --at-color-border: #eceff2;
   --at-color-light: #4285f4;
   --at-color-bg: #FFF;

package/types/artalk-config.d.ts

@@ -88,6 +88,9 @@ export default interface ArtalkConfig {
 
   /** 版本检测 */
   versionCheck?: boolean
+
+  /** 复用后端配置 */
+  useBackendConf?: boolean
 }
 
 export interface LocalUser {