From d83608dff461baa4b4638a7986fee4383e7f592d Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sat, 16 May 2015 15:03:33 +0800
Subject: [PATCH] read demo from demo folder

---
 components/select/demo/basic.md | 14 ++++++++++++++
 static/code.jsx                 |  6 +++++-
 static/style.css                |  2 +-
 theme/templates/layout.html     |  6 ++++--
 theme/theme.js                  | 11 +++++++++++
 5 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 components/select/demo/basic.md

diff --git a/components/select/demo/basic.md b/components/select/demo/basic.md
new file mode 100644
index 0000000000..498bb4497f
--- /dev/null
+++ b/components/select/demo/basic.md
@@ -0,0 +1,14 @@
+# 基本型
+
+- description: 你说什么我还是听不清。
+
+---
+
+````html
+<select>
+  <option>选项一</option>
+  <option>选项二</option>
+  <option>选项三</option>
+</select>
+````
+
diff --git a/static/code.jsx b/static/code.jsx
index 40c26bc582..35f963984d 100644
--- a/static/code.jsx
+++ b/static/code.jsx
@@ -6,6 +6,7 @@ var CodeBox = React.createClass({
     };
   },
   componentDidMount: function() {
+    this.props.src = this.props.src.replace(/\.md$/, '.html');
     $.get('/' + this.props.src).then(function(data) {
       var item = $(data);
       item.find('.highlight').appendTo(item);
@@ -23,7 +24,10 @@ var CodeBox = React.createClass({
   render: function() {
     var html = this.state.html;
     return (
-      <div className="code-box" onClick={this.handleClick} dangerouslySetInnerHTML={{__html: html}}></div>
+      <div className="code-box"
+        onClick={this.handleClick}
+        dangerouslySetInnerHTML={{__html: html}}>
+      </div>
     );
   }
 });
diff --git a/static/style.css b/static/style.css
index 5bd0220ed7..891f453ae9 100644
--- a/static/style.css
+++ b/static/style.css
@@ -379,7 +379,7 @@ footer ul li > a {
 
 .main-container {
   width: calc(100% - 240px);
-  padding: 30px 40px;
+  padding: 30px 40px 80px;
   -webkit-animation: xRightMatrix .5s ease-out .5s backwards;
   animation: xRightMatrix .5s ease-out .5s backwards;
 }
diff --git a/theme/templates/layout.html b/theme/templates/layout.html
index d3878c0786..b42f8bd5cf 100644
--- a/theme/templates/layout.html
+++ b/theme/templates/layout.html
@@ -97,8 +97,10 @@
       <script type="text/jsx">
         React.render(
           <CodeBoxes>
-            <CodeBox src="components/button/demo/basic.html"></CodeBox>
-            <CodeBox src="components/button/demo/basic.html"></CodeBox>
+            {%- set items = resource.pages|under(post.meta.directory) %}
+            {%- for item in items %}
+              <CodeBox src="{{item.meta.filepath}}"></CodeBox>
+            {%- endfor %}
           </CodeBoxes>,
           document.getElementById('code-boxes')
         );
diff --git a/theme/theme.js b/theme/theme.js
index 2e5d0a1eda..bf4e56442d 100644
--- a/theme/theme.js
+++ b/theme/theme.js
@@ -48,6 +48,17 @@ module.exports = function(nico) {
       }).filter(function(item) {
         return item;
       }));
+    },
+    under: function(pages, directory) {
+      var ret = [];
+      Object.keys(pages).forEach(function(key) {
+        var page = pages[key];
+        console.log(key, directory);
+        if (key.indexOf(directory + '/demo/') === 0) {
+          ret.push(page);
+        }
+      });
+      return ret;
     }
   };