@waline/client 2.15.8 → 3.0.0-alpha.2

package/src/pageview.ts

@@ -1,116 +0,0 @@
-import { getPageview, updatePageview } from './api/index.js';
-import { type WalineAbort } from './typings/index.js';
-import { errorHandler, getQuery, getServerURL } from './utils/index.js';
-
-export interface WalinePageviewCountOptions {
-  /**
-   * Waline 服务端地址
-   *
-   * Waline server url
-   */
-  serverURL: string;
-
-  /**
-   * 浏览量 CSS 选择器
-   *
-   * Pageview CSS selector
-   *
-   * @default '.waline-pageview-count'
-   */
-  selector?: string;
-
-  /**
-   * 需要更新和获取的路径
-   *
-   * Path to be fetched and updated
-   *
-   * @default window.location.pathname
-   */
-  path?: string;
-
-  /**
-   * 是否在查询时更新 path 的浏览量
-   *
-   * Whether update pageviews when fetching path result
-   *
-   * @default true
-   */
-  update?: boolean;
-
-  /**
-   * 错误提示消息所使用的语言
-   *
-   * Language of error message
-   *
-   * @default navigator.language
-   */
-  lang?: string;
-}
-
-const renderVisitorCount = (
-  counts: number[],
-  countElements: HTMLElement[],
-): void => {
-  countElements.forEach((element, index) => {
-    element.innerText = counts[index].toString();
-  });
-};
-
-export const pageviewCount = ({
-  serverURL,
-  path = window.location.pathname,
-  selector = '.waline-pageview-count',
-  update = true,
-  lang = navigator.language,
-}: WalinePageviewCountOptions): WalineAbort => {
-  const controller = new AbortController();
-
-  const elements = Array.from(
-    // pageview 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> =>
-    getPageview({
-      serverURL: getServerURL(serverURL),
-      paths: elements.map((element) => getQuery(element) || path),
-      lang,
-      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 updatePageview({
-      serverURL: getServerURL(serverURL),
-      path,
-      lang,
-    }).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-vue.d.ts

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

package/src/styles/base.scss

@@ -1,67 +0,0 @@
-.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;
-  }
-}

package/src/styles/card.scss

@@ -1,258 +0,0 @@
-.wl-cards {
-  .wl-user {
-    --avatar-size: var(--waline-avatar-size);
-
-    position: relative;
-    margin-inline-end: 0.75em;
-
-    @media (max-width: 720px) {
-      --avatar-size: var(--waline-m-avatar-size);
-    }
-
-    img {
-      width: var(--avatar-size);
-      height: var(--avatar-size);
-      border-radius: var(--waline-avatar-radius);
-      box-shadow: var(--waline-box-shadow);
-    }
-
-    .verified-icon {
-      position: absolute;
-      top: calc(var(--avatar-size) * 3 / 4);
-      inset-inline-start: calc(var(--avatar-size) * 3 / 4);
-
-      border-radius: 50%;
-
-      background: var(--waline-bgcolor);
-      box-shadow: var(--waline-box-shadow);
-    }
-  }
-}
-
-.wl-card-item {
-  position: relative;
-  display: flex;
-  padding: 0.5em;
-
-  .wl-card-item {
-    padding-inline-end: 0;
-  }
-}
-
-.wl-card {
-  flex: 1;
-  width: 0;
-  padding-bottom: 0.5em;
-  border-bottom: 1px dashed var(--waline-border-color);
-
-  &:first-child {
-    margin-inline-start: 1em;
-  }
-
-  .wl-card-item:last-child > & {
-    border-bottom: none;
-  }
-
-  .wl-nick {
-    svg {
-      position: relative;
-      bottom: -0.125em;
-      line-height: 1;
-    }
-  }
-
-  .wl-head {
-    // bfc to fix https://github.com/walinejs/waline/issues/1415
-    overflow: hidden;
-    line-height: 1.5;
-
-    .wl-nick {
-      position: relative;
-
-      display: inline-block;
-
-      margin-inline-end: 0.5em;
-
-      font-weight: bold;
-      font-size: 0.875em;
-      line-height: 1;
-      text-decoration: none;
-    }
-  }
-
-  span.wl-nick {
-    color: var(--waline-dark-grey);
-  }
-
-  .wl-badge {
-    display: inline-block;
-
-    margin-inline-end: 1em;
-    padding: 0 0.3em;
-    border: 1px solid var(--waline-badge-color);
-    border-radius: 4px;
-
-    color: var(--waline-badge-color);
-
-    font-size: var(--waline-badge-font-size);
-  }
-
-  .wl-time {
-    margin-inline-end: 0.875em;
-    color: var(--waline-info-color);
-    font-size: 0.75em;
-  }
-
-  .wl-meta {
-    position: relative;
-    line-height: 1;
-
-    > span {
-      display: inline-block;
-
-      margin-inline-end: 0.25em;
-      padding: 2px 4px;
-      border-radius: 0.2em;
-
-      background: var(--waline-info-bgcolor);
-      color: var(--waline-info-color);
-
-      font-size: var(--waline-info-font-size);
-      line-height: 1.5;
-
-      &:empty {
-        display: none;
-      }
-    }
-  }
-
-  .wl-comment-actions {
-    float: right;
-    line-height: 1;
-
-    [dir='rtl'] & {
-      float: left;
-    }
-  }
-
-  .wl-delete,
-  .wl-like,
-  .wl-reply,
-  .wl-edit {
-    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;
-
-    margin-bottom: 0.75em;
-    padding-top: 0.625em;
-
-    font-size: 0.875em;
-    line-height: 2;
-    word-wrap: break-word;
-
-    &.expand {
-      overflow: hidden;
-      max-height: 8em;
-      cursor: pointer;
-
-      &::before {
-        content: '';
-
-        position: absolute;
-        top: 0;
-        bottom: 3.15em;
-        inset-inline-start: 0;
-        z-index: 999;
-
-        display: block;
-
-        width: 100%;
-
-        background: linear-gradient(180deg, #000, rgb(255 255 255 / 90%));
-      }
-
-      &::after {
-        content: attr(data-expand);
-
-        position: absolute;
-        bottom: 0;
-        inset-inline-start: 0;
-        z-index: 999;
-
-        display: block;
-
-        width: 100%;
-        height: 3.15em;
-
-        background: rgb(255 255 255 / 90%);
-        color: #828586;
-
-        line-height: 3.15em;
-        text-align: center;
-      }
-    }
-
-    > *:first-child {
-      margin-top: 0;
-    }
-
-    > *:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .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-inline-end: 0;
-        border-radius: 0.5em 0 0 0.5em;
-      }
-
-      &:last-child {
-        border-inline-start: 0;
-        border-radius: 0 0.5em 0.5em 0;
-      }
-    }
-  }
-
-  .wl-quote {
-    border-inline-start: 1px dashed rgb(237 237 237 / 50%);
-
-    .wl-user {
-      --avatar-size: var(--waline-m-avatar-size);
-    }
-  }
-}

package/src/styles/config.scss

@@ -1,52 +0,0 @@
-:root {
-  // font-size
-  --waline-font-size: 1rem;
-
-  // regular colors
-  --waline-white: #fff;
-  --waline-light-grey: #999;
-  --waline-dark-grey: #666;
-
-  // theme colors
-  --waline-theme-color: #27ae60;
-  --waline-active-color: #2ecc71;
-
-  // layout colors
-  --waline-color: #444;
-  --waline-bgcolor: #fff;
-  --waline-bgcolor-light: #f8f8f8;
-  --waline-bgcolor-hover: #f0f0f0;
-  --waline-border-color: #ddd;
-  --waline-disable-bgcolor: #f8f8f8;
-  --waline-disable-color: #000;
-  --waline-code-bgcolor: #282c34;
-
-  // special colors
-  --waline-bq-color: #f0f0f0;
-
-  // avatar
-  --waline-avatar-size: 3.25rem;
-  --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
-
-  // badge
-  --waline-badge-color: #3498db;
-  --waline-badge-font-size: 0.75em;
-
-  // info
-  --waline-info-bgcolor: #f8f8f8;
-  --waline-info-color: #999;
-  --waline-info-font-size: 0.625em;
-
-  // ====render choices====
-  //   ** using border **
-  --waline-border: 1px solid var(--waline-border-color);
-  --waline-avatar-radius: 50%;
-  --waline-box-shadow: none;
-
-  // ** using box-shadow **
-  // --waline-border: none;
-  // Light:
-  // --waline-box-shadow: 0 12px 40px rgb(134 151 168 / 25%);
-  // Dark:
-  // --waline-box-shadow: 0 12px 40px #0f0e0d
-}

package/src/styles/emoji.scss

@@ -1,137 +0,0 @@
-.wl-emoji-popup {
-  position: absolute;
-  top: 100%;
-  inset-inline-start: 1.25em;
-  z-index: 10;
-
-  max-width: 526px;
-  border: var(--waline-border);
-  border-radius: 6px;
-
-  background: var(--waline-bgcolor);
-  box-shadow: var(--waline-box-shadow);
-
-  opacity: 0;
-  visibility: hidden;
-
-  transition:
-    transform 0.2s ease-out,
-    opacity 0.2s ease-out;
-  transform: scale(0.9, 0.9);
-  transform-origin: 0 0;
-
-  &.display {
-    opacity: 1;
-    visibility: visible;
-    transform: none;
-  }
-
-  button {
-    display: inline-block;
-    vertical-align: middle;
-
-    width: 2em;
-    margin: 0.125em;
-    padding: 0;
-    border-width: 0;
-
-    background: transparent;
-
-    font-size: inherit;
-    line-height: 2;
-    text-align: center;
-
-    cursor: pointer;
-
-    &:hover {
-      background: var(--waline-bgcolor-hover);
-    }
-  }
-
-  .wl-emoji {
-    display: inline-block;
-    vertical-align: middle;
-    max-width: 1.5em;
-    max-height: 1.5em;
-  }
-
-  .wl-tab-wrapper {
-    overflow-y: auto;
-    max-height: 145px;
-    padding: 0.5em;
-
-    &::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-    }
-
-    &::-webkit-scrollbar-track-piece:vertical {
-      -webkit-border-radius: 6px;
-      border-radius: 6px;
-      background: rgb(0 0 0 / 10%);
-    }
-
-    &::-webkit-scrollbar-thumb:vertical {
-      width: 6px;
-      -webkit-border-radius: 6px;
-      border-radius: 6px;
-      background: var(--waline-theme-color);
-    }
-  }
-
-  .wl-tabs {
-    position: relative;
-    overflow-x: auto;
-    padding: 0 6px;
-    white-space: nowrap;
-
-    &::before {
-      content: ' ';
-
-      position: absolute;
-      top: 0;
-      right: 0;
-      left: 0;
-      z-index: 2;
-
-      height: 1px;
-
-      background: var(--waline-border-color);
-    }
-
-    &::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-    }
-
-    &::-webkit-scrollbar-track-piece:horizontal {
-      -webkit-border-radius: 6px;
-      border-radius: 6px;
-      background: rgb(0 0 0 / 10%);
-    }
-
-    &::-webkit-scrollbar-thumb:horizontal {
-      height: 6px;
-      -webkit-border-radius: 6px;
-      border-radius: 6px;
-      background: var(--waline-theme-color);
-    }
-  }
-
-  .wl-tab {
-    position: relative;
-    margin: 0;
-    padding: 0 0.5em;
-
-    &.active {
-      z-index: 3;
-
-      border: 1px solid var(--waline-border-color);
-      border-top-width: 0;
-      border-bottom-right-radius: 6px;
-      border-bottom-left-radius: 6px;
-
-      background: var(--waline-bgcolor);
-    }
-  }
-}

