mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

site: support iframe

Browse Source
This commit is contained in:
Benjy Cui 2016-05-24 17:14:11 +08:00
parent 95222a51fa
commit a6e38f8479
6 changed files with 78 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/locale-provider/demo/all.md
View File

@ -9,7 +9,6 @@ title: 所有组件
import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar, import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar,
Popconfirm, Table, Modal, Button, Select, Transfer, Radio } from 'antd'; Popconfirm, Table, Modal, Button, Select, Transfer, Radio } from 'antd';
import enUS from 'antd/lib/locale-provider/en_US'; import enUS from 'antd/lib/locale-provider/en_US';
import ruRU from 'antd/lib/locale-provider/ru_RU';
const Option = Select.Option; const Option = Select.Option;
const RangePicker = DatePicker.RangePicker; const RangePicker = DatePicker.RangePicker;
@ -110,7 +109,6 @@ const App = React.createClass({
<span style={{ marginRight: 16 }}>Change locale of components: </span> <span style={{ marginRight: 16 }}>Change locale of components: </span>
<Radio.Group defaultValue={enUS} onChange={this.changeLocale}> <Radio.Group defaultValue={enUS} onChange={this.changeLocale}>
<Radio.Button key="en" value={enUS}>English</Radio.Button> <Radio.Button key="en" value={enUS}>English</Radio.Button>
<Radio.Button key="ru" value={ruRU}>русский язык</Radio.Button>
<Radio.Button key="cn">中文</Radio.Button> <Radio.Button key="cn">中文</Radio.Button>
</Radio.Group> </Radio.Group>
</div> </div>

38
site/bisheng-plugin-antd/lib/process-demo.js
View File

@ -1,4 +1,20 @@
const fs = require('fs');
const path = require('path');
const JsonML = require('jsonml.js/lib/utils'); const JsonML = require('jsonml.js/lib/utils');
const pkgPath = path.join(process.cwd(), 'package.json');
const pkgName = require(pkgPath).name;
const nunjucks = require('nunjucks');
nunjucks.configure({ autoescape: false });
const babel = require('babel-core');
const babelrc = {
presets: ['es2015', 'react'].map((m) => {
return require.resolve(`babel-preset-${m}`);
}),
};
const tmpl = fs.readFileSync(path.join(__dirname, 'template.html')).toString();
function isStyleTag(node) { function isStyleTag(node) {
return node && JsonML.getTagName(node) === 'style'; return node && JsonML.getTagName(node) === 'style';
@ -37,9 +53,16 @@ module.exports = (markdownData) => {
} }
markdownData.highlightedCode = contentChildren[codeIndex].slice(0, 2); markdownData.highlightedCode = contentChildren[codeIndex].slice(0, 2);
markdownData.preview = [ const preview = [
'pre', { lang: '__react' }, 'pre', { lang: '__react' },
].concat(JsonML.getChildren(contentChildren[codeIndex])); ];
const componentsPath = path.join(process.cwd(), 'components');
preview.push([
'code',
getCode(contentChildren[codeIndex])
.replace(`${pkgName}/lib`, componentsPath),
]);
markdownData.preview = preview;
const styleNode = contentChildren.find((node) => { const styleNode = contentChildren.find((node) => {
return isStyleTag(node) || return isStyleTag(node) ||
@ -52,5 +75,16 @@ module.exports = (markdownData) => {
markdownData.highlightedStyle = JsonML.getAttributes(styleNode).highlighted; markdownData.highlightedStyle = JsonML.getAttributes(styleNode).highlighted;
} }
if (meta.iframe) {
const html = nunjucks.renderString(tmpl, {
id: meta.id,
style: markdownData.style,
script: babel.transform(getCode(markdownData.preview), babelrc).code,
});
const fileName = `demo-${Math.random()}.html`;
fs.writeFile(path.join(process.cwd(), '_site', fileName), html);
markdownData.src = path.join('/', fileName);
}
return markdownData; return markdownData;
}; };

34
site/bisheng-plugin-antd/lib/template.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="../index.css" />
<style>
html, body {
height: 100%;
margin: 0;
background: none;
}
{{ style }}
</style>
</head>
<body>
<div id="{{ id }}" class="code-box-demo"></div>
<script>
function require(module) {
if (module === 'react-router') {
return window.ReactRouter;
}
return window.parent[module];
}
var React = require('react');
var ReactDOM = require('react-dom');
var mountNode = document.getElementById('{{ id }}');
</script>
<script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script>
<script>
{{ script }}
</script>
</body>
</html>

3
site/theme/template/Content/Demo.jsx
View File

@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import classNames from 'classnames'; import classNames from 'classnames';
const isLocal = location.port;
export default class Demo extends React.Component { export default class Demo extends React.Component {
static contextTypes = { static contextTypes = {
@ -61,7 +60,7 @@ export default class Demo extends React.Component {
<section className="code-box-demo"> <section className="code-box-demo">
{ {
meta.iframe ? meta.iframe ?
<iframe src={isLocal ? src : src.replace('./_site', '')} /> : <iframe src={src} /> :
preview(React, ReactDOM) preview(React, ReactDOM)
} }
{ {

2
site/theme/template/Layout/Footer.jsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Select, Modal } from 'antd'; import { Select, Modal } from 'antd';
import { version as antdVersion } from '../../../../package.json'; import { version as antdVersion } from 'antd/package.json';
import { docVersions } from '../../'; import { docVersions } from '../../';
const Option = Select.Option; const Option = Select.Option;

6
site/theme/template/Layout/index.jsx
View File

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom';
import { addLocaleData, IntlProvider } from 'react-intl'; import { addLocaleData, IntlProvider } from 'react-intl';
import Header from './Header'; import Header from './Header';
import Footer from './Footer'; import Footer from './Footer';
@ -6,6 +7,11 @@ import enLocale from '../../en-US.js';
import cnLocale from '../../zh-CN.js'; import cnLocale from '../../zh-CN.js';
import '../../static/style'; import '../../static/style';
// Expose to iframe
window.react = React;
window['react-dom'] = ReactDOM;
window.antd = require('antd');
const isZhCN = (typeof localStorage !== 'undefined' && localStorage.getItem('locale') !== 'en-US'); const isZhCN = (typeof localStorage !== 'undefined' && localStorage.getItem('locale') !== 'en-US');
// (typeof localStorage !== 'undefined' && localStorage.getItem('locale') === 'zh-CN') || // (typeof localStorage !== 'undefined' && localStorage.getItem('locale') === 'zh-CN') ||
// (navigator.language === 'zh-CN'); // (navigator.language === 'zh-CN');