site: site ContributorAvatar style optimization (#46623)

.dumi/theme/slots/Content/ColumnCard.tsx

@@ -1,7 +1,8 @@
-import { RightOutlined, YuqueOutlined, ZhihuOutlined } from '@ant-design/icons';
-import { createStyles } from 'antd-style';
 import React from 'react';
+import { RightOutlined, YuqueOutlined, ZhihuOutlined } from '@ant-design/icons';
 import { Button, Card, Divider } from 'antd';
+import { createStyles } from 'antd-style';
+
 import useLocale from '../../../hooks/useLocale';
 import JuejinLogo from './JuejinLogo';
 

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

@@ -1,21 +1,30 @@
 import React from 'react';
+import type { AvatarListItem } from '@qixian.cs/github-contributors-list';
 import { Avatar, Skeleton, Tooltip } from 'antd';
 
 const AvatarPlaceholder: React.FC<{ num?: number }> = ({ num = 3 }) => (
   <li>
-    {Array.from({ length: num }).map((_, i) => (
-      <Skeleton.Avatar size="small" active key={i} style={{ marginLeft: i === 0 ? 0 : -8 }} />
+    {Array.from({ length: num }).map<React.ReactNode>((_, i) => (
+      <Skeleton.Avatar
+        size="small"
+        active
+        key={i}
+        style={{ marginInlineStart: i === 0 ? 0 : -8 }}
+      />
     ))}
   </li>
 );
 
 interface ContributorAvatarProps {
-  username?: string;
-  url?: string;
   loading?: boolean;
+  item?: AvatarListItem;
 }
 
-const ContributorAvatar: React.FC<ContributorAvatarProps> = ({ username, url, loading }) => {
+const ContributorAvatar: React.FC<ContributorAvatarProps> = (props) => {
+  const {
+    item: { username, url } = {},
+    loading,
+  } = props;
   if (loading) {
     return <AvatarPlaceholder />;
   }

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

@@ -1,15 +1,13 @@
 import React, { useContext } from 'react';
+import ContributorsList from '@qixian.cs/github-contributors-list';
+import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import { useIntl } from 'dumi';
-import { createStyles } from 'antd-style';
-import ContributorsList from '@qixian.cs/github-contributors-list';
-import ContributorAvatar from './ContributorAvatar';
+
 import SiteContext from '../SiteContext';
+import ContributorAvatar from './ContributorAvatar';
 
-const useStyle = createStyles(({ token, css }) => {
-  const { antCls } = token;
-
-  return {
+const useStyle = createStyles(({ token, css }) => ({
   contributorsList: css`
     margin-top: 120px !important;
   `,
@@ -18,31 +16,25 @@ const useStyle = createStyles(({ token, css }) => {
   `,
   title: css`
     font-size: 12px;
-    opacity: 0.45;
+    opacity: 0.5;
+    margin-bottom: 8px;
   `,
   list: css`
     display: flex;
     flex-wrap: wrap;
     clear: both;
-
     li {
       height: 24px;
-  }
-
-  li,
-  ${antCls}-avatar + ${antCls}-avatar {
       transition: all ${token.motionDurationSlow};
       margin-inline-end: -8px;
     }
     &:hover {
-    li,
-    ${antCls}-avatar {
+      li {
         margin-inline-end: 0;
       }
     }
   `,
-  };
-});
+}));
 
 interface ContributorsProps {
   filename?: string;
@@ -67,12 +59,7 @@ const Contributors: React.FC<ContributorsProps> = ({ filename }) => {
         fileName={filename}
         className={styles.list}
         renderItem={(item, loading) => (
-          <ContributorAvatar
-            key={item?.username}
-            username={item?.username}
-            url={item?.url}
-            loading={loading}
-          />
+          <ContributorAvatar item={item} loading={loading} key={item?.url} />
         )}
       />
     </div>

.dumi/theme/slots/Content/DocAnchor.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
-import classNames from 'classnames';
 import { Anchor } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
+import classNames from 'classnames';
 import { useRouteMeta, useTabMeta } from 'dumi';
 
 const useStyle = createStyles(({ token, css }) => {

.dumi/theme/slots/Content/DocMeta.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useLayoutEffect, useMemo } from 'react';
-import { Typography, Space, Skeleton, Avatar } from 'antd';
-import { useRouteMeta } from 'dumi';
-import DayJS from 'dayjs';
+import React, { useLayoutEffect, useMemo, useState } from 'react';
 import { CalendarOutlined } from '@ant-design/icons';
+import { Avatar, Skeleton, Space, Typography } from 'antd';
+import DayJS from 'dayjs';
+import { useRouteMeta } from 'dumi';
 
 const AuthorAvatar: React.FC<{ name: string; avatar: string }> = ({ name, avatar }) => {
   const [loading, setLoading] = useState(true);
@@ -26,7 +26,7 @@ const AuthorAvatar: React.FC<{ name: string; avatar: string }> = ({ name, avatar
   );
 };
 
-const DocMeta: React.FC<{}> = () => {
+const DocMeta: React.FC = () => {
   const meta = useRouteMeta();
 
   const mergedAuthorInfos = useMemo(() => {

.dumi/theme/slots/Content/index.tsx

@@ -1,9 +1,9 @@
+import React, { Suspense, useContext, useLayoutEffect, useMemo } from 'react';
+import { Col, Skeleton, Space, Typography } from 'antd';
+import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import { FormattedMessage, useRouteMeta } from 'dumi';
-import type { ReactNode } from 'react';
-import React, { Suspense, useContext, useLayoutEffect, useMemo } from 'react';
-import { Col, Space, Typography, Skeleton } from 'antd';
-import { createStyles } from 'antd-style';
+
 import useLayoutState from '../../../hooks/useLayoutState';
 import useLocation from '../../../hooks/useLocation';
 import type { DemoContextProps } from '../DemoContext';
@@ -22,11 +22,9 @@ const EditButton = React.lazy(() => import('../../common/EditButton'));
 const useStyle = createStyles(({ token, css }) => ({
   articleWrapper: css`
     padding: 0 170px 32px 64px;
-
     &.rtl {
       padding: 0 64px 144px 170px;
     }
-
     @media only screen and (max-width: ${token.screenLG}px) {
       &,
       &.rtl {
@@ -36,7 +34,7 @@ const useStyle = createStyles(({ token, css }) => ({
   `,
 }));
 
-const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
+const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
   const meta = useRouteMeta();
   const { pathname, hash } = useLocation();
   const { direction } = useContext(SiteContext);