chore: fix docker build ci workflow

* chore: release v2.7.3

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: qwqcode <22412567+qwqcode@users.noreply.github.com>

.dockerignore

@@ -0,0 +1 @@
+node_modules

.eslintignore

@@ -8,7 +8,7 @@ coverage
 vite*.config*
 
 # ignore all js files
-**/*.js
+**/*.*js
 
 # ignore all config files
 *.config.ts

.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/actions/comment/action.yml

@@ -0,0 +1,25 @@
+name: Comment issue
+description: Create comment on a issue
+
+inputs:
+  issue_number:
+    required: true
+    description: The issue number you want to comment
+  content:
+    required: true
+    description: The content of comment
+
+runs:
+  using: "composite"
+  steps:
+    - uses: actions/github-script@v7
+      env:
+        STDOUT: ${{ inputs.content }}
+      with:
+        script: |
+          github.rest.issues.createComment({
+              issue_number: ${{ inputs.issue_number }},
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: process.env.STDOUT
+          })

.github/workflows/build-app.yml

@@ -1,13 +1,18 @@
 name: Build App
-run-name: Build Go App and Publish
 
 on:
-  repository_dispatch:
-    types: [artalk-release]
+  workflow_call:
+    inputs:
+      version:
+        required: true
+        type: string
+      dry_run:
+        required: true
+        type: boolean
 
 env:
-  GO_VERSION: '1.21.3'
-  PKG_NAME: 'github.com/ArtalkJS/Artalk'
+  GO_VERSION: 1.21.3
+  PKG_NAME: github.com/ArtalkJS/Artalk
   DOCKER_IMG: ghcr.io/goreleaser/goreleaser-cross
   CACHE_DIR: /tmp/cache/docker-image
 
@@ -17,18 +22,12 @@ jobs:
 
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v3
-
-      - name: Checkout latest tag
-        run: |
-          # fetch tags
-          git fetch --prune --unshallow --tags -f
-
-          # checkout latest version
-          VERSION=$(git describe --tags --abbrev=0)
-          git checkout ${VERSION}
-
-          echo "VERSION=${VERSION}" >> $GITHUB_ENV
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.version }}
+          # `go-releaser` will read the semver version from git tag name
+          # `git-chglog` will diff the tag and generate changelog
+          fetch-depth: 0
 
       # disable cache because the err `no space left on device`
       # - name: Docker Image Cache
@@ -64,11 +63,14 @@ jobs:
           echo "GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }}" > local/.release-env
 
           # changelog
-          git-chglog --config .github/chglog/config.yml ${VERSION} > local/release-notes.md
+          git-chglog --config .github/chglog/config.yml ${{ inputs.version }} > local/release-notes.md
 
           # copy config file
           cp conf/artalk.example.yml artalk.yml
 
+      - name: Print Relase Notes
+        run: cat local/release-notes.md
+
       - name: Build and Release
         run: |
           docker run \
@@ -81,4 +83,4 @@ jobs:
             -e CGO_ENABLED=1 \
             --env-file local/.release-env \
             ghcr.io/goreleaser/goreleaser-cross:v${GO_VERSION} \
-            release --release-notes local/release-notes.md
+            release --release-notes local/release-notes.md ${{ inputs.dry_run && '--skip=publish' || '' }}

.github/workflows/build-docker.yml

@@ -1,9 +1,17 @@
 name: Build Docker
-run-name: Build Docker Image and Publish
 
 on:
-  repository_dispatch:
-    types: [artalk-release]
+  workflow_call:
+    inputs:
+      version:
+        required: true
+        type: string
+      dry_run:
+        required: true
+        type: boolean
+      target:
+        required: true
+        type: string
 
 env:
   DOCKER_IMG: artalk/artalk-go
@@ -14,58 +22,14 @@ jobs:
 
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v3
-
-      - name: Checkout latest tag
-        run: |
-          # fetch tags
-          git fetch --prune --unshallow --tags -f
-
-          # checkout latest version
-          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
-
-      # https://github.com/docker/login-action
-      - name: Login to DockerHub
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@v2
+        uses: actions/checkout@v4
         with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      # https://github.com/docker/setup-qemu-action
-      - name: Setup QEMU
-        id: qemu
-        uses: docker/setup-qemu-action@v2
-        with:
-          platforms: 'amd64,arm64'
-
-      # https://github.com/docker/setup-buildx-action
-      - name: Setup Docker Buildx
-        id: buildx
-        uses: docker/setup-buildx-action@v2
-
-      - name: Cache Docker layers
-        uses: actions/cache@v3
-        with:
-          path: /tmp/.buildx-cache
-          key: ${{ runner.os }}-buildx-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-buildx-
+          ref: ${{ inputs.version }}
 
       # https://github.com/docker/metadata-action
       - name: Gen docker meta
         id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           context: git
           images: |
@@ -77,34 +41,42 @@ jobs:
             type=semver,pattern={{major}}.{{minor}}
             type=sha
 
+      # https://github.com/docker/login-action
+      - name: Login to DockerHub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      # https://github.com/docker/setup-qemu-action
+      - name: Setup QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: ${{ inputs.target }}
+
+      # https://github.com/docker/setup-buildx-action
+      - name: Setup Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      # Build UI outside of Docker to speed up cross-platform builds
+      - name: Build UI
+        run: |
+          make build-frontend
+
       # https://github.com/docker/build-push-action
       - name: Build and Push
-        id: docker_build
-        uses: docker/build-push-action@v4
+        id: build
+        uses: docker/build-push-action@v5
         with:
-          builder: ${{ steps.buildx.outputs.name }}
-          context: ./
+          push: ${{ !inputs.dry_run }}
+          context: .
           file: ./Dockerfile
