Skip to content

Commit

Permalink
feat(frontend): update home screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@bcabanes @vsavkin
bcabanes authored and vsavkin committed Aug 29, 2019
1 parent b4e25fd commit a83f47a
Show file tree
Hide file tree
Showing 10 changed files with 562 additions and 41 deletions.
4 changes: 2 additions & 2 deletions packages/angular/src/schematics/application/application.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand All @@ -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.');
});
});

Expand Down
287 changes: 266 additions & 21 deletions packages/angular/src/schematics/application/application.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`;
Expand Down Expand Up @@ -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>`
: baseContent;
? `${nrwlHomeTemplate.html}\n<router-outlet></router-outlet>`
: nrwlHomeTemplate.html;

if (!options.inlineTemplate) {
return host.overwrite(
Expand All @@ -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,
Expand All @@ -136,7 +376,7 @@ function updateComponentTemplate(options: NormalizedSchema): Rule {
host,
modulePath,
templateNodeValue,
`\`\n${baseContent}\n\`,\n`
`\`\n${nrwlHomeTemplate.html}\n\`,\n`
);
};
}
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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),
Expand All @@ -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'
Expand Down
Binary file added packages/angular/src/schematics/application/files/src/favicon.ico
View file
Binary file not shown.
36 changes: 36 additions & 0 deletions packages/react/src/schematics/application/files/app/src/app/__fileName__.__style__
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Loading

0 comments on commit a83f47a

Please sign in to comment.