From f29aaf251d1e15de7a7729ed7389601e491b2f9e Mon Sep 17 00:00:00 2001 From: Frank Fischer Date: Fri, 20 Nov 2015 11:15:50 +0100 Subject: [PATCH] [Doc Enhancement] Introduce MarkdownElement #2224 --- docs/package.json | 3 ++ docs/src/app/components/markdown-element.jsx | 45 +++++++++++++++++++ .../app/components/markdown/lists-markdown.md | 31 +++++++++++++ .../app/components/pages/components/lists.jsx | 6 ++- docs/webpack-dev-server.config.js | 14 +++++- docs/webpack-production.config.js | 14 +++++- 6 files changed, 108 insertions(+), 5 deletions(-) create mode 100644 docs/src/app/components/markdown-element.jsx create mode 100644 docs/src/app/components/markdown/lists-markdown.md diff --git a/docs/package.json b/docs/package.json index 490f16c8c2c447..7b87e88ff0ada4 100644 --- a/docs/package.json +++ b/docs/package.json @@ -15,8 +15,11 @@ }, "dependencies": { "codemirror": "^5.5.0", + "github-markdown-css": "^2.1.0", + "hightlight.js": "^8.9.1", "history": "^1.11.1", "intl": "^1.0.1", + "marked": "^0.3.5", "react-addons-perf": "^0.14.0", "react-dom": "^0.14.0", "react-motion": "^0.3.1", diff --git a/docs/src/app/components/markdown-element.jsx b/docs/src/app/components/markdown-element.jsx new file mode 100644 index 00000000000000..c8bdbc7ae5bf5a --- /dev/null +++ b/docs/src/app/components/markdown-element.jsx @@ -0,0 +1,45 @@ +const React = require('react'); +let { Paper } = require('material-ui'); +require('github-markdown-css/github-markdown.css'); +import marked from 'marked'; + +const MarkdownElement = React.createClass({ + propTypes: { + text: React.PropTypes.string.isRequired, + }, + getDefaultProps() { + return { + text: '', + }; + }, + + + componentWillMount() { + marked.setOptions({ + gfm: true, + tables: true, + breaks: false, + pedantic: false, + sanitize: true, + smartLists: true, + smartypants: false, + highlight: function (code) { + return require('highlight.js').highlightAuto(code).value; + }, + }); + }, + + render() { + const { text } = this.props, + html = marked(text || ''); + + return ( + +
+
+
+ ); + }, +}); + +module.exports = MarkdownElement; diff --git a/docs/src/app/components/markdown/lists-markdown.md b/docs/src/app/components/markdown/lists-markdown.md new file mode 100644 index 00000000000000..4fca3d6d3ec1f7 --- /dev/null +++ b/docs/src/app/components/markdown/lists-markdown.md @@ -0,0 +1,31 @@ +# Headline 1 + +This is a paragraph describing something. + +## Subheadline + +Detailes description here. And some code: +```javascript +const FileFolder = require('svg-icons/file/folder'); +const MoreVertIcon = require('svg-icons/navigation/more-vert'); + +``` + + +```javascript +export default class Login extends React.Component { + + constructor() { + super() + this.state = { + user: '', + password: '' + }; + } +} +function fancyAlert(arg) { + if(arg) { + $.facebox({div:'#foo'}) + } +} +``` diff --git a/docs/src/app/components/pages/components/lists.jsx b/docs/src/app/components/pages/components/lists.jsx index 92a2d6df3052c6..94afdfa4fdcb8f 100644 --- a/docs/src/app/components/pages/components/lists.jsx +++ b/docs/src/app/components/pages/components/lists.jsx @@ -16,6 +16,7 @@ import FileFolder from 'svg-icons/file/folder'; import MoreVertIcon from 'svg-icons/navigation/more-vert'; import { SelectableContainerEnhance } from 'material-ui/hoc/selectable-enhance'; + const { Avatar, Checkbox, @@ -33,6 +34,7 @@ import MenuItem from 'menus/menu-item'; const { Colors } = Styles; import Code from 'lists-code'; +import ListsMarkdown from 'lists-markdown'; import CodeExample from '../../code-example/code-example'; import CodeBlock from '../../code-example/code-block'; let SelectableList = SelectableContainerEnhance(List); @@ -98,7 +100,6 @@ export default class ListsPage extends React.Component { } render() { - let componentInfo = [ { name: 'List Props', @@ -769,6 +770,9 @@ import ListItem from 'material-ui/lib/lists/list-item'; + +
diff --git a/docs/webpack-dev-server.config.js b/docs/webpack-dev-server.config.js index 82baf67d318ad4..354dac901f4ce3 100644 --- a/docs/webpack-dev-server.config.js +++ b/docs/webpack-dev-server.config.js @@ -15,7 +15,7 @@ var config = { //Webpack config options on how to obtain modules resolve: { //When requiring, you don't need to add these extensions - extensions: ["", ".js", ".jsx", ".txt"], + extensions: ["", ".js", ".jsx", ".md", ".txt"], alias: { //material-ui requires will be searched in src folder, not in node_modules 'material-ui': path.resolve(__dirname, '../src'), @@ -27,7 +27,8 @@ var config = { path.resolve(__dirname, "node_modules"), path.resolve(__dirname, '../src'), path.resolve(__dirname, '../node_modules'), - path.resolve(__dirname, 'src/app/components/raw-code') + path.resolve(__dirname, 'src/app/components/raw-code'), + path.resolve(__dirname, 'src/app/components/markdown') ] }, //Configuration for dev server @@ -78,12 +79,21 @@ var config = { loader: 'raw-loader', include: path.resolve(__dirname, 'src/app/components/raw-code') }, + { + test:/\.md$/, + loader: 'raw-loader', + include: path.resolve(__dirname, 'src/app/components/markdown') + }, { test: /\.js$/, //All .js and .jsx files loader:'babel-loader?optional=runtime&stage=0', //react-hot is like browser sync and babel loads jsx and es6-7 include: [__dirname, path.resolve(__dirname, '../src')], //include these files exclude: [nodeModulesPath] //exclude node_modules so that they are not all compiled }, + { + test: /\.css$/, + loader: "style-loader!css-loader" + }, ] }, eslint: { diff --git a/docs/webpack-production.config.js b/docs/webpack-production.config.js index e742dec2f3c6de..a800adc70e4ce6 100644 --- a/docs/webpack-production.config.js +++ b/docs/webpack-production.config.js @@ -13,7 +13,7 @@ var config = { //Webpack config options on how to obtain modules resolve: { //When requiring, you don't need to add these extensions - extensions: ["", ".js", ".jsx", ".txt"], + extensions: ["", ".js", ".jsx", ".md", ".txt"], alias: { //material-ui requires will be searched in src folder, not in node_modules 'material-ui': path.resolve(__dirname, '../src'), @@ -25,7 +25,8 @@ var config = { "node_modules", path.resolve(__dirname, '../src'), path.resolve(__dirname, '../node_modules'), - path.resolve(__dirname, 'src/app/components/raw-code') + path.resolve(__dirname, 'src/app/components/raw-code'), + path.resolve(__dirname, 'src/app/components/markdown') ] }, devtool: 'source-map', @@ -85,6 +86,15 @@ var config = { loader: 'raw-loader', include: path.resolve(__dirname, 'src/app/components/raw-code') }, + { + test:/\.md$/, + loader: 'raw-loader', + include: path.resolve(__dirname, 'src/app/components/markdown') + }, + { + test: /\.css$/, + loader: "style-loader!css-loader" + }, ] }, eslint: {