├── example
    └── simple-site
    │   ├── src
    │       ├── content
    │       │   ├── pages
    │       │   │   ├── blog.md
    │       │   │   └── about.md
    │       │   └── posts
    │       │   │   └── first-post.md
    │       ├── index.md
    │       ├── styles
    │       │   └── main.scss
    │       └── scripts
    │       │   └── main.coffee
    │   ├── server.js
    │   ├── templates
    │       ├── Blog.jsx
    │       └── Layout.jsx
    │   ├── package.json
    │   ├── Readme.md
    │   └── index.js
├── package.json
├── Readme.md
└── index.js


/example/simple-site/src/content/pages/blog.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Blog
3 | template: blog.jsx
4 | ---
5 | 


--------------------------------------------------------------------------------
/example/simple-site/src/content/pages/about.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: About
3 | template: blog.jsx
4 | ---
5 | Tell the world something about yourself here!


--------------------------------------------------------------------------------
/example/simple-site/src/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Home
3 | template: blog.jsx
4 | ---
5 | Hi, this is my start page; neat ain't it? ;)
6 | 
7 | ###Some info!
8 | 


--------------------------------------------------------------------------------
/example/simple-site/src/content/posts/first-post.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "First Post"
3 | date: 2014-04-18
4 | foooo: barrrrrr
5 | cooo: doooooo
6 | template: blog.jsx
7 | ---
8 | This is an amazing blogpost!


--------------------------------------------------------------------------------
/example/simple-site/src/styles/main.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | $accent: #d85312;
 4 | 
 5 | $main-font: #0e0e0e;
 6 | 
 7 | body {
 8 |     color: $main-font;
 9 | }
10 | 
11 | a {
12 |     color: $accent;
13 | }
14 | 
15 | .main-wrapper {
16 |     width: 800px;
17 |     margin: 0 auto;
18 | }


--------------------------------------------------------------------------------
/example/simple-site/src/scripts/main.coffee:
--------------------------------------------------------------------------------
 1 | 
 2 | class App 
 3 |     constructor: (@name) ->
 4 |         console.log "#{name} was initialized"
 5 | 
 6 |     doStuff: ->
 7 |         console.log "Te Most Useful Method Ever!"
 8 | 
 9 | 
10 | 
11 | 
12 | a = new App 'Hello World App'
13 | 
14 | a.doStuff()


--------------------------------------------------------------------------------
/example/simple-site/server.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // node libs
 4 | var url = require('url');
 5 | var http = require('http');
 6 | var express = require('express');
 7 | 
 8 | var app = express();
 9 | 
10 | app.use(express.static('./build/'));
11 | 
12 | // start the HTTP server
13 | var httpServer = http.createServer(app);
14 | 
15 | //
16 | httpServer.listen( 3000, function (err) {
17 |     if (err) {
18 |         console.warn('Can\'t start server. Error: ', err, err.stack);
19 |         return;
20 |     }
21 |     console.log('server started port', 3000);
22 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "metalsmith-reactjs",
 3 |   "version": "1.0.0",
 4 |   "description": "Use reactjs as template engine for metalsmith",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/coodoo/metalsmith-reactjs.git"
12 |   },
13 |   "author": "Jeremy Lu <jeremy@pubulous.com>",
14 |   "license": "MIT",
15 |   "bugs": {
16 |     "url": "https://github.com/coodoo/metalsmith-reactjs/issues"
17 |   },
18 |   "homepage": "https://github.com/coodoo/metalsmith-reactjs",
19 |   "devDependencies": {},
20 |   "dependencies": {
21 |     "async": "^0.9.0",
22 |     "debug": "^2.1.2",
23 |     "extend": "^2.0.0",
24 |     "node-jsx": "^0.12.4",
25 |     "react": "^0.12.1"
26 |   },
27 |   "readme": "See github page"
28 | }
29 | 


