Ember.js support (codesandbox#1113)

* feat: ember.js project template

* cleanup

* Update ember icon

* ember - colors, logo, etc... for front page

* Update index.js

Author: mike-north

packages/common/components/logos/Ember.js

@@ -0,0 +1,31 @@
+// @flow
+import Template from './template';
+import { decorateSelector } from '../theme';
+
+export default new Template(
+  'ember',
+  'Ember',
+  'https://emberjs.com/',
+  /**
+   * Ideally, we'd point to https://github.com/ember-cli/ember-new-output 
+   * but there are a few tweaks that must be addressed before then.
+   *  - Auto-detection of ember-cli projects as node projects,
+   *    without requiring a sandbox.config.json
+   *    PR: https://github.com/codesandbox-app/codesandbox-importers/pull/16
+   *  - Ember-CLI initial build chokes on empty app/styles/app.css file
+   *  - A small livereload fix, for proper port detection through the CSB proxy stuff
+   *    BUG: https://github.com/ember-cli/ember-cli/issues/8073
+   * 
+   * Here is a complete diff of these changes, w.r.t. the code generated by
+   * `ember new my-app`
+   * 
+   * https://github.com/ember-cli/ember-new-output/compare/master...mike-north:master
+   */
+  'github/mike-north/ember-new-output',
+  decorateSelector(() => '#E04E39'),
+  {
+    isServer: true,
+    showOnHomePage: true,
+    main: false
+  }
+);

packages/common/templates/ember.js

@@ -2,6 +2,7 @@
 
 import React from 'common/components/logos/React';
 import Angular from 'common/components/logos/Angular';
+import Ember from 'common/components/logos/Ember';
 import Parcel from 'common/components/logos/Parcel';
 import Preact from 'common/components/logos/Preact';
 import Vue from 'common/components/logos/Vue';
@@ -17,6 +18,7 @@ import Apollo from 'common/components/logos/Apollo';
 
 import {
   react,
+  ember,
   vue,
   preact,
   reactTs,
@@ -53,6 +55,8 @@ export default function getIcon(theme: Template) {
       return Parcel;
     case dojo.name:
       return Dojo;
+    case ember.name:
+      return Ember;
     case cxjs.name:
       return CxJS;
     case reason.name:

packages/common/templates/icons.js

@@ -8,6 +8,7 @@ import react from './react';
 import reactTs from './react-ts';
 import svelte from './svelte';
 import vue from './vue';
+import ember from './ember';
 import cxjs from './cxjs';
 import dojo from './dojo';
 import gatsby from './gatsby';
@@ -35,6 +36,7 @@ export {
   svelte,
   vue,
   sapper,
+  ember,
 };
 
 export type Template =

packages/common/templates/index.js

@@ -32,6 +32,7 @@ We infer sandbox settings based on several files in a repository.
 | Template - React            | If `package.json` dependencies contains `react-scripts`.    |
 | Template - React-Typescript | If `package.json` dependencies contains `react-scripts-ts`. |
 | Template - Svelte           | If `package.json` dependencies contains `svelte`.           |
+| Template - Node             | If `package.json` dependencies contains `ember-cli`.        |
 
 Additionally, you may specify a `template` property in your `./sandbox.config.json` file.
 

packages/homepage/content/docs/2-importing.md

@@ -31,6 +31,7 @@ export default class Background extends React.PureComponent {
     '@dojo/cli-create-app': '#211D1C',
     'vue-cli': '#1D2525',
     'preact-cli': '#202328',
+    'ember': '#2a201d',
     svelte: '#202022',
   };
 

packages/homepage/src/screens/home/Animation/Background.js

@@ -16,6 +16,7 @@ import {
   parcel,
   cxjs,
   dojo,
+  ember,
 } from 'common/templates';
 
 import Background from './Background';
@@ -66,7 +67,7 @@ const Message = styled.div`
 `};
 `;
 
-const TEMPLATES = [parcel, react, vue, angular, preact, svelte, cxjs, dojo];
+const TEMPLATES = [parcel, react, vue, angular, preact, svelte, cxjs, dojo, ember];
 
 export default class Animation extends React.PureComponent {
   state = {

packages/homepage/src/screens/home/Animation/index.js

@@ -256,6 +256,11 @@ const TEMPLATE_SUPPORT = {
     css: ['Global', 'Modules'],
     description: 'Used for any kind of project, based on: ',
   },
+  ember: {
+    loaders: [js, ts, image, scss, sass, less],
+    css: ['Global', 'Modules'],
+    description: 'Used for any kind of project, based on: ',
+  },
 };
 
 export default class Frameworks extends React.Component {