dumi 2.2.0-rc.1 → 2.2.1-alpha.0

package/dist/client/theme-api/DumiDemo.js

@@ -20,7 +20,7 @@ var DemoErrorBoundary = function DemoErrorBoundary(props) {
   }, props.children);
 };
 
-export var DumiDemo = function DumiDemo(props) {
+export var DumiDemo = /*#__PURE__*/React.memo(function (props) {
   var _useSiteData = useSiteData(),
       demos = _useSiteData.demos,
       historyType = _useSiteData.historyType;
@@ -45,4 +45,7 @@ export var DumiDemo = function DumiDemo(props) {
     props.previewerProps.demoUrl || // when use hash route, browser can automatically handle relative paths starting with #
     "".concat(isHashRoute ? "#" : '').concat(basename).concat(SP_ROUTE_PREFIX, "demos/").concat(props.demo.id)
   }, props.previewerProps), props.previewerProps.iframe ? null : /*#__PURE__*/React.createElement(DemoErrorBoundary, null, /*#__PURE__*/createElement(component)));
-};
+}, function (prev, next) {
+  // compare length for performance
+  return JSON.stringify(prev).length === JSON.stringify(next).length;
+});

package/dist/client/theme-api/context.d.ts

@@ -14,8 +14,13 @@ interface ISiteContext {
     components: Record<string, AtomComponentAsset>;
     locales: ILocalesConfig;
     themeConfig: IThemeConfig;
+    hostname?: string;
     loading: boolean;
     setLoading: (status: boolean) => void;
+    /**
+     * private field, do not use it in your code
+     */
+    _2_level_nav_available: boolean;
 }
 export declare const SiteContext: import("react").Context<ISiteContext>;
 export declare const useSiteData: () => ISiteContext;

package/dist/client/theme-api/context.js

