@waline/client 1.6.0 → 2.0.0-alpha.2

package/src/composables/userInfo.ts

@@ -0,0 +1,27 @@
+import { readonly, ref } from 'vue';
+import { getUserInfo } from '../utils';
+
+import type { Ref } from 'vue';
+import type { UserInfo } from '../utils';
+
+export type UserInfoRef = Ref<UserInfo | Record<string, never>>;
+
+const userInfo: UserInfoRef = ref({});
+
+export const useUserInfo = (): {
+  userInfo: UserInfoRef;
+  setUserInfo: (userInfo: UserInfo | Record<string, never>) => void;
+} => {
+  if (!userInfo.value.token) {
+    const info = getUserInfo();
+
+    if (info) userInfo.value = info;
+  }
+
+  return {
+    userInfo: readonly(userInfo),
+    setUserInfo: (info: UserInfo | Record<string, never>): void => {
+      userInfo.value = info;
+    },
+  };
+};

package/src/config/default.ts

@@ -0,0 +1,21 @@
+import type { WalineMeta } from '../typings';
+
+const availableMeta: WalineMeta[] = ['nick', 'mail', 'link'];
+
+export const getMeta = (meta: WalineMeta[]): WalineMeta[] =>
+  meta.filter((item) => availableMeta.includes(item));
+
+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;
+  });
+
+export const defaultTexRenderer = (blockMode: boolean): string =>
+  blockMode === true
+    ? '<p class="vtex">Tex is not available in preview</p>'
+    : '<span class="vtex">Tex is not available in preview</span>';

package/src/config/i18n/en.ts

@@ -0,0 +1,34 @@
+import { generateLocale } from './generate';
+
+export default generateLocale([
+  'NickName',
+  'NickName cannot be less than 3 bytes.',
+  'E-Mail',
+  'Please confirm your email address.',
+  'Website',
+  'Optional',
+  'Comment here...',
+  'No comment yet.',
+  'Submit',
+  'Reply',
+  'Cancel reply',
+  'Comments',
+  'Refresh',
+  'Load More...',
+  'Preview',
+  'Emoji',
+  'Upload Image',
+  'seconds ago',
+  'minutes ago',
+  'hours ago',
+  'days ago',
+  'just now',
+  'Uploading',
+  'Login',
+  'logout',
+  'Admin',
+  'Sticky',
+  'Words',
+  'Please input comments between $0 and $1 words!\n Current word number: $2',
+  'Anonymous',
+]);

package/src/config/i18n/generate.ts

@@ -0,0 +1,39 @@
+import type { WalineLocale } from '../../typings';
+
+const localeKeys = [
+  'nick',
+  'nickError',
+  'mail',
+  'mailError',
+  'link',
+  'optional',
+  'placeholder',
+  'sofa',
+  'submit',
+  'reply',
+  'cancelReply',
+  'comment',
+  'refresh',
+  'more',
+  'preview',
+  'emoji',
+  'uploadImage',
+  'seconds',
+  'minutes',
+  'hours',
+  'days',
+  'now',
+  'uploading',
+  'login',
+  'logout',
+  'admin',
+  'sticky',
+  'word',
+  'wordHint',
+  'anonymous',
+];
+
+export const generateLocale = (locale: string[]): WalineLocale =>
+  Object.fromEntries(
+    locale.map((item, index) => [localeKeys[index], item])
+  ) as unknown as WalineLocale;

package/src/config/i18n/index.ts

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import en from './en';
+import jp from './jp';
+import zhCN from './zh-CN';
+import zhTW from './zh-TW';
+import ptBR from './pt-BR';
+import ru from './ru';
+
+import type { WalineLocale } from '../../typings';
+
+export type Locales = Record<string, WalineLocale>;
+
+export const locales: Locales = {
+  zh: zhCN,
+  'zh-cn': zhCN,
+  'zh-CN': zhCN,
+  'zh-tw': zhTW,
+  'zh-TW': zhTW,
+  en: en,
+  'en-US': en,
+  'en-us': en,
+  jp: jp,
+  'jp-jp': jp,
+  'jp-JP': jp,
+  'pt-br': ptBR,
+  'pt-BR': ptBR,
+  ru: ru,
+  'ru-ru': ru,
+  'ru-RU': ru,
+};

package/src/config/i18n/jp.ts

