Merge pull request #17 from sundowndev/develop

[Fix #11] URL generator and bugfixes

README.md

@@ -1,25 +1,26 @@
 # router.js
 
 <p>
-  <a href="#"><img src="https://img.shields.io/github/tag/Sundowndev/router.js.svg" alt="Version"></a>
-  <a href="#"><img src="https://img.shields.io/badge/size-8.0kb-brightgreen.svg?style=flat" alt="Size"></a>
-  <a href="#"><img src="https://img.shields.io/badge/minified%20size-4.0kb-brightgreen.svg?style=flat" alt="Size minified"></a>
+  <a href="#"><img src="https://img.shields.io/github/tag/Sundowndev/router.js.svg?style=flat-square" alt="Version"></a>
+  <a href="#"><img src="https://img.shields.io/badge/size-8.0kb-brightgreen.svg?style=flat-square" alt="Size"></a>
+  <a href="#"><img src="https://img.shields.io/badge/minified%20size-4.0kb-brightgreen.svg?style=flat-square" alt="Size minified"></a>
 </p>
 
-Simple client sided router. You don't need node, you can use it in static html pages for documentation, personal website etc.
+Simple client sided Javascript routing library for static websites such as documentation or personal website. See it in action [here](https://crvx.fr/)
 
 ## Features
 
-- Static & dynamic route patterns
+- Static & dynamic routing
 - Custom 404 error handling
 - Before and after router middleware
-- Prefixing route paths
+- Prefixed route paths
+- Route redirection with URL generator
 
 ## Overview
 
 A simple route
 
-~~~ js
+~~~js
 var router = new router();
 
 router.add('default', '/', function () {
@@ -29,31 +30,31 @@ router.add('default', '/', function () {
 
 A simple route using parameter
 
-~~~ js
+~~~js
 router.add('single_category', '/category/:id', function (id) {
   console.log('You requested the category #' + id);
 });
 ~~~
 
 Set a callback when returning "route not found"
 
-~~~ js
+~~~js
 router.setErrorCallback(function () {
     throw new TypeError('I think there\'s a problem.');
 });
 ~~~
 
 Before route middleware
 
-~~~ js
+~~~js
 router.before('*', function () {
     /* do something each time the route change */
 });
 ~~~
 
 After router middleware
 
-~~~ js
+~~~js
 router.run(function () {
     /* do something after running the router */
 });
@@ -63,48 +64,37 @@ Mapping routes using a route prefix
 
 ~~~js
 // This will create two routes under /#/docs prefix
-router.map('page_', '/docs', [
+router.map('docs_', '/docs', [
     {
-        name: 'index',
+        name: 'intro',
         route: '/',
         callback: function () {
             content.innerHTML = '' +
-                '<h1>index page</h1>'
+                '<h1>Introduction</h1>'
             ;
         }
     },
     {
-        name: 'tutorial',
-        route: '/tutorial',
+        name: 'get_started',
+        route: '/get-started',
         callback: function () {
             content.innerHTML = '' +
-                '<h1>This is a tutorial!</h1>'
+                '<h1>Get started</h1>'
             ;
         }
     }
 ]);
 ~~~
 
-### Using npm
-
-```js
-var Router = require('@sundowndev/router.js');
-
-var router = Router();
-
-router.add('home', '/', function () {
-    console.log('hello world');
-});
-
-router.run();
-```
-
 ### API
 
 Fetch a route by name or path
 
-~~~ js
+~~~js
 router.fetchRoute('home'); // or router.fetchRoute('/');
+
+// with parameters
+router.fetchRoute('hello', {name: 'Sundown'});
 ~~~
 
 Get the current route
@@ -113,22 +103,22 @@ Get the current route
 router.route
 ~~~
 
-This will ouput :
+This will return :
 
 ~~~
 {
-    name: "home",
-    route: "/",
+    name: [string],
+    route: [string],
     callback: [function],
-    paramsEnabled: false,
-    params: []
+    paramsEnabled: [boolean],
+    params: [array]
 }
 ~~~
 
 Set and call the not found exception (with example)
 
 ~~~js
-var projects = [{title: 'routerjs', description: 'ayyy'}];
+var projects = [{title: 'routerjs', description: 'routing library'}];
 
 //overwrite the default not found exception
 router.setErrorCallback(function () {
@@ -152,17 +142,29 @@ router.add('projects', '/projects/:title', function (sProjectTitle) {
 $ npm i @sundowndev/router.js
 ~~~
 
+#### Usage
+
+```js
+var Router = require('@sundowndev/router.js');
+
+var router = Router();
+
+router.add('home', '/', function () {
+    document.write('hello world');
+});
+
+router.run();
+```
+
+
 ## Installation
 
-1. Include router.js at the end of the body
+1. Include router.js in **<head>** or at the end of the **<body>**
 
 ~~~html
 <script src="router.js"></script>
-~~~
-
-or via jsdelivr's CDN
 
-~~~html
+<!-- or via jsdelivr CDN (change the version) -->
 <script src="https://cdn.jsdelivr.net/gh/sundowndev/router.js@<VERSION>/dist/router.min.js"></script>
 ~~~
 
@@ -175,18 +177,17 @@ or via jsdelivr's CDN
 
 ~~~
 
-3. Create some routes and run the router
+3. Create some routes
 
 ~~~js
 router.add('home', '/', function () {
-    content.innerHTML = '' +
-        '<div>' +
-            '<h1>Welcome!</h1>' +
-            '<p>wow, such routing</p>' +
-        '</div>'
-    ;
+    document.write('Hello!');
 });
+~~~
 
+4. Run the router
+
+~~~js
 router.run();
 ~~~
 

demo/index.html

@@ -45,10 +45,9 @@ <h3 class="masthead-brand">Router.js</h3>
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <script>window.jQuery || document.write('<script src="https://getbootstrap.com/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
-<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
 
 <!-- Router library -->
-<script src="../dist/router.min.js"></script>
+<script src="../dist/router.js"></script>
 
 <script>
     var content = document.querySelector('#content');

demo/routes.js

@@ -4,7 +4,7 @@ var router = new router();
  * Routes calls
  */
 router.before('*', function () {
-    console.log('You were on ' + router.route.route + ' route');
+    console.log('You were on ' + router.route.name + ' route');
 });
 
 router.add('home', '/', function () {
@@ -14,7 +14,7 @@ router.add('home', '/', function () {
     ;
 });
 
-router.add('about', '/#/about', function () {
+router.add('about', '/#/about', function (about) {
     content.innerHTML = '' +
         '<h1>About me</h1>' +
         '<p>I\'m french</p>'
@@ -34,8 +34,9 @@ router.setErrorCallback(function () {
 });
 
 router.run(function () {
-    console.log('You are now on ' + router.route.route + ' route');
+    console.log('You are now on ' + router.route.name + ' route');
 
+    // toggle active classes on header menu
     let links = document.querySelectorAll('[data-router-link]');
 
     links.forEach(function (link) {