@@ -8,7 +8,8 @@ export var SiteContext = /*#__PURE__*/createContext({
   locales: [],
   themeConfig: {},
   loading: false,
-  setLoading: function setLoading() {}
+  setLoading: function setLoading() {},
+  _2_level_nav_available: true
 });
 export var useSiteData = function useSiteData() {
   return useContext(SiteContext);

package/dist/client/theme-api/types.d.ts

@@ -59,7 +59,7 @@ export interface IRouteMeta {
         nav?: string | {
             title?: string;
             order?: number;
-            parent?: Omit<IRouteMeta['frontmatter']['nav'], 'parent'>;
+            second?: Omit<IRouteMeta['frontmatter']['nav'], 'second'>;
         };
         group?: string | {
             title?: string;
@@ -103,7 +103,7 @@ export interface IRouteMeta {
         depth: number;
         title: string;
         /**
-         * private field, will be removed in the future
+         * private field, do not use it in your code
          */
         _debug_demo?: boolean;
     }[];
@@ -136,7 +136,7 @@ export interface IRouteMeta {
         };
     }[];
     /**
-     * private field, will be removed in the future
+     * private field, do not use it in your code
      */
     _atom_route?: boolean;
 }
@@ -203,8 +203,8 @@ export interface IThemeConfig {
         switch: boolean;
     };
     nprogress?: boolean;
-    socialLinks: {
-        [key in SocialTypes]: string;
+    socialLinks?: {
+        [key in SocialTypes]?: string;
     };
     [key: string]: any;
 }

package/dist/client/theme-api/useNavData.js

@@ -47,7 +47,8 @@ export var useNavData = function useNavData() {
   var routes = useLocaleDocRoutes();
 
   var _useSiteData = useSiteData(),
-      themeConfig = _useSiteData.themeConfig;
+      themeConfig = _useSiteData.themeConfig,
+      is2LevelNav = _useSiteData._2_level_nav_available;
 
   var sidebar = useFullSidebarData();
   var sidebarDataComparer = useRouteDataComparer();
@@ -91,36 +92,36 @@ export var useNavData = function useNavData() {
           parentPath = _ref8[1],
           restPath = _ref8[2];
 
-      var isNestedNav = Boolean(restPath);
+      var isNestedNav = Boolean(restPath) && is2LevelNav;
 
       var _Object$values$reduce = Object.values(routes).reduce(function (ret, route) {
         // find routes which within the nav path
         if (route.path.startsWith(link.slice(1))) {
           pickRouteSortMeta(ret[0], 'nav', route.meta.frontmatter); // generate parent meta for nested nav
 
-          if (isNestedNav) pickRouteSortMeta(ret[1], 'nav.parent', route.meta.frontmatter);
+          if (isNestedNav) pickRouteSortMeta(ret[1], 'nav.second', route.meta.frontmatter);
         }
 
         return ret;
       }, [{}, {}]),
           _Object$values$reduce2 = _slicedToArray(_Object$values$reduce, 2),
-          rootMeta = _Object$values$reduce2[0],
-          parentMeta = _Object$values$reduce2[1];
+          firstMeta = _Object$values$reduce2[0],
+          secondMeta = _Object$values$reduce2[1];
 
       if (isNestedNav) {
-        var _parentMeta$title, _ret$parentPath, _parent$children;
+        var _firstMeta$title, _ret$parentPath, _second$children;
 
-        // fallback to use parent path as title
-        (_parentMeta$title = parentMeta.title) !== null && _parentMeta$title !== void 0 ? _parentMeta$title : parentMeta.title = parentPath.slice(1).replace(/^[a-z]/, function (s) {
+        // fallback to use parent path as 1-level nav title
+        (_firstMeta$title = firstMeta.title) !== null && _firstMeta$title !== void 0 ? _firstMeta$title : firstMeta.title = parentPath.slice(1).replace(/^[a-z]/, function (s) {
           return s.toUpperCase();
         }); // handle nested nav item as parent children
 
-        var parent = (_ret$parentPath = ret[parentPath]) !== null && _ret$parentPath !== void 0 ? _ret$parentPath : ret[parentPath] = genNavItem(parentMeta, groups, parentPath);
-        (_parent$children = parent.children) !== null && _parent$children !== void 0 ? _parent$children : parent.children = [];
-        ret[parentPath].children.push(genNavItem(rootMeta, groups, link, groups[0].children[0].link));
+        var second = (_ret$parentPath = ret[parentPath]) !== null && _ret$parentPath !== void 0 ? _ret$parentPath : ret[parentPath] = genNavItem(firstMeta, groups, parentPath);
+        (_second$children = second.children) !== null && _second$children !== void 0 ? _second$children : second.children = [];
+        ret[parentPath].children.push(genNavItem(secondMeta, groups, link, groups[0].children[0].link));
       } else {
         // handle root nav item
-        ret[link] = genNavItem(rootMeta, groups, link, groups[0].children[0].link);
+        ret[link] = genNavItem(firstMeta, groups, link, groups[0].children[0].link);
       }
 
       return ret;

package/dist/client/theme-api/useSidebarData.js

@@ -39,15 +39,18 @@ var getLocaleClearPath = function getLocaleClearPath(routePath, locale) {
  */
 
 
-function getRouteParentPath(path, meta) {
+function getRouteParentPath(path, _ref) {
   var _meta$frontmatter$fil;
 
-  var isIndexRoute = ((_meta$frontmatter$fil = meta.frontmatter.filename) === null || _meta$frontmatter$fil === void 0 ? void 0 : _meta$frontmatter$fil.endsWith('index.md')) && !meta._atom_route;
-  var paths = path.split('/');
+  var meta = _ref.meta,
+      is2LevelNav = _ref.is2LevelNav;
+  var isIndexDocRoute = ((_meta$frontmatter$fil = meta.frontmatter.filename) === null || _meta$frontmatter$fil === void 0 ? void 0 : _meta$frontmatter$fil.endsWith('index.md')) && !meta._atom_route && is2LevelNav;
+  var paths = path.split('/') // strip end slash
+  .filter(Boolean);
   var sliceEnd = Math.min(Math.max( // increase 1 level if route file is index.md
-  isIndexRoute ? paths.length : paths.length - 1, // least 1-level
-  1), // up to 2-level
-  2);
+  isIndexDocRoute ? paths.length : paths.length - 1, // least 1-level
+  1), // up to 2-level when use conventional 2-level nav
+  is2LevelNav ? 2 : Infinity);
   return paths.slice(0, sliceEnd).join('/');
 }
 /**
@@ -60,7 +63,8 @@ export var useFullSidebarData = function useFullSidebarData() {
   var routes = useLocaleDocRoutes();
 
   var _useSiteData = useSiteData(),
-      themeConfig = _useSiteData.themeConfig;
+      themeConfig = _useSiteData.themeConfig,
+      is2LevelNav = _useSiteData._2_level_nav_available;
 
   var sidebarDataComparer = useRouteDataComparer();
 
@@ -82,7 +86,10 @@ export var useFullSidebarData = function useFullSidebarData() {
         //   a/b => /a/b (if route file is a/b/index.md)
         //   a/b/c => /a/b
         var parentPath = "/".concat(route.path.replace(clearPath, function (s) {
-          return getRouteParentPath(s, route.meta);
+          return getRouteParentPath(s, {
+            is2LevelNav: is2LevelNav,
+            meta: route.meta
+          });
         }));
 
         var _pickRouteSortMeta = pickRouteSortMeta({
@@ -109,10 +116,10 @@ export var useFullSidebarData = function useFullSidebarData() {
       return ret;
     }, {}); // destruct sidebar data into sidebar config
 
-    var sidebarConfig = Object.entries(data).reduce(function (ret, _ref) {
-      var _ref2 = _slicedToArray(_ref, 2),
-          navPath = _ref2[0],
-          groups = _ref2[1];
+    var sidebarConfig = Object.entries(data).reduce(function (ret, _ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+          navPath = _ref3[0],
+          groups = _ref3[1];
 
       ret[navPath] = Object.values(groups).sort(sidebarDataComparer); // sort group children by order or title
 
@@ -181,10 +188,10 @@ export var useTreeSidebarData = function useTreeSidebarData() {
     var data = Object.entries(original) // match from the deepest level
     .sort(function (a, b) {
       return b[0].split('/').length - a[0].split('/').length;
-    }).reduce(function (ret, _ref3) {
-      var _ref4 = _slicedToArray(_ref3, 2),
-          path = _ref4[0],
-          data = _ref4[1];
+    }).reduce(function (ret, _ref4) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+          path = _ref5[0],
+          data = _ref5[1];
 
       var parent = path.replace(/\/[^/]+$/, '');
 
@@ -237,6 +244,9 @@ export var useSidebarData = function useSidebarData() {
   var locale = useLocale();
   var sidebar = useFullSidebarData();
 
+  var _useSiteData2 = useSiteData(),
+      is2LevelNav = _useSiteData2._2_level_nav_available;
+
   var _useLocation = useLocation(),
       pathname = _useLocation.pathname;
 
@@ -249,7 +259,10 @@ export var useSidebarData = function useSidebarData() {
   // /en-US/a/b/ => /en-US/a (also strip trailing /)
 
   var parentPath = clearPath ? pathname.replace(clearPath, function (s) {
-    return getRouteParentPath(s, meta);
+    return getRouteParentPath(s, {
+      is2LevelNav: is2LevelNav,
+      meta: meta
+    });
   }) : pathname;
   return parentPath ? sidebar[parentPath] : [];
 };

package/dist/client/theme-api/utils.d.ts

@@ -1,4 +1,4 @@
-import { useLayoutEffect } from 'react';
+import { useEffect } from 'react';
 import type { ILocale, INav, INavItem, IRouteMeta, IRoutesById, IUserNavValue } from './types';
 export declare const useLocaleDocRoutes: () => IRoutesById;
 /**
@@ -7,7 +7,7 @@ export declare const useLocaleDocRoutes: () => IRoutesById;
  * @returns code string
  */
 export declare const genReactRenderCode: (version: string) => string;
-export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
 /**
  * common comparer for sidebar/nav items
  */
@@ -20,5 +20,5 @@ export declare const useRouteDataComparer: <T extends {
 /**
  * common util for pick meta to sort sidebar/nav items
  */
-export declare const pickRouteSortMeta: (original: Partial<Pick<INavItem, 'order' | 'title'>>, field: 'nav' | 'nav.parent' | 'group', fm: IRouteMeta['frontmatter']) => Partial<Pick<INavItem, "title" | "order">>;
+export declare const pickRouteSortMeta: (original: Partial<Pick<INavItem, 'order' | 'title'>>, field: 'nav' | 'nav.second' | 'group', fm: IRouteMeta['frontmatter']) => Partial<Pick<INavItem, "title" | "order">>;
 export declare function getLocaleNav(nav: IUserNavValue | INav, locale: ILocale): import("./types").IUserNavItems;

package/dist/client/theme-api/utils.js

@@ -83,7 +83,7 @@ export var useRouteDataComparer = function useRouteDataComparer() {
 export var pickRouteSortMeta = function pickRouteSortMeta(original, field, fm) {
   var _sub$order;
 
-  var sub = field === 'nav.parent' ? _typeof(fm.nav) === 'object' ? fm.nav.parent : {} : fm[field];
+  var sub = field === 'nav.second' ? _typeof(fm.nav) === 'object' ? fm.nav.second : {} : fm[field];
 
   switch (_typeof(sub)) {
     case 'object':

package/dist/constants.d.ts

@@ -15,3 +15,4 @@ export declare const PICKED_PKG_FIELDS: {
     authors: string;
 };
 export declare const USELESS_TMP_FILES: string[];
+export declare const VERSION_2_LEVEL_NAV = "^2.2.0";

package/dist/constants.js

@@ -27,7 +27,8 @@ __export(constants_exports, {
   PREFERS_COLOR_LS_KEY: () => PREFERS_COLOR_LS_KEY,
   SP_ROUTE_PREFIX: () => SP_ROUTE_PREFIX,
   THEME_PREFIX: () => THEME_PREFIX,
-  USELESS_TMP_FILES: () => USELESS_TMP_FILES
+  USELESS_TMP_FILES: () => USELESS_TMP_FILES,
+  VERSION_2_LEVEL_NAV: () => VERSION_2_LEVEL_NAV
 });
 module.exports = __toCommonJS(constants_exports);
 var LOCAL_DUMI_DIR = ".dumi";
@@ -47,6 +48,7 @@ var PICKED_PKG_FIELDS = {
   authors: ""
 };
 var USELESS_TMP_FILES = ["tsconfig.json", "typings.d.ts"];
+var VERSION_2_LEVEL_NAV = "^2.2.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   LOCAL_DUMI_DIR,
@@ -57,5 +59,6 @@ var USELESS_TMP_FILES = ["tsconfig.json", "typings.d.ts"];
   PREFERS_COLOR_LS_KEY,
   SP_ROUTE_PREFIX,
   THEME_PREFIX,
-  USELESS_TMP_FILES
+  USELESS_TMP_FILES,
+  VERSION_2_LEVEL_NAV
 });

package/dist/features/sitemap.js

@@ -50,7 +50,7 @@ var sitemap_default = (api) => {
     const writeStream = import_fs.default.createWriteStream(import_path.default.join(api.paths.absOutputPath, "sitemap.xml"));
     smis.pipe(writeStream);
     Object.values(api.appData.routes).forEach((route) => {
-      if (!exclude.includes(route.path) && ![":", "*"].some((char) => route.path.includes(char))) {
+      if (!exclude.includes(route.path) && ![":", "*"].some((char) => route.path.includes(char)) && route.path !== "" && !route.isLayout) {
         smis.write({ url: route.path });
       }
     });

package/dist/features/theme/index.js

@@ -34,13 +34,17 @@ var import_derivative = require("../derivative");
 var import_loader = __toESM(require("./loader"));
 var DEFAULT_THEME_PATH = import_path.default.join(__dirname, "../../../theme-default");
 function getPkgThemeName(api) {
+  if (process.env.DUMI_THEME) {
+    const themePkg = require(import_path.default.join(process.env.DUMI_THEME, "package.json"));
+    return themePkg.name;
+  }
   const validDeps = Object.assign({}, api.pkg.dependencies, api.pkg.devDependencies);
   const pkgThemeName = Object.keys(validDeps).find((pkg) => pkg.split("/").pop().startsWith(import_constants.THEME_PREFIX));
   return pkgThemeName;
 }
 function getPkgThemePath(api) {
   const pkgThemeName = getPkgThemeName(api);
-  return pkgThemeName && import_path.default.dirname(import_plugin_utils.resolve.sync(`${pkgThemeName}/package.json`, {
+  return process.env.DUMI_THEME || pkgThemeName && import_path.default.dirname(import_plugin_utils.resolve.sync(`${process.env.DUMI_THEME || pkgThemeName}/package.json`, {
     basedir: api.cwd,
     preserveSymlinks: true
   }));
@@ -51,6 +55,13 @@ function getModuleExports(modulePath) {
     content: import_fs.default.readFileSync(modulePath, "utf-8")
   })[1];
 }
+function checkMinor2ByPkg(pkg) {
+  var _a, _b, _c;
+  if ((_a = pkg.name) == null ? void 0 : _a.startsWith("@examples/"))
+    return true;
+  const ver = ((_b = pkg.peerDependencies) == null ? void 0 : _b.dumi) || ((_c = pkg.devDependencies) == null ? void 0 : _c.dumi) || "^2.0.0";
+  return import_plugin_utils.semver.subset(ver, import_constants.VERSION_2_LEVEL_NAV);
+}
 var theme_default = (api) => {
   const defaultThemeData = (0, import_loader.default)(DEFAULT_THEME_PATH);
   const pkgThemePath = getPkgThemePath(api);
@@ -105,6 +116,13 @@ var theme_default = (api) => {
       return memo;
     }
   });
+  api.modifyAppData((memo) => {
+    memo._2LevelNavAvailable = checkMinor2ByPkg(api.pkg);
+    if (pkgThemePath && !memo._2LevelNavAvailable) {
+      memo._2LevelNavAvailable = checkMinor2ByPkg(require(import_path.default.join(pkgThemePath, "package.json")));
+    }
+    return memo;
+  });
   api.modifyConfig((memo) => {
     if (localThemeData) {
       themeMapKeys.forEach((key) => {
@@ -137,7 +155,7 @@ var theme_default = (api) => {
     return memo;
   });
   api.onGenerateFiles(() => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     themeMapKeys.forEach((key) => {
       Object.values(originalThemeData[key] || {}).forEach((item) => {
         if (item.source === "dumi")
@@ -214,14 +232,16 @@ export default function DumiContextWrapper() {
       locales,
       loading,
       setLoading,
+      hostname: ${JSON.stringify((_b = api.config.sitemap) == null ? void 0 : _b.hostname)},
       themeConfig: ${JSON.stringify(Object.assign(import_plugin_utils.lodash.pick(api.config, "logo", "description", "title"), api.config.themeConfig))},
+      _2_level_nav_available: ${api.appData._2LevelNavAvailable},
     }}>
       {outlet}
     </SiteContext.Provider>
   );
 }`
     });
-    const primaryColor = typeof ((_b = api.config) == null ? void 0 : _b.theme) === "object" ? (_d = (_c = api.config) == null ? void 0 : _c.theme) == null ? void 0 : _d["@c-primary"] : "#1677ff";
+    const primaryColor = typeof ((_c = api.config) == null ? void 0 : _c.theme) === "object" ? (_e = (_d = api.config) == null ? void 0 : _d.theme) == null ? void 0 : _e["@c-primary"] : "#1677ff";
     api.writeTmpFile({
       noPluginDir: true,
       path: "dumi/theme/nprogress.css",

package/dist/loaders/markdown/transformer/rehypeDemo.js

@@ -172,7 +172,7 @@ function rehypeDemo(opts) {
               parseOpts.fileAbsPath = (0, import_plugin_utils.winPath)(codeNode.properties.src);
               let localId = ((_b = codeNode.properties) == null ? void 0 : _b.id) ?? import_path.default.parse(parseOpts.fileAbsPath.replace(/\/index\.(j|t)sx?$/, "")).name;
               parseOpts.id = getCodeId(opts.cwd, opts.fileAbsPath, localId, vFile.data.frontmatter.atomId);
-              component = `React.lazy(() => import( /* webpackChunkName: "${chunkName}" */ '${(0, import_plugin_utils.winPath)(parseOpts.fileAbsPath)}?techStack=${techStack.name}'))`;
+              component = `React.memo(React.lazy(() => import( /* webpackChunkName: "${chunkName}" */ '${(0, import_plugin_utils.winPath)(parseOpts.fileAbsPath)}?techStack=${techStack.name}')))`;
               if (codeValue)
                 codeNode.properties.title = codeValue;
               (_c = codeNode.properties).filename ?? (_c.filename = (0, import_plugin_utils.winPath)(import_path.default.relative(opts.cwd, parseOpts.fileAbsPath)));

package/dist/techStacks/react.js

@@ -58,9 +58,9 @@ var ReactTechStack = class {
           type: "es6"
         }
       });
-      return `React.lazy(async () => {
+      return `React.memo(React.lazy(async () => {
 ${code}
-})`;
+}))`;
     }
     return raw;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.2.0-rc.1",
+  "version": "2.2.1-alpha.0",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",

package/theme-default/layouts/DocLayout/index.js

@@ -29,10 +29,12 @@ var DocLayout = function DocLayout() {
   var sidebar = useSidebarData();
 
   var _useLocation = useLocation(),
-      hash = _useLocation.hash;
+      hash = _useLocation.hash,
+      pathname = _useLocation.pathname;
 
   var _useSiteData = useSiteData(),
-      loading = _useSiteData.loading;
+      loading = _useSiteData.loading,
+      hostname = _useSiteData.hostname;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -80,9 +82,15 @@ var DocLayout = function DocLayout() {
   }), fm.keywords && /*#__PURE__*/React.createElement("meta", {
     name: "keywords",
     content: fm.keywords.join(',')
-  }), fm.keywords && /*#__PURE__*/React.createElement("meta", {
-    property: "og:keywords",
-    content: fm.keywords.join(',')
+  }), fm.keywords && fm.keywords.map(function (keyword) {
+    return /*#__PURE__*/React.createElement("meta", {
+      key: keyword,
+      property: "article:tag",
+      content: keyword
+    });
+  }), hostname && /*#__PURE__*/React.createElement("link", {
+    rel: "canonical",
+    href: hostname + pathname
   })), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(Hero, null), /*#__PURE__*/React.createElement(Features, null), showSidebar && /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-doc-layout-mobile-bar"
   }, /*#__PURE__*/React.createElement("button", {

package/theme-default/slots/Header/index.js

@@ -10,11 +10,11 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import HeaderExtra from "../HeadeExtra";
 import { ReactComponent as IconClose } from '@ant-design/icons-svg/inline-svg/outlined/close.svg';
 import { ReactComponent as IconMenu } from '@ant-design/icons-svg/inline-svg/outlined/menu.svg';
 import { useRouteMeta, useSiteData } from 'dumi';
 import ColorSwitch from 'dumi/theme/slots/ColorSwitch';
+import HeaderExtra from 'dumi/theme/slots/HeaderExtra';
 import LangSwitch from 'dumi/theme/slots/LangSwitch';
 import Logo from 'dumi/theme/slots/Logo';
 import Navbar from 'dumi/theme/slots/Navbar';

package/theme-default/slots/LangSwitch/index.less

@@ -36,6 +36,7 @@
     line-height: 1;
     border: 0;
     background-color: transparent;
+    cursor: pointer;
 
     @{dark-selector} & {
       color: @c-text-secondary-dark;

package/theme-default/slots/Navbar/index.js

@@ -75,7 +75,7 @@ var NavbarContent = function NavbarContent(_ref2) {
   var data = _ref2.data;
   return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(function (item) {
     return /*#__PURE__*/React.createElement("li", {
-      key: item.activePath
+      key: item.activePath || item.link || item.title
     }, item.link && /^(\w+:)\/\/|^(mailto|tel):/.test(item.link) ? /*#__PURE__*/React.createElement("a", {
       href: item.link,
       target: "_blank",

package/theme-default/slots/Navbar/index.less

@@ -78,8 +78,10 @@
         }
       }
 
-      &[data-collapsed] > svg {
-        transform: rotate(180deg);
+      @media @mobile {
+        &[data-collapsed] > svg {
+          transform: rotate(180deg);
+        }
       }
 
       @media @desktop {
@@ -122,7 +124,7 @@
           padding: 0 18px;
           color: @c-text-secondary;
           font-size: 15px;
-          line-height: 1.5;
+          line-height: 1.6;
           text-align: left;
 
           @media @mobile {

package/theme-default/slots/PreviewerActions/index.d.ts

@@ -1,11 +1,12 @@
 import { type IPreviewerProps } from 'dumi';
-import { type FC } from 'react';
+import { type FC, type ReactNode } from 'react';
 import './index.less';
 export interface IPreviewerActionsProps extends IPreviewerProps {
     /**
      * disabled actions
      */
     disabledActions?: ('CSB' | 'STACKBLITZ' | 'EXTERNAL' | 'HTML2SKETCH')[];
+    extra?: ReactNode;
     forceShowCode?: boolean;
     demoContainer: HTMLDivElement | HTMLIFrameElement;
 }

package/theme-default/slots/PreviewerActions/index.js

@@ -159,7 +159,7 @@ var PreviewerActions = function PreviewerActions(props) {
     "data-dumi-tooltip": intl.formatMessage({
       id: 'previewer.actions.separate'
     })
-  }, /*#__PURE__*/React.createElement(IconExternalLink, null)), /*#__PURE__*/React.createElement(PreviewerActionsExtra, props), !props.forceShowCode && /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement(IconExternalLink, null)), props.extra, /*#__PURE__*/React.createElement(PreviewerActionsExtra, props), !props.forceShowCode && /*#__PURE__*/React.createElement("button", {
     className: "dumi-default-previewer-action-btn",
     type: "button",
     onClick: function onClick() {