@esershnr/artalk-sidebar 1.0.3

package/src/i18n/zh-TW.ts

@@ -0,0 +1,97 @@
+import type { MessageSchema } from '../i18n'
+
+export const zhTW: MessageSchema = {
+  ctrlCenter: '控制中心',
+  msgCenter: '訊息中心',
+  noContent: '無內容',
+  searchHint: '關鍵字搜尋...',
+  allSites: '所有網站',
+  siteManage: '網站管理',
+  comment: '評論',
+  page: '頁面',
+  user: '用戶',
+  site: '網站',
+  transfer: '轉移',
+  settings: '設置',
+  all: '全部',
+  pending: '待審',
+  personal: '個人',
+  mentions: '提及',
+  mine: '我的',
+  admin: '管理員',
+  create: '建立',
+  import: '匯入',
+  export: '匯出',
+  settingSaved: '設定已儲存',
+  settingSaveFailed: '設定儲存失敗',
+  settingNotice: '注：某些設定選項可能需要手動重啟才能生效',
+  apply: '套用',
+  updateComplete: '更新完畢',
+  updateReady: '準備更新...',
+  opFailed: '操作失敗',
+  updateTitle: '擷取標題',
+  uploading: '上傳中',
+  cancel: '取消',
+  back: '返回',
+  cacheClear: '清除快取',
+  cacheWarm: '預熱快取',
+  editTitle: '編輯標題',
+  switchKey: 'KEY 變更',
+  commentAllowAll: '允許任何人評論',
+  commentOnlyAdmin: '僅允許管理員評論',
+  config: '配置文件',
+  envVarControlHint: '由環境變數 {key} 參照',
+  userAdminHint: '該用戶具有管理員權限',
+  userInConfHint: '該用戶存在於配置文件中',
+  userInConfCannotEditHint: '暫不支持線上編輯配置文件中的用戶，請手動修改配置文件',
+  userDeleteConfirm:
+    '該操作將刪除 用戶："{name}" 郵箱："{email}" 所有評論，包括其評論下面他人的回覆評論，是否繼續？',
+  userDeleteManuallyHint: '用戶已從數據庫刪除，請手動編輯配置文件並刪除用戶',
+  pageDeleteConfirm: '確認刪除頁面 "{title}"？將會刪除所有相關數據',
+  siteDeleteConfirm: '該操作將刪除網站："{name}" 及其下所有數據，是否繼續？',
+  siteNameInputHint: '請輸入網站名稱',
+  edit: '編輯',
+  delete: '刪除',
+  siteCount: '共 {count} 個網站',
+  createSite: '建立網站',
+  siteName: '網站名稱',
+  siteUrls: '網站 URLs',
+  multiSepHint: '使用逗號分隔多個',
+  add: '新增',
+  rename: '重命名',
+  inputHint: '輸入文字...',
+  userCreate: '建立用戶',
+  userEdit: '用戶編輯',
+  comments: '評論',
+  last: '最後',
+  show: '展開',
+  username: '用戶名',
+  email: '郵箱',
+  link: '連結',
+  badgeText: '徽章文字',
+  badgeColor: '徽章顏色',
+  role: '身份角色',
+  normal: '一般',
+  password: '密碼',
+  passwordEmptyHint: '留空表示不變更密碼',
+  emailNotify: '郵件通知',
+  enabled: '啟用',
+  disabled: '停用',
+  save: '儲存',
+  dataFile: '資料檔案',
+  artransfer: '轉移工具',
+  targetSiteName: '目標網站名稱',
+  targetSiteURL: '目標網站 URL',
+  payload: '有效載荷',
+  optional: '選填',
+  uploadReadyToImport: '檔案已上傳並準備匯入',
+  artransferToolHint: '使用 {link} 將評論數據轉換為 Artrans 格式。',
+  moreDetails: '查看詳情',
+  loginFailure: '登入失敗',
+  login: '登入',
+  logout: '登出',
+  logoutConfirm: '確定要登出嗎？',
+  loginSelectHint: '請選擇您要登入的帳號：',
+}
+
+export default zhTW

package/src/i18n-en.ts

