docs: update

YvesCoding · Jul 31, 2019 · d85b0ed · d85b0ed
1 parent 7ed32aa
commit d85b0ed
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 22 deletions.
diff --git a/packages/antdsite/__default__/default-config.js b/packages/antdsite/__default__/default-config.js
@@ -3,6 +3,7 @@ const path = require('path');
 module.exports = {
   base: '/',
   title: path.relative('../', process.cwd()),
+  description: '',
   head: [],
   themeConfig: {
     repo: null,

diff --git a/packages/antdsite/src/default-theme/components/utils.ts b/packages/antdsite/src/default-theme/components/utils.ts
@@ -179,7 +179,7 @@ export interface PageInfo extends IGraphqlFrontmatterData {
 
 function resolvePageSidebar(config: any, path: string, base: string, edges: Edges): PageInfo[] {
   return config
-    ? config.map((item: any) => resolveItem(item, edges, resolvePathWithBase(path, base), false))
+    ? config.map((item: any) => resolveItem(item, edges, resolvePathWithBase(path, base), 1))
     : [];
 }
 
@@ -224,27 +224,24 @@ export function resolveSidebarItems(
   }
 }
 
-function resolveItem(item: any, pages: Edges, base: string, isNested: boolean): PageInfo | null {
+function resolveItem(item: any, pages: Edges, base: string, nestedLevel: number): PageInfo | null {
   if (typeof item === 'string') {
     return resolvePage(pages, item, base);
   } else if (Array.isArray(item)) {
     return Object.assign(resolvePage(pages, item[0], base), {
       title: item[1],
     });
   } else {
-    if (isNested) {
-      console.error(
-        '[Gatsby-Theme-AntdSite] Nested sidebar groups are not supported. ' +
-          'Consider using navbar + categories instead.'
-      );
+    if (nestedLevel > 2) {
+      console.error('[AntdSite]: Currently antdsite sidebar only support max two levels nested. ');
 
       return null;
     }
 
     const children = item.children || [];
     return {
       title: item.title,
-      children: children.map((child: any) => resolveItem(child, pages, base, true)),
+      children: children.map((child: any) => resolveItem(child, pages, base, nestedLevel + 1)),
       collapsable: item.collapsable !== false,
     };
   }

diff --git a/packages/antdsite/src/default-theme/layout/main-content.tsx b/packages/antdsite/src/default-theme/layout/main-content.tsx
@@ -132,6 +132,20 @@ export default class MainContent extends React.PureComponent<MainContentProps, M
     }
   }
 
+  generaGroupItem = (footerNavIcons = {}, item: PageInfo) => {
+    const generateMenuItem = this.generateMenuItem.bind(this, footerNavIcons);
+
+    if (!item.children || !item.children.length) {
+      return generateMenuItem(item);
+    }
+
+    return (
+      <Menu.ItemGroup key={item.title} title={item.title}>
+        {item.children.map(generateMenuItem)}
+      </Menu.ItemGroup>
+    );
+  };
+
   generateSubMenuItems = (menus?: PageInfo[], footerNavIcons = {}) => {
     if (!menus) return [];
     const generateMenuItem = this.generateMenuItem.bind(this, footerNavIcons);
@@ -140,7 +154,7 @@ export default class MainContent extends React.PureComponent<MainContentProps, M
         return generateMenuItem(menu);
       }
 
-      const groupItems = menu.children.map(this.generateMenuItem.bind(this, footerNavIcons));
+      const groupItems = menu.children.map(item => this.generaGroupItem(footerNavIcons, item));
       return (
         <SubMenu title={menu.title} key={menu.title}>
           {groupItems}
@@ -159,12 +173,16 @@ export default class MainContent extends React.PureComponent<MainContentProps, M
   getPreAndNext = (menuItems: any) => {
     const { slug } = this.context;
 
-    const list = menuItems.length
-      ? Object.keys(menuItems).reduce((pre, key) => {
-          const ch = menuItems[key].props.children;
-          return pre.concat(ch.length ? ch : menuItems[key]);
-        }, [])
-      : menuItems;
+    function filterItem(items: any) {
+      return items.length
+        ? Object.keys(items).reduce((pre, key) => {
+            const ch = items[key].props.children;
+            return pre.concat(ch.length ? ch : items[key]);
+          }, [])
+        : items;
+    }
+
+    const list = filterItem(filterItem(menuItems));
 
     const index = list.findIndex((item: any) => {
       return item.key === slug;

diff --git a/packages/cli/create-antd-site.js b/packages/cli/create-antd-site.js
@@ -189,6 +189,7 @@ function createApp(name = './', useNpm, eject) {
     scripts: {
       build: `${useYarn ? 'yarn' : 'npm run'} clean && gatsby build`,
       start: `${useYarn ? 'yarn' : 'npm run'} clean && gatsby develop`,
+      eject: 'antdsite-cli --eject',
       clean: 'gatsby clean'
     },
     dependencies: {
@@ -202,6 +203,7 @@ function createApp(name = './', useNpm, eject) {
 
   const antsiteConfig = `module.exports = {
   title: '${appName}',
+  description: 'My first antdsite app',
   logo: '/favicon.png',
   head: [['link', { rel: 'icon', href: '/favicon.png' }]],
   themeConfig: {

diff --git a/packages/cli/init.js b/packages/cli/init.js
@@ -80,6 +80,15 @@ function showSuccessTips(appPath, appName, useYarn, originalDirectory) {
 
   console.log();
 
+  console.log(
+    chalk.hex('#29CDFF')(`  ${displayedCommand} ${useYarn ? '' : 'run '}eject`)
+  );
+  console.log(
+    `    copy the default theme to .antdsite/theme of the created app directory.`
+  );
+
+  console.log();
+
   console.log('We suggest that you begin by typing:');
   console.log();
 

diff --git a/packages/docs/.antdsite/config.js b/packages/docs/.antdsite/config.js
@@ -64,15 +64,39 @@ module.exports = {
           {
             text: '指南',
             link: '/zh/guide/'
+          },
+          {
+            text: '配置',
+            link: '/zh/config/'
+          },
+          {
+            text: '默认主题配置',
+            link: '/zh/default-theme-config/'
+          },
+          {
+            text: 'GitHub',
+            link: 'https://github.com/YvesCoding/antdsite',
+            important: true
           }
         ],
         sidebar: {
-          '/zh/guide/': getGuideSidebar()
+          '/zh/guide/': getGuideSidebar('开始上手'),
+          '/zh/config/': [''],
+          '/zh/default-theme-config/': ['']
         }
       }
     }
   }
 };
-function getGuideSidebar() {
-  return ['introduction', 'getting-started', 'configuration'];
+
+function getGuideSidebar(start = 'Get Startted') {
+  return [
+    {
+      title: start,
+      collapsable: false,
+      children: ['introduction', 'getting-started']
+    },
+    'configuration',
+    'theme'
+  ];
 }
diff --git a/packages/docs/docs/zh/config/README.MD b/packages/docs/docs/zh/config/README.MD
@@ -0,0 +1 @@
+# 基本配置
diff --git a/packages/docs/docs/zh/default-theme-config/README.MD b/packages/docs/docs/zh/default-theme-config/README.MD
@@ -0,0 +1 @@
+# 默认主题配置
diff --git a/packages/docs/docs/zh/guide/configuration.md b/packages/docs/docs/zh/guide/configuration.md
@@ -1,3 +1,31 @@
-# 网站配置
+# 配置文件
 
-网站的配置文件位于项目的根目录名为`.antdsite.js`
+## config.js
+
+网站配置文件名为`config.js`，在网站根目录下`.antdsite`文件夹下的`config.js`
+
+```bash
+├── .antdsite
+    ├── config.js
+├── docs
+├── package.json
+```
+
+## 基本配置
+
+`config.js` 的基本配置如下:
+
+```js
+module.exports = {
+  title: 'my-docs',
+  description: 'some descriptions...'
+};
+```
+
+需要基本包含一个`title`和`description`，详细的配置可以参考[配置](/zh/config/)一节。
+
+## 主题配置
+
+一个 AntdSite 主题应该负责整个网站的布局和交互细节。在 VuePress 中，目前自带了一个默认的主题（正是你现在所看到的），它是为技术文档而设计的。同时，默认主题提供了一些选项，让你可以去自定义头部（header）、 底部（footer）和 首页（home） 等，详情请参见 [默认主题](/zh/default-theme-config/)
+
+如果你想开发一个自定义主题，可以参考 [自定义主题](/zh/guide/theme)。
diff --git a/packages/docs/docs/zh/guide/getting-started.md b/packages/docs/docs/zh/guide/getting-started.md
@@ -93,9 +93,15 @@ npm
 mkdir docs
 ```
 
-### 新建`.antsite.js`
+### 新建一个 .antdsite 文件夹
 
-在项目的根目录建立`.antsite.js`
+```bash
+mkdir .antdsite
+```
+
+### 进入 .antdsite 建立 config.js
+
+在.antdsite 目录建立`config.js`
 
 ```js
 module.exports = {

diff --git a/packages/docs/docs/zh/guide/theme.md b/packages/docs/docs/zh/guide/theme.md
@@ -0,0 +1,9 @@
+# 自定义主题
+
+网站配置文件名为`config.js`，在网站根目录下`.antdsite`文件夹下的`config.js`
+
+```bash
+├── .antdsite           # 配置目录， 包括自定义出题，网站配置文件等
+    ├── config.js       # 网站配置文件，用于配置网站基本信息
+    ├── theme           # 主题文件夹，用于存放自定义主题
+```