@waline/client 1.6.0 → 2.0.0-alpha.2

package/src/styles/panel.scss

@@ -0,0 +1,293 @@
+@use 'emoji';
+
+.wl-comment {
+  position: relative;
+  display: flex;
+  margin-bottom: 0.75em;
+}
+
+.wl-close {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+
+  padding: 0;
+  border: none;
+
+  background: transparent;
+
+  line-height: 1;
+
+  cursor: pointer;
+}
+
+.wl-login-info {
+  max-width: 80px;
+  margin-top: 0.75em;
+  text-align: center;
+}
+
+.wl-logout-btn {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+
+  padding: 3px;
+  border: none;
+
+  background: transparent;
+
+  line-height: 0;
+
+  cursor: pointer;
+}
+
+.wl-avatar {
+  position: relative;
+
+  width: var(--waline-avatar-size);
+  height: var(--waline-avatar-size);
+  margin: 0 auto;
+  border: var(--waline-border);
+  border-radius: var(--waline-avatar-radius);
+
+  @media (max-width: 720px) {
+    width: var(--waline-m-avatar-size);
+    height: var(--waline-m-avatar-size);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--waline-avatar-radius);
+  }
+}
+
+.wl-login-nick {
+  display: block;
+  color: var(--waline-theme-color);
+  font-size: 0.75em;
+  word-break: break-all;
+}
+
+.wl-panel {
+  position: relative;
+
+  flex-shrink: 1;
+
+  width: 100%;
+  margin: 0.5em;
+  border: var(--waline-border);
+  border-radius: 0.75em;
+
+  background: var(--waline-bgcolor);
+  box-shadow: var(--waline-box-shadow);
+}
+
+.wl-header {
+  display: flex;
+
+  overflow: hidden;
+
+  padding: 0 4px;
+  border-bottom: 2px dashed var(--waline-border-color);
+  border-top-left-radius: 0.75em;
+  border-top-right-radius: 0.75em;
+
+  @media (max-width: 580px) {
+    display: block;
+  }
+
+  label {
+    min-width: 40px;
+    padding: 0.75em 0.5em;
+
+    color: var(--waline-color);
+
+    font-size: 0.75em;
+    text-align: center;
+  }
+
+  input {
+    flex: 1;
+
+    width: 0;
+    padding: 0.5em;
+
+    background: transparent;
+
+    font-size: 0.625em;
+
+    resize: none;
+  }
+}
+
+.wl-header-item {
+  display: flex;
+  flex: 1;
+
+  &:not(:last-child) {
+    @media (max-width: 580px) {
+      border-bottom: 2px dashed var(--waline-border-color);
+    }
+  }
+
+  .wl-header-1 & {
+    width: 100%;
+  }
+
+  .wl-header-2 & {
+    width: 50%;
+
+    @media (max-width: 580px) {
+      flex: 0;
+      width: 100%;
+    }
+  }
+
+  .wl-header-3 & {
+    width: 33.33%;
+
+    @media (max-width: 580px) {
+      width: 100%;
+    }
+  }
+}
+
+.wl-editor,
+.wl-input {
+  max-width: 100%;
+  border: none;
+
+  color: var(--waline-color);
+  outline: none;
+
+  transition: all 0.25s ease;
+
+  &:focus {
+    background: var(--waline-bgcolor-light);
+  }
+}
+
+.wl-editor {
+  position: relative;
+
+  width: calc(100% - 1em);
+  min-height: 8.75em;
+  margin: 0.75em 0.5em;
+  border-radius: 0.5em;
+
+  background: transparent;
+
+  font-size: 0.875em;
+
+  resize: vertical;
+}
+
+.wl-preview {
+  padding: 0 0.5em 0.5em;
+
+  h4 {
+    margin: 0.25em;
+    font-weight: bold;
+    font-size: 0.9375em;
+  }
+
+  .wl-content {
+    min-height: 1.25em;
+    padding: 0.25em;
+    border: var(--waline-border);
+    border-radius: 0.25em;
+
+    word-break: break-word;
+    hyphens: auto;
+
+    > *:first-child {
+      margin-top: 0;
+    }
+
+    > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.wl-footer {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0.5em 0.75em;
+}
+
+.wl-actions {
+  display: flex;
+  flex: 2;
+  align-items: center;
+}
+
+.wl-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 1.5em;
+  height: 1.5em;
+  margin: 2px;
+  padding: 0;
+  border: none;
+
+  background: transparent;
+  color: var(--waline-color);
+
+  font-size: 16px;
+
+  cursor: pointer;
+
+  &:hover {
+    color: var(--waline-theme-color);
+  }
+
+  &.actived {
+    color: var(--waline-active-color);
+  }
+}
+
+#wl-image-upload {
+  display: none;
+
+  &:focus + label {
+    color: var(--waline-color);
+  }
+
+  &:focus-visible + label {
+    outline: -webkit-focus-ring-color auto 1px;
+  }
+}
+
+.wl-info {
+  display: flex;
+  flex: 3;
+  align-items: center;
+  justify-content: flex-end;
+
+  .wl-text-number {
+    color: var(--waline-info-color);
+    font-size: 0.75em;
+
+    .illegal {
+      color: #f00;
+    }
+  }
+
+  button {
+    margin-left: 0.75em;
+
+    svg {
+      display: block;
+      margin: 0 auto;
+      line-height: 18px;
+    }
+  }
+}
+
+@include emoji.emoji;