-          platforms: 'linux/amd64,linux/arm64'
-          push: true
+          build-args: |
+            APP_VERSION=${{ inputs.version }}
+            SKIP_UI_BUILD=true
+          platforms: ${{ inputs.target }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=local,src=/tmp/.buildx-cache
-          cache-to: type=local,dest=/tmp/.buildx-cache
-
-      - name: Comment build info in commit
-        uses: actions/github-script@v6
-        env:
-          STDOUT: "🐳 Published new docker image: [${{ env.DOCKER_IMG }}](https://hub.docker.com/r/${{ env.DOCKER_IMG }}) (${{ env.VERSION }} / sha-${{ env.COMMIT_HASH }})"
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            github.rest.repos.createCommitComment({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              commit_sha: process.env.COMMIT_HASH_FULL, // context.sha
-              body: process.env.STDOUT
-            })
 
       - name: Print image digest
-        run: echo ${{ steps.docker_build.outputs.digest }}
+        run: echo ${{ steps.build.outputs.digest }}

.github/workflows/build-done.yml

@@ -0,0 +1,31 @@
+name: Build Done
+
+on:
+  workflow_call:
+    inputs:
+      version:
+        required: true
+        type: string
+      dry_run:
+        required: true
+        type: boolean
+      issue_number:
+        required: true
+        type: number
+
+jobs:
+  done:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.version }}
+
+      - name: Comment done info
+        uses: ./.github/actions/comment
+        if: ${{ inputs.issue_number != 0 }}
+        with:
+          issue_number: ${{ inputs.issue_number }}
+          content: |-
+            🎉 Finished build and publish ${{ inputs.version }} ([NPM Package](https://www.npmjs.com/package/artalk?activeTab=versions) / [Docker Image](https://hub.docker.com/r/artalk/artalk-go/tags) / [Github Release](https://github.com/ArtalkJS/Artalk/releases/tag/${{ inputs.version }})).

.github/workflows/build-frontend.yml

@@ -1,58 +0,0 @@
-name: Build Frontend
-run-name: Build Frontend and Publish
-
-on:
-  repository_dispatch:
-    types: [artalk-release]
-
-jobs:
-  build_publish:
-    runs-on: ubuntu-latest
-
-    defaults:
-      run:
-        working-directory: ./ui  # set for building frontend
-
-    steps:
-    - name: Checkout Code
-      uses: actions/checkout@v3
-
-    - name: Checkout latest tag
-      run: |
-        git fetch --prune --unshallow --tags -f
-        git checkout $(git describe --tags --abbrev=0)
-
-    - name: Use pnpm
-      uses: pnpm/action-setup@v2
-      with:
-        version: 8
-
-    - name: Setup node
-      uses: actions/setup-node@v3
-      with:
-        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
-
-    - name: Build
-      run: pnpm build
-
-    - name: Publish
-      run: pnpm publish -F artalk --no-git-checks
-      env:
-        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-    # GitHub Packages
-    #
-    # Setup .npmrc file to publish to GitHub Packages
-    # - uses: actions/setup-node@v2
-    #   with:
-    #     registry-url: 'https://npm.pkg.github.com'
-    # # Publish to GitHub Packages
-    # - run: npm publish
-    #   env:
-    #     NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/build-tagging.yml

@@ -0,0 +1,60 @@
+name: Build Pre Tagging
+
+on:
+  workflow_call:
+    inputs:
+      dry_run:
+        required: true
+        type: boolean
+      issue_number:
+        required: true
+        type: number
+    outputs:
+      version:
+        description: 'Version'
+        value: ${{ jobs.tagging.outputs.version }}
+
+jobs:
+  tagging:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get release version
+        run: |
+          # `github.head_ref` only exists for pull_request events
+          REF="${{ github.head_ref || github.ref }}"
+          VERSION="${REF#release/}"
+          VERSION="${VERSION#refs/tags/}"
+
+          echo "Version: $VERSION"
+          echo "VERSION=$VERSION" >> $GITHUB_ENV
+
+          if [[ ! "$VERSION" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+            echo "Invalid version format: $VERSION, please check git ref or tag."
+            exit 1
+          fi
+
+      - name: Checkout Code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Create Tag
+        run: |
+          if [ ! $(git tag -l "${VERSION}") ]; then
+            git config user.name github-actions[bot]
+            git config user.email 41898282+github-actions[bot]@users.noreply.github.com
+            git tag -a $VERSION -m "Release $VERSION"
+            git push origin $VERSION
+          else
+            echo "Skip creating tag $VERSION, already exists."
+          fi
+
+      - name: Comment tag info to PR
+        uses: ./.github/actions/comment
+        if: ${{ inputs.issue_number != 0 }}
+        with:
+          issue_number: ${{ inputs.issue_number }}
+          content: |-
+            🔖 Tagged version [${{ env.VERSION }}](https://github.com/ArtalkJS/Artalk/tree/${{ env.VERSION }}) and updated the [CHANGELOG.md](https://github.com/ArtalkJS/Artalk/blob/master/CHANGELOG.md).
+    outputs:
+      version: ${{ env.VERSION }}

.github/workflows/build-ui.yml

@@ -0,0 +1,55 @@
+name: Build UI
+
+on:
+  workflow_call:
+    inputs:
+      version:
+        required: true
+        type: string
+      dry_run:
+        required: true
+        type: boolean
+
+jobs:
+  build_publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.version }}
+
+      - name: Use pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+          registry-url: https://registry.npmjs.org/
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm build
+
+      - name: Publish
+        run: pnpm publish -F artalk --no-git-checks ${{ inputs.dry_run && '--dry-run' || '' }}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      # GitHub Packages
+      #
+      # Setup .npmrc file to publish to GitHub Packages
+      # - uses: actions/setup-node@v4
+      #   with:
+      #     registry-url: 'https://npm.pkg.github.com'
+      # # Publish to GitHub Packages
+      # - run: npm publish
+      #   env:
+      #     NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/build.yml

@@ -0,0 +1,82 @@
+name: Build and Publish
+run-name: Build and Publish (${{ github.head_ref || github.ref }}) ${{ inputs.dry_run && '(🧪 Dry-Run)' || '' }}
+
+on:
+  pull_request:
+    branches: [master]
+    types: [closed]
+
+  workflow_dispatch:
+    inputs:
+      dry_run:
+        description: 'Dry run'
+        type: boolean
+        default: true
+      build_items:
+        description: 'Build items'
+        type: string
+        default: 'ui,app,docker'
+
+jobs:
+  # Tag the release version code before building
+  # Getting the version code from the branch name or git ref.
+  tagging:
+    # Only run on manual trigger
+    # or when a PR is merged into master.
+    # (which the branch name start with `relase/`)
+    if: |
+      github.event_name == 'workflow_dispatch' ||
+      (github.event.pull_request.merged == true && startsWith(github.head_ref, 'release/'))
+    uses: ./.github/workflows/build-tagging.yml
+    with:
+      issue_number: ${{ github.event.pull_request.number || 0 }}
+      dry_run: ${{ inputs.dry_run || false }}
+    secrets: inherit
+
+  # Build the UI
+  ui:
+    if: inputs.build_items == '' || contains(inputs.build_items, 'ui')
+    needs: tagging
+    uses: ./.github/workflows/build-ui.yml
+    with:
+      version: ${{ needs.tagging.outputs.version }}
+      dry_run: ${{ inputs.dry_run || false }}
+    secrets: inherit
+
+  # Build the Docker image
+  docker:
+    if: inputs.build_items == '' || contains(inputs.build_items, 'docker')
+    needs: tagging
+    uses: ./.github/workflows/build-docker.yml
+    # Parallel build the multi-arch docker image
+    strategy:
+      matrix:
+        # since docker push actions will override the previous images,
+        # so need to build `linux/amd64` and push first,
+        # then build `linux/amd64` twice with other archs (build very slow so keep it last).
+        target: ["linux/amd64", "linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6"]
+    with:
+      version: ${{ needs.tagging.outputs.version }}
+      dry_run: ${{ inputs.dry_run || false }}
+      target: ${{ matrix.target }}
+    secrets: inherit
+
+  # Build the binary app
+  app:
+    if: inputs.build_items == '' || contains(inputs.build_items, 'app')
+    needs: tagging
+    uses: ./.github/workflows/build-app.yml
+    with:
+      version: ${{ needs.tagging.outputs.version }}
+      dry_run: ${{ inputs.dry_run || false }}
+    secrets: inherit
+
+  # All builds are complete
+  done:
+    needs: [tagging, ui, docker, app]
+    uses: ./.github/workflows/build-done.yml
+    with:
+      version: ${{ needs.tagging.outputs.version }}
+      issue_number: ${{ github.event.pull_request.number || 0 }}
+      dry_run: ${{ inputs.dry_run || false }}
+    secrets: inherit

.github/workflows/codeql.yml

@@ -38,7 +38,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL

.github/workflows/docs-cn.yml

@@ -15,13 +15,13 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Use pnpm
         uses: pnpm/action-setup@v2
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: "pnpm"
@@ -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

@@ -1,5 +1,5 @@
-name: 📦 Release New Version
-run-name: 📦 Release ${{ inputs.custom || inputs.semver }} by @${{ github.actor }}
+name: 0x📦 Release New Version
+run-name: 📦 Release ${{ inputs.semver }} by @${{ github.actor }} ${{ inputs.dry_run && '(🧪 Dry-Run)' || '' }}
 
 on:
   workflow_dispatch:
@@ -12,49 +12,40 @@ on:
           - minor
           - major
         required: true
-      # custom:
-      #   description: 'Custom tag name (i.e v1.0.0-rc.1)'
-      #   required: false
-      #   default: ''
-
-env:
-  REPO_DISPATCH_EVENT_TYPE: 'artalk-release'
-  UI_NPM_PKG_FILE: 'ui/packages/artalk/package.json'
+      dry_run:
+        description: 'Dry run?'
+        type: boolean
+        default: false
 
 jobs:
   release:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v3
-
-      - name: Git Fetch
-        run: git fetch --prune --unshallow --tags -f
+        uses: actions/checkout@v4
+        with:
+          ref: master
+          fetch-depth: 0
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18.x
           registry-url: https://registry.npmjs.org/
 
+      - name: Setup semver
+        run: npm install -g semver
+
       - name: Handle Version Number
         run: |
-          if [ ! -z "${{ inputs.custom }}" ]; then
-            next_version="${{ inputs.custom }}"
-          else
-            npm install -g semver
-            prev_version="$(git describe --tags --abbrev=0)"
-            echo "prev_version: ${prev_version}"
-            next_version="v$(semver --increment ${{ inputs.semver }} ${prev_version})"
-          fi
+          PREV_VERSION="$(git describe --tags --abbrev=0)"
+          NEXT_VERSION="v$(semver --increment ${{ inputs.semver }} ${PREV_VERSION})"
 
-          if [[ ! "${next_version}" =~ ^v.* ]]; then
-            echo "[err] custom tag name must be v*."
-            exit 1
-          fi
+          echo "PREV_VERSION=${PREV_VERSION}" >> $GITHUB_ENV
+          echo "VERSION=${NEXT_VERSION}" >> $GITHUB_ENV
 
-          echo "next_version: ${next_version}"
-          echo "VERSION=${next_version}" >> $GITHUB_ENV
+      - name: Print Next Version
+        run: echo "${VERSION}"
 
       - name: Setup git-chglog
         run: |
@@ -62,32 +53,35 @@ jobs:
               | grep -oP '"https://.+linux_amd64.tar.gz"' | tr -d \") | tar -C /usr/local/bin -xz git-chglog
             git-chglog --version
 
-      - name: Version Changelog and Tagging
+      - name: Version Changelog
         run: |
-          if [ ! $(git tag -l "${VERSION}") ]; then
-            # prepend changelog
-            changelog=$(git-chglog --config .github/chglog/config.yml --next-tag "${VERSION}" "${VERSION}")
-            echo -e "${changelog}\n" | cat - CHANGELOG.md > temp && mv temp CHANGELOG.md
+          # prepend changelog
+          changelog=$(git-chglog --config .github/chglog/config.yml --next-tag "${VERSION}" "${VERSION}")
+          echo -e "${changelog}\n" | cat - CHANGELOG.md > temp && mv temp CHANGELOG.md
 
-            # modify the version of `package.json`
-            perl -i -pe 's/"version": ".*?"/"version": "'${VERSION#v}'"/g' "${UI_NPM_PKG_FILE}"
+          # modify the version of `package.json`
+          perl -i -pe 's/"version": ".*?"/"version": "'${VERSION#v}'"/g' ui/artalk/package.json
 
-            # modify the version in docs
-            perl -pi -e 's#"latest"(\W+)?:(\W+)?".*?"#"latest": "'${VERSION#v}'"#g' docs/code/ArtalkVersion.json
+          # modify the version in docs
+          perl -pi -e 's#"latest"(\W+)?:(\W+)?".*?"#"latest": "'${VERSION#v}'"#g' docs/docs/code/ArtalkVersion.json
 
-            # git commit and push
-            git config user.name github-actions[bot]
-            git config user.email 41898282+github-actions[bot]@users.noreply.github.com
-            git add .
-            git commit -m "chore: release ${VERSION}"
-            git tag "${VERSION}"
+      - name: Print Git Diff
+        run: git diff
 
-            git push origin master "${VERSION}"
-          else
-            echo "skipped because git tag already exists."
-          fi
-
-      - name: Repository Dispatch
-        uses: peter-evans/repository-dispatch@v2
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v5
+        if: ${{ !inputs.dry_run }}
         with:
-          event-type: ${{ env.REPO_DISPATCH_EVENT_TYPE }}
+          branch: "release/${{ env.VERSION }}"
+          commit-message: "chore: release ${{ env.VERSION }}"
+          title: "chore: release ${{ env.VERSION }}"
+          labels: release
+          body: |
+            ## Release ${{ env.VERSION }} 📦🚀
+
+            This PR is auto-generated, please check the changelog and confirm the release. 😀
+
+            The build workflow will be triggered after the PR is merged.
+          committer: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
+          author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
+          assignees: ${{ github.actor }}

.github/workflows/test-docs.yml

@@ -1,12 +1,11 @@
 name: Test Docs
 
 on:
-  pull_request:
-    paths:
-      - "docs/**"
   push:
-    paths:
-      - "docs/**"
+    paths: ['docs/**']
+  pull_request:
+    paths: ['docs/**']
+    branches: ['!release/*']
 
 jobs:
   test_docs:
@@ -14,7 +13,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Use pnpm
         uses: pnpm/action-setup@v2
@@ -29,4 +28,4 @@ jobs:
         run: pnpm install
 
       - name: Build Docs
-        run: pnpm docs:build
+        run: pnpm build:docs

.github/workflows/test-frontend.yml

@@ -2,11 +2,10 @@ name: Test Frontend
 
 on:
   push:
-    paths:
-      - 'ui/**'
+    paths: ['ui/**']
   pull_request:
-    paths:
-      - 'ui/**'
+    paths: ['ui/**']
+    branches: ['!release/*']
 
 jobs:
   test_ui:
@@ -17,13 +16,9 @@ jobs:
 
     runs-on: ${{ matrix.os }}
 
-    defaults:
-      run:
-        working-directory: ./ui
-
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         with:
@@ -34,14 +29,16 @@ 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
 
-      # TODO: Add unit test
-      # - name: Unit test
-      #   run: pnpm test
+      - name: Unit test
+        run: pnpm test
+
+      # https://github.com/arethetypeswrong/arethetypeswrong.github.io
+      - name: 'arethetypeswrong test'
+        run: pnpm -F artalk attw

.vscode/settings.json

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

CHANGELOG.md

@@ -1,4 +1,38 @@
 
+## [v2.7.3](https://github.com/ArtalkJS/Artalk/compare/v2.7.2...v2.7.3) (2023-12-28)
+
+### Features
+
+* **ci:** add dry-run mode for build workflow
+* **cmd:** support cli flag for creating admin account
+
+### Bug Fixes
+
+* **ui/init:** stack overflow when merging with config defaults ([#717](https://github.com/ArtalkJS/Artalk/issues/717))
+
+### Performance Improvements
+
+* **ui/build:** better dts generation ([#689](https://github.com/ArtalkJS/Artalk/issues/689))
+
+### Code Refactoring
+
+* **ci:** better release workflow
+* **docker:** add `--build-arg` argument to skip ui build
+* **test/ui:** add more ui api tests
+* **ui:** refactor directory structure ([#712](https://github.com/ArtalkJS/Artalk/issues/712))
+* **ui/conf:** better handling of mutable config ([#722](https://github.com/ArtalkJS/Artalk/issues/722))
+* **ui/test:** add vitest for unit testing
+
+### Documentation
+
+* update ui api documentation
+
+### BREAKING CHANGE
+
+
+Directly referencing `artalk.conf` and `artalk.$root` is deprecated. Please use functions instead: `artalk.getConf()` and `artalk.getEl()`.
+
+
 ## [v2.7.2](https://github.com/ArtalkJS/Artalk/compare/v2.7.1...v2.7.2) (2023-12-20)
 
 ### Features

CONTRIBUTING.md

@@ -41,9 +41,9 @@ 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.
 
@@ -51,9 +51,9 @@ The frontend program is divided into the main program and a sidebar program, wit
 
 ### 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.
 

Dockerfile

@@ -5,8 +5,7 @@ WORKDIR /source
 
 # install tools
 RUN set -ex \
-    && apk add --no-cache make git gcc musl-dev nodejs bash npm\
-    && npm install -g pnpm@8.12.1
+    && apk add --no-cache make git gcc musl-dev bash
 
 # download go deps
 # (cache by separating the downloading of deps)
@@ -16,10 +15,28 @@ RUN go mod download
 # copy source code
 COPY . .
 
-# build
+## build UI
+ARG SKIP_UI_BUILD=false
+
+# install ui build toolchain
 RUN set -ex \
-    && export VERSION=$(git describe --tags --abbrev=0) \
-    && export COMMIT_SHA=$(git rev-parse --short HEAD) \
+    && if [ "$SKIP_UI_BUILD" = "false" ]; then \
+        apk add --no-cache nodejs npm \
+        && npm install -g pnpm@8.12.1 \
+    ;fi
+
+RUN set -ex \
+    && if [ "$SKIP_UI_BUILD" = "false" ]; then \
+        make build-frontend \
+    ;fi
+
+## build App
+ARG APP_VERSION=""
+ARG APP_COMMIT_HASH=""
+
+RUN set -ex \
+    && if [[ ! -z "$APP_VERSION" ]]; then export VERSION=$APP_VERSION ;fi \
+    && if [[ ! -z "$APP_COMMIT_HASH" ]]; then export COMMIT_HASH=$APP_COMMIT_HASH ;fi \
     && make build
 
 ### build final image

Makefile

@@ -1,8 +1,7 @@
 PKG_NAME    := github.com/ArtalkJS/Artalk
 BIN_NAME	:= ./bin/artalk
 VERSION     ?= $(shell git describe --tags --abbrev=0)
-COMMIT_HASH := $(shell git rev-parse --short HEAD)
-DEV_VERSION := dev-$(COMMIT_HASH)
+COMMIT_HASH ?= $(shell git rev-parse --short HEAD)
 
 HAS_RICHGO  := $(shell which richgo)
 GOTEST      ?= $(if $(HAS_RICHGO), richgo test, go test)
@@ -13,7 +12,7 @@ all: install build
 install:
 	go mod tidy
 
-build: build-frontend
+build:
 	go build \
     	-ldflags "-s -w -X $(PKG_NAME)/internal/config.Version=$(VERSION) \
         -X $(PKG_NAME)/internal/config.CommitHash=$(COMMIT_HASH)" \

cmd/admin.go

@@ -25,9 +25,17 @@ func NewAdminCommand(app *ArtalkCmd) *cobra.Command {
 			fmt.Println(" " + i18n.T("Create admin account"))
 			fmt.Println("--------------------------------")
 
-			username, email, password, err := credentials()
-			if err != nil {
-				log.Fatal(err)
+			// get from flags
+			username, _ := cmd.Flags().GetString("name")
+			email, _ := cmd.Flags().GetString("email")
+			password, _ := cmd.Flags().GetString("password")
+
+			if username == "" || email == "" || password == "" {
+				var err error
+				username, email, password, err = credentials()
+				if err != nil {
+					log.Fatal(err)
+				}
 			}
 
 			findUser := app.Dao().FindUser(username, email)
@@ -62,6 +70,10 @@ func NewAdminCommand(app *ArtalkCmd) *cobra.Command {
 		},
 	}
 
+	flag(adminCmd, "name", "", i18n.T("Username"))
+	flag(adminCmd, "email", "", i18n.T("Email"))
+	flag(adminCmd, "password", "", i18n.T("Password"))
+
 	return adminCmd
 }
 

docs/docs/.vitepress/theme/Artalk.vue

@@ -5,7 +5,7 @@
 <script setup lang="ts">
 import { watch, nextTick, ref, onMounted, onUnmounted } from 'vue'
 import { useData, useRouter } from 'vitepress'
-import type Artalk from 'artalk'
+import Artalk from 'artalk'
 
 const el = ref<HTMLElement | null>(null)
 
@@ -32,19 +32,16 @@ onUnmounted(() => {
 })
 
 function initArtalk(conf: any) {
-  // TODO: remove dynamic import after the new version released
-  import('artalk').then(({ default: Artalk }) => {
-    artalk = Artalk.init({
-      el:        el.value,
-      emoticons: '/assets/emoticons/default.json',
-      gravatar:   {
-        mirror: 'https://cravatar.cn/avatar/'
-      },
-      ...conf
-    })
-  }).then(() => {
-    loadExtraFuncs()
+  artalk = Artalk.init({
+    el:        el.value,
+    emoticons: '/assets/emoticons/default.json',
+    gravatar:   {
+      mirror: 'https://cravatar.cn/avatar/'
+    },
+    ...conf
   })
+
+  loadExtraFuncs()
 }
 
 function getConfByPage() {

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/code/ArtalkVersion.json

@@ -1,3 +1,3 @@
 {
-  "latest": "2.7.1"
+  "latest": "2.7.3"
 }

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/fe-api.md

@@ -157,3 +157,23 @@ artalk.setDarkMode(true)
 ## 浏览量组件 `loadCountWidget`
 
 详情见：[浏览量统计](../guide/frontend/pv.md)
+
+## 获取配置 `getConf`
+
+获取当前 Artalk 配置。
+
+```js
+const artalk = Artalk.init({ ... })
+
+const conf = artalk.getConf()
+```
+
+## 获取挂载元素 `getEl`
+
+获取当前 Artalk 挂载的 DOM 元素。
+
+```js
+const artalk = Artalk.init({ ... })
+
+const el = artalk.getEl()
+```

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,7 +46,7 @@ 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。
 
@@ -54,11 +54,11 @@ Artalk 拥有完整的 TypeScript 类型定义，你可以通过编辑器的自
 
 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,14 +10,17 @@
   },
   "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.1",
+    "artalk": "workspace:^",
     "markdown-it-for-inline": "^2.0.1",
     "sass": "^1.69.5",
     "vitepress": "1.0.0-rc.32"
+  },
+  "dependencies": {
+    "vue": "^3.3.12"
   }
 }

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,49 @@
   "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",
+    "test": "pnpm -F artalk test"
   },
-  "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",
+    "@vitest/coverage-v8": "^1.1.0",
+    "autoprefixer": "10.4.16",
+    "cross-env": "^7.0.3",
+    "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",
+    "jsdom": "^23.0.1",
+    "postcss": "8.4.32",
+    "prettier": "3.1.1",
+    "rollup": "4.9.1",
+    "sass": "1.69.5",
+    "stylelint": "^16.1.0",
+    "terser": "5.26.0",
+    "tsx": "^4.7.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",
+    "vitest": "^1.1.0"
+  },
+  "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"
+  ]
 }

pnpm-workspace.yaml

@@ -1,2 +1,3 @@
 packages:
-  - "docs/*"
+  - 'ui/*'
+  - 'docs/*'

scripts/build-frontend.sh

@@ -15,17 +15,17 @@ then
     volta install pnpm@8.12.1
 fi
 
-pnpm --dir ./ui install --frozen-lockfile
-pnpm --dir ./ui build:all
+pnpm install --frozen-lockfile
+pnpm build:all
 
 ## dist
 DIST_DIR="./public/dist"
 rm -rf ${DIST_DIR} && mkdir -p ${DIST_DIR}
-cp -r ./ui/packages/artalk/dist/{Artalk.css,Artalk.js} ${DIST_DIR}
-cp -r ./ui/packages/artalk/dist/{ArtalkLite.css,ArtalkLite.js} ${DIST_DIR}
-cp -r ./ui/packages/artalk/dist/i18n ${DIST_DIR}
+cp -r ./ui/artalk/dist/{Artalk.css,Artalk.js} ${DIST_DIR}
+cp -r ./ui/artalk/dist/{ArtalkLite.css,ArtalkLite.js} ${DIST_DIR}
+cp -r ./ui/artalk/dist/i18n ${DIST_DIR}
 
 ## sidebar
 SIDEBAR_DIR="./public/sidebar"
 rm -rf ${SIDEBAR_DIR} && mkdir -p ${SIDEBAR_DIR}
-cp -r ./ui/packages/artalk-sidebar/dist/* ${SIDEBAR_DIR}
+cp -r ./ui/artalk-sidebar/dist/* ${SIDEBAR_DIR}

scripts/frontend-e2e-test.sh

@@ -21,9 +21,9 @@ fi
 yq -i '.db.file = "data/ui_test.db"' artalk.yml
 
 # Run frontend e2e test
-pnpm -C ui/packages/artalk run test:e2e
+pnpm -F artalk run test:e2e
 
 # if args contains `--show-report` then open report
 if [[ $* == *--show-report* ]]; then
-    pnpm -C ui/packages/artalk run test:report
+    pnpm -F artalk run test:report
 fi

test/ssg-test/package.json

@@ -16,7 +16,7 @@
     "vitepress": "1.0.0-rc.32"
   },
   "dependencies": {
-    "artalk": "link:ui/packages/artalk",
+    "artalk": "link:ui/artalk",
     "vue": "^3.3.12"
   }
 }

test/ssg-test/pnpm-lock.yaml

@@ -6,8 +6,8 @@ settings:
 
 dependencies:
   artalk:
-    specifier: link:ui/packages/artalk
-    version: link:../../ui/packages/artalk
+    specifier: link:ui/artalk
+    version: link:../../ui/artalk
   vue:
     specifier: ^3.3.12
     version: 3.3.12

test/vue-test/pnpm-lock.yaml

@@ -7,7 +7,7 @@ settings:
 dependencies:
   artalk:
     specifier: link:artalk
-    version: link:../../ui/packages/artalk
+    version: link:../../ui/artalk
   vue:
     specifier: ^3.3.11
     version: 3.3.12(typescript@5.3.3)

tsconfig.base.json

@@ -4,7 +4,7 @@
     "useDefineForClassFields": true,
     "module": "esnext",
     "lib": ["esnext", "dom"],
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "strict": true,
     "sourceMap": true,
     "experimentalDecorators": true,

ui/artalk-sidebar/.eslintrc.cjs

@@ -0,0 +1,20 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
+  rules: {
+    'vue/multi-word-component-names': 0,
+    'no-unused-vars': 0,
+    '@typescript-eslint/no-unused-vars': 0,
+  }
+}

ui/artalk-sidebar/.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+*.tsbuildinfo

ui/artalk-sidebar/auto-imports.d.ts

@@ -68,5 +68,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }

ui/artalk-sidebar/env.d.ts

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

ui/artalk-sidebar/package.json

@@ -7,8 +7,11 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview"
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
     "artalk": "workspace:^",
@@ -19,8 +22,15 @@
     "yaml": "^2.3.4"
   },
   "devDependencies": {
+    "@rushstack/eslint-patch": "^1.6.1",
+    "@tsconfig/node18": "^18.2.2",
+    "@types/jsdom": "^21.1.6",
     "@vitejs/plugin-vue": "^4.5.2",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.5.1",
+    "eslint-plugin-vue": "^9.19.2",
+    "npm-run-all2": "^6.1.1",
     "typescript": "^5.3.3",
     "unplugin-auto-import": "^0.17.2",
     "unplugin-vue-components": "^0.26.0",

ui/artalk-sidebar/src/components/PreferenceArr.vue

@@ -39,7 +39,7 @@ function add() {
 
 <template>
   <div class="arr-grp">
-    <div v-for="(item, index) in customValue" class="arr-item">
+    <div v-for="(item, index) in customValue" :key="index" class="arr-item">
       <input
         type="text"
         :value="String(item)"

ui/artalk-sidebar/src/components/PreferenceItem.vue

@@ -36,7 +36,8 @@ function onChange() {
         <template v-else-if="node.selector">
           <select v-model="value" @change="onChange">
             <option
-              v-for="item in node.selector"
+              v-for="(item, i) in node.selector"
+              :key="i"
               :value="item"
             >{{ item }}</option>
           </select>

ui/artalk-sidebar/src/components/SiteEditor.vue

@@ -88,7 +88,8 @@ function onFiledEditorNo() {
         >{{ site.name }}</span>
         <span class="atk-site-urls">
           <div
-            v-for="(url) in site.urls"
+            v-for="(url, i) in site.urls"
+            :key="i"
             class="atk-url-item"
             @click="openURL(url)"
           >{{ url }}</div>

ui/artalk-sidebar/src/components/SiteSwitcher.vue

@@ -68,7 +68,8 @@ watch(curtShow, (value) => {
     <div ref="el" v-show="curtShow" class="atk-site-list-floater">
       <div class="atk-sites">
         <div
-          v-for="(site) in displaySites"
+          v-for="(site, i) in displaySites"
+          :key="i"
           class="atk-site-item"
           :class="{ 'atk-active': curtSite === site.name }"
           @click="switchSite(site.name)"

ui/artalk-sidebar/src/components/Tab.vue

@@ -128,6 +128,7 @@ function onSearchSubmit(evt: Event) {
       <template v-if="indicator === 'tabs'">
         <div
           v-for="(tabLabel, tabName) in tabs"
+          :key="tabName"
           class="item"
           :class="{ active: curtTab === tabName }"
           @click="switchTab(tabName as string)"
@@ -144,6 +145,7 @@ function onSearchSubmit(evt: Event) {
       <template v-else>
         <div
           v-for="(page, pageName) in pages"
+          :key="pageName"
           class="item"
           v-show="!page.hide"
           :class="{ active: pageName === curtPage }"

ui/artalk-sidebar/src/components/UserEditor.vue

@@ -25,7 +25,7 @@ const emit = defineEmits<{
   (evt: 'update', user: ArtalkType.UserDataForAdmin): void
 }>()
 
-const user = ref<IUserEditData>()
+const editUser = ref<IUserEditData>()
 
 const isLoading = ref(false)
 const isCreateMode = ref(false)
@@ -35,7 +35,7 @@ const showFullDetails = ref(false)
 onBeforeMount(() => {
   if (!props.user) {
     isCreateMode.value = true
-    user.value = {
+    editUser.value = {
       name: '',
       email: '',
       link: '',
@@ -47,7 +47,7 @@ onBeforeMount(() => {
       receive_email: true,
     }
   } else {
-    user.value = props.user
+    editUser.value = props.user
   }
 })
 
@@ -60,12 +60,12 @@ function submit() {
   isLoading.value = true
 
   // 默认标签颜色
-  if (user.value!.badge_name !== '' && user.value!.badge_color === '') {
-    user.value!.badge_color = '#0083ff'
+  if (editUser.value!.badge_name !== '' && editUser.value!.badge_color === '') {
+    editUser.value!.badge_color = '#0083ff'
   }
 
   if (isCreateMode.value) {
-    artalk!.ctx.getApi().user.userAdd(user.value!, user.value!.password)
+    artalk!.ctx.getApi().user.userAdd(editUser.value!, editUser.value!.password)
       .then((respUser) => {
         emit('update', respUser)
       }).catch((e) => {
@@ -74,7 +74,7 @@ function submit() {
         isLoading.value = false
       })
   } else {
-    artalk!.ctx.getApi().user.userEdit(user.value!, user.value!.password)
+    artalk!.ctx.getApi().user.userEdit(editUser.value!, editUser.value!.password)
       .then((respUser) => {
         emit('update', respUser)
       }).catch((e) => {
@@ -95,37 +95,37 @@ function submit() {
       </div>
     </div>
     <div v-if="!isCreateMode" class="user-log">
-      <div><span>{{ t('comments') }}</span>{{(user as any).comment_count}}</div>
-      <div><span>{{ t('last') }} IP</span>{{(user as any).last_ip || '-'}}</div>
+      <div><span>{{ t('comments') }}</span>{{(editUser as any).comment_count}}</div>
+      <div><span>{{ t('last') }} IP</span>{{(editUser as any).last_ip || '-'}}</div>
       <div><span>{{ t('last') }} UA</span>
-        <template v-if="showFullDetails || !(user as any).last_ua">{{(user as any).last_ua || '-'}}</template>
+        <template v-if="showFullDetails || !(editUser as any).last_ua">{{(editUser as any).last_ua || '-'}}</template>
         <template v-else><span @click="showFullDetails = true" style="cursor: pointer;color: var(--at-color-main)">{{ t('Show') }}</span></template>
       </div>
     </div>
-    <form v-if="user" class="atk-form" @submit.prevent="submit()">
+    <form v-if="editUser" class="atk-form" @submit.prevent="submit()">
       <div class="atk-label required">{{ t('username') }}</div>
-      <input v-model="user.name" type="text" placeholder="" autocomplete="off">
+      <input v-model="editUser.name" type="text" placeholder="" autocomplete="off">
       <div class="atk-label required">{{ t('email')  }}</div>
-      <input v-model="user.email" type="text" placeholder="" autocomplete="off">
+      <input v-model="editUser.email" type="text" placeholder="" autocomplete="off">
       <div class="atk-label">{{ t('link') }}</div>
-      <input v-model="user.link" type="text" placeholder="" autocomplete="off">
+      <input v-model="editUser.link" type="text" placeholder="" autocomplete="off">
       <div class="atk-label">{{ t('badgeText') }}</div>
-      <input v-model="user.badge_name" type="text" placeholder="" autocomplete="off">
+      <input v-model="editUser.badge_name" type="text" placeholder="" autocomplete="off">
       <div class="atk-label">{{ t('badgeColor') }} (Color Hex)</div>
-      <input v-model="user.badge_color" type="text" placeholder="" autocomplete="off">
+      <input v-model="editUser.badge_color" type="text" placeholder="" autocomplete="off">
       <div class="atk-label required">{{ t('role') }}</div>
-      <select v-model="user.is_admin">
+      <select v-model="editUser.is_admin">
         <option :value="false">{{ t('normal') }}</option>
         <option :value="true">{{ t('admin') }}</option>
       </select>
-      <template v-if="user.is_admin">
+      <template v-if="editUser.is_admin">
         <div class="atk-label required">{{ t('password') }}</div>
-        <input v-model="user.password" type="text" :placeholder="isCreateMode ? '' : `(${t('passwordEmptyHint')})`" autocomplete="off">
+        <input v-model="editUser.password" type="text" :placeholder="isCreateMode ? '' : `(${t('passwordEmptyHint')})`" autocomplete="off">
         <div class="atk-label">{{ t('siteAttached') }}</div>
-        <input v-model="user.site_names_raw" type="text" :placeholder="`(${t('siteEmptyHint')})`" autocomplete="off">
+        <input v-model="editUser.site_names_raw" type="text" :placeholder="`(${t('siteEmptyHint')})`" autocomplete="off">
       </template>
       <div class="atk-label required">{{ t('emailNotify') }}</div>
-      <select v-model="user.receive_email">
+      <select v-model="editUser.receive_email">
         <option :value="true">{{ t('enabled') }}</option>
         <option :value="false">{{ t('disabled') }}</option>
       </select>

ui/artalk-sidebar/src/global.ts

@@ -27,7 +27,7 @@ export function createArtalkInstance() {
 
   return Artalk.init({
     el: artalkEl,
-    server: (import.meta.env.DEV) ? 'http://localhost:23366' : '../',
+    server: '../',
     pageKey: bootParams.pageKey,
     site: bootParams.site,
     darkMode: bootParams.darkMode,

ui/artalk-sidebar/src/lib/settings-option.ts

@@ -13,7 +13,6 @@ export interface OptionNode {
   items?: OptionNode[]
 }
 
-let f = true
 function extractItemComment(item: Pair, index: number, parentPair?: Pair): string {
   let comment = ''
   if (index === 0 && parentPair) comment = parentPair?.value?.commentBefore || ''

ui/artalk-sidebar/src/pages/login.vue

@@ -76,7 +76,7 @@ function login(username?: string) {
       <div class="user-selector atk-fade-in">
         <div class="text">{{ t('loginSelectHint') }}</div>
         <div class="user-list">
-          <div v-for="u in userSelector" class="item" @click="userSelector = null; login(u)">{{u}}</div>
+          <div v-for="(u, i) in userSelector" :key="i" class="item" @click="userSelector = null; login(u)">{{u}}</div>
         </div>
       </div>
     </div>

ui/artalk-sidebar/src/pages/pages.vue

@@ -155,7 +155,7 @@ function openPage(url: string) {
       <span class="atk-cache-warm-up-btn" @click="cacheWarm()"><span class="atk-text">{{ t('cacheWarm')  }}</span></span>
     </div>
     <div class="atk-page-list">
-      <div v-for="(page) in pages" class="atk-page-item">
+      <div v-for="page in pages" :key="page.id" class="atk-page-item">
         <div class="atk-page-main">
           <div class="atk-title" @click="openPage(page.url)">{{ page.title }}</div>
           <div class="atk-sub" @click="openPage(page.url)">{{ page.url }}</div>

ui/artalk-sidebar/src/pages/sites.vue

@@ -99,7 +99,7 @@ function onSiteItemRemove(id: number) {
       @done="onNewSiteCreated"
     />
     <div class="atk-site-rows-wrap">
-      <template v-for="(sites) in sitesGrouped">
+      <template v-for="(sites, i) in sitesGrouped" :key="i">
         <template v-if="curtEditSite !== null">
           <SiteEditor
             v-if="!!sites.includes(curtEditSite)"
@@ -111,7 +111,8 @@ function onSiteItemRemove(id: number) {
         </template>
         <div class="atk-site-row">
           <div
-            v-for="(site) in sites"
+            v-for="site in sites"
+            :key="site.id"
             class="atk-site-item"
             :class="{ 'atk-active': curtEditSite === site }"
             @click="edit(site)"

ui/artalk-sidebar/src/pages/users.vue

@@ -118,7 +118,7 @@ function delUser(user: ArtalkType.UserDataForAdmin) {
 <template>
   <div class="user-list-wrap">
     <div class="user-list">
-      <div v-for="(user) in users" class="user-item">
+      <div v-for="(user) in users" :key="user.id" class="user-item">
         <div class="user-main">
           <div class="title">
             {{ user.name }}

ui/artalk-sidebar/tsconfig.app.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": [
+    "typed-router.d.ts",
+    "components.d.ts",
+    "auto-imports.d.ts",
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue"
+  ],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

ui/artalk-sidebar/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ],
+  "compilerOptions": {
+    "module": "NodeNext"
+  }
+}

ui/artalk-sidebar/tsconfig.node.json

@@ -0,0 +1,17 @@
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

ui/artalk-sidebar/tsconfig.vitest.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}

ui/artalk-sidebar/vite.config.ts

@@ -6,6 +6,7 @@ import VueRouter from 'unplugin-vue-router/vite'
 import { VueRouterAutoImports } from 'unplugin-vue-router'
 import Components from 'unplugin-vue-components/vite'
 import { HeadlessUiResolver } from 'unplugin-vue-components/resolvers'
+import { fileURLToPath, URL } from 'node:url'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -34,8 +35,16 @@ export default defineConfig({
       }
     }))(),
   ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
   server: {
     port: 23367,
+    proxy: {
+      '/api': 'http://127.0.0.1:23366',
+    }
   },
   css: {
     preprocessorOptions: {

ui/artalk/.eslintrc.cjs

@@ -0,0 +1,8 @@
+const path = require('node:path')
+
+module.exports = {
+  root: true,
+  extends: [
+    path.join(__dirname, '../../.eslintrc.cjs'),
+  ]
+}

ui/artalk/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "artalk",
+  "version": "2.7.3",
+  "description": "A self-hosted comment system",
+  "keywords": [
+    "comment-system",
+    "comments-widget",
+    "comment",
+    "comments",
+    "blog"
+  ],
+  "homepage": "https://artalk.js.org",
+  "bugs": "https://github.com/ArtalkJS/Artalk/issue",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ArtalkJS/Artalk.git",
+    "directory": "ui/artalk"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/main.d.ts",
+        "default": "./dist/Artalk.mjs"
+      },
+      "require": {
+        "types": "./dist/main.d.cts",
+        "default": "./dist/Artalk.cjs"
+      }
+    },
+    "./dist/ArtalkLite": {
+      "import": {
+        "types": "./dist/main.d.ts",
+        "default": "./dist/ArtalkLite.mjs"
+      },
+      "require": {
+        "types": "./dist/main.d.cts",
+        "default": "./dist/ArtalkLite.cjs"
+      }
+    },
+    "./dist/i18n/jp": {
+      "import": {
+        "types": "./dist/i18n/jp.d.ts",
+        "default": "./dist/i18n/jp.mjs"
+      },
+      "require": {
+        "types": "./dist/i18n/jp.d.cts",
+        "default": "./dist/i18n/jp.cjs"
+      }
+    },
+    "./dist/i18n/zh-TW": {
+      "import": {
+        "types": "./dist/i18n/zh-TW.d.ts",
+        "default": "./dist/i18n/zh-TW.mjs"
+      },
+      "require": {
+        "types": "./dist/i18n/zh-TW.d.cts",
+        "default": "./dist/i18n/zh-TW.cjs"
+      }
+    },
+    "./dist/i18n/*": "./dist/i18n/*",
+    "./dist/*.css": {
+      "import": "./dist/*.css",
+      "require": "./dist/*.css"
+    },
+    "./dist/*": "./dist/*"
+  },
+  "typesVersions": {
+    "*": {
+      "dist/ArtalkLite": [
+        "./dist/main.d.ts"
+      ]
+    }
+  },
+  "main": "./dist/Artalk.js",
+  "module": "./dist/Artalk.mjs",
+  "types": "./dist/main.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && pnpm build:lite && pnpm build:i18n",
+    "build:lite": "cross-env ARTALK_LITE=1 vite build",
+    "build:i18n": "tsx scripts/build-i18n.ts",
+    "copy:deploy": "cp -r dist deploy && cp CNAME deploy",
+    "predeploy": "pnpm build && pnpm build:demo && pnpm copy:deploy",
+    "deploy": "gh-pages -d deploy",
+    "dev": "vite",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint './src/**/*.{js,ts}'",
+    "attw": "pnpx @arethetypeswrong/cli --pack .",
+    "serve": "vite preview",
+    "test:e2e": "playwright test",
+    "test:report": "playwright show-report"
+  },
+  "dependencies": {
+    "abortcontroller-polyfill": "^1.7.5",
+    "hanabi": "^0.4.0",
+    "insane": "^2.6.2",
+    "marked": "^7.0.4"
+  },
+  "devDependencies": {
+    "@types/marked": "5.0.2"
+  }
+}