Skip to content

Commit 0c4f80b

Browse files
author
Philipp Alferov
committed
Inject compiled markdown into docs/index.html
1 parent ed7400e commit 0c4f80b

File tree

4 files changed

+107
-72
lines changed

4 files changed

+107
-72
lines changed

‎README.md‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
angular-file-saver
1+
Angular File Saver
22
=========
3+
34
Angular-file-saver is an AngularJS service that leverages
45
[FileSaver.js](https://github.com/eligrey/FileSaver.js/) and
56
[Blob.js](https://github.com/eligrey/Blob.js/) to implement the HTML5 W3C
@@ -11,15 +12,17 @@ saveAs() FileSaver interface in browsers that do not natively support it.
1112
- [Blob.js](https://github.com/eligrey/Blob.js/)
1213

1314
## Installation
14-
Using bower
15+
Using bower:
1516
```
1617
$ bower install angular-file-saver
1718
```
18-
Using npm
19+
Using npm:
1920
```
2021
$ npm install angular-file-saver
2122
```
2223

24+
`dist/angular-file-saver.bundle.js` contains all required dependencies and grants access to both `Blob.js` and `FileSaver.js` polyfills via `Blob` and `SaveAs` services (include `ngFileSaver` module as a dependency first).
25+
2326
## Basic usage
2427
- Include the `ngFileSaver` module to your project;
2528
- Pass `FileSaver` service as a dependency;
@@ -29,8 +32,9 @@ $ npm install angular-file-saver
2932
- `options` - a set of options for the [Blob constructor](https://developer.mozilla.org/en/docs/Web/API/Blob)(optional attribute);
3033

3134
## Example
35+
**JS**
3236
```
33-
function ExampleCtrl($scope, FileSaver) {
37+
function ExampleCtrl(FileSaver) {
3438
var vm = this;
3539
3640
vm.val = {
@@ -53,8 +57,22 @@ function ExampleCtrl($scope, FileSaver) {
5357
5458
angular
5559
.module('fileSaverExample', ['ngFileSaver'])
56-
.controller('ExampleCtrl', ['$scope', 'FileSaver', ExampleCtrl]);
60+
.controller('ExampleCtrl', [FileSaver', ExampleCtrl]);
5761
```
5862

63+
**HTML**
64+
```
65+
<div class="wrapper" ng-controller="ExampleCtrl as vm">
66+
<textarea
67+
ng-model="vm.val.text"
68+
ng-model-options="{ getterSetter: true }"
69+
name="textarea" rows="5" cols="20">
70+
Hey ho let's go!
71+
</textarea>
72+
<a href="" class="btn btn-dark btn-small" ng-click="vm.download(vm.val.text)">
73+
Download
74+
</a>
75+
</div>
76+
```
5977
## Demo
60-
[Demo on the github project page](http://alferov.github.io/angular-file-saver/#demo)
78+
[Demo on `gh-pages`](http://alferov.github.io/angular-file-saver/#demo)

‎docs/index.html‎

Lines changed: 53 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,10 @@
55
<meta charset="UTF-8">
66
<title>Angular File Saver - an AngularJS service that provides cross-browser compatibility of the HTML5 saveAs()</title>
77
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
98
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
10-
119
<link rel="stylesheet" type="text/css" href="dist/examples.css" media="screen">
1210
<script src="dist/examples.js"></script>
1311
</head>
14-
1512
<body ng-app="fileSaverExample">
1613

1714
<section class="page-header">
@@ -23,69 +20,52 @@ <h2 class="project-tagline">An AngularJS service that provides cross-browser com
2320
</section>
2421

2522
<section class="main-content">
26-
<h3>
27-
<a id="welcome-to-github-pages" class="anchor" href="#welcome-to-github-pages" aria-hidden="true">
28-
<span class="octicon octicon-link"></span>
29-
</a>
30-
Installation
31-
</h3>
32-
33-
<p>Using bower</p>
34-
<pre>$ bower install angular-file-saver</pre>
35-
36-
<p>Using npm</p>
37-
<pre>$ npm install angular-file-saver</pre>
3823

39-
<h3>Dependencies</h3>
40-
<ul>
41-
<li><a href="https://github.com/angular/angular.js">AngularJS</a></li>
42-
<li><a href="https://github.com/eligrey/FileSaver.js/">FileSaver.js</a></li>
43-
<li><a href="https://github.com/eligrey/Blob.js/">Blob.js</a></li>
44-
</ul>
45-
46-
<h3>Basic usage</h3>
47-
<ol>
48-
<li>
49-
Include the
50-
<code>ngFileSaver</code> module to yor project;
51-
</li>
52-
<li>
53-
Pass
54-
<code>FileSaver</code> service as a dependency;
55-
</li>
56-
<li>
57-
Invoke
58-
<code>FileSaver.saveAs()</code> and pass an object with the following set of options:
59-
<ul>
60-
<li>
61-
<code>data</code> - data represented as an array or a <a href="https://developer.mozilla.org/en/docs/Web/API/Blob">Blob object</a>;
62-
</li>
63-
<li>
64-
<code>filename</code>
65-
</li>
66-
<li>
67-
<code>options</code> - set of options for the <a href="https://developer.mozilla.org/en/docs/Web/API/Blob">Blob constructor</a> (optional attribute)
68-
</li>
69-
</ul>
70-
</li>
71-
</ol>
72-
73-
<p>Example:</p>
74-
<pre>
75-
function ExampleCtrl($scope, FileSaver) {
24+
<!-- inject:html -->
25+
<h1 id="angular-file-saver">Angular File Saver</h1>
26+
<p>Angular-file-saver is an AngularJS service that leverages
27+
<a href="https://github.com/eligrey/FileSaver.js/">FileSaver.js</a> and
28+
<a href="https://github.com/eligrey/Blob.js/">Blob.js</a> to implement the HTML5 W3C
29+
saveAs() FileSaver interface in browsers that do not natively support it.</p>
30+
<h2 id="dependencies">Dependencies</h2>
31+
<ul>
32+
<li><a href="https://github.com/angular/angular.js">AngularJS</a></li>
33+
<li><a href="https://github.com/eligrey/FileSaver.js/">FileSaver.js</a></li>
34+
<li><a href="https://github.com/eligrey/Blob.js/">Blob.js</a></li>
35+
</ul>
36+
<h2 id="installation">Installation</h2>
37+
<p>Using bower:</p>
38+
<pre><code>$ bower install angular-file-saver
39+
</code></pre><p>Using npm:</p>
40+
<pre><code>$ npm install angular-file-saver
41+
</code></pre><p><code>dist/angular-file-saver.bundle.js</code> contains all required dependencies and grants access to both <code>Blob.js</code> and <code>FileSaver.js</code> polyfills via <code>Blob</code> and <code>SaveAs</code> services (include <code>ngFileSaver</code> module as a dependency first).</p>
42+
<h2 id="basic-usage">Basic usage</h2>
43+
<ul>
44+
<li>Include the <code>ngFileSaver</code> module to your project;</li>
45+
<li>Pass <code>FileSaver</code> service as a dependency;</li>
46+
<li>Invoke <code>FileSaver.saveAs</code> and pass an object with the following set of options:<ul>
47+
<li><code>data</code> - data, represented as an array or a <a href="https://developer.mozilla.org/en/docs/Web/API/Blob">Blob object</a>;</li>
48+
<li><code>filename</code>;</li>
49+
<li><code>options</code> - a set of options for the <a href="https://developer.mozilla.org/en/docs/Web/API/Blob">Blob constructor</a>(optional attribute);</li>
50+
</ul>
51+
</li>
52+
</ul>
53+
<h2 id="example">Example</h2>
54+
<p><strong>JS</strong></p>
55+
<pre><code>function ExampleCtrl(FileSaver) {
7656
var vm = this;
7757

7858
vm.val = {
79-
text: 'Hey ho lets go!'
59+
text: &#39;Hey ho lets go!&#39;
8060
};
8161

8262
vm.download = function(text) {
8363

8464
var config = {
8565
data: [text],
86-
filename: 'textfile.txt',
66+
filename: &#39;textfile.txt&#39;,
8767
options: {
88-
type: 'text/plain;charset=utf-8'
68+
type: &#39;text/plain;charset=utf-8&#39;
8969
}
9070
};
9171

@@ -94,9 +74,24 @@ <h3>Basic usage</h3>
9474
}
9575

9676
angular
97-
.module('fileSaverExample', ['ngFileSaver'])
98-
.controller('ExampleCtrl', ['$scope', 'FileSaver', ExampleCtrl]);
99-
</pre>
77+
.module(&#39;fileSaverExample&#39;, [&#39;ngFileSaver&#39;])
78+
.controller(&#39;ExampleCtrl&#39;, [FileSaver&#39;, ExampleCtrl]);
79+
</code></pre><p><strong>HTML</strong></p>
80+
<pre><code>&lt;div class=&quot;wrapper&quot; ng-controller=&quot;ExampleCtrl as vm&quot;&gt;
81+
&lt;textarea
82+
ng-model=&quot;vm.val.text&quot;
83+
ng-model-options=&quot;{ getterSetter: true }&quot;
84+
name=&quot;textarea&quot; rows=&quot;5&quot; cols=&quot;20&quot;&gt;
85+
Hey ho let&#39;s go!
86+
&lt;/textarea&gt;
87+
&lt;a href=&quot;&quot; class=&quot;btn btn-dark btn-small&quot; ng-click=&quot;vm.download(vm.val.text)&quot;&gt;
88+
Download
89+
&lt;/a&gt;
90+
&lt;/div&gt;
91+
</code></pre><h2 id="demo">Demo</h2>
92+
<p><a href="http://alferov.github.io/angular-file-saver/#demo">Demo on <code>gh-pages</code></a></p>
93+
94+
<!-- endinject -->
10095

10196
<h3 id="demo">Demo</h3>
10297
<p>Download as a text file</p>
@@ -112,8 +107,6 @@ <h3 id="demo">Demo</h3>
112107
</footer>
113108

114109
</section>
115-
116-
117110
</body>
118111

119112
</html>

‎gulpfile.js‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,16 @@ var config = {
1515
scripts: './src/*.js'
1616
},
1717
docs: {
18-
src: './docs/src',
18+
root: './docs',
1919
index: './docs/index.html',
20+
src: './docs/src',
2021
styles: './docs/assets/stylesheets/**/*.css',
22+
markdown: './README.md',
2123
dest: './docs/dist'
2224
},
25+
dest: {
26+
docs: './docs/dist'
27+
},
2328
browserSync: {
2429
port: '3000',
2530
server: './docs'
@@ -51,12 +56,19 @@ var config = {
5156

5257
var browserifyDefaults = config.browserify.fileSaver;
5358

59+
/**
60+
* Helpers
61+
*/
5462
function handleErrors(err) {
5563
$.util.log(err.toString());
5664
this.emit('end');
5765
}
5866

59-
/*
67+
function fileContents(filePath, file) {
68+
return file.contents.toString();
69+
}
70+
71+
/**
6072
* Get arguments for release task from CLI
6173
*/
6274
function getUpdateType() {
@@ -77,7 +89,7 @@ function getPackageJsonVersion() {
7789
return JSON.parse(fs.readFileSync('./package.json', 'utf8')).version;
7890
}
7991

80-
/*
92+
/**
8193
* See http://blog.avisi.nl/2014/04/25/how-to-keep-a-fast-build-with-browserify-and-reactjs/
8294
*/
8395
function buildScript() {
@@ -128,7 +140,7 @@ gulp.task('styles:docs', function() {
128140
config.docs.styles
129141
])
130142
.pipe($.concat('examples.css'))
131-
.pipe(gulp.dest(config.docs.dest))
143+
.pipe(gulp.dest(config.dest.docs))
132144
.pipe($.if(browserSync.active, browserSync.stream()));
133145
});
134146

@@ -145,6 +157,16 @@ gulp.task('serve', function() {
145157
});
146158
});
147159

160+
gulp.task('markdown', function() {
161+
var markdown = gulp.src(config.docs.markdown).pipe($.markdown());
162+
163+
return gulp.src(config.docs.index)
164+
.pipe($.inject(markdown, {
165+
transform: fileContents
166+
}))
167+
.pipe(gulp.dest(config.docs.root));
168+
});
169+
148170
gulp.task('deploy:docs', function() {
149171
return gulp.src('./docs/**/*')
150172
.pipe($.ghPages());
@@ -179,7 +201,7 @@ gulp.task('dev:docs', function() {
179201
config.isProd = false;
180202
browserifyDefaults = config.browserify.docs;
181203

182-
sequence(['scripts', 'styles:docs'], 'watch:docs');
204+
sequence('markdown', ['scripts', 'styles:docs'], 'watch:docs');
183205
});
184206

185207
gulp.task('watch:docs', ['serve'], function() {
@@ -233,7 +255,7 @@ gulp.task('release:npm', ['release:bump', 'release:commit', 'release:push', 'rel
233255
spawn('npm', ['publish'], { stdio: 'inherit' }).on('close', done);
234256
});
235257

236-
/*
258+
/**
237259
* Automate npm & bower updates.
238260
* $ gulp release --type major - using gulp-bump versioning
239261
* $ gulp release --version 1.1.1 - using explicit version number

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,10 @@
3838
"gulp-gh-pages": "^0.5.2",
3939
"gulp-git": "^1.2.4",
4040
"gulp-if": "^1.2.5",
41+
"gulp-inject": "^1.5.0",
4142
"gulp-karma": "0.0.4",
4243
"gulp-load-plugins": "^0.10.0",
44+
"gulp-markdown": "^1.0.0",
4345
"gulp-plumber": "^1.0.1",
4446
"gulp-rename": "^1.2.2",
4547
"gulp-size": "^1.3.0",

0 commit comments

Comments
 (0)