feat(antdsite): add footer for all pages.

YvesCoding · Aug 5, 2019 · 867b5bc · 867b5bc
1 parent 84873c8
commit 867b5bc
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 95 deletions.
diff --git a/packages/antdsite/__default__/default-config.js b/packages/antdsite/__default__/default-config.js
@@ -6,6 +6,7 @@ module.exports = {
   description: '',
   lang: 'en-US',
   head: [],
+  footer: null,
   themeConfig: {
     themeColors: null,
     repo: null,

diff --git a/packages/antdsite/lib/gatsby/createSchemaCustomization.js b/packages/antdsite/lib/gatsby/createSchemaCustomization.js
@@ -18,7 +18,6 @@ module.exports = ({ actions }) => {
       actionText: String
       actionLink: String
       showStar: Boolean
-      footer: String
       features: [HomeFeature]
       maxTocDeep: Int
       editLink: String

diff --git a/packages/antdsite/src/default-theme/assets/footer.less b/packages/antdsite/src/default-theme/assets/footer.less
@@ -7,7 +7,7 @@ footer {
   font-size: 14px;
   background-color: #000;
   position: relative;
-  color: rgba(255, 255, 255, 0.65);
+  color: rgba(255, 255, 255, 0.4);
   .ant-row {
     text-align: center;
     .footer-center {

diff --git a/packages/antdsite/src/default-theme/assets/markdown.less b/packages/antdsite/src/default-theme/assets/markdown.less
@@ -20,6 +20,7 @@
 
 .markdown p > img {
   margin: 2.4em 1em;
+  box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
 }
 
 .markdown h1.__internal {

diff --git a/packages/antdsite/src/default-theme/assets/page-nav.less b/packages/antdsite/src/default-theme/assets/page-nav.less
@@ -1,9 +1,7 @@
 .prev-next-nav {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: ~'calc(100% - 194px - 64px)';
+  margin-right: 64px;
   margin-left: 64px;
+  overflow: hidden;
   font-size: 14px;
   border-top: 1px solid @site-border-color-split;
 

diff --git a/packages/antdsite/src/default-theme/assets/responsive.less b/packages/antdsite/src/default-theme/assets/responsive.less
@@ -11,16 +11,6 @@
   cursor: pointer;
 }
 
-@media only screen and (min-width: 1440px) and (max-width: 1599px) {
-  .main-wrapper > .ant-row > .ant-col-xl-5 {
-    width: 274px;
-  }
-
-  #header .ant-row .ant-col-xl-5 {
-    width: 274px;
-  }
-}
-
 @media only screen and (max-width: 1300px) {
   #search-box {
     display: none;
@@ -204,8 +194,8 @@
   }
 
   .prev-next-nav {
-    margin-left: 16px;
     width: ~'calc(100% - 32px)';
+    margin-left: 16px;
   }
   .drawer {
     .ant-menu-inline .ant-menu-item:after,

diff --git a/packages/antdsite/src/default-theme/components/home/Banner.jsx b/packages/antdsite/src/default-theme/components/home/Banner.jsx
@@ -2,38 +2,49 @@ import React from 'react';
 import GitHubButton from 'react-github-button-fix-iebug';
 import { Button } from 'antd';
 import { Link } from 'gatsby';
+import { PageContext } from 'antdsite';
 
 function Banner(props) {
-  const {
-    data: {
-      mdx: { frontmatter },
-    },
-    currentLocaleWebConfig,
-  } = props;
-  const repoAddr = currentLocaleWebConfig.themeConfig.repo;
-  const [namespace, repo] = repoAddr ? repoAddr.split('/') : [null, null];
   return (
-    <div className="banner-wrapper">
-      {(frontmatter.heroImage || currentLocaleWebConfig.logo) && (
-        <div className="banner-logo">
-          <img src={frontmatter.heroImage || currentLocaleWebConfig.logo} alt="Hero" />
-        </div>
-      )}
-      <div className="banner-title-wrapper">
-        <h1 key="h1">{currentLocaleWebConfig.title}</h1>
-        <p key="content">{currentLocaleWebConfig.description}</p>
-        <div key="button" className="button-wrapper">
-          <Link to={frontmatter.actionLink}>
-            <Button style={{ margin: '0 16px' }} type="primary" ghost>
-              {frontmatter.actionText}
-            </Button>
-          </Link>
-          {frontmatter.showStar && repo && namespace ? (
-            <GitHubButton key="github-button" type="stargazers" namespace={namespace} repo={repo} />
-          ) : null}
-        </div>
-      </div>
-    </div>
+    <PageContext.Consumer>
+      {context => {
+        const {
+          currentPageInfo: { frontmatter },
+          currentLocaleWebConfig
+        } = context;
+        const repoAddr = currentLocaleWebConfig.themeConfig.repo;
+        const [namespace, repo] = repoAddr ? repoAddr.split('/') : [null, null];
+
+        return (
+          <div className="banner-wrapper">
+            {(frontmatter.heroImage || currentLocaleWebConfig.logo) && (
+              <div className="banner-logo">
+                <img src={frontmatter.heroImage || currentLocaleWebConfig.logo} alt="Hero" />
+              </div>
+            )}
+            <div className="banner-title-wrapper">
+              <h1 key="h1">{currentLocaleWebConfig.title}</h1>
+              <p key="content">{currentLocaleWebConfig.description}</p>
+              <div key="button" className="button-wrapper">
+                <Link to={frontmatter.actionLink}>
+                  <Button style={{ margin: '0 16px' }} type="primary" ghost>
+                    {frontmatter.actionText}
+                  </Button>
+                </Link>
+                {frontmatter.showStar && repo && namespace ? (
+                  <GitHubButton
+                    key="github-button"
+                    type="stargazers"
+                    namespace={namespace}
+                    repo={repo}
+                  />
+                ) : null}
+              </div>
+            </div>
+          </div>
+        );
+      }}
+    </PageContext.Consumer>
   );
 }
 

diff --git a/packages/antdsite/src/default-theme/components/home/Features.jsx b/packages/antdsite/src/default-theme/components/home/Features.jsx
@@ -1,23 +1,24 @@
 /* eslint-disable react/forbid-prop-types */
 /* eslint-disable react/jsx-one-expression-per-line */
 import React from 'react';
+import { PageContext } from 'antdsite';
+
+class Features extends React.PureComponent {
+  static contextType = PageContext;
 
-class Page1 extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-      hoverNum: null,
+      hoverNum: null
     };
   }
 
   render() {
     const {
-      data: {
-        mdx: {
-          frontmatter: { features },
-        },
-      },
-    } = this.props;
+      currentPageInfo: {
+        frontmatter: { features }
+      }
+    } = this.context;
     let children = [];
 
     features &&
@@ -27,12 +28,12 @@ class Page1 extends React.PureComponent {
             <div className="page1-box">
               <h2
                 dangerouslySetInnerHTML={{
-                  __html: item.title,
+                  __html: item.title
                 }}
               ></h2>
               <p
                 dangerouslySetInnerHTML={{
-                  __html: item.details,
+                  __html: item.details
                 }}
               ></p>
             </div>
@@ -62,4 +63,4 @@ class Page1 extends React.PureComponent {
   }
 }
 
-export default Page1;
+export default Features;
diff --git a/packages/antdsite/src/default-theme/layout/footer.tsx b/packages/antdsite/src/default-theme/layout/footer.tsx
@@ -1,24 +1,19 @@
 /* eslint-disable react/jsx-one-expression-per-line */
 import React from 'react';
 class Footer extends React.Component<{
-  data: {
-    mdx: {
-      frontmatter: any;
-    };
-  };
+  footeText: string;
 }> {
   render() {
-    const {
-      data: {
-        mdx: {
-          frontmatter: { footer },
-        },
-      },
-    } = this.props;
+    const { footeText } = this.props;
 
-    return footer ? (
+    return footeText ? (
       <footer id="footer">
-        <div className="bottom-bar">{footer}</div>
+        <div
+          className="bottom-bar"
+          dangerouslySetInnerHTML={{
+            __html: footeText
+          }}
+        ></div>
       </footer>
     ) : null;
   }

diff --git a/packages/antdsite/src/default-theme/layout/layout.tsx b/packages/antdsite/src/default-theme/layout/layout.tsx
@@ -7,6 +7,7 @@ import { BackTop } from 'antd';
 import { IAllMdxData, IMdxData } from '../../templates';
 import MainContent from 'antdsite-main-content';
 import HomePage from 'antdsite-home';
+import { PageContext } from 'antdsite';
 
 export interface LayoutProps {
   pageContext: {
@@ -24,38 +25,46 @@ export interface LayoutProps {
 interface LayoutState {}
 
 export default class Layout extends React.Component<LayoutProps, LayoutState> {
+  static contextType = PageContext;
+
   constructor(props: LayoutProps) {
     super(props);
   }
 
   preSlug: String;
 
   render() {
-    const { children, pageContext, ...restProps } = this.props;
-    const { webConfig, slug, isWebsiteHome } = pageContext;
-    const { locales } = webConfig;
+    const { currentLocaleWebConfig: webConfig, slug, isWebsiteHome } = this.context;
+
     const { showBackToTop } = webConfig.themeConfig;
+    const { locales, footer: footerText } = webConfig;
+
+    const footer = <Footer footeText={footerText} ref="footer" />;
 
     return (
       <div
         className={`page-wrapper ${((!locales && slug == '/') ||
           (locales && Object.keys(locales).includes(slug))) &&
           'index-page-wrapper'}`}
       >
-        <Header {...restProps} ref="header" />
+        <Header {...this.props} ref="header" />
         <div ref="content">
-          {isWebsiteHome ? <HomePage {...restProps} /> : <MainContent {...restProps} />}
+          {isWebsiteHome ? (
+            <HomePage {...this.props} />
+          ) : (
+            <MainContent {...this.props} footer={footer} />
+          )}
         </div>
 
-        <Footer {...restProps} ref="footer" />
+        {isWebsiteHome ? footer : null}
         {showBackToTop ? <BackTop /> : null}
       </div>
     );
   }
 
   componentDidMount() {
     this.ajustContentHeight();
-    this.chekScrollPosition(this.props.pageContext.slug);
+    this.chekScrollPosition(this.context.slug);
     window.addEventListener('resize', this.ajustContentHeight);
   }
 
@@ -64,7 +73,7 @@ export default class Layout extends React.Component<LayoutProps, LayoutState> {
   }
 
   componentDidUpdate() {
-    this.chekScrollPosition(this.props.pageContext.slug);
+    this.chekScrollPosition(this.context.slug);
     this.ajustContentHeight();
   }