📖 fix site description and rtl className

scripts/check-site.js

@@ -43,11 +43,7 @@ describe('site test', () => {
   const expectComponent = async component => {
     const { status, $ } = await render(`/${component}/`);
     expect(status).toBe(200);
-    expect(
-      $('.markdown > h1')
-        .text()
-        .toLowerCase(),
-    ).toMatch(handleComponentName(component));
+    expect($('.markdown > h1').text().toLowerCase()).toMatch(handleComponentName(component));
   };
 
   beforeAll(() => {
@@ -67,13 +63,15 @@ describe('site test', () => {
 
   it('Basic Pages en', async () => {
     const { status, $ } = await render('/');
-    expect($('title').text()).toEqual(`Ant Design - ${enUS.messages['app.home.slogan']}`);
+    expect($('title').text()).toEqual(
+      `Ant Design - The world's second most popular React UI framework`,
+    );
     expect(status).toBe(200);
   });
 
   it('Basic Pages zh', async () => {
     const { status, $ } = await render('/index-cn');
-    expect($('title').text()).toEqual(`Ant Design - ${zhCN.messages['app.home.slogan']}`);
+    expect($('title').text()).toEqual(`Ant Design - 一套企业级 UI 设计语言和 React 组件库`);
     expect(status).toBe(200);
   });
 

site/theme/en-US.js

@@ -31,7 +31,6 @@ module.exports = {
     'app.demo.codesandbox': 'Open in CodeSandbox',
     'app.demo.stackblitz': 'Open in Stackblitz',
     'app.demo.riddle': 'Open in Riddle',
-    'app.home.slogan': 'A UI Design Language and React UI library',
     'app.home.introduce':
       'A design system for enterprise-level products. Create an efficient and enjoyable work experience.',
     'app.home.recommend': 'Recommend',

site/theme/static/common.less

@@ -1,3 +1,7 @@
+html.rtl {
+  direction: rtl;
+}
+
 body {
   color: @site-text-color;
   font-size: 14px;
@@ -171,15 +175,6 @@ a {
   height: 100%;
   transition: transform 0.3s @ease-in-out-circ;
 }
-.page-wrapper {
-  width: 100%;
-  padding: 0;
-  overflow: hidden;
-
-  &-rtl {
-    direction: rtl;
-  }
-}
 
 .drawer-content {
   padding: 40px 0;
@@ -224,7 +219,7 @@ a {
     color: #000;
     background-color: #fff;
     box-shadow: @shadow-2;
-    transition: color .3s;
+    transition: color 0.3s;
     &:hover {
       color: @primary-color;
     }

site/theme/static/footer.less

@@ -17,14 +17,14 @@
     justify-content: space-between;
   }
   &-item {
-    .page-wrapper-rtl & {
+    html.rtl & {
       display: flex;
       justify-content: flex-start;
       text-align: right;
     }
 
     &-icon {
-      .page-wrapper-rtl & {
+      html.rtl & {
         margin-right: 0;
         margin-left: 0.4em;
       }

site/theme/static/header.less

@@ -17,7 +17,7 @@
       padding-right: 16px;
       padding-left: 40px;
 
-      .page-wrapper-rtl & {
+      html.rtl & {
         padding-right: 40px;
         padding-left: 16px;
       }

site/theme/template/Home/index.less

@@ -27,7 +27,7 @@
       font-weight: 200;
       font-size: 16px;
 
-      .page-wrapper-rtl & {
+      html.rtl & {
         float: left;
       }
     }

site/theme/template/Layout/index.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import { IntlProvider } from 'react-intl';
+import classNames from 'classnames';
+import { IntlProvider, formateMessage } from 'react-intl';
 import { presetPalettes, presetDarkPalettes } from '@ant-design/colors';
 import themeSwitcher from 'theme-switcher';
 import { setTwoToneColor } from '@ant-design/icons';
@@ -205,20 +206,22 @@ export default class Layout extends React.Component {
     const title =
       appLocale.locale === 'zh-CN'
         ? 'Ant Design - 一套企业级 UI 设计语言和 React 组件库'
-        : 'Ant Design - A UI Design Language and React UI library';
+        : "Ant Design - The world's second most popular React UI frameworky";
     const description =
       appLocale.locale === 'zh-CN'
         ? '基于 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';
-    let pageWrapperClass = 'page-wrapper';
-    if (direction === 'rtl') {
-      pageWrapperClass += ' page-wrapper-rtl';
-    }
     return (
       <SiteContext.Provider value={{ isMobile }}>
         <HelmetProvider context={helmetContext}>
           <Helmet encodeSpecialCharacters={false}>
-            <html lang={appLocale.locale === 'zh-CN' ? 'zh' : 'en'} data-direction={direction} />
+            <html
+              lang={appLocale.locale === 'zh-CN' ? 'zh' : 'en'}
+              data-direction={direction}
+              className={classNames({
+                [`rtl`]: direction === 'rtl',
+              })}
+            />
             <title>{title}</title>
             <link
               rel="apple-touch-icon-precomposed"
@@ -242,10 +245,8 @@ export default class Layout extends React.Component {
               locale={appLocale.locale === 'zh-CN' ? zhCN : null}
               direction={direction}
             >
-              <div className={pageWrapperClass}>
-                <Header {...restProps} changeDirection={this.changeDirection} />
-                {children}
-              </div>
+              <Header {...restProps} changeDirection={this.changeDirection} />
+              {children}
             </ConfigProvider>
           </IntlProvider>
         </HelmetProvider>

site/theme/zh-CN.js

@@ -31,7 +31,6 @@ module.exports = {
     'app.demo.codesandbox': '在 CodeSandbox 中打开',
     'app.demo.stackblitz': '在 Stackblitz 中打开',
     'app.demo.riddle': '在 Riddle 中打开',
-    'app.home.slogan': '一套企业级 UI 设计语言和 React 组件库',
     'app.home.introduce': '企业级产品设计体系，创造高效愉悦的工作体验',
     'app.home.recommend': '精彩推荐',
     'app.home.popularize': '推广',