@@ -0,0 +1,34 @@
+import { generateLocale } from './generate';
+
+export default generateLocale([
+  'ニックネーム',
+  '3バイト以上のニックネームをご入力ください.',
+  'メールアドレス',
+  'メールアドレスをご確認ください.',
+  'サイト',
+  'オプション',
+  'ここにコメント',
+  'コメントしましょう~',
+  '提出する',
+  '返信する',
+  'キャンセル',
+  'コメント',
+  '更新',
+  'さらに読み込む',
+  'プレビュー',
+  '絵文字',
+  '画像をアップロード',
+  '秒前',
+  '分前',
+  '時間前',
+  '日前',
+  'たっだ今',
+  'アップロード',
+  'ログインする',
+  'ログアウト',
+  '管理者',
+  'トップに置く',
+  'ワード',
+  'コメントは $0 から $1 ワードの間でなければなりません!\n 現在の単語番号: $2',
+  '匿名',
+]);

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

@@ -0,0 +1,34 @@
+import { generateLocale } from './generate';
+
+export default generateLocale([
+  'Apelido',
+  'Apelido não pode ser menor que 3 bytes.',
+  'E-Mail',
+  'Por favor, confirme seu endereço de e-mail.',
+  'Website',
+  'Opcional',
+  'Comente aqui...',
+  'Nenhum comentário, ainda.',
+  'Enviar',
+  'Responder',
+  'Cancelar resposta',
+  'Comentários',
+  'Refrescar',
+  'Carregar Mais...',
+  'Visualizar',
+  'Emoji',
+  'Enviar Imagem',
+  'segundos atrás',
+  'minutos atrás',
+  'horas atrás',
+  'dias atrás',
+  'agora mesmo',
+  'Enviando',
+  'Entrar',
+  'Sair',
+  'Admin',
+  'Sticky',
+  'Palavras',
+  'Favor enviar comentário com $0 a $1 palavras!\n Número de palavras atuais: $2',
+  'Anônimo',
+]);

package/src/config/i18n/ru.ts

@@ -0,0 +1,34 @@
+import { generateLocale } from './generate';
+
+export default generateLocale([
+  'Псевдоним',
+  'Никнейм не может быть меньше 3 байт.',
+  'Эл. адрес',
+  'Пожалуйста, подтвердите адрес вашей электронной почты.',
+  'Веб-сайт',
+  'Необязательный',
+  'Комментарий здесь...',
+  'Пока нет комментариев.',
+  'Отправить',
+  'Отвечать',
+  'Отменить ответ',
+  'Комментарии',
+  'Обновить',
+  'Загрузи больше...',
+  'Превью',
+  'эмодзи',
+  'Загрузить изображение',
+  'секунд назад',
+  'несколько минут назад',
+  'несколько часов назад',
+  'дней назад',
+  'прямо сейчас',
+  'Загрузка',
+  'Авторизоваться',
+  'Выход из системы',
+  'Админ',
+  'Липкий',
+  'Слова',
+  'Пожалуйста, введите комментарии от $0 до $1 слов!\nНомер текущего слова: $2',
+  'Анонимный',
+]);

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

@@ -0,0 +1,34 @@
+import { generateLocale } from './generate';
+
+export default generateLocale([
+  'Tên',
+  'Tên không được nhỏ hơn 3 ký tự.',
+  'E-Mail',
+  'Vui lòng xác nhập địa chỉ email của bạn.',
+  'Website',
+  'Tùy chọn',
+  'Hãy bình luận có văn hoá!',
+  'Chưa có bình luận',
+  'Gửi',
+  'Trả lời',
+  'Hủy bỏ',
+  'bình luận',
+  'Làm mới',
+  'Tải thêm...',
+  'Xem trước',
+  'Emoji',
+  'Tải lên hình ảnh',
+  'giây trước',
+  'phút trước',
+  'giờ trước',
+  'ngày trước',
+  'Vừa xong',
+  'Đang tải lên',
+  'Đăng nhập',
+  'đăng xuất',
+  'Admin',
+  'Sticky',
+  'từ',
+  'Please input comments between $0 and $1 words!\n Current word number: $2',
+  'Vô danh',
+]);

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

@@ -0,0 +1,34 @@
+import { generateLocale } from './generate';
+
+export default generateLocale([
+  '昵称',
+  '昵称不能少于3个字符',
+  '邮箱',
+  '请填写正确的邮件地址',
+  '网址',
+  '可选',
+  '欢迎评论',
+  '来发评论吧~',
+  '提交',
+  '回复',
+  '取消回复',
+  '评论',
+  '刷新',
+  '加载更多...',
+  '预览',
+  '表情',
+  '上传图片',
+  '秒前',
+  '分钟前',
+  '小时前',
+  '天前',
+  '刚刚',
+  '正在上传',
+  '登录',
+  '退出',
+  '博主',
+  '置顶',
+  '字',
+  '评论字数应在 $0 到 $1 字之间！\n当前字数：$2',
+  '匿名',
+]);

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

