fix: share btn

kawamataryo · Jan 16, 2025 · b97f6ee · b97f6ee
1 parent 67281b0
commit b97f6ee
Show file tree

Hide file tree

Showing 13 changed files with 163 additions and 46 deletions.
diff --git a/locales/de/messages.json b/locales/de/messages.json
@@ -277,5 +277,18 @@
   "findSimilarBlueskyUsers": {
     "message": "🦋 Ähnliche Bluesky-Benutzer finden",
     "description": "Text for the find similar Bluesky users button"
+  },
+  "share_text": {
+    "message": "Ich habe $number$ Bluesky-Benutzer aus meinem sozialen Netzwerk mit Sky Follower Bridge gefunden.✨\n\nSchau es dir an: https://share.sky-follower-bridge.dev?q=$number$\n\n#skyfollowerbridge",
+    "description": "Text for sharing the app",
+    "placeholders": {
+      "number": {
+        "content": "$1"
+      }
+    }
+  },
+  "share_on_bluesky": {
+    "message": "Auf Bluesky teilen",
+    "description": "Text for the share on Bluesky button"
   }
 }
diff --git a/locales/en/messages.json b/locales/en/messages.json
@@ -277,5 +277,18 @@
   "findSimilarBlueskyUsers": {
     "message": "🦋 Find Similar Bluesky Users",
     "description": "Text for the find similar Bluesky users button"
+  },
+  "share_text": {
+    "message": "I've discovered $number$ Bluesky users from my social network using the Sky Follower Bridge.✨\n\nCheck it out: https://share.sky-follower-bridge.dev?q=$number$\n\n#skyfollowerbridge",
+    "description": "Text for sharing the app",
+    "placeholders": {
+      "number": {
+        "content": "$1"
+      }
+    }
+  },
+  "share_on_bluesky": {
+    "message": "Share on Bluesky",
+    "description": "Text for the share on Bluesky button"
   }
 }
diff --git a/locales/es/messages.json b/locales/es/messages.json
@@ -277,5 +277,18 @@
   "findSimilarBlueskyUsers": {
     "message": "🦋 Encontrar usuarios similares en Bluesky",
     "description": "Text for the find similar Bluesky users button"
+  },
+  "share_text": {
+    "message": "He descubierto $number$ usuarios de Bluesky de mi red social usando Sky Follower Bridge.✨\n\nÉchale un vistazo: https://share.sky-follower-bridge.dev?q=$number$\n\n#skyfollowerbridge",
+    "description": "Text for sharing the app",
+    "placeholders": {
+      "number": {
+        "content": "$1"
+      }
+    }
+  },
+  "share_on_bluesky": {
+    "message": "Compartir en Bluesky",
+    "description": "Text for the share on Bluesky button"
   }
 }
diff --git a/locales/fr/messages.json b/locales/fr/messages.json
@@ -277,5 +277,18 @@
   "findSimilarBlueskyUsers": {
     "message": "🦋 Trouver des utilisateurs Bluesky similaires",
     "description": "Text for the find similar Bluesky users button"
+  },
+  "share_text": {
+    "message": "J'ai découvert $number$ utilisateurs Bluesky de mon réseau social en utilisant Sky Follower Bridge.✨\n\nDécouvrez-le : https://share.sky-follower-bridge.dev?q=$number$\n\n#skyfollowerbridge",
+    "description": "Text for sharing the app",
+    "placeholders": {
+      "number": {
+        "content": "$1"
+      }
+    }
+  },
+  "share_on_bluesky": {
+    "message": "Partager sur Bluesky",
+    "description": "Text for the share on Bluesky button"
   }
 }
diff --git a/locales/it/messages.json b/locales/it/messages.json
@@ -277,5 +277,18 @@
   "findSimilarBlueskyUsers": {
     "message": "🦋 Trova utenti Bluesky simili",
     "description": "Text for the find similar Bluesky users button"
+  },
+  "share_text": {
+    "message": "Ho scoperto $number$ utenti Bluesky dalla mia rete sociale usando Sky Follower Bridge.✨\n\nDai un'occhiata: https://share.sky-follower-bridge.dev?q=$number$\n\n#skyfollowerbridge",
+    "description": "Text for sharing the app",
+    "placeholders": {
+      "number": {
+        "content": "$1"
+      }
+    }
+  },
+  "share_on_bluesky": {
+    "message": "Condividi su Bluesky",
+    "description": "Text for the share on Bluesky button"
   }
 }
