⚗️ add card action

This commit is contained in:
yanyongyu 2022-01-02 20:21:08 +08:00
parent 479952777b
commit 5fe5273f8f
8 changed files with 84 additions and 22 deletions

View File

@ -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",

View File

@ -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">

View File

@ -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>
);
}

View File

@ -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">

View File

@ -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">

View File

@ -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
}

View File

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

View File

@ -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"
resolved "https://registry.npmmirror.com/docusaurus-preset-nonepress/download/docusaurus-preset-nonepress-0.0.0-130.tgz#f2cebf94c4ea4bac4e63fb2e1439700b9a126a97"
integrity sha512-zJwEWkl1VCuXAP0YJcCCLkFpIXFl4YWoXAvm0smMsFPV9oYe6tV5Q1CXZAZNuUOFgMT4KAOYOis1fUNikV3c9Q==
version "0.0.0-131"
resolved "https://registry.npmmirror.com/docusaurus-preset-nonepress/download/docusaurus-preset-nonepress-0.0.0-131.tgz#acdb2921ad7130e26124c4291ec200b70987f1c6"
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:
version "0.0.0-130"
resolved "https://registry.npmmirror.com/docusaurus-theme-nonepress/download/docusaurus-theme-nonepress-0.0.0-130.tgz#26aaea857eb6c0c3061a632882e64a9b97269182"
integrity sha512-JlYLggAD/NB3FnoekiQuRHIdrznKSWcFKS/PJPGNtRNXgF603RLcsEwUlCuRwvHEMA6aqKGhvurlfDhqi/u6Ng==
docusaurus-theme-nonepress@0.0.0-131:
version "0.0.0-131"
resolved "https://registry.npmmirror.com/docusaurus-theme-nonepress/download/docusaurus-theme-nonepress-0.0.0-131.tgz#615da60a6849cfa85a303f2b28de5bcd3b69dfe5"
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"