feat: popup buttons

assets/locales/en/messages.json

@@ -32,8 +32,8 @@
   "currentSiteRSSHub": {
     "message": "RSSHub for the current site"
   },
-  "documentation": {
-    "message": "Info"
+  "document": {
+    "message": "Document"
   },
   "enable": {
     "message": "Enable"

assets/locales/zh/messages.json

@@ -32,7 +32,7 @@
   "currentSiteRSSHub": {
     "message": "适用于当前网站的 RSSHub"
   },
-  "documentation": {
+  "document": {
     "message": "文档"
   },
   "enable": {

src/background/messages/contentReady.ts

@@ -2,7 +2,7 @@ import type { PlasmoMessaging } from "@plasmohq/messaging"
 import { getRSS } from "~/background"
  
 const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
-  console.log("content ready", req)
+  console.debug("content ready", req)
 
   getRSS(req.sender.tab.id, req.sender.tab.url)
 }

src/background/messages/popupReady.ts

@@ -2,7 +2,7 @@ import type { PlasmoMessaging } from "@plasmohq/messaging"
 import { getCachedRSS } from "~/background"
  
 const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
-  console.log("popup ready", req)
+  console.debug("popup ready", req)
 
   chrome.tabs.query({
     active: true,

src/background/messages/responseRSS.ts

@@ -2,7 +2,7 @@ import type { PlasmoMessaging } from "@plasmohq/messaging"
 import { setRSS } from "~/background"
  
 const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
-  console.log("response RSS", req)
+  console.debug("response RSS", req)
   
   setRSS(req.body.tabId, req.body.rss)
 }

src/lib/components/Button.tsx

@@ -18,10 +18,12 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
+        rss:
+          "border border-orange-500 text-orange-500 bg-background hover:bg-orange-500 hover:text-white",
       },
       size: {
         default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
+        sm: "h-8 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",
       },

src/popup/RSSItem.tsx

@@ -1,134 +1,207 @@
 import { useState } from "react"
 
+import { Button } from "~/lib/components/Button"
 import { defaultConfig, getConfig } from "~/lib/config"
 import type { RSSData } from "~/lib/types"
-import { Button } from "~/lib/components/Button"
+import RSSHubIcon from "data-base64:~/assets/icon.png"
 
 function RSSItem({ item }: { item: RSSData }) {
   const [config, setConfig] = useState(defaultConfig)
   getConfig().then(setConfig)
 
   return (
-    <li className="flex mb-4 items-center space-x-2">
-      <img className="w-8 h-8" src={item.image || "./rsshub.png"} />
-      <a href={item.url} className="w-48 cursor-pointer flex flex-col justify-between text-black">
+    <li className="flex mb-4 items-center space-x-2 w-max min-w-full">
+      <img className="w-8 h-8" src={item.image || RSSHubIcon} />
+      <a
+        target="_blank"
+        href={item.url}
+        className="w-48 cursor-pointer flex flex-col justify-between text-black flex-1">
         <span className="text-[13px] truncate">{item.title}</span>
         <span className="text-xs truncate text-zinc-400">
           {item.url.replace("https://", "").replace("http://", "")}
         </span>
       </a>
-      {item.isDocs ? (
-        <a href={item.url} className="rss-action">
-          {chrome.i18n.getMessage("documentation")}
-        </a>
-      ) : (
-        <Button data-clipboard-text={item.url}>
+      {item.isDocs && (
+        <Button variant="rss" size="sm">
+          <a target="_blank" href={item.url}>
+            {chrome.i18n.getMessage("document")}
+          </a>
+        </Button>
+      )}
+      {!item.isDocs && (
+        <Button variant="rss" size="sm" data-clipboard-text={item.url}>
           {chrome.i18n.getMessage("copy")}
         </Button>
       )}
-      {config.submitto.checkchan && config.submitto.checkchanBase ? (
-        <a
-          href={`${config.submitto.checkchanBase.replace(/\/$/, '')}/index.html#/check/add?title=${encodeURI(item.title)}&url=${encodeURI(item.url)}&type=rss&icon=${encodeURI(
-            item.image
-          )}`}
-          className="rss-action rss-submitto-checkchan">
-          {chrome.i18n.getMessage("subscribe to")} CheckChan
-        </a>
+      {!item.isDocs && config.submitto.checkchan && config.submitto.checkchanBase ? (
+        <Button variant="rss" size="sm" className="border-[#f28f34] text-[#f28f34] hover:bg-[#f28f34]">
+          <a
+            target="_blank"
+            href={`${config.submitto.checkchanBase.replace(
+              /\/$/,
+              ""
+            )}/index.html#/check/add?title=${encodeURI(
+              item.title
+            )}&url=${encodeURI(item.url)}&type=rss&icon=${encodeURI(
+              item.image
+            )}`}
+          >
+            {chrome.i18n.getMessage("subscribe to")} CheckChan
+          </a>
+        </Button>
       ) : (
         ""
       )}
-      {config.submitto.ttrss && config.submitto.ttrssDomain ? (
-        <a
-          href={`{config.submitto.ttrssDomain.replace(/\/$/, '')}/public.php?op=bookmarklets--subscribe&feed_url=${encodeURI(item.url)}`}
-          className="rss-action rss-submitto-ttrss">
-          {chrome.i18n.getMessage("subscribe to")} TTRSS
-        </a>
+      {!item.isDocs && config.submitto.ttrss && config.submitto.ttrssDomain ? (
+        <Button variant="rss" size="sm" className="border-[#f28f34] text-[#f28f34] hover:bg-[#f28f34]">
+          <a
+            target="_blank"
+            href={`{config.submitto.ttrssDomain.replace(/\/$/, '')}/public.php?op=bookmarklets--subscribe&feed_url=${encodeURI(
+              item.url
+            )}`}
+          >
+            {chrome.i18n.getMessage("subscribe to")} TTRSS
+          </a>
+        </Button>
       ) : (
         ""
       )}
-      {config.submitto.miniflux && config.submitto.minifluxDomain ? (
-        <a
-          href={`${config.submitto.minifluxDomain.replace(/\/$/, '')}/bookmarklet?uri=${encodeURI(item.url)}`}
-          className="rss-action rss-submitto-miniflux">
-          {chrome.i18n.getMessage("subscribe to")} Miniflux
-        </a>
+      {!item.isDocs && config.submitto.miniflux && config.submitto.minifluxDomain ? (
+        <Button variant="rss" size="sm" className="border-[#33995b] text-[#33995b] hover:bg-[#33995b]">
+          <a
+            target="_blank"
+            href={`${config.submitto.minifluxDomain.replace(
+              /\/$/,
+              ""
+            )}/bookmarklet?uri=${encodeURI(item.url)}`}
+          >
+            {chrome.i18n.getMessage("subscribe to")} Miniflux
+          </a>
+        </Button>
       ) : (
         ""
       )}
-      {config.submitto.freshrss && config.submitto.freshrssDomain ? (
-        <a
-          href={`${config.submitto.freshrssDomain.replace(/\/$/, '')}/i/?c=feed&a=add&url_rss=${encodeURI(item.url)}`}
-          className="rss-action rss-submitto-freshrss">
-          {chrome.i18n.getMessage("subscribe to")} FreshRSS
-        </a>
+      {!item.isDocs && config.submitto.freshrss && config.submitto.freshrssDomain ? (
+        <Button variant="rss" size="sm" className="border-[#0062db] text-[#0062db] hover:bg-[#0062db]">
+          <a
+            target="_blank"
+            href={`${config.submitto.freshrssDomain.replace(
+              /\/$/,
+              ""
+            )}/i/?c=feed&a=add&url_rss=${encodeURI(item.url)}`}
+          >
+            {chrome.i18n.getMessage("subscribe to")} FreshRSS
+          </a>
+        </Button>
       ) : (
         ""
       )}
-      {config.submitto.nextcloudnews && config.submitto.nextcloudnewsDomain ? (
-        <a
-          href={`${config.submitto.nextcloudnewsDomain.replace(/\/$/, '')}/?subscribe_to=${encodeURI(item.url)}`}
-          className="rss-action rss-submitto-nextcloudnews">
-          {chrome.i18n.getMessage("subscribe to")} Nextcloud News
-        </a>
+      {!item.isDocs && config.submitto.nextcloudnews && config.submitto.nextcloudnewsDomain ? (
+        <Button variant="rss" size="sm" className="border-[#0082c9] text-[#0082c9] hover:bg-[#0082c9]">
+          <a
+            target="_blank"
+            href={`${config.submitto.nextcloudnewsDomain.replace(
+              /\/$/,
+              ""
+            )}/?subscribe_to=${encodeURI(item.url)}`}
+          >
+            {chrome.i18n.getMessage("subscribe to")} Nextcloud News
+          </a>
+        </Button>
       ) : (
         ""
       )}
-      {config.submitto.feedly
-        ? <a href={`https://feedly.com/i/subscription/feed/${encodeURI(
-            item.url
-          )}`} className="rss-action rss-submitto-feedly">{chrome.i18n.getMessage(
-            "subscribe to"
-          )} Feedly</a>
-        : ""}
-      {config.submitto.inoreader && config.submitto.inoreaderDomain ? (
-        <a
-          href={`${config.submitto.inoreaderDomain.replace(/\/$/, '')}/?add_feed=${encodeURI(item.url)}`}
-          className="rss-action rss-submitto-inoreader">
-          {chrome.i18n.getMessage("subscribe to")} Inoreader
-        </a>
+      {!item.isDocs && config.submitto.feedly ? (
+        <Button variant="rss" size="sm" className="border-[#2bb24c] text-[#2bb24c] hover:bg-[#2bb24c]">
+          <a
+            target="_blank"
+            href={`https://feedly.com/i/subscription/feed/${encodeURI(
+              item.url
+            )}`}
+            className="rss-action rss-submitto-feedly">
+            {chrome.i18n.getMessage("subscribe to")} Feedly
+          </a>
+        </Button>
       ) : (
         ""
       )}
-      {config.submitto.feedbin && config.submitto.feedbinDomain ? (
-        <a
-          href={`${config.submitto.feedbinDomain.replace(/\/$/, '')}/?subscribe=${encodeURI(item.url)}`}
-          className="rss-action rss-submitto-feedbin">
-          {chrome.i18n.getMessage("subscribe to")} Feedbin
-        </a>
+      {!item.isDocs && config.submitto.inoreader && config.submitto.inoreaderDomain ? (
+        <Button variant="rss" size="sm" className="border-[#0099eb] text-[#0099eb] hover:bg-[#0099eb]">
+          <a
+            target="_blank"
+            href={`${config.submitto.inoreaderDomain.replace(
+              /\/$/,
+              ""
+            )}/?add_feed=${encodeURI(item.url)}`}
+          >
+            {chrome.i18n.getMessage("subscribe to")} Inoreader
+          </a>
+        </Button>
       ) : (
         ""
       )}
-      {config.submitto.theoldreader ? (
-        <a
-          href={`https://theoldreader.com/feeds/subscribe?url=${encodeURI(item.url)}`}
-          className="rss-action rss-submitto-theoldreader">
-          {chrome.i18n.getMessage("subscribe to")} The Old Reader
-        </a>
+      {!item.isDocs && config.submitto.feedbin && config.submitto.feedbinDomain ? (
+        <Button variant="rss" size="sm" className="border-[#0867e2] text-[#0867e2] hover:bg-[#0867e2]">
+          <a
+            target="_blank"
+            href={`${config.submitto.feedbinDomain.replace(
+              /\/$/,
+              ""
+            )}/?subscribe=${encodeURI(item.url)}`}
+          >
+            {chrome.i18n.getMessage("subscribe to")} Feedbin
+          </a>
+        </Button>
       ) : (
         ""
       )}
-      {config.submitto.feedspub ? (
-        <a
-          href={`https://feeds.pub/feed/${encodeURIComponent(item.url)}`}
-          className="rss-action rss-submitto-feedspub">
-          {chrome.i18n.getMessage("subscribe to")} Feeds.Pub
-        </a>
+      {!item.isDocs && config.submitto.theoldreader ? (
+        <Button variant="rss" size="sm" className="border-[#ff2300] text-[#ff2300] hover:bg-[#ff2300]">
+          <a
+            target="_blank"
+            href={`https://theoldreader.com/feeds/subscribe?url=${encodeURI(
+              item.url
+            )}`}
+          >
+            {chrome.i18n.getMessage("subscribe to")} The Old Reader
+          </a>
+        </Button>
       ) : (
         ""
       )}
-      {config.submitto.bazqux ? (
-        <a
-          href={`https://bazqux.com/add?url=${encodeURIComponent(item.url)}`}
-          className="rss-action rss-submitto-bazqux">
-          {chrome.i18n.getMessage("subscribe to")} BazQux Reader
-        </a>
+      {!item.isDocs && config.submitto.feedspub ? (
+        <Button variant="rss" size="sm" className="border-[#61af4b] text-[#61af4b] hover:bg-[#61af4b]">
+          <a
+            target="_blank"
+            href={`https://feeds.pub/feed/${encodeURIComponent(item.url)}`}
+          >
+            {chrome.i18n.getMessage("subscribe to")} Feeds.Pub
+          </a>
+        </Button>
       ) : (
         ""
       )}
-      {config.submitto.local ? (
-        <a href={`feed://${item.url}`} className="rss-action rss-submitto-local">
-          {chrome.i18n.getMessage("subscribe to local reader")}
-        </a>
+      {!item.isDocs && config.submitto.bazqux ? (
+        <Button variant="rss" size="sm" className="border-[#00af00] text-[#00af00] hover:bg-[#00af00]">
+          <a
+            target="_blank"
+            href={`https://bazqux.com/add?url=${encodeURIComponent(item.url)}`}
+          >
+            {chrome.i18n.getMessage("subscribe to")} BazQux Reader
+          </a>
+        </Button>
+      ) : (
+        ""
+      )}
+      {!item.isDocs && config.submitto.local ? (
+        <Button variant="rss" size="sm">
+          <a
+            target="_blank"
+            href={`feed://${item.url}`}
+            className="rss-action rss-submitto-local">
+            {chrome.i18n.getMessage("subscribe to local reader")}
+          </a>
+        </Button>
       ) : (
         ""
       )}

src/popup/RSSList.tsx

@@ -16,7 +16,7 @@ function RSSList({
         <h2 className="text-base font-bold">{chrome.i18n.getMessage(title)}</h2>
       <ul>
         {list.map((item) => (
-          <RSSItem key={item.url} item={item} />
+          <RSSItem key={item.url + item.title} item={item} />
         ))}
       </ul>
     </div>

src/sandboxes/index.ts

@@ -29,7 +29,7 @@ window.addEventListener("message", async (event: MessageEvent<{
       url: event.data.body.url,
       rules: event.data.body.rules,
     })
-    console.log("RSS", pageRSS, pageRSSHub, websiteRSSHub)
+    console.debug("RSS", pageRSS, pageRSSHub, websiteRSSHub)
     event.source.postMessage({
       name: "responseRSS",
       body: {

tsconfig.json

@@ -10,7 +10,7 @@
   ],
   "compilerOptions": {
     "paths": {
-      "~*": [
+      "~/*": [
         "./src/*"
       ]
     },