feat: support Contributors List

.dumi/theme/layouts/GlobalLayout.tsx

@@ -1,16 +1,39 @@
 import React from 'react';
 import { en_US, Web3ConfigProvider, zh_CN } from '@ant-design/web3-common';
-import { useIntl, useLocation, useOutlet, usePrefersColor } from 'dumi';
 import { GlobalLayout as ThemeGlobalLayout } from 'dumi-theme-antd-web3';
+import { useIntl, useLocation, useOutlet, usePrefersColor, useRouteMeta } from 'dumi';
+import ReactDOM from 'react-dom/client';
 
 import SiteThemeProvider from '../SiteThemeProvider';
 
+const Contributors = React.lazy(() => import('../slots/Content/Contributors'));
+
 const GlobalLayout: React.FC = () => {
   const outlet = useOutlet();
+  const meta = useRouteMeta();
   const { pathname } = useLocation();
   const [color] = usePrefersColor();
   const { locale } = useIntl();
 
+  React.useEffect(() => {
+    const articleElement = document.querySelector('article');
+    const newContainer = document.createElement('div');
+
+    if (articleElement) {
+      // 在 article 元素后面创建一个新的容器
+      articleElement.parentNode?.insertBefore(newContainer, articleElement.nextSibling);
+
+      // 在新容器中渲染 Contributors 组件
+      const root = ReactDOM.createRoot(newContainer);
+      root.render(<Contributors filename={meta.frontmatter.filename} />);
+    }
+    return () => {
+      if (newContainer && articleElement) {
+        newContainer.remove();
+      }
+    };
+  }, [meta.frontmatter.filename]);
+
   return (
     <ThemeGlobalLayout>
       <Web3ConfigProvider locale={locale === 'zh-CN' ? zh_CN : en_US}>

.dumi/theme/slots/Content/ContributorAvatar.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Avatar, Skeleton, Tooltip } from 'antd';
+import type { AvatarListItem } from 'github-contributors-lists';
+
+const AvatarPlaceholder: React.FC<{ num?: number }> = ({ num = 3 }) => (
+  <li>
+    {Array.from({ length: num }).map<React.ReactNode>((_, i) => (
+      <Skeleton.Avatar
+        size="small"
+        active
+        key={i}
+        style={{ marginInlineStart: i === 0 ? 0 : -8 }}
+      />
+    ))}
+  </li>
+);
+
+interface ContributorAvatarProps {
+  loading?: boolean;
+  item?: AvatarListItem;
+}
+
+const ContributorAvatar: React.FC<ContributorAvatarProps> = (props) => {
+  const { item: { username, url } = {}, loading } = props;
+  if (loading) {
+    return <AvatarPlaceholder />;
+  }
+  if (username?.includes('github-actions')) {
+    return null;
+  }
+  return (
+    <Tooltip title={username}>
+      <li>
+        <a href={`https://github.com/${username}`} target="_blank" rel="noopener noreferrer">
+          <Avatar size="small" src={url} alt={username}>
+            {username}
+          </Avatar>
+        </a>
+      </li>
+    </Tooltip>
+  );
+};
+
+export default ContributorAvatar;

.dumi/theme/slots/Content/Contributors.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
+import ContributorsList from 'github-contributors-lists';
+
+import ContributorAvatar from './ContributorAvatar';
+
+const useStyle = createStyles(({ token, css }) => ({
+  contributorsList: css`
+    margin-top: 120px !important;
+  `,
+  listMobile: css`
+    margin: 1em 0 !important;
+  `,
+  title: css`
+    font-size: ${token.fontSizeSM}px;
+    opacity: 0.5;
+    margin-bottom: ${token.marginXS}px;
+  `,
+  list: css`
+    display: flex;
+    flex-wrap: wrap;
+    clear: both;
+    li {
+      height: 24px;
+      transition: all ${token.motionDurationSlow};
+      margin-inline-end: -${token.marginXS}px;
+    }
+    &:hover {
+      li {
+        margin-inline-end: 0;
+      }
+    }
+  `,
+}));
+
+interface ContributorsProps {
+  filename?: string;
+}
+
+const Contributors: React.FC<ContributorsProps> = ({ filename }) => {
+  const { styles } = useStyle();
+
+  if (!filename) {
+    return null;
+  }
+
+  return (
+    <div className={classNames(styles.contributorsList)}>
+      <ContributorsList
+        style={{ paddingLeft: 24 }}
+        cache
+        repo="ant-design-web3"
+        owner="ant-design"
+        fileName={filename}
+        className={styles.list}
+        renderItem={(item, loading) => (
+          <ContributorAvatar item={item} loading={loading} key={item?.url} />
+        )}
+      />
+    </div>
+  );
+};
+
+export default Contributors;

package.json

@@ -54,10 +54,10 @@
     "@ant-design/web3": "workspace:*",
     "@ant-design/web3-assets": "workspace:*",
     "@ant-design/web3-common": "workspace:*",
+    "@ant-design/web3-ethers": "workspace:*",
     "@ant-design/web3-icons": "workspace:*",
     "@ant-design/web3-solana": "workspace:*",
     "@ant-design/web3-wagmi": "workspace:*",
-    "@ant-design/web3-ethers": "workspace:*",
     "@biomejs/biome": "^1.6.4",
     "@changesets/changelog-git": "^0.2.0",
     "@changesets/cli": "^2.27.1",
@@ -84,6 +84,7 @@
     "eslint-plugin-unused-imports": "^3.1.0",
     "ethers": "^6.11.1",
     "father": "^4.3.8",
+    "github-contributors-lists": "^1.0.3",
     "husky": "^9.0.11",
     "jsdom": "^24.0.0",
     "lint-staged": "^15.2.2",