dumi 2.0.0 → 2.0.2

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

@@ -23,7 +23,8 @@ export var DumiDemoGrid = function DumiDemoGrid(props) {
 
     var cols = [];
 
-    if ((_fm$demo = fm.demo) !== null && _fm$demo !== void 0 && _fm$demo.cols && fm.demo.cols > 1 && window.innerWidth > 1024) {
+    if ((_fm$demo = fm.demo) !== null && _fm$demo !== void 0 && _fm$demo.cols && fm.demo.cols > 1 && ( // compatible for ssr env
+    typeof window === 'undefined' || window.innerWidth > 1024)) {
       for (var i = 0; i < items.length; i += fm.demo.cols) {
         items.slice(i, i + fm.demo.cols).forEach(function (item, j) {
           var _cols$j;

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

@@ -21,6 +21,10 @@ export interface IPreviewerProps {
      * debug mark (will only render in dev by default)
      */
     debug?: boolean;
+    /**
+     * url for render current demo in a single page
+     */
+    demoUrl: string;
     /**
      * disable demo content padding
      */

package/dist/client/theme-api/useSiteSearch/worker.js

@@ -55,6 +55,10 @@ function createMetadataSection(rawTitle, title, link, texts, tocIndex) {
   } : null;
 }
 
+function generateRouteTitle(fm) {
+  return [fm.title, fm.subtitle].filter(Boolean).join(' ');
+}
+
 function generateSearchMetadata(routes, demos, nav) {
   var metadata = []; // generate demos mapping by route.id
 
@@ -83,11 +87,11 @@ function generateSearchMetadata(routes, demos, nav) {
 
         return (_demo$asset = demo.asset) === null || _demo$asset === void 0 ? void 0 : _demo$asset.id;
       });
-      var orphanSection = createMetadataSection('', routeMeta.frontmatter.title, routeAbsPath, routeMeta.texts);
+      var orphanSection = createMetadataSection('', generateRouteTitle(routeMeta.frontmatter), routeAbsPath, routeMeta.texts);
       var tocSections = routeMeta.toc.reduce(function (acc, toc, i) {
         // exclude demo id, to avoid duplicate
         if (!demoIds.includes(toc.id) && toc.depth > 1) {
-          acc.push(createMetadataSection(toc.title, "".concat(routeMeta.frontmatter.title, " - ").concat(toc.title), "".concat(routeAbsPath, "#").concat(toc.id), routeMeta.texts, i));
+          acc.push(createMetadataSection(toc.title, "".concat(generateRouteTitle(routeMeta.frontmatter), " - ").concat(toc.title), "".concat(routeAbsPath, "#").concat(toc.id), routeMeta.texts, i));
         }
 
         return acc;
@@ -96,25 +100,25 @@ function generateSearchMetadata(routes, demos, nav) {
         var key = _ref.key,
             meta = _ref.meta;
         // collect orphan section that not in toc
-        var tabOrphanSection = createMetadataSection('', "".concat(routeMeta.frontmatter.title, " - ").concat(meta.frontmatter.title), "".concat(routeAbsPath, "?").concat(TAB_QUERY_KEY, "=").concat(key), meta.texts);
+        var tabOrphanSection = createMetadataSection('', "".concat(generateRouteTitle(routeMeta.frontmatter), " - ").concat(meta.frontmatter.title), "".concat(routeAbsPath, "?").concat(TAB_QUERY_KEY, "=").concat(key), meta.texts);
         if (tabOrphanSection) acc.push(tabOrphanSection); // collect sections by toc
 
         acc.push.apply(acc, _toConsumableArray(meta.toc.map(function (toc, i) {
-          return createMetadataSection(toc.title, "".concat(routeMeta.frontmatter.title, " - ").concat(meta.frontmatter.title, " - ").concat(toc.title), "".concat(routeAbsPath, "?").concat(TAB_QUERY_KEY, "=").concat(key, "#").concat(toc.id), meta.texts, i);
+          return createMetadataSection(toc.title, "".concat(generateRouteTitle(routeMeta.frontmatter), " - ").concat(meta.frontmatter.title, " - ").concat(toc.title), "".concat(routeAbsPath, "?").concat(TAB_QUERY_KEY, "=").concat(key, "#").concat(toc.id), meta.texts, i);
         })));
         return acc;
       }, []);
       metadata.push({
         navTitle: routeNav === null || routeNav === void 0 ? void 0 : routeNav.title,
         navOrder: routeNav ? nav.indexOf(routeNav) : Infinity,
-        title: routeMeta.frontmatter.title,
+        title: generateRouteTitle(routeMeta.frontmatter),
         link: routeAbsPath,
         sections: [].concat(_toConsumableArray(orphanSection ? [orphanSection] : []), _toConsumableArray(tocSections), _toConsumableArray(tabSections)),
         demos: ((_demosMapping$route$i = demosMapping[route.id]) === null || _demosMapping$route$i === void 0 ? void 0 : _demosMapping$route$i.map(function (demo) {
           return {
             link: "".concat(routeAbsPath, "#").concat(demo.asset.id),
             rawTitle: demo.asset.title || '',
-            title: demo.asset.title || routeMeta.frontmatter.title,
+            title: demo.asset.title || generateRouteTitle(routeMeta.frontmatter),
             description: demo.asset.description || '',
             keywords: demo.asset.keywords || []
           };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Framework for developing UI components",
   "keywords": [],
   "license": "MIT",

package/theme-default/builtins/Previewer/index.js

@@ -27,7 +27,7 @@ var Previewer = function Previewer(props) {
     style: ['string', 'number'].includes(_typeof(props.iframe)) ? {
       height: Number(props.iframe)
     } : {},
-    src: "/~demos/".concat(props.asset.id)
+    src: props.demoUrl
   }) : props.children), /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-previewer-meta"
   }, (props.title || props.debug) && /*#__PURE__*/React.createElement("div", {

package/theme-default/builtins/SourceCode/index.d.ts

@@ -1,5 +1,5 @@
 import { type Language } from 'prism-react-renderer';
-import 'prismjs/themes/prism.css';
+import 'prismjs/themes/prism-coy.css';
 import { type FC } from 'react';
 import './index.less';
 declare const SourceCode: FC<{

package/theme-default/builtins/SourceCode/index.js

@@ -15,7 +15,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { ReactComponent as IconCheck } from '@ant-design/icons-svg/inline-svg/outlined/check.svg';
 import { ReactComponent as IconCopy } from '@ant-design/icons-svg/inline-svg/outlined/copy.svg';
 import Highlight, { defaultProps } from 'prism-react-renderer';
-import 'prismjs/themes/prism.css';
+import 'prismjs/themes/prism-coy.css';
 import React, { useRef, useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import "./index.less";

package/theme-default/builtins/SourceCode/index.less

@@ -4,17 +4,23 @@
   @bg-color: tint(@c-site-bg, 50%);
 
   position: relative;
-  font-size: 14px;
   background-color: @bg-color;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 
   > pre.prism-code {
     margin: 0;
-    padding-left: 24px;
-    padding-right: 24px;
+    padding: 18px 24px;
+    font-size: 14px;
+    line-height: 1.58;
     direction: ltr;
     background: transparent;
+
+    // remove shadow from coy theme
+    &::before,
+    &::after {
+      content: none;
+    }
   }
 
   &-copy {

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

@@ -4,7 +4,7 @@
   list-style: none;
   margin: 12px 0 0;
   padding: 4px 0;
-  border-left: 1px solid @c-border;
+  border-inline-start: 1px solid @c-border;
 
   &:empty {
     display: none;
@@ -30,7 +30,7 @@
       &.active {
         margin-inline-start: -1px;
         color: @c-text;
-        border-left: 1px solid @c-primary;
+        border-inline-start: 1px solid @c-primary;
       }
     }