@waline/client 2.3.1 → 2.4.1

package/src/composables/userInfo.ts

@@ -10,11 +10,19 @@ export interface UserInfo {
   token: string;
   avatar: string;
   mailMd5: string;
+  objectId: string | number;
+  type: 'administrator' | 'guest';
 }
 
 export const USER_KEY = 'WALINE_USER';
 
 export type UserInfoRef = Ref<UserInfo | Record<string, never>>;
 
+let userInfoStorage: UserInfoRef | null = null;
+
 export const useUserInfo = (): UserInfoRef =>
-  useStorage<UserInfo | Record<string, never>>('USER_KEY', {});
+  userInfoStorage ||
+  (userInfoStorage = useStorage<UserInfo | Record<string, never>>(
+    'USER_KEY',
+    {}
+  ));

package/src/config/i18n/en.ts

@@ -10,6 +10,8 @@ export default generateLocale([
   'Comment here...',
   'No comment yet.',
   'Submit',
+  'Like',
+  'Cancel like',
   'Reply',
   'Cancel reply',
   'Comments',

package/src/config/i18n/generate.ts

@@ -10,6 +10,8 @@ const localeKeys = [
   'placeholder',
   'sofa',
   'submit',
+  'like',
+  'cancelLike',
   'reply',
   'cancelReply',
   'comment',

package/src/config/i18n/jp.ts

@@ -10,6 +10,8 @@ export default generateLocale([
   'ここにコメント',
   'コメントしましょう~',
   '提出する',
+  'Like',
+  'Cancel like',
   '返信する',
   'キャンセル',
   'コメント',

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

@@ -10,6 +10,8 @@ export default generateLocale([
   'Comente aqui...',
   'Nenhum comentário, ainda.',
   'Enviar',
+  'Like',
+  'Cancel like',
   'Responder',
   'Cancelar resposta',
   'Comentários',

package/src/config/i18n/ru.ts

@@ -10,6 +10,8 @@ export default generateLocale([
   'Комментарий здесь...',
   'Пока нет комментариев.',
   'Отправить',
+  'Like',
+  'Cancel like',
   'Отвечать',
   'Отменить ответ',
   'Комментарии',

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

@@ -10,6 +10,8 @@ export default generateLocale([
   'Hãy bình luận có văn hoá!',
   'Chưa có bình luận',
   'Gửi',
+  'Like',
+  'Cancel like',
   'Trả lời',
   'Hủy bỏ',
   'bình luận',

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

@@ -10,6 +10,8 @@ export default generateLocale([
   '欢迎评论',
   '来发评论吧~',
   '提交',
+  '喜欢',
+  '取消喜欢',
   '回复',
   '取消回复',
   '评论',

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

@@ -10,6 +10,8 @@ export default generateLocale([
   '歡迎評論',
   '來發評論吧~',
   '提交',
+  '喜歡',
+  '取消喜歡',
   '回覆',
   '取消回覆',
   '評論',

package/src/styles/card.scss

@@ -18,13 +18,13 @@
   .wl-user {
     --avatar-size: var(--waline-avatar-size);
 
+    position: relative;
+    margin-right: 0.75em;
+
     @media (max-width: 720px) {
       --avatar-size: var(--waline-m-avatar-size);
     }
 
-    position: relative;
-    margin-right: 0.75em;
-
     img {
       width: var(--avatar-size);
       height: var(--avatar-size);
@@ -101,30 +101,6 @@
     font-size: 0.75em;
   }
 
-  .wl-reply {
-    float: right;
-
-    padding: 4px;
-    border: none;
-
-    background: transparent;
-    color: var(--waline-color);
-
-    line-height: 1;
-
-    cursor: pointer;
-
-    transition: color 0.2s ease;
-
-    &:hover {
-      color: var(--waline-theme-color);
-    }
-
-    &.active {
-      color: var(--waline-active-color);
-    }
-  }
-
   .wl-meta {
     position: relative;
     line-height: 1;
@@ -152,6 +128,36 @@
     }
   }
 
+  .wl-comment-actions {
+    float: right;
+  }
+
+  .wl-delete,
+  .wl-like,
+  .wl-reply {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px;
+    border: none;
+
+    background: transparent;
+    color: var(--waline-color);
+
+    line-height: 1;
+
+    cursor: pointer;
+
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--waline-theme-color);
+    }
+
+    &.active {
+      color: var(--waline-active-color);
+    }
+  }
+
   .wl-content {
     position: relative;
 
@@ -213,6 +219,28 @@
     }
   }
 
+  .wl-admin-actions {
+    margin: 8px 0;
+    font-size: 12px;
+    text-align: right;
+  }
+
+  .wl-comment-status {
+    margin: 0 8px;
+
+    .wl-btn {
+      border-radius: 0;
+
+      &:first-child {
+        border-radius: 0.5em 0 0 0.5em;
+      }
+
+      &:last-child {
+        border-radius: 0 0.5em 0.5em 0;
+      }
+    }
+  }
+
   .wl-quote {
     border-left: 1px dashed rgb(237 237 237 / 50%);
 

package/src/styles/nomalize.scss

@@ -19,7 +19,6 @@
     color: var(--waline-theme-color);
 
     text-decoration: none;
-
     word-break: break-word;
 
     cursor: pointer;

package/src/styles/panel.scss

@@ -196,7 +196,6 @@
   .wl-content {
     min-height: 1.25em;
     padding: 0.25em;
-
     word-break: break-word;
     hyphens: auto;
 

package/src/typings/comment.ts

@@ -1,21 +1,71 @@
 export interface WalineCommentData {
+  /**
+   * User Nickname
+   */
   nick: string;
+
+  /**
+   * User email
+   */
   mail: string;
+
+  /**
+   * User link
+   */
   link?: string;
+
+  /**
+   * Content of comment
+   */
   comment: string;
+
+  /**
+   * User Agent
+   */
   ua: string;
 
+  /**
+   * Parent comment id
+   */
+
   pid?: string;
+
+  /**
+   * Root comment id
+   */
   rid?: string;
+
+  /**
+   * User id being at
+   */
   at?: string;
+
+  /**
+   * Comment link
+   */
   url: string;
 }
 
+export type WalineCommentStatus = 'approved' | 'waiting' | 'spam';
+
 export interface WalineComment extends Exclude<WalineCommentData, 'ua'> {
+  /**
+   * User avatar
+   */
   avatar: string;
-  type?: string;
+
+  /**
+   * User type
+   */
+  type?: 'administrator' | 'guest' | `verify:${string}`;
+
   objectId: string;
+
+  /**
+   * Time ISOString when the comment is created
+   */
   createdAt: string;
+
   insertedAt: string;
   updatedAt: string;
   children: WalineComment[];
@@ -25,4 +75,9 @@ export interface WalineComment extends Exclude<WalineCommentData, 'ua'> {
   level?: number;
   addr?: string;
   label?: string;
+  // TODO: Rename it to `userId` in next major version
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  user_id?: string | number;
+  status?: WalineCommentStatus;
+  like?: number;
 }

package/src/typings/locale.ts

@@ -6,14 +6,7 @@ export interface WalineDateLocale {
   now: string;
 }
 
-export interface WalineLevelLocale {
-  level0: string;
-  level1: string;
-  level2: string;
-  level3: string;
-  level4: string;
-  level5: string;
-}
+export type WalineLevelLocale = Record<`level${number}`, string>;
 
 export interface WalineLocale extends WalineDateLocale, WalineLevelLocale {
   nick: string;
@@ -25,6 +18,8 @@ export interface WalineLocale extends WalineDateLocale, WalineLevelLocale {
   placeholder: string;
   sofa: string;
   submit: string;
+  like: string;
+  cancelLike: string;
   reply: string;
   cancelReply: string;
   comment: string;

package/src/utils/config.ts

@@ -68,7 +68,7 @@ export const getConfig = ({
   locale: {
     ...(defaultLocales[lang] || defaultLocales[defaultLang]),
     ...(typeof locale === 'object' ? locale : {}),
-  },
+  } as WalineLocale,
   wordLimit: getWordLimit(wordLimit),
   meta: getMeta(meta),
   requiredMeta: getMeta(requiredMeta),

package/src/utils/fetch.ts

@@ -5,6 +5,11 @@ export interface FetchErrorData {
   errmsg: string;
 }
 
+const JSON_HEADERS: Record<string, string> = {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  'Content-Type': 'application/json',
+};
+
 const errorCheck = <T = unknown>(data: T | FetchErrorData, name = ''): T => {
   if (typeof data === 'object' && (data as FetchErrorData).errno)
     throw new TypeError(
@@ -143,6 +148,77 @@ export const postComment = ({
   }).then((resp) => resp.json() as Promise<PostCommentResponse>);
 };
 
+export interface DeleteCommentOptions {
+  serverURL: string;
+  lang: string;
+  token: string;
+  objectId: string | number;
+}
+
+export const deleteComment = ({
+  serverURL,
+  lang,
+  token,
+  objectId,
+}: DeleteCommentOptions): Promise<void> => {
+  const headers: Record<string, string> = {
+    Authorization: `Bearer ${token}`,
+  };
+
+  return fetch(`${serverURL}/comment/${objectId}?lang=${lang}`, {
+    method: 'DELETE',
+    headers,
+  }).then((resp) => resp.json() as Promise<void>);
+};
+
+export interface LikeCommentOptions {
+  serverURL: string;
+  lang: string;
+  objectId: number | string;
+  like: boolean;
+}
+
+export const likeComment = ({
+  serverURL,
+  lang,
+  objectId,
+  like,
+}: LikeCommentOptions): Promise<void> =>
+  fetch(`${serverURL}/comment/${objectId}?lang=${lang}`, {
+    method: 'PUT',
+    headers: JSON_HEADERS,
+    body: JSON.stringify({ like }),
+  }).then((resp) => resp.json() as Promise<void>);
+
+export interface UpdateCommentOptions {
+  serverURL: string;
+  lang: string;
+  token: string;
+  objectId: number | string;
+  status?: 'approved' | 'waiting' | 'spam';
+  sticky?: number;
+}
+
+export const updateComment = ({
+  serverURL,
+  lang,
+  token,
+  objectId,
+  ...data
+}: UpdateCommentOptions): Promise<void> => {
+  const headers: Record<string, string> = {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'Content-Type': 'application/json',
+    Authorization: `Bearer ${token}`,
+  };
+
+  return fetch(`${serverURL}/comment/${objectId}?lang=${lang}`, {
+    method: 'PUT',
+    headers,
+    body: JSON.stringify(data),
+  }).then((resp) => resp.json() as Promise<void>);
+};
+
 export interface FetchPageviewsOptions {
   serverURL: string;
   lang: string;
@@ -180,10 +256,7 @@ export const updatePageviews = ({
 }: UpdatePageviewsOptions): Promise<number> =>
   fetch(`${serverURL}/article?lang=${lang}`, {
     method: 'POST',
-    headers: {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      'Content-Type': 'application/json',
-    },
+    headers: JSON_HEADERS,
     body: JSON.stringify({ path }),
   })
     .then((resp) => resp.json() as Promise<number>)