artalk 2.4.4 → 2.5.0

package/src/style/{list.less → list.scss}

@@ -46,7 +46,7 @@
         padding: 0.6rem 0;
         border: 1px solid var(--at-color-border);
         text-align: center;
-        border-radius: @block-radius;
+        border-radius: $block-radius;
         white-space: nowrap;
         margin: 0;
         list-style: none;
@@ -159,11 +159,13 @@
 }
 
 .atk-list-no-comment {
-  text-align: center;
   height: 150px;
-  line-height: 150px;
-  display: block;
+  display: flex;
   font-size: 19px;
+  justify-content: center;
+  align-items: center;
+  word-break: break-word;
+  text-align: center;
 }
 
 .atk-list-read-more {
@@ -179,8 +181,8 @@
     cursor: pointer;
     user-select: none;
     padding: 0 15px;
-    font-size: @font-size;
-    border-radius: @block-radius;
+    font-size: $font-size;
+    border-radius: $block-radius;
     border: 1px solid transparent;
     display: flex;
     height: 30px;

package/src/style/{main.less → main.scss}

@@ -1,9 +1,9 @@
-@import "./_color.less";
-@import './comment.less';
-@import './list.less';
-@import './pagination.less';
-@import './editor.less';
-@import './sidebar-layer.less';
+@import "./_color.scss";
+@import './comment.scss';
+@import './list.scss';
+@import './pagination.scss';
+@import './editor.scss';
+@import './sidebar-layer.scss';
 
 .artalk {
   position: relative;
@@ -14,7 +14,7 @@
 .artalk, .atk-layer-wrap {
   color: var(--at-color-font);
   word-wrap: break-word;
-  word-break: break-all;
+  word-break: break-word;
 
   * {
     box-sizing: border-box;
@@ -26,17 +26,18 @@
     font-size: inherit;
   }
 
-  @codeFont: source code pro, Consolas, Monaco, Menlo, sans-serif;
+  $codeFont: source code pro, Consolas, Monaco, Menlo, sans-serif;
 
   code {
-    font-family: @codeFont;
-    margin: 0 .3em;
-    padding: 0 .5em;
+    font-family: $codeFont;
+    margin: 0 .05em;
+    padding: 0 .4em;
     display: inline-block;
+    vertical-align: middle;
     font-size: .9em;
     background-color: var(--at-color-bg-grey);
     color: var(--at-color-font);
-    border-radius: @block-radius;
+    border-radius: 2px;
   }
 
   pre {
@@ -46,8 +47,8 @@
   }
 
   pre code {
-    * { font-family: @codeFont; }
-    line-height: @line-height;
+    * { font-family: $codeFont; }
+    line-height: $line-height;
     display: block;
     padding: 10px 15px;
     white-space: pre-wrap;
@@ -142,8 +143,8 @@
 
 /* Loading */
 .atk-loading {
+  @extend .atk-full-layer;
   z-index: 11;
-  &:extend(.atk-full-layer);
 }
 
 .atk-loading-spinner {
@@ -278,7 +279,7 @@ i.atk-icon {
 
 /* Layer */
 .atk-error-layer {
-  &:extend(.atk-full-layer);
+  @extend .atk-full-layer;
   background-color: var(--at-color-bg-transl);
 
   .atk-error-title {
@@ -312,8 +313,8 @@ i.atk-icon {
 }
 
 .atk-layer-dialog-wrap {
-  @formInputHeight: 30px;
-  &:extend(.atk-full-layer);
+  $formInputHeight: 30px;
+  @extend .atk-full-layer;
   background-color: var(--at-color-bg-transl);
 
   & > .atk-layer-dialog {
@@ -332,10 +333,10 @@ i.atk-icon {
 
       input {
         width: 100%;
-        line-height: (@formInputHeight + 4px);
+        line-height: calc($formInputHeight + 4px);
         background-color: var(--at-color-bg);
         border: 1px solid var(--at-color-border);
-        border-radius: (@block-radius / 2);
+        border-radius: calc($block-radius / 2);
         outline: none;
         padding: 0 6px;
         display: block;
@@ -356,9 +357,9 @@ i.atk-icon {
         border: 1px solid var(--at-color-main);
         background: transparent;
         color: var(--at-color-main);
-        border-radius: (@block-radius / 2);
+        border-radius: calc($block-radius / 2);
         padding: 0 15px;
-        line-height: @formInputHeight;
+        line-height: $formInputHeight;
         outline: none;
 
         &:active {
@@ -426,7 +427,7 @@ i.atk-icon {
   overflow: hidden;
   background-color: #2c2c2c;
   color: #FFF;
-  border-radius: (@block-radius / 2);
+  border-radius: calc($block-radius / 2);
   cursor: pointer;
   font-size: 14px;
   padding: 5px 15px;

package/src/style/{sidebar-layer.less → sidebar-layer.scss}

@@ -1,19 +1,19 @@
-@header-height: 60px;
-@nav-height: 40px;
+$header-height: 60px;
+$nav-height: 40px;
 
 .atk-sidebar-layer {
-  @width: 430px;
+  $width: 430px;
   position: fixed;
   z-index: 99999;
   top: 0;
   right: 0;
-  width: @width;
+  width: $width;
   height: 100%;
   background: var(--at-color-bg);
   transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-  transform: translate(@width, 0px);
+  transform: translate($width, 0px);
 
-  @media only screen and (max-width: @width) {
+  @media only screen and (max-width: $width) {
     & {
       width: 100%;
     }
@@ -37,8 +37,8 @@
     .atk-sidebar-close {
       display: flex;
       flex-direction: column;
-      width: @header-height;
-      height: @header-height;
+      width: $header-height;
+      height: $header-height;
       align-items: center;
       place-content: center;
       cursor: pointer;

package/types/artalk-config.d.ts

@@ -26,7 +26,7 @@ export default interface ArtalkConfig {
   /** 发送按钮文字 */
   sendBtn: string
 
-  /** 评论框旅行（显示在待回复评论后面） */
+  /** 评论框穿梭（显示在待回复评论后面） */
   editorTravel: boolean
 
   /** 表情包 */
@@ -60,6 +60,9 @@ export default interface ArtalkConfig {
 
     /** 子评论区域限高 */
     children: number
+
+    /** 滚动限高 */
+    scrollable: boolean
   }
 
   /** 评论投票按钮 */
@@ -77,7 +80,7 @@ export default interface ArtalkConfig {
   /** PV 数绑定元素 Selector */
   pvEl: string
 
-  /** 暗黑模式 */
+  /** 夜间模式 */
   darkMode: boolean|'auto'
 
   /** 请求超时（单位：秒） */

package/types/artalk-data.d.ts

@@ -44,6 +44,9 @@ export interface CommentData {
   /** 徽章颜色 */
   badge_color?: string
 
+  /** IP 归属地 */
+  ip_region?: string
+
   /** 是否允许回复 */
   is_allow_reply?: boolean
 
@@ -221,7 +224,4 @@ export interface ApiVersionData {
 
   /** API 程序 CommitHash */
   commit_hash: string
-
-    /** API 程序要求前端最小版本 */
-  fe_min_version: string
 }

package/types/context.d.ts

@@ -1,15 +1,14 @@
-import { marked as libMarked } from 'marked'
 import ArtalkConfig from './artalk-config'
 import { CommentData, NotifyData } from './artalk-data'
 import { EventPayloadMap, Event, EventScopeType, Handler } from './event'
 import { internal as internalLocales, I18n } from '../src/i18n'
 import Api from '../src/api'
 import User from '../src/lib/user'
-import Editor from '../src/editor'
 import Comment from '../src/comment'
-import ListLite from '../src/list/list-lite'
-import SidebarLayer, { SidebarShowPayload } from '../src/layer/sidebar-layer'
-import CheckerLauncher, { CheckerCaptchaPayload, CheckerPayload } from '../src/lib/checker'
+import { SidebarShowPayload } from '../src/layer/sidebar-layer'
+import { CheckerCaptchaPayload, CheckerPayload } from '../src/lib/checker'
+import type { TMarked } from '../src/lib/marked'
+import type { TInjectedServices } from '../src/service'
 
 /**
  * Context 接口
@@ -17,31 +16,26 @@ import CheckerLauncher, { CheckerCaptchaPayload, CheckerPayload } from '../src/l
  * (面向接口的编程)
  */
 export default interface ContextApi {
-  /** Context 唯一标识 */
-  cid: number
-
   /** Artalk 根元素对象 */
   $root: HTMLElement
 
+  /** 依赖注入函数 */
+  inject<K extends keyof TInjectedServices>(depName: K, obj: TInjectedServices[K]): void
+
   /** 配置对象 */
+  // TODO 修改为 getConf() 和 setConf()
   conf: ArtalkConfig
 
   /** 用户对象 */
+  // TODO 修改为 getUser()
   user: User
 
   /** marked 依赖对象 */
-  markedInstance?: typeof libMarked
+  getMarkedInstance(): TMarked | undefined
 
   /** marked 内容替换器 */
   markedReplacers: ((raw: string) => string)[]
 
-  /* 设置持有的同事类 (中介者模式) */
-  setApi(api: Api): void
-  setEditor(editor: Editor): void
-  setList(list?: ListLite): void
-  setSidebarLayer(list: SidebarLayer): void
-  setCheckerLauncher(checkerLauncher: CheckerLauncher): void
-
   /** 获取 API 以供 HTTP 请求 */
   getApi(): Api
 
@@ -141,7 +135,7 @@ export default interface ContextApi {
   /** i18n 翻译 */
   $t(key: keyof I18n, args?: {[key: string]: string}): string
 
-  /** 设置暗黑模式 */
+  /** 设置夜间模式 */
   setDarkMode(darkMode: boolean): void
 
   /** 更新配置 */

package/types/global.d.ts

@@ -0,0 +1 @@
+declare const ARTALK_LITE: boolean

package/CNAME

@@ -1 +0,0 @@
-artalk.js.org

package/LICENSE

@@ -1,165 +0,0 @@
-                   GNU LESSER GENERAL PUBLIC LICENSE
-                       Version 3, 29 June 2007
-
- Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
- Everyone is permitted to copy and distribute verbatim copies
- of this license document, but changing it is not allowed.
-
-
-  This version of the GNU Lesser General Public License incorporates
-the terms and conditions of version 3 of the GNU General Public
-License, supplemented by the additional permissions listed below.
-
-  0. Additional Definitions.
-
-  As used herein, "this License" refers to version 3 of the GNU Lesser
-General Public License, and the "GNU GPL" refers to version 3 of the GNU
-General Public License.
-
-  "The Library" refers to a covered work governed by this License,
-other than an Application or a Combined Work as defined below.
-
-  An "Application" is any work that makes use of an interface provided
-by the Library, but which is not otherwise based on the Library.
-Defining a subclass of a class defined by the Library is deemed a mode
-of using an interface provided by the Library.
-
-  A "Combined Work" is a work produced by combining or linking an
-Application with the Library.  The particular version of the Library
-with which the Combined Work was made is also called the "Linked
-Version".
-
-  The "Minimal Corresponding Source" for a Combined Work means the
-Corresponding Source for the Combined Work, excluding any source code
-for portions of the Combined Work that, considered in isolation, are
-based on the Application, and not on the Linked Version.
-
-  The "Corresponding Application Code" for a Combined Work means the
-object code and/or source code for the Application, including any data
-and utility programs needed for reproducing the Combined Work from the
-Application, but excluding the System Libraries of the Combined Work.
-
-  1. Exception to Section 3 of the GNU GPL.
-
-  You may convey a covered work under sections 3 and 4 of this License
-without being bound by section 3 of the GNU GPL.
-
-  2. Conveying Modified Versions.
-
-  If you modify a copy of the Library, and, in your modifications, a
-facility refers to a function or data to be supplied by an Application
-that uses the facility (other than as an argument passed when the
-facility is invoked), then you may convey a copy of the modified
-version:
-
-   a) under this License, provided that you make a good faith effort to
-   ensure that, in the event an Application does not supply the
-   function or data, the facility still operates, and performs
-   whatever part of its purpose remains meaningful, or
-
-   b) under the GNU GPL, with none of the additional permissions of
-   this License applicable to that copy.
-
-  3. Object Code Incorporating Material from Library Header Files.
-
-  The object code form of an Application may incorporate material from
-a header file that is part of the Library.  You may convey such object
-code under terms of your choice, provided that, if the incorporated
-material is not limited to numerical parameters, data structure
-layouts and accessors, or small macros, inline functions and templates
-(ten or fewer lines in length), you do both of the following:
-
-   a) Give prominent notice with each copy of the object code that the
-   Library is used in it and that the Library and its use are
-   covered by this License.
-
-   b) Accompany the object code with a copy of the GNU GPL and this license
-   document.
-
-  4. Combined Works.
-
-  You may convey a Combined Work under terms of your choice that,
-taken together, effectively do not restrict modification of the
-portions of the Library contained in the Combined Work and reverse
-engineering for debugging such modifications, if you also do each of
-the following:
-
-   a) Give prominent notice with each copy of the Combined Work that
-   the Library is used in it and that the Library and its use are
-   covered by this License.
-
-   b) Accompany the Combined Work with a copy of the GNU GPL and this license
-   document.
-
-   c) For a Combined Work that displays copyright notices during
-   execution, include the copyright notice for the Library among
-   these notices, as well as a reference directing the user to the
-   copies of the GNU GPL and this license document.
-
-   d) Do one of the following:
-
-       0) Convey the Minimal Corresponding Source under the terms of this
-       License, and the Corresponding Application Code in a form
-       suitable for, and under terms that permit, the user to
-       recombine or relink the Application with a modified version of
-       the Linked Version to produce a modified Combined Work, in the
-       manner specified by section 6 of the GNU GPL for conveying
-       Corresponding Source.
-
-       1) Use a suitable shared library mechanism for linking with the
-       Library.  A suitable mechanism is one that (a) uses at run time
-       a copy of the Library already present on the user's computer
-       system, and (b) will operate properly with a modified version
-       of the Library that is interface-compatible with the Linked
-       Version.
-
-   e) Provide Installation Information, but only if you would otherwise
-   be required to provide such information under section 6 of the
-   GNU GPL, and only to the extent that such information is
-   necessary to install and execute a modified version of the
-   Combined Work produced by recombining or relinking the
-   Application with a modified version of the Linked Version. (If
-   you use option 4d0, the Installation Information must accompany
-   the Minimal Corresponding Source and Corresponding Application
-   Code. If you use option 4d1, you must provide the Installation
-   Information in the manner specified by section 6 of the GNU GPL
-   for conveying Corresponding Source.)
-
-  5. Combined Libraries.
-
-  You may place library facilities that are a work based on the
-Library side by side in a single library together with other library
-facilities that are not Applications and are not covered by this
-License, and convey such a combined library under terms of your
-choice, if you do both of the following:
-
-   a) Accompany the combined library with a copy of the same work based
-   on the Library, uncombined with any other library facilities,
-   conveyed under the terms of this License.
-
-   b) Give prominent notice with the combined library that part of it
-   is a work based on the Library, and explaining where to find the
-   accompanying uncombined form of the same work.
-
-  6. Revised Versions of the GNU Lesser General Public License.
-
-  The Free Software Foundation may publish revised and/or new versions
-of the GNU Lesser General Public License from time to time. Such new
-versions will be similar in spirit to the present version, but may
-differ in detail to address new problems or concerns.
-
-  Each version is given a distinguishing version number. If the
-Library as you received it specifies that a certain numbered version
-of the GNU Lesser General Public License "or any later version"
-applies to it, you have the option of following the terms and
-conditions either of that published version or of any later version
-published by the Free Software Foundation. If the Library as you
-received it does not specify a version number of the GNU Lesser
-General Public License, you may choose any version of the GNU Lesser
-General Public License ever published by the Free Software Foundation.
-
-  If the Library as you received it specifies that a proxy can decide
-whether future versions of the GNU Lesser General Public License shall
-apply, that proxy's public statement of acceptance of any version is
-permanent authorization for you to choose that version for the
-Library.

package/index.html

@@ -1,157 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8">
-  <title>Artalk DEMO</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
-  <style>
-    * { box-sizing: border-box; }
-    body { padding:45px 10px;margin:0;background:#f4f4f4 }
-    body.dark-mode { background:#000; }
-    .card { margin:0 auto;max-width:700px;position:relative;overflow:hidden;background:#FFF;border-radius:4px;padding:20px;border: 1px solid transparent; }
-    body.dark-mode .card { background: #1e2223;border: 1px solid #2d3235; }
-    .card:not(:last-child) { margin-bottom:10px; }
-    .card.billboard { text-align: center; }
-    .title > a { display:block;text-decoration:none;color:#0083ff;font-size:35px;margin-top:0;margin-bottom:10px; }
-    .title > a:hover { margin-left:0 }
-    .title > a > span { opacity:0 }
-    .title > a:hover>span { opacity:1 }
-    .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) {
-      body { padding: 0;background: #FFF; }
-      .card.billboard { padding-top: 20px; }
-      .card { width: 100%;padding: 5px; }
-    }
-    .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: #006fd9;border: 1px solid #2d3235;color: #fff; }
-    .to-top { right: 25px; }
-  </style>
-  <!--<link rel="stylesheet"
-      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/arta.min.css">
-  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>-->
-
-  <!-- For mobile testing -->
-  <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
-  <script>
-    // VConsole will be exported to `window.VConsole` by default.
-    if (navigator.userAgentData.mobile) {
-      var vConsole = new window.VConsole();
-    }
-  </script>
-</head>
-<body>
-  <div class="card billboard atk-fade-in">
-    <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" 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">
-    <div id="comments"></div>
-  </div>
-  <div class="float-btn to-night atk-fade-in">Blink</div>
-  <div class="float-btn to-top atk-fade-in" style="display: none;">TOP</div>
-
-  <script type="module">
-    import Artalk from './src/main'
-    var artalk = new Artalk({
-      el: '#comments',
-      pageKey: 'https://artalk.js.org/guide/intro.html',
-      pageTitle: 'Artalk Home',
-      server: (import.meta.env.DEV) ? 'http://localhost:23366' : 'https://artalk.qwqaq.com',
-      site: 'ArtalkDocs',
-      //useBackendConf: true,
-    });
-
-    window.artalk = artalk;
-
-    ;(function () {
-      const toTopElem = document.querySelector('.to-top')
-      toTopElem.addEventListener('click', () => {
-        window.scrollTo(0, 0)
-      })
-
-      checkShowToTop()
-      document.addEventListener('scroll', () => {
-        checkShowToTop()
-      })
-
-      function checkShowToTop() {
-        const scrollTop = window.scrollY
-        const whereShow = window.screen.height
-        const isNeedShow = (scrollTop > 0) && (scrollTop > whereShow)
-
-        if (isNeedShow) {
-          toTopElem.style.display = ''
-        } else {
-          toTopElem.style.display = 'none'
-        }
-      }
-    })();
-
-    ;(function () {
-      // @Refer: https://stackoverflow.com/questions/50840168/how-to-detect-if-the-os-is-in-dark-mode-in-browsers
-      let darkMode = false
-
-      if (getLS() == "true") {
-        darkMode = true;
-      } else {
-        try {
-          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            darkMode = true;
-          }
-        } catch {}
-      }
-
-      function getLS() {
-        return localStorage.getItem("dark_mode_on") || null
-      }
-
-      function setLS(val) {
-        return localStorage.setItem("dark_mode_on", String(val))
-      }
-
-      function checkAndApplyDarkMode () {
-        artalk.setDarkMode(darkMode)
-        if (darkMode) {
-          document.body.classList.add('dark-mode')
-        } else {
-          document.body.classList.remove('dark-mode')
-        }
-      }
-
-      checkAndApplyDarkMode()
-
-      const toNightElem = document.querySelector('.to-night')
-      toNightElem.addEventListener('click', () => {
-        darkMode = !darkMode
-        setLS(darkMode)
-        checkAndApplyDarkMode()
-      })
-
-      // Listen
-      try {
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-          const newColorScheme = e.matches ? "dark" : "light";
-          if (newColorScheme == "dark") {
-            darkMode = true
-          } else {
-            darkMode = false
-          }
-
-          checkAndApplyDarkMode()
-        });
-      } catch {}
-    })()
-  </script>
-</body>
-</html>

package/postcss.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  plugins: [
-    require('autoprefixer')
-  ]
-}