@waline/client 2.4.2 → 2.6.0

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

@@ -33,4 +33,12 @@ export default generateLocale([
   'từ',
   'Please input comments between $0 and $1 words!\n Current word number: $2',
   'Vô danh',
+  'Dwarves',
+  'Hobbits',
+  'Ents',
+  'Wizards',
+  'Elves',
+  'Maiar',
+  'GIF',
+  'Tìm kiếm GIF',
 ]);

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

@@ -39,4 +39,6 @@ export default generateLocale([
   '活跃',
   '话痨',
   '传说',
+  '表情包',
+  '搜索表情包',
 ]);

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

@@ -39,4 +39,6 @@ export default generateLocale([
   '活躍',
   '話癆',
   '傳說',
+  '表情包',
+  '搜索表情包',
 ]);

package/src/init.ts

@@ -83,9 +83,6 @@ export const init = ({
   // 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,

package/src/styles/card.scss

@@ -137,6 +137,7 @@
   .wl-reply {
     display: inline-flex;
     align-items: center;
+
     padding: 4px;
     border: none;
 

package/src/styles/emoji.scss

@@ -1,118 +1,136 @@
-@mixin emoji() {
-  .wl-emoji-popup {
-    position: absolute;
-    top: 100%;
-    left: 1.25em;
-    z-index: 10;
-
-    max-width: 526px;
-    border: var(--waline-border);
-    border-radius: 6px;
-
-    background: var(--waline-bgcolor);
-    box-shadow: var(--waline-box-shadow);
-
-    opacity: 0;
-    visibility: hidden;
-
-    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
-    transform: scale(0.9, 0.9);
-    transform-origin: 0 0;
-
-    &.display {
-      opacity: 1;
-      visibility: visible;
-      transform: none;
-    }
+.wl-emoji-popup {
+  position: absolute;
+  top: 100%;
+  left: 1.25em;
+  z-index: 10;
+
+  max-width: 526px;
+  border: var(--waline-border);
+  border-radius: 6px;
+
+  background: var(--waline-bgcolor);
+  box-shadow: var(--waline-box-shadow);
+
+  opacity: 0;
+  visibility: hidden;
+
+  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
+  transform: scale(0.9, 0.9);
+  transform-origin: 0 0;
+
+  &.display {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+
+  button {
+    display: inline-block;
+    vertical-align: middle;
+
+    width: 2em;
+    margin: 0.125em;
+    padding: 0;
+    border-width: 0;
 
-    button {
-      display: inline-block;
-      vertical-align: middle;
+    background: transparent;
 
-      width: 2em;
-      margin: 0.125em;
-      padding: 0;
-      border-width: 0;
+    font-size: inherit;
+    line-height: 2;
+    text-align: center;
 
-      background: transparent;
+    cursor: pointer;
 
-      font-size: inherit;
-      line-height: 2;
-      text-align: center;
+    &:hover {
+      background: var(--waline-bgcolor-hover);
+    }
+  }
+
+  .wl-emoji {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 1.5em;
+    max-height: 1.5em;
+  }
 
-      cursor: pointer;
+  .wl-tab-wrapper {
+    overflow-y: auto;
+    max-height: 145px;
+    padding: 0.5em;
 
-      &:hover {
-        background: var(--waline-bgcolor-hover);
-      }
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
     }
 
-    .wl-emoji {
-      display: inline-block;
-      vertical-align: middle;
-      max-width: 1.5em;
-      max-height: 1.5em;
+    &::-webkit-scrollbar-track-piece:vertical {
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: rgb(0 0 0 / 10%);
     }
 
-    .wl-tab-wrapper {
-      overflow-y: auto;
-      max-height: 145px;
-      padding: 0.5em;
-
-      &::-webkit-scrollbar {
-        width: 6px;
-        height: 6px;
-      }
-
-      &::-webkit-scrollbar-track-piece:vertical {
-        -webkit-border-radius: 6px;
-        border-radius: 6px;
-        background: rgb(0 0 0 / 10%);
-      }
-
-      &::-webkit-scrollbar-thumb:vertical {
-        width: 6px;
-        -webkit-border-radius: 6px;
-        border-radius: 6px;
-        background: var(--waline-theme-color);
-      }
+    &::-webkit-scrollbar-thumb:vertical {
+      width: 6px;
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: var(--waline-theme-color);
     }
+  }
+
+  .wl-tabs {
+    position: relative;
+    height: 2em;
+    padding: 0 6px 1px;
+    overflow-x: scroll;
+    white-space: nowrap;
+
+    &::before {
+      content: ' ';
+
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      z-index: 2;
 
-    .wl-tabs {
-      position: relative;
-      height: 2em;
-      padding: 0 6px 1px;
+      height: 1px;
 
-      &::before {
-        content: ' ';
+      background: var(--waline-border-color);
+    }
 
-        position: absolute;
-        top: 0;
-        right: 0;
-        left: 0;
-        z-index: 2;
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
 
-        height: 1px;
+    &::-webkit-scrollbar-track-piece:horizontal {
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: rgb(0 0 0 / 10%);
+    }
 
-        background: var(--waline-border-color);
-      }
+    &::-webkit-scrollbar-thumb:horizontal {
+      height: 6px;
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: var(--waline-theme-color);
     }
+  }
 
-    .wl-tab {
-      position: relative;
-      margin: 0;
-      padding: 0 0.5em;
+  .wl-tab {
+    position: relative;
+    margin: 0;
+    padding: 0 0.5em;
 
-      &.active {
-        z-index: 3;
+    &.active {
+      z-index: 3;
 
-        border: 1px solid var(--waline-border-color);
-        border-top-width: 0;
-        border-bottom-right-radius: 6px;
-        border-bottom-left-radius: 6px;
+      border: 1px solid var(--waline-border-color);
+      border-top-width: 0;
+      border-bottom-right-radius: 6px;
+      border-bottom-left-radius: 6px;
 
-        background: var(--waline-bgcolor);
-      }
+      background: var(--waline-bgcolor);
     }
   }
 }

package/src/styles/gif.scss

@@ -0,0 +1,70 @@
+.wl-gif-popup {
+  position: absolute;
+  top: 100%;
+  left: 1.25em;
+  z-index: 10;
+
+  width: calc(100% - 3em);
+  padding: 0.75em 0.75em 0.25em;
+  border: var(--waline-border);
+  border-radius: 6px;
+
+  background: var(--waline-bgcolor);
+  box-shadow: var(--waline-box-shadow);
+
+  opacity: 0;
+  visibility: hidden;
+
+  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
+  transform: scale(0.9, 0.9);
+  transform-origin: 0 0;
+
+  &.display {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+
+  input {
+    box-sizing: border-box;
+
+    width: 100%;
+    margin-bottom: 10px;
+    padding: 3px 5px;
+    border: var(--waline-border);
+  }
+
+  img {
+    display: block;
+
+    box-sizing: border-box;
+
+    width: 100%;
+    border-width: 2px;
+    border-style: solid;
+    border-color: #fff;
+
+    cursor: pointer;
+
+    &:hover {
+      border-color: var(--waline-theme-color);
+      border-radius: 2px;
+    }
+  }
+}
+
+.wl-gallery {
+  max-height: 80vh;
+  display: flex;
+  overflow-y: auto;
+}
+
+.wl-gallery-column {
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
+
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}

package/src/styles/index.scss

@@ -4,6 +4,9 @@
 @use 'base';
 
 @use 'panel';
+@use 'emoji';
+@use 'gif';
+
 @use 'card';
 @use 'layout';
 

package/src/styles/panel.scss

@@ -1,5 +1,3 @@
-@use 'emoji';
-
 .wl-comment {
   position: relative;
   display: flex;
@@ -286,5 +284,3 @@
     }
   }
 }
-
-@include emoji.emoji;

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

@@ -36,4 +36,6 @@ export interface WalineLocale extends WalineDateLocale, WalineLevelLocale {
   word: string;
   wordHint: string;
   anonymous: string;
+  gif: string;
+  gifSearchPlaceholder: 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,
 });