package/src/styles/recent.scss

@@ -0,0 +1,3 @@
+.wl-recent-item p {
+  display: inline;
+}

package/src/typings/base.ts

@@ -0,0 +1,54 @@
+export interface WalineEmojiInfo {
+  /**
+   * 选项卡上的 Emoji 名称
+   *
+   * Emoji name show on tab
+   */
+  name: string;
+  /**
+   * 所在文件夹链接
+   *
+   * Current folder link
+   */
+  folder: string;
+  /**
+   * Emoji 通用路径前缀
+   *
+   * Common prefix of Emoji icons
+   */
+  prefix?: string;
+  /**
+   * Emoji 图片的类型，会作为文件扩展名使用
+   *
+   * Type of Emoji icons, will be regarded as file extension
+   */
+  type?: string;
+  /**
+   * 选项卡显示的 Emoji 图标
+   *
+   * Emoji icon show on tab
+   */
+  icon: string;
+  /**
+   * Emoji 图片列表
+   *
+   * Emoji image list
+   */
+  items: string[];
+}
+
+export type WalineEmojiMaps = Record<string, string>;
+
+export type WalineMeta = 'nick' | 'mail' | 'link';
+
+export type WalineImageUploader = (image: File) => Promise<string>;
+
+export type WalineHighlighter =
+  | ((code: string, lang: string) => string)
+  | ((
+      code: string,
+      lang: string,
+      callback?: (error: unknown | undefined, code?: string) => void
+    ) => void);
+
+export type WalineTexRenderer = (blockMode: boolean, tex: string) => string;

package/src/typings/comment.ts

@@ -0,0 +1,25 @@
+export interface WalineCommentData {
+  nick: string;
+  mail: string;
+  link?: string;
+  comment: string;
+  ua: string;
+
+  pid?: string;
+  rid?: string;
+  at?: string;
+  url: string;
+}
+
+export interface WalineComment extends Exclude<WalineCommentData, 'ua'> {
+  avatar: string;
+  type?: string;
+  objectId: string;
+  createdAt: string;
+  insertedAt: string;
+  updatedAt: string;
+  children: WalineComment[];
+  sticky?: boolean;
+  browser?: string;
+  os?: string;
+}

package/src/typings/index.ts

@@ -0,0 +1,5 @@
+export * from './base';
+export * from './comment';
+export * from './locale';
+export * from './waline';
+export * from './options';

package/src/typings/locale.ts

@@ -0,0 +1,32 @@
+export interface WalineLocale {
+  nick: string;
+  nickError: string;
+  mail: string;
+  mailError: string;
+  link: string;
+  optional: string;
+  placeholder: string;
+  sofa: string;
+  submit: string;
+  reply: string;
+  cancelReply: string;
+  comment: string;
+  refresh: string;
+  more: string;
+  preview: string;
+  emoji: string;
+  uploadImage: string;
+  seconds: string;
+  minutes: string;
+  hours: string;
+  days: string;
+  now: string;
+  uploading: string;
+  login: string;
+  logout: string;
+  admin: string;
+  sticky: string;
+  word: string;
+  wordHint: string;
+  anonymous: string;
+}

package/src/typings/options.ts

@@ -0,0 +1,41 @@
+import type { WalineProps } from './waline';
+
+export interface WalineInitOptions extends Omit<WalineProps, 'path'> {
+  /**
+   * Waline 的初始化挂载器。必须是一个**有效的** CSS 选择器 或 HTML 元素
+   *
+   * The DOM element to be mounted on initialization. It must be a **valid** CSS selector string or HTML Element.
+   */
+  el?: string | HTMLElement | null;
+
+  /**
+   * 评论数统计
+   *
+   * Comment number support
+   *
+   * @default false
+   */
+  comment?: string | boolean;
+
+  /**
+   * 页面访问量统计
+   *
+   * Pageview number support
+   *
+   * @default false
+   */
+  pageview?: string | boolean;
+
+  /**
+   * 当前 _文章页_ 路径，用于区分不同的 _文章页_ ，以保证正确读取该 _文章页_ 下的评论列表
+   *
+   * 你可以将其设置为 `window.location.pathname`
+   *
+   * Article path id. Used to distinguish different _article pages_ to ensure loading the correct comment list under the _article page_.
+   *
+   * You can set it to `window.location.pathname`
+   *
+   * @default window.location.pathname
+   */
+  path?: string;
+}

package/src/typings/waline.ts

