@antv/dumi-theme-antv 0.3.0-beta.7 → 0.3.0-beta.9

package/dist/layouts/DocLayout.js

@@ -30,10 +30,10 @@ export default (function () {
   if (p === '/' || p === '/zh' || p === '/en' || p === '/en/') return /*#__PURE__*/React.createElement(Index, null); // 匹配 navs 中的 docs 路由
 
   var hasDocsRoutes = navs.filter(function (nav) {
-    return nav.slug.startsWith('docs/');
+    return nav.slug && nav.slug.startsWith('docs/');
   });
   var docsRoutes = hasDocsRoutes.map(function (nav) {
-    return nav.slug.split('/').find(function (item) {
+    return nav.slug && nav.slug.split('/').find(function (item) {
       return item !== 'docs';
     });
   });

package/dist/layouts/entry/Index.js

@@ -5,7 +5,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import React from 'react';
-import { useSiteData } from 'dumi';
+import { useLocale, useSiteData } from 'dumi';
+import { SEO } from "../../slots/SEO";
 import { Header } from "../../slots/Header";
 import { Detail } from "../../slots/Detail";
 import { Features } from "../../slots/Features";
@@ -20,6 +21,8 @@ import { useT } from "../../slots/hooks";
  */
 
 export var Index = function Index() {
+  var locale = useLocale();
+
   var _useSiteData = useSiteData(),
       themeConfig = _useSiteData.themeConfig;
 
@@ -64,7 +67,12 @@ export var Index = function Index() {
     style: style,
     className: className
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(Detail, detailProps), /*#__PURE__*/React.createElement(Features, featuresProps), /*#__PURE__*/React.createElement(Cases, casesProps), /*#__PURE__*/React.createElement(Companies, {
+  var metaTitle = detailProps.title;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
+    title: "".concat(metaTitle[locale.id]),
+    titleSuffix: "AntV",
+    lang: locale.id
+  }), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(Detail, detailProps), /*#__PURE__*/React.createElement(Features, featuresProps), /*#__PURE__*/React.createElement(Cases, casesProps), /*#__PURE__*/React.createElement(Companies, {
     title: useT("感谢信赖"),
     companies: companies
   }), /*#__PURE__*/React.createElement(Footer, null));

package/dist/layouts/entry/Manual.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ManualContent } from "../../slots/ManualContent";
 import { Header } from "../../slots/Header";
-import { Footer } from "../../slots/Footer";
 
 /**
  * Manual 路由下的入口
@@ -10,5 +9,5 @@ export var Manual = function Manual(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
     isHomePage: false
-  }), /*#__PURE__*/React.createElement(ManualContent, null, " ", children, " "), /*#__PURE__*/React.createElement(Footer, null));
+  }), /*#__PURE__*/React.createElement(ManualContent, null, " ", children, " "));
 };

package/dist/pages/404.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { SEO } from "../slots/SEO";
 import { Header } from "../slots/Header";
 import { NotFound as NotFoundPage } from "../slots/404";
 import { Footer } from "../slots/Footer";
@@ -7,7 +8,9 @@ import { Footer } from "../slots/Footer";
  */
 
 var NotFound = function NotFound() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
+    title: "404: Not found"
+  }), /*#__PURE__*/React.createElement(Header, {
     isHomePage: false
   }), /*#__PURE__*/React.createElement(NotFoundPage, null), /*#__PURE__*/React.createElement(Footer, null));
 };

package/dist/pages/Example/index.js

@@ -15,12 +15,14 @@ import { useParams, useLocation, useNavigate } from 'react-router-dom';
 import { get } from 'lodash-es';
 import { Layout } from 'antd';
 import { useLocale, useSiteData } from 'dumi';
+import { SEO } from "../../slots/SEO";
 import { Header } from "../../slots/Header";
 import { ExampleSider } from "../../slots/ExampleSider";
 import { CodeRunner } from "../../slots/CodeRunner";
 import { getDemoInfo } from "../../slots/CodeRunner/utils";
 import { ThemeAntVContext } from "../../context";
 import styles from "./index.module.less";
+import { getCurrentTitle } from "./utils";
 var Sider = Layout.Sider,
     Content = Layout.Content;
 