@@ -0,0 +1,34 @@
+import { generateLocale } from './generate';
+
+export default generateLocale([
+  '暱稱',
+  '郵箱',
+  '網址',
+  '可選',
+  '暱稱不能少於3個字元',
+  '請填寫正確的郵件地址',
+  '歡迎評論',
+  '來發評論吧~',
+  '提交',
+  '回覆',
+  '取消回覆',
+  '評論',
+  '刷新',
+  '載入更多...',
+  '預覽',
+  '表情',
+  '上傳圖片',
+  '秒前',
+  '分鐘前',
+  '小時前',
+  '天前',
+  '剛剛',
+  '正在上傳',
+  '登錄',
+  '退出',
+  '博主',
+  '置頂',
+  '字',
+  '評論字數應在 $0 到 $1 字之間！\n當前字數：$2',
+  '匿名',
+]);

package/src/config/index.ts

@@ -0,0 +1,2 @@
+export * from './default';
+export * from './i18n';

package/src/entrys/components.ts

@@ -0,0 +1,2 @@
+export { default as Waline } from '../components/Waline.vue';
+export * from '../version';

package/src/entrys/full.ts

@@ -0,0 +1,7 @@
+export * from '../config';
+export * from '../comment';
+export * from '../init';
+export * from '../pageview';
+export * from '../typings';
+export * from '../version';
+export * from '../widgets';

package/src/entrys/init.ts

@@ -0,0 +1,4 @@
+export * from '../init';
+export * from '../config';
+export * from '../typings';
+export * from '../version';

package/src/entrys/pageview.ts

@@ -0,0 +1,2 @@
+export * from '../version';
+export * from '../pageview';

package/src/init.ts

@@ -0,0 +1,92 @@
+import { createApp, h, reactive, watchEffect } from 'vue';
+
+import Waline from './components/Waline.vue';
+import { commentCount } from './comment';
+import { pageviewCount } from './pageview';
+import { getRoot } from './utils';
+
+import type { WalineInitOptions, WalineProps } from './typings';
+
+export interface WalineInstance {
+  el: HTMLElement | null;
+  update: (newOptions: Partial<WalineProps>) => void;
+  destroy: () => void;
+}
+
+export const init = ({
+  el = '#waline',
+  path = window.location.pathname,
+  comment = false,
+  pageview = false,
+  ...initProps
+}: WalineInitOptions): WalineInstance | null => {
+  // check el element
+  const root = el ? getRoot(el) : null;
+
+  // check root
+  if (el && !root) throw new Error(`Option 'el' do not match any domElement!`);
+
+  // check serverURL
+  if (!initProps.serverURL) throw new Error("Option 'serverURL' is missing!");
+
+  const props = reactive({ ...initProps });
+  const state = reactive({ comment, pageview, path });
+
+  const updateCommentCount = (): void => {
+    if (state.comment)
+      commentCount({
+        serverURL: props.serverURL,
+        path: state.path,
+        selector: typeof state.comment === 'string' ? state.comment : undefined,
+      });
+  };
+
+  const updatePageviewCount = (): void => {
+    if (state.pageview)
+      pageviewCount({
+        serverURL: props.serverURL,
+        path: state.path,
+        selector:
+          typeof state.pageview === 'string' ? state.pageview : undefined,
+      });
+  };
+
+  const app = root
+    ? 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);
+
+  return {
+    el: root,
+    update: ({
+      comment,
+      pageview,
+      path = window.location.pathname,
+      ...newProps
+    }: Partial<Omit<WalineInitOptions, 'el'>>): void => {
+      Object.entries(newProps).map(([key, value]) => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        // eslint-disable-next-line
+        props[key] = value;
+      });
+
+      state.path = path;
+      if (comment !== undefined) state.comment = comment;
+      if (pageview !== undefined) state.pageview = pageview;
+    },
+    destroy: (): void => {
+      app?.unmount();
+      stopComment();
+      stopPageview();
+    },
+  };
+};

package/src/pageview.ts

