⚗️ 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": "前端测试机器人插件",

yarn.lock

@@ -2908,6 +2908,13 @@ copy-text-to-clipboard@^3.0.1:
   resolved "https://registry.nlark.com/copy-text-to-clipboard/download/copy-text-to-clipboard-3.0.1.tgz#8cbf8f90e0a47f12e4a24743736265d157bce69c"
   integrity sha1-jL+PkOCkfxLkokdDc2Jl0Ve85pw=
 
+copy-to-clipboard@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.nlark.com/copy-to-clipboard/download/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha1-EVqhqZmP+rYZb5MHatbaO5E2Yq4=
+  dependencies:
+    toggle-selection "^1.0.6"
+
 copy-webpack-plugin@^9.0.1:
   version "9.1.0"
   resolved "https://registry.npmmirror.com/copy-webpack-plugin/download/copy-webpack-plugin-9.1.0.tgz#2d2c460c4c4695ec0a58afb2801a1205256c4e6b"
@@ -3344,19 +3351,19 @@ dns-txt@^2.0.2:
     buffer-indexof "^1.0.0"
 
 docusaurus-preset-nonepress@canary:
-  version "0.0.0-130"
+  version "0.0.0-131"
-  resolved "https://registry.npmmirror.com/docusaurus-preset-nonepress/download/docusaurus-preset-nonepress-0.0.0-130.tgz#f2cebf94c4ea4bac4e63fb2e1439700b9a126a97"
+  resolved "https://registry.npmmirror.com/docusaurus-preset-nonepress/download/docusaurus-preset-nonepress-0.0.0-131.tgz#acdb2921ad7130e26124c4291ec200b70987f1c6"
-  integrity sha512-zJwEWkl1VCuXAP0YJcCCLkFpIXFl4YWoXAvm0smMsFPV9oYe6tV5Q1CXZAZNuUOFgMT4KAOYOis1fUNikV3c9Q==
+  integrity sha512-ooqLPSPBDQVe3HzWQ+C4RVHRb1xlyePDD6rGKPsgRwczubbJzDEJ/nci7MpTTaXMvfg7UjpW7sF0fcZr6k/LEg==
   dependencies:
     "@docusaurus/core" "2.0.0-beta.9"
     "@docusaurus/plugin-content-docs" "2.0.0-beta.9"
     "@docusaurus/plugin-content-pages" "2.0.0-beta.9"
-    docusaurus-theme-nonepress "0.0.0-130"
+    docusaurus-theme-nonepress "0.0.0-131"
 
-docusaurus-theme-nonepress@0.0.0-130:
+docusaurus-theme-nonepress@0.0.0-131:
-  version "0.0.0-130"
+  version "0.0.0-131"
-  resolved "https://registry.npmmirror.com/docusaurus-theme-nonepress/download/docusaurus-theme-nonepress-0.0.0-130.tgz#26aaea857eb6c0c3061a632882e64a9b97269182"
+  resolved "https://registry.npmmirror.com/docusaurus-theme-nonepress/download/docusaurus-theme-nonepress-0.0.0-131.tgz#615da60a6849cfa85a303f2b28de5bcd3b69dfe5"
-  integrity sha512-JlYLggAD/NB3FnoekiQuRHIdrznKSWcFKS/PJPGNtRNXgF603RLcsEwUlCuRwvHEMA6aqKGhvurlfDhqi/u6Ng==
+  integrity sha512-Od4fOTIEhe/VvdyxczPNDHiPhbyz3Zxn+DHcaOo8NWsJ5gcNTZhgXg1bXrhc4cVTXCEcdpM/HVEYm7JiAnKFgQ==
   dependencies:
     "@docsearch/react" "^3.0.0-alpha.39"
     "@docusaurus/core" "2.0.0-beta.9"
@@ -7313,6 +7320,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.nlark.com/toggle-selection/download/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/toidentifier/download/toidentifier-1.0.1.tgz?cache=0&sync_timestamp=1636938512912&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Ftoidentifier%2Fdownload%2Ftoidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"