gitalk-react 1.0.0-beta.3 → 1.0.0-beta.5

package/lib/constants/index.ts

@@ -14,6 +14,7 @@ import {
 } from "date-fns/locale";
 
 import packageJson from "../../package.json";
+import { type GitalkProps } from "../gitalk";
 import { type Lang } from "../i18n";
 
 export const VERSION = packageJson.version;
@@ -23,6 +24,11 @@ export const DEFAULT_LANG: Lang = "en";
 export const DEFAULT_LABELS = ["Gitalk"];
 export const DEFAULT_AVATAR =
   "https://cdn.jsdelivr.net/npm/gitalk@1/src/assets/icon/github.svg";
+export const DEFAULT_USER: GitalkProps["defaultUser"] = {
+  avatar_url: "//avatars1.githubusercontent.com/u/29697133?s=50",
+  login: "null",
+  html_url: "",
+};
 
 export const ACCESS_TOKEN_KEY = "GT_ACCESS_TOKEN";
 export const STORED_COMMENTS_KEY = "GT_COMMENT";

package/lib/gitalk.tsx

@@ -23,6 +23,7 @@ import {
   ACCESS_TOKEN_KEY,
   DATE_FNS_LOCALE_MAP,
   DEFAULT_LABELS,
+  DEFAULT_USER,
   HOMEPAGE,
   VERSION,
 } from "./constants";
