Skip to content

Commit 173ff03

Browse files
docs(README): change style, update example
1 parent c794f31 commit 173ff03

1 file changed

Lines changed: 106 additions & 32 deletions

File tree

README.md

Lines changed: 106 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,131 @@
1-
# PostHTML-include
2-
[![npm version](https://badge.fury.io/js/posthtml-include.svg)](http://badge.fury.io/js/posthtml-include)
1+
[![NPM][npm]][npm-url]
2+
[![Deps][deps]][deps-url]
3+
[![Tests][travis]][travis-url]
4+
[![Coverage][cover]][cover-url]
35

4-
## Usage
6+
<div align="center">
7+
<img width="220" height="150" title="PostHTML" src="http://posthtml.github.io/posthtml/logo.svg">
8+
<h1>Include Plugin</h1>
9+
</div>
10+
11+
<h2 align="center">Install</h2>
12+
13+
```bash
14+
npm i -D posthtml-include
15+
```
16+
17+
<h2 align="center">Usage</h2>
18+
19+
```js
20+
const { readFileSync } = require('fs')
21+
22+
const posthtml = require('posthtml')
23+
const include = require('include')
24+
25+
const html = readFileSync('index.html')
26+
27+
posthtml([ include({ encoding: 'utf8' }) ])
28+
.process(html)
29+
.then((result) => console.log(result.html))
30+
```
31+
32+
### Options
33+
34+
__root__: Root folder path for include. Default `./`
35+
36+
__encoding__: Default `utf-8`
37+
38+
__addDependencyTo__: An object with addDependency() method, taking file path as an argument. Called whenever a file is included. Default `null`. You can use it for hot-reloading in webpack(posthtml-loader) like this:
39+
40+
```js
41+
posthtml: (webpack) => {
42+
return [
43+
require('posthtml-include')({ addDependencyTo: webpack })
44+
]
45+
}
46+
```
47+
48+
<h2 align="center">Usage</h2>
549

650
__index.html__
51+
752
```html
853
<html>
954
<head>
1055
<title>index.html</title>
1156
</head>
1257
<body>
13-
<include src="component/button/button.html"></include>
58+
<include src="components/button.html"></include>
1459
</body>
1560
</html>
1661
```
1762

18-
__component/button/button.html__
63+
__components/button.html__
1964
```html
2065
<button class="button"><div class="button__text">Button</div></button>
2166
```
2267

23-
```javascript
24-
var posthtml = require('posthtml'),
25-
html = require('fs').readFileSync('index.html').toString();
68+
```js
69+
const { readFileSync } = require('fs')
2670

27-
posthtml()
28-
.use(require('posthtml-include')({ encoding: 'utf-8' }))
71+
const posthtml = require('posthtml')
72+
const include = require('include')
73+
74+
const html = readFileSync('index.html')
75+
76+
posthtml([ include({ encoding: 'utf8' }) ])
2977
.process(html)
30-
.then(function(result) {
31-
console.log(result.html);
32-
//<html>
33-
//<head>
34-
// <title>index.html</title>
35-
//</head>
36-
//<body>
37-
// <button class="button"><div class="button__text">Text</div></button>
38-
//</body>
39-
//</html>
40-
})
78+
.then((result) => console.log(result.html))
4179
```
4280

43-
## Options
81+
```html
82+
<html>
83+
<head>
84+
<title>index.html</title>
85+
</head>
86+
<body>
87+
<button class="button">
88+
<div class="button__text">Text</div>
89+
</button>
90+
</body>
91+
</html>
92+
```
4493

45-
__root__: Root folder path for include. Default `./`
94+
<h2 align="center">LICENSE</h2>
4695

47-
__encoding__: Default `utf-8`
96+
> MIT License (MIT)
4897
49-
__addDependencyTo__: An object with addDependency() method, taking file path as an argument. Called whenever a file is included. Default `null`. You can use it for hot-reloading in webpack posthtml-loader like this:
98+
> Copyright (c) PostHTML Ivan Voischev
5099
51-
```javascript
52-
posthtml: function(webpack) {
53-
return [
54-
require('posthtml-include')({ addDependencyTo: webpack })
55-
]
56-
}
57-
```
100+
> Permission is hereby granted, free of charge, to any person obtaining a copy
101+
of this software and associated documentation files (the "Software"), to deal
102+
in the Software without restriction, including without limitation the rights
103+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
104+
copies of the Software, and to permit persons to whom the Software is
105+
furnished to do so, subject to the following conditions:
106+
107+
> The above copyright notice and this permission notice shall be included in all
108+
copies or substantial portions of the Software.
109+
110+
> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
111+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
112+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
113+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
114+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
115+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
116+
SOFTWARE.
117+
118+
[npm]: https://img.shields.io/npm/v/posthtml-include.svg
119+
[npm-url]: https://npmjs.com/package/posthtml-include
120+
121+
[deps]: https://david-dm.org/posthtml/posthtml-include.svg
122+
[deps-url]: https://david-dm.org/posthtml/posthtml-include
123+
124+
[style]: https://img.shields.io/badge/code%20style-standard-yellow.svg
125+
[style-url]: http://standardjs.com/
126+
127+
[travis]: http://img.shields.io/travis/posthtml/posthtml-include.svg
128+
[travis-url]: https://travis-ci.org/posthtml/posthtml-include
129+
130+
[cover]: https://coveralls.io/repos/github/posthtml/posthtml-include/badge.svg?branch=master
131+
[cover-url]: https://coveralls.io/github/posthtml/posthtml-include?branch=master

0 commit comments

Comments
 (0)