v2.1.5

Signed-off-by: qwqcode <qwqcode@gmail.com>

.eslintrc.js

@@ -1,6 +1,10 @@
 module.exports = {
   root: true,
   parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: ['./packages/*/tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
   extends: [
     'airbnb-base',
     'airbnb-typescript/base',
@@ -24,12 +28,11 @@ module.exports = {
     '@typescript-eslint/no-unused-vars': 'off',
     '@typescript-eslint/no-use-before-define': 0,
   },
-  parserOptions: {
-    project: './tsconfig.json',
-  },
   settings: {
     'import/resolver': {
-      typescript: {},
+      typescript: {
+        "project": [__dirname + "/packages/*/tsconfig.json"]
+      },
     },
   },
 }

.github/workflows/npm.yml

@@ -8,19 +8,32 @@ on:
 
 jobs:
   publish:
+    # prevents this action from running on forks
+    if: github.repository == 'ArtalkJS/Artalk'
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    # Setup .npmrc file to publish to npm
-    - uses: actions/setup-node@v2
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - name: Set node version to 12.x
+      uses: actions/setup-node@v2
       with:
         node-version: '12.x'
         registry-url: 'https://registry.npmjs.org'
-    - run: npm install
-    - run: npm run build
-    - run: npm publish
+
+    - name: Install dependencies
+      run: yarn install
+
+    - name: Build
+      run: yarn build
+
+    - name: Publish
+      run: cd packages/artalk && yarn publish
       env:
         NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+    # GitHub Packages
+    #
     # Setup .npmrc file to publish to GitHub Packages
     # - uses: actions/setup-node@v2
     #   with:
@@ -29,6 +42,7 @@ jobs:
     # - run: npm publish
     #   env:
     #     NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
   # Docs Update
   docs-update:
     runs-on: ubuntu-latest
@@ -51,4 +65,3 @@ jobs:
       - uses: stefanzweifel/git-auto-commit-action@v4
         with:
           commit_message: Update Artalk CDN link to v${{ steps.get_version.outputs.VERSION }}
-

.github/workflows/pages.yml

@@ -12,19 +12,23 @@ jobs:
     steps:
     - name: Checkout
       uses: actions/checkout@v2
+
     - name: Setup
       uses: actions/setup-node@v1
       with:
         node-version: '12.x'
+
     - name: Install
       run: yarn install
+
     - name: Build
-      run: yarn predeploy
+      run: cd packages/artalk && yarn predeploy
+
     - name: Deploy
       uses: peaceiris/actions-gh-pages@v3
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}
         publish_branch: gh-pages
-        publish_dir: ./deploy
+        publish_dir: ./packages/artalk/deploy
         user_name: 'github-actions[bot]'
-        user_email: 'github-actions[bot]@users.noreply.github.com'
+        user_email: 'github-actions[bot]@users.noreply.github.com'

package.json

@@ -1,45 +1,18 @@
 {
-  "name": "artalk",
-  "version": "2.1.4",
-  "description": "A Selfhosted Comment System",
-  "keywords": [
-    "comment-system",
-    "comments-widget",
-    "comment",
-    "comments",
-    "blog"
+  "name": "artalk-monorepo",
+  "private": true,
+  "workspaces": [
+    "packages/*"
   ],
   "homepage": "https://artalk.js.org",
-  "bugs": "https://github.com/ArtalkJS/Artalk/issue",
-  "license": "GPL-3.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ArtalkJS/Artalk.git"
-  },
-  "main": "./dist/Artalk.js",
-  "unpkg": "./dist/Artalk.iife.js",
-  "jsdelivr": "./dist/Artalk.iife.js",
-  "module": "./dist/Artalk.es.js",
-  "types": "./types/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/Artalk.es.js",
-      "require": "./dist/Artalk.js"
-    }
-  },
   "scripts": {
-    "dev": "vite",
-    "build": "yarn lint && vite build",
-    "build:demo": "vite build --config vite-demo.config.ts",
-    "serve": "vite preview",
-    "deploy": "gh-pages -d deploy",
-    "predeploy": "yarn run build && yarn run build:demo && yarn run copy:deploy",
-    "copy:deploy": "cp -r dist deploy && cp CNAME deploy",
-    "lint": "eslint --ext .js,.ts src"
+    "build": "yarn --cwd packages/artalk run build",
+    "dev": "yarn --cwd packages/artalk run dev",
+    "build:sidebar": "yarn run build && yarn --cwd packages/artalk-sidebar run build",
+    "build:all": "yarn --cwd packages/artalk run build && yarn --cwd packages/artalk-sidebar run build"
   },
   "devDependencies": {
     "@rollup/plugin-dynamic-import-vars": "^1.4.1",
-    "@types/marked": "^4.0.1",
     "@types/node": "^16.11.7",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
@@ -56,9 +29,5 @@
     "vite": "^2.6.14",
     "vite-tsconfig-paths": "^3.3.17"
   },
-  "dependencies": {
-    "hanabi": "^0.4.0",
-    "insane": "^2.6.2",
-    "marked": "^4.0.3"
-  }
+  "dependencies": {}
 }

packages/artalk-sidebar/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Artalk Sidebar</title>
+</head>
+<body>
+  <div id="ArtalkSidebar"></div>
+
+  <script type="module" src="./src/index.ts"></script>
+</body>
+</html>

