feat(antdsite): add theme.

packages/antdsite/index.js

@@ -1,30 +1 @@
-/* eslint no-console:0 */
-function camelCase(name) {
-  return (
-    name.charAt(0).toUpperCase() +
-    name.slice(1).replace(/-(\w)/g, (m, n) => {
-      return n.toUpperCase();
-    })
-  );
-}
-
-// Just import style for https://github.com/ant-design/ant-design/issues/3745
-const req = require.context('./components', true, /^\.\/[^_][\w-]+\/style\/index\.tsx?$/);
-
-req.keys().forEach(mod => {
-  let v = req(mod);
-  if (v && v.default) {
-    v = v.default;
-  }
-  const match = mod.match(/^\.\/([^_][\w-]+)\/index\.tsx?$/);
-  if (match && match[1]) {
-    if (match[1] === 'message' || match[1] === 'notification') {
-      // message & notification should not be capitalized
-      exports[match[1]] = v;
-    } else {
-      exports[camelCase(match[1])] = v;
-    }
-  }
-});
-
-module.exports = require('./components');
+export { PageContext } from './templates/PageContext';

packages/antdsite/lib/gatsby/createPages.js

@@ -13,7 +13,8 @@ const path = require('path');
 function isHome(frontmatter, slug) {
   return (
     frontmatter.home === true &&
-    ((themeConfig.locales && Object.keys(themeConfig.locales).indexOf(slug) !== -1) || slug === '/')
+    ((themeConfig.locales && Object.keys(themeConfig.locales).indexOf(slug) !== -1) ||
+      slug === webConfig.base)
   );
 }
 