@@ -58,15 +60,24 @@ var Example = function Example() {
       isCollapsed = _useState4[0],
       setIsCollapsed = _useState4[1];
 
+  var _useState5 = useState({}),
+      _useState6 = _slicedToArray(_useState5, 2),
+      title = _useState6[0],
+      setTitle = _useState6[1];
+
   useEffect(function () {
     if (topic && example && demo) {
       var targetDemoInfo = getDemoInfo(exampleTopics, topic, example, demo);
       setCurrentDemo(targetDemoInfo);
+      setTitle(getCurrentTitle(exampleTopics, topic, example));
     }
   }, [topic, example, hash]);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.example
-  }, /*#__PURE__*/React.createElement(Header, {
+  }, /*#__PURE__*/React.createElement(SEO, {
+    title: title[locale.id],
+    lang: locale.id
+  }), /*#__PURE__*/React.createElement(Header, {
     isHomePage: false
   }), /*#__PURE__*/React.createElement(Layout, {
     className: styles.container
@@ -97,7 +108,7 @@ var Example = function Example() {
     topic: topic,
     example: example,
     demo: demo,
-    size: get(themeConfig, 'editor.size', 0.4)
+    size: get(themeConfig, 'editor.size', 0.38)
   }))));
 };
 

package/dist/pages/Example/utils.d.ts

@@ -0,0 +1 @@
+export declare function getCurrentTitle(exampleTopics: any, topic: any, example: any): any;

package/dist/pages/Example/utils.js

@@ -0,0 +1,9 @@
+export function getCurrentTitle(exampleTopics, topic, example) {
+  var topicItem = exampleTopics.find(function (item) {
+    return item.id === topic;
+  });
+  var exmapleItem = topicItem.examples.find(function (item) {
+    return item.id === example;
+  });
+  return exmapleItem.title;
+}

package/dist/pages/Examples/index.js

