feat(frontend): update home screens

packages/angular/src/schematics/application/application.spec.ts

@@ -284,7 +284,7 @@ describe('app', () => {
       ).toBeTruthy();
       expect(
         getFileContent(tree, 'apps/my-dir/my-app/src/app/app.component.html')
-      ).toContain('This is an Angular app built with');
+      ).toContain('Thank you for using and showing some ♥ for Nx.');
     });
 
     it("should update `template`'s property of AppComponent with Nx content", async () => {
@@ -295,7 +295,7 @@ describe('app', () => {
       );
       expect(
         getFileContent(tree, 'apps/my-dir/my-app/src/app/app.component.ts')
-      ).toContain('This is an Angular app built with');
+      ).toContain('Thank you for using and showing some ♥ for Nx.');
     });
   });
 

packages/angular/src/schematics/application/application.ts

@@ -44,6 +44,225 @@ interface NormalizedSchema extends Schema {
   parsedTags: string[];
 }
 
+const nrwlHomeTemplate = {
+  html: `
+<header class="flex">
+    <img alt="Nx logo" width="75" src="https://nx.dev/assets/images/nx-logo-white.svg" />
+    <h1>Welcome to {{title}}!</h1>
+</header>
+<main>
+    <h2>Resources &amp; Tools</h2>
+    <p>
+      Thank you for using and showing some ♥ for Nx.
+    </p>
+    <div class="flex github-star-container">
+      <a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
+        <div class="github-star-badge">
+          <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
+            Star
+        </div>
+      </a>
+    </div>
+    <p>
+      Here are some links to help you get started.
+    </p>
+    <ul class="resources">
+        <li class="col-span-2">
+            <a
+                    class="resource flex"
+                    href="https://nx.dev/angular/getting-started/what-is-nx"
+            >
+                Nx video tutorial
+            </a>
+        </li>
+        <li class="col-span-2">
+            <a
+                    class="resource flex"
+                    href="https://nx.dev/angular/tutorial/01-create-application"
+            >
+                Interactive tutorial
+            </a>
+        </li>
+        <li class="col-span-2">
+            <a class="resource flex" href="https://connect.nrwl.io/">
+                <img
+                        height="36"
+                        alt="Nrwl Connect"
+                        src="https://connect.nrwl.io/assets/img/CONNECT_ColorIcon.png"
+                />
+                <span class="gutter-left">Nrwl Connect</span>
+            </a>
+        </li>
+    </ul>
+    <h2>Next Steps</h2>
+    <p>Here are some things you can do with Nx.</p>
+    <details open>
+        <summary>Add UI library</summary>
+        <pre>
+\`# Generate UI lib
+ng g @nrwl/angular:lib ui
+
+# Add a component
+ng g @nrwl/angular:component xyz --project ui\`</pre
+        >
+    </details>
+    <details>
+        <summary>View dependency graph</summary>
+        <pre>\`nx dep-graph\`</pre>
+    </details>
+    <details>
+        <summary>Run affected commands</summary>
+        <pre>
+\`# see what's been affected by changes
+ng affected:dep-graph
+
+# run tests for current changes
+ng affected:test
+
+# run e2e tests for current changes
+ng affected:e2e
+\`</pre
+        >
+    </details>
+</main>
+  `,
+  css: `
+/*
+ * Remove template code below
+ */
+:host {
+  display: block;
+  font-family: sans-serif;
+  min-width: 300px;
+  max-width: 600px;
+  margin: 50px auto;
+}
+
+.gutter-left {
+  margin-left: 9px;
+}
+
+.col-span-2 {
+  grid-column: span 2;
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+header {
+  background-color: #143055;
+  color: white;
+  padding: 5px;
+  border-radius: 3px;
+}
+
+main {
+  padding: 0 36px;
+}
+
+p {
+  text-align: center;
+}
+
+h1 {
+  text-align: center;
+  margin-left: 18px;
+  font-size: 24px;
+}
+
+h2 {
+  text-align: center;
+  font-size: 20px;
+  margin: 40px 0 10px 0;
+}
+
+.resources {
+  text-align: center;
+  list-style: none;
+  padding: 0;
+  display: grid;
+  grid-gap: 9px;
+  grid-template-columns: 1fr 1fr;
+}
+
+.resource {
+  color: #0094ba;
+  height: 36px;
+  background-color: rgba(0, 0, 0, 0);
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+  padding: 3px 9px;
+  text-decoration: none;
+}
+
+.resource:hover {
+  background-color: rgba(68, 138, 255, 0.04);
+}
+
+pre {
+  padding: 9px;
+  border-radius: 4px;
+  background-color: black;
+  color: #eee;
+}
+
+details {
+  border-radius: 4px;
+  color: #333;
+  background-color: rgba(0, 0, 0, 0);
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  padding: 3px 9px;
+  margin-bottom: 9px;
+}
+
+summary {
+  cursor: pointer;
+  outline: none;
+  height: 36px;
+  line-height: 36px;
+}
+
+.github-star-container {
+  margin-top: 12px;
+  line-height: 20px;
+}
+
+.github-star-container a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #333;
+}
+
+.github-star-badge {
+  color: #24292e;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  padding: 3px 10px;
+  border: 1px solid rgba(27,31,35,.2);
+  border-radius: 3px;
+  background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
+  margin-left: 4px;
+  font-weight: 600;
+}
+
+.github-star-badge:hover {
+  background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
+  border-color: rgba(27,31,35,.35);
+  background-position: -.5em;
+}
+.github-star-badge .material-icons {
+  height: 16px;
+  width: 16px;
+  margin-right: 4px;
+}
+  `
+};
+
 function addRouterRootConfiguration(options: NormalizedSchema): Rule {
   return (host: Tree) => {
     const modulePath = `${options.appProjectRoot}/src/app/app.module.ts`;
@@ -95,27 +314,47 @@ function addRouterRootConfiguration(options: NormalizedSchema): Rule {
   };
 }
 
+function updateComponentStyles(options: NormalizedSchema): Rule {
+  return (host: Tree) => {
+    const content = nrwlHomeTemplate.css;
+
+    if (!options.inlineStyle) {
+      const filesMap = {
+        css: `${options.appProjectRoot}/src/app/app.component.css`,
+        scss: `${options.appProjectRoot}/src/app/app.component.scss`,
+        less: `${options.appProjectRoot}/src/app/app.component.less`,
+        styl: `${options.appProjectRoot}/src/app/app.component.styl`
+      };
+      return host.overwrite(filesMap[options.style], content);
+    }
+
+    // Inline component update
+    const modulePath = `${options.appProjectRoot}/src/app/app.component.ts`;
+    const templateNodeValue = getDecoratorPropertyValueNode(
+      host,
+      modulePath,
+      'Component',
+      'styles',
+      '@angular/core'
+    );
+    replaceNodeValue(
+      host,
+      modulePath,
+      templateNodeValue,
+      `[\`\n${content}\n\`],\n`
+    );
+  };
+}
+
+/**
+ *
+ * @param options
+ */
 function updateComponentTemplate(options: NormalizedSchema): Rule {
   return (host: Tree) => {
-    const baseContent = `
-<div style="text-align:center">
-  <h1>Welcome to {{title}}!</h1>
-  <img width="450" src="https://raw.githubusercontent.com/nrwl/nx/master/nx-logo.png">
-</div>
-
-<p>This is an Angular app built with <a href="https://nx.dev/angular">Nx</a>.</p>
-<p>🔎 **Nx is a set of Extensible Dev Tools for Monorepos.**</p>
-
-<h2>Quick Start & Documentation</h2>
-
-<ul>
-<li><a href="https://nx.dev/angular/getting-started/what-is-nx">10-minute video showing all Nx features</a></li>
-<li><a href="https://nx.dev/angular/tutorial/01-create-application">Interactive tutorial</a></li>
-</ul>
-`;
     const content = options.routing
-      ? `${baseContent}\n<router-outlet></router-outlet>`
+      ? `${nrwlHomeTemplate.html}\n<router-outlet></router-outlet>`
-      : baseContent;
+      : nrwlHomeTemplate.html;
 
     if (!options.inlineTemplate) {
       return host.overwrite(
@@ -124,6 +363,7 @@ function updateComponentTemplate(options: NormalizedSchema): Rule {
       );
     }
 
+    // Inline component update
     const modulePath = `${options.appProjectRoot}/src/app/app.component.ts`;
     const templateNodeValue = getDecoratorPropertyValueNode(
       host,
@@ -136,7 +376,7 @@ function updateComponentTemplate(options: NormalizedSchema): Rule {
       host,
       modulePath,
       templateNodeValue,
-      `\`\n${baseContent}\n\`,\n`
+      `\`\n${nrwlHomeTemplate.html}\n\`,\n`
     );
   };
 }
@@ -177,8 +417,12 @@ function updateLinting(options: NormalizedSchema): Rule {
   ]);
 }
 
-function addTsconfigs(options: NormalizedSchema): Rule {
+function addSchematicFiles(
+  appProjectRoot: string,
+  options: NormalizedSchema
+): Rule {
   return chain([
+    host => host.delete(`${appProjectRoot}/src/favicon.ico`),
     mergeWith(
       apply(url('./files'), [
         template({
@@ -385,7 +629,7 @@ export default function(schema: Schema): Rule {
         skipInstall: true,
         skipPackageJson: false
       }),
-      addTsconfigs(options),
+      addSchematicFiles(appProjectRoot, options),
       options.e2eTestRunner === 'protractor'
         ? move(e2eProjectRoot, options.e2eProjectRoot)
         : removeE2e(options, e2eProjectRoot),
@@ -403,6 +647,7 @@ export default function(schema: Schema): Rule {
       move(appProjectRoot, options.appProjectRoot),
       updateProject(options),
       updateComponentTemplate(options),
+      updateComponentStyles(options),
       options.routing ? addRouterRootConfiguration(options) : noop(),
       updateLinting(options),
       options.unitTestRunner === 'jest'

packages/react/src/schematics/application/files/app/src/app/__fileName__.__style__

@@ -94,3 +94,39 @@
   height: 36px;
   line-height: 36px;
 }
+
+.app .github-star-container {
+  margin-top: 12px;
+  line-height: 20px;
+}
+
+.app .github-star-container a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #333;
+}
+
+.app .github-star-badge {
+  color: #24292e;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  padding: 3px 10px;
+  border: 1px solid rgba(27,31,35,.2);
+  border-radius: 3px;
+  background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
+  margin-left: 4px;
+  font-weight: 600;
+}
+
+.app .github-star-badge:hover {
+  background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
+  border-color: rgba(27,31,35,.35);
+  background-position: -.5em;
+}
+.app .github-star-badge .material-icons {
+  height: 16px;
+  width: 16px;
+  margin-right: 4px;
+}

packages/react/src/schematics/application/files/app/src/app/__fileName__.tsx__tmpl__

@@ -105,6 +105,42 @@ summary {
   height: 36px;
   line-height: 36px;
 }
+
+.github-star-container {
+  margin-top: 12px;
+  line-height: 20px;
+}
+
+.github-star-container a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #333;
+}
+
+.github-star-badge {
+  color: #24292e;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  padding: 3px 10px;
+  border: 1px solid rgba(27,31,35,.2);
+  border-radius: 3px;
+  background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
+  margin-left: 4px;
+  font-weight: 600;
+}
+
+.github-star-badge:hover {
+  background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
+  border-color: rgba(27,31,35,.35);
+  background-position: -.5em;
+}
+.github-star-badge .material-icons {
+  height: 16px;
+  width: 16px;
+  margin-right: 4px;
+}
 `;
 <% }%>
 
@@ -121,7 +157,17 @@ var innerJsx = `
   <main>
     <h2>Resources &amp; Tools</h2>
     <p>
-      Thank you for using and showing some ♥ for Nx. <br />
+      Thank you for using and showing some ♥ for Nx.
+    </p>
+    <div className="flex github-star-container">
+      <a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
+        <div className="github-star-badge">
+          <svg className="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
+            Star
+        </div>
+      </a>
+    </div>
+    <p>
       Here are some links to help you get started.
     </p>
     <ul className="resources">

packages/web/src/schematics/application/application.spec.ts

@@ -179,7 +179,7 @@ describe('app', () => {
     ).toBeTruthy();
     expect(
       tree.readContent('apps/my-dir/my-app/src/app/app.element.ts')
-    ).toContain('This is a Web Components app built with');
+    ).toContain('Thank you for using and showing some ♥ for Nx.');
   });
 
   describe('--style scss', () => {

packages/web/src/schematics/application/files/app/src/app/app.element.__style__

@@ -0,0 +1,133 @@
+/*
+ * Remove template code below
+ */
+body > *:first-child {
+    display: block;
+    font-family: sans-serif;
+    min-width: 300px;
+    max-width: 600px;
+    margin: 50px auto;
+}
+
+.gutter-left {
+    margin-left: 9px;
+}
+
+.col-span-2 {
+    grid-column: span 2;
+}
+
+.flex {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+header {
+    background-color: #143055;
+    color: white;
+    padding: 5px;
+    border-radius: 3px;
+}
+
+main {
+    padding: 0 36px;
+}
+
+p {
+    text-align: center;
+}
+
+h1 {
+    text-align: center;
+    margin-left: 18px;
+    font-size: 24px;
+}
+
+h2 {
+    text-align: center;
+    font-size: 20px;
+    margin: 40px 0 10px 0;
+}
+
+.resources {
+    text-align: center;
+    list-style: none;
+    padding: 0;
+    display: grid;
+    grid-gap: 9px;
+    grid-template-columns: 1fr 1fr;
+}
+
+.resource {
+    color: #0094ba;
+    height: 36px;
+    background-color: rgba(0, 0, 0, 0);
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
+    padding: 3px 9px;
+    text-decoration: none;
+}
+
+.resource:hover {
+    background-color: rgba(68, 138, 255, 0.04);
+}
+
+pre {
+    padding: 9px;
+    border-radius: 4px;
+    background-color: black;
+    color: #eee;
+}
+
+details {
+    border-radius: 4px;
+    color: #333;
+    background-color: rgba(0, 0, 0, 0);
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    padding: 3px 9px;
+    margin-bottom: 9px;
+}
+
+summary {
+    cursor: pointer;
+    outline: none;
+    height: 36px;
+    line-height: 36px;
+}
+
+.github-star-container {
+    margin-top: 12px;
+    line-height: 20px;
+}
+
+.github-star-container a {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: #333;
+}
+
+.github-star-badge {
+    color: #24292e;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    padding: 3px 10px;
+    border: 1px solid rgba(27,31,35,.2);
+    border-radius: 3px;
+    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
+    margin-left: 4px;
+    font-weight: 600;
+}
+
+.github-star-badge:hover {
+    background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
+    border-color: rgba(27,31,35,.35);
+    background-position: -.5em;
+}
+.github-star-badge .material-icons {
+    height: 16px;
+    width: 16px;
+    margin-right: 4px;
+}

packages/web/src/schematics/application/files/app/src/app/app.element.ts__tmpl__

@@ -8,24 +8,85 @@ export class AppElement extends HTMLElement {
   connectedCallback() {
     const title = '<%= projectName %>';
     this.innerHTML = `
-      <div style="text-align: center">
+      <header class="flex">
-        <h1>Welcome to ${title}!</h1>
+    <img alt="Nx logo" width="75" src="https://nx.dev/assets/images/nx-logo-white.svg" />
-        <img
+    <h1>Welcome to ${title}!</h1>
-          width="450"
+</header>
-          src="https://raw.githubusercontent.com/nrwl/nx/master/nx-logo.png"
+<main>
-        />
+    <h2>Resources &amp; Tools</h2>
-      </div>
+    <p>
-      <p>This is a Web Components app built with <a href="https://nx.dev/web">Nx</a>.</p>
+      Thank you for using and showing some ♥ for Nx.
-      <p>🔎 **Nx is a set of Extensible Dev Tools for Monorepos.**</p>
+    </p>
-      <h2>Quick Start & Documentation</h2>
+    <div class="flex github-star-container">
-      <ul>
+      <a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
-        <li>
+        <div class="github-star-badge">
-          <a href="https://nx.dev/web/getting-started/what-is-nx">10-minute video showing all Nx features</a>
+          <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
+            Star
+        </div>
+      </a>
+    </div>
+    <p>
+      Here are some links to help you get started.
+    </p>
+    <ul class="resources">
+        <li class="col-span-2">
+            <a
+                    class="resource flex"
+                    href="https://nx.dev/angular/getting-started/what-is-nx"
+            >
+                Nx video tutorial
+            </a>
         </li>
-        <li>
+        <li class="col-span-2">
-          <a href="https://nx.dev/web/tutorial/01-create-application">Interactive tutorial</a>
+            <a
+                    class="resource flex"
+                    href="https://nx.dev/angular/tutorial/01-create-application"
+            >
+                Interactive tutorial
+            </a>
         </li>
-      </ul>
+        <li class="col-span-2">
+            <a class="resource flex" href="https://connect.nrwl.io/">
+                <img
+                        height="36"
+                        alt="Nrwl Connect"
+                        src="https://connect.nrwl.io/assets/img/CONNECT_ColorIcon.png"
+                />
+                <span class="gutter-left">Nrwl Connect</span>
+            </a>
+        </li>
+    </ul>
+    <h2>Next Steps</h2>
+    <p>Here are some things you can do with Nx.</p>
+    <details open>
+        <summary>Add UI library</summary>
+        <pre>
+\`# Generate UI lib
+nx g @nrwl/angular:lib ui
+
+# Add a component
+nx g @nrwl/angular:component xyz --project ui\`</pre
+        >
+    </details>
+    <details>
+        <summary>View dependency graph</summary>
+        <pre>\`nx dep-graph\`</pre>
+    </details>
+    <details>
+        <summary>Run affected commands</summary>
+        <pre>
+\`# see what's been affected by changes
+nx affected:dep-graph
+
+# run tests for current changes
+nx affected:test
+
+# run e2e tests for current changes
+nx affected:e2e
+\`</pre
+        >
+    </details>
+</main>
     `;
   }
 }