@@ -45,7 +46,13 @@ import logger from "./utils/logger";
 import { parseSearchQuery, stringifySearchQuery } from "./utils/query";
 
 export interface GitalkProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "title"> {
+  extends Omit<
+    React.DetailedHTMLProps<
+      React.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >,
+    "id" | "title"
+  > {
   /**
    * GitHub Application Client ID.
    */
@@ -72,7 +79,7 @@ export interface GitalkProps
    * The unique id of the page.
    * Length must less than 50.
    *
-   * @default location.pathname
+   * @default location.host + location.pathname
    */
   id?: string;
   /**
@@ -112,7 +119,7 @@ export interface GitalkProps
   perPage?: number;
   /**
    * Comment sorting direction.
-   * Available values are last and first.
+   * Available values are `last` and `first`.
    *
    * @default "last"
    */
@@ -182,6 +189,12 @@ export interface GitalkProps
    * @param count comments number
    */
   updateCountCallback?: (count: number) => void;
+  /**
+   * Callback method invoked when a new issue is successfully created.
+   *
+   * @param issue created issue
+   */
+  onCreateIssue?: (issue: IssueType) => void;
   /**
    * Callback method invoked when a new comment is successfully created.
    *
@@ -199,14 +212,15 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
     owner,
     repo,
     admin,
-    id: propsIssueId = location.pathname,
+    id: propsIssueId = location.host + location.pathname,
     number: propsIssueNumber,
-    labels: issueBaseLabels = DEFAULT_LABELS,
+    labels: propsIssueLabels = DEFAULT_LABELS,
     title: issueTitle = document.title,
     body: issueBody = location.href +
-      document
+      "\n\n" +
+      (document
         ?.querySelector('meta[name="description"]')
-        ?.getAttribute("content") || "",
+        ?.getAttribute("content") ?? ""),
     language = navigator.language as Lang,
     perPage: propsPerPage = 10,
     pagerDirection = "last",
@@ -223,30 +237,23 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
     defaultUser: propsDefaultUser,
     defaultAuthor: propsDefaultAuthor,
     updateCountCallback,
+    onCreateIssue,
     onCreateComment,
     className = "",
     ...restProps
   } = props;
-  const issueId = propsIssueId.slice(0, 50);
-  const issueNumber =
-    propsIssueNumber && propsIssueNumber > 0 ? propsIssueNumber : undefined;
-  const commentsPerPage =
-    propsPerPage > 100 ? 100 : propsPerPage < 0 ? 10 : propsPerPage;
-  const defaultUser = propsDefaultUser
-    ? propsDefaultUser
-    : propsDefaultAuthor
-      ? {
-          avatar_url: propsDefaultAuthor.avatarUrl,
-          login: propsDefaultAuthor.login,
-          html_url: propsDefaultAuthor.url,
-        }
-      : {
-          avatar_url: "//avatars1.githubusercontent.com/u/29697133?s=50",
-          login: "null",
-          html_url: "",
-        };
 
-  logger.i("re-rendered.");
+  const [issue, setIssue] = useState<IssueType>();
+  const issueNumber = useMemo(
+    () =>
+      propsIssueNumber && propsIssueNumber > 0 ? propsIssueNumber : undefined,
+    [propsIssueNumber],
+  );
+  const issueId = useMemo(() => propsIssueId.slice(0, 50), [propsIssueId]);
+  const issueLabels = useMemo(
+    () => propsIssueLabels.concat([issueId]),
+    [propsIssueLabels, issueId],
+  );
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [inputComment, setInputComment] = useState<string>("");
@@ -256,9 +263,26 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
   const [commentsCount, setCommentsCount] = useState<number>(0);
   const [commentsCursor, setCommentsCursor] = useState("");
   const [commentsPage, setCommentsPage] = useState<number>(1);
+  const commentsPerPage = useMemo(
+    () => (propsPerPage > 100 ? 100 : propsPerPage < 0 ? 10 : propsPerPage),
+    [propsPerPage],
+  );
   const [commentsLoaded, setCommentsLoaded] = useState<boolean>(false);
   const [commentsPagerDirection, setCommentsPagerDirection] =
     useState(pagerDirection);
+  const defaultUser = useMemo(
+    () =>
+      propsDefaultUser
+        ? propsDefaultUser
+        : propsDefaultAuthor
+          ? {
+              avatar_url: propsDefaultAuthor.avatarUrl,
+              login: propsDefaultAuthor.login,
+              html_url: propsDefaultAuthor.url,
+            }
+          : DEFAULT_USER,
+    [propsDefaultAuthor, propsDefaultUser],
+  );
 
   const [showPopup, setShowPopup] = useState<boolean>(false);
 
@@ -336,12 +360,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
     );
   }, [admin, user]);
 
-  const issueLabels = useMemo(
-    () => issueBaseLabels.concat([issueId]),
-    [issueBaseLabels, issueId],
-  );
-
-  const { loading: createIssueLoading, runAsync: runCreateIssue } = useRequest(
+  const { loading: createIssueLoading, run: runCreateIssue } = useRequest(
     async () => {
       logger.i(`Creating issue...`);
 
@@ -359,11 +378,13 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
       if (createIssueRes.status === 201) {
         const _issue = createIssueRes.data;
         logger.s(`Create issue successfully:`, _issue);
-        return _issue;
+
+        onCreateIssue?.(_issue);
+
+        setIssue(_issue);
       } else {
         setAlert(`Create issue failed: ${createIssueRes}`);
         logger.e(`Create issue failed:`, createIssueRes);
-        return undefined;
       }
     },
     {
@@ -373,11 +394,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
     },
   );
 
-  const {
-    data: issue,
-    mutate: setIssue,
-    loading: getIssueLoading,
-  } = useRequest(
+  const { loading: getIssueLoading } = useRequest(
     async () => {
       if (issueNumber) {
         const getIssueRes = await octokit.request(
@@ -395,15 +412,14 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
             `Locate issue ${issueNumber} in repository ${owner}/${repo} successfully:`,
             _issue,
           );
-          return _issue;
+          setIssue(_issue);
         } else if (getIssueRes.status === 404) {
           logger.w(
             `Issue ${issueNumber} in repository ${owner}/${repo} was not found.`,
           );
 
           if (isAdmin && !createIssueManually) {
-            const _issue = await runCreateIssue();
-            return _issue;
+            runCreateIssue();
           }
         } else {
           setAlert(
@@ -433,15 +449,14 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
               `Locate issue with labels ${issueLabels} in repository ${owner}/${repo} successfully:`,
               _issue,
             );
-            return _issue;
+            setIssue(_issue);
           } else {
             logger.w(
               `Issue with labels ${issueLabels} in repository ${owner}/${repo} was not found.`,
             );
 
             if (isAdmin && !createIssueManually) {
-              const _issue = await runCreateIssue();
-              return _issue;
+              runCreateIssue();
             }
           }
         } else if (getIssuesStatus === 404) {
@@ -450,8 +465,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
           );
 
           if (isAdmin && !createIssueManually) {
-            const _issue = await runCreateIssue();
-            return _issue;
+            runCreateIssue();
           }
         } else {
           setAlert(
@@ -463,8 +477,6 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
           );
         }
       }
-
-      return undefined;
     },
     {
       ready: !!owner && !!repo && (!!issueNumber || !!issueId),
@@ -1214,7 +1226,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
       value={{ language, polyglot, dateFnsLocaleMap: DATE_FNS_LOCALE_MAP }}
     >
       <div
-        className={`gt-container ${isInputFocused ? "gt-input-focused" : ""} ${className}`}
+        className={`gt-container${isInputFocused ? " gt-input-focused" : ""} ${className}`}
         {...restProps}
       >
         {alert && <div className="gt-error">{alert}</div>}

package/lib/themes/base.scss

@@ -568,7 +568,6 @@ $gt-breakpoint-mobile: 479px;
 
   &::after {
     position: fixed;
-    inset: 0 0 100%;
     content: '';
     opacity: 0;
   }
@@ -577,12 +576,11 @@ $gt-breakpoint-mobile: 479px;
     position: relative;
 
     &::after {
+      inset: 0;
       z-index: $gt-mask-z-index;
-      background: #000;
-      opacity: 0.6;
-      transition:
-        opacity 0.3s,
-        bottom 0s;
+      background: #171717;
+      opacity: 0.8;
+      transition: opacity ease 0.3s;
     }
 
     .gt-header-comment {

package/lib/utils/logger.ts

@@ -6,10 +6,20 @@ enum LogLevel {
   NO_LOG = Infinity,
 }
 
-class Logger {
+export class Logger {
   prefix = "Gitalk";
   logLevel = import.meta.env.PROD ? LogLevel.WARNING : LogLevel.INFO;
 
+  constructor({ prefix, logLevel }: { prefix?: string; logLevel?: LogLevel }) {
+    if (prefix) {
+      this.prefix = prefix;
+    }
+    if (logLevel !== undefined) {
+      this.logLevel = logLevel;
+    }
+    return this;
+  }
+
   i(...infos: unknown[]) {
     if (this.logLevel > LogLevel.INFO) return;
 
@@ -51,6 +61,6 @@ class Logger {
   }
 }
 
-const logger = new Logger();
+const logger = new Logger({});
 
 export default logger;

package/lib/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitalk-react",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "private": false,
   "author": {
     "name": "LolipopJ",
@@ -26,19 +26,22 @@
       "require": "./dist/gitalk.umd.cjs"
     },
     "./gitalk.css": "./dist/gitalk-light.css",
+    "./light.css": "./dist/gitalk-light.css",
     "./gitalk-light.css": "./dist/gitalk-light.css",
+    "./dark.css": "./dist/gitalk-dark.css",
     "./gitalk-dark.css": "./dist/gitalk-dark.css"
   },
   "types": "./dist/gitalk.d.ts",
   "scripts": {
-    "dev": "vite",
-    "build": "npm run build:ts && npm run build:scss",
+    "dev": "vite --config vite.config.preview.ts",
+    "build": "npm run build:lib && npm run build:preview",
+    "build:lib": "npm run build:ts && npm run build:scss",
     "build:ts": "tsc -b && vite build",
     "build:scss": "vite build --config vite.config.scss.ts",
+    "build:preview": "vite build --config vite.config.preview.ts",
     "lint": "npm run lint:ts && npm run lint:scss",
     "lint:ts": "eslint . --fix",
-    "lint:scss": "stylelint lib/**/*.scss --fix",
-    "preview": "vite preview"
+    "lint:scss": "stylelint **/*.scss --fix"
   },
   "dependencies": {
     "ahooks": "^3.0.0",