@waline/client 2.5.0 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.5.0",
+  "version": "2.6.1",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -56,15 +56,6 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "build": "pnpm rollup && pnpm style",
-    "clean": "rimraf ./dist",
-    "dev": "vite -c config/vite.config.js",
-    "lint": "eslint --ext .ts,.vue .",
-    "prepublish": "pnpm clean && pnpm build",
-    "rollup": "rollup -c ./config/rollup.config.js",
-    "style": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed"
-  },
   "browserslist": {
     "production": [
       ">0.5%",
@@ -80,33 +71,40 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^8.4.2",
+    "@vueuse/core": "^8.6.0",
     "autosize": "^5.0.1",
-    "marked": "^4.0.15",
-    "vue": "^3.2.33"
+    "marked": "^4.0.17",
+    "vue": "^3.2.37"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.10",
-    "@babel/preset-env": "^7.17.10",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-replace": "^4.0.0",
-    "@types/autosize": "^4.0.1",
-    "@types/marked": "^4.0.3",
-    "@types/node": "^17.0.33",
-    "@vitejs/plugin-vue": "^2.3.3",
-    "@vue/compiler-sfc": "^3.2.33",
-    "@yeger/vue-masonry-wall": "^3.0.31",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.73.0",
-    "rollup-plugin-dts": "^4.2.1",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-ts": "^2.0.7",
-    "typescript": "^4.6.4",
-    "vite": "^2.9.9"
+    "@babel/core": "7.18.5",
+    "@babel/preset-env": "7.18.2",
+    "@rollup/plugin-babel": "5.3.1",
+    "@rollup/plugin-commonjs": "22.0.0",
+    "@rollup/plugin-node-resolve": "13.3.0",
+    "@rollup/plugin-replace": "4.0.0",
+    "@types/autosize": "4.0.1",
+    "@types/marked": "4.0.3",
+    "@types/node": "17.0.43",
+    "@vitejs/plugin-vue": "2.3.3",
+    "rimraf": "3.0.2",
+    "rollup": "2.75.6",
+    "rollup-plugin-dts": "4.2.2",
+    "rollup-plugin-terser": "7.0.2",
+    "rollup-plugin-ts": "3.0.2",
+    "typescript": "4.7.3",
+    "vite": "2.9.12"
   },
   "engines": {
     "node": ">=14"
+  },
+  "scripts": {
+    "build": "pnpm rollup && pnpm style",
+    "clean": "rimraf ./dist",
+    "dev": "vite -c config/vite.config.js",
+    "lint": "eslint --ext .ts,.vue .",
+    "prepublish": "pnpm clean && pnpm build",
+    "rollup": "rollup -c ./config/rollup.config.js",
+    "style": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed"
   }
-}
+}

package/src/comment.ts

@@ -1,5 +1,10 @@
 import { useUserInfo } from './composables';
