site: update demo relative

2024-11-25 03:29:59 +08:00 · 2016-05-20 16:09:32 +08:00 · 2016-05-20 16:09:32 +08:00 · 7017c9e5d1
commit 7017c9e5d1
parent 1a9708febf
5 changed files with 112 additions and 83 deletions
--- a/site/bisheng-plugin-antd/lib/process-demo.js
+++ b/site/bisheng-plugin-antd/lib/process-demo.js
@ -1,3 +1,40 @@
+const JsonML = require('jsonml.js/lib/utils');
+
 module.exports = (markdownData) => {
+  const meta = markdownData.meta;
+  meta.id = meta.filename.replace(/\.md$/, '').replace(/\//g, '-');
+
+  const contentChildren = JsonML.getChildren(markdownData.content);
+  const chineseIntroStart = contentChildren.findIndex((node) => {
+    return JsonML.getTagName(node) === 'h2' &&
+      JsonML.getChildren(node)[0] === 'zh-CN';
+  });
+  const englishIntroStart = contentChildren.findIndex((node) => {
+    return JsonML.getTagName(node) === 'h2' &&
+      JsonML.getChildren(node)[0] === 'en-US';
+  });
+  const codeIndex = contentChildren.findIndex((node) => {
+    return JsonML.getTagName(node) === 'pre' &&
+      JsonML.getAttributes(node).lang === 'jsx';
+  });
+  if (chineseIntroStart > -1 /* equal to englishIntroStart > -1 */) {
+    markdownData.content = {
+      'zh-CN': contentChildren.slice(chineseIntroStart + 1, englishIntroStart),
+      'en-US': contentChildren.slice(englishIntroStart + 1, codeIndex),
+    };
+  } else {
+    markdownData.content = contentChildren.slice(0, codeIndex);
+  }
+
+  markdownData.code = contentChildren[codeIndex];
+
+  const styleNode = contentChildren.find((node) => {
+    return JsonML.getTagName(node) === 'pre' &&
+      JsonML.getAttributes(node).lang === 'css';
+  });
+  if (styleNode) {
+    markdownData.highlightedStyle = JsonML.getAttributes(styleNode).highlighted;
+  }
+
  return markdownData;
 };
--- a/site/common/styles/demo.less
+++ b/site/common/styles/demo.less
@ -80,7 +80,7 @@
 }

 .code-box-meta h4,
