fix md

components/button/button-group.vue

@@ -1,10 +1,5 @@
-<template>
-  <div :class="classes">
-    <slot></slot>
-  </div>
-</template>
 <script>
-
+import { filterEmpty } from '../_util/vnode'
 export default {
   name: 'ButtonGroup',
   props: {
@@ -38,5 +33,13 @@ export default {
       ]
     },
   },
+  render () {
+    const { classes, $slots } = this
+    return (
+      <div class={classes}>
+        {filterEmpty($slots.default)}
+      </div>
+    )
+  },
 }
 </script>

components/button/demo/basic.md

@@ -1,8 +1,13 @@
-::: demo
-<summary>
+
+<cn>
 #### 按钮类型
 按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。
-</summary>
+</cn>
+
+<us>
+#### Type
+There are `primary` button, `default` button, `dashed` button and `danger` button in antd.
+</us>
 
 ```html
 <template>
@@ -14,4 +19,4 @@
   </div>
 </template>
 ```
-:::
+

components/button/demo/index.vue

@@ -1,25 +1,3 @@
-<template>
-  <div>
-    <md>
-    # Button 按钮
-    按钮用于开始一个即时操作。
-    ## 何时使用
-    标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
-
-    ## 代码演示
-    </md>
-    <Basic />
-    <ButtonGroup />
-    <Disabled />
-    <Ghost />
-    <Icon />
-    <Loading />
-    <h1>TODO ： Multiple</h1>
-    <Multiple />
-    <Size />
-    <Doc class="markdown"/>
-  </div>
-</template>
 <script>
 import Basic from './basic.md'
 import ButtonGroup from './button-group'
@@ -29,18 +7,44 @@ import Icon from './icon'
 import Loading from './loading'
 import Multiple from './multiple'
 import Size from './size'
