gitalk-react 1.0.0-beta.1

package/lib/assets/arrow-down.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="1619"><path d="M511.872 676.8c-0.003 0-0.006 0-0.008 0-9.137 0-17.379-3.829-23.21-9.97l-251.277-265.614c-5.415-5.72-8.743-13.464-8.744-21.984 0-17.678 14.33-32.008 32.008-32.008 9.157 0 17.416 3.845 23.25 10.009l228.045 241.103 228.224-241.088c5.855-6.165 14.113-10.001 23.266-10.001 8.516 0 16.256 3.32 21.998 8.736 12.784 12.145 13.36 32.434 1.264 45.233l-251.52 265.6c-5.844 6.155-14.086 9.984-23.223 9.984-0.025 0-0.051 0-0.076 0z" p-id="1620"></path></svg>

package/lib/assets/edit.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+  <path d="M785.333333 85.333333C774.666667 85.333333 763.2 90.133333 754.666667 98.666667L682.666667 170.666667 853.333333 341.333333 925.333333 269.333333C942.4 252.266667 942.4 222.133333 925.333333 209.333333L814.666667 98.666667C806.133333 90.133333 796 85.333333 785.333333 85.333333zM640 217.333333 85.333333 768 85.333333 938.666667 256 938.666667 806.666667 384 640 217.333333z"></path>
+</svg>

package/lib/assets/github.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M64 524C64 719.602 189.356 885.926 364.113 947.017 387.65799 953 384 936.115 384 924.767L384 847.107C248.118 863.007 242.674 773.052 233.5 758.001 215 726.501 171.5 718.501 184.5 703.501 215.5 687.501 247 707.501 283.5 761.501 309.956 800.642 361.366 794.075 387.658 787.497 393.403 763.997 405.637 743.042 422.353 726.638 281.774 701.609 223 615.67 223 513.5 223 464.053 239.322 418.406 271.465 381.627 251.142 320.928 273.421 269.19 276.337 261.415 334.458 256.131 394.888 302.993 399.549 306.685 432.663 297.835 470.341 293 512.5 293 554.924 293 592.81 297.896 626.075 306.853 637.426 298.219 693.46 258.054 747.5 262.966 750.382 270.652 772.185 321.292 753.058 381.083 785.516 417.956 802 463.809 802 513.5 802 615.874 742.99 701.953 601.803 726.786 625.381 750.003 640 782.295 640 818.008L640 930.653C640.752 939.626 640 948.664978 655.086 948.665 832.344 888.962 960 721.389 960 524 960 276.576 759.424 76 512 76 264.577 76 64 276.576 64 524Z"></path>
+</svg>

package/lib/assets/heart-filled.svg

@@ -0,0 +1,3 @@
+<svg t="1512463363724" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path d="M527.061333 166.528A277.333333 277.333333 0 0 1 1000.618667 362.666667a277.333333 277.333333 0 0 1-81.28 196.138666l-377.173334 377.173334a42.666667 42.666667 0 0 1-60.330666 0l-377.173334-377.173334a277.376 277.376 0 0 1 392.277334-392.277333l15.061333 15.061333 15.061333-15.061333z"></path>
+</svg>

package/lib/assets/heart.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path d="M527.061333 166.528A277.333333 277.333333 0 0 1 1000.618667 362.666667a277.333333 277.333333 0 0 1-81.28 196.138666l-377.173334 377.173334a42.666667 42.666667 0 0 1-60.330666 0l-377.173334-377.173334a277.376 277.376 0 0 1 392.277334-392.277333l15.061333 15.061333 15.061333-15.061333z m286.72 377.173333l45.226667-45.226666a192 192 0 0 0-135.808-327.893334 192 192 0 0 0-135.808 56.32l-45.226667 45.226667a42.666667 42.666667 0 0 1-60.330666 0l-45.226667-45.226667a192.042667 192.042667 0 0 0-271.616 271.573334L512 845.482667l301.781333-301.781334z"></path>
+</svg>

package/lib/assets/reply.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1332 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M529.066665 273.066666 529.066665 0 51.2 477.866666 529.066665 955.733335 529.066665 675.84C870.4 675.84 1109.333335 785.066665 1280 1024 1211.733335 682.666665 1006.933335 341.333334 529.066665 273.066666"></path>
+</svg>

