@waline/client 2.15.8 → 3.0.0-alpha.2

package/src/utils/emoji.ts

@@ -1,73 +0,0 @@
-import { useStorage } from '@vueuse/core';
-
-import { type WalineEmojiConfig } from './config.js';
-import { removeEndingSplash } from './path.js';
-import { type WalineEmojiInfo } from '../typings/index.js';
-
-const hasVersion = (url: string): boolean =>
-  Boolean(/@[0-9]+\.[0-9]+\.[0-9]+/.test(url));
-
-const fetchEmoji = (link: string): Promise<WalineEmojiInfo> => {
-  const emojiStore = useStorage<Record<string, WalineEmojiInfo>>(
-    'WALINE_EMOJI',
-    {},
-  );
-
-  const result = hasVersion(link);
-
-  if (result) {
-    const info = emojiStore.value[link];
-
-    if (info) return Promise.resolve(info);
-  }
-
-  return fetch(`${link}/info.json`)
-    .then((resp) => <Promise<Omit<WalineEmojiInfo, 'folder'>>>resp.json())
-    .then((emojiInfo) => {
-      const info = {
-        folder: link,
-        ...emojiInfo,
-      };
-
-      if (result) emojiStore.value[link] = info;
-
-      return info;
-    });
-};
-
-const getLink = (name: string, folder = '', prefix = '', type = ''): string =>
-  `${folder ? `${folder}/` : ''}${prefix}${name}${type ? `.${type}` : ''}`;
-
-export const getEmojis = (
-  emojis: (string | WalineEmojiInfo)[],
-): Promise<WalineEmojiConfig> =>
-  Promise.all(
-    emojis.map((emoji) =>
-      typeof emoji === 'string'
-        ? fetchEmoji(removeEndingSplash(emoji))
-        : Promise.resolve(emoji),
-    ),
-  ).then((emojiInfos) => {
-    const emojiConfig: WalineEmojiConfig = {
-      tabs: [],
-      map: {},
-    };
-
-    emojiInfos.forEach((emojiInfo) => {
-      const { name, folder, icon, prefix, type, items } = emojiInfo;
-
-      emojiConfig.tabs.push({
-        name,
-        icon: getLink(icon, folder, prefix, type),
-        items: items.map((item) => {
-          const key = `${prefix || ''}${item}`;
-
-          emojiConfig.map[key] = getLink(item, folder, prefix, type);
-
-          return key;
-        }),
-      });
-    });
-
-    return emojiConfig;
-  });

package/src/utils/error.ts

@@ -1,3 +0,0 @@
-export const errorHandler = (err: Error): void => {
-  if (err.name !== 'AbortError') console.error(err.message);
-};

package/src/utils/getRoot.ts

@@ -1,8 +0,0 @@
-export const getRoot = (
-  el: string | HTMLElement | undefined,
-): HTMLElement | null =>
-  el instanceof HTMLElement
-    ? el
-    : typeof el === 'string'
-    ? document.querySelector(el)
-    : null;

package/src/utils/image.ts

@@ -1,10 +0,0 @@
-const isImage = (item: DataTransferItem): boolean =>
-  item.type.includes('image');
-
-export const getImageFromDataTransfer = (
-  items: DataTransferItemList,
-): File | null => {
-  const image = Array.from(items).find(isImage);
-
-  return image ? (image.getAsFile() as File) : null;
-};

package/src/utils/index.ts

@@ -1,13 +0,0 @@
-export * from './config.js';
-export * from './darkmode.js';
-export * from './date.js';
-export * from './email.js';
-export * from './emoji.js';
-export * from './error.js';
-export * from './getRoot.js';
-export * from './image.js';
-export * from './markdown.js';
-export * from './path.js';
-export * from './query.js';
-export * from './wordCount.js';
-export * from './userAgent.js';

package/src/utils/markdown.ts

@@ -1,41 +0,0 @@
-import { marked } from 'marked';
-
-import { markedTeXExtensions } from './markedMathExtension.js';
-import {
-  type WalineEmojiMaps,
-  type WalineHighlighter,
-  type WalineTeXRenderer,
-} from '../typings/index.js';
-
-export const parseEmoji = (text = '', emojiMap: WalineEmojiMaps = {}): string =>
-  text.replace(/:(.+?):/g, (placeholder, key: string) =>
-    emojiMap[key]
-      ? `<img class="wl-emoji" src="${emojiMap[key]}" alt="${key}">`
-      : placeholder,
-  );
-
-export interface ParseMarkdownOptions {
-  emojiMap: WalineEmojiMaps;
-  highlighter: WalineHighlighter | false;
-  texRenderer: WalineTeXRenderer | false;
-}
-
-export const parseMarkdown = (
-  content: string,
-  { emojiMap, highlighter, texRenderer }: ParseMarkdownOptions,
-): string => {
-  marked.setOptions({
-    highlight: highlighter || undefined,
-    breaks: true,
-    smartLists: true,
-    smartypants: true,
-  });
-
-  if (texRenderer) {
-    const extensions = markedTeXExtensions(texRenderer);
-
-    marked.use({ extensions });
-  }
-
-  return marked.parse(parseEmoji(content, emojiMap));
-};

