artalk 2.1.6 → 2.1.9

package/index.html

@@ -31,7 +31,7 @@
   </style>
 </head>
 <body>
-  <div class="card billboard artalk-fade-in">
+  <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">
@@ -42,11 +42,11 @@
       <a href="https://github.com/ArtalkJS/Artalk" target="_blank"><img src="https://img.shields.io/github/stars/ArtalkJS/Artalk?style=flat-square"></a>
     </div>
   </div>
-  <div class="card artalk-fade-in">
+  <div class="card atk-fade-in">
     <div id="comments"></div>
   </div>
-  <div class="float-btn to-night artalk-fade-in">Blink</div>
-  <div class="float-btn to-top artalk-fade-in" style="display: none;">TOP</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'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "artalk",
-  "version": "2.1.6",
+  "version": "2.1.9",
   "license": "GPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [
@@ -22,16 +22,6 @@
   "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"
   },
@@ -39,5 +29,15 @@
     "hanabi": "^0.4.0",
     "insane": "^2.6.2",
     "marked": "^4.0.14"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "pnpm lint && vite build",
+    "build:demo": "vite build --config vite-demo.config.ts",
+    "serve": "vite preview",
+    "deploy": "gh-pages -d deploy",
+    "predeploy": "pnpm build && pnpm build:demo && pnpm copy:deploy",
+    "copy:deploy": "cp -r dist deploy && cp CNAME deploy",
+    "lint": "eslint --ext .js,.ts src"
   }
-}
+}

package/src/api/index.ts

@@ -264,6 +264,29 @@ export default class Api {
     return p.pv as number
   }
 
+  /** 图片上传 */
+  public async imgUpload(file: File) {
+    const params: any = {
+      name: this.ctx.user.data.nick,
+      email: this.ctx.user.data.email,
+      page_key: this.ctx.conf.pageKey,
+    }
+
+    if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
+
+    const form = ToFormData(params)
+    form.set('file', file)
+
+    const init: RequestInit = {
+      method: 'POST',
+      body: form
+    }
+
+    const json = await Fetch(this.ctx, `${this.baseURL}/img-upload`, init)
+    return ((json.data || {}) as any) as { img_file: string, img_url: string }
+
+  }
+
   // ============================
   //  验证码
   // ============================

package/src/artalk.ts

@@ -12,6 +12,7 @@ import SidebarLayer from './components/sidebar-layer'
 import { GetLayerWrap } from './components/layer'
 import { EventPayloadMap, Handler } from '~/types/event'
 import Api from './api'
+import * as Utils from './lib/utils'
 
 /**
  * Artalk
@@ -59,6 +60,7 @@ export default class Artalk {
 
     // 组件初始化
     this.checkerLauncher = new CheckerLauncher(this.ctx)
+    Utils.initMarked(this.ctx) // 初始化 marked
 
     // 编辑器
     this.editor = new Editor(this.ctx)
@@ -80,6 +82,13 @@ export default class Artalk {
 
     // 其他
     this.initPV()
+
+    // 插件初始化
+    Artalk.Plugins.forEach(plugin => {
+      if (typeof plugin === 'function') {
+        plugin(this.ctx)
+      }
+    })
   }
 
   /** 事件绑定 · 初始化 */
