gitalk-react 1.0.0-beta.8 → 1.1.0

package/lib/themes/base.scss

@@ -1,628 +0,0 @@
-@function em($px, $base-size: $gt-size-base) {
-  @return calc($px / $base-size * 1em);
-}
-
-@mixin clearfix() {
-  &::before,
-  &::after {
-    display: table;
-    content: '';
-  }
-
-  &::after {
-    clear: both;
-  }
-}
-
-@mixin mobile() {
-  @media (max-width: $gt-breakpoint-mobile) {
-    @content;
-  }
-}
-
-@keyframes gt-kf-rotate {
-  0% {
-    transform: rotate(0);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-$gt-size-base: 16px;
-$gt-size-border-radius: em(5px);
-$gt-size-loader-dot: em(6px);
-$gt-size-loader: em(28px);
-$gt-size-avatar: em(50px);
-$gt-size-avatar-mobi: em(32px);
-$gt-size-textarea-min-height: em(82px);
-$gt-size-textarea-max-height: em(240px);
-$gt-mask-z-index: 9999;
-$gt-breakpoint-mobile: 480px;
-
-.gt-container {
-  box-sizing: border-box;
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  font-size: $gt-size-base;
-  font-weight: 400;
-  line-height: 1.5;
-  color: var(--gt-color-text);
-  font-synthesis: none;
-  text-rendering: optimizelegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  a {
-    color: var(--gt-color-main);
-
-    &:hover {
-      color: var(--gt-color-main-lighter);
-      border-color: var(--gt-color-main-lighter);
-    }
-
-    &.is--active {
-      color: var(--gt-color-link-active);
-      cursor: default;
-
-      &:hover {
-        color: var(--gt-color-link-active);
-      }
-    }
-  }
-
-  .hide {
-    display: none;
-  }
-
-  .gt {
-    &-svg {
-      display: inline-block;
-      width: em(16px);
-      height: em(16px);
-      vertical-align: sub;
-
-      svg {
-        width: 100%;
-        height: 100%;
-        fill: var(--gt-color-main);
-      }
-    }
-
-    &-ico {
-      display: inline-block;
-
-      &-text {
-        margin-left: em(5px);
-      }
-
-      &-github {
-        width: 100%;
-        height: 100%;
-
-        .gt-svg {
-          width: 100%;
-          height: 100%;
-        }
-
-        svg {
-          fill: var(--gt-color-text);
-        }
-      }
-    }
-
-    &-spinner {
-      position: relative;
-
-      &::before {
-        position: absolute;
-        top: em(3px);
-        box-sizing: border-box;
-        width: em(12px);
-        height: em(12px);
-        margin-top: em(-3px);
-        margin-left: em(-6px);
-        content: '';
-        border: 1px solid var(--gt-color-btn);
-        border-top-color: var(--gt-color-main);
-        border-radius: 50%;
-        animation: gt-kf-rotate 0.6s linear infinite;
-      }
-    }
-
-    &-loader {
-      position: relative;
-      display: inline-block;
-      width: $gt-size-loader;
-      height: $gt-size-loader;
-      font-style: normal;
-      line-height: $gt-size-loader;
-      border: 1px solid var(--gt-color-loader);
-      border-radius: 50%;
-      animation: ease gt-kf-rotate 1.5s infinite;
-
-      &::before {
-        position: absolute;
-        top: 0;
-        left: 50%;
-        display: block;
-        width: $gt-size-loader-dot;
-        height: $gt-size-loader-dot;
-        margin-top: -(calc($gt-size-loader-dot / 2));
-        margin-left: -(calc($gt-size-loader-dot / 2));
-        content: '';
-        background-color: var(--gt-color-loader);
-        border-radius: 50%;
-      }
-    }
-
-    &-avatar {
-      display: inline-block;
-      width: $gt-size-avatar;
-      height: $gt-size-avatar;
-
-      @include mobile {
-        width: $gt-size-avatar-mobi;
-        height: $gt-size-avatar-mobi;
-      }
-
-      img {
-        width: 100%;
-        height: auto;
-        border-radius: em(3px);
-      }
-
-      &-github {
-        width: $gt-size-avatar - em(2px);
-        height: $gt-size-avatar - em(2px);
-        cursor: pointer;
-
-        @include mobile {
-          width: $gt-size-avatar-mobi - em(2px);
-          height: $gt-size-avatar-mobi - em(2px);
-        }
-      }
-    }
-
-    &-btn {
-      display: inline-block;
-      padding: em(12px) em(20px);
-      font-size: em(12px);
-      line-height: 1;
-      color: var(--gt-color-btn);
-      white-space: nowrap;
-      text-decoration: none;
-      cursor: pointer;
-      outline: none;
-      background-color: var(--gt-color-main);
-      border: 1px solid var(--gt-color-main);
-      border-radius: $gt-size-border-radius;
-      transition: all ease 0.25s;
-
-      &:hover {
-        background-color: var(--gt-color-main-lighter);
-        border-color: var(--gt-color-main-lighter);
-      }
-
-      &--secondary {
-        color: var(--gt-color-main-lighter);
-        background-color: transparent;
-        border-color: var(--gt-color-main-lighter);
-
-        &:hover {
-          color: var(--gt-color-main);
-          background-color: transparent;
-          border-color: var(--gt-color-main);
-        }
-      }
-
-      &-text {
-        font-weight: 400;
-      }
-
-      &-loading {
-        position: relative;
-        display: inline-block;
-        width: em(12px);
-        height: em(16px);
-        margin-left: em(8px);
-        vertical-align: top;
-      }
-
-      &.is--disable {
-        cursor: not-allowed;
-        opacity: 0.5;
-      }
-
-      &-login {
-        margin-right: 0;
-      }
-    }
-
-    &-error {
-      margin: em(10px);
-      color: var(--gt-color-error);
-      text-align: center;
-    }
-
-    &-initing {
-      padding: em(20px) 0;
-      text-align: center;
-
-      &-text {
-        margin: em(10px) auto;
-        font-size: 92%;
-      }
-    }
-
-    &-no-init {
-      padding: em(20px) 0;
-      text-align: center;
-    }
-
-    &-link {
-      border-bottom: 1px dotted var(--gt-color-main);
-
-      &-counts,
-      &-project {
-        text-decoration: none;
-      }
-    }
-
-    &-meta {
-      position: relative;
-      z-index: 10;
-      padding: em(16px) 0;
-      margin: em(20px) 0;
-      font-size: em(16px);
-      border-bottom: 1px solid var(--gt-color-hr);
-
-      @include clearfix;
-    }
-
-    &-counts {
-      margin: 0 em(10px) 0 0;
-    }
-
-    &-user {
-      float: right;
-      margin: 0;
-      font-size: 92%;
-
-      &-pic {
-        width: em(16px);
-        height: em(16px);
-        margin-right: em(8px);
-        vertical-align: top;
-      }
-
-      &-inner {
-        display: inline-block;
-        cursor: pointer;
-      }
-
-      .gt-ico {
-        margin: 0 0 0 em(5px);
-
-        svg {
-          fill: var(--gt-color-text);
-        }
-      }
-
-      .is--poping {
-        .gt-ico {
-          svg {
-            fill: var(--gt-color-main);
-          }
-        }
-      }
-    }
-
-    &-version {
-      margin-left: em(6px);
-      color: var(--gt-color-sub);
-    }
-
-    &-copyright {
-      padding-top: em(8px);
-      margin: 0 em(15px) em(8px);
-      border-top: 1px solid var(--gt-color-hr);
-    }
-
-    &-popup {
-      position: absolute;
-      top: em(38px);
-      right: 0;
-      display: inline-block;
-      padding: em(10px) 0;
-      font-size: em(14px);
-      letter-spacing: 0.5px;
-      background: var(--gt-color-popbg);
-      border: 1px solid var(--gt-color-hr);
-
-      .gt-action {
-        position: relative;
-        display: block;
-        padding: 0 em(18px);
-        margin: em(8px) 0;
-        text-decoration: none;
-        cursor: pointer;
-
-        &.is--active {
-          &::before {
-            position: absolute;
-            top: em(7px);
-            left: em(8px);
-            width: em(4px);
-            height: em(4px);
-            content: '';
-            background: var(--gt-color-main);
-          }
-        }
-      }
-    }
-
-    &-header {
-      position: relative;
-      display: flex;
-
-      &-comment {
-        flex: 1;
-        margin-left: em(20px);
-
-        @include mobile {
-          margin-left: em(14px);
-        }
-      }
-
-      &-textarea {
-        box-sizing: border-box;
-        display: block;
-        width: 100%;
-        min-height: $gt-size-textarea-min-height;
-        max-height: $gt-size-textarea-max-height;
-        padding: em(12px);
-        font-size: em(14px);
-        color: inherit;
-        word-wrap: break-word;
-        resize: none;
-        outline: none;
-        background-color: var(--gt-color-input-bg);
-        border: 1px solid var(--gt-color-input-border);
-        border-radius: $gt-size-border-radius;
-        transition: background-color ease 0.25s;
-
-        &:hover,
-        &:focus {
-          background-color: var(--gt-color-input-bg-lighter);
-        }
-      }
-
-      &-preview {
-        min-height: $gt-size-textarea-min-height;
-        padding: em(12px);
-        background-color: var(--gt-color-input-bg);
-        border: 1px solid var(--gt-color-input-border);
-        border-radius: $gt-size-border-radius;
-      }
-
-      &-controls {
-        position: relative;
-        display: flex;
-        align-items: center;
-        margin: em(12px) 0 0;
-
-        &-tip {
-          margin-right: auto;
-          font-size: em(14px);
-          color: var(--gt-color-main);
-          text-decoration: none;
-
-          @include mobile {
-            display: none;
-          }
-        }
-
-        .gt-btn {
-          margin-left: em(12px);
-
-          @include mobile {
-            width: 100%;
-
-            &:first-of-type {
-              margin-left: 0;
-            }
-          }
-        }
-      }
-    }
-
-    &-comments {
-      padding-top: em(20px);
-
-      &-null {
-        text-align: center;
-      }
-
-      &-controls {
-        margin: em(20px) 0;
-        text-align: center;
-      }
-    }
-
-    &-comment {
-      position: relative;
-      display: flex;
-      padding: em(10px) 0;
-
-      &-content {
-        position: relative;
-        flex: 1;
-        padding: em(12px) em(16px);
-        margin-left: em(20px);
-        overflow: auto;
-        background-color: var(--gt-color-comment-bg);
-        transition: all ease 0.25s;
-
-        &:hover {
-          box-shadow: 0 em(2px) em(24px) 0 var(--gt-color-comment-shadow);
-        }
-
-        @include mobile {
-          padding: em(10px) em(12px);
-          margin-left: em(14px);
-        }
-      }
-
-      &-collapse {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: em(6px);
-        cursor: pointer;
-        background: var(--gt-color-comment-collapse-bg);
-
-        .gt-ico-collapse {
-          .gt-svg {
-            svg {
-              fill: var(--gt-color-text);
-              scale: 1.2;
-            }
-          }
-        }
-      }
-
-      &-header {
-        position: relative;
-        display: flex;
-        margin-bottom: em(8px);
-        font-size: em(14px);
-      }
-
-      &-username {
-        font-weight: 500;
-        color: var(--gt-color-main);
-        text-decoration: none;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
-      &-date {
-        margin-left: em(8px);
-        color: var(--gt-color-sub);
-
-        &__prefix {
-          margin-right: em(4px);
-
-          @include mobile {
-            display: none;
-          }
-        }
-
-        &__time {
-          @include mobile {
-            font-size: $gt-size-base * 0.7;
-          }
-        }
-      }
-
-      &-actions {
-        display: flex;
-        gap: em(12px);
-        margin-left: auto;
-      }
-
-      &-like,
-      &-edit,
-      &-reply {
-        height: em(22px);
-
-        &:hover {
-          cursor: pointer;
-        }
-      }
-
-      &-body {
-        color: var(--gt-color-comment-txt);
-        background-color: inherit;
-
-        .email-hidden-toggle a {
-          display: inline-block;
-          height: em(12px);
-          padding: 0 em(9px);
-          font-size: em(12px);
-          font-weight: 600;
-          line-height: em(6px);
-          vertical-align: middle;
-          color: #444d56;
-          text-decoration: none;
-          background: #dfe2e5;
-          border-radius: 1px;
-
-          &:hover {
-            background-color: #c6cbd1;
-          }
-        }
-
-        .email-hidden-reply {
-          display: none;
-          white-space: pre-wrap;
-
-          &.expanded {
-            display: block;
-          }
-
-          .email-signature-reply {
-            padding: 0 em(15px);
-            margin: em(15px) 0;
-            color: #586069;
-            border-left: em(4px) solid #dfe2e5;
-          }
-        }
-      }
-
-      &-admin {
-        .gt-comment-content {
-          box-shadow: 0 em(2px) em(12px) 0 var(--gt-color-comment-shadow);
-
-          &:hover {
-            box-shadow: 0 em(2px) em(24px) 0
-              var(--gt-color-comment-shadow-admin);
-          }
-        }
-      }
-    }
-  }
-
-  &::after {
-    position: fixed;
-    content: '';
-    opacity: 0;
-  }
-
-  &.gt-input-focused {
-    position: relative;
-
-    &::after {
-      inset: 0;
-      z-index: $gt-mask-z-index;
-      background: #171717;
-      opacity: 0.8;
-      transition: opacity ease 0.3s;
-    }
-
-    .gt-header-comment {
-      z-index: $gt-mask-z-index + 1;
-    }
-  }
-}

package/lib/themes/gitalk-dark.scss

@@ -1,28 +0,0 @@
-@use 'sass:color';
-@use './base';
-@import 'github-markdown-css/github-markdown-dark.css';
-
-.gt-container {
-  --gt-theme-mode: dark;
-  --gt-color-text: #e9e9e9;
-  --gt-color-main: #6366f1;
-  --gt-color-main-lighter: #{color.adjust(#6366f1, $lightness: 5%)};
-  --gt-color-sub: #9e9e9e;
-  --gt-color-loader: #777;
-  --gt-color-error: #ef4444;
-  --gt-color-hr: #555;
-  --gt-color-input-border: rgb(255 255 255 / 10%);
-  --gt-color-input-bg: #212121;
-  --gt-color-input-bg-lighter: #{color.adjust(#212121, $lightness: 6%)};
-  --gt-color-comment-bg: #212121;
-  --gt-color-comment-shadow: #{color.adjust(#212121, $lightness: 18%)};
-  --gt-color-comment-shadow-admin: #{color.adjust(#212121, $lightness: 24%)};
-  --gt-color-comment-txt: #fafafa;
-  --gt-color-comment-collapse-bg: linear-gradient(
-    rgb(20 20 20 / 10%),
-    rgb(20 20 20 / 90%)
-  );
-  --gt-color-link-active: #fafafa;
-  --gt-color-btn: #eee;
-  --gt-color-popbg: #171717;
-}

package/lib/themes/gitalk-light.scss

@@ -1,28 +0,0 @@
-@use 'sass:color';
-@use './base';
-@import 'github-markdown-css/github-markdown-light.css';
-
-.gt-container {
-  --gt-theme-mode: light;
-  --gt-color-text: #171717;
-  --gt-color-main: #3b82f6;
-  --gt-color-main-lighter: #{color.adjust(#3b82f6, $lightness: 10%)};
-  --gt-color-sub: #a1a1a1;
-  --gt-color-loader: #999;
-  --gt-color-error: #ff3860;
-  --gt-color-hr: #e9e9e9;
-  --gt-color-input-border: rgb(0 0 0 / 10%);
-  --gt-color-input-bg: #f6f6f6;
-  --gt-color-input-bg-lighter: #{color.adjust(#f6f6f6, $lightness: 50%)};
-  --gt-color-comment-bg: #f9f9f9;
-  --gt-color-comment-shadow: #{color.adjust(#f9f9f9, $lightness: -12%)};
-  --gt-color-comment-shadow-admin: #{color.adjust(#f9f9f9, $lightness: -18%)};
-  --gt-color-comment-txt: #333;
-  --gt-color-comment-collapse-bg: linear-gradient(
-    rgb(245 245 245 / 10%),
-    rgb(245 245 245 / 90%)
-  );
-  --gt-color-link-active: #333;
-  --gt-color-btn: #fff;
-  --gt-color-popbg: #fff;
-}

package/lib/utils/compatibility.ts

@@ -1,35 +0,0 @@
-import logger from "./logger";
-
-export const supportsCSSVariables = () => {
-  const testKey = "--supports-css-variables";
-  const testValue = "1rem";
-
-  try {
-    const testElement = document.createElement("div");
-    testElement.style.setProperty(testKey, testValue);
-
-    return testElement.style.getPropertyValue(testKey) === testValue;
-  } catch (error) {
-    logger.e(
-      `An error occurred while checking browser compatibility with CSS variables:`,
-      error,
-    );
-    return false;
-  }
-};
-
-export const supportsES2020 = () => {
-  try {
-    return (
-      typeof BigInt !== "undefined" &&
-      typeof Promise.allSettled === "function" &&
-      typeof String.prototype.matchAll === "function"
-    );
-  } catch (error) {
-    logger.e(
-      `An error occurred while checking browser compatibility with ES2020:`,
-      error,
-    );
-    return false;
-  }
-};