--------------------------------------------------------------------------------
/example/simple-site/templates/Blog.jsx:
--------------------------------------------------------------------------------
 1 | /** @jsx React.DOM */
 2 | 
 3 | var React = require('react');
 4 | var Layout = require('./Layout.jsx');
 5 | 
 6 | // This is just a simple example of a component that can be rendered on both
 7 | // the server and browser
 8 | 
 9 | module.exports = React.createClass({
10 | 
11 |   // We initialise its state by using the `props` that were passed in when it
12 |   // was first rendered
13 |   getInitialState: function() {
14 | 
15 |     // jx: 注意這裏接收了 this.props 傳入的參數
16 |     // 就算在 server 上也可以傳進來喔
17 |     return {items: this.props.pages}
18 |   },
19 | 
20 |   //
21 |   handleClick: function() {
22 |     // this.setState({items: this.state.items.concat(this.state.items.length)})
23 |   },
24 | 
25 |   // 
26 |   render: function() {
27 | 
28 |     return (
29 |         <Layout title={this.props.title}>
30 | 
31 |           <h1>Blog contents</h1>
32 |           <h2>
33 |             {this.state.items.map( function(item) {
34 |                 return <span key={item.path} >{item.title}<br/></span>
35 |               }
36 |             )}
37 |           </h2>
38 |         
39 |         </Layout>
40 |     )
41 |   }
42 | 
43 | })
44 | 


--------------------------------------------------------------------------------
/example/simple-site/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "metalsmith-reactjs",
 3 |   "version": "0.0.1",
 4 |   "description": "ff",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/coodoo/metalsmith-reactjs.git"
12 |   },
13 |   "author": "Robin Thrift <thrift.d.robin@googlemail.com>",
14 |   "license": "MIT",
15 |   "bugs": {
16 |     "url": "https://github.com/coodoo/metalsmith-reactjs/issues"
17 |   },
18 |   "homepage": "https://github.com/coodoo/metalsmith-reactjs",
19 |   "devDependencies": {
20 |     "metalsmith": "^1.0.0",
21 |     "metalsmith-markdown": "^0.2.1",
22 |     "metalsmith-collections": "^0.4.0",
23 |     "metalsmith-permalinks": "^0.3.0",
24 |     "metalsmith-coffee": "^0.0.1",
25 |     "metalsmith-sass": "^0.1.1"
26 |   },
27 |   "dependencies": {
28 |     "async": "^0.9.0",
29 |     "express": "^4.10.4",
30 |     "extend": "^2.0.0",
31 |     "metalsmith-coffee": "0.0.2",
32 |     "metalsmith-sass": "^0.5.0",
33 |     "node-jsx": "^0.12.4",
34 |     "react": "^0.12.1"
35 |   },
36 |   "readme": "rrrr"
37 | }
38 | 


--------------------------------------------------------------------------------
/example/simple-site/Readme.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # metalsmith-reactjs example
 3 |   
 4 |   This example demonstrates how to use react.js as the template engine to compose each page.
 5 |   
 6 | 
 7 | ## Installation
 8 | 
 9 |     $ npm install