@@ -148,6 +157,7 @@ export default class Artalk {
   /** 暗黑模式 · 设定 */
   public setDarkMode(darkMode: boolean) {
     this.ctx.conf.darkMode = darkMode
+    this.ctx.trigger('conf-updated')
     this.initDarkMode()
   }
 
@@ -179,4 +189,12 @@ export default class Artalk {
   public trigger<K extends keyof EventPayloadMap>(name: K, payload?: EventPayloadMap[K]) {
     this.ctx.trigger(name, payload, 'external')
   }
+
+  /** Plugins */
+  protected static Plugins: ((ctx: Context) => void)[] = []
+
+  /** Enable Plugin */
+  public static Use(plugin: ((ctx: Context) => void)) {
+    this.Plugins.push(plugin)
+  }
 }

package/src/components/comment.ts

@@ -136,6 +136,11 @@ export default class Comment extends Component {
       $badge.remove()
     }
 
+    if (this.data.is_pinned) {
+      const $pinnedBadge = Utils.createElement(`<span class="atk-item atk-pinned-badge">置顶</span>`) // 置顶徽章
+      $nick.insertAdjacentElement('afterend', $pinnedBadge)
+    }
+
     const $date = this.$el.querySelector<HTMLElement>('.atk-date')!
     $date.innerText = this.getDateFormatted()
     $date.setAttribute('data-atk-comment-date', String(+new Date(this.data.date)))
@@ -272,6 +277,16 @@ export default class Comment extends Component {
     delBtn.setClick(() => {
       this.adminDelete(delBtn)
     })
+
+    // 绑定置顶按钮事件
+    const pinnedBtn = new ActionBtn({
+      text: () => (this.data.is_pinned ? '取消置顶' : '置顶'),
+      adminOnly: true
+    })
+    pinnedBtn.appendTo(this.$actions)
+    pinnedBtn.setClick(() => {
+      this.adminEdit('pinned', pendingBtn)
+    })
   }
   //#endregion
 
@@ -404,9 +419,9 @@ export default class Comment extends Component {
     })
   }
 