package/src/utils/markedMathExtension.ts

@@ -1,54 +0,0 @@
-import { type marked } from 'marked';
-
-import { type WalineTeXRenderer } from '../typings/index.js';
-
-const inlineMathStart = /\$.*?\$/;
-const inlineMathReg = /^\$(.*?)\$/;
-const blockMathReg = /^(?:\s{0,3})\$\$((?:[^\n]|\n[^\n])+?)\n{0,1}\$\$/;
-
-export const markedTeXExtensions = (
-  texRenderer: WalineTeXRenderer,
-): marked.TokenizerExtension[] => {
-  const blockMathExtension: marked.TokenizerExtension = {
-    name: 'blockMath',
-    level: 'block',
-    tokenizer(src: string) {
-      const cap = blockMathReg.exec(src);
-
-      if (cap !== null) {
-        return {
-          type: 'html',
-          raw: cap[0],
-          text: texRenderer(true, cap[1]),
-        };
-      }
-
-      return undefined;
-    },
-  };
-
-  const inlineMathExtension: marked.TokenizerExtension = {
-    name: 'inlineMath',
-    level: 'inline',
-    start(src: string) {
-      const idx = src.search(inlineMathStart);
-
-      return idx !== -1 ? idx : src.length;
-    },
-    tokenizer(src: string) {
-      const cap = inlineMathReg.exec(src);
-
-      if (cap !== null) {
-        return {
-          type: 'html',
-          raw: cap[0],
-          text: texRenderer(false, cap[1]),
-        };
-      }
-
-      return undefined;
-    },
-  };
-
-  return [blockMathExtension, inlineMathExtension];
-};

package/src/utils/path.ts

@@ -1,15 +0,0 @@
-export const decodePath = (path: string): string => {
-  try {
-    path = decodeURI(path);
-  } catch (err) {
-    // ignore error
-  }
-
-  return path;
-};
-
-export const removeEndingSplash = (content = ''): string =>
-  content.replace(/\/$/u, '');
-
-export const isLinkHttp = (link: string): boolean =>
-  /^(https?:)?\/\//.test(link);

package/src/utils/query.ts

@@ -1,2 +0,0 @@
-export const getQuery = (element: HTMLElement): string | null =>
-  element.dataset.path || element.getAttribute('id');

package/src/utils/userAgent.ts

@@ -1,31 +0,0 @@
-/// <reference types="user-agent-data-types" />
-
-export const userAgent = async (): Promise<string> => {
-  if (!navigator) {
-    return '';
-  }
-
-  const { userAgentData } = navigator;
-  let ua = navigator.userAgent;
-
-  // https://learn.microsoft.com/en-us/microsoft-edge/web-platform/how-to-detect-win11
-  if (!userAgentData || userAgentData.platform !== 'Windows') {
-    return ua;
-  }
-
-  const { platformVersion } = await userAgentData.getHighEntropyValues([
-    'platformVersion',
-  ]);
-
-  if (!platformVersion) {
-    return ua;
-  }
-
-  const isWindows11Later = parseInt(platformVersion.split('.')[0]) >= 13;
-
-  if (isWindows11Later) {
-    ua = ua.replace('Windows NT 10.0', 'Windows NT 11.0');
-  }
-
-  return ua;
-};

package/src/utils/wordCount.ts

@@ -1,31 +0,0 @@
-/**
- * The wordCount module should be lightweight as it's packed into client.
- *
- * So We just make a simple implement here
- *
- * Forked from https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/packages/reading-time2/src/node/readingTime.ts
- */
-
-/**
- * Extract Latin words from content
- */
-export const getWords = (content: string): RegExpMatchArray | null =>
-  // \u00C0-\u024F are Latin Supplement letters, maybe used in language like french
-  // \u0400-\u04FF are Cyrillic letters, used in russian
-  content.match(/[\w\d\s,.\u00C0-\u024F\u0400-\u04FF]+/giu);
-
-/**
- * Extract Chinese Characters from content
- */
-export const getChinese = (content: string): RegExpMatchArray | null =>
-  content.match(/[\u4E00-\u9FD5]/gu);
-
-/**
- * Get word number of given string
- */
-export const getWordNumber = (content: string): number =>
-  (getWords(content)?.reduce<number>(
-    (accumulator, word) =>
-      accumulator + (word.trim() === '' ? 0 : word.trim().split(/\s+/u).length),
-    0,
-  ) || 0) + (getChinese(content)?.length || 0);

package/src/version.ts

@@ -1,3 +0,0 @@
-declare const VERSION: string;
-
-export const version = VERSION;

package/src/widgets/index.ts

@@ -1,2 +0,0 @@
-export * from './recentComments';
-export * from './userList';

package/src/widgets/recentComments.ts

