⚗️ add card action

website/package.json

@@ -26,6 +26,7 @@
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",
+    "copy-to-clipboard": "^3.3.1",
     "docusaurus-preset-nonepress": "canary",
     "file-loader": "^6.2.0",
     "prism-react-renderer": "^1.2.1",

website/src/components/Adapter.tsx

@@ -136,7 +136,12 @@ ${JSON.stringify(tags)}
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-4">
         {currentAdapters.map((adapter, index) => (
-          <Card key={index} {...adapter} />
+          <Card
+            key={index}
+            {...adapter}
+            action={`nb adapter install ${adapter.project_link}`}
+            actionDisabled={!adapter.project_link}
+          />
         ))}
       </div>
       <div className="grid grid-cols-1 p-4">

website/src/components/Card/index.tsx

@@ -1,6 +1,9 @@
-import React from "react";
+import clsx from "clsx";
+import copy from "copy-to-clipboard";
+import React, { useState } from "react";
 
 import Link from "@docusaurus/Link";
+import type { IconName } from "@fortawesome/fontawesome-common-types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import type { Obj } from "../../libs/store";
@@ -14,8 +17,22 @@ export default function Card({
   homepage,
   tags,
   is_official,
-}: Obj): JSX.Element {
+  action,
+  actionDisabled = false,
+  actionLabel = "点击复制安装命令",
+}: Obj & {
+  action?: string;
+  actionLabel?: string;
+  actionDisabled?: boolean;
+}): JSX.Element {
   const isGithub = /^https:\/\/github.com\/[^/]+\/[^/]+/.test(homepage);
+  const [copied, setCopied] = useState<boolean>(false);
+
+  const copyAction = () => {
+    copy(action);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
 
   return (
     <div className="block max-w-full px-4 border-2 rounded-lg outline-none no-underline bg-light-nonepress-100 dark:bg-dark-nonepress-100 border-light-nonepress-200 dark:border-dark-nonepress-200 shadow-md shadow-light-nonepress-300 dark:shadow-dark-nonepress-300">
@@ -32,7 +49,7 @@ export default function Card({
         {homepage && (
           <Link
             href={homepage}
-            className="text-black dark:text-white opacity-60 hover:text-hero hover:opacity-100"
+            className="text-black dark:text-white opacity-60 hover:text-hero dark:hover:text-white hover:opacity-100"
           >
             {isGithub ? (
               <FontAwesomeIcon icon={["fab", "github"]} />
@@ -64,6 +81,23 @@ export default function Card({
           {author}
         </div>
       )}
+      {action && actionLabel && (
+        <button
+          className={clsx(
+            "my-2 text-sm py-2 w-full rounded select-none bg-light-nonepress-200 dark:bg-dark-nonepress-200 active:bg-light-nonepress-300 active:dark:bg-dark-nonepress-300",
+            { "opacity-60 pointer-events-none": actionDisabled }
+          )}
+          onClick={copyAction}
+        >
+          <span className="flex grow items-center justify-center">
+            {copied ? "复制成功" : actionLabel}
+            <FontAwesomeIcon
+              icon={["fas", copied ? "check-circle" : "copy"]}
+              className="ml-2"
+            />
+          </span>
+        </button>
+      )}
     </div>
   );
 }

website/src/components/Driver.tsx

@@ -38,7 +38,12 @@ export default function Driver(): JSX.Element {
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-4">
         {currentDrivers.map((driver, index) => (
-          <Card key={index} {...driver} />
+          <Card
+            key={index}
+            {...driver}
+            action={`nb driver install ${driver.project_link}`}
+            actionDisabled={!driver.project_link}
+          />
         ))}
       </div>
       <div className="grid grid-cols-1 p-4">

website/src/components/Plugin.tsx

@@ -136,7 +136,12 @@ ${JSON.stringify(tags)}
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-4">
         {currentPlugins.map((plugin, index) => (
-          <Card key={index} {...plugin} />
+          <Card
+            key={index}
+            {...plugin}
+            action={`nb plugin install ${plugin.project_link}`}
+            actionDisabled={!plugin.project_link}
+          />
         ))}
       </div>
       <div className="grid grid-cols-1 p-4">

website/static/drivers.json

@@ -5,7 +5,7 @@
     "name": "FastAPI",
     "desc": "FastAPI 驱动器",
     "author": "yanyongyu",
-    "homepage": "https://v2.nonebot.dev/docs/tutorial/choose-driver",
+    "homepage": "/docs/tutorial/choose-driver",
     "tags": [],
     "is_official": true
   },
@@ -15,17 +15,17 @@
     "name": "Quart",
     "desc": "Quart 驱动器",
     "author": "yanyongyu",
-    "homepage": "https://v2.nonebot.dev/docs/tutorial/choose-driver",
+    "homepage": "/docs/tutorial/choose-driver",
     "tags": [],
     "is_official": true
   },
   {
     "module_name": "nonebot.drivers.httpx",
-    "project_link": "",
+    "project_link": "httpx",
     "name": "HTTPX",
     "desc": "HTTPX 驱动器",
     "author": "yanyongyu",
-    "homepage": "https://v2.nonebot.dev/docs/tutorial/choose-driver",
+    "homepage": "/docs/tutorial/choose-driver",
     "tags": [],
     "is_official": true
   },
@@ -35,17 +35,17 @@
     "name": "websockets",
     "desc": "websockets 驱动器",
     "author": "yanyongyu",
-    "homepage": "https://v2.nonebot.dev/docs/tutorial/choose-driver",
+    "homepage": "/docs/tutorial/choose-driver",
     "tags": [],
     "is_official": true
   },
   {
     "module_name": "nonebot.drivers.aiohttp",
-    "project_link": "",
+    "project_link": "aiohttp",
     "name": "AIOHTTP",
     "desc": "AIOHTTP 驱动器",
     "author": "yanyongyu",
-    "homepage": "https://v2.nonebot.dev/docs/tutorial/choose-driver",
+    "homepage": "/docs/tutorial/choose-driver",
     "tags": [],
     "is_official": true
   }

website/static/plugins.json

@@ -66,7 +66,7 @@
   },
   {
     "module_name": "nonebot_plugin_test",
-    "projectLink": "nonebot-plugin-test",
+    "project_link": "nonebot-plugin-test",
     "author": "yanyongyu",
     "desc": "在浏览器中测试你的 NoneBot 机器人",
     "name": "前端测试机器人插件",