-  /** 管理员 - 评论折叠 */
-  adminEdit(type: 'collapsed'|'pending', btnElem: ActionBtn) {
-    if (btnElem.isLoading) return // 若正在折叠中
+  /** 管理员 - 评论状态修改 */
+  adminEdit(type: 'collapsed'|'pending'|'pinned', btnElem: ActionBtn) {
+    if (btnElem.isLoading) return // 若正在修改中
 
     btnElem.setLoading(true, '修改中...')
 
@@ -416,6 +431,8 @@ export default class Comment extends Component {
       modify.is_collapsed = !modify.is_collapsed
     } else if (type === 'pending') {
       modify.is_pending = !modify.is_pending
+    } else if (type === 'pinned') {
+      modify.is_pinned = !modify.is_pinned
     }
 
     new Api(this.ctx).commentEdit(modify).then((comment) => {

package/src/components/editor.ts

@@ -21,6 +21,7 @@ export default class Editor extends Component {
   public $plugWrap: HTMLElement
   public $bottom: HTMLElement
   public $plugBtnWrap: HTMLElement
+  public $imgUploadBtn?: HTMLElement
   public $submitBtn: HTMLButtonElement
   public $notifyWrap: HTMLElement
 
@@ -63,6 +64,7 @@ export default class Editor extends Component {
     this.ctx.on('editor-notify', (f) => (this.showNotify(f.msg, f.type)))
     this.ctx.on('editor-travel', ($el) => (this.travel($el)))
     this.ctx.on('editor-travel-back', () => (this.travelBack()))
+    this.ctx.on('conf-updated', () => (this.refreshUploadBtn()))
   }
 
   initLocalStorage () {
@@ -200,7 +202,7 @@ export default class Editor extends Component {
     // 依次实例化 plug
     this.LOADABLE_PLUG_LIST.forEach((PlugObj) => {
       // 切换按钮
-      const btnElem = Utils.createElement(`<span class="atk-plug-btn">${PlugObj.BtnHTML}</span>`)
+      const btnElem = Utils.createElement(`<span class="atk-plug-btn" data-plug-name="${PlugObj.Name}">${PlugObj.BtnHTML}</span>`)
       this.$plugBtnWrap.appendChild(btnElem)
       btnElem.addEventListener('click', () => {
         let plug = this.plugList[PlugObj.Name]
@@ -244,6 +246,8 @@ export default class Editor extends Component {
         btnElem.classList.add('active')
       })
     })
+
+    this.initImgUpload()
   }
 
   /** 关闭编辑器插件 */
@@ -253,6 +257,116 @@ export default class Editor extends Component {
     this.openedPlugName = null
   }
 
+  /** 允许的图片格式 */
+  allowImgExts = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp']
+
+  /** 初始化图片上传功能 */
+  initImgUpload() {
+    this.$imgUploadBtn = Utils.createElement(`<span class="atk-plug-btn">图片</span>`)
+    this.$plugBtnWrap.querySelector('[data-plug-name="preview"]')!.before(this.$imgUploadBtn) // 显示在预览图标之前
+
+    // 按钮点击
+    this.$imgUploadBtn.onclick = () => {
+      // 选择图片
+      const $input = document.createElement('input')
+      $input.type = 'file'
+      $input.accept = this.allowImgExts.map(o => `.${o}`).join(',')
+      $input.onchange = () => {
+        (async () => { // 解决阻塞 UI 问题
+          if (!$input.files || $input.files.length === 0) return
+          const file = $input.files[0]
+          this.uploadImg(file)
+        })()
+      }
+      $input.click() // 显示选择图片对话框
+    }
+
+    // 统一从 FileList 获取文件并上传图片方法
+    const uploadFromFileList = (files?: FileList) => {
+      if (!files) return
+
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i]
+        this.uploadImg(file)
+      }
+    }
+
+    // 拖拽图片
+    // @link https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
+    // 阻止浏览器的默认释放行为
+    this.$textarea.addEventListener('dragover', (evt) => {
+      evt.stopPropagation()
+      evt.preventDefault()
+    })
+
+    this.$textarea.addEventListener('drop', (evt) => {
+      const files = evt.dataTransfer?.files
+      if (files?.length) {
+        evt.preventDefault()
+        uploadFromFileList(files)
+      }
+    })
+
+    // 粘贴图片
+    this.$textarea.addEventListener('paste', (evt) => {
+      const files = evt.clipboardData?.files
+      if (files?.length) {
+        evt.preventDefault()
+        uploadFromFileList(files)
+      }
+    })
+  }
+
+  /** 刷新图片上传按钮 */
+  refreshUploadBtn() {
+    if (!this.$imgUploadBtn) return
+
+    if (!this.ctx.conf.imgUpload) {
+      this.$imgUploadBtn.setAttribute('atk-only-admin-show', '')
+      this.ctx.trigger('check-admin-show-el')
+    }
+  }
+
+  async uploadImg(file: File) {
+    const fileExt = /[^.]+$/.exec(file.name)
+    if (!fileExt || !this.allowImgExts.includes(fileExt[0])) return
+
+    // 未登录提示
+    if (!this.ctx.user.checkHasBasicUserInfo()) {
+      this.showNotify('填入你的名字邮箱才能上传哦', 'w')
+      return
+    }
+
+    // 插入图片前换一行
+    let insertPrefix = '\n'
+    if (this.$textarea.value.trim() === '') insertPrefix = ''
+
+    // 插入占位加载文字
+    const uploadPlaceholderTxt = `${insertPrefix}![](Uploading ${file.name}...)`
+    this.insertContent(uploadPlaceholderTxt)
+
+    // 上传图片
+    let resp: any
+    try {
+      resp = await new Api(this.ctx).imgUpload(file)
+    } catch (err: any) {
+      console.error(err)
+      this.showNotify(`图片上传失败，${err.msg}`, 'e')
+    }
+    if (!!resp && resp.img_url) {
+      let imgURL = resp.img_url as string
+
+      // 若为相对路径，加上 artalk server
+      if (!Utils.isValidURL(imgURL)) imgURL = Utils.getURLBasedOnApi(this.ctx, imgURL)
+
+      // 上传成功插入图片
+      this.setContent(this.$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}![](${imgURL})`))
+    } else {
+      // 上传失败删除加载文字
+      this.setContent(this.$textarea.value.replace(uploadPlaceholderTxt, ''))
+    }
+  }
+
   insertContent (val: string) {
     if ((document as any).selection) {
       this.$textarea.focus();
@@ -287,7 +401,8 @@ export default class Editor extends Component {
     this.cancelReply()
   }
 
-  getContent () {
+  /** 获取最终用于 submit 的数据 */
+  getFinalContent () {
     let content = this.getContentOriginal()
 
     // 表情包处理
@@ -304,7 +419,7 @@ export default class Editor extends Component {
   }
 
   getContentMarked () {
-    return Utils.marked(this.ctx, this.getContent())
+    return Utils.marked(this.ctx, this.getFinalContent())
   }
 
   initBottomPart () {
@@ -363,7 +478,7 @@ export default class Editor extends Component {
   }
 
   async submit () {
-    if (this.getContent().trim() === '') {
+    if (this.getFinalContent().trim() === '') {
       this.$textarea.focus()
       return
     }
@@ -374,7 +489,7 @@ export default class Editor extends Component {
 
     try {
       const nComment = await new Api(this.ctx).add({
-        content: this.getContent(),
+        content: this.getFinalContent(),
         nick: this.user.data.nick,
         email: this.user.data.email,
         link: this.user.data.link,

package/src/components/html/list.html

@@ -1,8 +1,10 @@
 <div class="atk-list">
   <div class="atk-list-header">
     <div class="atk-comment-count">
-      <span class="atk-comment-count-num">0</span>
-      条评论
+      <div class="atk-text">
+        <span class="atk-comment-count-num">0</span>
+        条评论
+      </div>
     </div>
     <div class="atk-right-action">
       <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show>关闭评论</span>

package/src/components/list-lite.ts

@@ -119,6 +119,11 @@ export default class ListLite extends Component {
     // 版本检测
     if (this.ctx.conf.versionCheck && this.versionCheck(data.api_version)) return
 
+    // 图片上传功能
+    if (data.conf && typeof data.conf.img_upload === "boolean") {
+      this.ctx.conf.imgUpload = data.conf.img_upload
+    }
+
     // 导入数据
     this.importComments(data.comments)
 
@@ -130,6 +135,7 @@ export default class ListLite extends Component {
 
     this.ctx.trigger('unread-update', { notifies: data.unread || [] })
     this.ctx.trigger('comments-loaded')
+    this.ctx.trigger('conf-updated')
 
     if (this.onAfterLoad) this.onAfterLoad(data)
   }
@@ -481,6 +487,7 @@ export default class ListLite extends Component {
       ignoreBtn.onclick = () => {
         Ui.setError(this.ctx, null)
         this.ctx.conf.versionCheck = false
+        this.ctx.trigger('conf-updated')
         this.fetchComments(0)
       }
       errEl.append(ignoreBtn)

package/src/components/list.ts

@@ -12,6 +12,8 @@ export default class List extends ListLite {
   private $closeCommentBtn!: HTMLElement
   private $openSidebarBtn!: HTMLElement
   private $unreadBadge!: HTMLElement
+  private $commentCount!: HTMLElement
+  private $dropdownWrap?: HTMLElement
 
   constructor (ctx: Context) {
     const el = Utils.createElement(ListHTML)
@@ -40,6 +42,13 @@ export default class List extends ListLite {
     // 操作按钮
     this.initListActionBtn()
 
+    this.$commentCount = this.$el.querySelector('.atk-comment-count')!
+
+    // 评论列表排序 Dropdown 下拉选择层
+    if (this.ctx.conf.listSort) {
+      this.initDropdown()
+    }
+
     // copyright
     this.$el.querySelector<HTMLElement>('.atk-copyright')!.innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${ARTALK_VERSION}">Artalk</a>`
 
@@ -171,4 +180,58 @@ export default class List extends ListLite {
       this.$unreadBadge.style.display = 'none'
     }
   }
+
+  /** 初始化选择下拉层 */
+  protected initDropdown() {
+    this.$dropdownWrap = this.$commentCount
+    this.$commentCount.classList.add('atk-dropdown-wrap')
+
+    // 插入图标
+    this.$dropdownWrap.append(Utils.createElement(`<span class="atk-arrow-down-icon"></span>`))
+
+    const reloadUseParamsEditor = (func: (p: any) => void) => {
+      this.paramsEditor = (p) => { func(p) }
+      this.fetchComments(0)
+    }
+
+    // 下拉列表
+    const dropdownList = [
+      ['最新', () => { reloadUseParamsEditor(p => { p.sort_by = 'date_desc' }) }],
+      ['最热', () => { reloadUseParamsEditor(p => { p.sort_by = 'vote' }) }],
+      ['最早', () => { reloadUseParamsEditor(p => { p.sort_by = 'date_asc' }) }],
+      ['作者', () => { reloadUseParamsEditor(p => { p.view_only_admin = true }) }],
+    ]
+
+    // 列表项点击事件
+    let curtActive = 0 // 当前选中
+    const onItemClick = (i: number, $item: HTMLElement, name: string, action: Function) => {
+      action()
+
+      // set active
+      curtActive = i
+      $dropdown.querySelectorAll('.active').forEach((e) => { e.classList.remove('active') })
+      $item.classList.add('active')
+
+      // 关闭层 (临时消失，取消 :hover)
+      $dropdown.style.display = 'none'
+      setTimeout(() => { $dropdown.style.display = '' }, 80)
+    }
+
+    // 生成列表元素
+    const $dropdown = Utils.createElement(`<ul class="atk-dropdown atk-fade-in"></ul>`)
+    dropdownList.forEach((item, i) => {
+      const name = item[0] as string
+      const action = item[1] as Function
+
+      const $item = Utils.createElement(`<li class="atk-dropdown-item"><span></span></li>`)
+      const $link = $item.querySelector<HTMLElement>('span')!
+      $link.innerText = name
+      $link.onclick = () => { onItemClick(i, $item, name, action) }
+      $dropdown.append($item)
+
+      if (i === curtActive) $item.classList.add('active') // 默认选中项
+    })
+
+    this.$dropdownWrap.append($dropdown)
+  }
 }

package/src/components/sidebar-layer.ts

@@ -64,14 +64,15 @@ export default class SidebarLayer extends Component {
       this.$iframe = Utils.createElement<HTMLIFrameElement>('<iframe></iframe>')
 
       const baseURL = (import.meta.env.MODE === 'development')  ? 'http://localhost:23367/'
-        : `${this.conf.server.replace(/\/$/, '')}/../sidebar/`
+        : Utils.getURLBasedOnApi(this.ctx, 'sidebar/')
       const userData = encodeURIComponent(JSON.stringify(this.ctx.user.data))
 
-      // 测试是否能访问
+      const location = window.location
       this.iframeLoad(`${baseURL}`
         + `?pageKey=${encodeURIComponent(this.conf.pageKey)}`
         + `&site=${encodeURIComponent(this.conf.site || '')}`
         + `&user=${userData}`
+        + `&referer=${encodeURIComponent(`${location.protocol}//${location.host}${location.pathname}`)}`
         + `${((this.conf.darkMode) ? `&darkMode=1` : ``)}`)
 
       this.$iframeWrap.append(this.$iframe)

package/src/context.ts

@@ -1,3 +1,4 @@
+import { marked as libMarked } from 'marked'
 import User from './lib/user'
 import ArtalkConfig from '~/types/artalk-config'
 import { EventPayloadMap, Event, EventScopeType, Handler } from '~/types/event'
@@ -39,4 +40,6 @@ export default class Context {
       .map((evt) => evt.handler)
       .forEach((handler) => handler(payload as any))
   }
+
+  public markedInstance!: typeof libMarked
 }

package/src/defaults.ts

@@ -17,6 +17,7 @@ const defaults: ArtalkConfig = {
   vote: true,
   voteDown: false,
   uaBadge: true,
+  listSort: true,
   pvEl: '#ArtalkPV',
   flatMode: 'auto',
   maxNesting: 3,
@@ -36,6 +37,7 @@ const defaults: ArtalkConfig = {
     children: 400,
   },
 
+  imgUpload: true,
   reqTimeout: 15000,
   versionCheck: true,
 }

package/src/lib/utils.ts

@@ -140,43 +140,44 @@ export function versionCompare(a: string, b: string) {
   return 0
 }
 
-let markedInstance: typeof libMarked
-export function marked(ctx: Context, src: string): string {
-  if (!markedInstance) {
-    const renderer = new libMarked.Renderer()
-    const linkRenderer = renderer.link
-    renderer.link = (href, title, text) => {
-      const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`);
-      const html = linkRenderer.call(renderer as any, href, title, text);
-      return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
-    }
-
-    // @see https://github.com/markedjs/marked/blob/4afb228d956a415624c4e5554bb8f25d047676fe/src/Tokenizer.js#L329
-    const nMarked = libMarked
-    libMarked.setOptions({
-      renderer,
-      highlight: (code) => hanabi(code),
-      pedantic: false,
-      gfm: true,
-      breaks: true,
-      smartLists: true,
-      smartypants: true,
-      xhtml: false,
-      sanitize: true,
-      sanitizer: (html) => insane(html, {
-        ...insane.defaults,
-        allowedAttributes: {
-          ...insane.defaults.allowedAttributes,
-          img: ['src', 'atk-emoticon']
-        },
-      }),
-      silent: true,
-    })
-
-    markedInstance = nMarked
+/** 初始化 marked */
+export function initMarked(ctx: Context) {
+  const renderer = new libMarked.Renderer()
+  const linkRenderer = renderer.link
+  renderer.link = (href, title, text) => {
+    const localLink = href?.startsWith(`${window.location.protocol}//${window.location.hostname}`);
+    const html = linkRenderer.call(renderer as any, href, title, text);
+    return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
   }
 
-  return markedInstance.parse(src)
+  // @see https://github.com/markedjs/marked/blob/4afb228d956a415624c4e5554bb8f25d047676fe/src/Tokenizer.js#L329
+  const nMarked = libMarked
+  libMarked.setOptions({
+    renderer,
+    highlight: (code) => hanabi(code),
+    pedantic: false,
+    gfm: true,
+    breaks: true,
+    smartLists: true,
+    smartypants: true,
+    xhtml: false,
+    sanitize: true,
+    sanitizer: (html) => insane(html, {
+      ...insane.defaults,
+      allowedAttributes: {
+        ...insane.defaults.allowedAttributes,
+        img: ['src', 'atk-emoticon']
+      },
+    }),
+    silent: true,
+  })
+
+  ctx.markedInstance = nMarked
+}
+
+/** 解析 markdown */
+export function marked(ctx: Context, src: string): string {
+  return ctx.markedInstance.parse(src)
 }
 
 /** 获取修正后的 UserAgent */
@@ -203,3 +204,23 @@ export async function getCorrectUserAgent() {
 
   return uaRaw
 }
+
+/** 是否为完整的 URL */
+export function isValidURL(urlRaw: string) {
+  // @link https://www.rfc-editor.org/rfc/rfc3986
+  let url: URL
+  try {
+    url = new URL(urlRaw)
+  } catch (_) { return false }
+  return url.protocol === "http:" || url.protocol === "https:"
+}
+
+/** 获取基于 conf.server 的 URL */
+export function getURLBasedOnApi(ctx: Context, path: string) {
+  return `${ctx.conf.server.replace(/\/api\/?$/, '')}/${path.replace(/^\//, '')}`
+}
+
+/** 获取基于某个 baseURL 的 URL */
+export function getURLBasedOn(baseURL: string, path: string) {
+  return `${baseURL.replace(/\/$/, '')}/${path.replace(/^\//, '')}`
+}