@@ -1,93 +0,0 @@
-import { getRecentComment } from '../api/index.js';
-import { useUserInfo } from '../composables/index.js';
-import { type WalineComment } from '../typings/index.js';
-import { getRoot } from '../utils/index.js';
-
-export interface WalineRecentCommentsOptions {
-  /**
-   * Waline 服务端地址
-   *
-   * Waline serverURL
-   */
-  serverURL: string;
-
-  /**
-   * 获取最新评论的数量
-   *
-   * fetch number of latest comments
-   */
-  count: number;
-
-  /**
-   * 需要挂载的元素
-   *
-   * Element to be mounted
-   */
-  el?: string | HTMLElement;
-
-  /**
-   * 错误提示消息所使用的语言
-   *
-   * Language of error message
-   *
-   * @default navigator.language
-   */
-  lang?: string;
-}
-
-export interface WalineRecentCommentsResult {
-  /**
-   * 评论数据
-   *
-   * Comment Data
-   */
-  comments: WalineComment[];
-
-  /**
-   * 取消挂载挂件
-   *
-   * Umount widget
-   */
-  destroy: () => void;
-}
-
-export const RecentComments = ({
-  el,
-  serverURL,
-  count,
-  lang = navigator.language,
-}: WalineRecentCommentsOptions): Promise<WalineRecentCommentsResult> => {
-  const userInfo = useUserInfo();
-  const root = getRoot(el);
-  const controller = new AbortController();
-
-  return getRecentComment({
-    serverURL,
-    count,
-    lang,
-    signal: controller.signal,
-    token: userInfo.value?.token,
-  }).then((comments) => {
-    if (root && comments.length) {
-      root.innerHTML = `<ul class="wl-recent-list">${comments
-        .map(
-          (comment) =>
-            `<li class="wl-recent-item"><a href="${comment.url}">${comment.nick}</a>：${comment.comment}</li>`,
-        )
-        .join('')}</ul>`;
-
-      return {
-        comments,
-        destroy: (): void => {
-          controller.abort();
-          root.innerHTML = '';
-        },
-      };
-    }
-
-    return {
-      comments,
-      destroy: (): void => controller.abort(),
-    };
-  });
-};

package/src/widgets/userList.ts

@@ -1,136 +0,0 @@
-import { getUserList, WalineUser } from '../api';
-import { DEFAULT_LANG, DEFAULT_LOCALES } from '../config';
-import { WalineLocale } from '../typings';
-import { getRoot } from '../utils';
-
-export interface WalineUserListOptions {
-  /**
-   * Waline 服务端地址
-   *
-   * Waline serverURL
-   */
-  serverURL: string;
-
-  /**
-   * 获取用户列表的数量
-   *
-   * fetch number of user list
-   */
-  count: number;
-
-  /**
-   * 需要挂载的元素
-   *
-   * Element to be mounted
-   */
-  el?: string | HTMLElement;
-
-  /**
-   * 错误提示消息所使用的语言
-   *
-   * Language of error message
-   *
-   * @default navigator.language
-   */
-  lang?: string;
-
-  /**
-   * 自定义 waline 语言显示
-   *
-   * @see [自定义语言](https://waline.js.org/client/i18n.html)
-   *
-   * Custom display language in waline
-   *
-   * @see [I18n](https://waline.js.org/en/client/i18n.html)
-   */
-  locale?: WalineLocale;
-
-  /**
-   * 列表模式还是头像墙模式
-   *
-   * list mode or avatar wall mode
-   */
-  mode: 'list' | 'wall';
-}
-
-export interface WalineUserListResult {
-  /**
-   * 用户数据
-   *
-   * User Data
-   */
-  users: WalineUser[];
-
-  /**
-   * 取消挂载挂件
-   *
-   * Umount widget
-   */
-  destroy: () => void;
-}
-
-export const UserList = ({
-  el,
-  serverURL,
-  count,
-  locale,
-  lang = navigator.language,
-  mode = 'list',
-}: WalineUserListOptions): Promise<WalineUserListResult> => {
-  const root = getRoot(el);
-  const controller = new AbortController();
-
-  return getUserList({
-    serverURL,
-    pageSize: count,
-    lang,
-    signal: controller.signal,
-  }).then((users) => {
-    if (!root || !users.length)
-      return {
-        users,
-        destroy: (): void => controller.abort(),
-      };
-
-    locale = {
-      ...(DEFAULT_LOCALES[lang] || DEFAULT_LOCALES[DEFAULT_LANG]),
-      ...(typeof locale === 'object' ? locale : {}),
-    } as WalineLocale;
-
-    root.innerHTML = `<ul class="wl-user-${mode}">${users
-      .map((user, index) =>
-        [
-          `<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}">`,
-          `<span class="wl-user-badge">${index + 1}</span>`,
-          '</div>',
-          '<div class="wl-user-meta">',
-          '<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>',
-          user.link && user.link,
-          '</div>',
-          user.link && '</a>',
-          '</li>',
-        ]
-          .filter((v) => v)
-          .join(''),
-      )
-      .join('')}</ul>`;
-
-    return {
-      users,
-      destroy: (): void => {
-        controller.abort();
-        root.innerHTML = '';
-      },
-    };
-  });
-};