Package updates and typos

Author: validide

README.md

@@ -1,10 +1,25 @@
 # u-front-ends
-Micro Front Ends
+A simple framework for integrating multiple [micro frontends](https://martinfowler.com/articles/micro-frontends.html) as one.
 
 ## Status
 [![Coverage Status](https://coveralls.io/repos/github/validide/u-front-ends/badge.svg?branch=master)](https://coveralls.io/github/validide/u-front-ends?branch=master)
 [![npm version](https://img.shields.io/npm/v/@validide/u-front-ends)](https://www.npmjs.com/package/@validide/u-front-ends)
 
-## Demo
+Not sure how production ready this project is so any feedback is appreciated.
 
-[Demo site](https://validide.github.io/u-front-ends/demo)
+## Motivation
+As a developer, if you have worked on the same suite of products for multiple years, you should have realized that no company will stop adding new features to the suite in order to do a complete overhaul of the technology stack. Chances are you will get the change to try new frameworks on new features/products but you will need to find a way to integrate these in the suite.
+
+This project tries to capture some of the solutions I wish I had implemented along the years but did not have the time or knowledge.
+
+
+## Naming
+Naming stuff is one of the hardest things in programming so:
+* `u-front-ends` because `npm install µ-front-ends` would have been a pain to type.
+* this is my take (I am sure someone might come with a better one) on a client side implementation therefore the packages are prefixed with my name
+
+
+## Documentation and demos
+
+* [Documentation](https://validide.github.io/u-front-ends/)
+* [Browser API tests](https://validide.github.io/u-front-ends/demo/browser-tests.html)

docs/demo/index.html renamed to docs/demo/browser-tests.html

@@ -20,7 +20,7 @@
 }
 
 
-.embeded-nav-bar iframe {
+.embedded-nav-bar iframe {
   box-sizing: content-box;
   width: 100%;
   height: 56px;

docs/demo/css/app.css

@@ -1,7 +1,7 @@
 (function (window, ufe, undefined) {
   'use strict';
 
-  var mfeEventHadler = function (evt) {
+  var mfeEventHandler = function (evt) {
     console.log(evt);
     switch (evt.type) {
       case 'beforeCreate':
@@ -37,16 +37,16 @@
   }
 
   var globalHandlers = new ufe.ComponentEventHandlers();
-  globalHandlers['beforeCreate'] = mfeEventHadler;
-  globalHandlers['created'] = mfeEventHadler;
-  globalHandlers['beforeMount'] = mfeEventHadler;
-  globalHandlers['mounted'] = mfeEventHadler;
-  globalHandlers['beforeUpdate'] = mfeEventHadler;
-  globalHandlers['updated'] = mfeEventHadler;
-  globalHandlers['beforeDestroy'] = mfeEventHadler;
-  globalHandlers['destroyed'] = mfeEventHadler;
-  globalHandlers['error'] = mfeEventHadler;
-  globalHandlers['data'] = mfeEventHadler;
+  globalHandlers['beforeCreate'] = mfeEventHandler;
+  globalHandlers['created'] = mfeEventHandler;
+  globalHandlers['beforeMount'] = mfeEventHandler;
+  globalHandlers['mounted'] = mfeEventHandler;
+  globalHandlers['beforeUpdate'] = mfeEventHandler;
+  globalHandlers['updated'] = mfeEventHandler;
+  globalHandlers['beforeDestroy'] = mfeEventHandler;
+  globalHandlers['destroyed'] = mfeEventHandler;
+  globalHandlers['error'] = mfeEventHandler;
+  globalHandlers['data'] = mfeEventHandler;
 
 
   var configuration = new ufe.RootComponentOptions();
@@ -152,11 +152,11 @@
   mainNavBarCustomEl.resources.push(mainNavBarCustomElScript);
 
   var mainNavBarIframe = new ufe.CrossWindowChildComponentOptions();
-  mainNavBarIframe.url ='./embeded-nav-bar.html'
+  mainNavBarIframe.url ='./embedded-nav-bar.html'
   mainNavBarIframe.handlers = Object.assign({}, globalHandlers, {
     'created': function (e) {
       e.el.parentElement.insertBefore(e.el, e.el.parentElement.firstChild);
-      e.el.parentElement.classList.add('embeded-nav-bar');
+      e.el.parentElement.classList.add('embedded-nav-bar');
 
       globalHandlers['created'](e);
     },
@@ -165,7 +165,7 @@
       globalHandlers['destroyed'](e);
     }
   });
-  mainNavBarIframe.embededAttributes = {
+  mainNavBarIframe.embeddedAttributes = {
     'allowtransparency': 'true',
     'frameborder': 0
   };
@@ -228,7 +228,17 @@
   }
 
   function bang() {
-    window.location = ufe.getUrlFullPath(document, './index.html') + '#/';
+    if (window.location.href.indexOf('#') !== -1) {
+      return;
+    }
+
+    var pathname = window.location.pathname;
+    if (pathname === '/') {
+      pathname = '/index.html';
+    }
+    var pathParts = pathname.split('/');
+
+    window.location = ufe.getUrlFullPath(document, './' + pathParts[pathParts.length - 1]) + '#_/';
   }
 
   function initDemoHandlers() {