@waline/client 2.9.1 → 2.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.9.1",
+  "version": "2.11.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -71,6 +71,17 @@
     "dist",
     "src"
   ],
+  "scripts": {
+    "build": "pnpm rollup && pnpm style",
+    "clean": "rimraf ./dist",
+    "dev": "vite -c config/vite.config.js",
+    "lint": "eslint --ext .ts,.vue .",
+    "prepublishOnly": "pnpm clean && pnpm build",
+    "rollup": "rollup -c ./config/rollup.config.js",
+    "style": "pnpm style:main && pnpm style:meta",
+    "style:main": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed",
+    "style:meta": "sass ./src/styles/meta.scss ./dist/waline-meta.css --style=compressed"
+  },
   "browserslist": {
     "production": [
       ">0.5%",
@@ -92,35 +103,26 @@
     "vue": "^3.2.39"
   },
   "devDependencies": {
-    "@babel/core": "7.19.0",
-    "@babel/preset-env": "7.19.0",
+    "@babel/core": "7.19.1",
+    "@babel/preset-env": "7.19.1",
     "@rollup/plugin-babel": "5.3.1",
     "@rollup/plugin-commonjs": "22.0.2",
-    "@rollup/plugin-node-resolve": "14.0.1",
+    "@rollup/plugin-node-resolve": "14.1.0",
     "@rollup/plugin-replace": "4.0.0",
     "@types/autosize": "4.0.1",
     "@types/marked": "4.0.7",
-    "@types/node": "18.7.16",
+    "@types/node": "18.7.21",
     "@vitejs/plugin-vue": "3.1.0",
+    "recaptcha-v3": "1.10.0",
     "rimraf": "3.0.2",
-    "rollup": "2.79.0",
+    "rollup": "2.79.1",
     "rollup-plugin-dts": "4.2.2",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-ts": "3.0.2",
     "typescript": "4.8.3",
-    "vite": "3.1.0"
+    "vite": "3.1.3"
   },
   "engines": {
     "node": ">=14"
-  },
-  "scripts": {
-    "build": "pnpm rollup && pnpm style",
-    "clean": "rimraf ./dist",
-    "dev": "vite -c config/vite.config.js",
-    "lint": "eslint --ext .ts,.vue .",
-    "rollup": "rollup -c ./config/rollup.config.js",
-    "style": "pnpm style:main && pnpm style:meta",
-    "style:main": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed",
-    "style:meta": "sass ./src/styles/meta.scss ./dist/waline-meta.css --style=compressed"
   }
-}
+}

package/src/components/ArticleReaction.vue