@@ -27,8 +28,7 @@ module.exports = async ({ graphql, actions }) => {
   const { createPage, createRedirect } = actions;
   // Used to detect and prevent duplicate redirects
 
-  const docsTemplate = resolve(__dirname, '../../src/templates/docs.tsx');
-  const indexTemplate = resolve(__dirname, '../../src/templates/home.tsx');
+  const template = resolve(__dirname, '../../src/templates/index.tsx');
 
   // Redirect /index.html to root.
   createRedirect({
@@ -70,37 +70,32 @@ module.exports = async ({ graphql, actions }) => {
   edges.forEach(edge => {
     const { fields, frontmatter } = edge.node;
     const { slug } = fields;
-    if (!isHome(frontmatter, slug)) {
-      if (frontmatter.home === true) {
-        redirects[resolveDirPath(slug)] = slug;
-        redirects[resolveDirPath(slug, true)] = slug;
-      }
+    let isWebsiteHome = false;
+
+    if (isHome(frontmatter, slug)) {
+      isWebsiteHome = true;
+    }
 
-      const createArticlePage = path => {
-        return createPage({
-          path,
-          component: docsTemplate,
-          context: {
-            webConfig,
-            slug,
-            maxTocDeep: frontmatter.maxTocDeep || webConfig.themeConfig.maxTocDeep,
-          },
-        });
-      };
-
-      // Register primary URL.
-      createArticlePage(slug);
-    } else {
-      createPage({
-        path: slug,
-        component: indexTemplate,
+    if (frontmatter.home === true && !isWebsiteHome) {
+      redirects[resolveDirPath(slug)] = slug;
+      redirects[resolveDirPath(slug, true)] = slug;
+    }
+
+    const createArticlePage = path => {
+      return createPage({
+        path,
+        component: template,
         context: {
+          isWebsiteHome,
           webConfig,
           slug,
-          maxTocDeep: webConfig.themeConfig.maxTocDeep,
+          maxTocDeep: frontmatter.maxTocDeep || webConfig.themeConfig.maxTocDeep,
         },
       });
-    }
+    };
+
+    // Register primary URL.
+    createArticlePage(slug);
   });
 
   Object.keys(redirects).map(path => {

packages/antdsite/lib/gatsby/onCreateWebpackConfig.js

@@ -1,4 +1,7 @@
-module.exports = ({ stage, actions, loaders, getConfig }) => {
+const { resolveLayouts } = require('../util');
+
+module.exports = ({ stage, actions, loaders }) => {
+  resolveLayouts(actions);
   if (stage === 'develop') {
     actions.setWebpackConfig({
       module: {

packages/antdsite/lib/util.js

@@ -1,8 +1,11 @@
 const path = require('path');
 const defaultConfig = require(path.resolve(__dirname, '../__default__/default-config'));
 const chalk = require('chalk');
+const fs = require('fs');
+
+const configName = '.antdsite/config.js';
+const themeName = '.antdsite/theme';
 
-const configName = '.antdsite.js';
 let userConfig;
 
 module.exports.getUserConfig = () => {
@@ -92,3 +95,35 @@ function validateConfig(config) {
     }
   }
 }
+
+function componentExist(path) {
+  return (
+    fs.existsSync(path + '.js') ||
+    fs.existsSync(path + '.jsx') ||
+    fs.existsSync(path + '.ts') ||
+    fs.existsSync(path + '.tsx')
+  );
+}
+
+function getLayoutPath(layoutName) {
+  const userDefinedLayout = path.resolve(process.cwd(), `${themeName}/layout/${layoutName}`);
+  if (componentExist(userDefinedLayout)) {
+    return userDefinedLayout;
+  } else {
+    return path.resolve(__dirname, `../src/default-theme/layout/${layoutName}.tsx`);
+  }
+}
+
+module.exports.resolveLayouts = function(actions) {
+  const allLayouts = ['layout', 'header', 'home', 'footer', 'main-content'];
+  allLayouts.forEach(layout => {
+    const layoutPath = getLayoutPath(layout);
+    actions.setWebpackConfig({
+      resolve: {
+        alias: {
+          [`antdsite-${layout}`]: layoutPath,
+        },
+      },
+    });
+  });
+};

packages/antdsite/src/components/content/Article.tsx → packages/antdsite/src/default-theme/components/content/Article.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Anchor } from 'antd';
 import EditButton from './EditButton';
-import { OneToc } from '../../templates/docs';
+import { OneToc } from '../../../templates';
 import moment from 'moment';
 import AvatarList from './AvatarList';
-import { PageContext } from '../../layout/PageContext';
+import { PageContext } from 'antdsite/src/templates/PageContext';
 import SEO from '../SEO/SEO';
 import MDXRenderer from 'gatsby-mdx-fix/mdx-renderer';
 

packages/antdsite/src/components/search-box/index.tsx → packages/antdsite/src/default-theme/components/search-box/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { List, Input, Icon, Breadcrumb } from 'antd';
 import { PageInfo } from '../utils';
-import { OneToc } from '../../templates/docs';
+import { OneToc } from '../../../templates';
 import { Link } from 'gatsby';
 
 type filterDatas = {

packages/antdsite/src/components/utils.ts → packages/antdsite/src/default-theme/components/utils.ts

@@ -1,4 +1,4 @@
-import { IAllMdxData, Edges, IGraphqlFrontmatterData, Toc, PageEdge } from '../templates/docs';
+import { IAllMdxData, Edges, IGraphqlFrontmatterData, Toc, PageEdge } from '../../templates';
 
 export function getCurrentLoacle(webConfig: any, slug: string) {
   const locales = webConfig.themeConfig.locales;

packages/antdsite/src/layout/Footer.tsx → packages/antdsite/src/default-theme/layout/footer.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/jsx-one-expression-per-line */
 import React from 'react';
-import * as utils from '../components/utils';
 class Footer extends React.Component<{
   data: {
     mdx: {

packages/antdsite/src/layout/Header.tsx → packages/antdsite/src/default-theme/layout/header.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Link } from 'gatsby';
 import * as utils from '../components/utils';
 import { Row, Col, Icon, Input, Menu, Button, Popover, Dropdown, Affix, Badge } from 'antd';
-import { PageContext } from './PageContext';
+import { PageContext } from 'antdsite/src/templates/PageContext';
 import SearchBox from '../components/search-box';
 
 interface HeaderProps {

packages/antdsite/src/components/home/index.jsx → packages/antdsite/src/default-theme/layout/home.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import SEO from '../SEO/SEO';
+import SEO from '../components/SEO/SEO';
 
-import Banner from './Banner';
-import Features from './Features';
-import HomeRest from './HomeRest';
-import { PageContext } from '../../layout/PageContext';
+import Banner from '../components/home/Banner.jsx';
+import Features from '../components/home/Features.jsx';
+import HomeRest from '../components/home/HomeRest.jsx';
+import { PageContext } from 'antdsite/src/templates/PageContext';
 
-function Home(props) {
+function Home(props: any) {
   return (
     <PageContext.Consumer>
       {value => {
         const { currentLocaleWebConfig } = value;
-        const { title, description } = currentLocaleWebConfig;
+        const { title, description } = currentLocaleWebConfig as any;
 
         return (
           <>

packages/antdsite/src/default-theme/layout/index.d.ts

@@ -0,0 +1,5 @@
+declare module 'antdsite-layout';
+declare module 'antdsite-header';
+declare module 'antdsite-footer';
+declare module 'antdsite-main-content';
+declare module 'antdsite-home';

packages/antdsite/src/layout/index.tsx → packages/antdsite/src/default-theme/layout/layout.tsx

@@ -1,37 +1,36 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import Media from 'react-media';
 import '../assets/style';
-import Header from './Header';
-import Footer from './Footer';
-import { PageContext } from './PageContext';
-import { getcurrentLocaleConfigBySlug, resolveSidebarItems } from '../components/utils';
+import Header from 'antdsite-header';
+import Footer from 'antdsite-footer';
 import { BackTop } from 'antd';
-import { IAllMdxData, IMdxData } from '../templates/docs';
+import { IAllMdxData, IMdxData } from '../../templates';
+import MainContent from 'antdsite-main-content';
+import HomePage from 'antdsite-home';
 
-interface LayoutProps {
+export interface LayoutProps {
   pageContext: {
     webConfig: any;
     slug: string;
+    isWebsiteHome: boolean;
   };
   data: {
     mdx: IMdxData;
     allMdx: IAllMdxData;
   };
   isMobile: boolean;
-  children: React.ReactElement<LayoutProps>;
 }
 
 interface LayoutState {}
 
-export class Layout extends React.Component<LayoutProps, LayoutState> {
+export default class Layout extends React.Component<LayoutProps, LayoutState> {
   constructor(props: LayoutProps) {
     super(props);
   }
 
   render() {
     const { children, pageContext, ...restProps } = this.props;
-    const { webConfig, slug } = pageContext;
+    const { webConfig, slug, isWebsiteHome } = pageContext;
     const { locales } = webConfig;
     const { showBackToTop } = webConfig.themeConfig;
 
@@ -42,11 +41,10 @@ export class Layout extends React.Component<LayoutProps, LayoutState> {
           'index-page-wrapper'}`}
       >
         <Header {...restProps} ref="header" />
-        {React.cloneElement(children, {
-          ...children.props,
-          isMobile: restProps.isMobile,
-          ref: 'content',
-        })}
+        <div ref="content">
+          {isWebsiteHome ? <HomePage {...restProps} /> : <MainContent {...restProps} />}
+        </div>
+
         <Footer {...restProps} ref="footer" />
         {showBackToTop ? <BackTop /> : null}
       </div>
@@ -79,36 +77,3 @@ export class Layout extends React.Component<LayoutProps, LayoutState> {
       'px';
   };
 }
-
-const WrapperLayout = (props: LayoutProps) => {
-  const { pageContext } = props;
-  const { currentLocaleWebConfig } = getcurrentLocaleConfigBySlug(
-    pageContext.webConfig,
-    pageContext.slug
-  );
-
-  const sidebarItems = resolveSidebarItems(
-    props.data.allMdx,
-    pageContext.webConfig,
-    pageContext.slug
-  );
-
-  return (
-    <PageContext.Provider
-      value={{
-        ...pageContext,
-        currentLocaleWebConfig,
-        ...sidebarItems,
-        currentPageInfo: props.data.mdx,
-      }}
-    >
-      <Media query="(max-width: 996px)">
-        {isMobile => {
-          const isNode = typeof window === `undefined`;
-          return <Layout {...props} isMobile={isMobile && !isNode} />;
-        }}
-      </Media>
-    </PageContext.Provider>
-  );
-};
-export default WrapperLayout;

packages/antdsite/src/components/content/MainContent.tsx → packages/antdsite/src/default-theme/layout/main-content.tsx

@@ -3,9 +3,9 @@ import { Link } from 'gatsby';
 import { Badge, Row, Col, Menu, Icon, Affix } from 'antd';
 import classNames from 'classnames';
 import MobileMenu from 'rc-drawer';
-import Article from './Article';
-import { PageInfo, getPageTitle } from '../utils';
-import { PageContext } from '../../layout/PageContext';
+import Article from '../components/content/Article';
+import { PageInfo, getPageTitle } from '../components/utils';
+import { PageContext } from 'antdsite/src/templates/PageContext';
 
 const { SubMenu } = Menu;