Add introduction to readme, provide webserver, fix example

README.md

@@ -1,13 +1,39 @@
-# PPR.js
-
 [![Coverage Status](https://coveralls.io/repos/github/Houston-Inc/ppr.js/badge.svg?branch=master)](https://coveralls.io/github/Houston-Inc/ppr.js?branch=master)
 [![Build Status](https://travis-ci.org/Houston-Inc/ppr.js.svg?branch=master)](https://travis-ci.org/Houston-Inc/ppr.js)
 
+# Introduction
+
+PPR.js is a JavaScript library for hydrating a statically rendered HTML page. It is designed to be used with CMS generated pages with lots of variation and different components. PPR.js works well together with RequireJS to load only the functionality and dependencies of the components present on the page.
+
+PPR.js uses jQuery to search all elements on the page with the `data-component="exampleComponent"` attribute set. It then finds the JS code associated with the name `exampleComponent` and builds it.
+
+```html
+<div class="test" data-component="exampleComponent">
+  <button>Click me</button>
+</div>
+```
+
+```javascript
+import BasePrototype from 'ppr.component.baseprototype';
+
+export default class ExampleComponent extends BasePrototype {
+  build() {
+    this.node.find('button').click(() => {
+      alert('Hello world!');
+    });
+  }
+}
+```
+
 ## Installation
 
-### Install
+To use PPR.js in your project, first install it using NPM or yarn:
+
+    npm install ppr-js --save
+
+or
 
-    bower install ppr-js --save
+    yarn add ppr-js
 
 ## Building
 

example/globals/index.html

@@ -58,8 +58,8 @@ <h2>Reloadable component</h2>
         <button type="button" name="button" class="reload_all">Reload all components</button>
     </div>
 
-    <script src="../../bower_components/jquery/dist/jquery.min.js"></script>
-    <script src="../../bower_components/lodash/dist/lodash.min.js"></script>
+    <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="../../node_modules/lodash/lodash.min.js"></script>
     <script src="../../dist/ppr.js"></script>
 
     <script>

example/globals/test.html

@@ -1,3 +1,3 @@
 <div class="testing red" data-component="testComponent" data-component-href="test.html">
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  This content was reloaded! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </div>

gulpfile.babel.js

@@ -6,6 +6,7 @@ import eslint from 'gulp-eslint';
 import uglify from 'gulp-uglify';
 import watch from 'gulp-watch';
 import order from 'gulp-order';
+import webserver from 'gulp-webserver';
 import _ from 'lodash';
 
 const KarmaServer = karma.Server;
@@ -86,6 +87,17 @@ gulp.task('test:watch', (done) => {
   }, done).start();
 });
 
+gulp.task('serve', () => {
+  gulp.src('.')
+    .pipe(webserver({
+      host: 'localhost',
+      port: 8000,
+      livereload: true,
+      directoryListing: false,
+    }));
+});
+
+
 gulp.task('watch', () => {
   watch(['src/**/*.js'], () => gulp.start('build:dev'));
 });