package/lib/assets/tip.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M512 366.949535c-16.065554 0-29.982212 13.405016-29.982212 29.879884l0 359.070251c0 16.167882 13.405016 29.879884 29.982212 29.879884 15.963226 0 29.879884-13.405016 29.879884-29.879884L541.879884 396.829419C541.879884 380.763865 528.474868 366.949535 512 366.949535L512 366.949535z"
+    p-id="3083"></path>
+  <path d="M482.017788 287.645048c0-7.776956 3.274508-15.553912 8.80024-21.181973 5.525732-5.525732 13.302688-8.80024 21.181973-8.80024 7.776956 0 15.553912 3.274508 21.079644 8.80024 5.525732 5.62806 8.80024 13.405016 8.80024 21.181973 0 7.776956-3.274508 15.656241-8.80024 21.181973-5.525732 5.525732-13.405016 8.697911-21.079644 8.697911-7.879285 0-15.656241-3.274508-21.181973-8.697911C485.292295 303.301289 482.017788 295.524333 482.017788 287.645048L482.017788 287.645048z"
+    p-id="3084"></path>
+  <path d="M512 946.844409c-239.8577 0-434.895573-195.037873-434.895573-434.895573 0-239.8577 195.037873-434.895573 434.895573-434.895573 239.755371 0 434.895573 195.037873 434.895573 434.895573C946.895573 751.806535 751.755371 946.844409 512 946.844409zM512 126.17088c-212.740682 0-385.880284 173.037274-385.880284 385.777955 0 212.740682 173.037274 385.777955 385.880284 385.777955 212.740682 0 385.777955-173.037274 385.777955-385.777955C897.777955 299.208154 724.740682 126.17088 512 126.17088z"
+    p-id="3085"></path>
+</svg>

package/lib/components/action.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+export interface ActionProps
+  extends React.DetailedHTMLProps<
+    React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  > {
+  text: string;
+}
+
+const Action: React.FC<ActionProps> = ({
+  text,
+  className = "",
+  ...restProps
+}) => (
+  <a className={`gt-action ${className}`} {...restProps}>
+    <span className="gt-action-text">{text}</span>
+  </a>
+);
+
+export default Action;

