From 706b657cebca4f8b1dbdbbcaf85743d438c42bac Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 15 May 2015 16:00:08 +0800
Subject: [PATCH] code snipple

---
 components/button/demo.md       |  5 -----
 components/button/demo/basic.md |  9 +++++++++
 static/code.jsx                 | 28 +++++++++++++++++++++++++++-
 static/style.css                | 19 +++++++++++++++++++
 theme/templates/code.html       |  5 +++++
 theme/templates/layout.html     |  7 +++++--
 theme/theme.js                  |  3 +++
 7 files changed, 68 insertions(+), 8 deletions(-)
 delete mode 100644 components/button/demo.md
 create mode 100644 components/button/demo/basic.md
 create mode 100644 theme/templates/code.html

diff --git a/components/button/demo.md b/components/button/demo.md
deleted file mode 100644
index 7057df88e2..0000000000
--- a/components/button/demo.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# 基本型
-
----
-
-<button></button>
diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md
new file mode 100644
index 0000000000..8d1718392f
--- /dev/null
+++ b/components/button/demo/basic.md
@@ -0,0 +1,9 @@
+# 基本型
+
+- description: 你说什么我听不清。
+
+---
+
+````html
+<button>按钮</button>
+````
diff --git a/static/code.jsx b/static/code.jsx
index 737c583521..d2d92ad172 100644
--- a/static/code.jsx
+++ b/static/code.jsx
@@ -1,6 +1,32 @@
 /*jshint ignore:start */
 var CodeBox = React.createClass({
+  getInitialState: function() {
+    return {
+      html: ''
+    };
+  },
+  componentDidMount: function() {
+    var that = this;
+    $.get('/' + this.props.src).then(function(data) {
+      that.setState({
+        html: data
+      });
+    });
+  },
   render: function() {
-    return <pre><code>{this.props.code}</code></pre>;
+    var html = this.state.html;
+    return (
+      <div className="code-box" dangerouslySetInnerHTML={{__html: html}}></div>
+    );
+  }
+});
+
+var CodeBoxes = React.createClass({
+  render: function() {
+    return (
+      <div className="code-boxes">
+        {this.props.children}
+      </div>
+    );
   }
 });
diff --git a/static/style.css b/static/style.css
index 415f03842c..d1710b66f8 100644
--- a/static/style.css
+++ b/static/style.css
@@ -964,3 +964,22 @@ footer ul li > a {
   margin-left: 15px;
   font-weight: normal;
 }
+
+.code-boxes {
+  -webkit-column-count: 2;
+  -moz-column-count: 2;
+  column-count: 2;
+  -moz-column-gap: 15px;
+  -webkit-column-gap: 15px;
+  column-gap: 15px;
+}
+
+.code-box {
+  border: 1px solid #E9E9E9;
+  border-radius: 6px;
+  padding: 15px;
+}
+
+.code-box pre code {
+  border: none;
+}
diff --git a/theme/templates/code.html b/theme/templates/code.html
new file mode 100644
index 0000000000..b12c646fcc
--- /dev/null
+++ b/theme/templates/code.html
@@ -0,0 +1,5 @@
+<div class="code-box-container">
+  {{ post.html }}
+  <h4 class="code-box-title">{{ post.title }}</h4>
+  <p class="code-box-description">{{ post.meta.description }}</p>
+</div>
diff --git a/theme/templates/layout.html b/theme/templates/layout.html
index a2fe6ea3bf..9d3ab1c0c9 100644
--- a/theme/templates/layout.html
+++ b/theme/templates/layout.html
@@ -89,11 +89,14 @@
         {%- endif %}
       </h1>
       {{ post.html }}
-      <CodeBox code="code"></CodeBox>
+      <h2>组件演示</h2>
       <div id="code-boxes"></div>
       <script type="text/jsx">
         React.render(
-          <CodeBox code="123"></CodeBox>,
+          <CodeBoxes>
+            <CodeBox src="components/button/demo/basic.html"></CodeBox>
+            <CodeBox src="components/button/demo/basic.html"></CodeBox>
+          </CodeBoxes>,
           document.getElementById('code-boxes')
         );
       </script>
diff --git a/theme/theme.js b/theme/theme.js
index b1ddecb7fb..2e5d0a1eda 100644
--- a/theme/theme.js
+++ b/theme/theme.js
@@ -13,6 +13,9 @@ module.exports = function(nico) {
     if (filepath === 'readme.md') {
       post.filename = post.meta.filename = 'index';
     }
+    if (filepath.indexOf('/demo/') > 0) {
+      post.template = post.meta.template = 'code';
+    }
     return post;
   };