@waline/client 1.5.3 → 2.0.0-alpha.0

package/src/utils/config.ts

@@ -0,0 +1,99 @@
+import {
+  defaultLang,
+  defaultUploadImage,
+  defaultTexRenderer,
+  getMeta,
+  locales,
+} from '../config';
+
+import { decodePath, isLinkHttp, removeEndingSplash } from './path';
+import { getEmojis } from './emoji';
+
+import type {
+  WalineEmojiInfo,
+  WalineEmojiMaps,
+  WalineLocale,
+  WalineProps,
+} from '../typings';
+import hanabi from 'hanabi';
+
+export interface EmojiConfig {
+  tabs: Pick<WalineEmojiInfo, 'name' | 'icon' | 'items'>[];
+  map: WalineEmojiMaps;
+}
+
+export interface Config
+  extends Required<
+      Pick<
+        WalineProps,
+        | 'path'
+        | 'lang'
+        | 'meta'
+        | 'pageSize'
+        | 'requiredMeta'
+        | 'imageUploader'
+        | 'highlighter'
+        | 'texRenderer'
+        | 'copyright'
+        | 'login'
+      >
+    >,
+    Pick<WalineProps, 'dark' | 'serverURL'> {
+  locale: WalineLocale;
+  wordLimit: [number, number] | false;
+  emoji: Promise<EmojiConfig>;
+}
+
+const getServerURL = (serverURL: string): string => {
+  const result = removeEndingSplash(serverURL);
+
+  return isLinkHttp(result) ? result : `https://${result}`;
+};
+
+const fallback = <T = unknown>(
+  value: T | false | undefined,
+  fallback: T
+): T | false =>
+  typeof value === 'function' ? value : value === false ? false : fallback;
+
+export const getConfig = ({
+  serverURL,
+
+  path = location.pathname,
+  lang = defaultLang,
+  locale,
+  emoji = ['https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo'],
+  meta = ['nick', 'mail', 'link'],
+  requiredMeta = [],
+  pageSize = 10,
+  wordLimit,
+  imageUploader,
+  highlighter,
+  texRenderer,
+  copyright = true,
+  login = 'enable',
+  ...more
+}: WalineProps): Config => ({
+  serverURL: getServerURL(serverURL),
+  path: decodePath(path),
+  lang,
+  locale: {
+    ...(locales[lang] || locales[defaultLang]),
+    ...(typeof locale === 'object' ? locale : {}),
+  },
+  emoji: getEmojis(emoji),
+  wordLimit: Array.isArray(wordLimit)
+    ? wordLimit
+    : wordLimit
+    ? [0, wordLimit]
+    : false,
+  meta: getMeta(meta),
+  requiredMeta: getMeta(requiredMeta),
+  pageSize,
+  login,
+  imageUploader: fallback(imageUploader, defaultUploadImage),
+  highlighter: fallback(highlighter, hanabi),
+  texRenderer: fallback(texRenderer, defaultTexRenderer),
+  copyright,
+  ...more,
+});

package/src/utils/darkmode.ts

@@ -0,0 +1,11 @@
+const style = `{--waline-white:#000;--waline-light-grey:#666;--waline-dark-grey:#999;--waline-color:#888;--waline-bgcolor:#1e1e1e;--waline-bgcolor-light:#272727;--waline-bgcolor-hover: #444;--waline-border-color:#333;--waline-disable-bgcolor:#444;--waline-disable-color:#272727;--waline-bq-color:#272727;--waline-info-bgcolor:#272727;--waline-info-color:#666}`;
+
+export const getDarkStyle = (selector?: string | boolean): string => {
+  if (typeof selector === 'string') {
+    return selector === 'auto'
+      ? `@media(prefers-color-scheme:dark){body${style}}`
+      : `${selector}${style}`;
+  }
+
+  return selector === true ? `:root${style}` : '';
+};

package/src/utils/data.ts

@@ -0,0 +1,10 @@
+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/emoji.ts