packages/artalk-sidebar/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@artalkjs/artalk-sidebar",
+  "version": "0.1.0",
+  "license": "GPL-2.0",
+  "description": "The sidebar of artalk",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ArtalkJS/Artalk.git",
+    "directory": "packages/artalk-sidebar"
+  },
+  "homepage": "https://artalk.js.org",
+  "bugs": "https://github.com/ArtalkJS/Artalk/issue",
+  "main": "./dist/ArtalkSidebar.js",
+  "unpkg": "./dist/ArtalkSidebar.iife.js",
+  "jsdelivr": "./dist/ArtalkSidebar.iife.js",
+  "module": "./dist/ArtalkSidebar.es.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/ArtalkSidebar.es.js",
+      "require": "./dist/ArtalkSidebar.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite --port 23367",
+    "build": "yarn lint && vite build",
+    "serve": "vite preview",
+    "lint": "eslint --ext .js,.ts src"
+  },
+  "devDependencies": {
+  },
+  "dependencies": {
+    "artalk": "*"
+  }
+}

packages/artalk-sidebar/src/admin/page-list.ts

@@ -1,13 +1,13 @@
-import '@/style/page-list.less'
+import '../style/page-list.less'
 
-import Context from '@/context'
-import Component from '@/lib/component'
-import * as Utils from '@/lib/utils'
-import * as Ui from '@/lib/ui'
-import { PageData } from '~/types/artalk-data'
+import Context from 'artalk/src/context'
+import Component from 'artalk/src/lib/component'
+import * as Utils from 'artalk/src/lib/utils'
+import * as Ui from 'artalk/src/lib/ui'
+import { PageData } from 'artalk/types/artalk-data'
+import Api from 'artalk/src/api'
+import ActionBtn from 'artalk/src/components/action-btn'
 import ItemTextEditor from '../item-text-editor'