diff --git a/locales/ja/messages.json b/locales/ja/messages.json
@@ -277,5 +277,18 @@
   "findSimilarBlueskyUsers": {
     "message": "🦋 類似のBlueskyユーザーを探す",
     "description": "Text for the find similar Bluesky users button"
+  },
+  "share_text": {
+    "message": "Sky Follower Bridgeを使って、ソーシャルネットワークから$number$人のBlueskyユーザーを見つけました✨\n\nチェックしてみてください: https://share.sky-follower-bridge.dev?q=$number$\n\n#skyfollowerbridge",
+    "description": "Text for sharing the app",
+    "placeholders": {
+      "number": {
+        "content": "$1"
+      }
+    }
+  },
+  "share_on_bluesky": {
+    "message": "Blueskyでシェア",
+    "description": "Text for the share on Bluesky button"
   }
 }
diff --git a/locales/ko/messages.json b/locales/ko/messages.json
@@ -277,5 +277,18 @@
   "findSimilarBlueskyUsers": {
     "message": "🦋 유사한 Bluesky 사용자 찾기",
     "description": "Text for the find similar Bluesky users button"
+  },
+  "share_text": {
+    "message": "Sky Follower Bridge를 사용하여 소셜 네트워크에서 $number$명의 Bluesky 사용자를 발견했습니다✨\n\n확인해보세요: https://share.sky-follower-bridge.dev?q=$number$\n\n#skyfollowerbridge",
+    "description": "Text for sharing the app",
+    "placeholders": {
+      "number": {
+        "content": "$1"
+      }
+    }
+  },
+  "share_on_bluesky": {
+    "message": "Bluesky에서 공유",
+    "description": "Text for the share on Bluesky button"
   }
 }
diff --git a/locales/pt_BR/messages.json b/locales/pt_BR/messages.json
@@ -277,5 +277,18 @@
   "findSimilarBlueskyUsers": {
     "message": "🦋 Encontrar usuários similares no Bluesky",
     "description": "Text for the find similar Bluesky users button"
+  },
+  "share_text": {
+    "message": "Descobri $number$ usuários do Bluesky da minha rede social usando o Sky Follower Bridge.✨\n\nConfira: https://share.sky-follower-bridge.dev?q=$number$\n\n#skyfollowerbridge",
+    "description": "Text for sharing the app",
+    "placeholders": {
+      "number": {
+        "content": "$1"
+      }
+    }
+  },
+  "share_on_bluesky": {
+    "message": "Compartilhar no Bluesky",
+    "description": "Text for the share on Bluesky button"
   }
 }
diff --git a/locales/pt_PT/messages.json b/locales/pt_PT/messages.json
@@ -277,5 +277,18 @@
   "findSimilarBlueskyUsers": {
     "message": "🦋 Encontrar utilizadores similares no Bluesky",
     "description": "Text for the find similar Bluesky users button"
+  },
+  "share_text": {
+    "message": "Descobri $number$ utilizadores do Bluesky da minha rede social usando o Sky Follower Bridge.✨\n\nConfira: https://share.sky-follower-bridge.dev?q=$number$\n\n#skyfollowerbridge",
+    "description": "Text for sharing the app",
+    "placeholders": {
+      "number": {
+        "content": "$1"
+      }
+    }
+  },
+  "share_on_bluesky": {
+    "message": "Partilhar no Bluesky",
+    "description": "Text for the share on Bluesky button"
   }
 }
diff --git a/locales/zh_CN/messages.json b/locales/zh_CN/messages.json
@@ -277,5 +277,18 @@
   "findSimilarBlueskyUsers": {
     "message": "🦋 查找相似的Bluesky用户",
     "description": "Text for the find similar Bluesky users button"
+  },
+  "share_text": {
+    "message": "使用Sky Follower Bridge，我在社交网络中发现了$number$位Bluesky用户✨\n\n快来看看：https://share.sky-follower-bridge.dev?q=$number$\n\n#skyfollowerbridge",
+    "description": "Text for sharing the app",
+    "placeholders": {
+      "number": {
+        "content": "$1"
+      }
+    }
+  },
+  "share_on_bluesky": {
+    "message": "在Bluesky上分享",
+    "description": "Text for the share on Bluesky button"
   }
 }