@@ -0,0 +1,208 @@
+import type {
+  WalineHighlighter,
+  WalineEmojiInfo,
+  WalineImageUploader,
+  WalineMeta,
+  WalineTexRenderer,
+} from './base';
+import type { WalineLocale } from './locale';
+
+export interface WalineProps {
+  /**
+   * Waline 的服务端地址
+   *
+   * Waline server address url
+   */
+  serverURL: string;
+
+  /**
+   * 当前 _文章页_ 路径，用于区分不同的 _文章页_ ，以保证正确读取该 _文章页_ 下的评论列表
+   *
+   * 你可以将其设置为 `window.location.pathname`
+   *
+   * Article path id. Used to distinguish different _article pages_ to ensure loading the correct comment list under the _article page_.
+   *
+   * You can set it to `window.location.pathname`
+   */
+  path: string;
+
+  /**
+   * 评论者相关属性
+   *
+   * `Meta` 可选值: `'nick'`, `'mail'`, `'link'`
+   *
+   * Reviewer attributes.
+   *
+   * Optional values for `Meta`: `'nick'`, `'mail'`, `'link'`
+   *
+   * @default ['nick', 'mail', 'link']
+   */
+  meta?: WalineMeta[];
+
+  /**
+   * 设置**必填项**，默认昵称为匿名
+   *
+   * Set required fields, default anonymous with nickname
+   *
+   * @default []
+   */
+  requiredMeta?: WalineMeta[];
+
+  /**
+   * 评论字数限制。填入单个数字时为最大字数限制
+   *
+   * @more 设置为 `0` 时无限制
+   *
+   * Comment word s limit. When a single number is filled in, it 's the maximum number of comment words.
+   *
+   * @more No limit when set to `0`.
+   *
+   * @default 0
+   */
+  wordLimit?: number | [number, number];
+
+  /**
+   * 评论列表分页，每页条数
+   *
+   * number of pages per page
+   *
+   * @default 10
+   */
+  pageSize?: number;
+
+  /**
+   * Waline 显示语言
+   *
+   * 可选值:
+   *
+   * - `'zh'`
+   * - `'zh-cn'`
+   * - `'zh-CN'`
+   * - `'zh-tw'`
+   * - `'zh-TW'`
+   * - `'en'`
+   * - `'en-US'`
+   * - `'en-us'`
+   * - `'jp'`
+   * - `'jp-jp'`
+   * - `'jp-JP'`
+   * - `'pt-br'`
+   * - `'pt-BR'`
+   * - `'ru'`
+   * - `'ru-ru'`
+   * - `'ru-RU'`
+   *
+   * Display language for waline
+   *
+   * Optional value:
+   *
+   * - `'zh'`
+   * - `'zh-cn'`
+   * - `'zh-CN'`
+   * - `'zh-tw'`
+   * - `'zh-TW'`
+   * - `'en'`
+   * - `'en-US'`
+   * - `'en-us'`
+   * - `'jp'`
+   * - `'jp-jp'`
+   * - `'jp-JP'`
+   * - `'pt-br'`
+   * - `'pt-BR'`
+   * - `'ru'`
+   * - `'ru-ru'`
+   * - `'ru-RU'`
+   *
+   * @default 'zh-CN'
+   */
+  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?: Partial<WalineLocale>;
+
+  /**
+   * 是否启用暗黑模式适配
+   *
+   * @more 设置 `'auto'` 会根据设备暗黑模式自适应。填入 CSS 选择器会在对应选择器生效时启用夜间模式。
+   *
+   * Whether to enable darkmode support
+   *
+   * @more Setting `'auto'` will display darkmode due to device settings. Filling in CSS selector will enable darkmode only when the selector match waline ancestor nodes.
+   */
+  dark?: string | boolean;
+
+  /**
+   * 设置表情包
+   *
+   * Set Emojis
+   *
+   * @default ['https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo']
+   */
+  emoji?: (string | WalineEmojiInfo)[];
+
+  /**
+   * 代码高亮
+   *
+   * Code highlighting
+   */
+
+  highlighter?: WalineHighlighter | false;
+
+  /**
+   * 自定义图片上传方法，方便更好的存储图片
+   *
+   * 方法执行时会将图片对象传入。
+   *
+   * Custom image upload callback to manage picture by yourself.
+   *
+   * We will pass a picture file object when execute it.
+   */
+
+  imageUploader?: WalineImageUploader | false;
+
+  /**
+   * 自定义数学公式处理方法，用于预览。
+   *
+   * Custom math formula parse callback for preview.
+   */
+  texRenderer?: WalineTexRenderer | false;
+
+  /**
+   *
+   * 登录模式状态，可选值:
+   *
+   * - `'enable'`: 启用登录 (默认)
+   * - `'disable'`: 禁用登录，用户只能填写信息评论
+   * - `'force'`: 强制登录，用户必须注册并登录才可发布评论
+   *
+   * Login mode status, optional values:
+   *
+   * - `'enable'`: enable login (default)
+   * - `'disable'`: Login is disabled, users should fill in infomation to comment
+   * - `'force'`: Forced login, users must login to comment
+   *
+   * @default 'enable'
+   */
+  login?: 'enable' | 'disable' | 'force';
+
+  /**
+   * 是否在页脚展示版权信息
+   *
+   * 为了支持 Waline，我们强烈建议你开启它
+   *
+   * Whether show copyright in footer
+   *
+   * We strongly recommended you to keep it on to support waline
+   *
+   * @default true
+   */
+  copyright?: boolean;
+}