-import Api from '~/src/api'
-import ActionBtn from '../action-btn'
 
 export default class PageList extends Component {
   $editor?: HTMLElement

packages/artalk-sidebar/src/admin/site-list-floater.ts

@@ -1,10 +1,10 @@
-import '@/style/site-list.less'
+import '../style/site-list.less'
 
-import Context from '@/context'
-import * as Utils from '@/lib/utils'
-import * as Ui from '@/lib/ui'
-import { SiteData } from '~/types/artalk-data'
-import Api from '~/src/api'
+import Context from 'artalk/src/context'
+import * as Utils from 'artalk/src/lib/utils'
+import * as Ui from 'artalk/src/lib/ui'
+import { SiteData } from 'artalk/types/artalk-data'
+import Api from 'artalk/src/api'
 
 interface SiteListFloaterConf {
   onSwitchSite: (siteName: string) => boolean|void

packages/artalk-sidebar/src/admin/site-list.ts

@@ -1,12 +1,12 @@
-import '@/style/site-list.less'
+import '../style/site-list.less'
 
-import Context from '@/context'
-import Component from '@/lib/component'
-import * as Utils from '@/lib/utils'
-import * as Ui from '@/lib/ui'
-import { SiteData } from '~/types/artalk-data'
+import Context from 'artalk/src/context'
+import Component from 'artalk/src/lib/component'
+import * as Utils from 'artalk/src/lib/utils'
+import * as Ui from 'artalk/src/lib/ui'
+import { SiteData } from 'artalk/types/artalk-data'
+import Api from 'artalk/src/api'
 import ItemTextEditor from '../item-text-editor'
-import Api from '~/src/api'
 
 export default class SiteList extends Component {
   sites: SiteData[] = []

packages/artalk-sidebar/src/artalk-sidebar.ts

@@ -0,0 +1,31 @@
+import Artalk from 'artalk'
+import ArtalkConfig, { LocalUser } from 'artalk/types/artalk-config'
+import 'artalk/dist/Artalk.css'
+import Sidebar from './sidebar'
+
+class ArtalkSidebar extends Artalk {
+  constructor(customConf: ArtalkConfig, user: LocalUser) {
+    super(customConf)
+
+    this.$root.style.display = 'none'
+
+    user = user || {}
+    this.ctx.user.data = {
+      ...this.ctx.user.data,
+      ...user
+    }
+    this.ctx.user.save()
+
+    const sidebar = new Sidebar(this.ctx)
+    document.body.appendChild(sidebar.$el)
+
+    if (customConf.darkMode) {
+      sidebar.$el.classList.add('atk-dark-mode')
+    }
+
+    sidebar.show()
+    console.log('hello artalk-sidebar')
+  }
+}
+
+export default ArtalkSidebar

packages/artalk-sidebar/src/index.ts

@@ -0,0 +1,15 @@
+import ArtalkSidebar from './artalk-sidebar'
+
+const searchParams = new URLSearchParams(document.location.search)
+const pageKey = searchParams.get('pageKey') || ''
+const site = searchParams.get('site') || ''
+const user = JSON.parse(searchParams.get('user') || '{}')
+const darkMode = searchParams.get('darkMode') === '1'
+
+const artalkSidebar = new ArtalkSidebar({
+  el: '#ArtalkSidebar',
+  server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366/api' : '../api',
+  pageKey,
+  site,
+  darkMode,
+}, user)

packages/artalk-sidebar/src/item-text-editor.ts

@@ -1,6 +1,6 @@
-import '../style/item-text-editor.less'
+import './style/item-text-editor.less'
 
-import * as Utils from '../lib/utils'
+import * as Utils from 'artalk/src/lib/utils'
 
 interface ItemTextEditorConf {
   initValue?: string

packages/artalk-sidebar/src/sidebar-view.ts

@@ -1,7 +1,7 @@
-import Context from '../context'
-import Component from '../lib/component'
-import * as Utils from '../lib/utils'
-import Comment from './comment'
+import Context from 'artalk/src/context'
+import Component from 'artalk/src/lib/component'
+import * as Utils from 'artalk/src/lib/utils'
+import Comment from 'artalk/src/components/comment'
 
 export default class SidebarView extends Component {
   static viewName = ''

packages/artalk-sidebar/src/sidebar-views/comments-view.ts

@@ -1,7 +1,8 @@
-import Context from '../../context'
+import Context from 'artalk/src/context'
+import * as Utils from 'artalk/src/lib/utils'
+import ListLite from 'artalk/src/components/list-lite'
+
 import SidebarView from '../sidebar-view'
-import * as Utils from '../../lib/utils'
-import ListLite from '../list-lite'
 
 export default class MessageView extends SidebarView {
   static viewName = 'comments'

packages/artalk-sidebar/src/sidebar-views/pages-view.ts

@@ -1,11 +1,12 @@
-import Api from '~/src/api'
-import Context from '../../context'
-import Component from '../../lib/component'
-import * as Utils from '../../lib/utils'
-import * as Ui from '../../lib/ui'
+import Api from 'artalk/src/api'
+import Context from 'artalk/src/context'
+import Component from 'artalk/src/lib/component'
+import * as Utils from 'artalk/src/lib/utils'
+import * as Ui from 'artalk/src/lib/ui'
+import Comment from 'artalk/src/components/comment'
+import Pagination, { PaginationConf } from 'artalk/src/components/pagination'
+
 import PageList from '../admin/page-list'
-import Comment from '../comment'
-import Pagination, { PaginationConf } from '../pagination'
 import SidebarView from '../sidebar-view'
 
 const PAGE_SIZE = 20

packages/artalk-sidebar/src/sidebar-views/setting-view.ts

@@ -1,9 +1,10 @@
-import Api from '~/src/api'
-import Context from '../../context'
-import Component from '../../lib/component'
-import * as Utils from '../../lib/utils'
+import Api from 'artalk/src/api'
+import Context from 'artalk/src/context'
+import Component from 'artalk/src/lib/component'
+import * as Utils from 'artalk/src/lib/utils'
+import Comment from 'artalk/src/components/comment'
+
 import SiteList from '../admin/site-list'
-import Comment from '../comment'
 import SidebarView from '../sidebar-view'
 
 export default class SettingView extends SidebarView {

packages/artalk-sidebar/src/sidebar-views/sites-view.ts

@@ -1,9 +1,10 @@
-import Api from '~/src/api'
-import Context from '../../context'
-import Component from '../../lib/component'
-import * as Utils from '../../lib/utils'
+import Api from 'artalk/src/api'
+import Context from 'artalk/src/context'
+import Component from 'artalk/src/lib/component'
+import * as Utils from 'artalk/src/lib/utils'
+import Comment from 'artalk/src/components/comment'
+
 import SiteList from '../admin/site-list'
-import Comment from '../comment'
 import SidebarView from '../sidebar-view'
 
 export default class SitesView extends SidebarView {

packages/artalk-sidebar/src/sidebar-views/transfer-view.ts

@@ -1,10 +1,11 @@
-import Api from '~/src/api'
-import Context from '../../context'
-import Component from '../../lib/component'
-import * as Utils from '../../lib/utils'
-import * as Ui from '../../lib/ui'
+import Api from 'artalk/src/api'
+import Context from 'artalk/src/context'
+import Component from 'artalk/src/lib/component'
+import * as Utils from 'artalk/src/lib/utils'
+import * as Ui from 'artalk/src/lib/ui'
+import Comment from 'artalk/src/components/comment'
+
 import SiteList from '../admin/site-list'
-import Comment from '../comment'
 import SidebarView from '../sidebar-view'
 
 export default class TransferView extends SidebarView {ß
@@ -40,31 +41,20 @@ export default class TransferView extends SidebarView {ß
       <div class="atk-log"></div>
     </div>
     <div class="atk-form">
-    <div class="atk-label">数据类型</div>
-    <select name="AtkDataType">
-      <option value="artrans">Artrans (数据行囊)</option>
-      <option value="artalk_v1">Artalk v1 (PHP 旧版)</option>
-      <option value="typecho">Typecho</option>
-      <option value="wordpress">WordPress</option>
-      <option value="disqus">Disqus</option>
-      <option value="commento">Commento</option>
-      <option value="valine">Valine</option>
-      <option value="twikoo">Twikoo</option>
-    </select>
-    <div class="atk-label atk-data-file-label">数据文件</div>
-    <input type="file" name="AtkDataFile" accept="text/plain,.json">
+    <div class="atk-label atk-data-file-label">Artrans 数据文件</div>
+    <input type="file" name="AtkDataFile" accept="text/plain,.json,.artrans">
+    <span class="atk-desc">使用「<a href="https://artalk.js.org/guide/transfer.html" target="_blank">转换工具</a>」将评论数据转为 Artrans 格式</span>
     <div class="atk-label">目标站点名</div>
     <input type="text" name="AtkSiteName" placeholder="输入内容..." autocomplete="off">
     <div class="atk-label">目标站点 URL</div>
     <input type="text" name="AtkSiteURL" placeholder="输入内容..." autocomplete="off">
     <div class="atk-label">启动参数（可选）</div>
     <textarea name="AtkPayload"></textarea>
-    <span class="atk-desc">启动参数查阅：“<a href="https://artalk.js.org/guide/transfer.html" target="_blank">文档 · 数据搬家</a>”</span>
+    <span class="atk-desc">参考「<a href="https://artalk.js.org/guide/transfer.html" target="_blank">文档 · 数据迁移</a>」</span>
     <button class="atk-btn" name="AtkSubmit">导入</button>
     </div>`
 
     const $form = this.$el.querySelector<HTMLSelectElement>('.atk-form')!
-    const $dataType = $form.querySelector<HTMLSelectElement>('[name="AtkDataType"]')!
     const $dataFile = $form.querySelector<HTMLInputElement>('[name="AtkDataFile"]')!
     const $dataFileLabel = $form.querySelector<HTMLInputElement>('.atk-data-file-label')!
     const $siteName = $form.querySelector<HTMLInputElement>('[name="AtkSiteName"]')!
@@ -73,27 +63,12 @@ export default class TransferView extends SidebarView {ß
     const $submitBtn = $form.querySelector<HTMLButtonElement>('[name="AtkSubmit"]')!
     const setError = (msg: string) => window.alert(msg)
 
-    $dataType.onchange = () => {
-      if (['typecho'].includes($dataType.value)) {
-        $dataFile.style.display = 'none'
-        $dataFileLabel.style.display = 'none'
-      } else {
-        $dataFile.style.display = ''
-        $dataFileLabel.style.display = ''
-      }
-    }
-
     $submitBtn.onclick = () => {
-      const dataType = $dataType.value.trim()
+      const dataType = 'artrans'
       const siteName = $siteName.value.trim()
       const siteURL = $siteURL.value.trim()
       const payload = $payload.value.trim()
 
-      if (dataType === '') {
-        setError('请选择数据类型')
-        return
-      }
-
       // 请求 payload 参数制备
       let rData: any = {}
       if (payload) {

packages/artalk-sidebar/src/sidebar.html

@@ -1,4 +1,4 @@
-<div class="atk-sidebar">
+<div class="atk-sidebar artalk">
   <div class="atk-sidebar-inner">
     <div class="atk-sidebar-header">
       <span class="atk-avatar">
@@ -7,7 +7,7 @@
       <span class="atk-menu">
         <span class="atk-item atk-active atk-sidebar-title">控制中心</span>
       </span>
-      <div class="atk-sidebar-close"><i class="atk-icon atk-icon-close"></i></div>
+      <div class="atk-sidebar-close" style="opacity: 0;"><i class="atk-icon atk-icon-close"></i></div>
     </div>
     <div class="atk-sidebar-nav">
       <div class="akt-curt-view-btn">

packages/artalk-sidebar/src/sidebar.ts

@@ -1,32 +1,31 @@
-import '../style/sidebar.less'
+import './style/sidebar.less'
 
-import MD5 from '../lib/md5'
-import Context from '../context'
-import Component from '../lib/component'
-import * as Utils from '../lib/utils'
-import * as Ui from '../lib/ui'
-import Comment  from './comment'
-import SidebarHTML from './html/sidebar.html?raw'
-import Layer from './layer'
+import Context from 'artalk/src/context'
+import Component from 'artalk/src/lib/component'
+import * as Utils from 'artalk/src/lib/utils'
+import * as Ui from 'artalk/src/lib/ui'
+import Comment  from 'artalk/src/components/comment'
+import { SiteData } from 'artalk/types/artalk-data'
+import Api from 'artalk/src/api'
+
+import SidebarHTML from './sidebar.html?raw'
 
 import SidebarView from './sidebar-view'
 import CommentsView from './sidebar-views/comments-view'
 import PagesView from './sidebar-views/pages-view'
 import SitesView from './sidebar-views/sites-view'
 import TransferView from './sidebar-views/transfer-view'
-import { SiteData } from '~/types/artalk-data'
-import Api from '../api'
 import SiteListFloater from './admin/site-list-floater'
 import SettingView from './sidebar-views/setting-view'
 
+import MD5 from './lib/md5'
+
 const DEFAULT_VIEW = 'comments'
 const REGISTER_VIEWS: (typeof SidebarView)[] = [
   CommentsView, PagesView, SitesView, TransferView, // SettingView
 ]
 
 export default class Sidebar extends Component {
-  public layer?: Layer
-
   public $header: HTMLElement
   public $headerMenu: HTMLElement
   public $title: HTMLElement
@@ -135,26 +134,6 @@ export default class Sidebar extends Component {
 
   /** 显示 */
   public async show() {
-    this.$el.style.transform = '' // 动画清除，防止二次打开失效
-
-    // 获取 Layer
-    this.layer = new Layer(this.ctx, 'sidebar', this.$el)
-    this.layer.afterHide = () => {
-      // 防止评论框被吞
-      if (this.ctx.conf.editorTravel === true) {
-        this.ctx.trigger('editor-travel-back')
-      }
-    }
-    this.layer.show()
-
-    // viewWrap 滚动条归位
-    this.$viewWrap.scrollTo(0, 0)
-
-    // 执行动画
-    setTimeout(() => {
-      this.$el.style.transform = 'translate(0, 0)'
-    }, 20)
-
     // 第一次加载
     if (this.firstShow) {
       ///////////////////
@@ -218,12 +197,8 @@ export default class Sidebar extends Component {
     }
   }
 
-  /** 隐藏 */
-  public hide() {
-    // 执行动画
-    this.$el.style.transform = ''
-
-    this.layer?.hide()
+  public async hide() {
+    console.log("hide")
   }
 
   /** 切换 View */

packages/artalk-sidebar/src/style/sidebar.less

@@ -4,14 +4,12 @@
 .atk-sidebar {
   @width: 430px;
   position: fixed;
-  z-index: 99999;
+  z-index: 99998;
   top: 0;
   right: 0;
   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);
 
   @media only screen and (max-width: @width) {
     & {
@@ -291,9 +289,9 @@
 
     .atk-desc {
       font-size: 14px;
-      margin-top: 12px;
+      margin-top: 10px;
       margin-left: 15px;
-      margin-bottom: 20px;
+      margin-bottom: 25px;
       display: block;
       color: var(--at-color-meta);
 
@@ -321,11 +319,28 @@
       &[type="file"] {
         border-radius: 2px;
         background: transparent;
-        border-bottom: 2px solid var(--at-color-border);
+        border: 2px solid var(--at-color-border);
         cursor: pointer;
         position: relative;
         padding: 0 15px;
-        margin-bottom: 30px;
+        margin-bottom: 20px;
+
+        &:hover {
+          background: var(--at-color-bg-light);
+          border-color: var(--at-color-bg-light);
+        }
+      }
+
+      &[type="file"]::-webkit-file-upload-button {
+        background: transparent;
+        color: #000;
+        border: 0;
+        border-right: 2px solid #eee;
+        padding: 0 20px 0 5px;
+        line-height: 25px;
+        margin-right: 15px;
+        cursor: pointer;
+        transition: .2s ease;
       }
     }
 

packages/artalk-sidebar/types/index.d.ts

@@ -0,0 +1,3 @@
+import ArtalkSidebar from '../src/artalk-sidebar'
+
+export default ArtalkSidebar

packages/artalk-sidebar/vite.config.ts

@@ -0,0 +1,48 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import tsconfigPaths from 'vite-tsconfig-paths'
+import { version as artalkVersion } from 'artalk/package.json'
+import { version as sidebarVersion } from './package.json'
+
+export default defineConfig({
+  base: './',
+  define: {
+    ARTALK_VERSION: JSON.stringify(artalkVersion),
+    ARTALK_SIDEBAR_VERSION: JSON.stringify(sidebarVersion)
+  },
+  build: {
+    target: 'es2015',
+    outDir: resolve(__dirname, "dist"),
+    minify: 'terser',
+    // lib: {
+    //   entry: resolve(__dirname, 'src/main.ts'),
+    //   name: 'ArtalkSidebar',
+    //   fileName: (format) => ((format == "umd") ? 'ArtalkSidebar.js' : `ArtalkSidebar.${format}.js`),
+    //   formats: ["es", "umd", "iife"]
+    // },
+    rollupOptions: {
+      // 确保外部化处理那些你不想打包进库的依赖
+      // external: ['artalk'],
+      output: {
+        assetFileNames: assetInfo => {
+          if (/\.css$/.test(assetInfo.name)) {
+            return 'ArtalkSidebar.css'
+          }
+          return "[name].[ext]"
+        },
+        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
+        globals: {
+          artalk: 'Artalk'
+        }
+      }
+    }
+  },
+  plugins: [tsconfigPaths()],
+  css: {
+    preprocessorOptions: {
+      less: {
+         additionalData: `@import "./src/style/_variables.less";@import "./src/style/_extend.less";`
+     },
+    },
+  },
+})

packages/artalk/index.html

@@ -54,7 +54,7 @@
       el: '#comments',
       pageKey: 'https://artalk.js.org/',
       pageTitle: 'Artalk Home',
-      server: (location.hostname === 'localhost' || location.hostname === '127.0.0.1') ? 'http://localhost:23366/api' : 'https://artalk.qwqaq.com/api',
+      server: (import.meta.env.MODE === 'development') ? 'http://localhost:23366/api' : 'https://artalk.qwqaq.com/api',
       site: 'ArtalkDemo',
     });
 

packages/artalk/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "artalk",
+  "version": "2.1.5",
+  "license": "GPL-3.0",
+  "description": "A Selfhosted Comment System",
+  "keywords": [
+    "comment-system",
+    "comments-widget",
+    "comment",
+    "comments",
+    "blog"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ArtalkJS/Artalk.git",
+    "directory": "packages/artalk"
+  },
+  "homepage": "https://artalk.js.org",
+  "bugs": "https://github.com/ArtalkJS/Artalk/issue",
+  "main": "./dist/Artalk.js",
+  "unpkg": "./dist/Artalk.iife.js",
+  "jsdelivr": "./dist/Artalk.iife.js",
+  "module": "./dist/Artalk.es.js",
+  "types": "./types/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "yarn lint && vite build",
+    "build:demo": "vite build --config vite-demo.config.ts",
+    "serve": "vite preview",
+    "deploy": "gh-pages -d deploy",
+    "predeploy": "yarn run build && yarn run build:demo && yarn run copy:deploy",
+    "copy:deploy": "cp -r dist deploy && cp CNAME deploy",
+    "lint": "eslint --ext .js,.ts src"
+  },
+  "devDependencies": {
+    "@types/marked": "^4.0.3"
+  },
+  "dependencies": {
+    "hanabi": "^0.4.0",
+    "insane": "^2.6.2",
+    "marked": "^4.0.14"
+  }
+}

packages/artalk/src/api/index.ts

@@ -1,6 +1,7 @@
 import Context from '../context'
 import { CommentData, ListData, UserData, PageData, SiteData, NotifyData } from '~/types/artalk-data'
 import { Fetch, ToFormData, POST, GET } from './request'
+import * as Utils from '../lib/utils'
 
 export default class Api {
   private ctx: Context
@@ -44,6 +45,7 @@ export default class Api {
       content: comment.content,
       rid: comment.rid,
       page_key: comment.page_key,
+      ua: await Utils.getCorrectUserAgent(), // 需要后端支持，获取修正后的 UA (针对 Win11)
     }
 
     if (comment.page_title) params.page_title = comment.page_title

packages/artalk/src/api/request.ts

@@ -21,7 +21,9 @@ export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit,
       resp = await timeoutPromise(timeout || ctx.conf.reqTimeout || 15000, fetch(input, init))
     }
 
-    if (!resp.ok && resp.status !== 401) throw new Error(`请求响应 ${resp.status}`)
+    const noAccessCodes = [401, 400]
+
+    if (!resp.ok && !noAccessCodes.includes(resp.status)) throw new Error(`请求响应 ${resp.status}`)
 
     // 解析获取响应的 json
     let json: any = await resp.json()
@@ -49,7 +51,7 @@ export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit,
           }
         })
       }))
-    } else if ((json.data && json.data.need_login) || resp.status === 401) {
+    } else if ((json.data && json.data.need_login) || noAccessCodes.includes(resp.status)) {
       // 请求需要管理员权限
       json = await (new Promise<any>((resolve, reject) => {
         ctx.trigger('checker-admin', {

packages/artalk/src/artalk.ts

@@ -7,7 +7,7 @@ import defaults from './defaults'
 import CheckerLauncher from './lib/checker'
 import Editor from './components/editor'
 import List from './components/list'
-import Sidebar from './components/sidebar'
+import SidebarLayer from './components/sidebar-layer'
 
 import { GetLayerWrap } from './components/layer'
 import { EventPayloadMap, Handler } from '~/types/event'
@@ -26,7 +26,7 @@ export default class Artalk {
   public checkerLauncher: CheckerLauncher
   public editor: Editor
   public list: List
-  public sidebar: Sidebar
+  public sidebarLayer: SidebarLayer
 
   constructor (customConf: ArtalkConfig) {
     // 配置
@@ -68,8 +68,8 @@ export default class Artalk {
     this.$root.appendChild(this.list.$el)
 
     // 侧边栏
-    this.sidebar = new Sidebar(this.ctx)
-    this.$root.appendChild(this.sidebar.$el)
+    this.sidebarLayer = new SidebarLayer(this.ctx)
+    this.$root.appendChild(this.sidebarLayer.$el)
 
     // 评论获取
     this.list.fetchComments(0)

packages/artalk/src/components/html/sidebar-layer.html

@@ -0,0 +1,8 @@
+<div class="atk-sidebar-layer">
+  <div class="atk-sidebar-inner">
+    <div class="atk-sidebar-header">
+      <div class="atk-sidebar-close"><i class="atk-icon atk-icon-close"></i></div>
+    </div>
+    <div class="atk-sidebar-iframe-wrap"></div>
+  </div>
+</div>

packages/artalk/src/components/sidebar-layer.ts

@@ -0,0 +1,143 @@
+import '../style/sidebar-layer.less'
+
+import Context from '@/context'
+import Component from '@/lib/component'
+import * as Utils from '@/lib/utils'
+import SidebarHTML from './html/sidebar-layer.html?raw'
+import * as Ui from '@/lib/ui'
+import Layer from './layer'
+
+export default class SidebarLayer extends Component {
+  public layer?: Layer
+  public $header: HTMLElement
+  public $closeBtn: HTMLElement
+  public $iframeWrap: HTMLElement
+  public $iframe?: HTMLIFrameElement
+
+  constructor(ctx: Context) {
+    super(ctx)
+
+    this.$el = Utils.createElement(SidebarHTML)
+    this.$header = this.$el.querySelector('.atk-sidebar-header')!
+    this.$closeBtn = this.$header.querySelector('.atk-sidebar-close')!
+    this.$iframeWrap = this.$el.querySelector('.atk-sidebar-iframe-wrap')!
+
+    this.$closeBtn.onclick = () => {
+      this.hide()
+    }
+
+    // event
+    this.ctx.on('sidebar-show', () => (this.show()))
+    this.ctx.on('sidebar-hide', () => (this.hide()))
+    this.ctx.on('user-changed', () => { this.firstShow = true })
+  }
+
+  private firstShow = true
+
+  /** 显示 */
+  public async show() {
+    this.$el.style.transform = '' // 动画清除，防止二次打开失效
+
+    // 获取 Layer
+    if (this.layer == null) {
+      this.layer = new Layer(this.ctx, 'sidebar', this.$el)
+      this.layer.afterHide = () => {
+        // 防止评论框被吞
+        if (this.ctx.conf.editorTravel === true) {
+          this.ctx.trigger('editor-travel-back')
+        }
+      }
+    }
+    this.layer.show()
+
+    // viewWrap 滚动条归位
+    // this.$viewWrap.scrollTo(0, 0)
+
+    // 执行动画
+    setTimeout(() => {
+      this.$el.style.transform = 'translate(0, 0)'
+    }, 20)
+
+    // 第一次加载
+    if (this.firstShow) {
+      this.$iframeWrap.innerHTML = ''
+      this.$iframe = Utils.createElement<HTMLIFrameElement>('<iframe></iframe>')
+
+      const baseURL = (import.meta.env.MODE === 'development')  ? 'http://localhost:23367/'
+        : `${this.conf.server.replace(/\/$/, '')}/../sidebar/`
+      const userData = encodeURIComponent(JSON.stringify(this.ctx.user.data))
+
+      // 测试是否能访问
+      this.iframeLoad(`${baseURL}`
+        + `?pageKey=${encodeURIComponent(this.conf.pageKey)}`
+        + `&site=${encodeURIComponent(this.conf.site || '')}`
+        + `&user=${userData}`
+        + `${((this.conf.darkMode) ? `&darkMode=1` : ``)}`)
+
+      this.$iframeWrap.append(this.$iframe)
+      this.firstShow = false
+    } else {
+      // 暗黑模式
+      if (this.conf.darkMode && !this.$iframe!.src.match(/darkMode=1$/)) {
+        this.iframeLoad(`${this.$iframe!.src}&darkMode=1`)
+      }
+      if (!this.conf.darkMode && this.$iframe!.src.match(/darkMode=1$/)) {
+        this.iframeLoad(this.$iframe!.src.replace(/&darkMode=1$/, ''))
+      }
+    }
+  }
+
+  /** 隐藏 */
+  public hide() {
+    // 执行动画
+    this.$el.style.transform = ''
+
+    this.layer?.hide()
+  }
+
+  public iframeLoad(src: string) {
+    if (!this.$iframe) return
+
+    this.$iframe.src = src
+
+    // 加载动画
+    Ui.showLoading(this.$iframeWrap)
+    this.$iframe.onload = () => {
+      Ui.hideLoading(this.$iframeWrap)
+    }
+
+    this.checkReqStatus(src)
+  }
+
+  loadingTimer: number|null = null
+
+  // 测试可访问性 (由于 iframe 测不准，需要额外请求)
+  public async checkReqStatus(url: string) {
+    if (this.loadingTimer !== null) window.clearTimeout(this.loadingTimer)
+
+    this.loadingTimer = window.setTimeout(async () => {
+      try {
+        await fetch(url)
+      } catch (err) {
+        console.log(err)
+        // 请求失败，显示错误提示
+        const $errAlert = Utils.createElement(
+          `<div class="atk-err-alert">` +
+          `  <div class="atk-title">侧边栏似乎打开失败</div>` +
+          `  <div class="atk-text"><span id="AtkReload">重新加载</span> / <span id="AtkCancel">取消</span></div>` +
+          `</div>`
+        )
+        const $reloadBtn = $errAlert.querySelector<HTMLElement>('#AtkReload')!
+        const $cancelBtn = $errAlert.querySelector<HTMLElement>('#AtkCancel')!
+        $reloadBtn.onclick = () => {
+          this.iframeLoad(url)
+          $errAlert.remove()
+        }
+        $cancelBtn.onclick = () => { // 提供取消按钮，防止误判
+          $errAlert.remove()
+        }
+        this.$iframeWrap.append($errAlert)
+      }
+    }, 2000) // 2s 后开始检测
+  }
+}

packages/artalk/src/lib/detect.js

@@ -104,7 +104,9 @@ function Detect (userAgent) {
         '6.0': 'Vista',
         5.2: 'XP',
         5.1: 'XP',
-        '5.0': '2000'
+        '5.0': '2000',
+        '10.0': '10',
+        '11.0': '11' // 自定的，不是微软官方的判断方法
       }
       return hash[v] || v
     },

packages/artalk/src/lib/utils.ts

@@ -178,3 +178,28 @@ export function marked(ctx: Context, src: string): string {
 
   return markedInstance.parse(src)
 }
+
+/** 获取修正后的 UserAgent */
+export async function getCorrectUserAgent() {
+  const uaRaw = navigator.userAgent
+  const uaData = (navigator as any).userAgentData // @link https://web.dev/migrate-to-ua-ch/
+  if (!uaData || !uaData.getHighEntropyValues) {
+    return uaRaw
+  }
+
+  // microsoft f******k you!!!!!
+  // @link https://docs.microsoft.com/en-us/microsoft-edge/web-platform/how-to-detect-win11
+  let uaGot: any = null
+  try {
+    uaGot = await uaData.getHighEntropyValues(["platformVersion"])
+  } catch (err) { console.error(err); return uaRaw }
+
+  if (uaData.platform !== "Windows") { return uaRaw }
+  const majorPlatformVersion = Number(uaGot.platformVersion.split('.')[0])
+  if (majorPlatformVersion >= 13) {
+    // Win11 样本："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\W+NT\W+10.0/, 'Windows NT 11.0')
+  }
+
+  return uaRaw
+}

packages/artalk/src/style/_extend.less

@@ -0,0 +1,20 @@
+.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);
+  }
+}

packages/artalk/src/style/_variables.less

@@ -0,0 +1,4 @@
+@font-family: "Helvetica Neue", "PingFangSC-Light", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
+@font-size: 14px;
+@line-height: 1.6em;
+@block-radius: 4px;

packages/artalk/src/style/sidebar-layer.less

@@ -0,0 +1,91 @@
+@header-height: 60px;
+@nav-height: 40px;
+
+.atk-sidebar-layer {
+  @width: 430px;
+  position: fixed;
+  z-index: 99999;
+  top: 0;
+  right: 0;
+  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);
+
+  @media only screen and (max-width: @width) {
+    & {
+      width: 100%;
+    }
+  }
+
+  .atk-sidebar-inner {
+    position: relative;
+    height: 100%;
+  }
+
+  // Header
+  .atk-sidebar-header {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .atk-sidebar-close {
+      display: flex;
+      flex-direction: column;
+      width: @header-height;
+      height: @header-height;
+      align-items: center;
+      place-content: center;
+      cursor: pointer;
+      user-select: none;
+      margin-left: 10px;
+
+      &:hover .atk-icon-close {
+        background-color: rgba(232, 17, 35, 0.9);
+      }
+    }
+  }
+
+  .atk-sidebar-iframe-wrap {
+    height: 100%;
+    position: relative;
+
+    iframe {
+      border: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .atk-err-alert {
+      z-index: 9999;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      position: absolute;
+      background: var(--at-color-bg);
+      padding: 40px 30px;
+      width: 80%;
+      text-align: center;
+      border-radius: 4px;
+
+      .atk-title {
+        font-size: 1.4em;
+        margin-bottom: 20px;
+        color: var(--at-color-font);
+      }
+
+      .atk-text {
+        color: var(--at-color-font);
+
+        span {
+          cursor: pointer;
+          color: var(--at-color-main);
+        }
+      }
+    }
+  }
+}

packages/artalk/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "dist",
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "lib": ["esnext", "dom"],
+    "moduleResolution": "node",
+    "strict": true,
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "paths": {
+      "~/*": ["./*"],
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["./src", "./types"]
+}

packages/artalk/types/artalk-config.d.ts

@@ -48,7 +48,7 @@ export default interface ArtalkConfig {
   }
 
   /** 内容限高 */
-  heightLimit: {
+  heightLimit?: {
     /** 评论内容限高 */
     content?: number
 

packages/artalk/types/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

yarn.lock

@@ -91,10 +91,10 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
-"@types/marked@^4.0.1":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.0.1.tgz#d588a7bbc4d6551c5e75249bc106ffda96ae33c5"
-  integrity sha512-ZigEmCWdNUU7IjZEuQ/iaimYdDHWHfTe3kg8ORfKjyGYd9RWumPoOJRQXB0bO+XLkNwzCthW3wUIQtANaEZ1ag==
+"@types/marked@^4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.0.3.tgz#2098f4a77adaba9ce881c9e0b6baf29116e5acc4"
+  integrity sha512-HnMWQkLJEf/PnxZIfbm0yGJRRZYYMhb++O9M36UCTA9z53uPvVoSlAwJr3XOpDEryb7Hwl1qAx/MV6YIW1RXxg==
 
 "@types/node@^16.11.7":
   version "16.11.7"
@@ -1260,10 +1260,10 @@ make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-marked@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-4.0.3.tgz#986760a428d8fd666251ec578429bf9a239a34bc"
-  integrity sha512-vSwKKtw+lCA0uFK/02JT4tBfNxEREpoTg21NoXqcmX0ySBIEyLMYWmt8WPsM61QNFaDBZkggupyNXLsV7uPuRg==
+marked@^4.0.14:
+  version "4.0.14"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-4.0.14.tgz#7a3a5fa5c80580bac78c1ed2e3b84d7bd6fc3870"
+  integrity sha512-HL5sSPE/LP6U9qKgngIIPTthuxC0jrfxpYMZ3LdGDD3vTnLs59m2Z7r6+LNDR3ToqEQdkKd6YaaEfJhodJmijQ==
 
 merge2@^1.3.0:
   version "1.4.1"
@@ -1291,9 +1291,9 @@ minimatch@^3.0.4:
     brace-expansion "^1.1.7"
 
 minimist@^1.2.0:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
+  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
 ms@2.0.0:
   version "2.0.0"
@@ -1311,9 +1311,9 @@ ms@^2.1.1:
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
 nanoid@^3.1.30:
-  version "3.1.30"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
-  integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.2.tgz#c89622fafb4381cd221421c69ec58547a1eec557"
+  integrity sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==
 
 natural-compare@^1.4.0:
   version "1.4.0"