@@ -0,0 +1,141 @@
+<template>
+  <div v-if="reaction && reaction.length" class="wl-reaction">
+    <h4>{{ locale.reactionTitle }}</h4>
+    <ul>
+      <li
+        v-for="(item, index) in reaction"
+        :key="index"
+        :class="item.active ? 'active' : ''"
+        @click="onVote(index)"
+      >
+        <div class="wl-reaction__img">
+          <img :src="item.icon" :alt="item.desc" />
+          <div class="wl-reaction__votes">{{ item.vote }}</div>
+        </div>
+        <div class="wl-reaction__text">{{ item.desc }}</div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  inject,
+  ComputedRef,
+  computed,
+  onMounted,
+  onUnmounted,
+  ref,
+} from 'vue';
+import {
+  fetchArticleCounter,
+  updateArticleCounter,
+  WalineConfig,
+} from '../utils';
+import { useVoteStorage } from '../composables/vote';
+
+interface ReactionItem {
+  icon: string;
+  vote: number;
+  desc: string;
+  active?: boolean;
+}
+
+export default defineComponent({
+  setup() {
+    const votes = ref<ReactionItem['vote'][]>([]);
+    const voteStorage = useVoteStorage();
+    const config = inject<ComputedRef<WalineConfig>>(
+      'config'
+    ) as ComputedRef<WalineConfig>;
+    const locale = computed(() => config.value.locale);
+    const reaction = computed((): ReactionItem[] => {
+      const { path } = config.value;
+
+      if (!Array.isArray(config.value.reaction)) {
+        return [];
+      }
+
+      return config.value.reaction.map((icon, index) => ({
+        icon,
+        vote: votes.value[index] || 0,
+        desc: locale.value[`reaction${index}` as `reaction0`],
+        active: Boolean(
+          voteStorage.value.find(({ u, i }) => u === path && i === index)
+        ),
+      }));
+    });
+
+    const controller = new AbortController();
+
+    const fetchCounter = async (): Promise<void> => {
+      const { serverURL, lang, path, reaction } = config.value;
+
+      if (!Array.isArray(reaction)) {
+        return;
+      }
+
+      const resp = await fetchArticleCounter({
+        serverURL,
+        lang,
+        paths: [path],
+        type: reaction.map((_, k) => `reaction${k}`),
+        signal: controller.signal,
+      });
+
+      if (Array.isArray(resp) || typeof resp === 'number') {
+        return;
+      }
+
+      votes.value = reaction.map((_, k) => resp[`reaction${k}`]);
+    };
+
+    const onVote = async (index: number): Promise<void> => {
+      const { serverURL, lang, path } = config.value;
+      const hasVoted = voteStorage.value.find(({ u }) => u === path);
+      const hasVotedTheReaction = hasVoted && hasVoted.i === index;
+
+      if (hasVotedTheReaction) {
+        return;
+      }
+
+      await updateArticleCounter({
+        serverURL,
+        lang,
+        path,
+        type: `reaction${index}`,
+      });
+
+      votes.value[index] = (votes.value[index] || 0) + 1;
+      if (hasVoted) {
+        votes.value[hasVoted.i] = Math.max(votes.value[hasVoted.i] - 1, 0);
+        updateArticleCounter({
+          serverURL,
+          lang,
+          path,
+          type: `reaction${hasVoted.i}`,
+          action: 'desc',
+        });
+
+        hasVoted.i = index;
+        voteStorage.value = Array.from(voteStorage.value);
+      } else {
+        voteStorage.value = [...voteStorage.value, { u: path, i: index }];
+      }
+
+      if (voteStorage.value.length > 50)
+        voteStorage.value = voteStorage.value.slice(-50);
+    };
+
+    onMounted(() => fetchCounter());
+    onUnmounted(() => controller.abort());
+
+    return {
+      reaction,
+      locale,
+      onVote,
+    };
+  },
+});
+</script>

package/src/components/CommentBox.vue

@@ -263,6 +263,7 @@
 
 <script lang="ts">
 import { useDebounceFn } from '@vueuse/core';
