@bbki.ng/site 5.1.4 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @bbki.ng/site
 
+## 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.0",
   "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.0",
+    "@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[];
@@ -43,7 +44,7 @@ export const ArticlePage = (props: ArticlePageProps) => {
         <article className={articleCls}>{props.children}</article>
         <div className="relative left-[-4px]">
           {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/reaction/oh_reaction.tsx

@@ -8,6 +8,7 @@ import React, {
 import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
 import { BlinkDot } from "@bbki.ng/components";
 import { faces, hearts, ReactionEmojiPair, sadFaces } from "./emojis";
+import { ShareBtn } from "../share/share-btn";
 
 declare global {
   namespace JSX {
@@ -86,12 +87,19 @@ export const OpenHeartReaction = (props: {
   );
 };
 
-export const Reaction = (props: { title: string }) => {
+export const Reaction = (props: { title: string; url: string }) => {
   return (
     <div>
       <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,
+        }}
+      />
     </div>
   );
 };

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

@@ -0,0 +1,26 @@
+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 type={ButtonType.GHOST} onClick={handleShare}>
+      <ShareIcon />
+    </Button>
+  );
+};

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

@@ -0,0 +1,20 @@
+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"
+    className="text-gray-400 hover:text-gray-600 transition-colors ease-in duration-200"
+    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>
+);