feat(mobile): add blueprint for app manifest and icons

angular · May 12, 2016 · f717bde · f717bde
1 parent 320932c
commit f717bde
Show file tree

Hide file tree

Showing 36 changed files with 154 additions and 43 deletions.
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/android-chrome-144x144.png b/addon/ng2/blueprints/mobile/files/__path__/icons/android-chrome-144x144.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/android-chrome-192x192.png b/addon/ng2/blueprints/mobile/files/__path__/icons/android-chrome-192x192.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/android-chrome-36x36.png b/addon/ng2/blueprints/mobile/files/__path__/icons/android-chrome-36x36.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/android-chrome-48x48.png b/addon/ng2/blueprints/mobile/files/__path__/icons/android-chrome-48x48.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/android-chrome-72x72.png b/addon/ng2/blueprints/mobile/files/__path__/icons/android-chrome-72x72.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/android-chrome-96x96.png b/addon/ng2/blueprints/mobile/files/__path__/icons/android-chrome-96x96.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-114x114.png b/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-114x114.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-120x120.png b/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-120x120.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-144x144.png b/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-144x144.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-152x152.png b/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-152x152.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-180x180.png b/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-180x180.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-57x57.png b/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-57x57.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-60x60.png b/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-60x60.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-72x72.png b/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-72x72.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-76x76.png b/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-76x76.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-precomposed.png b/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon-precomposed.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon.png b/addon/ng2/blueprints/mobile/files/__path__/icons/apple-touch-icon.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/favicon-16x16.png b/addon/ng2/blueprints/mobile/files/__path__/icons/favicon-16x16.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/favicon-32x32.png b/addon/ng2/blueprints/mobile/files/__path__/icons/favicon-32x32.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/favicon-96x96.png b/addon/ng2/blueprints/mobile/files/__path__/icons/favicon-96x96.png
diff --git a/...g2/blueprints/ng2/files/__path__/icon.png → ...ints/mobile/files/__path__/icons/icon.png b/...g2/blueprints/ng2/files/__path__/icon.png → ...ints/mobile/files/__path__/icons/icon.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/mstile-144x144.png b/addon/ng2/blueprints/mobile/files/__path__/icons/mstile-144x144.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/mstile-150x150.png b/addon/ng2/blueprints/mobile/files/__path__/icons/mstile-150x150.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/mstile-310x150.png b/addon/ng2/blueprints/mobile/files/__path__/icons/mstile-310x150.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/mstile-310x310.png b/addon/ng2/blueprints/mobile/files/__path__/icons/mstile-310x310.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/mstile-70x70.png b/addon/ng2/blueprints/mobile/files/__path__/icons/mstile-70x70.png
diff --git a/addon/ng2/blueprints/mobile/files/__path__/icons/safari-pinned-tab.svg b/addon/ng2/blueprints/mobile/files/__path__/icons/safari-pinned-tab.svg
diff --git a/addon/ng2/blueprints/mobile/files/__path__/manifest.webapp b/addon/ng2/blueprints/mobile/files/__path__/manifest.webapp
@@ -0,0 +1,47 @@
+{
+  "name": "<%= fullAppName %>",
+  "short_name": "<%= fullAppName %>",
+  "icons": [
+    {
+			"src": "/android-chrome-36x36.png",
+			"sizes": "36x36",
+			"type": "image/png",
+			"density": 0.75
+		},
+		{
+			"src": "/android-chrome-48x48.png",
+			"sizes": "48x48",
+			"type": "image/png",
+			"density": 1
+		},
+		{
+			"src": "/android-chrome-72x72.png",
+			"sizes": "72x72",
+			"type": "image/png",
+			"density": 1.5
+		},
+		{
+			"src": "/android-chrome-96x96.png",
+			"sizes": "96x96",
+			"type": "image/png",
+			"density": 2
+		},
+		{
+			"src": "/android-chrome-144x144.png",
+			"sizes": "144x144",
+			"type": "image/png",
+			"density": 3
+		},
+		{
+			"src": "/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png",
+			"density": 4
+		}
+  ],
+  "theme_color": "#000000",
+  "background_color": "#e0e0e0",
+  "start_url": "/index.html",
+  "display": "standalone",
+  "orientation": "portrait"
+}
diff --git a/addon/ng2/blueprints/mobile/index.js b/addon/ng2/blueprints/mobile/index.js
@@ -0,0 +1,32 @@
+const stringUtils = require('ember-cli-string-utils');
+
+module.exports = {
+  description: '',
+
+  availableOptions: [
+    { name: 'source-dir', type: String, default: 'src', aliases: ['sd'] },
+    { name: 'prefix', type: String, default: 'app', aliases: ['p'] },
+    { name: 'mobile', type: Boolean, default: false }
+  ],
+
+  locals: function (options) {
+    const fullAppName = stringUtils.dasherize(options.entity.name)
+      .replace(/-(.)/g, (_, l) => ' ' + l.toUpperCase())
+      .replace(/^./, (l) => l.toUpperCase());
+
+    return {
+      jsComponentName: stringUtils.classify(options.entity.name),
+      fullAppName: fullAppName,
+      sourceDir: options.sourceDir
+    };
+  },
+
+  fileMapTokens: function (options) {
+    // Return custom template variables here.
+    return {
+      __path__: () => {
+        return options.locals.sourceDir;
+      }
+    };
+  }
+};
diff --git a/addon/ng2/blueprints/ng2/files/__path__/index.html b/addon/ng2/blueprints/ng2/files/__path__/index.html
@@ -8,9 +8,14 @@
   {{#unless environment.production}}
   <script src="/angular-cli-live-reload.js" type="text/javascript"></script>
   {{/unless}}
-  <link rel="icon" type="image/x-icon" href="favicon.ico"><% if (isMobile) { %>
-  <link rel="manifest" href="/manifest.webapp"><% } %>
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico"><% if (isMobile) { %>
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="theme-color" content="#000000">
+  <link rel="manifest" href="/manifest.webapp">
+  {{#each mobile.icons}}
+    <link rel="{{rel}}" {{#if sizes}}sizes="{{sizes}}" {{/if}}href="{{href}}">
+  {{/each}}
 
   <!-- Service worker support is disabled by default.
        Install the worker script and uncomment to enable.
@@ -23,6 +28,7 @@
     }
   </script>
   -->
+  <% } %>
 </head>
 <body>
   <<%= htmlComponentName %>-app>Loading...</<%= htmlComponentName %>-app>

diff --git a/addon/ng2/blueprints/ng2/files/__path__/manifest.webapp b/addon/ng2/blueprints/ng2/files/__path__/manifest.webapp
diff --git a/addon/ng2/blueprints/ng2/files/angular-cli.json b/addon/ng2/blueprints/ng2/files/angular-cli.json
@@ -4,7 +4,11 @@
     "name": "<%= htmlComponentName %>"
   },
   "apps": [
-    {"main": "<%= sourceDir %>/main.ts", "tsconfig": "<%= sourceDir %>/tsconfig.json"}
+    {
+      "main": "<%= sourceDir %>/main.ts",
+      "tsconfig": "<%= sourceDir %>/tsconfig.json",
+      "mobile": <%= isMobile %>
+    }
   ],
   "addons": [],
   "packages": [],

diff --git a/addon/ng2/blueprints/ng2/index.js b/addon/ng2/blueprints/ng2/index.js
@@ -4,13 +4,19 @@ const stringUtils = require('ember-cli-string-utils');
 
 module.exports = {
   description: '',
-  
+
   availableOptions: [
     { name: 'source-dir', type: String, default: 'src', aliases: ['sd'] },
     { name: 'prefix', type: String, default: 'app', aliases: ['p'] },
     { name: 'mobile', type: Boolean, default: false }
   ],
 
+  afterInstall: function (options) {
+    if (options.mobile) {
+      return Blueprint.load(path.join(__dirname, '../mobile')).install(options);
+    }
+  },
+
   locals: function(options) {
     //TODO: pull value from config
     this.styleExt = 'css';
@@ -35,19 +41,6 @@ module.exports = {
     };
   },
 
-  files: function() {
-    var fileList = Blueprint.prototype.files.call(this);
-
-    if (this.options && !this.options.mobile) {
-      fileList = fileList.filter(p => {
-        return p != path.join('__path__', 'manifest.webapp')
-            && p != path.join('__path__', 'icon.png');
-      });
-    }
-
-    return fileList;
-  },
-
   fileMapTokens: function (options) {
     // Return custom template variables here.
     return {

diff --git a/lib/broccoli/angular2-app.js b/lib/broccoli/angular2-app.js
@@ -81,6 +81,10 @@ class Angular2App extends BroccoliPlugin {
       inputTreeArray.push(new BroccoliFunnel('public', { destDir: 'public' }));
     }
 
+    if (fs.existsSync('icons')) {
+      inputTreeArray.push(new BroccoliFunnel('icons', { destDir: 'icons' }));
+    }
+
     return new BroccoliMergeTrees(inputTreeArray, { overwrite: true });
   }
 
@@ -239,6 +243,7 @@ class Angular2App extends BroccoliPlugin {
     var files = [
       'index.html'
     ];
+    var mobile;
 
     let indexTree = new BroccoliFunnel(this._inputNode, {
       include: files.map(name => path.join(this._sourceDir, name)),
@@ -250,6 +255,24 @@ class Angular2App extends BroccoliPlugin {
       }
     });
 
+    if (this.ngConfig.apps[0].mobile) {
+      mobile = {
+        icons: [
+          { rel: 'apple-touch-icon', href: '/icons/apple-touch-icon.png' },
+          { rel: 'apple-touch-icon', sizes: '57x57', href: '/icons/apple-touch-icon-57x57.png' },
+          { rel: 'apple-touch-icon', sizes: '60x60', href: '/icons/apple-touch-icon-60x60.png' },
+          { rel: 'apple-touch-icon', sizes: '72x72', href: '/icons/apple-touch-icon-72x72.png' },
+          { rel: 'apple-touch-icon', sizes: '76x76', href: '/icons/apple-touch-icon-76x76.png' },
+          { rel: 'apple-touch-icon', sizes: '114x114', href: '/icons/apple-touch-icon-114x114.png' },
+          { rel: 'apple-touch-icon', sizes: '120x120', href: '/icons/apple-touch-icon-120x120.png' },
+          { rel: 'apple-touch-icon', sizes: '144x144', href: '/icons/apple-touch-icon-144x144.png' },
+          { rel: 'apple-touch-icon', sizes: '152x152', href: '/icons/apple-touch-icon-152x152.png' },
+          { rel: 'apple-touch-icon', sizes: '180x180', href: '/icons/apple-touch-icon-180x180.png' },
+          { rel: 'apple-touch-startup-image', href: '/icons/apple-touch-icon-180x180.png' }
+        ]
+      }
+    }
+
     return new HandlebarReplace(indexTree, {
       config: this.ngConfig,
       environment: loadEnvironment(this.project),
@@ -260,7 +283,8 @@ class Angular2App extends BroccoliPlugin {
           'vendor/systemjs/dist/system.src.js',
           'vendor/zone.js/dist/zone.js'
         ]
-      }
+      },
+      mobile: mobile
     }, {
       helpers: {
         'content-for': (name) => {

diff --git a/lib/config/schema.json b/lib/config/schema.json
@@ -23,7 +23,8 @@
         "type": "object",
         "properties": {
           "main": "string",
-          "tsconfig": "string"
+          "tsconfig": "string",
+          "mobile": "boolean"
         },
         "additionalProperties": false
       },

diff --git a/tests/acceptance/init.spec.js b/tests/acceptance/init.spec.js
@@ -13,7 +13,7 @@ var conf = require('ember-cli/tests/helpers/conf');
 var minimatch = require('minimatch');
 var intersect = require('lodash/intersection');
 var remove = require('lodash/remove');
-var pull = require('lodash/pull');
+var unique = require('lodash/uniq');
 var forEach = require('lodash/forEach');
 var any = require('lodash/some');
 var EOL = require('os').EOL;
@@ -35,10 +35,6 @@ describe('Acceptance: ng init', function () {
     // Make a copy of defaultIgnoredFiles.
     Blueprint.ignoredFiles = defaultIgnoredFiles.splice(0);
 
-    // Add the mobile ones.
-    Blueprint.ignoredFiles.push('manifest.webapp');
-    Blueprint.ignoredFiles.push('icon.png');
-
     return tmp.setup('./tmp').then(function () {
       process.chdir('./tmp');
     });
@@ -48,9 +44,10 @@ describe('Acceptance: ng init', function () {
     return tmp.teardown('./tmp');
   });
 
-  function confirmBlueprinted() {
+  function confirmBlueprinted(isMobile) {
     var blueprintPath = path.join(root, 'addon', 'ng2', 'blueprints', 'ng2', 'files');
-    var expected = walkSync(blueprintPath).sort();
+    var mobileBlueprintPath = path.join(root, 'addon', 'ng2', 'blueprints', 'mobile', 'files');
+    var expected = unique(walkSync(blueprintPath).concat(isMobile ? walkSync(mobileBlueprintPath) : []).sort());
     var actual = walkSync('.').sort();
 
     forEach(Blueprint.renamedFiles, function (destFile, srcFile) {
@@ -110,15 +107,12 @@ describe('Acceptance: ng init', function () {
   });
 
   it('ng init --mobile', () => {
-    // Add the mobile ones.
-    pull(Blueprint.ignoredFiles, 'manifest.webapp');
-    pull(Blueprint.ignoredFiles, 'icon.png');
     return ng([
       'init',
       '--skip-npm',
       '--skip-bower',
       '--mobile'
-    ]).then(confirmBlueprinted);
+    ]).then(() => confirmBlueprinted(true));
   });
 
   it('ng init can run in created folder', function () {