📝 Docs: 升级新版 NonePress 主题 (#2375)

website/src/components/Resource/Card/index.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+
+import clsx from "clsx";
+
+import Link from "@docusaurus/Link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import "./styles.css";
+import Tag from "@/components/Resource/Tag";
+import type { Resource } from "@/libs/store";
+
+export type Props = {
+  resource: Resource;
+  onClick?: () => void;
+  onTagClick: (tag: string) => void;
+  onAuthorClick: () => void;
+  className?: string;
+};
+
+export default function ResourceCard({
+  resource,
+  onClick,
+  onTagClick,
+  onAuthorClick,
+  className,
+}: Props): JSX.Element {
+  const isGithub = /^https:\/\/github.com\/[^/]+\/[^/]+/.test(
+    resource.homepage
+  );
+
+  const isPlugin = resource.resourceType === "plugin";
+  const registryLink =
+    isPlugin &&
+    `https://registry.nonebot.dev/plugin/${resource.project_link}:${resource.module_name}`;
+
+  const authorLink = `https://github.com/${resource.author}`;
+  const authorAvatar = `${authorLink}.png?size=80`;
+
+  return (
+    <div
+      className={clsx(
+        "resource-card-container",
+        onClick && "resource-card-container-clickable",
+        className
+      )}
+      onClick={onClick}
+    >
+      <div className="resource-card-header">
+        <div className="resource-card-header-title">
+          {resource.name}
+          {resource.is_official && (
+            <FontAwesomeIcon
+              className="resource-card-header-check"
+              icon={["fas", "circle-check"]}
+            />
+          )}
+        </div>
+        <div className="resource-card-header-expand">
+          <FontAwesomeIcon icon={["fas", "expand"]} />
+        </div>
+      </div>
+      <div className="resource-card-desc">{resource.desc}</div>
+      <div className="resource-card-footer">
+        <div className="resource-card-footer-tags">
+          {resource.tags.map((tag, index) => (
+            <Tag
+              className="resource-card-footer-tag"
+              key={index}
+              {...tag}
+              onClick={() => onTagClick(tag.label)}
+            />
+          ))}
+        </div>
+        <div className="divider resource-card-footer-divider"></div>
+        <div className="resource-card-footer-info">
+          <div className="resource-card-footer-group">
+            <Link href={resource.homepage}>
+              {isGithub ? (
+                <FontAwesomeIcon
+                  className="resource-card-footer-icon"
+                  icon={["fab", "github"]}
+                />
+              ) : (
+                <FontAwesomeIcon
+                  className="resource-card-footer-icon"
+                  icon={["fas", "link"]}
+                />
+              )}
+            </Link>
+            {isPlugin && (
+              <Link href={registryLink as string}>
+                <FontAwesomeIcon
+                  className="resource-card-footer-icon"
+                  icon={["fas", "cube"]}
+                />
+              </Link>
+            )}
+          </div>
+          <div className="resource-card-footer-group">
+            <div className="avatar">
+              <div className="resource-card-footer-avatar">
+                <Link href={authorLink}>
+                  <img src={authorAvatar} key={resource.author} />
+                </Link>
+              </div>
+            </div>
+            <span
+              className="resource-card-footer-author"
+              onClick={onAuthorClick}
+            >
+              {resource.author}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

website/src/components/Resource/Card/styles.css

@@ -0,0 +1,75 @@
+.resource-card {
+  &-container {
+    @apply flex flex-col gap-y-2 w-full min-h-[12rem] p-4;
+    @apply transition-colors duration-500 bg-base-200;
+    @apply border-2 border-base-200 rounded-lg;
+
+    &-clickable {
+      @apply cursor-pointer hover:border-primary;
+    }
+  }
+
+  &-header {
+    @apply flex items-center w-full text-lg font-medium;
+
+    &-title {
+      @apply grow text-left truncate;
+    }
+
+    &-check {
+      @apply ml-2 text-success w-5 h-5 fill-current;
+    }
+
+    &-expand {
+      @apply flex-none fill-current;
+    }
+  }
+
+  &-desc {
+    @apply flex-1 w-full text-sm text-ellipsis break-words;
+  }
+
+  &-footer {
+    @apply flex flex-col w-full cursor-default;
+
+    &-tags {
+      @apply flex flex-wrap gap-1;
+    }
+
+    &-tag {
+      @apply cursor-pointer;
+    }
+
+    &-divider {
+      @apply m-0;
+    }
+
+    &-info {
+      @apply flex items-center justify-between w-full;
+    }
+
+    &-group {
+      @apply flex items-center justify-center gap-x-1 leading-none;
+    }
+
+    &-icon {
+      @apply w-5 h-5 fill-current opacity-80;
+
+      &:hover {
+        @apply opacity-100;
+      }
+    }
+
+    &-avatar {
+      @apply w-5 h-5 rounded-full transition-shadow;
+
+      &:hover {
+        @apply ring-1 ring-primary ring-offset-base-100 ring-offset-1;
+      }
+    }
+
+    &-author {
+      @apply text-sm cursor-pointer;
+    }
+  }
+}

website/src/components/Resource/Tag/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import clsx from "clsx";
+
+import "./styles.css";
+import { pickTextColor } from "@/libs/color";
+import type { Tag } from "@/types/tag";
+
+export type Props = Tag & {
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLSpanElement>;
+};
+
+export default function ResourceTag({
+  label,
+  color,
+  className,
+  onClick,
+}: Props): JSX.Element {
+  return (
+    <span
+      className={clsx("resource-tag", className)}
+      style={{
+        backgroundColor: color,
+        color: pickTextColor(color, "#fff", "#000"),
+      }}
+      onClick={onClick}
+    >
+      {label}
+    </span>
+  );
+}

website/src/components/Resource/Tag/styles.css

@@ -0,0 +1,4 @@
+.resource-tag {
+  @apply inline-flex items-center justify-center;
+  @apply text-xs font-mono w-fit h-5 px-2 rounded;
+}