@@ -0,0 +1,99 @@
+export const en = {
+  ctrlCenter: 'Admin',
+  msgCenter: 'Messages',
+  noContent: 'No Content',
+  searchHint: 'Search by keywords...',
+  allSites: 'All Sites',
+  siteManage: 'Site Management',
+  comment: 'Comment',
+  page: 'Page',
+  user: 'User',
+  site: 'Site',
+  transfer: 'Transfer',
+  settings: 'Settings',
+  all: 'All',
+  pending: 'Pending',
+  personal: 'Personal',
+  mentions: 'Mentions',
+  mine: 'Mine',
+  admin: 'Admin',
+  create: 'Create',
+  import: 'Import',
+  export: 'Export',
+  settingSaved: 'Setting saved',
+  settingSaveFailed: 'Setting save failed',
+  settingNotice: 'Note: Some config options may require a manual reboot to take effect.',
+  apply: 'Apply',
+  updateComplete: 'Update complete',
+  updateReady: 'Ready to update...',
+  opFailed: 'Operation failed',
+  updateTitle: 'Fetch Title',
+  uploading: 'Uploading',
+  cancel: 'Cancel',
+  back: 'Back',
+  cacheClear: 'Cache Clear',
+  cacheWarm: 'Cache Warm',
+  editTitle: 'Edit Title',
+  switchKey: 'Switch Key',
+  commentAllowAll: 'Anyone Comment',
+  commentOnlyAdmin: 'Admin Comment Only',
+  config: 'Config',
+  envVarControlHint: 'Referenced by the environment variable {key}',
+  userAdminHint: 'Admin user',
+  userInConfHint: 'This user is defined in config file',
+  edit: 'Edit',
+  delete: 'Delete',
+  siteCount: 'Total {count} Sites',
+  createSite: 'Create Site',
+  siteName: 'Site Name',
+  siteUrls: 'Site URLs',
+  multiSepHint: 'multiple separated by commas',
+  add: 'Add',
+  rename: 'Rename',
+  inputHint: 'Input text...',
+  userCreate: 'Create User',
+  userEdit: 'Edit User',
+  userInConfCannotEditHint:
+    'Cannot edit user in config file, please modify the config file manually',
+  userDeleteConfirm:
+    'This operation will delete all comments of user: "{name}" email: "{email}", including the reply comments under his comments. Continue?',
+  userDeleteManuallyHint:
+    'User has been deleted from the database, please manually edit the config file and delete the user',
+  pageDeleteConfirm:
+    'This operation will delete the page: "{title}" and all data under it. Continue?',
+  siteDeleteConfirm:
+    'This operation will delete the site: "{name}" and all data under it. Continue?',
+  siteNameInputHint: 'Please enter the site name',
+  comments: 'Comments',
+  last: 'Last',
+  show: 'Show',
+  username: 'Username',
+  email: 'Email',
+  link: 'Link',
+  badgeText: 'Badge Text',
+  badgeColor: 'Badge Color',
+  role: 'Role',
+  normal: 'Normal',
+  password: 'Password',
+  passwordEmptyHint: 'leave blank not change your password',
+  emailNotify: 'Email notification',
+  enabled: 'Enabled',
+  disabled: 'Disabled',
+  save: 'Save',
+  dataFile: 'Data File',
+  artransfer: 'Artransfer',
+  targetSiteName: 'Target Site Name',
+  targetSiteURL: 'Target Site URL',
+  payload: 'Payload',
+  optional: 'Optional',
+  uploadReadyToImport: 'File uploaded and is ready for import',
+  artransferToolHint: 'Use the {link} to convert data to Artrans format.',
+  moreDetails: 'More details',
+  loginFailure: 'Login failure',
+  login: 'Login',
+  logout: 'Logout',
+  logoutConfirm: 'Are you sure you want to log out?',
+  loginSelectHint: 'Please select the account you wish to log into:',
+}
+
+export default en

package/src/i18n.ts

