docs: optimize site (#23617)

site/theme/template/Home/Banner/index.less

@@ -48,6 +48,10 @@
         width: 18px;
         margin-right: 8px;
         vertical-align: text-bottom;
+        .rtl & {
+          margin-right: 0;
+          margin-left: 8px;
+        }
       }
     }
 

site/theme/template/Home/DesignPage/index.less

@@ -23,9 +23,8 @@
   }
 
   .design-card-detail {
-    position: absolute;
-    bottom: 0;
-    left: 0;
+    display: block;
+    margin-top: 12px;
   }
 
   .design-values {

site/theme/template/Home/DesignPage/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Row, Col, Typography, Card } from 'antd';
-import { RightOutlined } from '@ant-design/icons';
+import { RightOutlined, LeftOutlined } from '@ant-design/icons';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'bisheng/router';
 import { getLocalizedPathname } from '../../utils';
@@ -9,6 +9,7 @@ import Certainty from './Certainty';
 import Meaningful from './Meaningful';
 import Growth from './Growth';
 import Natural from './Natural';
+import SiteContext from '../../Layout/SiteContext';
 
 const { Title } = Typography;
 
@@ -97,6 +98,12 @@ const MiniPanel = ({
 export default function DesignPage() {
   const { locale } = useIntl();
   const isZhCN = locale === 'zh-CN';
+  const { direction } = React.useContext(SiteContext);
+  let IconComponent = <RightOutlined className="home-link-arrow" />;
+
+  if (direction === 'rtl') {
+    IconComponent = <LeftOutlined className="home-link-arrow home-link-arrow-rtl" />;
+  }
 
   return (
     <div style={{ marginBottom: -28 }}>
@@ -118,7 +125,7 @@ export default function DesignPage() {
                   to={getLocalizedPathname('/docs/spec/values', isZhCN)}
                 >
                   <FormattedMessage id="app.home.detail" />
-                  <RightOutlined className="home-link-arrow" />
+                  {IconComponent}
                 </Link>
               </Col>
               <Col xs={24} sm={16}>
@@ -189,13 +196,13 @@ export default function DesignPage() {
                   <li>
                     <Link to={getLocalizedPathname('/docs/spec/colors', isZhCN)}>
                       <FormattedMessage id="app.home.global-style" />
-                      <RightOutlined className="home-link-arrow" />
+                      {IconComponent}
                     </Link>
                   </li>
                   <li>
                     <Link to={getLocalizedPathname('/docs/spec/overview', isZhCN)}>
                       <FormattedMessage id="app.home.design-patterns" />
-                      <RightOutlined className="home-link-arrow" />
+                      {IconComponent}
                     </Link>
                   </li>
                 </ul>
@@ -236,25 +243,29 @@ export default function DesignPage() {
                   <li>
                     <Link to={getLocalizedPathname('/docs/react/introduce', isZhCN)}>
                       Ant Design of React
-                      <RightOutlined className="home-link-arrow" />
+                      {IconComponent}
                     </Link>
                   </li>
                   <li>
                     <a href="https://ng.ant.design/" target="_blank" rel="noopener noreferrer">
                       Ant Design of Angular
-                      <RightOutlined className="home-link-arrow" />
+                      {IconComponent}
                     </a>
                   </li>
                   <li>
                     <a href="https://vue.ant.design/" target="_blank" rel="noopener noreferrer">
                       Ant Design of Vue
-                      <RightOutlined className="home-link-arrow" />
+                      {IconComponent}
                     </a>
                   </li>
                   <li>
-                    <a href="https://append-it.github.io/ant-design-blazor/" target="_blank" rel="noopener noreferrer">
+                    <a
+                      href="https://append-it.github.io/ant-design-blazor/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
                       Ant Design of Blazor
-                      <RightOutlined className="home-link-arrow" />
+                      {IconComponent}
                     </a>
                   </li>
                 </ul>

site/theme/template/Home/index.less

@@ -39,12 +39,21 @@
     font-size: 0.85em;
     opacity: 0.75;
     transition: all 0.2s;
+    &-rtl {
+      margin-right: 0.3em;
+      margin-left: 0;
+    }
   }
 
   a:hover .home-link-arrow {
     transform: translateX(3px);
     opacity: 1;
   }
+
+  a:hover .home-link-arrow-rtl {
+    transform: translateX(-3px);
+    opacity: 1;
+  }
 }
 
 @media (max-width: @screen-sm-min) {

site/theme/template/Layout/Header/More.tsx

@@ -65,7 +65,7 @@ export function getEcosystemGroup({ isZhCN }: SharedProps): React.ReactElement {
 
 export default (props: SharedProps) => {
   const menu = <Menu>{getEcosystemGroup(props)}</Menu>;
-  const DownStyle = props.isRTL ? '-1px 2px 0 0' : '-1px 0 0 2px';
+  const downstyle = props.isRTL ? '-1px 2px 0 0' : '-1px 0 0 2px';
   return (
     <Dropdown overlay={menu} placement="bottomRight">
       <Button size="small" className="header-button">
@@ -73,7 +73,7 @@ export default (props: SharedProps) => {
         <DownOutlined
           style={{
             fontSize: '9px',
-            margin: DownStyle,
+            margin: downstyle,
             verticalAlign: 'middle',
           }}
         />

site/theme/template/Layout/SiteContext.tsx

@@ -2,10 +2,12 @@ import * as React from 'react';
 
 export interface SiteContextProps {
   isMobile: boolean;
+  direction: string;
 }
 
 const SiteContext = React.createContext<SiteContextProps>({
   isMobile: false,
+  direction: 'ltr',
 });
 
 export default SiteContext;

site/theme/template/Layout/index.jsx

@@ -212,7 +212,7 @@ export default class Layout extends React.Component {
         ? '基于 Ant Design 设计体系的 React UI 组件库，用于研发企业级中后台产品。'
         : 'An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises';
     return (
-      <SiteContext.Provider value={{ isMobile }}>
+      <SiteContext.Provider value={{ isMobile, direction }}>
         <HelmetProvider context={helmetContext}>
           <Helmet encodeSpecialCharacters={false}>
             <html

site/theme/zh-CN.js

@@ -55,7 +55,7 @@ module.exports = {
     'app.home.design-language': '设计语言',
     'app.home.product-antv-slogan': '全新一代数据可视化解决方案',
     'app.home.product-pro-slogan': '开箱即用的中台前端/设计解决方案',
-    'app.home.product-mobile-slogan': '一个基于 Preact / React / React Native 的 UI 组件库',
+    'app.home.product-mobile-slogan': '基于 Preact / React / React Native 的 UI 组件库',
     'app.home.product-hitu': '海兔',
     'app.home.product-hitu-slogan': '全新一代图形化解决方案',
     'app.home.product-kitchen-slogan': '一款为设计者提升工作效率的 Sketch 工具集',