@@ -14,6 +14,8 @@ import React from 'react';
 import { useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { BackTop, Layout as AntLayout } from 'antd';
+import { useLocale } from 'dumi';
+import { SEO } from "../../slots/SEO";
 import { Header } from "../../slots/Header";
 import { Footer } from "../../slots/Footer";
 import NavigatorBanner from "../../slots/Header/Products/NavigatorBanner";
@@ -32,6 +34,7 @@ import styles from "./index.module.less";
 
 var Example = function Example() {
   var nav = useNavigate();
+  var locale = useLocale();
   /** 示例页面的元数据信息 */
 
   var metaData = useContext(ThemeAntVContext);
@@ -40,8 +43,12 @@ var Example = function Example() {
   var _usePrevAndNext = usePrevAndNext(),
       _usePrevAndNext2 = _slicedToArray(_usePrevAndNext, 2),
       prev = _usePrevAndNext2[0],
-      next = _usePrevAndNext2[1]; // 为 zh 做兜底
+      next = _usePrevAndNext2[1];
 
+  var title = {
+    zh: '所有图表',
+    en: "Gallery"
+  }; // 为 zh 做兜底
 
   useEffect(function () {
     var p = window.location.pathname;
@@ -50,7 +57,9 @@ var Example = function Example() {
       nav(p.replace('/zh/', '/'));
     }
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
+    title: title[locale.id]
+  }), /*#__PURE__*/React.createElement(Header, {
     isHomePage: false
   }), /*#__PURE__*/React.createElement(AntLayout, {
     hasSider: true,

package/dist/plugin/index.js

@@ -33,6 +33,7 @@ var plugin_default = (api) => {
   api.modifyDefaultConfig((memo) => {
     memo.resolve.codeBlockMode = "passive";
     memo.exportStatic.extraRoutePaths = (0, import_examples.getExamplePaths)();
+    memo.mfsu = false;
     return memo;
   });
   const pages = [

package/dist/slots/CodeEditor/index.js

@@ -14,6 +14,7 @@ import React, { useRef, useState, useCallback, useEffect } from 'react';
 import MonacoEditor, { loader } from '@monaco-editor/react';
 import { useSiteData, useLocale } from 'dumi';
 import { debounce, noop } from 'lodash-es';
+import { bind, clear } from 'size-sensor';
 import { replaceInsertCss, execute, compile } from "./utils";
 import { Toolbar, EDITOR_TABS } from "./Toolbar";
 import { Loading } from "../Loading";
@@ -86,15 +87,15 @@ export var CodeEditor = function CodeEditor(_ref) {
     window.dispatchEvent(e);
   };
 
-  var reportError = useCallback(debounce(function (e) {
+  var reportError = useCallback(function (e) {
     if (e) {
-      console.error(e);
+      console.log(e);
       onError(e);
-      e && e.preventDefault && e.preventDefault();
+      e.preventDefault && e.preventDefault();
     } else {
       onError(null);
     }
-  }, 50), []);
+  }, []);
   useEffect(function () {
     // 用于上报错误信息，使用 script 执行代码
     if (typeof window !== 'undefined') {
@@ -113,16 +114,14 @@ export var CodeEditor = function CodeEditor(_ref) {
         window.removeEventListener('unhandledrejection', reportError);
       }
     };
-  });
+  }, []);
   var executeCode = useCallback(debounce(function (v) {
     if (!v) return; // 1. 先编译代码
 
     var compiled;
 
     try {
-      compiled = compile(replaceInsertCss(v, locale.id), relativePath); // 清除错误
-
-      reportError(null);
+      compiled = compile(replaceInsertCss(v, locale.id), relativePath);
     } catch (e) {
       reportError(e); // 执行出错，后面的步骤不用做了！
 
@@ -139,6 +138,10 @@ export var CodeEditor = function CodeEditor(_ref) {
     executeCode(code);
   }, [code]);
   useEffect(function () {
+    var dom = document.getElementById('playgroundScriptContainer');
+    bind(dom, debounce(function () {
+      dispatchResizeEvent();
+    }, 100));
     onReady();
 
     if (playground !== null && playground !== void 0 && playground.playgroundDidMount) {
@@ -146,6 +149,7 @@ export var CodeEditor = function CodeEditor(_ref) {
     }
 
     return function () {
+      clear(dom);
       onDestroy();
 
       if (playground !== null && playground !== void 0 && playground.playgroundWillUnmount) {

package/dist/slots/CodeEditor/utils.js

@@ -135,7 +135,7 @@ export function execute(code, playgroundScriptContainer, container) {
   var script = document.createElement('script'); // replace container id in case of multi demos in document
 
   var newCode = code.replace(/'container'|"container"/, "'".concat(replaceId, "'"));
-  script.innerHTML = "\n// Can only have one anonymous define call per script file\n// \u548C monaco loader \u52A0\u8F7D\u51B2\u7A81\nvar __runnerDefine = window['define'];\nwindow['define'] = null;\ntry {\n  ".concat(newCode, "\n\n  window.__reportErrorInPlayground && window.__reportErrorInPlayground(null);\n} catch(e) {\n  window.__reportErrorInPlayground && window.__reportErrorInPlayground(e);\n} finally {\n  window['define'] = __runnerDefine;\n}\n  "); // 追加图表容器
+  script.innerHTML = "\n// Can only have one anonymous define call per script file\n// \u548C monaco loader \u52A0\u8F7D\u51B2\u7A81\nvar __runnerDefine = window['define'];\nwindow['define'] = null;\ntry {\n  ".concat(newCode, "\n\n  // \u6E05\u9664\u663E\u793A\u7684\u9519\u8BEF\n  window.__reportErrorInPlayground && window.__reportErrorInPlayground(null);\n} catch(e) {\n  window.__reportErrorInPlayground && window.__reportErrorInPlayground(e);\n} finally {\n  window['define'] = __runnerDefine;\n}\n  "); // 追加图表容器
 
   node.innerHTML = container || "<div id=".concat(replaceId, " />"); // 运行 script
 

package/dist/slots/Footer/index.module.less

@@ -2,6 +2,7 @@
 @import '../_.less';
 
 .footer {
+  width: 100%;
   font-family: Avenir, @font-family;
 
   :global(.rc-footer-container),

package/dist/slots/Header/Navs.d.ts

@@ -1,11 +1,19 @@
 import React from 'react';
+declare type dropdownItem = {
+    label: {
+        [key: string]: string;
+    };
+    key: string;
+};
 export declare type INav = {
-    slug: string;
+    slug?: string;
     order: number;
     title: {
         [key: string]: string;
     };
     target?: '_blank';
+    notPage?: boolean;
+    dropdownItems?: dropdownItem[];
 };
 export declare type NavProps = {
     navs: INav[];
@@ -15,3 +23,4 @@ export declare type NavProps = {
  * Header 中的导航菜单
  */
 export declare const Navs: React.FC<NavProps>;
+export {};

package/dist/slots/Header/Navs.js

@@ -3,46 +3,57 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React from 'react';
 import cx from 'classnames';
 import { isEqual } from 'lodash-es';
-import { LinkOutlined } from '@ant-design/icons';
 import { Link, useLocale } from 'dumi';
+import { Dropdown, Menu } from 'antd';
+import { DownOutlined, LinkOutlined } from '@ant-design/icons';
 import styles from "./index.module.less";
 
-var getDocument = function getDocument(navs) {
-  var slug = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return navs.find(function (doc) {
-    return doc.slug === slug;
-  }) || {
-    title: {}
-  };
-};
 /**
  * Header 中的导航菜单
  */
-
-
 export var Navs = function Navs(_ref) {
   var navs = _ref.navs,
       path = _ref.path;
   var locale = useLocale();
   return /*#__PURE__*/React.createElement(React.Fragment, null, navs.map(function (nav) {
-    var href = nav.slug.startsWith('http') ? nav.slug : "/".concat(nav.slug);
-    var isAnotherSite = nav.slug.startsWith('http');
-    var anotherSite = isAnotherSite ? href : '';
-    var title = getDocument(navs, nav.slug).title[locale.id];
-    href = nav.slug.startsWith('/') ? nav.slug : "/".concat(nav.slug);
+    var title = nav.title[locale.id];
+    var href = '';
+    var className = '';
+
+    if (nav.slug) {
+      href = nav.slug.startsWith('http') ? nav.slug : "/".concat(nav.slug);
 
-    if (locale.id == 'en') {
-      href = "/en".concat(href);
-    } // 去除 docs  防止二次点击相同nav跳转出现04
+      if (locale.id == 'en' && !href.startsWith('http')) {
+        href = "/en".concat(href);
+      } // 去除 docs  防止二次点击相同nav跳转出现04
 
 
-    href = href.replace('/docs/', '/');
-    var className = cx('header-menu-item-active', _defineProperty({}, styles.activeItem, path.startsWith(href) || isEqual(path.split('/').slice(0, 4), href.split('/').slice(0, 4))));
-    return /*#__PURE__*/React.createElement("li", {
+      href = href.replace('/docs/', '/');
+      className = cx('header-menu-item-active', _defineProperty({}, styles.activeItem, path.startsWith(href) || isEqual(path.split('/').slice(0, 4), href.split('/').slice(0, 4))));
+    }
+
+    return nav.notPage ? /*#__PURE__*/React.createElement("li", {
+      key: title,
+      className: className
+    }, /*#__PURE__*/React.createElement(Dropdown, {
+      className: styles.ecoSystems,
+      placement: "bottom",
+      overlay: /*#__PURE__*/React.createElement(Menu, null, nav.dropdownItems.map(function (_ref2) {
+        var label = _ref2.label,
+            key = _ref2.key;
+        return /*#__PURE__*/React.createElement(Menu.Item, {
+          key: key
+        }, /*#__PURE__*/React.createElement("a", {
+          target: "_blank",
+          rel: "noreferrer",
+          href: key
+        }, label[locale.id], " ", /*#__PURE__*/React.createElement(LinkOutlined, null)));
+      }))
+    }, /*#__PURE__*/React.createElement("span", null, title, /*#__PURE__*/React.createElement(DownOutlined, null)))) : /*#__PURE__*/React.createElement("li", {
       key: title,
       className: className
-    }, nav.target === '_blank' || isAnotherSite ? /*#__PURE__*/React.createElement("a", {
-      href: anotherSite,
+    }, nav.target === '_blank' || href.startsWith('http') ? /*#__PURE__*/React.createElement("a", {
+      href: href,
       target: "_blank",
       rel: "noreferrer"
     }, title, /*#__PURE__*/React.createElement(LinkOutlined, null)) : /*#__PURE__*/React.createElement(Link, {

package/dist/slots/ManualContent/index.js

@@ -26,10 +26,12 @@ import { useLocale, useSiteData, useFullSidebarData, useRouteMeta } from 'dumi';
 import { useNavigate } from "react-router-dom";
 import { EditOutlined, MenuFoldOutlined, MenuUnfoldOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
 import readingTime from 'reading-time';
+import { SEO } from "../SEO";
 import { getBaseRoute, getIndexRoute, getOpenKeys } from "./utils";
 import { NavigatorBanner } from "./NavigatorBanner";
 import ReadingTime from "./ReadingTime";
 import { TOC } from "../TOC";
+import { Footer } from "../Footer";
 import { useScrollToTop } from "../hooks";
 import 'rc-drawer/assets/index.css';
 import styles from "./index.module.less";
@@ -49,7 +51,8 @@ export var ManualContent = function ManualContent(_ref) {
       docs = _useSiteData$themeCon.docs;
 
   var sidebar = useFullSidebarData();
-  var isWide = useMedia('(min-width: 767.99px)', true);
+  var is767Wide = useMedia('(min-width: 767.99px)', true);
+  var is991Wide = useMedia('(min-width: 991.99px)', true);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -262,7 +265,10 @@ export var ManualContent = function ManualContent(_ref) {
     forceSubMenuRender: true,
     triggerSubMenuAction: "click"
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Layout, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
+    title: linkoTitle[window.location.pathname],
+    lang: locale.id
+  }), /*#__PURE__*/React.createElement(Layout, {
     style: {
       background: '#fff'
     },
@@ -272,9 +278,9 @@ export var ManualContent = function ManualContent(_ref) {
     offsetTop: 0,
     className: styles.affix,
     style: {
-      height: isWide ? '100vh' : 'inherit'
+      height: is767Wide ? '100vh' : 'inherit'
     }
-  }, isWide ? /*#__PURE__*/React.createElement(Layout.Sider, {
+  }, is767Wide ? /*#__PURE__*/React.createElement(Layout.Sider, {
     width: "auto",
     theme: "light",
     className: styles.sider
@@ -292,8 +298,10 @@ export var ManualContent = function ManualContent(_ref) {
   }, menu)), /*#__PURE__*/React.createElement(Layout.Content, {
     className: styles.content
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles.contentMain
-  }, /*#__PURE__*/React.createElement("h1", null, linkoTitle[window.location.pathname], /*#__PURE__*/React.createElement(Tooltip, {
+    className: styles.main
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: styles.contentTitle
+  }, linkoTitle[window.location.pathname], /*#__PURE__*/React.createElement(Tooltip, {
     title: '在 GitHub 上编辑'
   }, /*#__PURE__*/React.createElement("a", {
     href: getGithubSourceUrl({
@@ -304,10 +312,12 @@ export var ManualContent = function ManualContent(_ref) {
     target: "_blank",
     rel: "noopener noreferrer",
     className: styles.editOnGtiHubButton
-  }, /*#__PURE__*/React.createElement(EditOutlined, null)))), /*#__PURE__*/React.createElement(ReadingTime, {
+  }, /*#__PURE__*/React.createElement(EditOutlined, null)))), /*#__PURE__*/React.createElement("div", {
+    className: styles.readtimeContainer
+  }, /*#__PURE__*/React.createElement(ReadingTime, {
     readingTime: time,
     className: styles.readtime
-  }), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: styles.markdown
   }, children), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: styles.preandnext
@@ -323,10 +333,12 @@ export var ManualContent = function ManualContent(_ref) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.backTop
-  }, /*#__PURE__*/React.createElement(VerticalAlignTopOutlined, null))))))), /*#__PURE__*/React.createElement(Layout.Sider, {
+  }, /*#__PURE__*/React.createElement(VerticalAlignTopOutlined, null)))))), /*#__PURE__*/React.createElement(Footer, {
+    className: styles.footer
+  })), is991Wide ? /*#__PURE__*/React.createElement(Layout.Sider, {
     theme: "light",
     width: 260
   }, /*#__PURE__*/React.createElement(Affix, {
     className: styles.toc
-  }, /*#__PURE__*/React.createElement(TOC, null)))));
+  }, /*#__PURE__*/React.createElement(TOC, null))) : /*#__PURE__*/React.createElement("div", null)));
 };

package/dist/slots/ManualContent/index.module.less

@@ -203,7 +203,7 @@
 }
 
 .main {
-  width: calc(100% - @toc-width);
+  width: 100%;
   padding-left: 48px;
   padding-right: 24px;
   overflow: hidden;
@@ -236,21 +236,39 @@
 
 // reference yuque UI
 .toc {
-  :global {
-    .dumi-default-toc {
-      > li {
-        > a {
-          font-size: 12px;
-
-          &.active {
-            border-left: 1px solid @primary-color !important;
-          }
-        }
-      }
+  width: @toc-width;
+  float: right;
+  font-size: 12px;
+  background: #fff;
+  max-height: 100vh;
+  overflow: scroll;
+
+  position: sticky;
+  top: 0;
+
+  ul>li {
+    list-style: none !important;
+    padding: 0 !important;
+    margin-left: 1em !important;
+
+    // 超出部分省略号显示
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    a {
+      color: @text-color;
     }
   }
 }
-
+.contentTitle{
+  margin-top: 8px;
+  margin-bottom: 20px;
+  font-weight: 500;
+  font-size: 30px;
+  font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  line-height: 38px;
+}
 .sider {
   width: 280px !important;
   height: inherit;
@@ -460,16 +478,11 @@
       padding-left: 32px;
       padding-right: 32px;
     }
-
-    .toc {
-      display: none;
-    }
   }
-
-  .sider {
-    width: 240px !important;
+  .tocSiderbar {
+      display: none;
   }
-
+ 
   .gallery {
     .galleryCard {
       width: 50%;
@@ -487,11 +500,9 @@
   }
 
   .sider {
-    width: 100% !important;
     margin-bottom: 32px;
     padding-bottom: 32px;
     border-bottom: 1px solid #e8e8e8;
-    display: none;
   }
 
   .markdown {
@@ -596,19 +607,17 @@
   margin-bottom: 20px;
   font-weight: 500;
   font-size: 30px;
-  font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   line-height: 38px;
 }
 
 .content {
-  display: flex;
-  justify-content: center;
+  width: 100% !important;
   min-width: 400px;
+  justify-content: center;
+}
 
-  .contentMain {
-    width: 100%;
-    padding: 0 24px 0 48px;
-  }
+.footer {
+  width: 100%;
 }
 
 .menuSwitch {
@@ -632,8 +641,10 @@
 
 
 
-.readtime {
+.readtimeContainer{
   margin-bottom: 1.2em;
+}
+.readtime {
   color: #0d1a26;
   line-height: 1.5715;
   list-style: none;

package/dist/slots/SEO.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface SEOProps {
+    description?: string;
+    lang?: string;
+    meta?: any[];
+    title?: string;
+    titleSuffix?: string;
+}
+export declare const SEO: React.FC<SEOProps>;
+export {};

package/dist/slots/SEO.js

@@ -0,0 +1,59 @@
+import { useSiteData } from 'dumi';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+export var SEO = function SEO(_ref) {
+  var description = _ref.description,
+      _ref$lang = _ref.lang,
+      lang = _ref$lang === void 0 ? '' : _ref$lang,
+      _ref$meta = _ref.meta,
+      meta = _ref$meta === void 0 ? [] : _ref$meta,
+      title = _ref.title,
+      titleSuffix = _ref.titleSuffix;
+
+  var _useSiteData = useSiteData(),
+      themeConfig = _useSiteData.themeConfig;
+
+  var defaultTitle = themeConfig.title,
+      defaultDescription = themeConfig.defaultDescription;
+  var metaDescription = description || defaultDescription;
+  return /*#__PURE__*/React.createElement(Helmet, {
+    htmlAttributes: {
+      lang: lang
+    },
+    title: title,
+    titleTemplate: "%s | ".concat(titleSuffix || defaultTitle),
+    meta: [{
+      name: "description",
+      content: metaDescription
+    }, {
+      property: "og:title",
+      content: title
+    }, {
+      property: "og:description",
+      content: metaDescription
+    }, {
+      property: "og:image",
+      content: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png'
+    }, {
+      property: "og:type",
+      content: "website"
+    }, {
+      name: "twitter:card",
+      content: "summary"
+    }, {
+      name: "twitter:title",
+      content: title
+    }, {
+      name: "twitter:description",
+      content: metaDescription
+    }, {
+      property: "twitter:image",
+      content: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png'
+    }].concat(meta)
+  });
+};
+SEO.defaultProps = {
+  lang: "zh",
+  meta: [],
+  description: ""
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/dumi-theme-antv",
-  "version": "0.3.0-beta.7",
+  "version": "0.3.0-beta.9",
   "description": "AntV website theme based on dumi2.",
   "types": "dist/types.d.ts",
   "scripts": {
@@ -81,6 +81,7 @@
     "react-split-pane": "^0.1.92",
     "react-use": "^17.4.0",
     "reading-time": "^1.5.0",
+    "size-sensor": "^1.0.1",
     "slick-carousel": "^1.8.1",
     "uri-parse": "^1.0.0"
   },