@@ -0,0 +1,37 @@
+import { createI18n, type I18n, type Locale } from 'vue-i18n'
+import { en } from './i18n-en'
+
+export type MessageSchema = typeof en
+
+export function setupI18n() {
+  const i18n = createI18n({
+    legacy: false, // use i18n in Composition API
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages: { en } as any,
+  })
+
+  const setLocale = async (value: string) => {
+    await loadLocaleMessages(i18n, value)
+    i18n.global.locale.value = value
+  }
+
+  return { i18n, setLocale }
+}
+
+export async function loadLocaleMessages(i18n: I18n, locale: Locale) {
+  if (i18n.global.availableLocales.includes(locale)) return
+
+  // Load locale messages with dynamic import
+  // @see https://vitejs.dev/guide/features#dynamic-import
+  const messages = await import(`./i18n/${locale}.ts`)
+    .then((r: any) => r.default || r)
+    .catch(() => {
+      console.error(`Failed to load locale messages for "${locale}"`)
+      return
+    })
+
+  // Set locale and locale message
+  i18n.global.setLocaleMessage(locale, messages)
+  return nextTick()
+}

package/src/lib/promise-polyfill.ts

@@ -0,0 +1,9 @@
+Promise.withResolvers ??= function <T>() {
+  let resolve: PromiseWithResolvers<T>['resolve']
+  let reject: PromiseWithResolvers<T>['reject']
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+  return { promise, resolve: resolve!, reject: reject! }
+}

package/src/lib/settings-option.ts

@@ -0,0 +1,186 @@
+import YAML from 'yaml'
+type Pair = YAML.Pair<YAML.Scalar<any>, YAML.Scalar<any> & YAML.YAMLMap<any, any>>
+
+export interface OptionNode {
+  name: string
+  path: string
+  level: number
+  default?: string | number | boolean
+  selector?: string[]
+  type: 'string' | 'number' | 'boolean' | 'object' | 'array'
+  title: string
+  subTitle?: string
+  items?: OptionNode[]
+}
+
+function extractItemComment(item: Pair, index: number, parentPair?: Pair): string {
+  let comment = ''
+  if (index === 0 && parentPair) comment = parentPair?.value?.commentBefore || ''
+  else comment = item?.key?.commentBefore || ''
+  return comment
+}
+
+export function getTree(yamlObj: YAML.Document.Parsed): OptionNode {
+  const tree: OptionNode = {
+    name: '',
+    path: '',
+    title: '',
+    level: 0,
+    type: 'object',
+    items: [],
+  }
+
+  const traverse = (
+    pairs: Pair[],
+    parentNode: OptionNode = tree,
+    parentPath: string[] = [],
+    parentPair?: Pair,
+  ) => {
+    pairs.forEach((item, index) => {
+      // get key and value
+      const key = item.key?.value
+      const value = item.value?.toJSON ? item.value.toJSON() : undefined
+      if (!key) return
+
+      // get path
+      const path = [...parentPath, key]
+
+      // get comment
+      const comment = extractItemComment(item, index, parentPair)
+
+      // get type
+      const probablyTypes = ['string', 'number', 'boolean', 'object']
+      const type =
+        (Array.isArray(value) ? 'array' : probablyTypes.find((t) => typeof value === t)) ||
+        undefined
+
+      if (!type) return
+
+      // get default value
+      const defaultValue = type !== 'object' ? value : undefined
+
+      // create new node
+      const node: OptionNode = {
+        name: key,
+        path: path.join('.'),
+        level: parentNode ? parentNode.level + 1 : 0,
+        ...extractComment(key, comment),
+        default: defaultValue,
+        type: type as any,
+      }
+
+      // traverse children
+      if (type === 'object' && item.value?.items) {
+        node.items = []
+        traverse(item.value.items, node, path, item)
+      }
+
+      // add to parent
+      if (!parentNode.items) parentNode.items = []
+      parentNode.items.push(node)
+    })
+  }
+
+  traverse((yamlObj.contents as YAML.YAMLMap<any, any>)?.items)
+
+  return tree
+}
+
+/**
+ * Get flatten meta data from yaml object
+ *
+ * @param yamlObj
+ * @returns
+ */
+export function getFlattenNodes(tree: OptionNode): {
+  [path: string]: OptionNode
+} {
+  const metas: { [path: string]: OptionNode } = {}
+
+  const traverse = (node: OptionNode) => {
+    metas[node.path] = node
+    if (node.items) node.items.forEach(traverse)
+  }
+
+  traverse(tree)
+
+  return metas
+}
+
+/**
+ * Extract option info from comment
+ *
+ * @param name Option name
+ * @param comment Option comment in YAML
+ * @returns Option info
+ */
+function extractComment(name: string, comment: string) {
+  comment = comment.trim()
+
+  // ignore comments begin and end with `--`
+  comment = comment.replace(/--(.*?)--/gm, '')
+
+  let title = ''
+  let subTitle = ''
+  let selector: string[] | undefined
+
+  const stReg = /\(.*?\)/gm
+  title = comment.replace(stReg, '').trim()
+  const stFind = stReg.exec(comment)
+  subTitle = stFind ? stFind[0].substring(1, stFind[0].length - 1) : ''
+  if (!title) {
+    title = snakeToCamel(name)
+  }
+
+  const optReg = /\[.*?\]/gm
+  const optFind = optReg.exec(title)
+  if (optFind) {
+    try {
+      selector = JSON.parse(optFind[0])
+    } catch (err) {
+      console.error(err)
+    }
+    title = title.replace(optReg, '').trim()
+  }
+
+  return {
+    title,
+    subTitle,
+    selector,
+  }
+}
+
+function snakeToCamel(str: string) {
+  return str.toLowerCase().replace(/([_][a-z]|^[a-z])/g, (group) => group.slice(-1).toUpperCase())
+}
+
+/**
+ * Patch the option value by meta data
+ *
+ * @param value User custom value
+ * @param meta Option meta data
+ * @returns Patched value
+ */
+export function patchOptionValue(value: any, node: OptionNode) {
+  // console.log(value, node)
+  switch (node.type) {
+    case 'boolean':
+      if (value === 'true') value = true
+      else if (value === 'false') value = false
+      break
+    case 'string':
+      if (!node.selector)
+        // ignore option item
+        value = String(value).trim()
+      break
+    case 'number':
+      if (!isNaN(Number(value))) value = Number(value)
+      break
+    case 'array':
+      // trim string array
+      if (Array.isArray(value)) value = value.map((v) => (typeof v === 'string' ? v.trim() : v))
+      break
+  }
+
+  return value
+}