package/lib/components/avatar.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+
+import { DEFAULT_AVATAR } from "../constants";
+
+export interface AvatarProps
+  extends React.DetailedHTMLProps<
+    React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  > {
+  src?: string;
+  alt?: string;
+  defaultSrc?: string;
+}
+
+const Avatar: React.FC<AvatarProps> = ({
+  src,
+  alt,
+  defaultSrc = DEFAULT_AVATAR,
+  className = "",
+  ...restProps
+}) => {
+  const [imgSrc, setImgSrc] = useState<string>(src ?? defaultSrc);
+
+  return (
+    <a
+      className={`gt-avatar ${className}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      {...restProps}
+    >
+      <img
+        src={imgSrc}
+        alt={`@${alt}`}
+        onError={() => {
+          setImgSrc(defaultSrc);
+        }}
+      />
+    </a>
+  );
+};
+
+export default Avatar;

package/lib/components/button.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+export interface ButtonProps
+  extends React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
+  text: string;
+  isLoading?: boolean;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  text,
+  isLoading = false,
+  className = "",
+  style,
+  disabled: propsDisabled,
+  ...restProps
+}) => {
+  const disabled = propsDisabled !== undefined ? propsDisabled : isLoading;
+
+  return (
+    <button
+      className={`gt-btn ${className}`}
+      style={{ cursor: disabled ? "not-allowed" : undefined, ...style }}
+      disabled={disabled}
+      {...restProps}
+    >
+      <span className="gt-btn-text">{text}</span>
+      {isLoading && <span className="gt-btn-loading gt-spinner" />}
+    </button>
+  );
+};
+
+export default Button;

package/lib/components/comment.tsx

@@ -0,0 +1,153 @@
+import { formatDistanceToNow, parseISO } from "date-fns";
+import React, { useContext, useEffect, useMemo, useRef } from "react";
+
+import Edit from "../assets/edit.svg?raw";
+import Heart from "../assets/heart.svg?raw";
+import HeartFilled from "../assets/heart-filled.svg?raw";
+import Reply from "../assets/reply.svg?raw";
+import I18nContext from "../contexts/I18nContext";
+import type { Comment as CommentType } from "../interfaces";
+import Avatar from "./avatar";
+import Svg from "./svg";
+
+export interface CommentProps
+  extends React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > {
+  comment: CommentType;
+  isAuthor: boolean;
+  isAdmin: boolean;
+  onReply: (comment: CommentType) => void;
+  onLike: (like: boolean, comment: CommentType) => void;
+  likeLoading: boolean;
+}
+
+const Comment: React.FC<CommentProps> = ({
+  comment,
+  isAuthor,
+  isAdmin,
+  onReply,
+  onLike,
+  likeLoading,
+  className = "",
+  ...restProps
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const { language, polyglot, dateFnsLocaleMap } = useContext(I18nContext);
+
+  const { body_html, created_at, user, reactionsHeart, html_url } = comment;
+  const commentHtmlUrl = html_url.includes("github.com")
+    ? html_url
+    : `https://github.com/${html_url}`;
+
+  const reactionsHeartCountText = useMemo(() => {
+    const totalCount = reactionsHeart?.totalCount ?? 0;
+    return totalCount > 100 ? "100+" : String(totalCount);
+  }, [reactionsHeart]);
+
+  useEffect(() => {
+    const commentElement = ref.current;
+
+    if (commentElement) {
+      const emailResponse = commentElement.querySelector(
+        ".email-hidden-toggle>a",
+      );
+
+      if (emailResponse) {
+        const onEmailClick = (e: Event) => {
+          e.preventDefault();
+          commentElement
+            ?.querySelector(".email-hidden-reply")
+            ?.classList.toggle("expanded");
+        };
+        emailResponse.addEventListener("click", onEmailClick, true);
+
+        return () =>
+          emailResponse.removeEventListener("click", onEmailClick, true);
+      }
+    }
+
+    return () => {};
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      className={`gt-comment ${isAdmin ? "gt-comment-admin" : ""} ${className}`}
+      {...restProps}
+    >
+      <Avatar
+        className="gt-comment-avatar"
+        src={user?.avatar_url}
+        alt={user?.login}
+        href={user?.html_url}
+      />
+
+      <div className="gt-comment-content">
+        <div className="gt-comment-header">
+          <a
+            className="gt-comment-username"
+            href={user?.html_url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {user?.login}
+          </a>
+          <div className="gt-comment-date" title={created_at}>
+            {polyglot.t("commented") +
+              " " +
+              formatDistanceToNow(parseISO(created_at), {
+                addSuffix: true,
+                locale: dateFnsLocaleMap[language],
+              })}
+          </div>
+          <div className="gt-comment-actions">
+            <a
+              className="gt-comment-like"
+              title="Like"
+              onClick={() => {
+                if (reactionsHeart && !likeLoading)
+                  onLike(!reactionsHeart.viewerHasReacted, comment);
+              }}
+            >
+              <Svg
+                className="gt-ico-heart"
+                icon={reactionsHeart?.viewerHasReacted ? HeartFilled : Heart}
+                text={reactionsHeartCountText}
+              />
+            </a>
+            {isAuthor && (
+              // TODO: 支持在 Gitalk 里编辑
+              <a
+                href={commentHtmlUrl}
+                className="gt-comment-edit"
+                title="Edit"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Svg className="gt-ico-edit" icon={Edit} />
+              </a>
+            )}
+            <a
+              className="gt-comment-reply"
+              title="Reply"
+              onClick={() => onReply(comment)}
+            >
+              <Svg className="gt-ico-reply" icon={Reply} />
+            </a>
+          </div>
+        </div>
+        <div
+          className="gt-comment-body markdown-body"
+          dangerouslySetInnerHTML={{
+            __html: body_html ?? "",
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Comment;

package/lib/components/svg.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+export interface SVGProps
+  extends React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLSpanElement>,
+    HTMLSpanElement
+  > {
+  icon: string;
+  text?: string;
+}
+
+const Svg: React.FC<SVGProps> = ({
+  icon,
+  text,
+  className = "",
+  ...restProps
+}) => (
+  <span className={`gt-ico ${className}`} {...restProps}>
+    <span
+      className="gt-svg"
+      dangerouslySetInnerHTML={{
+        __html: icon,
+      }}
+    />
+    {text && <span className="gt-ico-text">{text}</span>}
+  </span>
+);
+
+export default Svg;

package/lib/constants/index.ts

@@ -0,0 +1,43 @@
+import {
+  de,
+  enUS,
+  es,
+  faIR,
+  fr,
+  ja,
+  ko,
+  type Locale,
+  pl,
+  ru,
+  zhCN,
+  zhTW,
+} from "date-fns/locale";
+
+import packageJson from "../../package.json";
+import { type Lang } from "../i18n";
+
+export const VERSION = packageJson.version;
+export const HOMEPAGE = packageJson.homepage;
+
+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 ACCESS_TOKEN_KEY = "GT_ACCESS_TOKEN";
+export const STORED_COMMENTS_KEY = "GT_COMMENT";
+
+export const DATE_FNS_LOCALE_MAP: Record<Lang, Locale> = {
+  zh: zhCN,
+  "zh-CN": zhCN,
+  "zh-TW": zhTW,
+  en: enUS,
+  "es-ES": es,
+  fr,
+  ru,
+  de,
+  pl,
+  ko,
+  fa: faIR,
+  ja,
+};

package/lib/contexts/I18nContext.ts

@@ -0,0 +1,18 @@
+import { type Locale } from "date-fns";
+import type Polyglot from "node-polyglot";
+import { createContext } from "react";
+
+import { DATE_FNS_LOCALE_MAP, DEFAULT_LANG } from "../constants";
+import i18n, { type Lang } from "../i18n";
+
+export const I18nContext = createContext<{
+  language: Lang;
+  polyglot: Polyglot;
+  dateFnsLocaleMap: Record<string, Locale>;
+}>({
+  language: DEFAULT_LANG,
+  polyglot: i18n(DEFAULT_LANG),
+  dateFnsLocaleMap: DATE_FNS_LOCALE_MAP,
+});
+
+export default I18nContext;