update site

Author: tangjinzhou

.gitignore

@@ -61,6 +61,7 @@ typings/
 dist
 lib
 es
+site-dist
 
 # 备份文件
 /components/test/*

package-lock.json

@@ -24,7 +24,8 @@
   "scripts": {
     "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot",
     "test": "karma start test/karma.conf.js --single-run",
-    "build": "sh build.sh",
+    "site": "node scripts/run.js site-dist",
+    "copy": "node scripts/run.js copy-html",
     "compile": "node antd-tools/cli/run.js compile",
     "dist": "node antd-tools/cli/run.js dist",
     "lint": "eslint -c ./.eslintrc --fix --ext .jsx ./components",
@@ -100,6 +101,7 @@
     "markdown-it": "^8.4.0",
     "marked": "^0.3.7",
     "merge2": "^1.2.1",
+    "mkdirp": "^0.5.1",
     "mocha": "^3.2.0",
     "postcss": "^6.0.20",
     "postcss-loader": "^2.1.2",

package.json

@@ -6,15 +6,15 @@ if [[ $TRAVIS_BRANCH == "master" && $TRAVIS_PULL_REQUEST == "false" ]]; then
 
 echo "Starting to update gh-pages\n"
 
-rm -rf dist
-mkdir dist
+rm -rf site-dist
+mkdir site-dist
 
 git config --global user.email "[email protected]"
 git config --global user.name "Travis"
 
-./node_modules/.bin/webpack --config webpack.site.config.js
+npm run site
 
-cd dist
+cd site-dist
 git init
 git add -f .
 git commit -m "Travis build"

scripts/deploy-to-gh-pages.sh

@@ -0,0 +1,80 @@
+'use strict'
+const webpack = require('webpack')
+
+const path = require('path')
+const gulp = require('gulp')
+const readline = require('readline')
+const fs = require('fs')
+
+const rimraf = require('rimraf')
+const mkdirp = require('mkdirp')
+
+const cwd = process.cwd()
+
+function dist (done) {
+  rimraf.sync(path.join(cwd, 'site-dist'))
+  process.env.RUN_ENV = 'PRODUCTION'
+  const webpackConfig = require(path.join(cwd, 'webpack.site.config.js'))
+  webpack(webpackConfig, (err, stats) => {
+    if (err) {
+      console.error(err.stack || err)
+      if (err.details) {
+        console.error(err.details)
+      }
+      return
+    }
+
+    const info = stats.toJson()
+
+    if (stats.hasErrors()) {
+      console.error(info.errors)
+    }
+
+    if (stats.hasWarnings()) {
+      console.warn(info.warnings)
+    }
+
+    const buildInfo = stats.toString({
+      colors: true,
+      children: true,
+      chunks: false,
+      modules: false,
+      chunkModules: false,
+      hash: false,
+      version: false,
+    })
+    console.log(buildInfo)
+    done(0)
+  })
+}
+
+function copyHtml () {
+  const rl = readline.createInterface({
+    input: fs.createReadStream(path.join(cwd, 'site/demo.js')),
+  })
+
+  rl.on('line', (line) => {
+    const name = line.split('antd/')[1].split('/')[0]
+    console.log('create path:', name)
+    const toPath1 = `site-dist/components/${name}`
+    const toPath2 = `site-dist/components/${name}-cn`
+    rimraf.sync(path.join(cwd, toPath1))
+    rimraf.sync(path.join(cwd, toPath2))
+    mkdirp(path.join(cwd, toPath1), function () {
+      fs.writeFileSync(path.join(cwd, `${toPath1}/index.html`), fs.readFileSync(path.join(cwd, 'site-dist/index.html')))
+    })
+    mkdirp(path.join(cwd, toPath2), function () {
+      fs.writeFileSync(path.join(cwd, `${toPath2}/index.html`), fs.readFileSync(path.join(cwd, 'site-dist/index.html')))
+    })
+  })
+}
+
+gulp.task('site-dist', (done) => {
+  dist(() => {
+    copyHtml()
+  })
+})
+gulp.task('copy-html', () => {
+  copyHtml()
+})
+

scripts/gulpfile.js

@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+
+'use strict'
+
+require('colorful').colorful()
+const gulp = require('gulp')
+const program = require('commander')
+
+program.on('--help', () => {
+  console.log('  Usage:'.to.bold.blue.color)
+  console.log()
+})
+
+program.parse(process.argv)
+
+const task = program.args[0]
+
+if (!task) {
+  program.help()
+} else {
+  console.log('scripts run', task)
+
+  require('./gulpfile')
+
+  gulp.start(task)
+}

scripts/run.js

@@ -0,0 +1,37 @@
+<template>
+<li :class="justCopied ? 'copied' : ''" v-clipboard:copy="text"
+      v-clipboard:success="onCopied">
+  <a-icon :type="type" />
+  <span class='anticon-class'>
+    <a-badge :dot="isNew">
+      {{type}}
+    </a-badge>
+  </span>
+</li>
+</template>
+<script>
+import BaseMixin from 'antd/_util/BaseMixin'
+
+export default {
+  mixins: [BaseMixin],
+  props: {
+    type: String,
+    isNew: Boolean,
+  },
+  data () {
+    return {
+      justCopied: false,
+      text: `<a-icon type="${this.type}" />`,
+    }
+  },
+  methods: {
+    onCopied () {
+      this.setState({ justCopied: true }, () => {
+        setTimeout(() => {
+          this.setState({ justCopied: false })
+        }, 2000)
+      })
+    },
+  },
+}
+</script>

site/components/IconSet/CopyableIcon.vue

@@ -0,0 +1,40 @@
+<script>
+import CopyableIcon from './CopyableIcon'
+export default {
+  props: {
+    catigory: String,
+  },
+  data () {
+    return {
+      icons: {
+        direction: ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrows-alt', 'down', 'up', 'left', 'right', 'caret-up', 'caret-down', 'caret-left', 'caret-right', 'up-circle', 'down-circle', 'left-circle', 'right-circle', 'up-circle-o', 'down-circle-o', 'right-circle-o', 'left-circle-o', 'double-right', 'double-left', 'verticle-left', 'verticle-right', 'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'play-circle', 'play-circle-o', 'up-square', 'down-square', 'left-square', 'right-square', 'up-square-o', 'down-square-o', 'left-square-o', 'right-square-o', 'login', 'logout', 'menu-fold', 'menu-unfold'],
+        suggestion: ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'plus-square', 'plus-square-o', 'minus-square', 'minus-square-o', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'close', 'close-circle', 'close-circle-o', 'close-square', 'close-square-o', 'check', 'check-circle', 'check-circle-o', 'check-square', 'check-square-o', 'clock-circle-o', 'clock-circle', 'warning'],
+        logo: [
+          'android', 'android-o', 'apple', 'apple-o', 'windows', 'windows-o', 'ie', 'chrome', 'github', 'aliwangwang', 'aliwangwang-o', 'dingding', 'dingding-o',
+          'weibo-square', 'weibo-circle', 'taobao-circle', 'html5', 'weibo', 'twitter', 'wechat', 'youtube', 'alipay-circle', 'taobao', 'skype', 'qq', 'medium-workmark', 'gitlab', 'medium', 'linkedin', 'google-plus',
+          'dropbox', 'facebook', 'codepen', 'amazon', 'google', 'codepen-circle', 'alipay', 'ant-design', 'aliyun',
+        ],
+        other: ['lock', 'unlock', 'area-chart', 'pie-chart', 'bar-chart', 'dot-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'code-o', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'file-pdf', 'file-word', 'file-excel', 'file-jpg', 'file-ppt', 'file-add', 'folder', 'folder-open', 'folder-add', 'hdd', 'frown', 'frown-o', 'meh', 'meh-o', 'smile', 'smile-o', 'inbox', 'laptop', 'appstore-o', 'appstore', 'line-chart', 'link', 'mail', 'mobile', 'notification', 'paper-clip', 'picture', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'tablet', 'tag', 'tag-o', 'tags', 'tags-o', 'to-top', 'upload', 'user', 'video-camera', 'home', 'loading', 'loading-3-quarters', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'heart-o', 'heart', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customer-service', 'qrcode', 'scan', 'like', 'like-o', 'dislike', 'dislike-o', 'message', 'pay-circle', 'pay-circle-o', 'calculator', 'pushpin', 'pushpin-o', 'bulb', 'select', 'switcher', 'rocket', 'bell', 'disconnect', 'database', 'compass', 'barcode', 'hourglass', 'key', 'flag', 'layout', 'printer', 'sound', 'usb', 'skin', 'tool', 'sync', 'wifi', 'car', 'schedule', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'man', 'woman', 'shop', 'gift', 'idcard', 'medicine-box', 'red-envelope', 'coffee', 'copyright', 'trademark', 'safety', 'wallet', 'bank', 'trophy', 'contacts', 'global', 'shake', 'api', 'fork', 'dashboard', 'form', 'table', 'profile'],
+      },
+      newIcons: [
+        'aliyun',
+      ],
+    }
+  },
+
+  render () {
+    const { catigory } = this.$props
+    const listClassName = {
+      'anticons-list': true,
+      clearfix: true,
+    }
+    return (
+      <ul class={listClassName}>
+        {this.icons[catigory].map(type => (
+          <CopyableIcon key={type} type={type} isNew={this.newIcons.indexOf(type) >= 0} />
+        ))}
+      </ul>
+    )
+  },
+}
+</script>

site/components/IconSet/index.vue

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

site/components/api.vue

@@ -0,0 +1,83 @@
+<script>
+import * as AllDemo from '../demo'
+import Header from './header'
+import zhCN from 'antd/locale-provider/zh_CN'
+import enUS from 'antd/locale-provider/default'
+import _ from 'lodash'
+import { isZhCN } from '../util'
+
+export default {
+  render () {
+    let { name } = this.$route.params
+    const lang = isZhCN(name) ? 'cn' : 'us'
+    name = name.replace('-cn', '')
+    const titleMap = {}
+    const menuConfig = {
+      General: [],
+      Layout: [],
+      Navigation: [],
+      'Data Entry': [],
+      'Data Display': [],
+      Feedback: [],
+      Other: [],
+    }
+    for (const [title, d] of Object.entries(AllDemo)) {
+      const type = d.type || 'Other'
+      const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
+      titleMap[key] = title
+      menuConfig[type] = menuConfig[type] || []
+      menuConfig[type].push(d)
+    }
+    const Demo = AllDemo[titleMap[name]]
+    const MenuGroup = []
+    for (const [type, menus] of Object.entries(menuConfig)) {
+      const MenuItems = []
+      _.sortBy(menus, ['title']).forEach(({ title, subtitle }) => {
+        const linkValue = lang === 'cn'
+          ? [<span>{title}</span>, <span class='chinese'>{subtitle}</span>]
+          : [<span>{title}</span>]
+        let key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
+        if (lang === 'cn') {
+          key = `${key}-cn`
+        }
+        MenuItems.push(<a-menu-item key={key}>
+          <router-link to={{ path: `/ant-design/components/${key}` }}>{linkValue}</router-link>
+        </a-menu-item>)
+      })
+      MenuGroup.push(<a-menu-item-group title={type}>{MenuItems}</a-menu-item-group>)
+    }
+    let locale = zhCN
+    if (lang !== 'cn') {
+      locale = enUS
+    }
+    return (
+      <div class='page-wrapper'>
+        <Header num={Object.keys(AllDemo).length}/>
+        <a-locale-provider locale={locale}>
+          <div class='main-wrapper'>
+            <a-row>
+              <a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
+                <a-menu
+                  class='aside-container menu-site'
+                  selectedKeys={[name]}
+                  defaultOpenKeys={['Components']}
+                  inlineIndent={40}
+                  mode='inline'>
+                  <a-sub-menu title='Components' key='Components'>
+                    {MenuGroup}
+                  </a-sub-menu>
+                </a-menu>
+              </a-col>
+              <a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
+                <div class='content main-container'>
+                  {Demo ? <Demo key={lang}/> : '正在紧急开发中...'}
+                </div>
+              </a-col>
+            </a-row>
+          </div>
+        </a-locale-provider>
+      </div>
+    )
+  },
+}
+</script>