@@ -0,0 +1,100 @@
+import {
+  errorHandler,
+  fetchPageviews,
+  getQuery,
+  updatePageviews,
+} from './utils';
+
+const renderVisitorCount = (
+  counts: number[],
+  countElements: HTMLElement[]
+): void => {
+  countElements.forEach((element, index) => {
+    element.innerText = counts[index].toString();
+  });
+};
+
+export interface VisitorCountOptions {
+  /**
+   * Waline server url
+   *
+   * Waline 服务端地址
+   */
+  serverURL: string;
+
+  /**
+   * Path to be fetched and updated
+   *
+   * 需要更新和获取的路径
+   *
+   * @default window.location.pathname
+   */
+  path?: string;
+
+  /**
+   * @default '.waline-pageview-count'
+   */
+  selector?: string;
+
+  /**
+   * Whether update pageviews when fetching path result
+   *
+   * 是否在查询时更新 path 的浏览量
+   *
+   * @default true
+   */
+  update?: boolean;
+}
+
+export const pageviewCount = ({
+  serverURL,
+  path = window.location.pathname,
+  selector = '.waline-pageview-count',
+  update = true,
+}: VisitorCountOptions): ((reason?: unknown) => void) => {
+  const controller = new AbortController();
+
+  const elements = Array.from(
+    // visitor selectors
+    document.querySelectorAll<HTMLElement>(selector)
+  );
+
+  const filter = (element: HTMLElement): boolean => {
+    const query = getQuery(element);
+
+    return query !== null && path !== query;
+  };
+
+  const fetch = (elements: HTMLElement[]): Promise<void> =>
+    fetchPageviews({
+      serverURL,
+      paths: elements.map((element) => getQuery(element) || path),
+      signal: controller.signal,
+    })
+      .then((counts) => renderVisitorCount(counts, elements))
+      .catch(errorHandler);
+
+  // we should update pageviews
+  if (update) {
+    const normalElements = elements.filter((element) => !filter(element));
+    const elementsNeedstoBeFetched = elements.filter(filter);
+
+    void updatePageviews({ serverURL, path }).then((count) =>
+      renderVisitorCount(
+        new Array<number>(normalElements.length).fill(count),
+        normalElements
+      )
+    );
+
+    // if we should fetch count of other pages
+    if (elementsNeedstoBeFetched.length) {
+      void fetch(elementsNeedstoBeFetched);
+    }
+  }
+  // we should not update pageviews
+  else {
+    void fetch(elements);
+  }
+
+  return controller.abort.bind(controller);
+};

package/src/shims-hanabi.d.ts

@@ -0,0 +1,9 @@
+declare module 'hanabi' {
+  const hanabi: (
+    code: string,
+    lang: string,
+    callback?: (error: unknown, code?: string | undefined) => void
+  ) => string | void;
+
+  export default hanabi;
+}

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent;
+  export default component;
+}

package/src/styles/base.scss

@@ -0,0 +1,67 @@
+.wl-btn {
+  display: inline-block;
+  vertical-align: middle;
+
+  min-width: 2.5em;
+  margin-bottom: 0;
+  padding: 0.5em 1em;
+  border: 1px solid var(--waline-border-color);
+  border-radius: 0.5em;
+
+  background: transparent;
+  color: var(--waline-color);
+
+  font-weight: 400;
+  font-size: 0.75em;
+  line-height: 1.5;
+  text-align: center;
+  white-space: nowrap;
+
+  cursor: pointer;
+  user-select: none;
+
+  transition-duration: 0.4s;
+
+  touch-action: manipulation;
+
+  &:hover,
+  &:active {
+    border-color: var(--waline-theme-color);
+    color: var(--waline-theme-color);
+  }
+
+  &:disabled {
+    border-color: var(--waline-border-color);
+    background: var(--waline-disable-bgcolor);
+    color: var(--waline-disable-color);
+    cursor: not-allowed;
+  }
+
+  &.primary {
+    border-color: var(--waline-theme-color);
+    background: var(--waline-theme-color);
+    color: var(--waline-white);
+
+    &:hover,
+    &:active {
+      border-color: var(--waline-active-color);
+      background: var(--waline-active-color);
+      color: var(--waline-white);
+    }
+
+    &:disabled {
+      border-color: var(--waline-border-color);
+      background: var(--waline-disable-bgcolor);
+      color: var(--waline-disable-color);
+      cursor: not-allowed;
+    }
+  }
+}
+
+.wl-loading {
+  text-align: center;
+
+  svg {
+    margin: 0 auto;
+  }
+}