diff --git a/src/components/ShareButton.tsx b/src/components/ShareButton.tsx
@@ -0,0 +1,21 @@
+import BlueskyIconSvg from "./Icons/BlueskyIconSvg";
+
+type Props = {
+  shareText: string;
+};
+
+export const ShareButton = ({ shareText }: Props) => {
+  return (
+    <div className="share-button-wrapper inline-block">
+      <a
+        className="btn btn-sm btn-wide share-button"
+        href={`https://bsky.app/intent/compose?text=${encodeURIComponent(shareText)}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <BlueskyIconSvg className="w-5 h-5" />
+        {chrome.i18n.getMessage("share_on_bluesky")}
+      </a>
+    </div>
+  );
+};
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -8,7 +8,7 @@ import {
 import { getMessageWithLink } from "~lib/utils";
 import type { MatchType, MatchTypeFilterValue } from "~types";
 import AsyncButton from "./AsyncButton";
-import BlueskyIconSvg from "./Icons/BlueskyIconSvg";
+import { ShareButton } from "./ShareButton";
 import SocialLinks from "./SocialLinks";
 
 type Props = {
@@ -32,11 +32,9 @@ const Sidebar = ({
   followAll,
   blockAll,
 }: Props) => {
-  const shareText = encodeURIComponent(`I've discovered ${detectedCount} Bluesky users from my social network using the Sky Follower Bridge.✨
-
-Check it out: https://share.sky-follower-bridge.dev?q=${detectedCount}
-
-#skyfollowerbridge`);
+  const shareText = chrome.i18n.getMessage("share_text", [
+    detectedCount.toString(),
+  ]);
 
   return (
     <aside className="bg-base-300 w-80 min-h-screen p-4 border-r border-base-300 flex flex-col">
@@ -103,16 +101,8 @@ Check it out: https://share.sky-follower-bridge.dev?q=${detectedCount}
             </div>
           </div>
         </div>
-        <div>
-          <a
-            className="btn btn-sm btn-wide btn-ghost btn-outline share-button"
-            href={`https://bsky.app/intent/compose?text=${shareText}`}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <BlueskyIconSvg className="w-5 h-5" />
-            Share on Blueskv{" "}
-          </a>
+        <div className="flex justify-center mt-4">
+          <ShareButton shareText={shareText} />
         </div>
         <div className="divider" />
         <div className="flex items-center gap-2 mb-2">
@@ -169,7 +159,7 @@ Check it out: https://share.sky-follower-bridge.dev?q=${detectedCount}
           </svg>
           <p className="text-xl font-bold">Action</p>
         </div>
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2 items-center">
           {match(actionMode)
             .with(ACTION_MODE.FOLLOW, () => (
               <AsyncButton

diff --git a/src/style.css b/src/style.css
@@ -6,54 +6,30 @@
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-.share-button {
+.share-button-wrapper {
   transition: opacity 0.2s ease-in-out;
   transition: 1s box-shadow;
   position: relative;
-  overflow: auto;
+  z-index: 0;
 }
 
-
-.share-button:before {
+.share-button-wrapper:before {
     content: '';
     background: linear-gradient(45deg, #0000ff, #0040ff, #0080ff, #00bfff, #00ffff, #00bfff, #0080ff, #0040ff, #0000ff);
     position: absolute;
     top: -2px;
     left:-2px;
     background-size: 400%;
-    z-index: 0;
+    z-index: -1;
     filter: blur(5px);
     width: calc(100% + 4px);
     height: calc(100% + 4px);
     animation: glowing 20s linear infinite;
-    opacity: 0;
+    opacity: 1;
     transition: opacity .3s ease-in-out;
     border-radius: 10px;
 }
 
-.share-button:active {
-    color: #000
-}
-
-.share-button:active:after {
-    background: transparent;
-}
-
-.share-button:hover:before {
-    opacity: 1;
-}
-
-.share-button:after {
-    z-index: -1;
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: #111;
-    left: 0;
-    top: 0;
-    border-radius: 10px;
-}
 
 @keyframes glowing {
     0% { background-position: 0 0; }