@waline/client 2.10.0 → 2.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -111,16 +111,16 @@
     "@rollup/plugin-replace": "4.0.0",
     "@types/autosize": "4.0.1",
     "@types/marked": "4.0.7",
-    "@types/node": "18.7.18",
+    "@types/node": "18.7.21",
     "@vitejs/plugin-vue": "3.1.0",
-    "recaptcha-v3": "^1.10.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.2"
+    "vite": "3.1.3"
   },
   "engines": {
     "node": ">=14"

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/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/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/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

@@ -217,5 +217,10 @@ export interface WalineProps {
   /**
    * recaptcha v3 client key
    */
-   recaptchaV3Key?: string;
+  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' | 'recaptchaV3Key'>> {
+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,
 });

package/src/utils/fetch.ts

@@ -13,8 +13,7 @@ const JSON_HEADERS: Record<string, string> = {
 const errorCheck = <T = unknown>(data: T | FetchErrorData, name = ''): T => {
   if (typeof data === 'object' && (data as FetchErrorData).errno)
     throw new TypeError(
-      `Fetch ${name} failed with ${(data as FetchErrorData).errno}: ${
-        (data as FetchErrorData).errmsg
+      `Fetch ${name} failed with ${(data as FetchErrorData).errno}: ${(data as FetchErrorData).errmsg
       }`
     );
 
@@ -232,45 +231,80 @@ export const updateComment = ({
   }).then((resp) => resp.json() as Promise<void>);
 };
 
-export interface FetchPageviewsOptions {
+export interface FetchArticleCounterOptions {
   serverURL: string;
   lang: string;
   paths: string[];
+  type: string[];
   signal: AbortSignal;
 }
 
-export const fetchPageviews = ({
+export const fetchArticleCounter = ({
   serverURL,
   lang,
   paths,
+  type,
   signal,
-}: FetchPageviewsOptions): Promise<number[]> =>
+}: FetchArticleCounterOptions): Promise<
+  Record<string, number>[] | Record<string, number> | number[] | number
+> =>
   fetch(
     `${serverURL}/article?path=${encodeURIComponent(
       paths.join(',')
-    )}&lang=${lang}`,
+    )}&type=${encodeURIComponent(type.join(','))}&lang=${lang}`,
     { signal }
   )
-    .then((resp) => resp.json() as Promise<number[] | number>)
-    .then((data) => errorCheck(data, 'visit count'))
+    .then(
+      (resp) =>
+        resp.json() as Promise<Record<string, number>[] | number[] | number>
+    )
+    .then((data) => errorCheck(data, 'article count'));
+
+export const fetchPageviews = ({
+  serverURL,
+  lang,
+  paths,
+  signal,
+}: Omit<FetchArticleCounterOptions, 'type'>): Promise<number[]> =>
+  fetchArticleCounter({
+    serverURL,
+    lang,
+    paths,
+    type: ['time'],
+    signal,
+  })
     // TODO: Improve this API
-    .then((counts) => (Array.isArray(counts) ? counts : [counts]));
+    .then((counts) => (Array.isArray(counts) ? counts : [counts])) as Promise<
+    number[]
+  >;
 
-export interface UpdatePageviewsOptions {
+export interface UpdateArticleCounterOptions {
   serverURL: string;
   lang: string;
   path: string;
+  type: string;
+  action?: 'inc' | 'desc';
 }
 
-export const updatePageviews = ({
+export const updateArticleCounter = ({
   serverURL,
   lang,
   path,
-}: UpdatePageviewsOptions): Promise<number> =>
+  type,
+  action,
+}: UpdateArticleCounterOptions): Promise<number> =>
   fetch(`${serverURL}/article?lang=${lang}`, {
     method: 'POST',
     headers: JSON_HEADERS,
-    body: JSON.stringify({ path }),
+    body: JSON.stringify({ path, type, action }),
   })
     .then((resp) => resp.json() as Promise<number>)
-    .then((data) => errorCheck(data, 'visit count'));
+    .then((data) => errorCheck(data, 'article count'));
+
+export const updatePageviews = (
+  options: Omit<UpdateArticleCounterOptions, 'type'>
+): Promise<number> =>
+  updateArticleCounter({
+    ...options,
+    type: 'time',
+  });