@waline/client 2.13.0 → 2.14.0

package/src/config/default.ts

@@ -14,9 +14,8 @@ export const defaultLang = 'zh-CN';
 
 export const defaultUploadImage = (file: File): Promise<string> =>
   new Promise((resolve, reject) => {
-    if (file.size > 128 * 1000) {
+    if (file.size > 128 * 1000)
       return reject(new Error('File too large! File size limit 128KB'));
-    }
 
     const reader = new FileReader();
 
@@ -31,43 +30,43 @@ export const defaultTexRenderer = (blockMode: boolean): string =>
     : '<span class="wl-tex">Tex is not available in preview</span>';
 
 export const getDefaultSearchOptions = (lang: string): WalineSearchOptions => {
-  interface Result {
+  interface GifsResult {
+    data: IGif[];
     meta: {
       msg: string;
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       response_id: string;
       status: number;
     };
     pagination: {
       count: number;
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       total_count: number;
       offset: number;
     };
   }
-  interface GifsResult extends Result {
-    data: IGif[];
-  }
 
   const fetchGiphy = async (
     url: string,
     params: Record<string, string> = {}
-  ): Promise<WalineSearchResult> => {
-    const querystring = new URLSearchParams({
-      lang,
-      limit: '20',
-      rating: 'g',
-      api_key: '6CIMLkNMMOhRcXPoMCPkFy4Ybk2XUiMp',
-      ...params,
-    }).toString();
-
-    const resp = await fetch(
-      `https://api.giphy.com/v1/gifs/${url}?${querystring}`
-    ).then((resp) => resp.json() as Promise<GifsResult>);
-
-    return resp.data.map((gif) => ({
-      title: gif.title,
-      src: gif.images.downsized_medium.url,
-    }));
-  };
+  ): Promise<WalineSearchResult> =>
+    fetch(
+      `https://api.giphy.com/v1/gifs/${url}?${new URLSearchParams({
+        lang,
+        limit: '20',
+        rating: 'g',
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        api_key: '6CIMLkNMMOhRcXPoMCPkFy4Ybk2XUiMp',
+        ...params,
+      }).toString()}`
+    )
+      .then((resp) => <Promise<GifsResult>>resp.json())
+      .then(({ data }) =>
+        data.map((gif) => ({
+          title: gif.title,
+          src: gif.images.downsized_medium.url,
+        }))
+      );
 
   return {
     search: (word: string): Promise<WalineSearchResult> =>

package/src/pageview.ts

@@ -1,4 +1,4 @@
-import { fetchPageviews, updatePageviews } from './api';
+import { getPageview, updatePageview } from './api';
 import { errorHandler, getQuery, getServerURL } from './utils';
 
 import type { WalineAbort } from './typings';
@@ -78,7 +78,7 @@ export const pageviewCount = ({
   };
 
   const fetch = (elements: HTMLElement[]): Promise<void> =>
-    fetchPageviews({
+    getPageview({
       serverURL: getServerURL(serverURL),
       paths: elements.map((element) => getQuery(element) || path),
       lang,
@@ -92,7 +92,7 @@ export const pageviewCount = ({
     const normalElements = elements.filter((element) => !filter(element));
     const elementsNeedstoBeFetched = elements.filter(filter);
 
-    void updatePageviews({
+    void updatePageview({
       serverURL: getServerURL(serverURL),
       path,
       lang,

package/src/styles/index.scss

@@ -1,5 +1,5 @@
 @use 'config';
-@use 'nomalize';
+@use 'normalize';
 
 @use 'base';
 
@@ -9,9 +9,9 @@
 
 @use 'card';
 @use 'layout';
+@use 'reaction';
 
 @use 'highlight';
 
 @use 'recent';
-@use 'userlist';
-@use 'reaction';
+@use 'user-list';

package/src/styles/panel.scss

@@ -242,7 +242,7 @@
     color: var(--waline-theme-color);
   }
 
-  &.actived {
+  &.active {
     color: var(--waline-active-color);
   }
 }

package/src/styles/user-list.scss

@@ -0,0 +1,158 @@
+.wl-user-list {
+  padding: 0;
+  list-style: none;
+
+  .wl-user-item {
+    margin: 10px 0;
+
+    &:nth-child(1) .wl-user-badge {
+      background: var(--waline-rank-gold-bgcolor, #fa3939);
+      color: var(--waline-white);
+      font-weight: bold;
+    }
+
+    &:nth-child(2) .wl-user-badge {
+      background: var(--waline-rank-silver-bgcolor, #fb811c);
+      color: var(--waline-white);
+      font-weight: bold;
+    }
+
+    &:nth-child(3) .wl-user-badge {
+      background: var(--waline-rank-copper-bgcolor, #feb207);
+      color: var(--waline-white);
+    }
+  }
+
+  a,
+  a:hover,
+  a:visited {
+    color: var(--waline-color);
+    text-decoration: none;
+  }
+
+  .wl-user-avatar {
+    position: relative;
+
+    display: inline-block;
+
+    overflow: hidden;
+
+    margin-right: 10px;
+    border-radius: 4px;
+
+    line-height: 0;
+
+    > img {
+      width: var(--waline-user-avatar-size, 48px);
+      height: var(--waline-user-avatar-size, 48px);
+    }
+  }
+
+  .wl-user-badge {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+
+    min-width: 0.7em;
+    height: 1.5em;
+    padding: 0 0.4em;
+    border-radius: 4px;
+
+    background: var(--waline-info-bgcolor);
+    color: var(--waline-info-color);
+
+    font-weight: bold;
+    font-size: 10px;
+    line-height: 1.5em;
+    text-align: center;
+  }
+
+  .wl-user-meta {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .wl-badge {
+    display: inline-block;
+    vertical-align: text-top;
+
+    margin-left: 0.5em;
+    padding: 0 0.3em;
+    border: 1px solid var(--waline-badge-color);
+    border-radius: 4px;
+
+    color: var(--waline-badge-color);
+
+    font-size: var(--waline-badge-font-size);
+  }
+}
+
+.wl-user-wall {
+  padding: 0;
+  list-style: none;
+
+  .wl-user-item {
+    position: relative;
+    display: inline-block;
+    transition: transform ease-in-out 0.2s;
+
+    &::before,
+    &::after {
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      z-index: 10;
+
+      opacity: 0;
+      pointer-events: none;
+
+      transition: all 0.18s ease-out 0.18s;
+      transform: translate(-50%, 4px);
+      transform-origin: top;
+    }
+
+    &::before {
+      content: '';
+
+      width: 0;
+      height: 0;
+      border: 5px solid transparent;
+      border-top-color: rgb(16 16 16 / 95%);
+    }
+
+    &::after {
+      content: attr(aria-label);
+
+      margin-bottom: 10px;
+      padding: 0.5em 1em;
+      border-radius: 2px;
+
+      background: rgb(16 16 16 / 95%);
+      color: #fff;
+
+      font-size: 12px;
+      white-space: nowrap;
+    }
+
+    &:hover {
+      transform: scale(1.1);
+
+      &::before,
+      &::after {
+        opacity: 1;
+        pointer-events: none;
+        transform: translate(-50%, 0);
+      }
+    }
+
+    img {
+      width: var(--waline-user-avatar-size, 48px);
+      height: var(--waline-user-avatar-size, 48px);
+    }
+  }
+
+  .wl-user-badge,
+  .wl-user-meta {
+    display: none;
+  }
+}

package/src/typings/base.ts

@@ -1,3 +1,5 @@
+export type WalineCommentSorting = 'latest' | 'oldest' | 'hottest';
+
 export interface WalineEmojiInfo {
   /**
    * 选项卡上的 Emoji 名称
@@ -39,6 +41,8 @@ export interface WalineEmojiInfo {
 
 export type WalineEmojiMaps = Record<string, string>;
 
+export type WalineLoginStatus = 'enable' | 'disable' | 'force';
+
 export interface WalineSearchImageData extends Record<string, unknown> {
   /**
    * 图片链接
@@ -102,7 +106,7 @@ export interface WalineSearchOptions {
    *
    * @default (word) => search(word)
    */
-  more?: (word: string, currectCount: number) => Promise<WalineSearchResult>;
+  more?: (word: string, currentCount: number) => Promise<WalineSearchResult>;
 }
 
 export type WalineMeta = 'nick' | 'mail' | 'link';

package/src/typings/comment.ts

@@ -40,15 +40,11 @@ export interface WalineCommentData {
    */
   at?: string;
 
-  /**
-   * edit comment id
-   */
-  eid?: string;
-
   /**
    * Comment link
    */
   url: string;
+
   /**
    * Recaptcha Token
    */

package/src/typings/waline.ts

@@ -1,7 +1,9 @@
 import type {
+  WalineCommentSorting,
   WalineHighlighter,
   WalineEmojiInfo,
   WalineImageUploader,
+  WalineLoginStatus,
   WalineMeta,
   WalineTexRenderer,
   WalineSearchOptions,
@@ -129,6 +131,15 @@ export interface WalineProps {
    */
   locale?: Partial<WalineLocale>;
 
+  /**
+   * 评论列表排序方式
+   *
+   * Sorting method for comment list
+   *
+   * @default 'latest'
+   */
+  commentSorting?: WalineCommentSorting;
+
   /**
    * 是否启用暗黑模式适配
    *
@@ -194,12 +205,12 @@ export interface WalineProps {
    * Login mode status, optional values:
    *
    * - `'enable'`: enable login (default)
-   * - `'disable'`: Login is disabled, users should fill in infomation to comment
+   * - `'disable'`: Login is disabled, users should fill in information to comment
    * - `'force'`: Forced login, users must login to comment
    *
    * @default 'enable'
    */
-  login?: 'enable' | 'disable' | 'force';
+  login?: WalineLoginStatus;
 
   /**
    * 是否在页脚展示版权信息

package/src/utils/config.ts

@@ -67,6 +67,7 @@ export const getConfig = ({
   search,
   reaction,
   recaptchaV3Key = '',
+  commentSorting = 'latest',
   ...more
 }: WalineProps): WalineConfig => ({
   serverURL: getServerURL(serverURL),
@@ -94,5 +95,6 @@ export const getConfig = ({
     : reaction === true
     ? defaultReaction
     : [],
+  commentSorting,
   ...more,
 });

package/src/utils/date.ts

@@ -30,15 +30,15 @@ export const getTimeAgo = (
       ? new Date(date.indexOf(' ') !== -1 ? date.replace(/-/g, '/') : date)
       : date;
 
-  const timepassed = now.getTime() - time.getTime();
+  const timePassed = now.getTime() - time.getTime();
 
-  const days = Math.floor(timepassed / (24 * 3600 * 1000));
+  const days = Math.floor(timePassed / (24 * 3600 * 1000));
 
   if (days === 0) {
     // 计算相差小时数
 
     // 计算天数后剩余的毫秒数
-    const leave1 = timepassed % (24 * 3600 * 1000);
+    const leave1 = timePassed % (24 * 3600 * 1000);
     const hours = Math.floor(leave1 / (3600 * 1000));
 
     if (hours === 0) {

package/src/utils/emoji.ts

@@ -22,7 +22,7 @@ const fetchEmoji = (link: string): Promise<WalineEmojiInfo> => {
   }
 
   return fetch(`${link}/info.json`)
-    .then((resp) => resp.json() as Promise<Omit<WalineEmojiInfo, 'folder'>>)
+    .then((resp) => <Promise<Omit<WalineEmojiInfo, 'folder'>>>resp.json())
     .then((emojiInfo) => {
       const info = {
         folder: link,

package/src/widgets/recentComments.ts

@@ -1,4 +1,4 @@
-import { fetchRecentComment } from '../api';
+import { getRecentComment } from '../api';
 import { useUserInfo } from '../composables';
 import { getRoot } from '../utils';
 
@@ -62,7 +62,7 @@ export const RecentComments = ({
   const root = getRoot(el);
   const controller = new AbortController();
 
-  return fetchRecentComment({
+  return getRecentComment({
     serverURL,
     count,
     lang,

package/src/widgets/userList.ts

@@ -1,4 +1,4 @@
-import { fetchUserList, WalineUser } from '../api';
+import { getUserList, WalineUser } from '../api';
 import { defaultLang, defaultLocales } from '../config';
 import { WalineLocale } from '../typings';
 import { getRoot } from '../utils';
@@ -80,18 +80,17 @@ export const UserList = ({
   const root = getRoot(el);
   const controller = new AbortController();
 
-  return fetchUserList({
+  return getUserList({
     serverURL,
     pageSize: count,
     lang,
     signal: controller.signal,
   }).then((users) => {
-    if (!root || !users.length) {
+    if (!root || !users.length)
       return {
         users,
         destroy: (): void => controller.abort(),
       };
-    }
 
     locale = {
       ...(defaultLocales[lang] || defaultLocales[defaultLang]),
@@ -101,23 +100,22 @@ export const UserList = ({
     root.innerHTML = `<ul class="wl-user-${mode}">${users
       .map((user, index) =>
         [
-          '<li class="wl-user-item">',
+          `<li class="wl-user-item" aria-label="${user.nick}">`,
           user.link && `<a href="${user.link}" target="_blank">`,
           '<div class="wl-user-avatar">',
           `<img src="${user.avatar}" alt="${user.nick}">`,
-          `<i>${index + 1}</i>`,
+          `<span class="wl-user-badge">${index + 1}</span>`,
           '</div>',
           '<div class="wl-user-meta">',
-          `<div class="wl-user-name"><div>${user.nick}</div>`,
-          '<div class="wl-user-tag wl-card">',
+          '<div class="wl-user-name">',
+          user.nick,
           user.level &&
             `<span class="wl-badge">${
               locale ? locale[`level${user.level}`] : `Level ${user.level}`
             }</span>`,
           user.label && `<span class="wl-badge">${user.label}</span>`,
           '</div>',
-          '</div>',
-          user.link && `<span class="wl-user-meta">${user.link}</span>`,
+          user.link && user.link,
           '</div>',
           user.link && '</a>',
           '</li>',

package/src/styles/userlist.scss

@@ -1,116 +0,0 @@
-:root {
-  --waline-rank-gold-bgcolor: #FA3939;
-  --waline-rank-silver-bgcolor: #FB811C;
-  --waline-rank-copper-bgcolor: #FEB207;
-}
-
-.wl-user-list {
-  list-style: none;
-  padding: 0;
-
-  > li + li {
-    margin-top: 10px;
-  }
-
-  > li, > li > a {
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-  }
-
-  a,
-  a:hover,
-  a:visited {
-    text-decoration: none;
-    color: var(--waline-color);
-  }
-
-  .wl-user-avatar {
-    position: relative;
-    line-height: 0;
-
-    > i {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      min-width: 1.5em;
-      height: 1.5em;
-      line-height: 1.5em;
-      background: var(--waline-info-bgcolor);
-      text-align: center;
-      font-size: 10px;
-      border-radius: 2px;
-      font-style: normal;
-      color: var(--waline-info-color);
-    }
-  }
-
-  img {
-    width: 48px;
-    height: 48px;
-    border-radius: 2px;
-  }
-
-  .wl-user-name {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 10px;
-  }
-  .wl-user-tag {
-    padding-bottom: 0;
-    border-bottom: none;
-    width: auto;
-  }
-
-
-  > li:nth-child(1) i {
-    background: var(--waline-rank-gold-bgcolor);
-    color: var(--waline-white);
-    font-weight: bold;
-  }
-
-  > li:nth-child(2) i {
-    background: var(--waline-rank-silver-bgcolor);
-    color: var(--waline-white);
-    font-weight: bold;
-  }
-
-  > li:nth-child(3) i {
-    background: var(--waline-rank-copper-bgcolor);
-    color: var(--waline-white);
-    font-weight: bold;
-  }
-}
-
-.wl-user-wall {
-  display: flex;
-  flex-direction: row;
-  list-style: none;
-  padding: 0;
-
-  > li {
-    width: 48px;
-    height: 48px;
-    overflow: hidden;
-  }
-
-  > li:hover img {
-    transform: scale(1.25);
-  }
-
-  img {
-    width: 48px;
-    height: 48px;
-    border-radius: 0;
-    transition: transform ease-in-out 400ms;
-  }
-
-  .wl-user-avatar > i,
-  .wl-user-meta {
-    display: none;
-  }
-}
-
-
-