gitalk-react 1.0.0-beta.2 → 1.0.0-beta.4

package/README-zh-CN.md

@@ -1,7 +1,12 @@
+基于 Github 议题和 React 的现代评论组件。
+
 [ENGLISH](./README.md) | 简体中文
 
 # Gitalk React
 
+[![NPM][npm-version-image]][npm-version-url]
+[![gzip-size][gzip-size]][gzip-url]
+
 使用 TypeScript, React 和 Vite 重新实现 [Gitalk](https://github.com/gitalk/gitalk) —— 基于 Github 议题的评论组件。
 
 面向现代浏览器开发，专注于减少构建包的体积，提升开发与使用的体验。
@@ -10,10 +15,13 @@
 
 - **不兼容旧版浏览器**：仅保证兼容支持 [ES2020](https://caniuse.com/?feats=mdn-javascript_operators_optional_chaining,mdn-javascript_operators_nullish_coalescing,mdn-javascript_builtins_globalthis,es6-module-dynamic-import,bigint,mdn-javascript_builtins_promise_allsettled,mdn-javascript_builtins_string_matchall,mdn-javascript_statements_export_namespace,mdn-javascript_operators_import_meta) 的现代浏览器。
 - **依赖 React 运行时环境**：`react >= 16.8.0 && react-dom >= 16.8.0`。
+- **部分参数的默认值发生了变化**：迁移到此组件时请留意。
+  - `id`：Gitalk 使用 `location.href` 作为默认值，Gitalk React 使用 `location.host + location.pathname` 作为默认值，避免预期外的查询参数。
+  - `defaultAuthor`：仍然可以使用。Gitalk React 新增了参数项 `defaultUser` 来设置评论的默认用户，保持字段命名与 Github API 一致。
 
 ## 开发中的功能
 
-- [ ] Feature: 支持在 Gitalk 编辑自己发表的评论。
+- [ ] Feature: 支持在 Gitalk React 编辑自己发表的评论。
 - [ ] refactor: 逐渐移除对非必要三方库的依赖。减少构建包的体积。
 - [ ] test: 添加自动化测试流程。提升项目的健壮性。
 - [ ] chore: 部署预览环境。
@@ -28,7 +36,7 @@ npm install gitalk-react
 
 ### 使用
 
-在项目中引入 Gitalk 的样式与组件：
+在项目中引入 Gitalk React 的样式与组件：
 
 ```tsx
 // 引入浅色模式样式
@@ -39,15 +47,15 @@ import 'gitalk-react/gitalk-dark.css'
 import Gitalk from 'gitalk-react'
 ```
 
-Gitalk 依赖于 Github OAuth App 实现登录鉴权，您需要首先[注册一个应用](https://github.com/settings/applications/new)。请注意，您必须将站点域名作为 `Authorization callback URL` 字段的值，例如 `https://yourdomain.com/site` 或开发环境下的 `http://localhost:5432`。
+Gitalk React 依赖于 Github OAuth App 实现登录鉴权，您需要首先[注册一个应用](https://github.com/settings/applications/new)。请注意，您必须将站点域名作为 `Authorization callback URL` 字段的值，例如 `https://yourdomain.com/site` 或开发环境下的 `http://localhost:5432`。
 
-使用 Gitalk 组件，填写必要的配置项：
+使用 Gitalk React 组件，填写必要的配置项：
 
 - `clientId`：Github OAuth App 的 ID。
 - `clientSecret`：Github OAuth App 的 Secret 密钥。
 - `owner`：Github 用户名。
 - `repo`：Github 仓库名。需要是公开的仓库。
-- `admin`：Gitalk 管理员列表，只有列表里的人可以初始化评论议题。可以是 Github 仓库的拥有者和协作者。
+- `admin`：Gitalk React 管理员列表，只有列表里的人可以初始化评论议题。可以是 Github 仓库的拥有者和协作者。
 
 ```tsx
 <Gitalk
@@ -79,21 +87,21 @@ Gitalk 依赖于 Github OAuth App 实现登录鉴权，您需要首先[注册一
 
 ### admin `string[]`
 
-**必填项**。Gitalk 管理员列表。可以是 Github 仓库的拥有者和协作者：拥有对此仓库**写权限**的用户。
+**必填项**。Gitalk React 管理员列表。可以是 Github 仓库的拥有者和协作者：拥有对此仓库**写权限**的用户。
 
-### id `string = location.href`
+### id `string = location.host + location.pathname`
 
 评论议题的唯一标识符，长度不能超过 50。
 
-Gitalk 在创建评论议题时，自动将此参数作为评论议题的标签项，并默认通过它来获取评论议题。
+Gitalk React 在创建评论议题时，自动将此参数作为评论议题的标签项，并默认通过它来获取评论议题。
 
 对于博客等类型的站点，推荐将页面的 `slug` 作为参数。
 
-### number `number = -1`
+### number `number`
 
 评论议题的编号。
 
-如果指定了此参数，那么 Gitalk 将通过它来获取评论议题，而非标识符。
+如果指定了此参数，那么 Gitalk React 将通过它来获取评论议题，而非标识符。
 
 ### labels `string[] = ["Gitalk"]`
 
@@ -109,7 +117,7 @@ Gitalk 在创建评论议题时，自动将此参数作为评论议题的标签
 
 ### language `string = navigator.language`
 
-Gitalk 使用的语言。
+Gitalk React 使用的语言。
 
 可用的语言包括：`"de" | "en" | "es-ES" | "fa" | "fr" | "ja" | "ko" | "pl" | "ru" | "zh-CN" | "zh-TW"`。
 
@@ -121,15 +129,15 @@ Gitalk 使用的语言。
 
 评论排序的方式。`last` 表示按评论创建时间倒叙排列，`first` 表示按评论创建时间正叙排列。
 
-### createIssueManually `boolean = true`
+### createIssueManually `boolean = false`
 
-当评论议题不存在时，Gitalk 将会自动为您创建一个新的评论议题。
+当评论议题不存在时，Gitalk React 将会自动为您创建一个新的评论议题。
 
-如果您希望在管理员登录后，手动点击按钮以创建评论议题，则可以将其设置为 `false`。
+如果您希望以管理员身份登录后，手动点击按钮来创建评论议题，则可以将其设置为 `true`。
 
 ### enableHotKey `boolean = true`
 
-是否启用热键 `cmd + enter` 或 `ctrl + enter` 来创建评论。
+是否启用热键 `cmd + enter` 或 `ctrl + enter` 来发表评论。
 
 ### distractionFreeMode `boolean = false`
 
@@ -154,6 +162,20 @@ Gitalk 使用的语言。
 
 Github OAuth App 鉴权反向代理，支持 CORS。[为什么需要它？](https://github.com/isaacs/github/issues/330)
 
+### defaultUser `{ avatar_url: string; login: string; html_url: string }`
+
+评论用户不存在时，使用的默认用户。
+
+`avatar_url` 为用户头像地址，`login` 为用户名，`html_url` 为点击用户后跳转的页面。默认值：
+
+```json
+{
+  "avatar_url": "//avatars1.githubusercontent.com/u/29697133?s=50",
+  "login": "null",
+  "html_url": ""
+}
+```
+
 ### updateCountCallback `(count: number) => void`
 
 评论数量更新的调用的回调方法。
@@ -164,7 +186,7 @@ Github OAuth App 鉴权反向代理，支持 CORS。[为什么需要它？](http
 
 ## 主题样式
 
-通过设置 CSS 变量，您可以快速地将 Gitalk 的主题颜色修改为适配您站点的样式。
+通过设置 CSS 变量，您可以快速地将 Gitalk React 的主题颜色修改为适配您站点的样式。
 
 当您引入浅色主题 `import 'gitalk-react/gitalk.css'` 时，默认的 CSS 变量如下：
 
@@ -255,3 +277,8 @@ yarn build
 ## 许可证
 
 [MIT](./LICENSE)
+
+[npm-version-image]: https://img.shields.io/npm/v/gitalk-react.svg?style=flat-square
+[npm-version-url]: https://www.npmjs.com/package/gitalk-react
+[gzip-size]: https://img.badgesize.io/https://unpkg.com/gitalk-react/dist/gitalk.umd.cjs?compression=gzip&style=flat-square
+[gzip-url]: https://unpkg.com/gitalk-react/dist/gitalk.umd.cjs

package/README.md

@@ -1,7 +1,12 @@
+Modern comment component based on GitHub Issue and React.
+
 ENGLISH | [简体中文](./README-zh-CN.md)
 
 # Gitalk React
 
+[![NPM][npm-version-image]][npm-version-url]
+[![gzip-size][gzip-size]][gzip-url]
+
 Reimplementing [Gitalk](https://github.com/gitalk/gitalk) with TypeScript, React, and Vite — a comment component based on GitHub issues.
 
 Developed for modern browsers, focusing on reducing build size and enhancing development and usage experience.
@@ -10,10 +15,13 @@ Developed for modern browsers, focusing on reducing build size and enhancing dev
 
 - **Not compatible with older browsers**: Only guarantees compatibility with modern browsers that support [ES2020](https://caniuse.com/?feats=mdn-javascript_operators_optional_chaining,mdn-javascript_operators_nullish_coalescing,mdn-javascript_builtins_globalthis,es6-module-dynamic-import,bigint,mdn-javascript_builtins_promise_allsettled,mdn-javascript_builtins_string_matchall,mdn-javascript_statements_export_namespace,mdn-javascript_operators_import_meta).
 - **Depends on React runtime environment**: `react >= 16.8.0 && react-dom >= 16.8.0`.
+- **Some default values for parameters have changed**: Please pay attention when migrating to this component.
+  - `id`: Gitalk uses `location.href` as the default value, while Gitalk React uses `location.host + location.pathname` as the default value, to avoid unexpected search parameters.
+  - `defaultAuthor`: Can still be used. Gitalk React has added a new parameter `defaultUser` to set the default user for comments, keeping the field naming consistent with the GitHub API.
 
 ## Features in Development
 
-- [ ] Feature: Support editing comments published by the user in Gitalk.
+- [ ] Feature: Support editing comments published by the user in Gitalk React.
 - [ ] refactor: Gradually remove dependencies on non-essential third-party libraries to reduce build size.
 - [ ] test: Add automated testing processes to enhance project robustness.
 - [ ] chore: Deploy preview environment.
@@ -39,15 +47,15 @@ import 'gitalk-react/gitalk-dark.css'
 import Gitalk from 'gitalk-react'
 ```
 
-Gitalk relies on GitHub OAuth App for login authentication; you need to first [register an application](https://github.com/settings/applications/new). Please note that you must set your site domain as the value of the `Authorization callback URL` field, such as `https://yourdomain.com/site` or for development environments `http://localhost:5432`.
+Gitalk React relies on GitHub OAuth App for login authentication; you need to first [register an application](https://github.com/settings/applications/new). Please note that you must set your site domain as the value of the `Authorization callback URL` field, such as `https://yourdomain.com/site` or for development environments `http://localhost:5432`.
 
-When using the Gitalk component, fill in the necessary configuration items:
+When using the Gitalk React component, fill in the necessary configuration items:
 
 - `clientId`: The ID of your GitHub OAuth App.
 - `clientSecret`: The Secret key of your GitHub OAuth App.
 - `owner`: Your GitHub username.
 - `repo`: The name of your GitHub repository. It must be a public repository.
-- `admin`: A list of Gitalk administrators; only those listed can initialize comment topics. This can include the owner and collaborators of the GitHub repository.
+- `admin`: A list of Gitalk React administrators; only those listed can initialize comment topics. This can include the owner and collaborators of the GitHub repository.
 
 ```tsx
 <Gitalk
@@ -79,21 +87,21 @@ When using the Gitalk component, fill in the necessary configuration items:
 
 ### admin `string[]`
 
-**Required**. A list of Gitalk administrators. This can include users who have write access to this repository: owners and collaborators.
+**Required**. A list of Gitalk React administrators. This can include users who have **write access** to this repository: owners and collaborators.
 
-### id `string = location.href`
+### id `string = location.host + location.pathname`
 
 A unique identifier for the comment topic; length cannot exceed 50 characters.
 
-When creating a comment topic, Gitalk automatically uses this parameter as a label item for the comment topic and defaults to fetching comments based on it.
+When creating a comment topic, Gitalk React automatically uses this parameter as a label item for the comment topic and defaults to fetching comments based on it.
 
-For blog-type sites, it is recommended to use the page's slug as this parameter.
+For blog-type sites, it is recommended to use the page's `slug` as this parameter.
 
-### number `number = -1`
+### number `number`
 
 The number of the comment topic.
 
-If this parameter is specified, then Gitalk will fetch comments based on it rather than using the identifier.
+If this parameter is specified, then Gitalk React will fetch comments based on it rather than using the identifier.
 
 ### labels `string[] = ["Gitalk"]`
 
@@ -109,9 +117,9 @@ The content of the comment topic.
 
 ### language `string = navigator.language`
 
-The language used by Gitalk.
+The language used by Gitalk React.
 
-Available languages include: "de" | "en" | "es-ES" | "fa" | "fr" | "ja" | "ko" | "pl" | "ru" | "zh-CN" | "zh-TW".
+Available languages include: `"de" | "en" | "es-ES" | "fa" | "fr" | "ja" | "ko" | "pl" | "ru" | "zh-CN" | "zh-TW"`.
 
 ### perPage `number = 10`
 
@@ -119,17 +127,17 @@ The number of comments loaded per page; cannot exceed 100.
 
 ### pagerDirection `"last" | "first" = "last"`
 
-The sorting method for comments. last indicates descending order by creation time, while first indicates ascending order by creation time.
+The sorting method for comments. `last` indicates descending order by creation time, while `first` indicates ascending order by creation time.
 
-### createIssueManually `boolean = true`
+### createIssueManually `boolean = false`
 
-When a comment topic does not exist, Gitalk will automatically create a new one for you.
+When a comment topic does not exist, Gitalk React will automatically create a new one for you.
 
-If you prefer to create a comment topic manually by clicking a button after logging in as an administrator, set this to false.
+If you prefer to create a comment topic manually by clicking a button after logging in as an administrator, set this to `true`.
 
 ### enableHotKey `boolean = true`
 
-Whether to enable hotkeys like cmd + enter or ctrl + enter to create comments.
+Whether to enable hotkeys like `cmd + enter` or `ctrl + enter` to publish comments.
 
 ### distractionFreeMode `boolean = false`
 
@@ -139,7 +147,7 @@ Whether to enable full-screen overlay effects similar to Facebook's comment box.
 
 Animation effects for the comment list.
 
-Default values (referenced effects can be found here):
+Default values (referenced effects can be found [here](https://github.com/joshwcomeau/react-flip-move/blob/master/documentation/enter_leave_animations.md)):
 
 ```json
 {
@@ -152,7 +160,21 @@ Default values (referenced effects can be found here):
 
 ### proxy `string = "https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token"`
 
-Reverse proxy for authenticating with Github OAuth App that supports CORS. Why is it needed?
+Reverse proxy for authenticating with Github OAuth App that supports CORS. [Why needed?](https://github.com/isaacs/github/issues/330)
+
+### defaultUser `{ avatar_url: string; login: string; html_url: string }`
+
+The default user used when the comment user does not exist.
+
+`avatar_url` is the user's avatar URL, `login` is the username, and `html_url` is the page to which users are redirected when clicked. Default values:
+
+```json
+{
+  "avatar_url": "//avatars1.githubusercontent.com/u/29697133?s=50",
+  "login": "null",
+  "html_url": ""
+}
+```
 
 ### updateCountCallback `(count: number) => void`
 
@@ -164,7 +186,7 @@ Callback method invoked when a comment is successfully created.
 
 ## Theme Styles
 
-You can quickly modify Gitalk's theme colors to match your site's style by setting CSS variables.
+You can quickly modify Gitalk React's theme colors to match your site's style by setting CSS variables.
 
 When you import light theme with `import 'gitalk-react/gitalk.css'`, the default CSS variables are as follows:
 
@@ -255,3 +277,8 @@ yarn build
 ## License
 
 [MIT](./LICENSE)
+
+[npm-version-image]: https://img.shields.io/npm/v/gitalk-react.svg?style=flat-square
+[npm-version-url]: https://www.npmjs.com/package/gitalk-react
+[gzip-size]: https://img.badgesize.io/https://unpkg.com/gitalk-react/dist/gitalk.umd.cjs?compression=gzip&style=flat-square
+[gzip-url]: https://unpkg.com/gitalk-react/dist/gitalk.umd.cjs

package/dist/gitalk.d.ts

@@ -49,14 +49,12 @@ declare interface GitalkProps extends Omit<default_2.HTMLAttributes<HTMLDivEleme
      * The unique id of the page.
      * Length must less than 50.
      *
-     * @default location.href
+     * @default location.host + location.pathname
      */
     id?: string;
     /**
      * The issue ID of the page.
      * If the number attribute is not defined, issue will be located using id.
-     *
-     * @default -1
      */
     number?: number;
     /**
@@ -161,6 +159,12 @@ declare interface GitalkProps extends Omit<default_2.HTMLAttributes<HTMLDivEleme
      * @param count comments number
      */
     updateCountCallback?: (count: number) => void;
+    /**
+     * Callback method invoked when a new issue is successfully created.
+     *
+     * @param issue created issue
+     */
+    onCreateIssue?: (issue: Issue) => void;
     /**
      * Callback method invoked when a new comment is successfully created.
      *
@@ -412,6 +416,8 @@ declare const i18nMap: {
     };
 };
 
+declare type Issue = Endpoints["GET /repos/{owner}/{repo}/issues/{issue_number}"]["response"]["data"];
+
 declare interface IssueCommentsQLResponse {
     repository: {
         issue: {