-.code-box-meta p {
+section.code-box-meta p {
  margin: 0;
  width: 93%;
 }
@ -172,8 +172,10 @@
 }

 .code-box .highlight {
-  padding: 5px;
-
+  pre {
+    margin: 0;
+    padding: 0;
+  }
  &:not(:first-child) {
     border-top: 1px dashed #e9e9e9;
  }
--- a/site/theme/static/style.js
+++ b/site/theme/static/style.js
@ -11,3 +11,4 @@ import './toc.less';
 import './not-found.less';
 import './font.less';
 import './highlight.less';
+import './demo.less';
--- a/site/theme/template/Content/ComponentDoc.jsx
+++ b/site/theme/template/Content/ComponentDoc.jsx
@ -1,10 +1,10 @@
 import React from 'react';
 import { Link } from 'react-router';
+import DocumentTitle from 'react-document-title';
 import classNames from 'classnames';
 import { Row, Col, Icon, Affix } from 'antd';
 import { getChildren } from 'jsonml.js/lib/utils';
 import Demo from './Demo';
-import * as utils from '../utils';

 export default class ComponentDoc extends React.Component {
  static contextTypes = {
@ -19,14 +19,6 @@ export default class ComponentDoc extends React.Component {
    };
  }

-  componentDidMount() {
-    this.componentDidUpdate();
-  }
-  componentDidUpdate() {
-    const { title, subtitle, chinese, english } = this.props.doc.meta;
-    utils.setTitle(`${subtitle || chinese || ''} ${title || english} - Ant Design`);
-  }
-
  handleExpandToggle = () => {
    this.setState({
      expandAll: !this.state.expandAll,
@ -46,23 +38,22 @@ export default class ComponentDoc extends React.Component {
    const isSingleCol = meta.cols === 1;
    const leftChildren = [];
    const rightChildren = [];
-    demos.sort((a, b) => {
-      return parseInt(a.meta.order, 10) - parseInt(b.meta.order, 10);
-    }).forEach((demoData, index) => {
-      if (index % 2 === 0 || isSingleCol) {
-        leftChildren.push(
-          <Demo {...demoData} className={scrollTo === demoData.id ? 'code-box-target' : ''}
-            key={index}
-            expand={expand} pathname={location.pathname} />
-        );
-      } else {
-        rightChildren.push(
-          <Demo {...demoData} className={scrollTo === demoData.id ? 'code-box-target' : ''}
-            key={index}
-            expand={expand} pathname={location.pathname} />
-        );
-      }
-    });
+    demos.sort((a, b) => a.meta.order - b.meta.order)
+      .forEach((demoData, index) => {
+        if (index % 2 === 0 || isSingleCol) {
+          leftChildren.push(
+            <Demo {...demoData} className={scrollTo === demoData.meta.id ? 'code-box-target' : ''}
+              key={index} utils={props.utils}
+              expand={expand} pathname={location.pathname} />
+          );
+        } else {
+          rightChildren.push(
+            <Demo {...demoData} className={scrollTo === demoData.meta.id ? 'code-box-target' : ''}
+              key={index} utils={props.utils}
+              expand={expand} pathname={location.pathname} />
+          );
+        }
+      });
    const expandTriggerClass = classNames({
      'code-box-expand-trigger': true,
      'code-box-expand-trigger-active': expand,
@ -73,58 +64,61 @@ export default class ComponentDoc extends React.Component {
      const localizeTitle = typeof title === 'object' ?
              title[locale] : title;
      return (
-        <li key={demo.id}>
-          <Link className={demo.id === scrollTo ? 'current' : ''}
-            to={{ pathname: location.pathname, query: { scrollTo: `${demo.id}` } }}>
+        <li key={demo.meta.id}>
+          <Link className={demo.meta.id === scrollTo ? 'current' : ''}
+            to={{ pathname: location.pathname, query: { scrollTo: `${demo.meta.id}` } }}>
            {localizeTitle}
          </Link>
        </li>
      );
    });

+    const { title, subtitle, chinese, english } = meta;
    return (
-      <article>
-        <Affix className="toc-affix" offsetTop={16}>
-          <ul className="toc demos-anchor">
-            {jumper}
-          </ul>
-        </Affix>
-        <section className="markdown">
-          <h1>{meta.title || meta.english} {meta.subtitle || meta.chinese}</h1>
+      <DocumentTitle title={`${subtitle || chinese || ''} ${title || english} - Ant Design`}>
+        <article>
+          <Affix className="toc-affix" offsetTop={16}>
+            <ul className="toc demos-anchor">
+              {jumper}
+            </ul>
+          </Affix>
+          <section className="markdown">
+            <h1>{meta.title || meta.english} {meta.subtitle || meta.chinese}</h1>
+            {
+              props.utils.toReactComponent(
+                ['section', { className: 'markdown' }]
+                  .concat(getChildren(content))
+              )
+            }
+            <h2>
+              代码演示
+              <Icon type="appstore" className={expandTriggerClass}
+                title="展开全部代码" onClick={this.handleExpandToggle} />
+            </h2>
+          </section>
+          <Row gutter={16}>
+            <Col span={isSingleCol ? '24' : '12'}
+              className={isSingleCol ?
+                'code-boxes-col-1-1' :
+                'code-boxes-col-2-1'
+              }
+            >
+              {leftChildren}
+            </Col>
+            {
+              isSingleCol ? null :
+                <Col className="code-boxes-col-2-1" span="12">{rightChildren}</Col>
+            }
+          </Row>
          {
            props.utils.toReactComponent(
-              ['section', { className: 'markdown' }]
-                .concat(getChildren(content))
+              ['section', {
+                className: 'markdown api-container',
+              }].concat(doc.api || [])
            )
          }
-          <h2>
-            代码演示
-            <Icon type="appstore" className={expandTriggerClass}
-              title="展开全部代码" onClick={this.handleExpandToggle} />
-          </h2>
-        </section>
-        <Row gutter={16}>
-          <Col span={isSingleCol ? '24' : '12'}
-            className={isSingleCol ?
-              'code-boxes-col-1-1' :
-              'code-boxes-col-2-1'
-            }
-          >
-            {leftChildren}
-          </Col>
-          {
-            isSingleCol ? null :
-              <Col className="code-boxes-col-2-1" span="12">{rightChildren}</Col>
-          }
-        </Row>
-        {
-          props.utils.toReactComponent(
-            ['section', {
-              className: 'markdown api-container',
-            }].concat(doc.api || [])
-          )
-        }
-      </article>
+        </article>
+      </DocumentTitle>
    );
  }
 }
--- a/site/theme/template/Content/Demo.jsx
+++ b/site/theme/template/Content/Demo.jsx
@ -1,7 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router';
 import classNames from 'classnames';
-import * as utils from '../utils';

 const isLocal = location.port;

@ -31,22 +30,22 @@ export default class Demo extends React.Component {
  }

  render() {
-    const { id, className, meta, intro, preview, style, src,
-            highlightedCode, highlightedStyle, pathname } = this.props;
+    const { className, meta, content, preview, style, src,
+            code, highlightedStyle, pathname } = this.props;
    const codeExpand = this.state.codeExpand;
    const codeBoxClass = classNames({
      'code-box': true,
      [className]: className,
      expand: codeExpand,
    });
-
    const locale = this.context.intl.locale;
-    const localizeIntro = intro[locale] || intro;
-    const introChildren = utils.jsonmlToComponent(pathname, ['div'].concat(localizeIntro));
+    const localizeIntro = content[locale] || content;
+    const introChildren = this.props.utils
+      .toReactComponent(['div'].concat(localizeIntro));
    const localizedTitle = typeof meta.title === 'object' ?
            meta.title[locale] : meta.title;
    return (
-      <section className={codeBoxClass} id={id}>
+      <section className={codeBoxClass} id={meta.id}>
        <section className="code-box-demo">
          {
            meta.iframe ?
@ -61,7 +60,7 @@ export default class Demo extends React.Component {
        </section>
        <section className="code-box-meta markdown">
          <div className="code-box-title">
-            <Link to={{ pathname, query: { scrollTo: id } }}>
+            <Link to={{ pathname, query: { scrollTo: meta.id } }}>
              {localizedTitle}
            </Link>
          </div>
@ -73,11 +72,7 @@ export default class Demo extends React.Component {
        <section className={`highlight-wrapper ${codeExpand ? 'highlight-wrapper-expand' : ''}`}
          key="code">
          <div className="highlight">
-            <pre>
-              <code className="javascript" dangerouslySetInnerHTML={{
-                __html: highlightedCode,
-              }} />
-            </pre>
+            {this.props.utils.toReactComponent(code)}
          </div>
          {
            highlightedStyle ?