package/src/lib/settings-sensitive.ts

@@ -0,0 +1,44 @@
+/**
+ * List of sensitive config paths.
+ *
+ * (which should be hidden in the UI)
+ */
+export const SensitiveConfigPaths = [
+  'app_key',
+  'admin_notify.ding_talk.secret',
+  'admin_notify.line.channel_access_token',
+  'admin_notify.line.channel_secret',
+  'admin_notify.lark.webhook_url',
+  'admin_notify.slack.oauth_token',
+  'admin_notify.telegram.api_token',
+  'admin_notify.webhook.url',
+  'admin.notify.bark.server',
+  'auth.apple.client_secret',
+  'auth.auth0.client_secret',
+  'auth.discord.client_secret',
+  'auth.facebook.client_secret',
+  'auth.gitea.client_secret',
+  'auth.github.client_secret',
+  'auth.gitlab.client_secret',
+  'auth.google.client_secret',
+  'auth.line.client_secret',
+  'auth.mastodon.client_secret',
+  'auth.microsoft.client_secret',
+  'auth.patreon.client_secret',
+  'auth.slack.client_secret',
+  'auth.tiktok.client_secret',
+  'auth.twitter.client_secret',
+  'auth.wechat.client_secret',
+  'auth.steam.api_key',
+  'captcha.geetest.captcha_key',
+  'captcha.hcaptcha.secret_key',
+  'captcha.recaptcha.secret_key',
+  'captcha.turnstile.secret_key',
+  'db.password',
+  'email.ali_dm.access_key_secret',
+  'email.smtp.password',
+]
+
+export function isSensitiveConfigPath(path: string) {
+  return SensitiveConfigPaths.includes(path)
+}

package/src/lib/settings.ts

