Ember-cli-bubble
Ember-cli-bubble is an Ember addon that shares multiple features for our Face and Carlton application.
Table of contents
Installation
Ember Cli Bubble works in Ember 1.13.8+ or 2.0+, including beta and canary, with no deprecations whatsoever. Any deprecation will be considered a bug.
As any other ember-cli addon, run:
ember install ember-cli-bubble
Features overview
Ember Cli Bubble shares styles, components and configuration between our Face and Carlton application. By doing this, we will skip doing the same updates for each application.
Link-li
Link-li is a component that will create a link with tootlip and custom active style. We will use this functionality in our side-bar.
Loaders
Face and Carlton will have mutilple shared loaders. This addon will include Loader.css by default via bower.
Google Maps
Google's javascript library will be automatically referenced inside <head>. To use your API key, specify it in your application configuration in config/environment.js:
var ENV = {
// ...
googleMaps: {
apiKey: 'API-KEY-HERE',
clientId: 'CLIENT-ID-HERE'
},
// ...
};If for some reason you want to prevent this addon from adding the script tag (e.g another library already does it), just specify:
var ENV = {
// ...
googleMaps: {
include: false
},
// ...
};Typekit
Typekit's library will be automatically referenced inside <head>. To use your API key, specify it in your application configuration in config/environment.js:
var ENV = {
// ...
typekit: {
kitId: 'API-KEY-HERE',
},
// ...
};If for some reason you want to prevent this addon from adding the script tag (e.g another library already does it), just specify:
var ENV = {
// ...
typekit: {
include: false
},
// ...
};Content Security Policy
Google Maps uses many resources from Google's servers, so the URLs to them have to be white listed. You can set this by adding to the Content Security Policy defined in config/environment.js like so:
ENV.contentSecurityPolicy = {
'default-src': "'none'",
'script-src': "'self' 'unsafe-eval' use.typekit.net *.googleapis.com *.gstatic.com",
'font-src': "'self' use.typekit.net *.gstatic.com",
'img-src': "'self' p.typekit.net *.googleapis.com *.gstatic.com",
'style-src': "'self' 'unsafe-inline' use.typekit.net *.googleapis.com"
},Development
While you are developing and testing, you can run npm link from the root of your addon project. This will make your addon locally available by name.
Then run npm link ember-cli-bubble in any hosting application project root to make a link to your addon in your node_modules folder. Any change in your addon will now directly take effect in any project that links to it this way (see npm-tricks for more details.
Use npm and git to publish the addon like a normal npm package.