rc-web@69
|
1 Static
|
rc-web@69
|
2 ======
|
rc-web@69
|
3
|
rc-web@69
|
4 Markdown and Handlebars static site generator. Transforms files with `.hbs` and `.md` with Handlebars and Markdown respectively.
|
rc-web@69
|
5
|
rc-web@69
|
6 npm install static
|
rc-web@69
|
7
|
rc-web@69
|
8 ## Command line interface
|
rc-web@69
|
9
|
rc-web@69
|
10 static source.hbs.html target.html
|
rc-web@69
|
11
|
rc-web@69
|
12 ## JavaScript interface
|
rc-web@69
|
13
|
rc-web@69
|
14 var static = require('./static');
|
rc-web@69
|
15 static.transform('source.hbs.html', function(buffer) {
|
rc-web@69
|
16 fs.writeFile('target.html', buffer.toString());
|
rc-web@69
|
17 });
|
rc-web@69
|
18
|
rc-web@69
|
19 ## Grunt Interface
|
rc-web@69
|
20
|
rc-web@69
|
21 In your `Gruntfile.js`:
|
rc-web@69
|
22
|
rc-web@69
|
23 grunt.loadNpmTasks('static');
|
rc-web@69
|
24
|
rc-web@69
|
25 Then in your config, define "static" as a multi task:
|
rc-web@69
|
26
|
rc-web@69
|
27 grunt.initConfig({
|
rc-web@69
|
28 static: {
|
rc-web@69
|
29 mySite: {
|
rc-web@69
|
30 // this file will be included before the
|
rc-web@69
|
31 // build is run
|
rc-web@69
|
32 require: ['helpers.js'],
|
rc-web@69
|
33 build: {
|
rc-web@69
|
34 // will treat source as a handlebars
|
rc-web@69
|
35 // template and save at target
|
rc-web@69
|
36 'target.html': 'source.hbs.html',
|
rc-web@69
|
37 // process multiple files into a single file
|
rc-web@69
|
38 'api.html': [
|
rc-web@69
|
39 'header.hbs.html',
|
rc-web@69
|
40 'README.md',
|
rc-web@69
|
41 'footer.html'
|
rc-web@69
|
42 ],
|
rc-web@69
|
43 // specify a specific context for the
|
rc-web@69
|
44 // handlebars template to be run with
|
rc-web@69
|
45 'target2.html': {
|
rc-web@69
|
46 file: 'source.hbs.html',
|
rc-web@69
|
47 context: {
|
rc-web@69
|
48 key: 'value'
|
rc-web@69
|
49 }
|
rc-web@69
|
50 }
|
rc-web@69
|
51 }
|
rc-web@69
|
52 }
|
rc-web@69
|
53 }
|
rc-web@69
|
54 });
|
rc-web@69
|
55
|
rc-web@69
|
56 In this case, one could invoke: `grunt static:mySite` to run the build.
|
rc-web@69
|
57
|
rc-web@69
|
58 `require` accepts an array of files to require before static runs, each file must export a function that will recieve a `static` object:
|
rc-web@69
|
59
|
rc-web@69
|
60 module.exports = function(static) {
|
rc-web@69
|
61
|
rc-web@69
|
62 };
|
rc-web@69
|
63
|
rc-web@69
|
64 `build` accepts a hash of target file: source file pairs to process. If an array of source files is specified each one will be processed individually and concatenated. If compiling with handlebars an object may be passed that should be in this format:
|
rc-web@69
|
65
|
rc-web@69
|
66 {
|
rc-web@69
|
67 file: 'source.hbs.html',
|
rc-web@69
|
68 context: {
|
rc-web@69
|
69 key: 'value'
|
rc-web@69
|
70 }
|
rc-web@69
|
71 }
|
rc-web@69
|
72
|
rc-web@69
|
73 In `source.hbs.html` `{{key}}` would be available.
|
rc-web@69
|
74
|
rc-web@69
|
75 ## Example
|
rc-web@69
|
76
|
rc-web@69
|
77 A handlebars file similar to this could be used to generate documentation from a README.md file:
|
rc-web@69
|
78
|
rc-web@69
|
79 <ul class="toc">
|
rc-web@69
|
80 {{#include "README.md" select="h3"}}
|
rc-web@69
|
81 <li><a href="#{{id}}">{{innerHTML}}</a></li>
|
rc-web@69
|
82 {{/include}}
|
rc-web@69
|
83 </ul>
|
rc-web@69
|
84 <div class="body">
|
rc-web@69
|
85 {{include "README.md"}}
|
rc-web@69
|
86 </div>
|
rc-web@69
|
87
|
rc-web@69
|
88 ## Handlebars API
|
rc-web@69
|
89
|
rc-web@69
|
90 ### include *{{include filename [select=selector]}}*
|
rc-web@69
|
91
|
rc-web@69
|
92 Include a file. If `select` is specified a block must be passed. The block will be called once for each selected node (with the context set to the node) from the file and the resulting HTML will be embedded.
|
rc-web@69
|
93
|
rc-web@69
|
94 ## JavaScript API
|
rc-web@69
|
95
|
rc-web@69
|
96 ### transform *static.transform(source, callback)*
|
rc-web@69
|
97
|
rc-web@69
|
98 Transforms a given file with Handlebars and Markdown if file extensions are present. Calls callback with a buffer containing the transformed file.
|
rc-web@69
|
99
|
rc-web@69
|
100 ### handlebars *static.handlebars*
|
rc-web@69
|
101
|
rc-web@69
|
102 A reference to the handlebars object static is using. Useful to register new helpers on.
|
rc-web@69
|
103
|
rc-web@69
|
104 ### registerAsyncHelper *static.handlebars.registerAsyncHelper(name, callback)*
|
rc-web@69
|
105
|
rc-web@69
|
106 Just like `Handlebars.registerHelper` but async. `callback` recieves arguments to the helper (if any) followed by an options object, followed by a callback. Call the callback with your generated output instad of returning.
|
rc-web@69
|
107
|
rc-web@69
|
108 static.handlebars.registerAsyncHelper('toc', function(options, callback) {
|
rc-web@69
|
109 static.transform('README.md', function(html) {
|
rc-web@69
|
110 static.$(html, function($) {
|
rc-web@69
|
111 var output = '<ul>';
|
rc-web@69
|
112 $('h3', function() {
|
rc-web@69
|
113 output += '<li>' + this.innerHTML + '</li>'
|
rc-web@69
|
114 });
|
rc-web@69
|
115 callback(output + '</ul>');
|
rc-web@69
|
116 });
|
rc-web@69
|
117 });
|
rc-web@69
|
118 });
|
rc-web@69
|
119
|
rc-web@69
|
120 ### $ *static.$(html, callback)*
|
rc-web@69
|
121
|
rc-web@69
|
122 Create a DOM window and jQuery object from the specified HTML. `callback` recieves a `$` cherrio instance. The `select` argument to `include` is implemented with this.
|
rc-web@69
|
123
|
rc-web@69
|
124
|
rc-web@69
|
125 static.$(html, function($) {
|
rc-web@69
|
126 $('a').each(...);
|
rc-web@69
|
127 });
|
rc-web@69
|
128
|
rc-web@69
|
129 ### modifyDocumentFragment *static.modifyDocumentFragment(html, callback, next)*
|
rc-web@69
|
130
|
rc-web@69
|
131 Similar to `$`, calls `callback` with a `$` cherrio instance. `$` can be modified within the callback. `next` will be called with the resulting HTML.
|
rc-web@69
|
132
|
rc-web@69
|
133 static.modifyDocumentFragment('<ul></ul>', function($) {
|
rc-web@69
|
134 $('ul').append('<li></li>');
|
rc-web@69
|
135 }, function(html) {
|
rc-web@69
|
136 // html === '<ul><li></li></ul>'
|
rc-web@69
|
137 });
|
rc-web@69
|
138
|
rc-web@69
|
139 ### onMarkdown *static.onMarkdown(callback)*
|
rc-web@69
|
140
|
rc-web@69
|
141 Called anytime after `transform` transforms a markdown document. `callback` is called with the generated HTML and a `next` function that must be called with the modified HTML. Pairs well with `modifyDocumentFragment`.
|
rc-web@69
|
142
|
rc-web@69
|
143 static.onMarkdown(function(html, next) {
|
rc-web@69
|
144 next(html);
|
rc-web@69
|
145 });
|
rc-web@69
|
146
|
rc-web@69
|
147 ### addTransform *static.addTransform(fileExtension, callback)*
|
rc-web@69
|
148
|
rc-web@69
|
149 Transform files passed to *transform* based on file extension. `callback` recieves:
|
rc-web@69
|
150 - `buffer` - the file buffer
|
rc-web@69
|
151 - `callback` - to be called with the transformed buffer
|
rc-web@69
|
152 - `context` - context if transform was invoked from a handlebars helper
|
rc-web@69
|
153 - `data` - private handlebars data, also contains `file` which is a reference to the current file
|
rc-web@69
|
154
|
rc-web@69
|
155 The `html` extension is a noop and is implemented as:
|
rc-web@69
|
156
|
rc-web@69
|
157 static.addTransform('html', function(buffer, next, context, data) {
|
rc-web@69
|
158 next(buffer);
|
rc-web@69
|
159 });
|
rc-web@69
|
160
|
rc-web@69
|
161 ### config *static.config*
|
rc-web@69
|
162
|
rc-web@69
|
163 Defaults to:
|
rc-web@69
|
164
|
rc-web@69
|
165 {
|
rc-web@69
|
166 addIdsToHeadings: true, //in markdown add ids to h[1-6] tags
|
rc-web@69
|
167 gfm: true, //github flavored markdown
|
rc-web@69
|
168 highlight: function(code, lang) {
|
rc-web@69
|
169 return require('highlight.js').highlight(lang || 'javascript', code).value;
|
rc-web@69
|
170 }
|
rc-web@69
|
171 }
|