docs: banner recommendation (#46124)

* docs: recover banner

* docs: rec

* chore: add banner recommends

.dumi/pages/index/components/BannerRecommends.tsx

@@ -3,7 +3,7 @@ import { createStyles, css, useTheme } from 'antd-style';
 import classNames from 'classnames';
 import type { FC } from 'react';
 import { useContext } from 'react';
-import { Typography, Skeleton, Carousel } from 'antd';
+import { Typography, Skeleton, Carousel, Badge } from 'antd';
 import type { Extra, Icon } from './util';
 import SiteContext from '../../../theme/slots/SiteContext';
 import { getCarouselStyle, useSiteData } from './util';
@@ -27,7 +27,6 @@ const useStyle = createStyles(({ token }) => {
       padding-inline: ${token.paddingLG}px;
     `,
     cardItem: css`
-      width: 33%;
       &:hover {
         box-shadow: ${token.boxShadowCard};
       }
@@ -45,6 +44,9 @@ const useStyle = createStyles(({ token }) => {
       column-gap: ${token.paddingMD * 2}px;
       align-items: stretch;
       text-align: start;
+      > * {
+        width: calc((100% - ${token.marginXXL * 2}px) / 3);
+      }
     `,
     carousel,
   };
@@ -65,7 +67,7 @@ const RecommendItem = ({ extra, index, icons, className }: RecommendItemProps) =
   }
   const icon = icons.find((i) => i.name === extra.source);
 
-  return (
+  const card = (
     <a
       key={extra?.title}
       href={extra.href}
@@ -83,6 +85,16 @@ const RecommendItem = ({ extra, index, icons, className }: RecommendItemProps) =
       </div>
     </a>
   );
+
+  if (index === 0) {
+    return (
+      <Badge.Ribbon text="HOT" color="red">
+        {card}
+      </Badge.Ribbon>
+    );
+  }
+
+  return card;
 };
 
 export const BannerRecommendsFallback: FC = () => {
@@ -93,7 +105,7 @@ export const BannerRecommendsFallback: FC = () => {
 
   return isMobile ? (
     <Carousel className={styles.carousel}>
-      {list.map((extra, index) => (
+      {list.map((_, index) => (
         <div key={index}>
           <Skeleton active style={{ padding: '0 24px' }} />
         </div>
@@ -114,8 +126,8 @@ export default function BannerRecommends() {
   const { isMobile } = React.useContext(SiteContext);
   const data = useSiteData();
   const extras = data?.extras?.[lang];
-  const icons = data?.icons;
-  const first3 = extras.length === 0 ? Array(3).fill(null) : extras.slice(0, 3);
+  const icons = data?.icons || [];
+  const first3 = !extras || extras.length === 0 ? Array(3).fill(null) : extras.slice(0, 3);
 
   return (
     <div>

.dumi/pages/index/components/PreviewBanner/index.tsx

@@ -42,7 +42,7 @@ const useStyle = () => {
 
     return {
       holder: css`
-        height: 520px;
+        height: 640px;
         display: flex;
         flex-direction: column;
         align-items: center;

.dumi/pages/index/components/RecommendsOld.tsx

@@ -1,99 +0,0 @@
-import * as React from 'react';
-import { createStyles, css, useTheme } from 'antd-style';
-import { Row, Col, Typography } from 'antd';
-import type { Recommendation } from './util';
-
-const useStyle = createStyles(({ token }) => ({
-  card: css`
-      height: 300px;
-      background-size: 100% 100%;
-      background-position: center;
-      position: relative;
-      overflow: hidden;
-
-      &:before {
-        position: absolute;
-        background: linear-gradient(
-          rgba(0, 0, 0, 0) 0%,
-          rgba(0, 0, 0, 0.25) 40%,
-          rgba(0, 0, 0, 0.65) 100%
-        );
-        opacity: 0.3;
-        transition: all 0.5s;
-        content: '';
-        pointer-events: none;
-        inset: 0;
-      }
-
-      &:hover {
-        &:before {
-          opacity: 1;
-        }
-
-        .intro {
-          transform: translate3d(0, 0, 0);
-
-          h4${token.antCls}-typography {
-            padding-bottom: 0;
-          }
-        }
-      }
-
-      .intro {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        transform: translate3d(0, 100%, 0);
-        transition: all ${token.motionDurationSlow};
-
-        ${token.antCls}-typography {
-          margin: 0;
-          color: #fff;
-          font-weight: normal;
-          text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
-          transition: all ${token.motionDurationSlow};
-        }
-
-        h4${token.antCls}-typography {
-          position: absolute;
-          padding: 0 ${token.paddingMD}px ${token.paddingMD}px;
-          transform: translate3d(0, -100%, 0);
-        }
-
-        div${token.antCls}-typography {
-          padding: ${token.paddingXS}px ${token.paddingMD}px ${token.paddingLG}px;
-        }
-      }
-    `,
-}));
-
-export interface RecommendsProps {
-  recommendations?: Recommendation[];
-}
-
-export default function Recommends({ recommendations = [] }: RecommendsProps) {
-  const token = useTheme();
-  const { styles } = useStyle();
-
-  return (
-    <Row gutter={token.marginLG}>
-      {new Array(3).fill(null).map((_, index) => {
-        const data = recommendations[index];
-
-        return (
-          <Col key={index} span={8}>
-            {data ? (
-              <div className={styles.card} style={{ backgroundImage: `url(${data.img})` }}>
-                <div className="intro">
-                  <Typography.Title level={4}>{data?.title}</Typography.Title>
-                  <Typography.Paragraph>{data.description}</Typography.Paragraph>
-                </div>
-              </div>
-            ) : null}
-          </Col>
-        );
-      })}
-    </Row>
-  );
-}

.dumi/pages/index/index.tsx

@@ -4,7 +4,7 @@ import { createStyles, css } from 'antd-style';
 
 import useDark from '../../hooks/useDark';
 import useLocale from '../../hooks/useLocale';
-// import BannerRecommends, { BannerRecommendsFallback } from './components/BannerRecommends';
+import BannerRecommends, { BannerRecommendsFallback } from './components/BannerRecommends';
 import PreviewBanner from './components/PreviewBanner';
 import Group from './components/Group';
 
@@ -46,10 +46,9 @@ const Homepage: React.FC = () => {
   return (
     <section>
       <PreviewBanner>
-        {/* 文档很久没更新了，先藏起来 */}
-        {/* <Suspense fallback={<BannerRecommendsFallback />}>
+        <Suspense fallback={<BannerRecommendsFallback />}>
           <BannerRecommends />
-        </Suspense> */}
+        </Suspense>
       </PreviewBanner>
 
       <div>