package/src/styles/gif.scss

@@ -1,73 +0,0 @@
-.wl-gif-popup {
-  position: absolute;
-  top: 100%;
-  inset-inline-start: 1.25em;
-  z-index: 10;
-
-  width: calc(100% - 3em);
-  padding: 0.75em 0.75em 0.25em;
-  border: var(--waline-border);
-  border-radius: 6px;
-
-  background: var(--waline-bgcolor);
-  box-shadow: var(--waline-box-shadow);
-
-  opacity: 0;
-  visibility: hidden;
-
-  transition:
-    transform 0.2s ease-out,
-    opacity 0.2s ease-out;
-  transform: scale(0.9, 0.9);
-  transform-origin: 0 0;
-
-  &.display {
-    opacity: 1;
-    visibility: visible;
-    transform: none;
-  }
-
-  input {
-    box-sizing: border-box;
-
-    width: 100%;
-    margin-bottom: 10px;
-    padding: 3px 5px;
-    border: var(--waline-border);
-  }
-
-  img {
-    display: block;
-
-    box-sizing: border-box;
-
-    width: 100%;
-    border-width: 2px;
-    border-style: solid;
-    border-color: #fff;
-
-    cursor: pointer;
-
-    &:hover {
-      border-color: var(--waline-theme-color);
-      border-radius: 2px;
-    }
-  }
-}
-
-.wl-gallery {
-  display: flex;
-  overflow-y: auto;
-  max-height: 80vh;
-}
-
-.wl-gallery-column {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-
-  // stylelint-disable
-  height: -webkit-max-content;
-  height: -moz-max-content;
-  height: max-content;
-}