Merge branch 'master' of https://github.com/umijs/dumi into dumi-them…

…e-mobile
umijs · Aug 20, 2020 · e5ea8bb · e5ea8bb
2 parents 4dfa421 + 191bf8e
commit e5ea8bb
Show file tree

Hide file tree

Showing 13 changed files with 120 additions and 69 deletions.
diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
@@ -1,6 +1,12 @@
-name: 🔂 Surge PR Preview
+name: Surge PR Preview
 
-on: [push, pull_request]
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
 
 jobs:
   preview:

diff --git a/packages/dumi/package.json b/packages/dumi/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "1.1.0-beta.9",
+  "version": "1.1.0-beta.10",
   "description": "dumi",
   "main": "index.js",
   "module": "index.module.js",
@@ -23,7 +23,7 @@
     "PeachScript <scdzwyxst@gmail.com> (https://github.com/PeachScript)"
   ],
   "dependencies": {
-    "@umijs/preset-dumi": "1.1.0-beta.9",
+    "@umijs/preset-dumi": "1.1.0-beta.10",
     "umi": "^3.0.0"
   },
   "license": "MIT"

diff --git a/packages/preset-dumi/package.json b/packages/preset-dumi/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@umijs/preset-dumi",
-  "version": "1.1.0-beta.9",
+  "version": "1.1.0-beta.10",
   "description": "",
   "main": "lib/index.js",
   "files": [
@@ -32,7 +32,7 @@
     "@umijs/types": "3.x",
     "copy-text-to-clipboard": "^2.2.0",
     "deepmerge": "^4.2.2",
-    "dumi-theme-default": "1.0.0-beta.2",
+    "dumi-theme-default": "1.0.0-beta.3",
     "enhanced-resolve": "^4.1.1",
     "github-slugger": "^1.3.0",
     "hast-util-raw": "^6.0.0",

diff --git a/packages/preset-dumi/src/plugins/commands/assets.ts b/packages/preset-dumi/src/plugins/commands/assets.ts
@@ -22,13 +22,13 @@ export default (api: IApi) => {
    */
   api.registerCommand({
     name: 'assets',
-    fn({ args }) {
+    async fn({ args }) {
       const assetsOutputPath = path.resolve(api.paths.cwd, args._[0] || 'assets.json');
       const fileName = path.parse(assetsOutputPath).base;
 
       api.logger.log(`Start to generate ${fileName}...`);
 
-      getRouteConfig(api, ctx.opts);
+      await getRouteConfig(api, ctx.opts);
       fs.writeFileSync(assetsOutputPath, JSON.stringify(assetsPkg, null, 2));
 
       api.logger.log(`Generate ${fileName} successfully!`);

diff --git a/packages/preset-dumi/src/theme/loader.ts b/packages/preset-dumi/src/theme/loader.ts
@@ -54,7 +54,7 @@ function detectInstalledTheme() {
   const pkg = ctx.umi.pkg || {};
   const deps = Object.assign({}, pkg.dependencies, pkg.devDependencies);
 
-  return Object.keys(deps).filter(name => name.startsWith(THEME_PREFIX));
+  return Object.keys(deps).filter(name => name.replace(/^@[\w-]+\//, '').startsWith(THEME_PREFIX));
 }
 
 export default async () => {
@@ -81,24 +81,32 @@ export default async () => {
 
       return result;
     }, []);
-    let contentPath = winPath(path.join(theme, 'src', 'content'));
+    const wrapperPaths = {
+      contentPath: winPath(path.join(theme, 'src', 'content')),
+      layoutPath: winPath(path.join(theme, 'src', 'layout')),
+    };
 
-    try {
-      getModuleResolvePath({ basePath: ctx.umi.paths.cwd, sourcePath: contentPath, silent: true });
-    } catch (err) {
-      contentPath = winPath(path.join(FALLBACK_THEME, 'src', 'content'));
-    }
+    Object.keys(wrapperPaths).forEach(key => {
+      try {
+        getModuleResolvePath({
+          basePath: ctx.umi.paths.cwd,
+          sourcePath: wrapperPaths[key],
+          silent: true,
+        });
+      } catch (err) {
+        wrapperPaths[key] = winPath(path.join(FALLBACK_THEME, 'src', 'content'));
+      }
+    });
 
     cache = await ctx.umi.applyPlugins({
       key: 'dumi.modifyThemeResolved',
       type: ctx.umi.ApplyPluginsType.modify,
       initialValue: {
         name: theme,
-        layoutPath: winPath(path.join(theme, 'src', 'layout')),
-        contentPath,
         modulePath,
         builtins: components,
         fallbacks,
+        ...wrapperPaths,
       },
     });
   }

diff --git a/packages/preset-dumi/src/transformer/fixtures/expect/remark-demo.html b/packages/preset-dumi/src/transformer/fixtures/expect/remark-demo.html
@@ -1,3 +1,3 @@
 <React.Fragment><div className="markdown"><SourceCode code={"import React from 'react';\n\nexport default () => <h1>Hello World!</h1>;\n"} lang="jsx" />
-</div><Previewer sources={{"_":{"jsx":"import React from 'react';\nimport katex from 'katex';\n\nconsole.log(katex);\nexport default () => <h1>Hello World!</h1>;\n","tsx":"import React from 'react';\nimport katex from 'katex';\n\nconsole.log(katex);\n\nexport default () => <h1>Hello World!</h1>;"}}} dependencies={{"react":{"version":"16.13.1"},"katex":{"version":"0.11.1","css":"katex/dist/katex.css"}}} title="test" title_zh-CN="测试" description="<div class=&#x22;markdown&#x22;><p>test css in dependencies</p></div>" description_zh-CN="<div class=&#x22;markdown&#x22;><p>测试依赖中的 CSS</p></div>" identifier="raw-remark-demo"><DumiDemo1 /></Previewer><div className="markdown">
+</div><Previewer sources={{"_":{"jsx":"import React from 'react';\nimport katex from 'katex';\n\nconsole.log(katex);\nexport default () => <h1>Hello World!</h1>;\n","tsx":"import React from 'react';\nimport katex from 'katex';\n\nconsole.log(katex);\n\nexport default () => <h1>Hello World!</h1>;"}}} dependencies={{"react":{"version":"16.13.1"},"katex":{"version":"0.11.1","css":"katex/dist/katex.css"}}} title="test" title_zh-CN="测试" description="<div class=&#x22;markdown&#x22;><p>test css in dependencies，<a href=&#x22;https://d.umijs.org/&#x22; target=&#x22;_blank&#x22;>Link<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; aria-hidden=&#x22;true&#x22; x=&#x22;0px&#x22; y=&#x22;0px&#x22; viewBox=&#x22;0 0 100 100&#x22; width=&#x22;15&#x22; height=&#x22;15&#x22; class=&#x22;__dumi-default-external-link-icon&#x22;>\n  <path fill=&#x22;currentColor&#x22; d=&#x22;M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z&#x22;></path>\n  <polygon fill=&#x22;currentColor&#x22; points=&#x22;45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9&#x22;></polygon>\n</svg></a></p></div>" description_zh-CN="<div class=&#x22;markdown&#x22;><p>测试依赖中的 CSS，<a href=&#x22;https://d.umijs.org/&#x22; target=&#x22;_blank&#x22;>链接<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; aria-hidden=&#x22;true&#x22; x=&#x22;0px&#x22; y=&#x22;0px&#x22; viewBox=&#x22;0 0 100 100&#x22; width=&#x22;15&#x22; height=&#x22;15&#x22; class=&#x22;__dumi-default-external-link-icon&#x22;>\n  <path fill=&#x22;currentColor&#x22; d=&#x22;M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z&#x22;></path>\n  <polygon fill=&#x22;currentColor&#x22; points=&#x22;45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9&#x22;></polygon>\n</svg></a></p></div>" identifier="raw-remark-demo"><DumiDemo1 /></Previewer><div className="markdown">
 </div><Previewer sources={{"_":{"jsx":"export default () => <></>;\n","tsx":"export default () => <></>;"}}} dependencies={{}} hideActions={["CSB"]} identifier="raw-remark-demo-1"><DumiDemo2 /></Previewer></React.Fragment>
diff --git a/packages/preset-dumi/src/transformer/fixtures/raw/remark-demo.md b/packages/preset-dumi/src/transformer/fixtures/raw/remark-demo.md
@@ -8,8 +8,8 @@ export default () => <h1>Hello World!</h1>;
 /**
  * title: test
  * title.zh-CN: 测试
- * desc: test css in dependencies
- * desc.zh-CN: 测试依赖中的 CSS
+ * desc: test css in dependencies，[Link](https://d.umijs.org)
+ * desc.zh-CN: 测试依赖中的 CSS，[链接](https://d.umijs.org)
  */
 import React from 'react';
 import katex from 'katex';

diff --git a/packages/preset-dumi/src/transformer/remark/index.ts b/packages/preset-dumi/src/transformer/remark/index.ts
@@ -44,7 +44,8 @@ export default (source: string, fileAbsPath: string, type: 'jsx' | 'html') => {
     .use(code)
     .use(previewer)
     .use(isolation)
-    .data('fileAbsPath', fileAbsPath);
+    .data('fileAbsPath', fileAbsPath)
+    .data('outputType', type);
 
   // apply compiler via type
   processor.use(rehypeCompiler[0], rehypeCompiler[1]);

diff --git a/packages/preset-dumi/src/transformer/remark/link.ts b/packages/preset-dumi/src/transformer/remark/link.ts
@@ -4,37 +4,72 @@ import has from 'hast-util-has-property';
 import is from 'hast-util-is-element';
 import url from 'url';
 
-export default () => ast => {
-  visit(ast, 'element', (node, i, parent) => {
-    // handle internal link, external link & anchor link
-    if (is(node, 'a') && has(node, 'href')) {
-      let LinkComponent = 'Link';
-      let parsedUrl = url.parse(node.properties.href);
-      const children = (node.children || []).map(n => toHtml(n)).join('');
-      const properties = Object.keys(node.properties)
-        .filter(prop => !['href'].includes(prop))
-        .map(prop => `${prop}="${node.properties[prop]}"`)
-        .join(' ');
+export default function link() {
+  return ast => {
+    visit(ast, 'element', (node, i, parent) => {
+      // handle internal link, external link & anchor link
+      if (is(node, 'a') && has(node, 'href')) {
+        let LinkComponent = 'Link';
+        let parsedUrl = url.parse(node.properties.href);
+        const children = (node.children || []).map(n => toHtml(n)).join('');
+        let properties = Object.keys(node.properties)
+          .filter(prop => !['href'].includes(prop))
+          .map(prop => `${prop}="${node.properties[prop]}"`)
+          .join(' ');
 
-      // compatible with normal markdown link
-      // see https://github.com/umijs/dumi/issues/181
-      // TODO: https://github.com/umijs/dumi/issues/238
-      if (/\.md$/i.test(parsedUrl.pathname)) {
-        parsedUrl.pathname = parsedUrl.pathname.replace(/\.md$/i, '');
-      }
+        // compatible with normal markdown link
+        // see https://github.com/umijs/dumi/issues/181
+        // TODO: https://github.com/umijs/dumi/issues/238
+        if (/\.md$/i.test(parsedUrl.pathname)) {
+          parsedUrl.pathname = parsedUrl.pathname.replace(/\.md$/i, '');
+        }
 
-      // handle anchor link
-      if (parsedUrl.hash) {
-        LinkComponent = 'AnchorLink';
-      }
+        // handle anchor link
+        if (parsedUrl.hash) {
+          LinkComponent = 'AnchorLink';
+        }
 
-      // replace original node
-      parent.children[i] = {
-        type: 'raw',
-        value: `<${LinkComponent} to="${url.format(
-          parsedUrl,
-        )}" ${properties}>${children}</${LinkComponent}>`,
-      };
-    }
-  });
-};
+        // replace original node
+        if (this.data('outputType') === 'jsx') {
+          parent.children[i] = {
+            type: 'raw',
+            value: `<${LinkComponent} to="${url.format(
+              parsedUrl,
+            )}" ${properties}>${children}</${LinkComponent}>`,
+          };
+        } else if (this.data('outputType') === 'html') {
+          if (parsedUrl.hostname) {
+            properties += ' target="_blank"';
+          }
+
+          parent.children[i] = {
+            type: 'raw',
+            value: `<a href="${url.format(parsedUrl)}" ${properties}>${children}${
+              parsedUrl.hostname
+                ? `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-hidden="true"
+  x="0px"
+  y="0px"
+  viewBox="0 0 100 100"
+  width="15"
+  height="15"
+  class="__dumi-default-external-link-icon"
+>
+  <path
+    fill="currentColor"
+    d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
+  />
+  <polygon
+    fill="currentColor"
+    points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
+  />
+</svg>`
+                : ''
+            }</a>`,
+          };
+        }
+      }
+    });
+  };
+}
diff --git a/packages/theme-default/package.json b/packages/theme-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dumi-theme-default",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "The official default theme of dumi",
   "files": [
     "es",

diff --git a/packages/theme-default/src/builtins/Previewer.less b/packages/theme-default/src/builtins/Previewer.less
@@ -14,7 +14,8 @@
   }
 
   &-target {
-    border-color: #3d62d2;
+    border-color: fade(@c-primary, 50%);
+    box-shadow: 0 0 0 5px fade(@c-primary, 5%);
   }
 
   &-desc {
@@ -32,19 +33,18 @@
       margin-bottom: 0;
     }
 
-    &[title] {
+    &[data-title] {
       position: relative;
       padding-top: 1.2em;
-      pointer-events: none;
 
-      &::before {
-        content: attr(title);
+      > a:first-child {
         position: absolute;
         top: 0;
         left: 1em;
         margin-left: -4px;
         padding: 0 4px;
         color: @c-heading;
+        font-size: inherit;
         font-weight: 500;
         background-color: #fff;
         transform: translateY(-50%);

diff --git a/packages/theme-default/src/builtins/Previewer.tsx b/packages/theme-default/src/builtins/Previewer.tsx
@@ -9,6 +9,7 @@ import {
   useCopy,
   useLocaleProps,
   Link,
+  AnchorLink,
   IPreviewerComponentProps,
 } from 'dumi/theme';
 import SourceCode from './SourceCode';
@@ -79,15 +80,15 @@ const Previewer: React.FC<IPreviewerProps> = oProps => {
       >
         {props.children}
       </div>
-      <div
-        className="__dumi-default-previewer-desc"
-        onClick={() => {
-          history.push(`#${props.identifier}`);
-        }}
-        title={props.title}
-        // eslint-disable-next-line
-        dangerouslySetInnerHTML={{ __html: props.description }}
-      />
+      <div className="__dumi-default-previewer-desc" data-title={props.title}>
+        {props.title && <AnchorLink to={`#${props.identifier}`}>{props.title}</AnchorLink>}
+        {props.description && (
+          <div
+            // eslint-disable-next-line
+            dangerouslySetInnerHTML={{ __html: props.description }}
+          />
+        )}
+      </div>
       <div className="__dumi-default-previewer-actions">
         {openCSB && (
           <button

diff --git a/packages/theme-default/src/test/index.test.tsx b/packages/theme-default/src/test/index.test.tsx
@@ -196,7 +196,7 @@ describe('default theme', () => {
               }}
               dependencies={{}}
             >
-              <>demo-1</>
+              <>demo-1 Content</>
             </Previewer>
             <Previewer
               title="demo-2"
@@ -212,7 +212,7 @@ describe('default theme', () => {
               }}
               dependencies={{}}
             >
-              <>demo-2</>
+              <>demo-2 Content</>
             </Previewer>
           </>
         </Layout>