+import { useReCaptcha } from './RecaptchaV3/RecaptchaVuePlugin';
 import autosize from 'autosize';
 import {
   computed,
@@ -349,6 +350,7 @@ export default defineComponent({
     const editor = useEditor();
     const userMeta = useUserMeta();
     const userInfo = useUserInfo();
+    const recaptchaHandler = useReCaptcha();
 
     const inputRefs = ref<Record<string, HTMLInputElement>>({});
     const editorRef = ref<HTMLTextAreaElement | null>(null);
@@ -456,9 +458,18 @@ export default defineComponent({
         });
     };
 
-    const submitComment = (): void => {
+    const submitComment = async (): Promise<void> => {
       const { serverURL, lang, login, wordLimit, requiredMeta } = config.value;
 
+      let token = '';
+
+      if (recaptchaHandler) {
+        const { executeRecaptcha, recaptchaLoaded } = recaptchaHandler;
+
+        await recaptchaLoaded();
+        token = await executeRecaptcha('social');
+      }
+
       const comment: WalineCommentData = {
         comment: content.value,
         nick: userMeta.value.nick,
@@ -466,6 +477,7 @@ export default defineComponent({
         link: userMeta.value.link,
         ua: navigator.userAgent,
         url: config.value.path,
+        recaptchaV3: token,
       };
 
       if (userInfo.value?.token) {

package/src/components/RecaptchaV3/IReCaptchaOptions.ts

@@ -0,0 +1,6 @@
+import { IReCaptchaLoaderOptions } from 'recaptcha-v3/dist/ReCaptchaLoader';
+
+export interface IReCaptchaOptions {
+  siteKey: string;
+  loaderOptions: IReCaptchaLoaderOptions;
+}

package/src/components/RecaptchaV3/README.md

@@ -0,0 +1,3 @@
+# Vue reCAPTCHA-v3
+
+This is a fork from https://github.com/AurityLab/vue-recaptcha-v3 because of commonjs bundle conflict with vite.

package/src/components/RecaptchaV3/RecaptchaVuePlugin.ts

@@ -0,0 +1,86 @@
+import { load as loadReCaptcha, ReCaptchaInstance } from 'recaptcha-v3';
+import { App, Ref, ref, inject, InjectionKey } from 'vue';
+import { IReCaptchaOptions } from './IReCaptchaOptions'
+
+const VueReCaptchaInjectKey: InjectionKey<IReCaptchaComposition> = Symbol(
+  'VueReCaptchaInjectKey'
+);
+
+interface IGlobalConfig {
+  loadedWaiters: Array<{
+    resolve: (resolve: boolean) => void;
+    reject: (reject: Error) => void;
+  }>;
+  error: Error | null;
+}
+const globalConfig: IGlobalConfig = {
+  loadedWaiters: [],
+  error: null,
+};
+
+export const VueReCaptcha = {
+  install(app: App, options: IReCaptchaOptions): void {
+    const isLoaded = ref(false);
+    const instance: Ref<ReCaptchaInstance | undefined> = ref(undefined);
+
+    app.config.globalProperties.$recaptchaLoaded = recaptchaLoaded(isLoaded);
+
+    initializeReCaptcha(options)
+      .then((wrapper) => {
+        isLoaded.value = true;
+        instance.value = wrapper;
+
+        app.config.globalProperties.$recaptcha = recaptcha(instance);
+        app.config.globalProperties.$recaptchaInstance = instance;
+
+        globalConfig.loadedWaiters.forEach((v) => v.resolve(true));
+      })
+      .catch((error: Error) => {
+        globalConfig.error = error;
+        globalConfig.loadedWaiters.forEach((v) => v.reject(error));
+      });
+
+    app.provide(VueReCaptchaInjectKey, {
+      instance,
+      isLoaded,
+      executeRecaptcha: recaptcha(instance),
+      recaptchaLoaded: recaptchaLoaded(isLoaded),
+    });
+  },
+};
+
+export function useReCaptcha(): IReCaptchaComposition | undefined {
+  return inject(VueReCaptchaInjectKey);
+}
+
+async function initializeReCaptcha(
+  options: IReCaptchaOptions
+): Promise<ReCaptchaInstance> {
+  return await loadReCaptcha(options.siteKey, options.loaderOptions)
+}
+
+function recaptchaLoaded(isLoaded: Ref<boolean>) {
+  return (): Promise<boolean> =>
+    new Promise<boolean>((resolve, reject) => {
+      if (globalConfig.error !== null) {
+        return reject(globalConfig.error);
+      }
+      if (isLoaded.value) {
+        return resolve(true);
+      }
+      globalConfig.loadedWaiters.push({ resolve, reject });
+    });
+}
+
+function recaptcha(instance: Ref<ReCaptchaInstance | undefined>) {
+  return async (action: string): Promise<string | undefined> => {
+    return await instance.value?.execute(action);
+  };
+}
+
+export interface IReCaptchaComposition {
+  isLoaded: Ref<boolean>;
+  instance: Ref<ReCaptchaInstance | undefined>;
+  executeRecaptcha: (action: string) => Promise<string>;
+  recaptchaLoaded: () => Promise<boolean>;
+}

package/src/components/Waline.vue

@@ -1,5 +1,6 @@
 <template>
   <div data-waline>
+    <Reaction />
     <CommentBox v-if="!reply" @submit="onSubmit" />
     <div class="wl-meta-head">
       <div class="wl-count">
@@ -81,6 +82,7 @@
 <script lang="ts">
 import { useStyleTag } from '@vueuse/core';
 import { computed, defineComponent, onMounted, provide, ref, watch } from 'vue';
+import Reaction from './ArticleReaction.vue';
 import CommentBox from './CommentBox.vue';
 import CommentCard from './CommentCard.vue';
 import { LoadingIcon } from './Icons';
@@ -237,12 +239,21 @@ const propsWithValidate = {
   },
 
   copyright: { type: Boolean, default: true },
+
+  recaptchav3key: {
+    type: String,
+  },
+
+  reaction: {
+    type: [Array, Boolean] as PropType<string[] | false>,
+  },
 };
 
 export default defineComponent({
   name: 'WalineRoot',
 
   components: {
+    Reaction,
     CommentBox,
     CommentCard,
     LoadingIcon,

package/src/composables/vote.ts

@@ -0,0 +1,17 @@
+import { useStorage } from '@vueuse/core';
+
+import type { Ref } from 'vue';
+
+const VOTE_KEY = 'WALINE_VOTE';
+
+export interface VoteLogItem {
+  u: string;
+  i: number;
+}
+
+export type VoteRef = Ref<VoteLogItem[]>;
+
+let voteStorage: VoteRef | null = null;
+
+export const useVoteStorage = (): VoteRef =>
+  voteStorage || (voteStorage = useStorage<VoteLogItem[]>(VOTE_KEY, []));

package/src/config/default.ts

@@ -115,3 +115,12 @@ export const getDefaultSearchOptions = (): WalineSearchOptions => {
       }),
   };
 };
+
+export const defaultReaction = [
+  '//unpkg.com/@waline/emojis/tieba/tieba_agree.png',
+  '//unpkg.com/@waline/emojis/tieba/tieba_look_down.png',
+  '//unpkg.com/@waline/emojis/tieba/tieba_sunglasses.png',
+  '//unpkg.com/@waline/emojis/tieba/tieba_pick_nose.png',
+  '//unpkg.com/@waline/emojis/tieba/tieba_awkward.png',
+  '//unpkg.com/@waline/emojis/tieba/tieba_sleep.png',
+];

package/src/config/i18n/en.ts

@@ -49,4 +49,5 @@ export default generateLocale([
   'Oldest',
   'Latest',
   'Hottest',
+  'What do you think?',
 ]);

package/src/config/i18n/generate.ts

@@ -49,6 +49,7 @@ const localeKeys = [
   'oldest',
   'latest',
   'hottest',
+  'reactionTitle',
 ];
 
 export const generateLocale = (locale: string[]): WalineLocale =>

package/src/config/i18n/jp.ts

@@ -49,4 +49,5 @@ export default generateLocale([
   '逆順',
   '正順',
   '人気順',
+  'どう思いますか？',
 ]);

package/src/config/i18n/pt-BR.ts

@@ -49,4 +49,5 @@ export default generateLocale([
   'Mais velho',
   'Mais recentes',
   'Mais quente',
+  'O que você acha?',
 ]);

package/src/config/i18n/ru.ts

@@ -49,4 +49,5 @@ export default generateLocale([
   'самый старый',
   'последний',
   'самый горячий',
+  'Что вы думаете?',
 ]);

package/src/config/i18n/vi-VN.ts

@@ -49,4 +49,5 @@ export default generateLocale([
   'lâu đời nhất',
   'muộn nhất',
   'nóng nhất',
+  'What do you think?',
 ]);

package/src/config/i18n/zh-CN.ts

@@ -49,4 +49,5 @@ export default generateLocale([
   '按倒序',
   '按正序',
   '按热度',
+  '你认为这篇文章怎么样？',
 ]);

package/src/config/i18n/zh-TW.ts

@@ -49,4 +49,5 @@ export default generateLocale([
   '按倒序',
   '按正序',
   '按熱度',
+  '你認為這篇文章怎麼樣？',
 ]);

package/src/init.ts

@@ -1,4 +1,5 @@
 import { createApp, h, reactive, watchEffect } from 'vue';
+import { VueReCaptcha } from './components/RecaptchaV3/RecaptchaVuePlugin';
 
 import Waline from './components/Waline.vue';
 import { commentCount } from './comment';
@@ -80,6 +81,16 @@ export const init = ({
     ? createApp(() => h(Waline, { path: state.path, ...props }))
     : null;
 
+  if (app && initProps.recaptchaV3Key) {
+    app.use(VueReCaptcha, {
+      siteKey: initProps.recaptchaV3Key,
+      loaderOptions: {
+        useRecaptchaNet: true,
+        autoHideBadge: true,
+      },
+    });
+  }
+
   if (app) app.mount(root!);
 
   const stopComment = watchEffect(updateCommentCount);

package/src/styles/card.scss

@@ -57,6 +57,7 @@
 
   .wl-head {
     line-height: 1.5;
+    overflow: hidden; // bfc to fix https://github.com/walinejs/waline/issues/1415
   }
 
   .wl-nick {
@@ -126,6 +127,7 @@
 
   .wl-comment-actions {
     float: right;
+    line-height: 1;
   }
 
   .wl-delete,
@@ -135,7 +137,7 @@
     display: inline-flex;
     align-items: center;
 
-    padding: 4px;
+    // padding: 4px;
     border: none;
 
     background: transparent;

package/src/styles/index.scss

@@ -13,3 +13,4 @@
 @use 'highlight';
 
 @use 'recent';
+@use 'reaction';

package/src/styles/reaction.scss

@@ -0,0 +1,66 @@
+.wl-reaction {
+  text-align: center;
+  margin-bottom: 1.75em;
+
+  ul {
+    margin: 0;
+    list-style-type: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 16px;
+  }
+
+  li {
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &:hover img,
+    &.active img {
+      transform: scale(1.15);
+    }
+  }
+
+  li.active .wl-reaction {
+    &__votes {
+      color: var(--waline-bgcolor);
+      background: var(--waline-theme-color);
+    }
+    &__text {
+      color: var(--waline-theme-color);
+    }
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    transition: all 250ms ease-in-out;
+  }
+
+  &__img {
+    position: relative;
+    width: 42px;
+    height: 42px;
+  }
+
+  &__votes {
+    position: absolute;
+    top: -4px;
+    right: -5px;
+    font-size: 0.75em;
+    color: var(--waline-theme-color);
+    background: var(--waline-bgcolor);
+    border: 1px solid var(--waline-theme-color);
+    padding: 2px;
+    border-radius: 1em;
+    line-height: 1;
+    min-width: 1em;
+    font-weight: 700;
+  }
+
+  &__text {
+    font-size: 0.875em;
+  }
+}

package/src/typings/comment.ts

@@ -49,6 +49,10 @@ export interface WalineCommentData {
    * Comment link
    */
   url: string;
+  /**
+   * Recaptcha Token
+   */
+  recaptchaV3?: string;
 }
 
 export type WalineCommentStatus = 'approved' | 'waiting' | 'spam';

package/src/typings/locale.ts

@@ -46,4 +46,14 @@ export interface WalineLocale extends WalineDateLocale, WalineLevelLocale {
   oldest: string;
   latest: string;
   hottest: string;
+  reactionTitle: string;
+  reaction0: string;
+  reaction1: string;
+  reaction2: string;
+  reaction3: string;
+  reaction4: string;
+  reaction5: string;
+  reaction6: string;
+  reaction7: string;
+  reaction8: string;
 }

package/src/typings/waline.ts

@@ -213,4 +213,14 @@ export interface WalineProps {
    * @default true
    */
   copyright?: boolean;
+
+  /**
+   * recaptcha v3 client key
+   */
+  recaptchaV3Key?: string;
+
+  /**
+   * reaction
+   */
+  reaction?: string[] | boolean;
 }

package/src/utils/config.ts

@@ -1,6 +1,7 @@
 import {
   defaultLang,
   defaultLocales,
+  defaultReaction,
   defaultUploadImage,
   defaultHighlighter,
   defaultTexRenderer,
@@ -22,7 +23,8 @@ export interface WalineEmojiConfig {
   map: WalineEmojiMaps;
 }
 
-export interface WalineConfig extends Required<Omit<WalineProps, 'wordLimit'>> {
+export interface WalineConfig
+  extends Required<Omit<WalineProps, 'wordLimit' | 'recaptchaV3Key'>> {
   locale: WalineLocale;
   wordLimit: [number, number] | false;
   // emoji: Promise<EmojiConfig>;
@@ -63,6 +65,7 @@ export const getConfig = ({
   copyright = true,
   login = 'enable',
   search = getDefaultSearchOptions(),
+  reaction,
   ...more
 }: WalineProps): WalineConfig => ({
   serverURL: getServerURL(serverURL),
@@ -84,5 +87,6 @@ export const getConfig = ({
   login,
   copyright,
   search,
+  reaction: reaction === true ? defaultReaction : reaction || false,
   ...more,
 });