@@ -0,0 +1,75 @@
+import { Store, useStore } from '../composables/store';
+import { removeEndingSplash } from './path';
+
+import type { EmojiConfig } from './config';
+import type { WalineEmojiInfo } from '../typings';
+
+let store: Store;
+
+const hasVersion = (url: string): boolean =>
+  Boolean(/@[0-9]+\.[0-9]+\.[0-9]+/.test(url));
+
+const fetchEmoji = (link: string): Promise<WalineEmojiInfo> => {
+  if (!store) store = useStore('WALINE_EMOJI');
+
+  const result = hasVersion(link);
+
+  if (result) {
+    const info = store.get<WalineEmojiInfo>(link);
+    if (info) return Promise.resolve(info);
+  }
+
+  return fetch(`${link}/info.json`)
+    .then((resp) => resp.json() as Promise<Omit<WalineEmojiInfo, 'folder'>>)
+    .then((emojiInfo) => {
+      const info = {
+        folder: link,
+        ...emojiInfo,
+      };
+
+      if (result) store.set(link, info);
+
+      return info;
+    });
+};
+
+const getLink = (
+  name: string,
+  folder: string,
+  prefix = '',
+  type = ''
+): string => `${folder}/${prefix}${name}${type ? `.${type}` : ''}`;
+
+export const getEmojis = (
+  emojis: (string | WalineEmojiInfo)[]
+): Promise<EmojiConfig> =>
+  Promise.all(
+    emojis.map((emoji) =>
+      typeof emoji === 'string'
+        ? fetchEmoji(removeEndingSplash(emoji))
+        : Promise.resolve(emoji)
+    )
+  ).then((emojiInfos) => {
+    const emojiConfig: EmojiConfig = {
+      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

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

package/src/utils/fetch.ts

@@ -0,0 +1,177 @@
+import type { WalineComment, WalineCommentData } from '../typings';
+
+export interface FetchErrorData {
+  errno: number;
+  errmsg: string;
+}
+
+const errorCheck = <T = unknown>(data: T | FetchErrorData, name = ''): T => {
+  if (typeof data === 'object' && (data as FetchErrorData).errno)
+    throw new TypeError(
+      `Fetch ${name} failed with ${(data as FetchErrorData).errno}: ${
+        (data as FetchErrorData).errmsg
+      }`
+    );
+
+  return data as T;
+};
+
+export interface FetchCountOptions {
+  serverURL: string;
+  paths: string[];
+  signal: AbortSignal;
+  token?: string;
+}
+
+export const fetchCommentCount = ({
+  serverURL,
+  paths,
+  signal,
+  token,
+}: FetchCountOptions): Promise<number[]> => {
+  const headers: Record<string, string> = {};
+  if (token) headers.Authorization = `Bearer ${token}`;
+
+  return (
+    fetch(
+      `${serverURL}/comment?type=count&url=${encodeURIComponent(
+        paths.join(',')
+      )}`,
+      { signal, headers }
+    )
+      .then((resp) => resp.json() as Promise<number | number[]>)
+      .then((data) => errorCheck(data, 'comment count'))
+      // TODO: Improve this API
+      .then((counts) => (Array.isArray(counts) ? counts : [counts]))
+  );
+};
+export interface FetchRecentOptions {
+  serverURL: string;
+  count: number;
+  signal: AbortSignal;
+  token?: string;
+}
+
+export const fetchRecentComment = ({
+  serverURL,
+  count,
+  signal,
+  token,
+}: FetchRecentOptions): Promise<WalineComment[]> => {
+  const headers: Record<string, string> = {};
+  if (token) headers.Authorization = `Bearer ${token}`;
+
+  return fetch(`${serverURL}/comment?type=recent&count=${count}`, {
+    signal,
+    headers,
+  })
+    .then((resp) => resp.json() as Promise<WalineComment[]>)
+    .then((data) => errorCheck(data, 'recent comment'));
+};
+
+export interface FetchListOptions {
+  serverURL: string;
+  path: string;
+  page: number;
+  pageSize: number;
+  signal: AbortSignal;
+  token?: string;
+}
+
+export interface FetchListResult {
+  count: number;
+  data: WalineComment[];
+  totalPages: number;
+}
+
+export const fetchCommentList = ({
+  serverURL,
+  path,
+  page,
+  pageSize,
+  signal,
+  token,
+}: FetchListOptions): Promise<FetchListResult> => {
+  const headers: Record<string, string> = {};
+  if (token) headers.Authorization = `Bearer ${token}`;
+
+  return fetch(
+    `${serverURL}/comment?path=${encodeURIComponent(
+      path
+    )}&pageSize=${pageSize}&page=${page}`,
+    { signal, headers }
+  )
+    .then((resp) => resp.json() as Promise<FetchListResult>)
+    .then((data) => errorCheck(data, 'comment list'));
+};
+
+export interface PostCommentOptions {
+  serverURL: string;
+  lang: string;
+  token?: string;
+  comment: WalineCommentData;
+}
+
+export interface PostCommentResponse {
+  data?: WalineComment;
+  errmsg?: string;
+}
+
+export const postComment = ({
+  serverURL,
+  lang,
+  token,
+  comment,
+}: PostCommentOptions): Promise<PostCommentResponse> => {
+  const headers: Record<string, string> = {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'Content-Type': 'application/json',
+  };
+
+  if (token) headers.Authorization = `Bearer ${token}`;
+
+  return fetch(`${serverURL}/comment?lang=${lang}`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify(comment),
+  }).then((resp) => resp.json() as Promise<PostCommentResponse>);
+};
+
+export interface FetchPageviewsOptions {
+  serverURL: string;
+  paths: string[];
+  signal: AbortSignal;
+}
+
+export const fetchPageviews = ({
+  serverURL,
+  paths,
+  signal,
+}: FetchPageviewsOptions): Promise<number[]> =>
+  fetch(`${serverURL}/article?path=${encodeURIComponent(paths.join(','))}`, {
+    signal,
+  })
+    .then((resp) => resp.json() as Promise<number[] | number>)
+    .then((data) => errorCheck(data, 'visit count'))
+    // TODO: Improve this API
+    .then((counts) => (Array.isArray(counts) ? counts : [counts]));
+
+export interface UpdatePageviewsOptions {
+  serverURL: string;
+  path: string;
+}
+
+export const updatePageviews = ({
+  serverURL,
+  path,
+}: UpdatePageviewsOptions): Promise<number> =>
+  fetch(`${serverURL}/article`, {
+    method: 'POST',
+    headers: {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ path }),
+  })
+    .then((resp) => resp.json() as Promise<number>)
+    .then((data) => errorCheck(data, 'visit count'));

package/src/utils/getRoot.ts

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

package/src/utils/index.ts

@@ -0,0 +1,13 @@
+export * from './config';
+export * from './darkmode';
+export * from './data';
+export * from './emoji';
+export * from './error';
+export * from './fetch';
+export * from './getRoot';
+export * from './markdown';
+export * from './path';
+export * from './query';
+export * from './timeAgo';
+export * from './userInfo';
+export * from './wordCount';

package/src/utils/markdown.ts

@@ -0,0 +1,41 @@
+import { marked } from 'marked';
+import { markedTexExtensions } from './markedMathExtension';
+
+import type {
+  WalineEmojiMaps,
+  WalineHighlighter,
+  WalineTexRenderer,
+} from '../typings';
+
+export const parseEmoji = (text = '', emojiMap: WalineEmojiMaps = {}): string =>
+  text.replace(/:(.+?):/g, (placeholder, key: string) =>
+    emojiMap[key]
+      ? `<img class="vemoji" 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

@@ -0,0 +1,52 @@
+import type { marked } from 'marked';
+import type { WalineTexRenderer } from '../typings';
+
+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

@@ -0,0 +1,15 @@
+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

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

package/src/utils/timeAgo.ts

@@ -0,0 +1,75 @@
+import type { WalineLocale } from '../typings';
+
+const padWithZeros = (vNumber: number, width: number): string => {
+  let numAsString = vNumber.toString();
+
+  while (numAsString.length < width) {
+    numAsString = '0' + numAsString;
+  }
+
+  return numAsString;
+};
+
+const dateFormat = (date: Date): string => {
+  const vDay = padWithZeros(date.getDate(), 2);
+  const vMonth = padWithZeros(date.getMonth() + 1, 2);
+  const vYear = padWithZeros(date.getFullYear(), 2);
+
+  return `${vYear}-${vMonth}-${vDay}`;
+};
+
+export const timeAgo = (date: Date | string, locale: WalineLocale): string => {
+  if (date)
+    try {
+      if (typeof date === 'string') {
+        // compat with mysql output date
+        date = new Date(
+          date.indexOf(' ') !== -1 ? date.replace(/-/g, '/') : date
+        );
+      }
+      const oldTime = date.getTime();
+      const currTime = new Date().getTime();
+      const diffValue = currTime - oldTime;
+
+      const days = Math.floor(diffValue / (24 * 3600 * 1000));
+
+      // 计算相差小时数
+      if (days === 0) {
+        // 计算天数后剩余的毫秒数
+        const leave1 = diffValue % (24 * 3600 * 1000);
+        const hours = Math.floor(leave1 / (3600 * 1000));
+
+        //计算相差分钟数
+        if (hours === 0) {
+          // 计算小时数后剩余的毫秒数
+          const leave2 = leave1 % (3600 * 1000);
+          const minutes = Math.floor(leave2 / (60 * 1000));
+
+          // 计算相差秒数
+          if (minutes === 0) {
+            // 计算分钟数后剩余的毫秒数
+            const leave3 = leave2 % (60 * 1000);
+            const seconds = Math.round(leave3 / 1000);
+
+            return `${seconds} ${locale.seconds}`;
+          }
+          return `${minutes} ${locale.minutes}`;
+        }
+        return `${hours} ${locale.hours}`;
+      }
+
+      if (days < 0) {
+        return locale.now;
+      }
+
+      if (days < 8) {
+        return `${days} ${locale.days}`;
+      } else {
+        return dateFormat(date);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+
+  return '';
+};

package/src/utils/userInfo.ts

@@ -0,0 +1,26 @@
+export interface UserInfo {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  display_name: string;
+  email: string;
+  url: string;
+  token: string;
+  avatar: string;
+  mailMd5: string;
+}
+
+const USER_KEY = 'WALINE_USER';
+
+export const getUserInfo = (): UserInfo | null => {
+  try {
+    const localStorageData = localStorage.getItem(USER_KEY);
+    const sessionStorageData = sessionStorage.getItem(USER_KEY);
+
+    return localStorageData
+      ? (JSON.parse(localStorageData) as UserInfo)
+      : sessionStorageData
+      ? (JSON.parse(sessionStorageData) as UserInfo)
+      : null;
+  } catch (err) {
+    return null;
+  }
+};

package/src/utils/wordCount.ts

@@ -0,0 +1,20 @@
+/**
+ * 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/reading-time.ts
+ */
+
+export const getWords = (content: string): string[] =>
+  content.match(/[\w\d\s\u00C0-\u024F]+/giu) || [];
+
+export const getChinese = (content: string): string[] =>
+  content.match(/[\u4E00-\u9FA5]/gu) || [];
+
+export const getWordNumber = (content: string): number =>
+  getWords(content).reduce(
+    (accumulator, word) =>
+      accumulator + (word.trim() === '' ? 0 : word.trim().split(/\s+/u).length),
+    0
+  ) + getChinese(content).length;

package/src/version.ts

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

package/src/widgets/index.ts

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