10 | 
11 | ## Run
12 | 
13 | ```
14 | $ node server
15 | ```
16 | 
17 | then visit `http://localhost:3000`
18 | 
19 | ## Usage
20 | 
21 | ### Layout.jsx
22 | 
23 | This is the base view component, all top level pages should start with this component. You could change each page's meta tag like `title`, `description` in this component, or better yet, make them metatags in markdown file and bind to each field at build time.
24 | 
25 | ### Blog.jsx
26 | 
27 | This is a top level page, it's contents should all be wrapped in the `<Layout>` component, which looks like this:
28 | 
29 |   ``````javascript
30 |   
31 |       render: function() {
32 | 
33 |         return (
34 |             <Layout title={this.props.title}>
35 | 
36 |               <h1>Blog contents</h1>
37 |               <h2>
38 |                 {this.state.items.map( function(item) {
39 |                     return <span key={item.path} >{item.title}<br/></span>
40 |                   }
41 |                 )}
42 |               </h2>
43 |             
44 |             </Layout>
45 |         )
46 |       }
47 | 
48 |   
49 |   ```
50 | 
51 |   Since this is a standard reactjs comonent, you enjoy the **ultimate** freedom of assembling the page with sub-components (in a sense of `partials` in traditional templating system like `Handlebars`) however you like.
52 | 
53 | ## License
54 | 
55 |   MIT


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # metalsmith-reactjs
 3 | 
 4 |   A **[metalsmith](https://github.com/segmentio/metalsmith)** plugin to render files using [React.js](http://facebook.github.io/react/) as the template engine, hence allowing you to use familiar `jsx` syntax to compose pages in a component manner instead of partials.
 5 | 
 6 |   In short, it's a replacement for traditional templating system like `Handlebars` or `Jade`.
 7 | 
 8 | 
 9 | ## Installation
10 | 
11 |     $ npm install metalsmith-reactjs
12 | 
13 | ## Javascript Usage
14 | 
15 |   For the simplest use case, just pass your templating engine:
16 | 
17 | ```js
18 | var template = require('metalsmith-reactjs');
19 | 
20 | metalsmith.use(template());
21 | ```
22 | 
23 |   To specify additional options:
24 | 
25 | ```js
26 | metalsmith.use(template({
27 |     staticPage: true, 
28 |     templateDir: __dirname + '/templates/' 
29 | }));
30 | ```
31 | 
32 | ### staticPage
33 | When true, will use `React.renderToStaticMarkup()` to generate content string, which contains no `data-react-id` hence it's pure static content without any react component functionality.
34 | 
35 | When set to false, will use `React.renderToString()` to generate content string, each generated element will come with `data-react-id` attribute so you can control it just like any react component.
36 | 
37 | ### templateDir
38 | Assign path to template folder, default is `./templates`.
39 | 
40 | 
41 | ## CLI Usage
42 | 
43 |   Install the node modules and then add the `metalsmith-reactjs` key to your `metalsmith.json` plugins. If you want to specify additional options, pass an object:
44 | 
45 | ```json
46 | {
47 |   "plugins": {
48 |     "metalsmith-reactjs": {
49 |       "staticPage": true,
50 |       "templateDir": "./templates/"
51 |     }
52 |   }
53 | }
54 | ```
55 | 
56 | ## Example
57 | 
58 | See `example/`.
59 | 
60 | ## License
61 | 
62 |   MIT


--------------------------------------------------------------------------------
/example/simple-site/templates/Layout.jsx:
--------------------------------------------------------------------------------
 1 | /** @jsx React.DOM */
 2 | 
 3 | var React = require('react');
 4 | 
 5 | // This is just a simple example of a component that can be rendered on both
 6 | // the server and browser
 7 | 
 8 | module.exports = React.createClass({
 9 | 
10 |   // We initialise its state by using the `props` that were passed in when it
11 |   // was first rendered
12 |   getInitialState: function() {
13 | 
14 |     // jx: 注意這裏接收了 this.props 傳入的參數
15 |     // 就算在 server 上也可以傳進來喔
16 |     return {items: this.props.pages}
17 |   },
18 | 
19 |   // Then we just update the state whenever its clicked - but you could imagine
20 |   // this being updated with the results of AJAX calls, etc
21 |   handleClick: function() {
22 |     this.setState({items: this.state.items.concat(this.state.items.length)})
23 |   },
24 | 
25 |   // 這是最外層基底元件，放 <html>, <head>, <body> 等元素
26 |   render: function() {
27 | 
28 |     return (
29 |           <html>
30 |             
31 |             <head>
32 |               <meta charSet="utf-8"/>
33 |               <meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
34 |               <meta name="viewport" content="width=device-width"/>
35 | 
36 |               <meta property="og:title" content={this.props.title}/>
37 | 
38 |               <title>{this.props.title}</title>
39 |               
40 |               <link rel="stylesheet" href="/stylesheets/style.css" />
41 |               
42 |               {/*<script dangerouslySetInnerHTML={{__html:'\
43 |                               // This is making use of ES6 template strings, which allow for \
44 |                               // multiline strings. We specified "{jsx: {harmony: true}}" when \
45 |                               // creating the engine in app.js to get this feature. \
46 |                               console.log("hello world"); \
47 |                             '}}/>*/}
48 |             </head>
49 | 
50 |             <body>
51 |               {this.props.children}
52 |             </body>
53 |           </html>
54 |         );
55 | 
56 |   }
57 | 
58 | })
59 | 


--------------------------------------------------------------------------------
/example/simple-site/index.js:
--------------------------------------------------------------------------------
 1 | var Metalsmith  = require('metalsmith');
 2 | var markdown    = require('metalsmith-markdown');
 3 | var collections = require('metalsmith-collections');
 4 | var permalinks  = require('metalsmith-permalinks');
 5 | var coffee      = require('metalsmith-coffee');
 6 | var sass        = require('metalsmith-sass');
 7 | var debug       = require('debug')('jx-app');
 8 | var template    = require('metalsmith-reactjs');
 9 | 
10 | // 重要：示範了如何自定義一個 plugin
11 | // 這個 plugin 功能就是單純檢查每個 post md 內的 yaml 是否有標上 template: blog.hbt 字段
12 | var findTemplate = function(config) {
13 |     
14 |     // 依 config 的內容建立 regex 條件
15 |     var pattern = new RegExp(config.pattern);
16 | 
17 |     // 傳入
18 |     // 一堆 files
19 |     // metalsmith ref
20 |     // done callback
21 |     return function(files, metalsmith, done) {
22 |         
23 |         console.log( 'files', files );
24 | 
25 |         for (var file in files) {
26 |             if (pattern.test(file)) {
27 |                 var _f = files[file];
28 | 
29 |                 if (!_f.template) {
30 |                     // 如果該篇 post.md 內的 yaml 沒標示 template，就加上去
31 |                     _f.template = config.templateName;
32 |                 }
33 |             }
34 |         }
35 |         done();
36 |     };
37 | };
38 | 
39 | // 主程式
40 | Metalsmith(__dirname)
41 |     
42 |     // 內容分成兩類，pages 與 posts    
43 |     .use(collections({
44 |         pages: {
45 |             pattern: 'content/pages/*.md'
46 |         },
47 |         posts: {
48 |             pattern: 'content/posts/*.md',
49 |             sortBy: 'date',
50 |             reverse: true
51 |         }
52 |     }))
53 |     
54 |     // .use(findTemplate({
55 |     //     pattern: 'posts',   // 這是讀 collections 的內容
56 |     //     templateName: 'post.hbt'  // 然後指定用 post.hbt 模板
57 |     // }))
58 | 
59 |     // 內容轉 markdown
60 |     .use(markdown())
61 |     
62 |     // 將 first-post.html 轉換成 first-post/index.html
63 |     // 目地是在仿 REST end point 的命名方式，因此訪問時是寫
64 |     // localhost/posts/first-post/ → 它就直接抓下面的 index.html 來顯示
65 |     .use(permalinks({
66 |         pattern: ':collection/:title'
67 |     }))
68 | 
69 |     // 啟動 template engine
70 |     // staticPage = true 的話，會用 renderToStaticMockup() 來生成，即不會帶 data-react-id
71 |     .use( template({
72 |         staticPage: true, 
73 |         templateDir: __dirname + '/templates/' 
74 |     }))
75 | 
76 |     // 處理 sass
77 |     .use(sass({
78 |         outputStyle: 'compressed'
79 |     }))
80 | 
81 |     // 處理 coffee
82 |     .use(coffee())
83 | 
84 |     // 指定輸出目錄
85 |     .destination('./build')
86 |     
87 |     // 開始建每一頁
88 |     // 並且加上 err callback
89 |     .build(function(err, files) {
90 |         if (err) { throw err; }
91 |     });
92 | 
93 | 
94 | 
95 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | var debug = require('debug')('metalsmith-reactjs');
  2 | var each = require('async').each;
  3 | var extend = require('extend');
  4 | var React = require('react');
  5 | require('node-jsx').install();
  6 | 
  7 | module.exports = plugin;
  8 | 
  9 | // 我寫的 jsx template 功能
 10 | // 取代了原本 metalsmith-templates 的指令
 11 | function plugin( opts ){
 12 | 
 13 |     // 這是 plugin 接口，接收外界傳入的多個參數
 14 |     opts = opts || {};
 15 |     
 16 |     // 預設為 static，也就是不生成 data-react-id 資料
 17 |     // 但如果想操作 react component 的話，就要設為 false
 18 |     var staticPage = opts.staticPage || true;
 19 | 
 20 |     // if( staticPage==undefined ) staticPage = true;
 21 |     
 22 |     // 用 metalsmith.path() 才能保持正確的 working directory，不然會鎖在當前 module 工作目錄下
 23 |     var templateDir = opts.templateDir || metalsmith.path('./templates/');
 24 | 
 25 |     // 內部一律返還一個 function 供外界操作
 26 |     return function template( files, metalsmith, done ){
 27 |         
 28 |         var metadata = metalsmith.metadata();
 29 | 
 30 |         // 檢查每份 md 是否有指定 template 名稱
 31 |         function check(file){
 32 |             var data = files[file];
 33 |             // 傳入的 file data 身上如果沒帶 template 屬性，
 34 |             // 代表不是從 md 而來，就不繼續處理了
 35 |             var tmpl = data.template;
 36 |             if(!tmpl){
 37 |                 return false;
 38 |             }
 39 |             return true;
 40 |         }
 41 | 
 42 |         var arr = Object.keys(files);
 43 |         
 44 |         // 處理 file.contents 
 45 |         arr.forEach(function(file){
 46 |           
 47 |             if (!check(file)) return;
 48 |             debug('stringifying file: %s', file);
 49 | 
 50 |             var data = files[file];
 51 |             data.contents = data.contents.toString();
 52 | 
 53 |         });
 54 | 
 55 |         //
 56 |         each( arr, convert, done);
 57 | 
 58 |         // 真正將資料灌入模版以生成頁面的地方
 59 |         function convert(file, done){
 60 |           
 61 |           //
 62 |           if (!check(file)) return done();
 63 |           
 64 |           debug('converting file: %s', file);
 65 |           
 66 |           var data = files[file];
 67 |           var dataPack = extend({}, metadata, data);
 68 | 
 69 |           // 取得要用的模版名稱
 70 |           var templateName = data.template;
 71 |           
 72 | 
 73 |           // 操作早先自定義好的 render() function
 74 |           render( templateDir, templateName, dataPack, staticPage, function(err, str){
 75 |             
 76 |             if (err) return done(err);
 77 | 
 78 |             // 將套好模版後的字串塞回 data.contents 屬性裏，type 為 Buffer
 79 |             // 注意下面的 str 是上面 callback 裏第二個參數，也就是轉換後的結果字串
 80 |             data.contents = new Buffer(str);
 81 |             
 82 |             debug('\n\nconverted file: %s', file);
 83 |             
 84 |             done();
 85 |           });
 86 |         }
 87 |     }
 88 | 
 89 | }
 90 | 
 91 | // 真正操作 jsx 元件並餵入資料的地方
 92 | function render( templateDir, templateName, dataPack, isStatic, cb ){
 93 | 
 94 | 
 95 |     // console.log('\nrender: ', templateName/*, '\n>DataPack: ', dataPack*/ );
 96 | 
 97 |     // 取得指定的模板(jsx檔案)
 98 |     var TempComp = React.createFactory( require( templateDir + templateName ) );
 99 | 
100 |     // 餵資料到元件模板內讓它繪出
101 |     var temp = new TempComp( dataPack );
102 | 
103 |     var str;
104 | 
105 |     // 將 react 元件轉成 str
106 |     if( isStatic ){
107 |         str = React.renderToStaticMarkup( temp );
108 |     }else{
109 |         str = React.renderToString( temp );
110 |     }
111 | 
112 |     cb( null, str );
113 | }
114 | 


--------------------------------------------------------------------------------