[Doc Enhancement] Introduce MarkdownElement #2224

mui · Nov 25, 2015 · f29aaf2 · f29aaf2
1 parent 3bf02a8
commit f29aaf2
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 5 deletions.
diff --git 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
@@ -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 (
+      <Paper style = {{marginBottom: '22px', padding: '0 24px 24px 24px'}}>
+        <div className="markdown-body">
+          <div dangerouslySetInnerHTML={{__html: html}} />
+        </div>
+      </Paper>);
+  },
+});
+
+module.exports = MarkdownElement;
diff --git a/docs/src/app/components/markdown/lists-markdown.md 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
@@ -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';
             </SelectableList>
           </MobileTearSheet>
         </CodeExample>
+        <MarkdownElement text={`# Headline
+          No more info`}/>
+        <MarkdownElement text={ListsMarkdown} />
 
         <Paper style={{padding: '24px', marginBottom: '32px'}}>
         <div>

diff --git 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
@@ -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: {