-import { decodePath, errorHandler, fetchCommentCount } from './utils';
+import {
+  decodePath,
+  errorHandler,
+  fetchCommentCount,
+  getServerURL,
+} from './utils';
 import type { WalineAbort } from './typings';
 
 export interface WalineCommentCountOptions {
@@ -54,7 +59,7 @@ WalineCommentCountOptions): WalineAbort => {
 
   if (elements.length)
     void fetchCommentCount({
-      serverURL,
+      serverURL: getServerURL(serverURL),
       paths: Array.from(elements).map((element) =>
         decodePath(element.dataset.path || element.getAttribute('id') || path)
       ),

package/src/components/CommentBox.vue

@@ -35,7 +35,7 @@
           <input
             :ref="
               (element) => {
-                if (element) inputRefs[kind] = element;
+                if (element) inputRefs[kind] = element as HTMLInputElement;
               }
             "
             :id="`wl-${kind}`"
@@ -89,6 +89,7 @@
           </button>
 
           <button
+            v-if="config.search"
             ref="gifButtonRef"
             class="wl-action"
             :class="{ actived: showGif }"
@@ -174,30 +175,14 @@
             @input="onGifSearch"
           />
 
-          <masonry-wall
-            class="wl-gif-waterfall"
+          <ImageWall
             :items="gifData.list"
-            :ssr-columns="2"
             :column-width="200"
             :gap="6"
-            @scroll="onGifMasonryScroll"
+            @insert="insert($event)"
+            @scroll="onImageWallScroll"
           >
-            <template #default="{ item }">
-              <img
-                @click="insert(`![](${item.media[0].tinygif.url})`)"
-                :src="item.media[0].tinygif.url"
-                :title="item.title"
-                loading="lazy"
-                :style="{
-                  width: '200px',
-                  height:
-                    (200 * item.media[0].tinygif.dims[1]) /
-                      item.media[0].tinygif.dims[0] +
-                    'px',
-                }"
-              />
-            </template>
-          </masonry-wall>
+          </ImageWall>
 
           <div v-if="gifData.loading" class="wl-loading">
             <LoadingIcon :size="30" />
@@ -261,6 +246,7 @@
 </template>
 
 <script lang="ts">
+import { useDebounceFn } from '@vueuse/core';
 import autosize from 'autosize';
 import {
   computed,
@@ -268,6 +254,7 @@ import {
   inject,
   onMounted,
   onUnmounted,
+  reactive,
   ref,
   watch,
 } from 'vue';
@@ -281,21 +268,24 @@ import {
   LoadingIcon,
   GifIcon,
 } from './Icons';
+import ImageWall from './ImageWall.vue';
 import { useEditor, useUserMeta, useUserInfo } from '../composables';
 import {
+  getEmojis,
   getImagefromDataTransfer,
-  parseMarkdown,
   getWordNumber,
   parseEmoji,
+  parseMarkdown,
   postComment,
-  getEmojis,
-  fetchGif,
-  FetchGifResponse,
-  throttle,
 } from '../utils';
 
 import type { ComputedRef, DeepReadonly } from 'vue';
-import type { WalineCommentData, WalineImageUploader } from '../typings';
+import type {
+  WalineCommentData,
+  WalineImageUploader,
+  WalineSearchOptions,
+  WalineSearchResult,
+} from '../typings';
 import type { WalineConfig, WalineEmojiConfig } from '../utils';
 
 export default defineComponent({
@@ -305,6 +295,7 @@ export default defineComponent({
     CloseIcon,
     EmojiIcon,
     ImageIcon,
+    ImageWall,
     MarkdownIcon,
     PreviewIcon,
     LoadingIcon,
@@ -353,11 +344,11 @@ export default defineComponent({
     const showPreview = ref(false);
     const previewText = ref('');
     const wordNumber = ref(0);
-    const gifData = ref<{
-      cursor: string;
-      loading: boolean;
-      list: FetchGifResponse['results'];
-    }>({ cursor: '', loading: true, list: [] });
+
+    const searchResults = reactive({
+      loading: true,
+      list: [] as WalineSearchResult[],
+    });
 
     const wordLimit = ref(0);
     const isWordNumberLegal = ref(false);
@@ -621,35 +612,35 @@ export default defineComponent({
         showGif.value = false;
     };
 
-    const onGifSearch = throttle(async (event: Event) => {
-      gifData.value.cursor = '';
-      gifData.value.list = [];
-      onGifMasonryScroll(event);
-    });
-
-    const onGifMasonryScroll = async (event: Event): Promise<void> => {
+    const onImageWallScroll = async (event: Event): Promise<void> => {
       const { scrollTop, clientHeight, scrollHeight } =
         event.target as HTMLDivElement;
       const percent = (clientHeight + scrollTop) / scrollHeight;
-      if (percent < 0.9 || gifData.value.loading) {
-        return;
-      }
+      const searchOptions = config.value.search as WalineSearchOptions;
+      const keyword = gifSearchInputRef.value?.value || '';
+
+      if (percent < 0.9 || searchResults.loading) return;
+
+      searchResults.loading = true;
+
+      searchResults.list.push(
+        ...(searchOptions.more
+          ? await searchOptions.more(keyword, searchResults.list.length)
+          : await searchOptions.search(keyword))
+      );
 
-      gifData.value.loading = true;
-      const data = await fetchGif({
-        keyword: gifSearchInputRef.value?.value || '',
-        pos: gifData.value.cursor,
-      }).finally(() => {
-        gifData.value.loading = false;
-      });
+      searchResults.loading = false;
 
-      gifData.value.cursor = data.next;
-      gifData.value.list = gifData.value.list.concat(data.results);
       setTimeout(() => {
         (event.target as HTMLDivElement).scrollTop = scrollTop;
       }, 50);
     };
 
+    const onGifSearch = useDebounceFn((event: Event) => {
+      searchResults.list = [];
+      onImageWallScroll(event);
+    }, 300);
+
     // update wordNumber
     watch(
       [config, wordNumber],
@@ -675,18 +666,21 @@ export default defineComponent({
       { immediate: true }
     );
 
-    watch([showGif], async ([showGif]) => {
-      if (!showGif) {
-        return;
-      }
+    watch(showGif, async (showGif) => {
+      if (!showGif) return;
+
+      const searchOptions = config.value.search as WalineSearchOptions;
+
+      // clear input
+      if (gifSearchInputRef.value) gifSearchInputRef.value.value = '';
+
+      searchResults.loading = true;
 
-      gifData.value.loading = true;
-      const data = await fetchGif({ keyword: '' }).finally(() => {
-        gifData.value.loading = false;
-      });
+      searchResults.list = searchOptions.default
+        ? await searchOptions.default()
+        : await searchOptions.search('');
 
-      gifData.value.cursor = data.next;
-      gifData.value.list = gifData.value.list.concat(data.results);
+      searchResults.loading = false;
     });
 
     onMounted(() => {
@@ -746,7 +740,7 @@ export default defineComponent({
       onLogout,
       onProfile,
       submitComment,
-      onGifMasonryScroll,
+      onImageWallScroll,
       onGifSearch,
 
       isLogin,
@@ -768,6 +762,7 @@ export default defineComponent({
       showEmoji,
 
       // gif
+      gifData: searchResults,
       showGif,
 
       // image
@@ -786,7 +781,6 @@ export default defineComponent({
       gifPopupRef,
       imageUploadRef,
       gifSearchInputRef,
-      gifData,
     };
   },
 });

package/src/components/CommentCard.vue

@@ -25,7 +25,7 @@
         <span v-if="comment.label" class="wl-badge" v-text="comment.label" />
         <span v-if="comment.sticky" class="wl-badge" v-text="locale.sticky" />
         <span
-          v-if="comment.level && comment.level >= 0"
+          v-if="comment.level !== undefined && comment.level >= 0"
           :class="`wl-badge level${comment.level}`"
           v-text="locale[`level${comment.level}`] || `Level ${comment.level}`"
         />

package/src/components/ImageWall.vue

@@ -0,0 +1,166 @@
+<!-- forked from https://github.com/DerYeger/vue-masonry-wall/blob/master/src/masonry-wall.vue -->
+
+<!-- MIT License
+
+Copyright (c) 2021 Fuxing Loh, Jan Müller
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. -->
+
+<template>
+  <div ref="wall" class="wl-gallery" :style="{ gap: `${gap}px` }">
+    <div
+      v-for="(column, columnIndex) in columns"
+      :key="columnIndex"
+      class="wl-gallery-column"
+      :data-index="columnIndex"
+      :style="{ gap: `${gap}px` }"
+    >
+      <template v-for="itemIndex in column" :key="itemIndex">
+        <LoadingIcon
+          v-if="!state[items[itemIndex].src]"
+          :size="36"
+          style="margin: 20px auto"
+        />
+        <img
+          class="wl-gallery-item"
+          :src="items[itemIndex].src"
+          :title="items[itemIndex].title"
+          loading="lazy"
+          @load="state[items[itemIndex].src] = true"
+          @click="$emit('insert', `![](${items[itemIndex].src})`)"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue';
+
+import { LoadingIcon } from './Icons';
+
+import type { PropType } from 'vue';
+import type { WalineSearchResult } from '../typings';
+
+type Column = number[];
+
+export default defineComponent({
+  name: 'ImageWall',
+
+  components: {
+    LoadingIcon,
+  },
+
+  props: {
+    items: { type: Array as PropType<WalineSearchResult[]>, default: () => [] },
+    columnWidth: { type: Number, default: 300 },
+    gap: { type: Number, default: 0 },
+  },
+
+  emit: ['insert'],
+
+  setup(props) {
+    let resizeObserver: ResizeObserver | null = null;
+    const wall = ref<HTMLDivElement | null>(null);
+    const state = ref<Record<string, boolean>>({});
+    const columns = ref<Column[]>([]);
+
+    const getColumnCount = (): number => {
+      const count = Math.floor(
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        (wall.value!.getBoundingClientRect().width + props.gap) /
+          (props.columnWidth + props.gap)
+      );
+
+      return count > 0 ? count : 1;
+    };
+
+    const createColumns = (count: number): Column[] =>
+      new Array(count).fill(null).map(() => []);
+
+    const fillColumns = async (itemIndex: number): Promise<void> => {
+      if (itemIndex >= props.items.length) return;
+
+      await nextTick();
+
+      const columnDivs = Array.from(
+        wall.value?.children || []
+      ) as HTMLDivElement[];
+
+      const target = columnDivs.reduce((prev, curr) =>
+        curr.getBoundingClientRect().height <
+        prev.getBoundingClientRect().height
+          ? curr
+          : prev
+      );
+
+      columns.value[Number(target.dataset.index)].push(itemIndex);
+
+      await fillColumns(itemIndex + 1);
+    };
+
+    const redraw = async (force = false): Promise<void> => {
+      if (columns.value.length === getColumnCount() && !force) return;
+
+      columns.value = createColumns(getColumnCount());
+
+      const scrollY = window.scrollY;
+
+      await fillColumns(0);
+
+      window.scrollTo({ top: scrollY });
+    };
+
+    watch(
+      () => [props.items],
+      () => {
+        state.value = {};
+        redraw(true);
+      }
+    );
+    watch(
+      () => [props.columnWidth, props.gap],
+      () => redraw()
+    );
+
+    onMounted(() => {
+      redraw(true);
+      resizeObserver = new ResizeObserver(() => redraw());
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      resizeObserver.observe(wall.value!);
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    onBeforeUnmount(() => resizeObserver!.unobserve(wall.value!));
+
+    return {
+      columns,
+      state,
+      wall,
+    };
+  },
+});
+</script>

package/src/composables/like.ts

@@ -2,7 +2,7 @@ import { useStorage } from '@vueuse/core';
 
 import type { Ref } from 'vue';
 
-const LIKE_KEY = 'WALIKE_LIKE';
+const LIKE_KEY = 'WALINE_LIKE';
 
 export type LikeID = number | string;
 

package/src/config/default.ts

@@ -1,4 +1,4 @@
-import type { WalineMeta } from '../typings';
+import type { WalineMeta, WalineSearchOptions } from '../typings';
 
 const availableMeta: WalineMeta[] = ['nick', 'mail', 'link'];
 
@@ -19,3 +19,93 @@ export const defaultTexRenderer = (blockMode: boolean): string =>
   blockMode === true
     ? '<p class="wl-tex">Tex is not available in preview</p>'
     : '<span class="wl-tex">Tex is not available in preview</span>';
+
+export const getDefaultSearchOptions = (): WalineSearchOptions => {
+  interface FetchGifRequest {
+    keyword: string;
+    pos?: string;
+  }
+
+  type GifFormat =
+    | 'gif'
+    | 'mediumgif'
+    | 'tinygif'
+    | 'nanogif'
+    | 'mp4'
+    | 'loopedmp4'
+    | 'tinymp4'
+    | 'nanomp4'
+    | 'webm'
+    | 'tinywebm'
+    | 'nanowebm';
+
+  interface MediaObject {
+    preview: string;
+    url: string;
+    dims: number[];
+    size: number;
+  }
+
+  interface GifObject {
+    created: number;
+    hasaudio: boolean;
+    id: string;
+    media: Record<GifFormat, MediaObject>[];
+    tags: string[];
+    title: string;
+    itemurl: string;
+    hascaption: boolean;
+    url: string;
+  }
+
+  interface FetchGifResponse {
+    next: string;
+    results: GifObject[];
+  }
+
+  const state = {
+    next: '',
+  };
+
+  const fetchGif = ({
+    keyword,
+    pos,
+  }: FetchGifRequest): Promise<FetchGifResponse> => {
+    const baseUrl = `https://g.tenor.com/v1/search`;
+    const query = new URLSearchParams('media_filter=minimal');
+    query.set('key', 'PAY5JLFIH6V6');
+    query.set('limit', '20');
+    query.set('pos', pos || '');
+    query.set('q', keyword);
+
+    return fetch(`${baseUrl}?${query.toString()}`, {
+      headers: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'Content-Type': 'application/json',
+      },
+    })
+      .then((resp) => resp.json() as Promise<FetchGifResponse>)
+      .catch(() => ({ next: pos || '', results: [] }));
+  };
+
+  return {
+    search: (word = '') =>
+      fetchGif({ keyword: word }).then((resp) => {
+        state.next = resp.next;
+
+        return resp.results.map((item) => ({
+          title: item.title,
+          src: item.media[0].tinygif.url,
+        }));
+      }),
+    more: (word) =>
+      fetchGif({ keyword: word, pos: state.next }).then((resp) => {
+        state.next = resp.next;
+
+        return resp.results.map((item) => ({
+          title: item.title,
+          src: item.media[0].tinygif.url,
+        }));
+      }),
+  };
+};

package/src/init.ts

@@ -1,5 +1,4 @@
 import { createApp, h, reactive, watchEffect } from 'vue';
-import MasonryWall from '@yeger/vue-masonry-wall';
 
 import Waline from './components/Waline.vue';
 import { commentCount } from './comment';
@@ -81,15 +80,8 @@ export const init = ({
     ? createApp(() => h(Waline, { path: state.path, ...props }))
     : null;
 
-  if (app) {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    app.use(MasonryWall);
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    app.mount(root!);
-  }
-
-  updateCommentCount();
-  updatePageviewCount();
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  if (app) app.mount(root!);
 
   const stopComment = watchEffect(updateCommentCount);
   const stopPageview = watchEffect(updatePageviewCount);

package/src/pageview.ts

@@ -2,6 +2,7 @@ import {
   errorHandler,
   fetchPageviews,
   getQuery,
+  getServerURL,
   updatePageviews,
 } from './utils';
 
@@ -83,7 +84,7 @@ export const pageviewCount = ({
 
   const fetch = (elements: HTMLElement[]): Promise<void> =>
     fetchPageviews({
-      serverURL,
+      serverURL: getServerURL(serverURL),
       paths: elements.map((element) => getQuery(element) || path),
       lang,
       signal: controller.signal,
@@ -96,7 +97,11 @@ export const pageviewCount = ({
     const normalElements = elements.filter((element) => !filter(element));
     const elementsNeedstoBeFetched = elements.filter(filter);
 
-    void updatePageviews({ serverURL, path, lang }).then((count) =>
+    void updatePageviews({
+      serverURL: getServerURL(serverURL),
+      path,
+      lang,
+    }).then((count) =>
       renderVisitorCount(
         new Array<number>(normalElements.length).fill(count),
         normalElements