@bbki.ng/site 5.1.4 → 5.2.1

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.1.4",
+  "version": "5.2.1",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",
@@ -20,8 +20,8 @@
     "sonner": "1.4.0",
     "swr": "^2.2.5",
     "vaul": "1.1.2",
-    "@bbki.ng/components": "5.1.3",
-    "@bbki.ng/stylebase": "3.0.2"
+    "@bbki.ng/components": "5.2.1",
+    "@bbki.ng/stylebase": "3.1.0"
   },
   "devDependencies": {
     "@mdx-js/mdx": "2.0.0-next.9",
@@ -59,7 +59,7 @@
     "vite-plugin-mdx": "^3.5.8",
     "vite-plugin-pwa": "0.19",
     "workbox-window": "^6.3.0",
-    "@bbki.ng/stylebase": "3.0.2"
+    "@bbki.ng/stylebase": "3.1.0"
   },
   "author": "bbbottle",
   "license": "MIT",

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

@@ -4,6 +4,7 @@ import { ROUTES } from "@/constants";
 import classNames from "classnames";
 import { Reaction } from "../reaction/oh_reaction";
 import { useNavigate } from "react-router-dom";
+import { ShareBtn } from "../share/share-btn";
 
 export type ArticlePageProps = {
   tags?: string[];
@@ -41,9 +42,9 @@ 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} />
+          <Reaction title={title} url={window.location.href} />
         </div>
       </Article>
       <div className="">

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,8 +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 {
@@ -70,28 +72,37 @@ 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 }) => {
+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} />
+
+      <ShareBtn
+        shareInfo={{
+          title: props.title,
+          url: props.url,
+        }}
+      />
+
+      {/*<CommentBtn />*/}
     </div>
   );
 };

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { Button, ButtonType } from "@bbki.ng/components";
+import { ShareIcon } from "./share-icon";
+import { toast } from "sonner";
+
+export const ShareBtn = ({ shareInfo }: { shareInfo: ShareData }) => {
+  const handleShare = async () => {
+    try {
+      await navigator.share(shareInfo);
+      toast.success("已分享");
+    } catch (error) {
+      const isAbortError = (error as Error).name === "AbortError";
+      if (isAbortError) {
+        return;
+      }
+
+      toast.error((error as Error).message);
+    }
+  };
+
+  return (
+    <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

@@ -0,0 +1,19 @@
+import React from "react";
+
+export const ShareIcon = () => (
+  <svg
+    data-testid="geist-icon"
+    height="12"
+    stroke-linejoin="round"
+    // style="color:currentColor"
+    viewBox="0 0 16 16"
+    width="12"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.29289 1.39644C7.68342 1.00592 8.31658 1.00592 8.70711 1.39644L11.7803 4.46966L12.3107 4.99999L11.25 6.06065L10.7197 5.53032L8.75 3.56065V10.25V11H7.25V10.25V3.56065L5.28033 5.53032L4.75 6.06065L3.68934 4.99999L4.21967 4.46966L7.29289 1.39644ZM13.5 9.24999V13.5H2.5V9.24999V8.49999H1V9.24999V14C1 14.5523 1.44771 15 2 15H14C14.5523 15 15 14.5523 15 14V9.24999V8.49999H13.5V9.24999Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+);

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);
-    };
-  }, []);
-};