@waline/client 2.5.1 → 2.6.2

package/src/components/ImageWall.vue

@@ -31,17 +31,21 @@ SOFTWARE. -->
       :data-index="columnIndex"
       :style="{ gap: `${gap}px` }"
     >
-      <img
-        v-for="itemIndex in column"
-        :key="itemIndex"
-        class="wl-gallery-item"
-        :src="items[itemIndex].media[0].tinygif.url"
-        :title="items[itemIndex].title"
-        loading="lazy"
-        @click="
-          $emit('insert', `![](${items[itemIndex].media[0].tinygif.url})`)
-        "
-      />
+      <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>
@@ -56,29 +60,36 @@ import {
   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 },
-    items: { type: Array as PropType<unknown[]>, default: () => [] },
     gap: { type: Number, default: 0 },
-    rtl: { type: Boolean, default: false },
   },
 
-  emit: ['insert'],
+  emits: ['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)
       );
@@ -98,8 +109,6 @@ export default defineComponent({
         wall.value?.children || []
       ) as HTMLDivElement[];
 
-      if (props.rtl) columnDivs.reverse();
-
       const target = columnDivs.reduce((prev, curr) =>
         curr.getBoundingClientRect().height <
         prev.getBoundingClientRect().height
@@ -125,8 +134,11 @@ export default defineComponent({
     };
 
     watch(
-      () => [props.items, props.rtl],
-      () => redraw(true)
+      () => [props.items],
+      () => {
+        state.value = {};
+        redraw(true);
+      }
     );
     watch(
       () => [props.columnWidth, props.gap],
@@ -136,15 +148,15 @@ export default defineComponent({
     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,
     };
   },

package/src/composables/userInfo.ts

@@ -23,6 +23,6 @@ let userInfoStorage: UserInfoRef | null = null;
 export const useUserInfo = (): UserInfoRef =>
   userInfoStorage ||
   (userInfoStorage = useStorage<UserInfo | Record<string, never>>(
-    'USER_KEY',
+    USER_KEY,
     {}
   ));

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'];
 
@@ -10,6 +10,7 @@ export const defaultLang = 'zh-CN';
 export const defaultUploadImage = (file: File): Promise<string> =>
   new Promise((resolve, reject) => {
     const reader = new FileReader();
+
     reader.readAsDataURL(file);
     reader.onload = (): void => resolve(reader.result?.toString() || '');
     reader.onerror = reject;
@@ -19,3 +20,94 @@ 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/config/i18n/en.ts

@@ -41,4 +41,5 @@ export default generateLocale([
   'Maiar',
   'GIF',
   'Search GIF',
+  'Profile',
 ]);

package/src/config/i18n/generate.ts

@@ -41,6 +41,7 @@ const localeKeys = [
   'level5',
   'gif',
   'gifSearchPlaceholder',
+  'profile',
 ];
 
 export const generateLocale = (locale: string[]): WalineLocale =>

package/src/config/i18n/jp.ts

@@ -41,4 +41,5 @@ export default generateLocale([
   'なぬし',
   'GIF',
   '探す GIF',
+  '個人情報',
 ]);

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

@@ -41,4 +41,5 @@ export default generateLocale([
   'Maiar',
   'GIF',
   'Pesquisar GIF',
+  'informação pessoal',
 ]);

package/src/config/i18n/ru.ts

@@ -41,4 +41,5 @@ export default generateLocale([
   'Maiar',
   'GIF',
   'Поиск GIF',
+  'Персональные данные',
 ]);

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

@@ -41,4 +41,5 @@ export default generateLocale([
   'Maiar',
   'GIF',
   'Tìm kiếm GIF',
+  'thông tin cá nhân',
 ]);

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

@@ -41,4 +41,5 @@ export default generateLocale([
   '传说',
   '表情包',
   '搜索表情包',
+  '个人资料',
 ]);

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

@@ -2,11 +2,11 @@ import { generateLocale } from './generate';
 
 export default generateLocale([
   '暱稱',
+  '暱稱不能少於3個字元',
   '郵箱',
+  '請填寫正確的郵件地址',
   '網址',
   '可選',
-  '暱稱不能少於3個字元',
-  '請填寫正確的郵件地址',
   '歡迎評論',
   '來發評論吧~',
   '提交',
@@ -41,4 +41,5 @@ export default generateLocale([
   '傳說',
   '表情包',
   '搜索表情包',
+  '個人資料',
 ]);

package/src/init.ts

@@ -80,12 +80,8 @@ export const init = ({
     ? createApp(() => h(Waline, { path: state.path, ...props }))
     : null;
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   if (app) app.mount(root!);
 
-  updateCommentCount();
-  updatePageviewCount();
-
   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

package/src/styles/emoji.scss

@@ -79,9 +79,14 @@
 
   .wl-tabs {
     position: relative;
+
+    overflow-x: scroll;
+
     height: 2em;
     padding: 0 6px 1px;
 
+    white-space: nowrap;
+
     &::before {
       content: ' ';
 
@@ -95,6 +100,24 @@
 
       background: var(--waline-border-color);
     }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    &::-webkit-scrollbar-track-piece:horizontal {
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: rgb(0 0 0 / 10%);
+    }
+
+    &::-webkit-scrollbar-thumb:horizontal {
+      height: 6px;
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: var(--waline-theme-color);
+    }
   }
 
   .wl-tab {

package/src/styles/gif.scss

@@ -54,17 +54,18 @@
 }
 
 .wl-gallery {
-  max-height: 80vh;
   display: flex;
   overflow-y: auto;
+  max-height: 80vh;
 }
 
 .wl-gallery-column {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  // stylelint-disable
   height: -webkit-max-content;
   height: -moz-max-content;
   height: max-content;
-
-  flex: 1;
-  display: flex;
-  flex-direction: column;
 }

package/src/typings/base.ts

@@ -39,6 +39,46 @@ export interface WalineEmojiInfo {
 
 export type WalineEmojiMaps = Record<string, string>;
 
+export interface WalineSearchResult extends Record<string, unknown> {
+  /**
+   * Image link
+   */
+  src: string;
+
+  /**
+   * Image title, optional
+   */
+  title?: string;
+
+  /**
+   * Image preview link, optional
+   *
+   * @default src
+   */
+  preview?: string;
+}
+
+export interface WalineSearchOptions {
+  /**
+   * Search action
+   */
+  search: (word: string) => Promise<WalineSearchResult[]>;
+
+  /**
+   * Default search action
+   *
+   * @default () => search('')
+   */
+  default?: () => Promise<WalineSearchResult[]>;
+
+  /**
+   * Fetch more action
+   *
+   * @default (word) => search(word)
+   */
+  more?: (word: string, currectCount: number) => Promise<WalineSearchResult[]>;
+}
+
 export type WalineMeta = 'nick' | 'mail' | 'link';
 
 export type WalineImageUploader = (image: File) => Promise<string>;

package/src/typings/locale.ts

@@ -38,4 +38,5 @@ export interface WalineLocale extends WalineDateLocale, WalineLevelLocale {
   anonymous: string;
   gif: string;
   gifSearchPlaceholder: string;
+  profile: string;
 }

package/src/typings/waline.ts

@@ -4,6 +4,7 @@ import type {
   WalineImageUploader,
   WalineMeta,
   WalineTexRenderer,
+  WalineSearchOptions,
 } from './base';
 import type { WalineLocale } from './locale';
 
@@ -148,6 +149,13 @@ export interface WalineProps {
    */
   emoji?: (string | WalineEmojiInfo)[] | false;
 
+  /**
+   * 设置搜索功能
+   *
+   * Customize Search feature
+   */
+  search?: WalineSearchOptions | false;
+
   /**
    * 代码高亮
    *

package/src/utils/config.ts

@@ -1,10 +1,11 @@
 import {
   defaultLang,
+  defaultLocales,
   defaultUploadImage,
   defaultHighlighter,
   defaultTexRenderer,
+  getDefaultSearchOptions,
   getMeta,
-  defaultLocales,
 } from '../config';
 
 import { decodePath, isLinkHttp, removeEndingSplash } from './path';
@@ -27,7 +28,7 @@ export interface WalineConfig extends Required<Omit<WalineProps, 'wordLimit'>> {
   // emoji: Promise<EmojiConfig>;
 }
 
-const getServerURL = (serverURL: string): string => {
+export const getServerURL = (serverURL: string): string => {
   const result = removeEndingSplash(serverURL);
 
   return isLinkHttp(result) ? result : `https://${result}`;
@@ -61,6 +62,7 @@ export const getConfig = ({
   texRenderer,
   copyright = true,
   login = 'enable',
+  search = getDefaultSearchOptions(),
   ...more
 }: WalineProps): WalineConfig => ({
   serverURL: getServerURL(serverURL),
@@ -81,5 +83,6 @@ export const getConfig = ({
   pageSize,
   login,
   copyright,
+  search,
   ...more,
 });

package/src/utils/fetch.ts

@@ -37,6 +37,7 @@ export const fetchCommentCount = ({
   token,
 }: FetchCountOptions): Promise<number[]> => {
   const headers: Record<string, string> = {};
+
   if (token) headers.Authorization = `Bearer ${token}`;
 
   return (
@@ -68,6 +69,7 @@ export const fetchRecentComment = ({
   token,
 }: FetchRecentOptions): Promise<WalineComment[]> => {
   const headers: Record<string, string> = {};
+
   if (token) headers.Authorization = `Bearer ${token}`;
 
   return fetch(`${serverURL}/comment?type=recent&count=${count}&lang=${lang}`, {
@@ -104,6 +106,7 @@ export const fetchCommentList = ({
   token,
 }: FetchListOptions): Promise<FetchListResult> => {
   const headers: Record<string, string> = {};
+
   if (token) headers.Authorization = `Bearer ${token}`;
 
   return fetch(

package/src/utils/index.ts

@@ -10,5 +10,3 @@ export * from './markdown';
 export * from './path';
 export * from './query';
 export * from './wordCount';
-export * from './fetchGif';
-export * from './throttle';

package/src/utils/markedMathExtension.ts

@@ -31,6 +31,7 @@ export const markedTexExtensions = (
     level: 'inline',
     start(src: string) {
       const idx = src.search(inlineMathStart);
+
       return idx !== -1 ? idx : src.length;
     },
     tokenizer(src: string) {