@bbki.ng/site 5.2.0 → 5.2.2

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @bbki.ng/site
 
+## 5.2.2
+
+## 5.2.1
+
 ## 5.2.0
 
 ## 5.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.2.0",
+  "version": "5.2.2",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",
@@ -20,7 +20,7 @@
     "sonner": "1.4.0",
     "swr": "^2.2.5",
     "vaul": "1.1.2",
-    "@bbki.ng/components": "5.2.0",
+    "@bbki.ng/components": "5.2.1",
     "@bbki.ng/stylebase": "3.1.0"
   },
   "devDependencies": {

package/src/blog/components/article/index.tsx

@@ -42,7 +42,7 @@ export const ArticlePage = (props: ArticlePageProps) => {
         loading={false}
       >
         <article className={articleCls}>{props.children}</article>
-        <div className="relative left-[-4px]">
+        <div className="relative -left-8">
           {allTags.length ? <Tags tags={allTags} className="mb-32" /> : null}
           <Reaction title={title} url={window.location.href} />
         </div>

package/src/blog/components/comment/comment-btn.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Button, ButtonType } from "@bbki.ng/components";
+import { CommentIcon } from "./comment-icon";
+export const CommentBtn = () => {
+  return (
+    <Button
+      size="small"
+      className="text-gray-400 hover:text-gray-600 transition-colors ease-in duration-200 px-0"
+      type={ButtonType.GHOST}
+      onClick={() => {}}
+    >
+      <CommentIcon />
+    </Button>
+  );
+};

package/src/blog/components/comment/comment-icon.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export const CommentIcon = () => {
+  return (
+    <svg
+      data-testid="geist-icon"
+      stroke-linejoin="round"
+      viewBox="0 0 16 16"
+      height="12"
+      width="12"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.8914 10.4028L2.98327 10.6318C3.22909 11.2445 3.5 12.1045 3.5 13C3.5 13.3588 3.4564 13.7131 3.38773 14.0495C3.69637 13.9446 4.01409 13.8159 4.32918 13.6584C4.87888 13.3835 5.33961 13.0611 5.70994 12.7521L6.22471 12.3226L6.88809 12.4196C7.24851 12.4724 7.61994 12.5 8 12.5C11.7843 12.5 14.5 9.85569 14.5 7C14.5 4.14431 11.7843 1.5 8 1.5C4.21574 1.5 1.5 4.14431 1.5 7C1.5 8.18175 1.94229 9.29322 2.73103 10.2153L2.8914 10.4028ZM2.8135 15.7653C1.76096 16 1 16 1 16C1 16 1.43322 15.3097 1.72937 14.4367C1.88317 13.9834 2 13.4808 2 13C2 12.3826 1.80733 11.7292 1.59114 11.1903C0.591845 10.0221 0 8.57152 0 7C0 3.13401 3.58172 0 8 0C12.4183 0 16 3.13401 16 7C16 10.866 12.4183 14 8 14C7.54721 14 7.10321 13.9671 6.67094 13.9038C6.22579 14.2753 5.66881 14.6656 5 15C4.23366 15.3832 3.46733 15.6195 2.8135 15.7653Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};

package/src/blog/components/comment/index.tsx

@@ -1,70 +0,0 @@
-import React, { useState } from "react";
-import classnames from "classnames";
-import { ReactCusdis } from "react-cusdis";
-import { BgColors } from "@/types/color";
-import { CUSDIS_ATTRS, CUSDIS_OFFICIAL_SITE_ADDRESS } from "@/constants/cusdis";
-import { useCusidsEvent } from "@/components/comment/use_cusdis_event";
-import { CornerPromptBox } from "@/components";
-import { Link, LinkColor } from "@bbki.ng/components";
-
-type CommentProps = {
-  title: string;
-};
-
-export const Comment = (props: CommentProps) => {
-  const path = location.href;
-  const cusdisAttrs = Object.assign({}, CUSDIS_ATTRS, {
-    pageTitle: props.title,
-    pageUrl: path,
-    pageId: path,
-  });
-
-  const [ready, setReady] = useState(false);
-  const [showBox, setShowBox] = useState(false);
-
-  useCusidsEvent({
-    handleCommentLoaded: () => {
-      setReady(true);
-    },
-    handleCommentSent: () => {
-      setShowBox(true);
-    },
-  });
-
-  return (
-    <div
-      className={classnames(
-        "overflow-hidden",
-        "transition-all",
-        BgColors.WHITE_GRAY,
-        {
-          "max-h-0": !ready,
-          "p-5": ready,
-          "mb-8": ready,
-        }
-      )}
-    >
-      <ReactCusdis attrs={cusdisAttrs} />
-      <CornerPromptBox
-        autoCancelAfter={3000}
-        content="评论已发送，等待 18+ 内容审核。"
-        showBox={showBox}
-        cancelLabel="关闭"
-        onCancel={() => {
-          console.log("cancel");
-          setShowBox(false);
-        }}
-      />
-      <div className="text-center">
-        <Link
-          to={CUSDIS_OFFICIAL_SITE_ADDRESS}
-          external
-          color={LinkColor.GRAY}
-          className="px-1"
-        >
-          powered by discus
-        </Link>
-      </div>
-    </div>
-  );
-};

package/src/blog/components/index.tsx

@@ -25,8 +25,6 @@ export { CornerPromptBox } from "./corner_prompt_box";
 
 export { Tags } from "./tags";
 
-export { Comment } from "./comment";
-
 export { MySuspense } from "./my_suspense";
 
 export const CenterLinkList = (props: any) => {

package/src/blog/components/reaction/emojis.tsx

@@ -15,7 +15,6 @@ const heart = (
     height={HEART_SIZE}
     width={HEART_SIZE}
     stroke-linejoin="round"
-    className="text-gray-400 hover:text-red-400 transition-colors ease-in duration-200"
     viewBox="0 0 16 16"
   >
     <path
@@ -49,7 +48,6 @@ const happyFace = (
     stroke-linejoin="round"
     height={HEART_SIZE}
     width={HEART_SIZE}
-    className="text-gray-400 hover:text-gray-600 transition-colors ease-in duration-200"
     viewBox="0 0 16 16"
   >
     <path
@@ -92,7 +90,6 @@ const unhappyFace = (
     viewBox="0 0 16 16"
     height={HEART_SIZE}
     width={HEART_SIZE}
-    className="text-gray-400 hover:text-gray-600 transition-colors ease-in duration-200"
   >
     <path
       fill-rule="evenodd"

package/src/blog/components/reaction/oh_reaction.tsx

@@ -6,9 +6,10 @@ import React, {
   useState,
 } from "react";
 import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
-import { BlinkDot } from "@bbki.ng/components";
+import { BlinkDot, Button, ButtonType } from "@bbki.ng/components";
 import { faces, hearts, ReactionEmojiPair, sadFaces } from "./emojis";
 import { ShareBtn } from "../share/share-btn";
+import { CommentBtn } from "../comment/comment-btn";
 
 declare global {
   namespace JSX {
@@ -71,25 +72,25 @@ export const OpenHeartReaction = (props: {
 
   return (
     <open-heart
-      style={{
-        display: "inline-flex",
-        padding: 4,
-        marginRight: "4px",
-        position: "relative",
-      }}
       ref={ohRef}
       href={`https://oh.bbki.ng/?id=${title}`}
       emoji={emojiPair.val}
-      onClick={handleHeartClick}
     >
-      {sent || pressed() ? emojiPair.on : emojiPair.off}
+      <Button
+        size="small"
+        type={ButtonType.GHOST}
+        className="text-gray-400 hover:text-gray-600 transition-colors ease-in duration-200"
+        onClick={handleHeartClick}
+      >
+        {sent || pressed() ? emojiPair.on : emojiPair.off}
+      </Button>
     </open-heart>
   );
 };
 
 export const Reaction = (props: { title: string; url: string }) => {
   return (
-    <div>
+    <div className="flex items-center">
       <OpenHeartReaction title={props.title} emojiPair={hearts} />
       <OpenHeartReaction title={props.title} emojiPair={faces} />
       <OpenHeartReaction title={props.title} emojiPair={sadFaces} />
@@ -100,6 +101,8 @@ export const Reaction = (props: { title: string; url: string }) => {
           url: props.url,
         }}
       />
+
+      {/*<CommentBtn />*/}
     </div>
   );
 };

package/src/blog/components/share/share-btn.tsx

@@ -19,7 +19,12 @@ export const ShareBtn = ({ shareInfo }: { shareInfo: ShareData }) => {
   };
 
   return (
-    <Button type={ButtonType.GHOST} onClick={handleShare}>
+    <Button
+      size="small"
+      className="text-gray-400 hover:text-gray-600 transition-colors ease-in duration-200"
+      type={ButtonType.GHOST}
+      onClick={handleShare}
+    >
       <ShareIcon />
     </Button>
   );

package/src/blog/components/share/share-icon.tsx

@@ -7,7 +7,6 @@ export const ShareIcon = () => (
     stroke-linejoin="round"
     // style="color:currentColor"
     viewBox="0 0 16 16"
-    className="text-gray-400 hover:text-gray-600 transition-colors ease-in duration-200"
     width="12"
   >
     <path

package/src/blog/components/comment/use_cusdis_event.ts

@@ -1,37 +0,0 @@
-import { useEffect } from "react";
-import { cusdisEvent } from "../../types/cusdis";
-
-type cusdisEventHandlers = {
-  handleCommentLoaded?: () => void;
-  handleCommentSent?: () => void;
-};
-
-const noop = () => null;
-
-export const useCusidsEvent = (handlers: cusdisEventHandlers) => {
-  const { handleCommentLoaded = noop, handleCommentSent = noop } = handlers;
-  const onMessage = (e: MessageEvent) => {
-    try {
-      const msg = JSON.parse(e.data);
-      if (msg.from === "cusdis") {
-        switch (msg.event) {
-          case cusdisEvent.COMMENTS_LOADED:
-            handleCommentLoaded();
-            break;
-          case cusdisEvent.COMMENT_SENT:
-            handleCommentSent();
-            break;
-          default:
-            return;
-        }
-      }
-    } catch (e) {}
-  };
-
-  useEffect(() => {
-    window.addEventListener("message", onMessage);
-    return () => {
-      window.removeEventListener("message", onMessage);
-    };
-  }, []);
-};