@@ -0,0 +1,94 @@
+import YAML from 'yaml'
+import { getFlattenNodes, getTree, type OptionNode } from './settings-option'
+
+export class Settings {
+  private tree: OptionNode
+  private flatten: { [path: string]: OptionNode }
+  private customs = shallowRef<YAML.Document.Parsed<YAML.ParsedNode>>()
+  private envs = shallowRef<{ [key: string]: string }>()
+
+  constructor(yamlObj: YAML.Document.Parsed) {
+    this.tree = getTree(yamlObj)
+    this.flatten = getFlattenNodes(this.tree)
+  }
+
+  getTree() {
+    return this.tree
+  }
+
+  getNode(path: string) {
+    return this.flatten[path]
+  }
+
+  getCustoms() {
+    return this.customs
+  }
+
+  setCustoms(yamlStr: string) {
+    this.customs.value = YAML.parseDocument(yamlStr)
+  }
+
+  setEnvs(envs: string[]) {
+    const envsObj: { [key: string]: string } = {}
+    envs.forEach((env) => {
+      const [key, value] = env.split('=')
+      envsObj[key] = value
+    })
+    this.envs.value = envsObj
+  }
+
+  getEnv(key: string) {
+    return this.envs.value?.[key] || null
+  }
+
+  getEnvByPath(path: string) {
+    // replace `.` to `_` and uppercase
+    // replace `ATK_TRUSTED_DOMAINS_0` to `ATK_TRUSTED_DOMAINS`
+    // replace `ATK_ADMIN_USERS_0_NAME` to `ATK_ADMIN_USERS`
+    return this.getEnv(
+      'ATK_' +
+        path
+          .replace(/\./g, '_')
+          .toUpperCase()
+          .replace(/(_\d+?_\w+|_\d+)$/, ''),
+    )
+  }
+
+  getCustom(path: string) {
+    const env = this.getEnvByPath(path)
+    if (env) return env
+    return this.customs.value?.getIn(path.split('.')) as any
+  }
+
+  setCustom(path: string, value: any) {
+    const pathArr = path.split('.')
+
+    this.makeSureObject(pathArr)
+
+    this.customs.value?.setIn(pathArr, value)
+  }
+
+  // @see https://github.com/eemeli/yaml/issues/174#issuecomment-632281283
+  private makeSureObject(pathArr: string[]) {
+    for (let i = pathArr.length - 1; i >= 1; i--) {
+      const parentPath = pathArr.slice(0, -i)
+
+      const parentNode = this.customs.value?.getIn(parentPath)
+      if (!parentNode) {
+        this.customs.value?.setIn(parentPath, new YAML.YAMLMap())
+      }
+    }
+  }
+}
+
+// -------------------------------------------------------
+
+export * from './settings-option'
+
+// Singleton instance
+let instance: Settings
+
+export default {
+  init: (yamlObj: YAML.Document.Parsed) => (instance = new Settings(yamlObj)),
+  get: () => instance,
+}

package/src/main.ts

@@ -0,0 +1,65 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import Artalk from '@esershnr/artalk'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { routes } from 'vue-router/auto-routes'
+import { setupI18n } from './i18n'
+import '@esershnr/artalk/Artalk.css'
+import './style.scss'
+import App from './App.vue'
+import { setArtalk } from './global'
+import { setupArtalk, syncArtalkUser } from './artalk'
+import './lib/promise-polyfill'
+
+// I18n
+// @see https://vue-i18n.intlify.dev
+const { i18n, setLocale } = setupI18n()
+
+// Router
+// @see https://github.com/posva/unplugin-vue-router
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+})
+
+// Pinia
+// @see https://pinia.vuejs.org
+const pinia = createPinia()
+
+// Artalk
+// @see https://artalk.js.org
+const artalkLoader = () =>
+  new Promise<Artalk>((notifyArtalkLoaded) => {
+    let artalkLoaded = false
+    let artalk: Artalk | null = null
+
+    Artalk.use((ctx) => {
+      // When artalk is ready, notify the loader and load the locale
+      ctx.watchConf(['locale'], async (conf) => {
+        if (typeof conf.locale === 'string' && conf.locale !== 'auto') await setLocale(conf.locale) // update i18n locale
+
+        if (!artalkLoaded) {
+          artalkLoaded = true
+          notifyArtalkLoaded(artalk!)
+        }
+      })
+    })
+
+    artalk = setupArtalk()
+  })
+
+// Mount Vue app
+;(async () => {
+  const artalk = await artalkLoader()
+  setArtalk(artalk)
+
+  const app = createApp(App)
+  app.use(i18n)
+  app.use(router)
+  app.use(pinia)
+
+  // user sync from artalk to sidebar
+  await syncArtalkUser(artalk.ctx, router)
+
+  app.mount('#app')
+})()