refactor(ui): refactor directory structure (#712)

* refactor(ui): refactor directory structure

* update config files

* update github workflows

* update vscode settings.json

* update docs

* update build scripts

* tidy up

* fix docs build

ui/.eslintrc.cjs → .eslintrc.cjs

@@ -5,7 +5,7 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   env: { browser: true },
   parserOptions: {
-    project: ['./packages/*/tsconfig.json'],
+    project: ['./ui/*/tsconfig.json'],
     tsconfigRootDir: __dirname,
   },
   extends: [
@@ -40,7 +40,7 @@ module.exports = {
   settings: {
     'import/resolver': {
       typescript: {
-        project: ['packages/artalk/tsconfig.json'].map((p) =>
+        project: ['ui/artalk/tsconfig.json'].map((p) =>
           path.resolve(__dirname, p),
         ),
       },

.github/workflows/build-docker.yml

@@ -25,12 +25,10 @@ jobs:
           VERSION=$(git describe --tags --abbrev=0)
           git checkout ${VERSION}
 
-          VERSION_SHORT="$(cut -d '.' -f 1,2 <<< ${VERSION#v})" # (i.e "v1.2.3" -> "1.2")
           COMMIT_HASH="$(git rev-parse --short HEAD)"
           COMMIT_HASH_FULL="$(git rev-parse HEAD)"
 
           echo "VERSION=${VERSION}" >> $GITHUB_ENV
-          echo "VERSION_SHORT=${VERSION_SHORT}" >> $GITHUB_ENV
           echo "COMMIT_HASH=${COMMIT_HASH}" >> $GITHUB_ENV
           echo "COMMIT_HASH_FULL=${COMMIT_HASH_FULL}" >> $GITHUB_ENV
 

.github/workflows/build-frontend.yml

@@ -9,10 +9,6 @@ jobs:
   build_publish:
     runs-on: ubuntu-latest
 
-    defaults:
-      run:
-        working-directory: ./ui  # set for building frontend
-
     steps:
     - name: Checkout Code
       uses: actions/checkout@v3
@@ -33,7 +29,6 @@ jobs:
         node-version: 18.x
         registry-url: https://registry.npmjs.org/
         cache: 'pnpm'
-        cache-dependency-path: './ui/pnpm-lock.yaml'
 
     - name: Install dependencies
       run: pnpm install

.github/workflows/docs-cn.yml

@@ -30,7 +30,7 @@ jobs:
         run: pnpm install
 
       - name: Build Docs
-        run: pnpm docs:build
+        run: pnpm build:docs
 
       - name: Deploy
         uses: TencentCloud/cos-action@v1

.github/workflows/release.yml

@@ -19,7 +19,7 @@ on:
 
 env:
   REPO_DISPATCH_EVENT_TYPE: 'artalk-release'
-  UI_NPM_PKG_FILE: 'ui/packages/artalk/package.json'
+  UI_NPM_PKG_FILE: 'ui/artalk/package.json'
 
 jobs:
   release:

.github/workflows/test-docs.yml

@@ -29,4 +29,4 @@ jobs:
         run: pnpm install
 
       - name: Build Docs
-        run: pnpm docs:build
+        run: pnpm build:docs

.github/workflows/test-frontend.yml

@@ -17,10 +17,6 @@ jobs:
 
     runs-on: ${{ matrix.os }}
 
-    defaults:
-      run:
-        working-directory: ./ui
-
     steps:
       - name: Checkout Code
         uses: actions/checkout@v3
@@ -34,10 +30,9 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
           cache: pnpm
-          cache-dependency-path: './ui/pnpm-lock.yaml'
 
       - name: Install Dependencies
-        run: pnpm --dir ./ui install --frozen-lockfile
+        run: pnpm install --frozen-lockfile
 
       - name: Package Build Test
         run: pnpm build:all

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
-    "eslint.workingDirectories": ["./ui"],
     "cSpell.words": [
         "akismet",
         "artalk",

CONTRIBUTING.md

@@ -41,19 +41,19 @@ The backend program will run by default on port `23366`. You can access it throu
 
 ### Build Frontend
 
-First, you need to install the dependencies for the frontend. Simply run the `cd ui && pnpm install` command to install the dependencies.
+First, you need to install the dependencies for the frontend. Simply run the `pnpm install` command to install the dependencies.
 
-Then, run the `cd ui && pnpm dev` to build and run the frontend, and you can pass startup parameters to the program using `ARGS="--port 5173" pnpm dev`.
+Then, run the `pnpm dev` to build and run the frontend, and you can pass startup parameters to the program using `ARGS="--port 5173" pnpm dev`.
 
 The frontend program will run by default on port `5173`, and you can access it in a browser at `http://localhost:5173`. The frontend testing client will, by default, request the backend on port `23366`, so it's essential to keep the backend on this port.
 
 The frontend program is divided into the main program and a sidebar program, with the sidebar program running on a separate port, which is `23367`.
 
 ### Development Workflow
 
-In most cases, to set up a complete development instance, you need to navigate to the Artalk Repo directory and then execute `make dev`. This will run the backend on port `23366`. Then, execute `cd ui && pnpm dev`, which will run the frontend on port `5173`. You can optionally execute `pnpm dev:sidebar` to run the sidebar frontend on port `23367`. For frontend development, you need to access `http://localhost:5173` in your browser to perform your development and testing.
+In most cases, to set up a complete development instance, you need to navigate to the Artalk Repo directory and then execute `make dev`. This will run the backend on port `23366`. Then, execute `pnpm dev`, which will run the frontend on port `5173`. You can optionally execute `pnpm dev:sidebar` to run the sidebar frontend on port `23367`. For frontend development, you need to access `http://localhost:5173` in your browser to perform your development and testing.
 
-When you make changes to the frontend code, you can build the complete frontend program using `cd ui && pnpm build:all`. The JavaScript and CSS code can be found in `ui/packages/artalk/dist`.
+When you make changes to the frontend code, you can build the complete frontend program using `pnpm build:all`. The JavaScript and CSS code can be found in `ui/artalk/dist`.
 
 When you make changes to the backend code, running `make all` will build the complete backend program. Note that since the backend program also embeds the frontend code, the `scripts/build-frontend.sh` script will run during backend program building, which includes the embedded frontend main program and sidebar frontend program. If you are interested, you can explore the complete frontend build process in the `Makefile` code.
 

docs/docs/README.md

@@ -7,8 +7,8 @@ Documentation of Artalk
 ## Build
 
 ```bash
-pnpm docs:dev
-pnpm docs:build
+pnpm dev:docs
+pnpm build:docs
 ```
 
 ## Deploy

docs/docs/develop/event.md

@@ -30,7 +30,7 @@
 | `sidebar-hide`       | 侧边栏隐藏          |
 
 
-事件声明代码：[@ArtalkJS/Artalk - types/event.ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/packages/artalk/types/event.ts)
+事件声明代码：[@ArtalkJS/Artalk - types/event.ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/artalk/types/event.ts)
 
 ## 添加事件监听
 

docs/docs/develop/index.md

@@ -19,10 +19,10 @@
 由于 Artalk 正处于开发阶段，使用此文档中 `API`、`Event` 前请务必检查时效性。
 
  - `API` 部分参考源码
-   * [@ArtalkJS/Artalk - src/api/](https://github.com/ArtalkJS/Artalk/tree/master/ui/packages/artalk/src/api)
+   * [@ArtalkJS/Artalk - src/api/](https://github.com/ArtalkJS/Artalk/tree/master/ui/artalk/src/api)
    * [@ArtalkJS/Artalk - server/server.go](https://github.com/ArtalkJS/Artalk/blob/master/server/server.go)
  - `UI` 及 `Event` 部分参考源码
-   * [@ArtalkJS/Artalk - src/artalk.ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/packages/artalk/src/artalk.ts)
-   * [@ArtalkJS/Artalk - types/event.ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/packages/artalk/types/event.ts)
+   * [@ArtalkJS/Artalk - src/artalk.ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/artalk/src/artalk.ts)
+   * [@ArtalkJS/Artalk - types/event.ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/artalk/types/event.ts)
 
 通过 Artalk 提供的 `API` 和 `Event`，你可以实现很多高级功能，比如编写评论管理机器人、评论提醒推送插件等。Artalk 并不为此提供技术指导，但鼓励你参考此处的文档自行定制。

docs/docs/develop/plugs.md

@@ -46,19 +46,19 @@ Context 对象包含了 Artalk 的上下文信息。
 Context API 目前仍不稳定，开发可能会有变动，升级请关注 CHANGELOG。
 :::
 
-参考：[@artalk/types/context.ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/packages/artalk/types/context.ts)
+参考：[@artalk/types/context.ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/artalk/types/context.ts)
 
 Artalk 拥有完整的 TypeScript 类型定义，你可以通过编辑器的自动补全来查看 API。
 
 ## 示例插件
 
 Artalk 有很多内置的插件，你可以参考它们的源码来开发自己的插件。
 
-[@ArtalkJS/Artalk - src/plugins](https://github.com/ArtalkJS/Artalk/tree/master/ui/packages/artalk/src/plugins)
+[@ArtalkJS/Artalk - src/plugins](https://github.com/ArtalkJS/Artalk/tree/master/ui/artalk/src/plugins)
 
 我们还提供了一些外置的插件，同样可以参考：
 
 | 插件 | 说明 |
 | --- | --- |
-| [@artalk/plugin-katex](https://github.com/ArtalkJS/Artalk/tree/master/ui/packages/plugin-katex) | LaTeX 公式插件 |
-| [@artalk/plugin-lightbox](https://github.com/ArtalkJS/Artalk/tree/master/ui/packages/plugin-lightbox) | 图片灯箱插件 |
+| [@artalk/plugin-katex](https://github.com/ArtalkJS/Artalk/tree/master/ui/plugin-katex) | LaTeX 公式插件 |
+| [@artalk/plugin-lightbox](https://github.com/ArtalkJS/Artalk/tree/master/ui/plugin-lightbox) | 图片灯箱插件 |

docs/docs/guide/frontend/config.md

@@ -6,8 +6,8 @@ const artalk = Artalk.init({ ... })
 artalk.update({ ... })
 ```
 
-- 默认配置：[defaults.ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/packages/artalk/src/defaults.ts)
-- 声明文件：[config.ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/packages/artalk/types/config.ts)
+- 默认配置：[defaults.ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/artalk/src/defaults.ts)
+- 声明文件：[config.ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/artalk/types/config.ts)
 
 ## 轻松配置
 
@@ -179,7 +179,7 @@ JS DELIVR 在中国大陆的 [ICP 牌照已被吊销](https://github.com/jsdeliv
 artalk.setDarkMode(true)
 ```
 
-> 参考代码：“[index.html](https://github.com/ArtalkJS/Artalk/blob/master/ui/packages/artalk/index.html#L97-L150)”
+> 参考代码：“[index.html](https://github.com/ArtalkJS/Artalk/blob/master/ui/artalk/index.html#L97-L150)”
 
 可设置为 `"auto"`，Artalk 将监听 `(prefers-color-scheme: dark)` 根据用户操作系统判断自动切换夜间模式。
 

docs/docs/guide/frontend/i18n.md

@@ -22,7 +22,7 @@ locale 配置项格式遵循 Unicode BCP 47 规范，默认为 "zh-CN" (简体
 |翻译内容|语言文件目录|模板文件|
 |-|-|-|
 |后端程序|[/i18n/[LANG].yml](https://github.com/ArtalkJS/Artalk/tree/master/i18n)|[zh-CN.yml](https://github.com/ArtalkJS/Artalk/blob/master/i18n/zh-CN.yml)|
-|前端界面|[/ui/packages/artalk/src/i18n/[LANG].ts](https://github.com/ArtalkJS/Artalk/tree/master/ui/packages/artalk/src/i18n)|[zh-CN.ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/packages/artalk/src/i18n/zh-CN.ts)|
+|前端界面|[/ui/artalk/src/i18n/[LANG].ts](https://github.com/ArtalkJS/Artalk/tree/master/ui/artalk/src/i18n)|[zh-CN.ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/artalk/src/i18n/zh-CN.ts)|
 |配置文件|[/conf/artalk.example.[LANG].yml](https://github.com/ArtalkJS/Artalk/tree/master/conf)|[artalk.example.zh-CN.yml](https://github.com/ArtalkJS/Artalk/blob/master/conf/artalk.example.zh-CN.yml)
 |说明文档|[/docs/[LANG]/**\/*.md](https://github.com/ArtalkJS/Artalk/tree/master/docs)|[/docs/**\/*.md](https://github.com/ArtalkJS/Artalk/tree/master/docs)
 
@@ -52,7 +52,7 @@ Artalk.init({
 
 ### 前端自定义 locale 内容
 
-在前端可传入 Object 类型，按照 [模板文件](https://github.com/ArtalkJS/Artalk/blob/master/ui/packages/artalk/src/i18n/zh-CN.ts) 中的 Keys 编写自定义 locale 内容。
+在前端可传入 Object 类型，按照 [模板文件](https://github.com/ArtalkJS/Artalk/blob/master/ui/artalk/src/i18n/zh-CN.ts) 中的 Keys 编写自定义 locale 内容。
 
 ```js
 Artalk.init({

docs/docs/guide/frontend/lightbox.md

@@ -18,7 +18,7 @@ Artalk LightBox 插件能帮助你将网站**现有的图片灯箱**功能自动
 
 目前自动集成支持：[LightGallery](https://github.com/sachinchoolur/lightGallery) [v2.5.0] / [FancyBox](https://github.com/fancyapps/fancybox) [v4.0.27] / [lightbox2](https://github.com/lokesh/lightbox2) [v2.11.3]
 
-对于还未适配的图片灯箱，欢迎提交 PR -> [查看代码](https://github.com/ArtalkJS/Artalk/blob/master/packages/plugin-lightbox/main.ts)
+对于还未适配的图片灯箱，欢迎提交 PR -> [查看代码](https://github.com/ArtalkJS/Artalk/blob/master/ui/plugin-lightbox/main.ts)
 
 ::: details 附：图片灯箱依赖 CDN 资源
 

docs/docs/package.json

@@ -10,12 +10,12 @@
   },
   "private": true,
   "scripts": {
-    "docs:dev": "vitepress dev",
-    "docs:build": "vitepress build",
-    "docs:serve": "vitepress serve"
+    "dev:docs": "vitepress dev",
+    "build:docs": "vitepress build",
+    "serve:docs": "vitepress serve"
   },
   "devDependencies": {
-    "artalk": "^2.7.2",
+    "artalk": "workspace:^",
     "markdown-it-for-inline": "^2.0.1",
     "sass": "^1.69.5",
     "vitepress": "1.0.0-rc.32"

netlify.toml

@@ -3,4 +3,4 @@
 
 [build]
   publish = "docs/docs/.vitepress/dist"
-  command = "pnpm docs:build"
+  command = "pnpm build:docs"

package.json

@@ -2,9 +2,42 @@
   "name": "artalk-monorepo",
   "private": true,
   "homepage": "https://artalk.js.org",
+  "packageManager": "pnpm@8.12.1",
   "scripts": {
-    "docs:build": "pnpm -F=docs-landing build && pnpm -F=docs-swagger swagger:build && pnpm -F=docs docs:build && pnpm docs:patch",
-    "docs:patch": "cp -rf docs/landing/dist/* docs/swagger/dist/* docs/docs/.vitepress/dist"
+    "dev": "pnpm -F artalk dev",
+    "dev:sidebar": "pnpm -F @artalk/artalk-sidebar dev",
+    "build": "pnpm -F artalk build",
+    "build:sidebar": "pnpm -F @artalk/artalk-sidebar build",
+    "build:all": "pnpm build && pnpm build:sidebar",
+    "build:docs": "pnpm build && pnpm -F=docs-landing build && pnpm -F=docs-swagger swagger:build && pnpm -F=docs build:docs && pnpm patch:docs",
+    "patch:docs": "cp -rf docs/landing/dist/* docs/swagger/dist/* docs/docs/.vitepress/dist"
   },
-  "packageManager": "pnpm@8.12.1"
+  "devDependencies": {
+    "@playwright/test": "^1.40.1",
+    "@rollup/plugin-dynamic-import-vars": "2.1.2",
+    "@types/node": "20.10.5",
+    "@typescript-eslint/eslint-plugin": "6.15.0",
+    "@typescript-eslint/parser": "6.15.0",
+    "autoprefixer": "10.4.16",
+    "eslint": "8.56.0",
+    "eslint-config-airbnb-base": "15.0.0",
+    "eslint-config-airbnb-typescript": "17.1.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-import-resolver-typescript": "3.6.1",
+    "eslint-plugin-compat": "4.2.0",
+    "eslint-plugin-import": "2.29.1",
+    "postcss": "8.4.32",
+    "prettier": "3.1.1",
+    "rollup": "4.9.1",
+    "sass": "1.69.5",
+    "terser": "5.26.0",
+    "typescript": "5.3.3",
+    "vite": "5.0.10",
+    "vite-plugin-checker": "0.6.2",
+    "vite-plugin-dts": "3.6.4",
+    "vite-tsconfig-paths": "4.2.2"
+  },
+  "browserslist": [
+    "supports es6 and supports es6-class and supports es6-generators and supports es6-module-dynamic-import and supports es6-module and supports es6-number and supports es6-string-includes"
+  ]
 }