-import Doc from '../index.zh-CN.md'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
 export default {
-  components: {
-    Basic,
-    ButtonGroup,
-    Disabled,
-    Ghost,
-    Icon,
-    Loading,
-    Multiple,
-    Size,
-    Doc,
+  render () {
+    const md = {
+      cn: `# Button 按钮
+          按钮用于开始一个即时操作。
+          ## 何时使用
+          标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
+          ## 代码演示`,
+      us: `# Button
+          To trigger an operation.
+          ## When To Use
+          A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
+          `,
+    }
+    return (
+      <div>
+        <md md={md}/>
+        <Basic />
+        <ButtonGroup />
+        <Disabled />
+        <Ghost />
+        <Icon />
+        <Loading />
+        <h1>TODO ： Multiple</h1>
+        <Multiple />
+        <Size />
+        <api>
+          <template slot='cn'>
+            <CN/>
+          </template>
+          <template slot='us'>
+            <US/>
+          </template>
+        </api>
+      </div>
+    )
   },
 }
 </script>

components/button/index.en-US.md

@@ -1,15 +1,3 @@
----
-category: Components
-type: General
-title: Button
----
-
-To trigger an operation.
-
-## When To Use
-
-A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
-
 ## API
 
 To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
@@ -25,14 +13,10 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
 | type | can be set to `primary` `ghost` `dashed` `danger`(added in 2.7) or omitted (meaning `default`) | string | `default` |
 | onClick | set the handler to handle `click` event | function | - |
 
+### events
+| Events Name | Description | Arguments |
+| --- | --- | --- |
+| click | handle `click` event  | function(e) |
+
 `<Button>Hello world!</Button>` will be rendered into `<button><span>Hello world!</span></button>`, and all the properties which are not listed above will be transferred to the `<button>` tag.
 
-<style>
-[id^=components-button-demo-] .ant-btn {
-  margin-right: 8px;
-  margin-bottom: 12px;
-}
-[id^=components-button-demo-] .ant-btn-group > .ant-btn {
-  margin-right: 0;
-}
-</style>

components/button/index.zh-CN.md

@@ -6,7 +6,7 @@
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false |
+| ghost | 幽灵属性，使按钮背景透明 | boolean | false |
 | htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |
 | icon | 设置按钮的图标类型 | string | - |
 | loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` |

examples/components/api.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class='markdown'>
+    <slot v-if="lang === 'cn'" name="cn"></slot>
+    <slot v-else name="us"></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'api',
+  data () {
+    const { lang } = this.$route.params
+    return {
+      lang,
+    }
+  },
+}
+</script>

examples/components/demo.vue

@@ -1,16 +1,20 @@
 <script>
 import { Menu } from 'antd'
-import * as AllDemo from './demo'
+import * as AllDemo from '../demo'
 const MenuItem = Menu.Item
 export default {
   render () {
     const { name, demo } = this.$route.params // eslint-disable-line
+    let { lang } = this.$route.params
     const Demo = AllDemo[name]
+    if (lang !== 'cn') {
+      lang = 'us'
+    }
     return (
       <div class='site page-container'>
         <Menu class='nav' selectedKeys={[name]}>
           {Object.keys(AllDemo).map(d => <MenuItem key={d}>
-            <router-link to={{ path: `/components/${d}` }}>{d}</router-link>
+            <router-link to={{ path: `/components/${lang}/${d}` }}>{d}</router-link>
           </MenuItem>)}
         </Menu>
         <div class='content'>

examples/components/demoBox.vue

@@ -2,7 +2,8 @@
   <div class="box box-demo">
     <slot name="component"></slot>
     <div class="box-demo-description">
-      <slot name="description"></slot>
+      <slot v-if="lang === 'cn'" name="description"></slot>
+      <slot v-else name="us-description"></slot>
       <span class="btn-toggle" :class="{open: isOpen}" @click="toggle"><i class="anticon anticon-down-circle-o"></i></span>
     </div>
     <transition appear :css="false" @enter="enter" @leave="leave">
@@ -20,8 +21,10 @@ export default {
     jsfiddle: Object,
   },
   data () {
+    const { lang } = this.$route.params
     return {
       isOpen: false,
+      lang,
     }
   },
   methods: {

examples/components/md.vue

@@ -0,0 +1,38 @@
+<template>
+  <div v-html="marked(text)" />
+</template>
+<script>
+import marked from 'marked'
+marked.setOptions({
+  renderer: new marked.Renderer(),
+  gfm: true,
+  tables: true,
+  breaks: true,
+  pedantic: true,
+  sanitize: true,
+  smartLists: true,
+  smartypants: true,
+})
+export default {
+  name: 'md',
+  props: {
+    md: [Object, String],
+  },
+  data () {
+    const { lang } = this.$route.params
+    let text = ''
+    const md = this.md
+    if (this.$slots.default && this.$slots.default[0] && this.$slots.default[0].text) {
+      text = this.$slots.default[0].text
+    } else {
+      text = typeof md === 'string' ? md : (md[lang] || md.us)
+    }
+    text = text || ''
+    text = text.split('\n').map(t => t.trim()).join('\n')
+    return {
+      marked,
+      text,
+    }
+  },
+}
+</script>

examples/index.js

@@ -4,11 +4,13 @@ import 'highlight.js/styles/solarized-light.css'
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import routes from './routes'
-import Md from './md'
+import Md from './components/md'
+import Api from './components/api'
 import * as Components from '../components/index'
 import demoBox from './components/demoBox'
 Vue.use(VueRouter)
 Vue.component(Md.name, Md)
+Vue.component(Api.name, Api)
 Vue.component('demo-box', demoBox)
 Object.keys(Components).forEach(k => {
   const name = `a${k.replace(/([A-Z])/g, '-$1').toLowerCase()}`

examples/index.less

@@ -10,10 +10,6 @@
     padding: 20px;
   }
 }
-.code-section,
-.box-demo + summary {
-  display: none;
-}
 .highlight > .code-section {
   display: block;
   margin: 0;

examples/md.vue

@@ -1,24 +0,0 @@
-<template>
-  <div v-html="marked($slots.default[0].text.trim() || '')" />
-</template>
-<script>
-import marked from 'marked'
-marked.setOptions({
-  renderer: new marked.Renderer(),
-  gfm: true,
-  tables: true,
-  breaks: false,
-  pedantic: true,
-  sanitize: true,
-  smartLists: true,
-  smartypants: true,
-})
-export default {
-  name: 'md',
-  data () {
-    return {
-      marked,
-    }
-  },
-}
-</script>

examples/routes.js

@@ -1,11 +1,11 @@
-import Demo from './demo.vue'
+import Demo from './components/demo.vue'
 const AsyncComp = () => {
   return {
     component: import(`../components/card/demo/basic.vue`),
   }
 }
 export default [
-  { path: '/components/:name/:demo?', component: Demo },
+  { path: '/components/:lang/:name/:demo?', component: Demo },
   { path: 'test/:name/:demo', component: AsyncComp },
-  { path: '/*', redirect: '/components/menu' },
+  { path: '/*', redirect: '/components/cn/menu' },
 ]

webpack.base.config.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const slugify = require('transliteration').slugify
 const hljs = require('highlight.js')
-
+const Token = require('markdown-it/lib/token')
 const cheerio = require('cheerio')
 
 const fetch = (str, tag) => {
@@ -37,7 +37,7 @@ const renderHighlight = function (str, lang) {
 }
 
 function wrap (render) {
-  return function () {
+  return function (tokens) {
     return render.apply(this, arguments)
       .replace('<code class="', '<code class="hljs ')
       .replace('<code>', '<code class="hljs">')
@@ -55,50 +55,69 @@ md.use(require('markdown-it-anchor'), {
   slugify: slugify,
   permalink: true,
   permalinkBefore: true,
-}).use(require('markdown-it-container'), 'demo', {
-
-  validate: function (params) {
-    return params.trim().match(/^demo\s*(.*)$/)
-  },
-  render: function (tokens, idx) {
-    if (tokens[idx].nesting === 1) {
-      const summaryContent = tokens[idx + 1].content
-      const summary = fetch(summaryContent, 'summary')
-      const summaryHTML = summary ? md.render(summary) : ''
-
-      const content = tokens[idx + 2].content
-      const html = fetch(content, 'template')
-      const script = fetch(content, 'script') || ''
-      const style = fetch(content, 'style') || ''
-      const code = tokens[idx + 2].markup + tokens[idx + 2].info + '\n' + content + tokens[idx + 2].markup
-      const codeHtml = code ? md.render(code) : ''
-
-      let jsfiddle = { html: html, script: script, style: style }
-      jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle))
-      // opening tag
-      return `<template>
-                <demo-box :jsfiddle="${jsfiddle}">
-                  <div class="box-demo-show" slot="component">${html}</div>
-                  <template slot="description">${summaryHTML}</template>
-                  <div class="highlight" slot="code">${codeHtml}</div>
-                </demo-box>
-              </template>
-              <script>
-              ${script}
-              </script>
-              <style>
-              ${style}
-              </style>
-              `
-    } else {
-      return '\n'
-    }
-  },
 })
 md.renderer.rules.table_open = function () {
   return '<table class="table">'
 }
 md.renderer.rules.fence = wrap(md.renderer.rules.fence)
+md.core.ruler.push('update_template', function replace ({ tokens }) {
+  const cnReg = new RegExp('<(cn)(?:[^<]|<)+</\\1>', 'g')
+  const usReg = new RegExp('<(us)(?:[^<]|<)+</\\1>', 'g')
+  let cn = ''
+  let us = ''
+  let template = ''
+  let script = ''
+  let style = ''
+  let code = ''
+  tokens.forEach(token => {
+    if (token.type === 'html_block') {
+      if (token.content.match(cnReg)) {
+        cn = fetch(token.content, 'cn')
+        token.content = ''
+      }
+      if (token.content.match(usReg)) {
+        us = fetch(token.content, 'us')
+        token.content = ''
+      }
+    }
+    if (token.type === 'fence' && token.info === 'html' && token.markup === '```') {
+      code = '````html\n' + token.content + '````'
+      template = fetch(token.content, 'template')
+      script = fetch(token.content, 'script')
+      style = fetch(token.content, 'style')
+      token.content = ''
+      token.type = 'html_block'
+    }
+  })
+  if (template) {
+    let jsfiddle = {
+      html: template,
+      script,
+      style,
+    }
+    jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle))
+    const codeHtml = code ? md.render(code) : ''
+    const cnHtml = cn ? md.render(cn) : ''
+    const newContent = `
+      <template>
+        <demo-box :jsfiddle="${jsfiddle}">
+          <div class="box-demo-show" slot="component">${template}</div>
+          <template slot="description">${cnHtml}</template>
+          <template slot="us-description">${us ? md.render(us) : ''}</template>
+          <div class="highlight" slot="code">${codeHtml}</div>
+        </demo-box>
+      </template>
+      <script>
+      ${script || ''}
+      </script>
+      <style>
+      ${style || ''}
+      </style>`
+    const t = new Token('html_block', '', 0)
+    t.content = newContent
+    tokens.push(t)
+  }
+})
 
 module.exports = {
   entry: {