feat(core): new nx starter (#7912)
This commit is contained in:
Benjamin Cabanes
GitHub
parent
125d3a689e
commit
66e4e85067
@ -1,2 +1 @@
|
|||||||
test:$6FrCaT/v0dwE:autocreated 2020-03-25T19:10:50.254Z
|
test:$6FrCaT/v0dwE:autocreated 2020-03-25T19:10:50.254Z
|
||||||
dddd:ZpRSQxtFPtZog:autocreated 2021-08-21T07:57:21.687Z
|
|
||||||
|
|||||||
@ -44,10 +44,11 @@ describe('Angular Package', () => {
|
|||||||
names(mylib).className
|
names(mylib).className
|
||||||
}Module } from '@${proj}/my-dir/${mylib}';
|
}Module } from '@${proj}/my-dir/${mylib}';
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
|
import { NxWelcomeComponent } from './nx-welcome.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [BrowserModule, MyDir${names(mylib).className}Module],
|
imports: [BrowserModule, MyDir${names(mylib).className}Module],
|
||||||
declarations: [AppComponent],
|
declarations: [AppComponent, NxWelcomeComponent],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
})
|
})
|
||||||
export class AppModule {}
|
export class AppModule {}
|
||||||
|
|||||||
@ -53,9 +53,10 @@ describe('Angular Package', () => {
|
|||||||
}Module} from '@${proj}/${buildableLib}';
|
}Module} from '@${proj}/${buildableLib}';
|
||||||
|
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
|
import { NxWelcomeComponent } from './nx-welcome.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [AppComponent],
|
declarations: [AppComponent, NxWelcomeComponent],
|
||||||
imports: [BrowserModule, ${names(buildableLib).className}Module],
|
imports: [BrowserModule, ${names(buildableLib).className}Module],
|
||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent],
|
bootstrap: [AppComponent],
|
||||||
|
|||||||
@ -613,7 +613,6 @@ async function checkApp(
|
|||||||
const buildResult = runCLI(`build ${appName} --withDeps`);
|
const buildResult = runCLI(`build ${appName} --withDeps`);
|
||||||
expect(buildResult).toContain(`Compiled successfully`);
|
expect(buildResult).toContain(`Compiled successfully`);
|
||||||
checkFilesExist(`dist/apps/${appName}/.next/build-manifest.json`);
|
checkFilesExist(`dist/apps/${appName}/.next/build-manifest.json`);
|
||||||
checkFilesExist(`dist/apps/${appName}/public/star.svg`);
|
|
||||||
|
|
||||||
const packageJson = readJson(`dist/apps/${appName}/package.json`);
|
const packageJson = readJson(`dist/apps/${appName}/package.json`);
|
||||||
expect(packageJson.dependencies.react).toBeDefined();
|
expect(packageJson.dependencies.react).toBeDefined();
|
||||||
|
|||||||
@ -133,7 +133,7 @@ describe('app', () => {
|
|||||||
const myAppPrefix = workspaceJson.projects['my-app'].prefix;
|
const myAppPrefix = workspaceJson.projects['my-app'].prefix;
|
||||||
|
|
||||||
expect(myAppPrefix).toEqual('proj');
|
expect(myAppPrefix).toEqual('proj');
|
||||||
expect(appE2eSpec).toContain('Welcome to my-app!');
|
expect(appE2eSpec).toContain('Welcome my-app');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should set a new prefix and use it', async () => {
|
it('should set a new prefix and use it', async () => {
|
||||||
@ -151,7 +151,7 @@ describe('app', () => {
|
|||||||
const myAppPrefix = workspaceJson.projects['my-app-with-prefix'].prefix;
|
const myAppPrefix = workspaceJson.projects['my-app-with-prefix'].prefix;
|
||||||
|
|
||||||
expect(myAppPrefix).toEqual('custom');
|
expect(myAppPrefix).toEqual('custom');
|
||||||
expect(appE2eSpec).toContain('Welcome to my-app-with-prefix!');
|
expect(appE2eSpec).toContain('Welcome my-app-with-prefix');
|
||||||
});
|
});
|
||||||
|
|
||||||
// TODO: this should work
|
// TODO: this should work
|
||||||
@ -289,7 +289,7 @@ describe('app', () => {
|
|||||||
await generateApp(appTree, 'myApp', { directory: 'myDir' });
|
await generateApp(appTree, 'myApp', { directory: 'myDir' });
|
||||||
expect(
|
expect(
|
||||||
appTree.read('apps/my-dir/my-app/src/app/app.component.html', 'utf-8')
|
appTree.read('apps/my-dir/my-app/src/app/app.component.html', 'utf-8')
|
||||||
).toContain('Thank you for using and showing some ♥ for Nx.');
|
).toContain('<proj-nx-welcome></proj-nx-welcome>');
|
||||||
});
|
});
|
||||||
|
|
||||||
it("should update `template`'s property of AppComponent with Nx content", async () => {
|
it("should update `template`'s property of AppComponent with Nx content", async () => {
|
||||||
@ -299,7 +299,17 @@ describe('app', () => {
|
|||||||
});
|
});
|
||||||
expect(
|
expect(
|
||||||
appTree.read('apps/my-dir/my-app/src/app/app.component.ts', 'utf-8')
|
appTree.read('apps/my-dir/my-app/src/app/app.component.ts', 'utf-8')
|
||||||
).toContain('Thank you for using and showing some ♥ for Nx.');
|
).toContain('<proj-nx-welcome></proj-nx-welcome>');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create Nx specific `nx-welcome.component.ts` file', async () => {
|
||||||
|
await generateApp(appTree, 'myApp', { directory: 'myDir' });
|
||||||
|
expect(
|
||||||
|
appTree.read(
|
||||||
|
'apps/my-dir/my-app/src/app/nx-welcome.component.ts',
|
||||||
|
'utf-8'
|
||||||
|
)
|
||||||
|
).toContain('Hello there');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should update the AppComponent spec to target Nx content', async () => {
|
it('should update the AppComponent spec to target Nx content', async () => {
|
||||||
@ -313,7 +323,7 @@ describe('app', () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
expect(testFileContent).toContain(`querySelector('h1')`);
|
expect(testFileContent).toContain(`querySelector('h1')`);
|
||||||
expect(testFileContent).toContain('Welcome to my-dir-my-app!');
|
expect(testFileContent).toContain('Welcome my-dir-my-app');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -633,7 +643,7 @@ describe('app', () => {
|
|||||||
|
|
||||||
expect(
|
expect(
|
||||||
appTree.read('apps/my-app-e2e/src/app.e2e-spec.ts', 'utf-8')
|
appTree.read('apps/my-app-e2e/src/app.e2e-spec.ts', 'utf-8')
|
||||||
).toContain(`'Welcome to my-app!'`);
|
).toContain(`'Welcome my-app'`);
|
||||||
expect(
|
expect(
|
||||||
appTree.read('apps/my-app-e2e/src/app.po.ts', 'utf-8')
|
appTree.read('apps/my-app-e2e/src/app.po.ts', 'utf-8')
|
||||||
).toContain(`'proj-root header h1'`);
|
).toContain(`'proj-root header h1'`);
|
||||||
@ -650,7 +660,7 @@ describe('app', () => {
|
|||||||
'apps/my-directory/my-app-e2e/src/app.e2e-spec.ts',
|
'apps/my-directory/my-app-e2e/src/app.e2e-spec.ts',
|
||||||
'utf-8'
|
'utf-8'
|
||||||
)
|
)
|
||||||
).toContain(`'Welcome to my-directory-my-app!'`);
|
).toContain(`'Welcome my-directory-my-app'`);
|
||||||
expect(
|
expect(
|
||||||
appTree.read('apps/my-directory/my-app-e2e/src/app.po.ts', 'utf-8')
|
appTree.read('apps/my-directory/my-app-e2e/src/app.po.ts', 'utf-8')
|
||||||
).toContain(`'proj-root header h1'`);
|
).toContain(`'proj-root header h1'`);
|
||||||
|
|||||||
@ -17,8 +17,8 @@ import init from '../init/init';
|
|||||||
import {
|
import {
|
||||||
createFiles,
|
createFiles,
|
||||||
normalizeOptions,
|
normalizeOptions,
|
||||||
updateComponentStyles,
|
updateAppComponentTemplate,
|
||||||
updateComponentTemplate,
|
updateNxComponentTemplate,
|
||||||
updateConfigFiles,
|
updateConfigFiles,
|
||||||
addE2e,
|
addE2e,
|
||||||
updateComponentSpec,
|
updateComponentSpec,
|
||||||
@ -78,8 +78,24 @@ export async function applicationGenerator(
|
|||||||
|
|
||||||
moveFilesToNewDirectory(host, appProjectRoot, options.appProjectRoot);
|
moveFilesToNewDirectory(host, appProjectRoot, options.appProjectRoot);
|
||||||
updateConfigFiles(host, options);
|
updateConfigFiles(host, options);
|
||||||
updateComponentTemplate(host, options);
|
updateAppComponentTemplate(host, options);
|
||||||
updateComponentStyles(host, options);
|
|
||||||
|
// Create the NxWelcomeComponent
|
||||||
|
const angularComponentSchematic = wrapAngularDevkitSchematic(
|
||||||
|
'@schematics/angular',
|
||||||
|
'component'
|
||||||
|
);
|
||||||
|
await angularComponentSchematic(host, {
|
||||||
|
name: 'NxWelcome',
|
||||||
|
inlineTemplate: true,
|
||||||
|
prefix: options.prefix,
|
||||||
|
skipTests: true,
|
||||||
|
style: 'none',
|
||||||
|
flat: true,
|
||||||
|
viewEncapsulation: 'None',
|
||||||
|
project: options.name,
|
||||||
|
});
|
||||||
|
updateNxComponentTemplate(host, options);
|
||||||
|
|
||||||
if (options.unitTestRunner !== UnitTestRunner.None) {
|
if (options.unitTestRunner !== UnitTestRunner.None) {
|
||||||
updateComponentSpec(host, options);
|
updateComponentSpec(host, options);
|
||||||
|
|||||||
@ -12,8 +12,8 @@ export * from './remove-scaffolded-e2e';
|
|||||||
export * from './root-router-config';
|
export * from './root-router-config';
|
||||||
export * from './set-app-strict-default';
|
export * from './set-app-strict-default';
|
||||||
export * from './update-component-spec';
|
export * from './update-component-spec';
|
||||||
export * from './update-component-styles';
|
export * from './update-app-component-template';
|
||||||
export * from './update-component-template';
|
export * from './update-nx-component-template';
|
||||||
export * from './update-config-files';
|
export * from './update-config-files';
|
||||||
export * from './update-e2e-project';
|
export * from './update-e2e-project';
|
||||||
export * from './update-editor-tsconfig';
|
export * from './update-editor-tsconfig';
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -7,10 +7,15 @@ import { getDecoratorPropertyValueNode } from '../../../utils/nx-devkit/ast-util
|
|||||||
|
|
||||||
import { nrwlHomeTemplate } from './nrwl-home-tpl';
|
import { nrwlHomeTemplate } from './nrwl-home-tpl';
|
||||||
|
|
||||||
export function updateComponentTemplate(host: Tree, options: NormalizedSchema) {
|
export function updateAppComponentTemplate(
|
||||||
|
host: Tree,
|
||||||
|
options: NormalizedSchema
|
||||||
|
) {
|
||||||
const content = options.routing
|
const content = options.routing
|
||||||
? `${nrwlHomeTemplate.html}\n<router-outlet></router-outlet>`
|
? `${nrwlHomeTemplate.getSelector(
|
||||||
: nrwlHomeTemplate.html;
|
options.prefix
|
||||||
|
)}\n<router-outlet></router-outlet>`
|
||||||
|
: nrwlHomeTemplate.getSelector(options.prefix);
|
||||||
|
|
||||||
if (!options.inlineTemplate) {
|
if (!options.inlineTemplate) {
|
||||||
host.write(`${options.appProjectRoot}/src/app/app.component.html`, content);
|
host.write(`${options.appProjectRoot}/src/app/app.component.html`, content);
|
||||||
@ -38,6 +43,6 @@ export function updateComponentTemplate(host: Tree, options: NormalizedSchema) {
|
|||||||
),
|
),
|
||||||
componentPath,
|
componentPath,
|
||||||
templateNodeValue,
|
templateNodeValue,
|
||||||
`\`\n${nrwlHomeTemplate.html}\n\``
|
`\`\n${nrwlHomeTemplate.getSelector(options.prefix)}\n\``
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -3,7 +3,10 @@ import type { NormalizedSchema } from './normalized-schema';
|
|||||||
|
|
||||||
import * as ts from 'typescript';
|
import * as ts from 'typescript';
|
||||||
import { insertImport } from '@nrwl/workspace/src/utilities/ast-utils';
|
import { insertImport } from '@nrwl/workspace/src/utilities/ast-utils';
|
||||||
import { addImportToTestBed } from '../../../utils/nx-devkit/ast-utils';
|
import {
|
||||||
|
addImportToTestBed,
|
||||||
|
replaceIntoToTestBed,
|
||||||
|
} from '../../../utils/nx-devkit/ast-utils';
|
||||||
|
|
||||||
export function updateComponentSpec(host: Tree, options: NormalizedSchema) {
|
export function updateComponentSpec(host: Tree, options: NormalizedSchema) {
|
||||||
if (options.skipTests !== true) {
|
if (options.skipTests !== true) {
|
||||||
@ -21,10 +24,28 @@ export function updateComponentSpec(host: Tree, options: NormalizedSchema) {
|
|||||||
componentSpecPath,
|
componentSpecPath,
|
||||||
componentSpecSource
|
componentSpecSource
|
||||||
.replace('.content span', 'h1')
|
.replace('.content span', 'h1')
|
||||||
.replace(
|
.replace(`${options.name} app is running!`, `Welcome ${options.name}`)
|
||||||
`${options.name} app is running!`,
|
);
|
||||||
`Welcome to ${options.name}!`
|
|
||||||
)
|
// Adding NxWelcome component to app.component.spec
|
||||||
|
componentSpecSourceFile = insertImport(
|
||||||
|
host,
|
||||||
|
componentSpecSourceFile,
|
||||||
|
componentSpecPath,
|
||||||
|
'NxWelcomeComponent',
|
||||||
|
'./nx-welcome.component'
|
||||||
|
);
|
||||||
|
|
||||||
|
componentSpecSourceFile = replaceIntoToTestBed(
|
||||||
|
host,
|
||||||
|
componentSpecSourceFile,
|
||||||
|
componentSpecPath,
|
||||||
|
`declarations: [AppComponent, NxWelcomeComponent]`,
|
||||||
|
`
|
||||||
|
declarations: [
|
||||||
|
AppComponent
|
||||||
|
],
|
||||||
|
`
|
||||||
);
|
);
|
||||||
|
|
||||||
if (options.routing) {
|
if (options.routing) {
|
||||||
|
|||||||
@ -1,47 +0,0 @@
|
|||||||
import type { Tree } from '@nrwl/devkit';
|
|
||||||
import type { NormalizedSchema } from './normalized-schema';
|
|
||||||
|
|
||||||
import * as ts from 'typescript';
|
|
||||||
import { replaceNodeValue } from '@nrwl/workspace/src/utilities/ast-utils';
|
|
||||||
import { getDecoratorPropertyValueNode } from '../../../utils/nx-devkit/ast-utils';
|
|
||||||
|
|
||||||
import { nrwlHomeTemplate } from './nrwl-home-tpl';
|
|
||||||
|
|
||||||
export function updateComponentStyles(host: Tree, options: NormalizedSchema) {
|
|
||||||
const content = nrwlHomeTemplate[options.style === 'sass' ? 'sass' : 'css'];
|
|
||||||
|
|
||||||
if (!options.inlineStyle) {
|
|
||||||
const filesMap = {
|
|
||||||
css: `${options.appProjectRoot}/src/app/app.component.css`,
|
|
||||||
sass: `${options.appProjectRoot}/src/app/app.component.sass`,
|
|
||||||
scss: `${options.appProjectRoot}/src/app/app.component.scss`,
|
|
||||||
less: `${options.appProjectRoot}/src/app/app.component.less`,
|
|
||||||
};
|
|
||||||
host.write(filesMap[options.style], content);
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Inline component update
|
|
||||||
const componentPath = `${options.appProjectRoot}/src/app/app.component.ts`;
|
|
||||||
const templateNodeValue = getDecoratorPropertyValueNode(
|
|
||||||
host,
|
|
||||||
componentPath,
|
|
||||||
'Component',
|
|
||||||
'styles',
|
|
||||||
'@angular/core'
|
|
||||||
);
|
|
||||||
|
|
||||||
replaceNodeValue(
|
|
||||||
host,
|
|
||||||
ts.createSourceFile(
|
|
||||||
componentPath,
|
|
||||||
host.read(componentPath, 'utf-8'),
|
|
||||||
ts.ScriptTarget.Latest,
|
|
||||||
true
|
|
||||||
),
|
|
||||||
componentPath,
|
|
||||||
templateNodeValue,
|
|
||||||
`[\`\n${content}\n\`],\n`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -15,7 +15,7 @@ export function updateE2eProject(tree: Tree, options: NormalizedSchema) {
|
|||||||
spec,
|
spec,
|
||||||
content.replace(
|
content.replace(
|
||||||
`${options.name} app is running!`,
|
`${options.name} app is running!`,
|
||||||
`Welcome to ${options.name}!`
|
`Welcome ${options.name}`
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,66 @@
|
|||||||
|
import type { Tree } from '@nrwl/devkit';
|
||||||
|
import type { NormalizedSchema } from './normalized-schema';
|
||||||
|
|
||||||
|
import * as ts from 'typescript';
|
||||||
|
import {
|
||||||
|
addGlobal,
|
||||||
|
replaceNodeValue,
|
||||||
|
} from '@nrwl/workspace/src/utilities/ast-utils';
|
||||||
|
import { getDecoratorPropertyValueNode } from '../../../utils/nx-devkit/ast-utils';
|
||||||
|
import { nrwlHomeTemplate } from './nrwl-home-tpl';
|
||||||
|
|
||||||
|
export function updateNxComponentTemplate(
|
||||||
|
host: Tree,
|
||||||
|
options: NormalizedSchema
|
||||||
|
) {
|
||||||
|
const componentPath = `${options.appProjectRoot}/src/app/nx-welcome.component.ts`;
|
||||||
|
const templateNodeValue = getDecoratorPropertyValueNode(
|
||||||
|
host,
|
||||||
|
componentPath,
|
||||||
|
'Component',
|
||||||
|
'template',
|
||||||
|
'@angular/core'
|
||||||
|
);
|
||||||
|
|
||||||
|
replaceNodeValue(
|
||||||
|
host,
|
||||||
|
ts.createSourceFile(
|
||||||
|
componentPath,
|
||||||
|
host.read(componentPath, 'utf-8'),
|
||||||
|
ts.ScriptTarget.Latest,
|
||||||
|
true
|
||||||
|
),
|
||||||
|
componentPath,
|
||||||
|
templateNodeValue,
|
||||||
|
`\`\n${nrwlHomeTemplate.template(options.name)}\n\``
|
||||||
|
);
|
||||||
|
|
||||||
|
// Fixing extra comma issue `,,`
|
||||||
|
let sourceFile = ts.createSourceFile(
|
||||||
|
componentPath,
|
||||||
|
host.read(componentPath, 'utf-8'),
|
||||||
|
ts.ScriptTarget.Latest,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
const componentFile = host
|
||||||
|
.read(componentPath, 'utf-8')
|
||||||
|
.toString()
|
||||||
|
.replace(/,,/gi, ',');
|
||||||
|
host.write(componentPath, componentFile);
|
||||||
|
sourceFile.update(componentFile, {
|
||||||
|
newLength: componentFile.length,
|
||||||
|
span: {
|
||||||
|
length: sourceFile.text.length,
|
||||||
|
start: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add ESLint ignore to pass the lint step
|
||||||
|
sourceFile = ts.createSourceFile(
|
||||||
|
componentPath,
|
||||||
|
host.read(componentPath, 'utf-8'),
|
||||||
|
ts.ScriptTarget.Latest,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
addGlobal(host, sourceFile, componentPath, '/* eslint-disable */');
|
||||||
|
}
|
||||||
@ -5,11 +5,13 @@ exports[`Init MFE should add a remote application and add it to a specified host
|
|||||||
import { BrowserModule } from '@angular/platform-browser';
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
|
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
|
import { NxWelcomeComponent } from './nx-welcome.component';
|
||||||
import { RouterModule } from '@angular/router';
|
import { RouterModule } from '@angular/router';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
AppComponent
|
AppComponent,
|
||||||
|
NxWelcomeComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
|||||||
@ -7,6 +7,7 @@ import {
|
|||||||
insertChange,
|
insertChange,
|
||||||
removeChange,
|
removeChange,
|
||||||
getImport,
|
getImport,
|
||||||
|
replaceChange,
|
||||||
} from '@nrwl/workspace/src/utilities/ast-utils';
|
} from '@nrwl/workspace/src/utilities/ast-utils';
|
||||||
|
|
||||||
function _angularImportsFromNode(
|
function _angularImportsFromNode(
|
||||||
@ -344,6 +345,80 @@ export function addImportToTestBed(
|
|||||||
return source;
|
return source;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function addDeclarationsToTestBed(
|
||||||
|
host: Tree,
|
||||||
|
source: ts.SourceFile,
|
||||||
|
specPath: string,
|
||||||
|
symbolName: string[]
|
||||||
|
): ts.SourceFile {
|
||||||
|
const allCalls: ts.CallExpression[] = <any>(
|
||||||
|
findNodes(source, ts.SyntaxKind.CallExpression)
|
||||||
|
);
|
||||||
|
|
||||||
|
const configureTestingModuleObjectLiterals = allCalls
|
||||||
|
.filter((c) => c.expression.kind === ts.SyntaxKind.PropertyAccessExpression)
|
||||||
|
.filter(
|
||||||
|
(c: any) => c.expression.name.getText(source) === 'configureTestingModule'
|
||||||
|
)
|
||||||
|
.map((c) =>
|
||||||
|
c.arguments[0].kind === ts.SyntaxKind.ObjectLiteralExpression
|
||||||
|
? c.arguments[0]
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
|
||||||
|
if (configureTestingModuleObjectLiterals.length > 0) {
|
||||||
|
const startPosition = configureTestingModuleObjectLiterals[0]
|
||||||
|
.getFirstToken(source)
|
||||||
|
.getEnd();
|
||||||
|
return insertChange(
|
||||||
|
host,
|
||||||
|
source,
|
||||||
|
specPath,
|
||||||
|
startPosition,
|
||||||
|
`declarations: [${symbolName.join(',')}], `
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return source;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function replaceIntoToTestBed(
|
||||||
|
host: Tree,
|
||||||
|
source: ts.SourceFile,
|
||||||
|
specPath: string,
|
||||||
|
newSymbol: string,
|
||||||
|
previousSymbol: string
|
||||||
|
): ts.SourceFile {
|
||||||
|
const allCalls: ts.CallExpression[] = <any>(
|
||||||
|
findNodes(source, ts.SyntaxKind.CallExpression)
|
||||||
|
);
|
||||||
|
|
||||||
|
const configureTestingModuleObjectLiterals = allCalls
|
||||||
|
.filter((c) => c.expression.kind === ts.SyntaxKind.PropertyAccessExpression)
|
||||||
|
.filter(
|
||||||
|
(c: any) => c.expression.name.getText(source) === 'configureTestingModule'
|
||||||
|
)
|
||||||
|
.map((c) =>
|
||||||
|
c.arguments[0].kind === ts.SyntaxKind.ObjectLiteralExpression
|
||||||
|
? c.arguments[0]
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
|
||||||
|
if (configureTestingModuleObjectLiterals.length > 0) {
|
||||||
|
const startPosition = configureTestingModuleObjectLiterals[0]
|
||||||
|
.getFirstToken(source)
|
||||||
|
.getEnd();
|
||||||
|
return replaceChange(
|
||||||
|
host,
|
||||||
|
source,
|
||||||
|
specPath,
|
||||||
|
startPosition,
|
||||||
|
newSymbol,
|
||||||
|
previousSymbol
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return source;
|
||||||
|
}
|
||||||
|
|
||||||
export function getBootstrapComponent(
|
export function getBootstrapComponent(
|
||||||
source: ts.SourceFile,
|
source: ts.SourceFile,
|
||||||
moduleClassName: string
|
moduleClassName: string
|
||||||
|
|||||||
@ -8,6 +8,6 @@ describe('<%= project %>', () => {
|
|||||||
cy.login('my-email@something.com', 'myPassword');
|
cy.login('my-email@something.com', 'myPassword');
|
||||||
|
|
||||||
// Function helper example, see `../support/app.po.ts` file
|
// Function helper example, see `../support/app.po.ts` file
|
||||||
getGreeting().contains('Welcome to <%= project %>!');
|
getGreeting().contains('Welcome <%= project %>');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,132 +1,401 @@
|
|||||||
/*
|
/*
|
||||||
* Remove template code below
|
* Remove template code below
|
||||||
*/
|
*/
|
||||||
|
:global(html) {
|
||||||
.page {
|
-webkit-text-size-adjust: 100%;
|
||||||
font-family: sans-serif;
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||||
min-width: 300px;
|
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
|
||||||
max-width: 600px;
|
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||||
margin: 50px auto;
|
'Noto Color Emoji';
|
||||||
|
line-height: 1.5;
|
||||||
|
tab-size: 4;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
:global(body) {
|
||||||
|
font-family: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
:global(h1),
|
||||||
|
:global(h2),
|
||||||
|
:global(p),
|
||||||
|
:global(pre) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
:global(*),
|
||||||
|
:global(::before),
|
||||||
|
:global(::after) {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-width: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: currentColor;
|
||||||
|
}
|
||||||
|
:global(h1),
|
||||||
|
:global(h2) {
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
|
}
|
||||||
|
:global(a) {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
:global(pre) {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||||
|
'Liberation Mono', 'Courier New', monospace;
|
||||||
|
}
|
||||||
|
:global(svg) {
|
||||||
|
display: block;
|
||||||
|
vertical-align: middle;
|
||||||
|
shape-rendering: auto;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
:global(pre) {
|
||||||
|
background-color: rgba(55, 65, 81, 1);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
color: rgba(229, 231, 235, 1);
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||||
|
'Liberation Mono', 'Courier New', monospace;
|
||||||
|
overflow: scroll;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page :global(.gutter-left) {
|
:global(.shadow) {
|
||||||
margin-left: 9px;
|
box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
:global(.rounded) {
|
||||||
.page :global(.col-span-2) {
|
border-radius: 1.5rem;
|
||||||
grid-column: span 2;
|
|
||||||
}
|
}
|
||||||
|
:global(.wrapper) {
|
||||||
.page :global(.flex) {
|
width: 100%;
|
||||||
display: flex;
|
}
|
||||||
|
:global(.container) {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 768px;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
color: rgba(55, 65, 81, 1);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
:global(#welcome) {
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
}
|
||||||
|
:global(#welcome h1) {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
:global(#welcome span) {
|
||||||
|
display: block;
|
||||||
|
font-size: 1.875rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 2.25rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
:global(#hero) {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
background-color: hsla(214, 62%, 21%, 1);
|
||||||
}
|
border: none;
|
||||||
|
box-sizing: border-box;
|
||||||
.page :global(header) {
|
color: rgba(55, 65, 81, 1);
|
||||||
background-color: #143055;
|
|
||||||
color: white;
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page :global(main) {
|
|
||||||
padding: 0 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page :global(p) {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page :global(h1) {
|
|
||||||
text-align: center;
|
|
||||||
margin-left: 18px;
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page :global(h2) {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 20px;
|
|
||||||
margin: 40px 0 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page :global(.resources) {
|
|
||||||
text-align: center;
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: 9px;
|
grid-template-columns: 1fr;
|
||||||
grid-template-columns: 1fr 1fr;
|
margin-top: 3.5rem;
|
||||||
}
|
}
|
||||||
|
:global(#hero .text-container) {
|
||||||
.page :global(.resource) {
|
color: rgba(255, 255, 255, 1);
|
||||||
color: #0094ba;
|
padding: 3rem 2rem;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
:global(#hero .text-container h2) {
|
||||||
.page :global(.resource:hover) {
|
font-size: 1.5rem;
|
||||||
background-color: rgba(68, 138, 255, 0.04);
|
line-height: 2rem;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
:global(#hero .text-container h2 svg) {
|
||||||
.page :global(pre) {
|
color: hsla(162, 47%, 50%, 1);
|
||||||
padding: 9px;
|
height: 2rem;
|
||||||
border-radius: 4px;
|
left: -0.25rem;
|
||||||
background-color: black;
|
position: absolute;
|
||||||
color: #eee;
|
top: 0;
|
||||||
|
width: 2rem;
|
||||||
}
|
}
|
||||||
|
:global(#hero .text-container h2 span) {
|
||||||
.page :global(details) {
|
margin-left: 2.5rem;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
:global(#hero .text-container a) {
|
||||||
.page :global(summary) {
|
background-color: rgba(255, 255, 255, 1);
|
||||||
outline: none;
|
border-radius: 0.75rem;
|
||||||
height: 36px;
|
color: rgba(55, 65, 81, 1);
|
||||||
line-height: 36px;
|
display: inline-block;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
text-decoration: inherit;
|
||||||
}
|
}
|
||||||
|
:global(#hero .logo-container) {
|
||||||
.page :global(.github-star-container) {
|
display: none;
|
||||||
margin-top: 12px;
|
justify-content: center;
|
||||||
line-height: 20px;
|
padding-left: 2rem;
|
||||||
|
padding-right: 2rem;
|
||||||
}
|
}
|
||||||
|
:global(#hero .logo-container svg) {
|
||||||
.page :global(.github-star-container a) {
|
color: rgba(255, 255, 255, 1);
|
||||||
display: flex;
|
width: 66.666667%;
|
||||||
|
}
|
||||||
|
:global(#middle-content) {
|
||||||
|
align-items: flex-start;
|
||||||
|
display: grid;
|
||||||
|
gap: 4rem;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
}
|
||||||
|
:global(#learning-materials) {
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
}
|
||||||
|
:global(#learning-materials h2) {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
:global(.list-item-link) {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-decoration: none;
|
border-radius: 0.75rem;
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page :global(.github-star-badge) {
|
|
||||||
color: #24292e;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
:global(.list-item-link svg:first-child) {
|
||||||
|
margin-right: 1rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
width: 1.5rem;
|
||||||
|
}
|
||||||
|
:global(.list-item-link > span) {
|
||||||
|
flex-grow: 1;
|
||||||
|
font-weight: 400;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
:global(.list-item-link > span > span) {
|
||||||
|
color: rgba(107, 114, 128, 1);
|
||||||
|
display: block;
|
||||||
|
flex-grow: 1;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1rem;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
:global(.list-item-link svg:last-child) {
|
||||||
|
height: 1rem;
|
||||||
|
transition-property: all;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
:global(.list-item-link:hover) {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
background-color: hsla(162, 47%, 50%, 1);
|
||||||
|
}
|
||||||
|
:global(.list-item-link:hover > span) {}
|
||||||
|
:global(.list-item-link:hover > span > span) {
|
||||||
|
color: rgba(243, 244, 246, 1);
|
||||||
|
}
|
||||||
|
:global(.list-item-link:hover svg:last-child) {
|
||||||
|
transform: translateX(0.25rem);
|
||||||
|
}
|
||||||
|
:global(#other-links) {}
|
||||||
|
:global(.button-pill) {
|
||||||
|
padding: 1.5rem 2rem;
|
||||||
|
transition-duration: 300ms;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 12px;
|
display: flex;
|
||||||
padding: 3px 10px;
|
|
||||||
border: 1px solid rgba(27, 31, 35, 0.2);
|
|
||||||
border-radius: 3px;
|
|
||||||
background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
|
|
||||||
margin-left: 4px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
}
|
||||||
|
:global(.button-pill svg) {
|
||||||
.page :global(.github-star-badge:hover) {
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
border-color: rgba(27, 31, 35, 0.35);
|
-webkit-backdrop-filter;
|
||||||
background-position: -0.5em;
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 3rem;
|
||||||
}
|
}
|
||||||
.page :global(.github-star-badge .material-icons) {
|
:global(.button-pill > span) {
|
||||||
height: 16px;
|
letter-spacing: -0.025em;
|
||||||
width: 16px;
|
font-weight: 400;
|
||||||
margin-right: 4px;
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
:global(.button-pill span span) {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
}
|
||||||
|
:global(.button-pill:hover sv)g,
|
||||||
|
:global(.button-pill:hover) {
|
||||||
|
color: rgba(255, 255, 255, 1) !important;
|
||||||
|
}
|
||||||
|
:global(#nx-console:hover) {
|
||||||
|
background-color: rgba(0, 122, 204, 1);
|
||||||
|
}
|
||||||
|
:global(#nx-console svg) {
|
||||||
|
color: rgba(0, 122, 204, 1);
|
||||||
|
}
|
||||||
|
:global(#nx-repo:hover) {
|
||||||
|
background-color: rgba(24, 23, 23, 1);
|
||||||
|
}
|
||||||
|
:global(#nx-repo svg) {
|
||||||
|
color: rgba(24, 23, 23, 1);
|
||||||
|
}
|
||||||
|
:global(#nx-cloud) {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
}
|
||||||
|
:global(#nx-cloud > div) {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
:global(#nx-cloud > div svg) {
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
:global(#nx-cloud > div h2) {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
:global(#nx-cloud > div h2 span) {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
}
|
||||||
|
:global(#nx-cloud p) {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
:global(#nx-cloud pre) {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
:global(#nx-cloud a) {
|
||||||
|
color: rgba(107, 114, 128, 1);
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
:global(#nx-cloud a:hover) {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
:global(#commands) {
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
}
|
||||||
|
:global(#commands h2) {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
:global(#commands p) {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
:global(details) {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
:global(details pre > span) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
:global(summary) {
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
font-weight: 400;
|
||||||
|
padding: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
:global(summary:hover) {
|
||||||
|
background-color: rgba(243, 244, 246, 1);
|
||||||
|
}
|
||||||
|
:global(summary svg) {
|
||||||
|
height: 1.5rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
}
|
||||||
|
:global(#love) {
|
||||||
|
color: rgba(107, 114, 128, 1);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
opacity: 0.6;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
:global(#love svg) {
|
||||||
|
color: rgba(252, 165, 165, 1);
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
display: inline;
|
||||||
|
margin-top: -0.25rem;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
:global(#hero) {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
:global(#hero .logo-container) {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
:global(#middle-content) {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,11 +1,816 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { ReactComponent as Logo } from './logo.svg';
|
|
||||||
import star from './star.svg';
|
|
||||||
|
|
||||||
export function Index() {
|
export function Index() {
|
||||||
return (
|
return (
|
||||||
<h1>Welcome to <%= projectName %>!</h1>
|
<>
|
||||||
|
<style
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: `
|
||||||
|
html {
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||||
|
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
|
||||||
|
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||||
|
'Noto Color Emoji';
|
||||||
|
line-height: 1.5;
|
||||||
|
tab-size: 4;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
p,
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
*,
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-width: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: currentColor;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2 {
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||||
|
'Liberation Mono', 'Courier New', monospace;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
vertical-align: middle;
|
||||||
|
shape-rendering: auto;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
background-color: rgba(55, 65, 81, 1);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
color: rgba(229, 231, 235, 1);
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||||
|
'Liberation Mono', 'Courier New', monospace;
|
||||||
|
overflow: scroll;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow {
|
||||||
|
box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
.rounded {
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
}
|
||||||
|
.wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 768px;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
color: rgba(55, 65, 81, 1);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#welcome {
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
}
|
||||||
|
#welcome h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
#welcome span {
|
||||||
|
display: block;
|
||||||
|
font-size: 1.875rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 2.25rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
#hero {
|
||||||
|
align-items: center;
|
||||||
|
background-color: hsla(214, 62%, 21%, 1);
|
||||||
|
border: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: rgba(55, 65, 81, 1);
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
}
|
||||||
|
#hero .text-container {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
padding: 3rem 2rem;
|
||||||
|
}
|
||||||
|
#hero .text-container h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#hero .text-container h2 svg {
|
||||||
|
color: hsla(162, 47%, 50%, 1);
|
||||||
|
height: 2rem;
|
||||||
|
left: -0.25rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 2rem;
|
||||||
|
}
|
||||||
|
#hero .text-container h2 span {
|
||||||
|
margin-left: 2.5rem;
|
||||||
|
}
|
||||||
|
#hero .text-container a {
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
color: rgba(55, 65, 81, 1);
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
#hero .logo-container {
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
padding-left: 2rem;
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
#hero .logo-container svg {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
width: 66.666667%;
|
||||||
|
}
|
||||||
|
#middle-content {
|
||||||
|
align-items: flex-start;
|
||||||
|
display: grid;
|
||||||
|
gap: 4rem;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
}
|
||||||
|
#learning-materials {
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
}
|
||||||
|
#learning-materials h2 {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
.list-item-link {
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.list-item-link svg:first-child {
|
||||||
|
margin-right: 1rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
width: 1.5rem;
|
||||||
|
}
|
||||||
|
.list-item-link > span {
|
||||||
|
flex-grow: 1;
|
||||||
|
font-weight: 400;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
.list-item-link > span > span {
|
||||||
|
color: rgba(107, 114, 128, 1);
|
||||||
|
display: block;
|
||||||
|
flex-grow: 1;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1rem;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
.list-item-link svg:last-child {
|
||||||
|
height: 1rem;
|
||||||
|
transition-property: all;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
.list-item-link:hover {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
background-color: hsla(162, 47%, 50%, 1);
|
||||||
|
}
|
||||||
|
.list-item-link:hover > span {}
|
||||||
|
.list-item-link:hover > span > span {
|
||||||
|
color: rgba(243, 244, 246, 1);
|
||||||
|
}
|
||||||
|
.list-item-link:hover svg:last-child {
|
||||||
|
transform: translateX(0.25rem);
|
||||||
|
}
|
||||||
|
#other-links {}
|
||||||
|
.button-pill {
|
||||||
|
padding: 1.5rem 2rem;
|
||||||
|
transition-duration: 300ms;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.button-pill svg {
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
.button-pill > span {
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
.button-pill span span {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
}
|
||||||
|
.button-pill:hover svg,
|
||||||
|
.button-pill:hover {
|
||||||
|
color: rgba(255, 255, 255, 1) !important;
|
||||||
|
}
|
||||||
|
#nx-console:hover {
|
||||||
|
background-color: rgba(0, 122, 204, 1);
|
||||||
|
}
|
||||||
|
#nx-console svg {
|
||||||
|
color: rgba(0, 122, 204, 1);
|
||||||
|
}
|
||||||
|
#nx-repo:hover {
|
||||||
|
background-color: rgba(24, 23, 23, 1);
|
||||||
|
}
|
||||||
|
#nx-repo svg {
|
||||||
|
color: rgba(24, 23, 23, 1);
|
||||||
|
}
|
||||||
|
#nx-cloud {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
}
|
||||||
|
#nx-cloud > div {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
#nx-cloud > div svg {
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
#nx-cloud > div h2 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
#nx-cloud > div h2 span {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
}
|
||||||
|
#nx-cloud p {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
#nx-cloud pre {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
#nx-cloud a {
|
||||||
|
color: rgba(107, 114, 128, 1);
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
#nx-cloud a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
#commands {
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
}
|
||||||
|
#commands h2 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
#commands p {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
details {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
details pre > span {
|
||||||
|
color: rgba(181, 181, 181, 1);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
summary {
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
font-weight: 400;
|
||||||
|
padding: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
summary:hover {
|
||||||
|
background-color: rgba(243, 244, 246, 1);
|
||||||
|
}
|
||||||
|
summary svg {
|
||||||
|
height: 1.5rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
}
|
||||||
|
#love {
|
||||||
|
color: rgba(107, 114, 128, 1);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
opacity: 0.6;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#love svg {
|
||||||
|
color: rgba(252, 165, 165, 1);
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
display: inline;
|
||||||
|
margin-top: -0.25rem;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
#hero {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
#hero .logo-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
#middle-content {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="wrapper">
|
||||||
|
<div className="container">
|
||||||
|
<div id="welcome">
|
||||||
|
<h1>
|
||||||
|
<span> Hello there, </span>
|
||||||
|
Welcome <%= projectName %> 👋
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="hero" className="rounded">
|
||||||
|
<div className="text-container">
|
||||||
|
<h2>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>You're up and running</span>
|
||||||
|
</h2>
|
||||||
|
<a href="#commands"> What's next? </a>
|
||||||
|
</div>
|
||||||
|
<div className="logo-container">
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="middle-content">
|
||||||
|
<div id="learning-materials" className="rounded shadow">
|
||||||
|
<h2>Learning materials</h2>
|
||||||
|
<a
|
||||||
|
href="https://nx.dev/getting-started/intro?utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="list-item-link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Documentation
|
||||||
|
<span> Everything is in there </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://blog.nrwl.io/?utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="list-item-link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Blog
|
||||||
|
<span> Changelog, features & events </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://www.youtube.com/c/Nrwl_io/videos?utm_source=nx-project&sub_confirmation=1"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="list-item-link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="currentColor"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<title>YouTube</title>
|
||||||
|
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
YouTube channel
|
||||||
|
<span> Nx Show, talks & tutorials </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://nx.dev/tutorial/01-create-application?utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="list-item-link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Interactive tutorials
|
||||||
|
<span> Create an app, step-by-step </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://nxplaybook.com/?utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="list-item-link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path d="M12 14l9-5-9-5-9 5 9 5z" />
|
||||||
|
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Video courses
|
||||||
|
<span> Nx custom courses </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div id="other-links">
|
||||||
|
<a
|
||||||
|
id="nx-console"
|
||||||
|
className="button-pill rounded shadow"
|
||||||
|
href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<title>Visual Studio Code</title>
|
||||||
|
<path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" />
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Install Nx Console
|
||||||
|
<span>Plugin for VSCode</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<div id="nx-cloud" className="rounded shadow">
|
||||||
|
<div>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 120 120"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z"
|
||||||
|
fill="#0E2039"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z"
|
||||||
|
fill="white"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<h2>
|
||||||
|
NxCloud
|
||||||
|
<span>
|
||||||
|
Enable faster CI & better DX
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
You can activate distributed tasks executions and caching by
|
||||||
|
running:
|
||||||
|
</p>
|
||||||
|
<pre>nx connect-to-nx-cloud</pre>
|
||||||
|
<a
|
||||||
|
href="https://nx.app/?utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
{' '}
|
||||||
|
What is Nx Cloud?{' '}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
id="nx-repo"
|
||||||
|
className="button-pill rounded shadow"
|
||||||
|
href="https://github.com/nrwl/nx?utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Nx is open source
|
||||||
|
<span> Love Nx? Give us a star! </span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="commands" className="rounded shadow">
|
||||||
|
<h2>Next steps</h2>
|
||||||
|
<p>Here are some things you can do with Nx:</p>
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Add UI library
|
||||||
|
</summary>
|
||||||
|
<pre>
|
||||||
|
<span># Generate UI lib</span>
|
||||||
|
nx g @nrwl/angular:lib ui
|
||||||
|
<span># Add a component</span>
|
||||||
|
nx g @nrwl/angular:component button --project ui
|
||||||
|
</pre>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
View interactive dependency graph
|
||||||
|
</summary>
|
||||||
|
<pre>nx dep-graph</pre>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Run affected commands
|
||||||
|
</summary>
|
||||||
|
<pre>
|
||||||
|
<span># see what's been affected by changes</span>
|
||||||
|
nx affected:dep-graph
|
||||||
|
<span># run tests for current changes</span>
|
||||||
|
nx affected:test
|
||||||
|
<span># run e2e tests for current changes</span>
|
||||||
|
nx affected:e2e
|
||||||
|
</pre>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p id="love">
|
||||||
|
Carefully crafted with
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
stroke="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -8,6 +8,6 @@ describe('Index', () => {
|
|||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
const props: any = {};
|
const props: any = {};
|
||||||
const { getByText } = render(<Index {...props} />);
|
const { getByText } = render(<Index {...props} />);
|
||||||
expect(getByText('Welcome to <%= projectName %>!')).toBeTruthy();
|
expect(getByText(/Welcome <%= projectName %>/gi)).toBeTruthy();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -8,9 +8,6 @@ import React from 'react';
|
|||||||
<% }
|
<% }
|
||||||
%>
|
%>
|
||||||
|
|
||||||
import { ReactComponent as Logo } from './logo.svg';
|
|
||||||
import star from './star.svg';
|
|
||||||
|
|
||||||
<% if (styledModule && styledModule !== 'styled-jsx') { %>
|
<% if (styledModule && styledModule !== 'styled-jsx') { %>
|
||||||
const StyledApp = styled.div`
|
const StyledApp = styled.div`
|
||||||
<%- pageWrapperStyle %>
|
<%- pageWrapperStyle %>
|
||||||
|
|||||||
@ -1,17 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="262px" height="163px" viewBox="0 0 262 163" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<g id="Styles-&-Quick-Wins" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="Nx---Quick-Wins" transform="translate(-476.000000, -1284.000000)" fill-rule="nonzero">
|
|
||||||
<g id="Logos" transform="translate(-11.000000, 782.000000)">
|
|
||||||
<g id="Nx_Flat_White" transform="translate(487.000000, 502.000000)">
|
|
||||||
<polygon id="Path" fill="#FFFFFF" points="130.68 104.59 97.49 52.71 97.44 96.3 40.24 0 0 0 0 162.57 39.79 162.57 39.92 66.39 96.53 158.26"/>
|
|
||||||
<polygon id="Path" fill="#FFFFFF" points="97.5 41.79 137.24 41.79 137.33 41.33 137.33 0 97.54 0 97.49 41.33"/>
|
|
||||||
<path d="M198.66,86.86 C189.139872,86.6795216 180.538723,92.516445 177.19,101.43 C182.764789,93.0931021 193.379673,89.7432211 202.73,93.37 C207.05,95.13 212.73,97.97 217.23,96.45 C212.950306,90.4438814 206.034895,86.8725952 198.66,86.86 L198.66,86.86 Z" id="Path" fill="#96D8E9"/>
|
|
||||||
<path d="M243.75,106.42 C243.75,101.55 241.1,100.42 235.6,98.42 C231.52,97 226.89,95.4 223.52,91 C222.86,90.13 222.25,89.15 221.6,88.11 C220.14382,85.4164099 218.169266,83.037429 215.79,81.11 C212.58,78.75 208.37,77.6 202.91,77.6 C191.954261,77.6076705 182.084192,84.2206169 177.91,94.35 C183.186964,87.0278244 191.956716,83.0605026 200.940147,83.9314609 C209.923578,84.8024193 217.767888,90.3805017 221.54,98.58 C223.424615,101.689762 227.141337,103.174819 230.65,102.22 C236.02,101.07 235.65,106.15 243.76,107.87 L243.75,106.42 Z" id="Path" fill="#48C4E5"/>
|
|
||||||
<path d="M261.46,105.38 L261.46,105.27 C261.34,73.03 235.17,45.45 202.91,45.45 C183.207085,45.4363165 164.821777,55.3450614 154,71.81 L153.79,71.45 L137.23,45.45 L97.5,45.4499858 L135.25,104.57 L98.41,162.57 L137,162.57 L153.79,136.78 L170.88,162.57 L209.48,162.57 L174.48,107.49 C173.899005,106.416838 173.583536,105.220114 173.56,104 C173.557346,96.2203871 176.64661,88.7586448 182.147627,83.2576275 C187.648645,77.7566101 195.110387,74.6673462 202.89,74.67 C219.11,74.67 221.82,84.37 225.32,88.93 C232.23,97.93 246.03,93.99 246.03,105.73 L246.03,105.73 C246.071086,108.480945 247.576662,111.001004 249.979593,112.340896 C252.382524,113.680787 255.317747,113.636949 257.679593,112.225896 C260.041438,110.814842 261.471086,108.250945 261.43,105.5 L261.43,105.5 L261.43,105.38 L261.46,105.38 Z" id="Path" fill="#FFFFFF"/>
|
|
||||||
<path d="M261.5,113.68 C261.892278,116.421801 261.504116,119.218653 260.38,121.75 C258.18,126.84 254.51,125.14 254.51,125.14 C254.51,125.14 251.35,123.6 253.27,120.65 C255.4,117.36 259.61,117.74 261.5,113.68 Z" id="Path" fill="#FFFFFF"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.7 KiB |
@ -1,11 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<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>
|
|
||||||
|
Before Width: | Height: | Size: 347 B |
File diff suppressed because it is too large
Load Diff
@ -1 +1 @@
|
|||||||
<%= pageStyleContent %>
|
<%- pageStyleContent %>
|
||||||
|
|||||||
@ -8,16 +8,9 @@ function CustomApp({ Component, pageProps }: AppProps) {
|
|||||||
<Head>
|
<Head>
|
||||||
<title>Welcome to <%= name %>!</title>
|
<title>Welcome to <%= name %>!</title>
|
||||||
</Head>
|
</Head>
|
||||||
<div className="app">
|
<main className="app">
|
||||||
<header className="flex">
|
|
||||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
||||||
<img src="/nx-logo-white.svg" alt="Nx logo" width="75" height="50" />
|
|
||||||
<h1>Welcome to <%= name %>!</h1>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<Component {...pageProps}/>
|
<Component {...pageProps}/>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
<%= styleContent %>
|
<%- styleContent %>
|
||||||
|
|||||||
@ -1,17 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="262px" height="163px" viewBox="0 0 262 163" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<g id="Styles-&-Quick-Wins" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="Nx---Quick-Wins" transform="translate(-476.000000, -1284.000000)" fill-rule="nonzero">
|
|
||||||
<g id="Logos" transform="translate(-11.000000, 782.000000)">
|
|
||||||
<g id="Nx_Flat_White" transform="translate(487.000000, 502.000000)">
|
|
||||||
<polygon id="Path" fill="#FFFFFF" points="130.68 104.59 97.49 52.71 97.44 96.3 40.24 0 0 0 0 162.57 39.79 162.57 39.92 66.39 96.53 158.26"/>
|
|
||||||
<polygon id="Path" fill="#FFFFFF" points="97.5 41.79 137.24 41.79 137.33 41.33 137.33 0 97.54 0 97.49 41.33"/>
|
|
||||||
<path d="M198.66,86.86 C189.139872,86.6795216 180.538723,92.516445 177.19,101.43 C182.764789,93.0931021 193.379673,89.7432211 202.73,93.37 C207.05,95.13 212.73,97.97 217.23,96.45 C212.950306,90.4438814 206.034895,86.8725952 198.66,86.86 L198.66,86.86 Z" id="Path" fill="#96D8E9"/>
|
|
||||||
<path d="M243.75,106.42 C243.75,101.55 241.1,100.42 235.6,98.42 C231.52,97 226.89,95.4 223.52,91 C222.86,90.13 222.25,89.15 221.6,88.11 C220.14382,85.4164099 218.169266,83.037429 215.79,81.11 C212.58,78.75 208.37,77.6 202.91,77.6 C191.954261,77.6076705 182.084192,84.2206169 177.91,94.35 C183.186964,87.0278244 191.956716,83.0605026 200.940147,83.9314609 C209.923578,84.8024193 217.767888,90.3805017 221.54,98.58 C223.424615,101.689762 227.141337,103.174819 230.65,102.22 C236.02,101.07 235.65,106.15 243.76,107.87 L243.75,106.42 Z" id="Path" fill="#48C4E5"/>
|
|
||||||
<path d="M261.46,105.38 L261.46,105.27 C261.34,73.03 235.17,45.45 202.91,45.45 C183.207085,45.4363165 164.821777,55.3450614 154,71.81 L153.79,71.45 L137.23,45.45 L97.5,45.4499858 L135.25,104.57 L98.41,162.57 L137,162.57 L153.79,136.78 L170.88,162.57 L209.48,162.57 L174.48,107.49 C173.899005,106.416838 173.583536,105.220114 173.56,104 C173.557346,96.2203871 176.64661,88.7586448 182.147627,83.2576275 C187.648645,77.7566101 195.110387,74.6673462 202.89,74.67 C219.11,74.67 221.82,84.37 225.32,88.93 C232.23,97.93 246.03,93.99 246.03,105.73 L246.03,105.73 C246.071086,108.480945 247.576662,111.001004 249.979593,112.340896 C252.382524,113.680787 255.317747,113.636949 257.679593,112.225896 C260.041438,110.814842 261.471086,108.250945 261.43,105.5 L261.43,105.5 L261.43,105.38 L261.46,105.38 Z" id="Path" fill="#FFFFFF"/>
|
|
||||||
<path d="M261.5,113.68 C261.892278,116.421801 261.504116,119.218653 260.38,121.75 C258.18,126.84 254.51,125.14 254.51,125.14 C254.51,125.14 251.35,123.6 253.27,120.65 C255.4,117.36 259.61,117.74 261.5,113.68 Z" id="Path" fill="#FFFFFF"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.8 KiB |
@ -1,11 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<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>
|
|
||||||
|
Before Width: | Height: | Size: 347 B |
@ -1,208 +1,790 @@
|
|||||||
export function createAppJsx(name: string) {
|
export function createAppJsx(name: string) {
|
||||||
return `
|
return `
|
||||||
<h2>Resources & Tools</h2>
|
<div className="wrapper">
|
||||||
<p>
|
<div className="container">
|
||||||
Thank you for using and showing some ♥ for Nx.
|
<div id="welcome">
|
||||||
</p>
|
<h1>
|
||||||
<div className="flex github-star-container">
|
<span> Hello there, </span>
|
||||||
<a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
|
Welcome ${name} 👋
|
||||||
<div className="github-star-badge">
|
</h1>
|
||||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
||||||
<img src="/star.svg" className="material-icons" alt="" />
|
|
||||||
Star
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
|
||||||
</div>
|
<div id="hero" className="rounded">
|
||||||
<p>
|
<div className="text-container">
|
||||||
Here are some links to help you get started.
|
<h2>
|
||||||
</p>
|
<svg
|
||||||
<ul className="resources">
|
fill="none"
|
||||||
<li className="col-span-2">
|
stroke="currentColor"
|
||||||
<a
|
viewBox="0 0 24 24"
|
||||||
className="resource flex"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
|
|
||||||
>
|
>
|
||||||
Scale React Development with Nx (Course)
|
<path
|
||||||
</a>
|
strokeLinecap="round"
|
||||||
</li>
|
strokeLinejoin="round"
|
||||||
<li className="col-span-2">
|
strokeWidth="2"
|
||||||
<a
|
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
|
||||||
className="resource flex"
|
/>
|
||||||
href="https://nx.dev/latest/react/tutorial/01-create-application"
|
</svg>
|
||||||
>
|
<span>You're up and running</span>
|
||||||
Interactive tutorial
|
</h2>
|
||||||
</a>
|
<a href="#commands"> What's next? </a>
|
||||||
</li>
|
</div>
|
||||||
<li className="col-span-2">
|
<div className="logo-container">
|
||||||
<a className="resource flex" href="https://nx.app/">
|
<svg
|
||||||
<svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
fill="currentColor"
|
||||||
<path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
|
role="img"
|
||||||
<path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="middle-content">
|
||||||
|
<div id="learning-materials" className="rounded shadow">
|
||||||
|
<h2>Learning materials</h2>
|
||||||
|
<a
|
||||||
|
href="https://nx.dev/getting-started/intro?utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="list-item-link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Documentation
|
||||||
|
<span> Everything is in there </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<span className="gutter-left">Nx Cloud</span>
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
<a
|
||||||
</ul>
|
href="https://blog.nrwl.io/?utm_source=nx-project"
|
||||||
<h2>Next Steps</h2>
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="list-item-link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Blog
|
||||||
|
<span> Changelog, features & events </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://www.youtube.com/c/Nrwl_io/videos?utm_source=nx-project&sub_confirmation=1"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="list-item-link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="currentColor"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<title>YouTube</title>
|
||||||
|
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
YouTube channel
|
||||||
|
<span> Nx Show, talks & tutorials </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://nx.dev/tutorial/01-create-application?utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="list-item-link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Interactive tutorials
|
||||||
|
<span> Create an app, step-by-step </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://nxplaybook.com/?utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="list-item-link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path d="M12 14l9-5-9-5-9 5 9 5z" />
|
||||||
|
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Video courses
|
||||||
|
<span> Nx custom courses </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div id="other-links">
|
||||||
|
<a
|
||||||
|
id="nx-console"
|
||||||
|
className="button-pill rounded shadow"
|
||||||
|
href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<title>Visual Studio Code</title>
|
||||||
|
<path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" />
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Install Nx Console
|
||||||
|
<span>Plugin for VSCode</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<div id="nx-cloud" className="rounded shadow">
|
||||||
|
<div>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 120 120"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z"
|
||||||
|
fill="#0E2039"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z"
|
||||||
|
fill="white"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<h2>
|
||||||
|
NxCloud
|
||||||
|
<span>
|
||||||
|
Enable faster CI & better DX
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
<p>
|
<p>
|
||||||
Here are some things you can do with Nx.
|
You can activate distributed tasks executions and caching by
|
||||||
|
running:
|
||||||
</p>
|
</p>
|
||||||
<details open>
|
<pre>nx connect-to-nx-cloud</pre>
|
||||||
<summary>Add UI library</summary>
|
<a
|
||||||
<pre>{\`# Generate UI lib
|
href="https://nx.app/?utm_source=nx-project"
|
||||||
nx g @nrwl/react:lib ui
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
{' '}
|
||||||
|
What is Nx Cloud?{' '}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
id="nx-repo"
|
||||||
|
className="button-pill rounded shadow"
|
||||||
|
href="https://github.com/nrwl/nx?utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Nx is open source
|
||||||
|
<span> Love Nx? Give us a star! </span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
# Add a component
|
<div id="commands" className="rounded shadow">
|
||||||
nx g @nrwl/react:component xyz --project ui\`}</pre>
|
<h2>Next steps</h2>
|
||||||
|
<p>Here are some things you can do with Nx:</p>
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Add UI library
|
||||||
|
</summary>
|
||||||
|
<pre>
|
||||||
|
<span># Generate UI lib</span>
|
||||||
|
nx g @nrwl/angular:lib ui
|
||||||
|
<span># Add a component</span>
|
||||||
|
nx g @nrwl/angular:component button --project ui
|
||||||
|
</pre>
|
||||||
</details>
|
</details>
|
||||||
<details>
|
<details>
|
||||||
<summary>View dependency graph</summary>
|
<summary>
|
||||||
<pre>{\`nx dep-graph\`}</pre>
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
View interactive dependency graph
|
||||||
|
</summary>
|
||||||
|
<pre>nx dep-graph</pre>
|
||||||
</details>
|
</details>
|
||||||
<details>
|
<details>
|
||||||
<summary>Run affected commands</summary>
|
<summary>
|
||||||
<pre>{\`# see what's been affected by changes
|
<svg
|
||||||
nx affected:dep-graph
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
# run tests for current changes
|
viewBox="0 0 24 24"
|
||||||
nx affected:test
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
# run e2e tests for current changes
|
<path
|
||||||
nx affected:e2e
|
strokeLinecap="round"
|
||||||
\`}</pre>
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Run affected commands
|
||||||
|
</summary>
|
||||||
|
<pre>
|
||||||
|
<span># see what's been affected by changes</span>
|
||||||
|
nx affected:dep-graph
|
||||||
|
<span># run tests for current changes</span>
|
||||||
|
nx affected:test
|
||||||
|
<span># run e2e tests for current changes</span>
|
||||||
|
nx affected:e2e
|
||||||
|
</pre>
|
||||||
</details>
|
</details>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p id="love">
|
||||||
|
Carefully crafted with
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
stroke="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function createStyleRules() {
|
export function createStyleRules() {
|
||||||
return `
|
return `
|
||||||
.app {
|
html {
|
||||||
font-family: sans-serif;
|
-webkit-text-size-adjust: 100%;
|
||||||
min-width: 300px;
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||||
max-width: 600px;
|
line-height: 1.5;
|
||||||
margin: 50px auto;
|
tab-size: 4;
|
||||||
}
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
p,
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
*,
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-width: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: currentColor;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2 {
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
vertical-align: middle;
|
||||||
|
shape-rendering: auto;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
background-color: rgba(55, 65, 81, 1);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
color: rgba(229, 231, 235, 1);
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
|
||||||
|
overflow: scroll;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.app .gutter-left {
|
.shadow {
|
||||||
margin-left: 9px;
|
box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
.rounded {
|
||||||
.app .col-span-2 {
|
border-radius: 1.5rem;
|
||||||
grid-column: span 2;
|
}
|
||||||
}
|
.wrapper {
|
||||||
|
width: 100%;
|
||||||
.app .flex {
|
}
|
||||||
display: flex;
|
.container {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 768px;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
color: rgba(55, 65, 81, 1);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#welcome {
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
}
|
||||||
|
#welcome h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
#welcome span {
|
||||||
|
display: block;
|
||||||
|
font-size: 1.875rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 2.25rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
#hero {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
background-color: hsla(214, 62%, 21%, 1);
|
||||||
}
|
border: none;
|
||||||
|
box-sizing: border-box;
|
||||||
.app header {
|
color: rgba(55, 65, 81, 1);
|
||||||
background-color: #143055;
|
|
||||||
color: white;
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app main {
|
|
||||||
padding: 0 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app p {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app h1 {
|
|
||||||
text-align: center;
|
|
||||||
margin-left: 18px;
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app h2 {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 20px;
|
|
||||||
margin: 40px 0 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app .resources {
|
|
||||||
text-align: center;
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: 9px;
|
grid-template-columns: 1fr;
|
||||||
grid-template-columns: 1fr 1fr;
|
margin-top: 3.5rem;
|
||||||
}
|
}
|
||||||
|
#hero .text-container {
|
||||||
.app .resource {
|
color: rgba(255, 255, 255, 1);
|
||||||
color: #0094ba;
|
padding: 3rem 2rem;
|
||||||
height: 36px;
|
}
|
||||||
background-color: rgba(0, 0, 0, 0);
|
#hero .text-container h2 {
|
||||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
font-size: 1.5rem;
|
||||||
border-radius: 4px;
|
line-height: 2rem;
|
||||||
padding: 3px 9px;
|
position: relative;
|
||||||
text-decoration: none;
|
}
|
||||||
}
|
#hero .text-container h2 svg {
|
||||||
|
color: hsla(162, 47%, 50%, 1);
|
||||||
.app .resource:hover {
|
height: 2rem;
|
||||||
background-color: rgba(68, 138, 255, 0.04);
|
left: -0.25rem;
|
||||||
}
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
.app pre {
|
width: 2rem;
|
||||||
padding: 9px;
|
}
|
||||||
border-radius: 4px;
|
#hero .text-container h2 span {
|
||||||
background-color: black;
|
margin-left: 2.5rem;
|
||||||
color: #eee;
|
}
|
||||||
}
|
#hero .text-container a {
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
.app details {
|
border-radius: 0.75rem;
|
||||||
border-radius: 4px;
|
color: rgba(55, 65, 81, 1);
|
||||||
color: #333;
|
display: inline-block;
|
||||||
background-color: rgba(0, 0, 0, 0);
|
margin-top: 1.5rem;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
padding: 1rem 2rem;
|
||||||
padding: 3px 9px;
|
text-decoration: inherit;
|
||||||
margin-bottom: 9px;
|
}
|
||||||
}
|
#hero .logo-container {
|
||||||
|
display: none;
|
||||||
.app summary {
|
justify-content: center;
|
||||||
outline: none;
|
padding-left: 2rem;
|
||||||
height: 36px;
|
padding-right: 2rem;
|
||||||
line-height: 36px;
|
}
|
||||||
}
|
#hero .logo-container svg {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
.app .github-star-container {
|
width: 66.666667%;
|
||||||
margin-top: 12px;
|
}
|
||||||
line-height: 20px;
|
#middle-content {
|
||||||
}
|
align-items: flex-start;
|
||||||
|
display: grid;
|
||||||
.app .github-star-container a {
|
gap: 4rem;
|
||||||
display: flex;
|
grid-template-columns: 1fr;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
}
|
||||||
|
#learning-materials {
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
}
|
||||||
|
#learning-materials h2 {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
.list-item-link {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-decoration: none;
|
border-radius: 0.75rem;
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app .github-star-badge {
|
|
||||||
color: #24292e;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.list-item-link svg:first-child {
|
||||||
|
margin-right: 1rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
width: 1.5rem;
|
||||||
|
}
|
||||||
|
.list-item-link > span {
|
||||||
|
flex-grow: 1;
|
||||||
|
font-weight: 400;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
.list-item-link > span > span {
|
||||||
|
color: rgba(107, 114, 128, 1);
|
||||||
|
display: block;
|
||||||
|
flex-grow: 1;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1rem;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
.list-item-link svg:last-child {
|
||||||
|
height: 1rem;
|
||||||
|
transition-property: all;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
.list-item-link:hover {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
background-color: hsla(162, 47%, 50%, 1);
|
||||||
|
}
|
||||||
|
.list-item-link:hover > span {}
|
||||||
|
.list-item-link:hover > span > span {
|
||||||
|
color: rgba(243, 244, 246, 1);
|
||||||
|
}
|
||||||
|
.list-item-link:hover svg:last-child {
|
||||||
|
transform: translateX(0.25rem);
|
||||||
|
}
|
||||||
|
#other-links {}
|
||||||
|
.button-pill {
|
||||||
|
padding: 1.5rem 2rem;
|
||||||
|
transition-duration: 300ms;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 12px;
|
display: flex;
|
||||||
padding: 3px 10px;
|
}
|
||||||
border: 1px solid rgba(27,31,35,.2);
|
.button-pill svg {
|
||||||
border-radius: 3px;
|
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||||
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
margin-left: 4px;
|
transition-duration: 150ms;
|
||||||
font-weight: 600;
|
flex-shrink: 0;
|
||||||
}
|
width: 3rem;
|
||||||
|
}
|
||||||
.app .github-star-badge:hover {
|
.button-pill > span {
|
||||||
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
|
letter-spacing: -0.025em;
|
||||||
border-color: rgba(27,31,35,.35);
|
font-weight: 400;
|
||||||
background-position: -.5em;
|
font-size: 1.125rem;
|
||||||
}
|
line-height: 1.75rem;
|
||||||
.app .github-star-badge .material-icons {
|
padding-left: 1rem;
|
||||||
height: 16px;
|
padding-right: 1rem;
|
||||||
width: 16px;
|
}
|
||||||
margin-right: 4px;
|
.button-pill span span {
|
||||||
}
|
display: block;
|
||||||
`;
|
font-size: 0.875rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
}
|
||||||
|
.button-pill:hover svg,
|
||||||
|
.button-pill:hover {
|
||||||
|
color: rgba(255, 255, 255, 1) !important;
|
||||||
|
}
|
||||||
|
#nx-console:hover {
|
||||||
|
background-color: rgba(0, 122, 204, 1);
|
||||||
|
}
|
||||||
|
#nx-console svg {
|
||||||
|
color: rgba(0, 122, 204, 1);
|
||||||
|
}
|
||||||
|
#nx-repo:hover {
|
||||||
|
background-color: rgba(24, 23, 23, 1);
|
||||||
|
}
|
||||||
|
#nx-repo svg {
|
||||||
|
color: rgba(24, 23, 23, 1);
|
||||||
|
}
|
||||||
|
#nx-cloud {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
}
|
||||||
|
#nx-cloud > div {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
#nx-cloud > div svg {
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
#nx-cloud > div h2 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
#nx-cloud > div h2 span {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
}
|
||||||
|
#nx-cloud p {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
#nx-cloud pre {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
#nx-cloud a {
|
||||||
|
color: rgba(107, 114, 128, 1);
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
#nx-cloud a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
#commands {
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
}
|
||||||
|
#commands h2 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
#commands p {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
details {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
details pre > span {
|
||||||
|
color: rgba(181, 181, 181, 1);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
summary {
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
font-weight: 400;
|
||||||
|
padding: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
summary:hover {
|
||||||
|
background-color: rgba(243, 244, 246, 1);
|
||||||
|
}
|
||||||
|
summary svg {
|
||||||
|
height: 1.5rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
}
|
||||||
|
#love {
|
||||||
|
color: rgba(107, 114, 128, 1);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
opacity: 0.6;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#love svg {
|
||||||
|
color: rgba(252, 165, 165, 1);
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
display: inline;
|
||||||
|
margin-top: -0.25rem;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
#hero {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
#hero .logo-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
#middle-content {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,14 +4,7 @@ import {
|
|||||||
createAppJsx,
|
createAppJsx,
|
||||||
createStyleRules,
|
createStyleRules,
|
||||||
} from './create-application-files.helpers';
|
} from './create-application-files.helpers';
|
||||||
import {
|
import { generateFiles, names, offsetFromRoot, toJS, Tree } from '@nrwl/devkit';
|
||||||
generateFiles,
|
|
||||||
names,
|
|
||||||
offsetFromRoot,
|
|
||||||
toJS,
|
|
||||||
Tree,
|
|
||||||
updateTsConfigsToJs,
|
|
||||||
} from '@nrwl/devkit';
|
|
||||||
|
|
||||||
export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
|
export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
|
||||||
const templateVariables = {
|
const templateVariables = {
|
||||||
|
|||||||
@ -219,7 +219,10 @@ Object {
|
|||||||
|
|
||||||
expect(
|
expect(
|
||||||
appTree.read('apps/my-dir/my-app/src/app/app.tsx').toString()
|
appTree.read('apps/my-dir/my-app/src/app/app.tsx').toString()
|
||||||
).toContain('Welcome to my-dir-my-app');
|
).toContain(`<NxWelcome title="my-dir-my-app"/>`);
|
||||||
|
expect(
|
||||||
|
appTree.read('apps/my-dir/my-app/src/app/nx-welcome.tsx').toString()
|
||||||
|
).toContain('Hello there');
|
||||||
});
|
});
|
||||||
|
|
||||||
it.each`
|
it.each`
|
||||||
|
|||||||
@ -21,6 +21,6 @@ describe('App', () => {
|
|||||||
<% } else { %>
|
<% } else { %>
|
||||||
const { getByText } = render(<App />);
|
const { getByText } = render(<App />);
|
||||||
<% } %>
|
<% } %>
|
||||||
expect(getByText('Welcome to <%= projectName %>!')).toBeTruthy();
|
expect(getByText(/Welcome <%= projectName %>/gi)).toBeTruthy();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,17 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="262px" height="163px" viewBox="0 0 262 163" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<g id="Styles-&-Quick-Wins" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="Nx---Quick-Wins" transform="translate(-476.000000, -1284.000000)" fill-rule="nonzero">
|
|
||||||
<g id="Logos" transform="translate(-11.000000, 782.000000)">
|
|
||||||
<g id="Nx_Flat_White" transform="translate(487.000000, 502.000000)">
|
|
||||||
<polygon id="Path" fill="#FFFFFF" points="130.68 104.59 97.49 52.71 97.44 96.3 40.24 0 0 0 0 162.57 39.79 162.57 39.92 66.39 96.53 158.26"></polygon>
|
|
||||||
<polygon id="Path" fill="#FFFFFF" points="97.5 41.79 137.24 41.79 137.33 41.33 137.33 0 97.54 0 97.49 41.33"></polygon>
|
|
||||||
<path d="M198.66,86.86 C189.139872,86.6795216 180.538723,92.516445 177.19,101.43 C182.764789,93.0931021 193.379673,89.7432211 202.73,93.37 C207.05,95.13 212.73,97.97 217.23,96.45 C212.950306,90.4438814 206.034895,86.8725952 198.66,86.86 L198.66,86.86 Z" id="Path" fill="#96D8E9"></path>
|
|
||||||
<path d="M243.75,106.42 C243.75,101.55 241.1,100.42 235.6,98.42 C231.52,97 226.89,95.4 223.52,91 C222.86,90.13 222.25,89.15 221.6,88.11 C220.14382,85.4164099 218.169266,83.037429 215.79,81.11 C212.58,78.75 208.37,77.6 202.91,77.6 C191.954261,77.6076705 182.084192,84.2206169 177.91,94.35 C183.186964,87.0278244 191.956716,83.0605026 200.940147,83.9314609 C209.923578,84.8024193 217.767888,90.3805017 221.54,98.58 C223.424615,101.689762 227.141337,103.174819 230.65,102.22 C236.02,101.07 235.65,106.15 243.76,107.87 L243.75,106.42 Z" id="Path" fill="#48C4E5"></path>
|
|
||||||
<path d="M261.46,105.38 L261.46,105.27 C261.34,73.03 235.17,45.45 202.91,45.45 C183.207085,45.4363165 164.821777,55.3450614 154,71.81 L153.79,71.45 L137.23,45.45 L97.5,45.4499858 L135.25,104.57 L98.41,162.57 L137,162.57 L153.79,136.78 L170.88,162.57 L209.48,162.57 L174.48,107.49 C173.899005,106.416838 173.583536,105.220114 173.56,104 C173.557346,96.2203871 176.64661,88.7586448 182.147627,83.2576275 C187.648645,77.7566101 195.110387,74.6673462 202.89,74.67 C219.11,74.67 221.82,84.37 225.32,88.93 C232.23,97.93 246.03,93.99 246.03,105.73 L246.03,105.73 C246.071086,108.480945 247.576662,111.001004 249.979593,112.340896 C252.382524,113.680787 255.317747,113.636949 257.679593,112.225896 C260.041438,110.814842 261.471086,108.250945 261.43,105.5 L261.43,105.5 L261.43,105.38 L261.46,105.38 Z" id="Path" fill="#FFFFFF"></path>
|
|
||||||
<path d="M261.5,113.68 C261.892278,116.421801 261.504116,119.218653 260.38,121.75 C258.18,126.84 254.51,125.14 254.51,125.14 C254.51,125.14 251.35,123.6 253.27,120.65 C255.4,117.36 259.61,117.74 261.5,113.68 Z" id="Path" fill="#FFFFFF"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.9 KiB |
@ -0,0 +1,820 @@
|
|||||||
|
/*
|
||||||
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
This is a starter component and can be deleted.
|
||||||
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
Delete this file and get started with your project!
|
||||||
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
*/
|
||||||
|
export function NxWelcome({ title }: { title: string }) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<style
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: `
|
||||||
|
html {
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||||
|
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
|
||||||
|
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||||
|
'Noto Color Emoji';
|
||||||
|
line-height: 1.5;
|
||||||
|
tab-size: 4;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
p,
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
*,
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-width: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: currentColor;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2 {
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||||
|
'Liberation Mono', 'Courier New', monospace;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
vertical-align: middle;
|
||||||
|
shape-rendering: auto;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
background-color: rgba(55, 65, 81, 1);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
color: rgba(229, 231, 235, 1);
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||||
|
'Liberation Mono', 'Courier New', monospace;
|
||||||
|
overflow: scroll;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow {
|
||||||
|
box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
.rounded {
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
}
|
||||||
|
.wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 768px;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
color: rgba(55, 65, 81, 1);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#welcome {
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
}
|
||||||
|
#welcome h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
#welcome span {
|
||||||
|
display: block;
|
||||||
|
font-size: 1.875rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 2.25rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
#hero {
|
||||||
|
align-items: center;
|
||||||
|
background-color: hsla(214, 62%, 21%, 1);
|
||||||
|
border: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: rgba(55, 65, 81, 1);
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
}
|
||||||
|
#hero .text-container {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
padding: 3rem 2rem;
|
||||||
|
}
|
||||||
|
#hero .text-container h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#hero .text-container h2 svg {
|
||||||
|
color: hsla(162, 47%, 50%, 1);
|
||||||
|
height: 2rem;
|
||||||
|
left: -0.25rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 2rem;
|
||||||
|
}
|
||||||
|
#hero .text-container h2 span {
|
||||||
|
margin-left: 2.5rem;
|
||||||
|
}
|
||||||
|
#hero .text-container a {
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
color: rgba(55, 65, 81, 1);
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
#hero .logo-container {
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
padding-left: 2rem;
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
#hero .logo-container svg {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
width: 66.666667%;
|
||||||
|
}
|
||||||
|
#middle-content {
|
||||||
|
align-items: flex-start;
|
||||||
|
display: grid;
|
||||||
|
gap: 4rem;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
}
|
||||||
|
#learning-materials {
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
}
|
||||||
|
#learning-materials h2 {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
.list-item-link {
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.list-item-link svg:first-child {
|
||||||
|
margin-right: 1rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
width: 1.5rem;
|
||||||
|
}
|
||||||
|
.list-item-link > span {
|
||||||
|
flex-grow: 1;
|
||||||
|
font-weight: 400;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
.list-item-link > span > span {
|
||||||
|
color: rgba(107, 114, 128, 1);
|
||||||
|
display: block;
|
||||||
|
flex-grow: 1;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1rem;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
.list-item-link svg:last-child {
|
||||||
|
height: 1rem;
|
||||||
|
transition-property: all;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
.list-item-link:hover {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
background-color: hsla(162, 47%, 50%, 1);
|
||||||
|
}
|
||||||
|
.list-item-link:hover > span {}
|
||||||
|
.list-item-link:hover > span > span {
|
||||||
|
color: rgba(243, 244, 246, 1);
|
||||||
|
}
|
||||||
|
.list-item-link:hover svg:last-child {
|
||||||
|
transform: translateX(0.25rem);
|
||||||
|
}
|
||||||
|
#other-links {}
|
||||||
|
.button-pill {
|
||||||
|
padding: 1.5rem 2rem;
|
||||||
|
transition-duration: 300ms;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.button-pill svg {
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
.button-pill > span {
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
.button-pill span span {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
}
|
||||||
|
.button-pill:hover svg,
|
||||||
|
.button-pill:hover {
|
||||||
|
color: rgba(255, 255, 255, 1) !important;
|
||||||
|
}
|
||||||
|
#nx-console:hover {
|
||||||
|
background-color: rgba(0, 122, 204, 1);
|
||||||
|
}
|
||||||
|
#nx-console svg {
|
||||||
|
color: rgba(0, 122, 204, 1);
|
||||||
|
}
|
||||||
|
#nx-repo:hover {
|
||||||
|
background-color: rgba(24, 23, 23, 1);
|
||||||
|
}
|
||||||
|
#nx-repo svg {
|
||||||
|
color: rgba(24, 23, 23, 1);
|
||||||
|
}
|
||||||
|
#nx-cloud {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
}
|
||||||
|
#nx-cloud > div {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
#nx-cloud > div svg {
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
#nx-cloud > div h2 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
#nx-cloud > div h2 span {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
}
|
||||||
|
#nx-cloud p {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
#nx-cloud pre {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
#nx-cloud a {
|
||||||
|
color: rgba(107, 114, 128, 1);
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
#nx-cloud a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
#commands {
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
}
|
||||||
|
#commands h2 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
#commands p {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
details {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
details pre > span {
|
||||||
|
color: rgba(181, 181, 181, 1);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
summary {
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
font-weight: 400;
|
||||||
|
padding: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
summary:hover {
|
||||||
|
background-color: rgba(243, 244, 246, 1);
|
||||||
|
}
|
||||||
|
summary svg {
|
||||||
|
height: 1.5rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
}
|
||||||
|
#love {
|
||||||
|
color: rgba(107, 114, 128, 1);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
opacity: 0.6;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#love svg {
|
||||||
|
color: rgba(252, 165, 165, 1);
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
display: inline;
|
||||||
|
margin-top: -0.25rem;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
#hero {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
#hero .logo-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
#middle-content {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="wrapper">
|
||||||
|
<div className="container">
|
||||||
|
<div id="welcome">
|
||||||
|
<h1>
|
||||||
|
<span> Hello there, </span>
|
||||||
|
Welcome {title} 👋
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="hero" className="rounded">
|
||||||
|
<div className="text-container">
|
||||||
|
<h2>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>You're up and running</span>
|
||||||
|
</h2>
|
||||||
|
<a href="#commands"> What's next? </a>
|
||||||
|
</div>
|
||||||
|
<div className="logo-container">
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="middle-content">
|
||||||
|
<div id="learning-materials" className="rounded shadow">
|
||||||
|
<h2>Learning materials</h2>
|
||||||
|
<a
|
||||||
|
href="https://nx.dev/getting-started/intro?utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="list-item-link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Documentation
|
||||||
|
<span> Everything is in there </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://blog.nrwl.io/?utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="list-item-link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Blog
|
||||||
|
<span> Changelog, features & events </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://www.youtube.com/c/Nrwl_io/videos?utm_source=nx-project&sub_confirmation=1"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="list-item-link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="currentColor"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<title>YouTube</title>
|
||||||
|
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
YouTube channel
|
||||||
|
<span> Nx Show, talks & tutorials </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://nx.dev/tutorial/01-create-application?utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="list-item-link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Interactive tutorials
|
||||||
|
<span> Create an app, step-by-step </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://nxplaybook.com/?utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="list-item-link"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path d="M12 14l9-5-9-5-9 5 9 5z" />
|
||||||
|
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Video courses
|
||||||
|
<span> Nx custom courses </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div id="other-links">
|
||||||
|
<a
|
||||||
|
id="nx-console"
|
||||||
|
className="button-pill rounded shadow"
|
||||||
|
href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<title>Visual Studio Code</title>
|
||||||
|
<path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" />
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Install Nx Console
|
||||||
|
<span>Plugin for VSCode</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<div id="nx-cloud" className="rounded shadow">
|
||||||
|
<div>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 120 120"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z"
|
||||||
|
fill="#0E2039"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z"
|
||||||
|
fill="white"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<h2>
|
||||||
|
NxCloud
|
||||||
|
<span>Enable faster CI & better DX</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
You can activate distributed tasks executions and caching by
|
||||||
|
running:
|
||||||
|
</p>
|
||||||
|
<pre>nx connect-to-nx-cloud</pre>
|
||||||
|
<a
|
||||||
|
href="https://nx.app/?utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
{' '}
|
||||||
|
What is Nx Cloud?{' '}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
id="nx-repo"
|
||||||
|
className="button-pill rounded shadow"
|
||||||
|
href="https://github.com/nrwl/nx?utm_source=nx-project"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Nx is open source
|
||||||
|
<span> Love Nx? Give us a star! </span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="commands" className="rounded shadow">
|
||||||
|
<h2>Next steps</h2>
|
||||||
|
<p>Here are some things you can do with Nx:</p>
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Add UI library
|
||||||
|
</summary>
|
||||||
|
<pre>
|
||||||
|
<span># Generate UI lib</span>
|
||||||
|
nx g @nrwl/angular:lib ui
|
||||||
|
<span># Add a component</span>
|
||||||
|
nx g @nrwl/angular:component button --project ui
|
||||||
|
</pre>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
View interactive dependency graph
|
||||||
|
</summary>
|
||||||
|
<pre>nx dep-graph</pre>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Run affected commands
|
||||||
|
</summary>
|
||||||
|
<pre>
|
||||||
|
<span># see what's been affected by changes</span>
|
||||||
|
nx affected:dep-graph
|
||||||
|
<span># run tests for current changes</span>
|
||||||
|
nx affected:test
|
||||||
|
<span># run e2e tests for current changes</span>
|
||||||
|
nx affected:e2e
|
||||||
|
</pre>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p id="love">
|
||||||
|
Carefully crafted with
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
stroke="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NxWelcome;
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<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>
|
|
||||||
|
Before Width: | Height: | Size: 347 B |
@ -1,128 +1 @@
|
|||||||
.app {
|
/* Your styles goes here. */
|
||||||
font-family: sans-serif;
|
|
||||||
min-width: 300px;
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 50px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(.gutter-left) {
|
|
||||||
margin-left: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(.col-span-2) {
|
|
||||||
grid-column: span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(.flex) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(header) {
|
|
||||||
background-color: #143055;
|
|
||||||
color: white;
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(main) {
|
|
||||||
padding: 0 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(p) {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(h1) {
|
|
||||||
text-align: center;
|
|
||||||
margin-left: 18px;
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(h2) {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 20px;
|
|
||||||
margin: 40px 0 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(.resources) {
|
|
||||||
text-align: center;
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
display: grid;
|
|
||||||
grid-gap: 9px;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(.resource:hover) {
|
|
||||||
background-color: rgba(68, 138, 255, 0.04);
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(pre) {
|
|
||||||
padding: 9px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: black;
|
|
||||||
color: #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(summary) {
|
|
||||||
outline: none;
|
|
||||||
height: 36px;
|
|
||||||
line-height: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(.github-star-container) {
|
|
||||||
margin-top: 12px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(.github-star-container a) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(.github-star-badge) {
|
|
||||||
color: #24292e;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 3px 10px;
|
|
||||||
border: 1px solid rgba(27, 31, 35, 0.2);
|
|
||||||
border-radius: 3px;
|
|
||||||
background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
|
|
||||||
margin-left: 4px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app :global(.github-star-badge:hover) {
|
|
||||||
background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
|
|
||||||
border-color: rgba(27, 31, 35, 0.35);
|
|
||||||
background-position: -0.5em;
|
|
||||||
}
|
|
||||||
.app :global(.github-star-badge .material-icons) {
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -2,9 +2,7 @@
|
|||||||
import { Component } from 'react';
|
import { Component } from 'react';
|
||||||
<% } %>
|
<% } %>
|
||||||
import styles from './<%= fileName %>.module.<%= style %>';
|
import styles from './<%= fileName %>.module.<%= style %>';
|
||||||
|
import NxWelcome from "./nx-welcome";
|
||||||
import { ReactComponent as Logo } from './logo.svg';
|
|
||||||
import star from './star.svg';
|
|
||||||
|
|
||||||
<% if (classComponent) { %>
|
<% if (classComponent) { %>
|
||||||
export class App extends Component {
|
export class App extends Component {
|
||||||
@ -13,84 +11,9 @@ export class App extends Component {
|
|||||||
export function App() {
|
export function App() {
|
||||||
<% } %>
|
<% } %>
|
||||||
return (
|
return (
|
||||||
<div className={styles.app}>
|
<>
|
||||||
<header className="flex">
|
<NxWelcome title="<%= projectName %>"/>
|
||||||
<Logo width="75" height="75"/>
|
</>
|
||||||
<h1>Welcome to <%= projectName %>!</h1>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<h2>Resources & Tools</h2>
|
|
||||||
<p>
|
|
||||||
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">
|
|
||||||
<img src={star} className="material-icons" alt="" />
|
|
||||||
Star
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
Here are some links to help you get started.
|
|
||||||
</p>
|
|
||||||
<ul className="resources">
|
|
||||||
<li className="col-span-2">
|
|
||||||
<a
|
|
||||||
className="resource flex"
|
|
||||||
href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
|
|
||||||
>
|
|
||||||
Scale React Development with Nx (Course)
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="col-span-2">
|
|
||||||
<a
|
|
||||||
className="resource flex"
|
|
||||||
href="https://nx.dev/latest/react/tutorial/01-create-application"
|
|
||||||
>
|
|
||||||
Interactive tutorial
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="col-span-2">
|
|
||||||
<a className="resource flex" href="https://nx.app/">
|
|
||||||
<svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
|
|
||||||
<path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
|
|
||||||
</svg>
|
|
||||||
<span className="gutter-left">Nx Cloud</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/react:lib ui
|
|
||||||
|
|
||||||
# Add a component
|
|
||||||
nx g @nrwl/react: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>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
<% if (classComponent) { %>
|
<% if (classComponent) { %>
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,128 +1 @@
|
|||||||
.app {
|
/* Your styles goes here. */
|
||||||
font-family: sans-serif;
|
|
||||||
min-width: 300px;
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 50px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app .gutter-left {
|
|
||||||
margin-left: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app .col-span-2 {
|
|
||||||
grid-column: span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app .flex {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app header {
|
|
||||||
background-color: #143055;
|
|
||||||
color: white;
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app main {
|
|
||||||
padding: 0 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app p {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app h1 {
|
|
||||||
text-align: center;
|
|
||||||
margin-left: 18px;
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app h2 {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 20px;
|
|
||||||
margin: 40px 0 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app .resources {
|
|
||||||
text-align: center;
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
display: grid;
|
|
||||||
grid-gap: 9px;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app .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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app .resource:hover {
|
|
||||||
background-color: rgba(68, 138, 255, 0.04);
|
|
||||||
}
|
|
||||||
|
|
||||||
.app pre {
|
|
||||||
padding: 9px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: black;
|
|
||||||
color: #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app summary {
|
|
||||||
outline: none;
|
|
||||||
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, 0.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, 0.35);
|
|
||||||
background-position: -0.5em;
|
|
||||||
}
|
|
||||||
.app .github-star-badge .material-icons {
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -2,9 +2,7 @@
|
|||||||
import { Component } from 'react';
|
import { Component } from 'react';
|
||||||
<% } %>
|
<% } %>
|
||||||
import './<%= fileName %>.<%= style %>';
|
import './<%= fileName %>.<%= style %>';
|
||||||
|
import NxWelcome from "./nx-welcome";
|
||||||
import { ReactComponent as Logo } from './logo.svg';
|
|
||||||
import star from './star.svg';
|
|
||||||
|
|
||||||
<% if (classComponent) { %>
|
<% if (classComponent) { %>
|
||||||
export class App extends Component {
|
export class App extends Component {
|
||||||
@ -13,84 +11,9 @@ export class App extends Component {
|
|||||||
export function App() {
|
export function App() {
|
||||||
<% } %>
|
<% } %>
|
||||||
return (
|
return (
|
||||||
<div className="app">
|
<>
|
||||||
<header className="flex">
|
<NxWelcome title="<%= projectName %>"/>
|
||||||
<Logo width="75" height="75"/>
|
</>
|
||||||
<h1>Welcome to <%= projectName %>!</h1>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<h2>Resources & Tools</h2>
|
|
||||||
<p>
|
|
||||||
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">
|
|
||||||
<img src={star} className="material-icons" alt="" />
|
|
||||||
Star
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
Here are some links to help you get started.
|
|
||||||
</p>
|
|
||||||
<ul className="resources">
|
|
||||||
<li className="col-span-2">
|
|
||||||
<a
|
|
||||||
className="resource flex"
|
|
||||||
href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
|
|
||||||
>
|
|
||||||
Scale React Development with Nx (Course)
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="col-span-2">
|
|
||||||
<a
|
|
||||||
className="resource flex"
|
|
||||||
href="https://nx.dev/latest/react/tutorial/01-create-application"
|
|
||||||
>
|
|
||||||
Interactive tutorial
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="col-span-2">
|
|
||||||
<a className="resource flex" href="https://nx.app/">
|
|
||||||
<svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
|
|
||||||
<path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
|
|
||||||
</svg>
|
|
||||||
<span className="gutter-left">Nx Cloud</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/react:lib ui
|
|
||||||
|
|
||||||
# Add a component
|
|
||||||
nx g @nrwl/react: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>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
<% if (classComponent) { %>
|
<% if (classComponent) { %>
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
<% if (classComponent) { %>
|
<% if (classComponent) { %>
|
||||||
import { Component } from 'react';
|
import { Component } from 'react';
|
||||||
<% } %>
|
<% } %>
|
||||||
|
import NxWelcome from "./nx-welcome";
|
||||||
import { ReactComponent as Logo } from './logo.svg';
|
|
||||||
import star from './star.svg';
|
|
||||||
|
|
||||||
<% if (classComponent) { %>
|
<% if (classComponent) { %>
|
||||||
export class App extends Component {
|
export class App extends Component {
|
||||||
@ -12,7 +10,9 @@ export class App extends Component {
|
|||||||
export function App() {
|
export function App() {
|
||||||
<% } %>
|
<% } %>
|
||||||
return (
|
return (
|
||||||
<h1>Welcome to <%= projectName %>!</h1>
|
<>
|
||||||
|
<NxWelcome title="<%= projectName %>"/>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
<% if (classComponent) { %>
|
<% if (classComponent) { %>
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
<% if (classComponent) { %>
|
<% if (classComponent) { %>
|
||||||
import { Component } from 'react';
|
import { Component } from 'react';
|
||||||
<% } %>
|
<% } %>
|
||||||
|
import NxWelcome from "./nx-welcome";
|
||||||
import { ReactComponent as Logo } from './logo.svg';
|
|
||||||
import star from './star.svg';
|
|
||||||
|
|
||||||
<% if (classComponent) { %>
|
<% if (classComponent) { %>
|
||||||
export class App extends Component {
|
export class App extends Component {
|
||||||
@ -12,215 +10,10 @@ export class App extends Component {
|
|||||||
export function App() {
|
export function App() {
|
||||||
<% } %>
|
<% } %>
|
||||||
return (
|
return (
|
||||||
<div className="app">
|
<>
|
||||||
<style jsx>{`
|
<style jsx>{`/** your style here **/`}</style>
|
||||||
.app {
|
<NxWelcome title="<%= projectName %>"/>
|
||||||
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 {
|
|
||||||
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, 0.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, 0.35);
|
|
||||||
background-position: -0.5em;
|
|
||||||
}
|
|
||||||
.github-star-badge .material-icons {
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
|
|
||||||
<header className="flex">
|
|
||||||
<Logo width="75" height="75" />
|
|
||||||
<h1>Welcome to <%= projectName %>!</h1>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<h2>Resources & Tools</h2>
|
|
||||||
<p>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">
|
|
||||||
<img src={star} className="material-icons" alt="" />
|
|
||||||
Star
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<p>Here are some links to help you get started.</p>
|
|
||||||
<ul className="resources">
|
|
||||||
<li className="col-span-2">
|
|
||||||
<a
|
|
||||||
className="resource flex"
|
|
||||||
href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
|
|
||||||
>
|
|
||||||
Scale React Development with Nx (Course)
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="col-span-2">
|
|
||||||
<a
|
|
||||||
className="resource flex"
|
|
||||||
href="https://nx.dev/latest/react/tutorial/01-create-application"
|
|
||||||
>
|
|
||||||
Interactive tutorial
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="col-span-2">
|
|
||||||
<a className="resource flex" href="https://nx.app/">
|
|
||||||
<svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
|
|
||||||
<path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
|
|
||||||
</svg>
|
|
||||||
<span className="gutter-left">Nx Cloud</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/react:lib ui
|
|
||||||
|
|
||||||
# Add a component
|
|
||||||
nx g @nrwl/react: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>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
|
|
||||||
<% if (classComponent) { %>
|
<% if (classComponent) { %>
|
||||||
|
|||||||
@ -1,139 +1,11 @@
|
|||||||
<% if (classComponent) { %>
|
<% if (classComponent) { %>
|
||||||
import { Component } from 'react';
|
import { Component } from 'react';
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
import styled from '<%= styledModule %>';
|
import styled from '<%= styledModule %>';
|
||||||
|
import NxWelcome from "./nx-welcome";
|
||||||
import { ReactComponent as Logo } from './logo.svg';
|
|
||||||
import star from './star.svg';
|
|
||||||
|
|
||||||
const StyledApp = styled.div`
|
const StyledApp = styled.div`
|
||||||
font-family: sans-serif;
|
// Your style here
|
||||||
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 {
|
|
||||||
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, 0.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, 0.35);
|
|
||||||
background-position: -0.5em;
|
|
||||||
}
|
|
||||||
.github-star-badge .material-icons {
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
<% if (classComponent) { %>
|
<% if (classComponent) { %>
|
||||||
@ -143,84 +15,11 @@ export class App extends Component {
|
|||||||
export function App() {
|
export function App() {
|
||||||
<% } %>
|
<% } %>
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
<StyledApp>
|
<StyledApp>
|
||||||
<header className="flex">
|
<NxWelcome title="<%= projectName %>"/>
|
||||||
<Logo width="75" height="75"/>
|
|
||||||
<h1>Welcome to <%= projectName %>!</h1>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<h2>Resources & Tools</h2>
|
|
||||||
<p>
|
|
||||||
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">
|
|
||||||
<img src={star} className="material-icons" alt="" />
|
|
||||||
Star
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
Here are some links to help you get started.
|
|
||||||
</p>
|
|
||||||
<ul className="resources">
|
|
||||||
<li className="col-span-2">
|
|
||||||
<a
|
|
||||||
className="resource flex"
|
|
||||||
href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
|
|
||||||
>
|
|
||||||
Scale React Development with Nx (Course)
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="col-span-2">
|
|
||||||
<a
|
|
||||||
className="resource flex"
|
|
||||||
href="https://nx.dev/latest/react/tutorial/01-create-application"
|
|
||||||
>
|
|
||||||
Interactive tutorial
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="col-span-2">
|
|
||||||
<a className="resource flex" href="https://nx.app/">
|
|
||||||
<svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
|
|
||||||
<path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
|
|
||||||
</svg>
|
|
||||||
<span className="gutter-left">Nx Cloud</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/react:lib ui
|
|
||||||
|
|
||||||
# Add a component
|
|
||||||
nx g @nrwl/react: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>
|
|
||||||
</StyledApp>
|
</StyledApp>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
<% if (classComponent) { %>
|
<% if (classComponent) { %>
|
||||||
}
|
}
|
||||||
|
|||||||
@ -42,7 +42,7 @@ describe('react:stories for applications', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
appTree.exists('apps/test-ui-app/src/app/app.stories.tsx')
|
appTree.exists('apps/test-ui-app/src/app/nx-welcome.stories.tsx')
|
||||||
).toBeTruthy();
|
).toBeTruthy();
|
||||||
expect(
|
expect(
|
||||||
appTree.exists(
|
appTree.exists(
|
||||||
@ -82,7 +82,7 @@ describe('react:stories for applications', () => {
|
|||||||
// should just create the story and not error, even though there's a js file
|
// should just create the story and not error, even though there's a js file
|
||||||
// not containing any react component
|
// not containing any react component
|
||||||
expect(
|
expect(
|
||||||
appTree.exists('apps/test-ui-app/src/app/app.stories.tsx')
|
appTree.exists('apps/test-ui-app/src/app/nx-welcome.stories.tsx')
|
||||||
).toBeTruthy();
|
).toBeTruthy();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -221,7 +221,7 @@ describe('app', () => {
|
|||||||
).toBeTruthy();
|
).toBeTruthy();
|
||||||
expect(
|
expect(
|
||||||
tree.read('apps/my-dir/my-app/src/app/app.element.ts', 'utf-8')
|
tree.read('apps/my-dir/my-app/src/app/app.element.ts', 'utf-8')
|
||||||
).toContain('Thank you for using and showing some ♥ for Nx.');
|
).toContain('Hello there');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -1,133 +1,416 @@
|
|||||||
/*
|
/*
|
||||||
* Remove template code below
|
* Remove template code below
|
||||||
*/
|
*/
|
||||||
body > *:first-child {
|
html {
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||||
|
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
|
||||||
|
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||||
|
'Noto Color Emoji';
|
||||||
|
line-height: 1.5;
|
||||||
|
tab-size: 4;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
p,
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
*,
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-width: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: currentColor;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2 {
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||||
|
'Liberation Mono', 'Courier New', monospace;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
display: block;
|
display: block;
|
||||||
font-family: sans-serif;
|
vertical-align: middle;
|
||||||
min-width: 300px;
|
}
|
||||||
max-width: 600px;
|
|
||||||
margin: 50px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gutter-left {
|
svg {
|
||||||
margin-left: 9px;
|
shape-rendering: auto;
|
||||||
}
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
background-color: rgba(55, 65, 81, 1);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
color: rgba(229, 231, 235, 1);
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||||
|
'Liberation Mono', 'Courier New', monospace;
|
||||||
|
overflow: scroll;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.col-span-2 {
|
.shadow {
|
||||||
grid-column: span 2;
|
box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||||
}
|
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
.rounded {
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.flex {
|
.wrapper {
|
||||||
display: flex;
|
width: 100%;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 768px;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
color: rgba(55, 65, 81, 1);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#welcome {
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
}
|
||||||
|
#welcome h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
#welcome span {
|
||||||
|
display: block;
|
||||||
|
font-size: 1.875rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 2.25rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
#hero {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
background-color: hsla(214, 62%, 21%, 1);
|
||||||
}
|
border: none;
|
||||||
|
box-sizing: border-box;
|
||||||
header {
|
color: rgba(55, 65, 81, 1);
|
||||||
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;
|
display: grid;
|
||||||
grid-gap: 9px;
|
grid-template-columns: 1fr;
|
||||||
grid-template-columns: 1fr 1fr;
|
margin-top: 3.5rem;
|
||||||
}
|
}
|
||||||
|
#hero .text-container {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
padding: 3rem 2rem;
|
||||||
|
}
|
||||||
|
#hero .text-container h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#hero .text-container h2 svg {
|
||||||
|
color: hsla(162, 47%, 50%, 1);
|
||||||
|
height: 2rem;
|
||||||
|
left: -0.25rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 2rem;
|
||||||
|
}
|
||||||
|
#hero .text-container h2 span {
|
||||||
|
margin-left: 2.5rem;
|
||||||
|
}
|
||||||
|
#hero .text-container a {
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
color: rgba(55, 65, 81, 1);
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
#hero .logo-container {
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
padding-left: 2rem;
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
#hero .logo-container svg {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
width: 66.666667%;
|
||||||
|
}
|
||||||
|
|
||||||
.resource {
|
#middle-content {
|
||||||
color: #0094ba;
|
align-items: flex-start;
|
||||||
height: 36px;
|
display: grid;
|
||||||
background-color: rgba(0, 0, 0, 0);
|
gap: 4rem;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
grid-template-columns: 1fr;
|
||||||
border-radius: 4px;
|
margin-top: 3.5rem;
|
||||||
padding: 3px 9px;
|
}
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resource:hover {
|
#learning-materials {
|
||||||
background-color: rgba(68, 138, 255, 0.04);
|
padding: 2.5rem 2rem;
|
||||||
}
|
}
|
||||||
|
#learning-materials h2 {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
.list-item-link {
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.list-item-link svg:first-child {
|
||||||
|
margin-right: 1rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
width: 1.5rem;
|
||||||
|
}
|
||||||
|
.list-item-link > span {
|
||||||
|
flex-grow: 1;
|
||||||
|
font-weight: 400;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
.list-item-link > span > span {
|
||||||
|
color: rgba(107, 114, 128, 1);
|
||||||
|
display: block;
|
||||||
|
flex-grow: 1;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1rem;
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
.list-item-link svg:last-child {
|
||||||
|
height: 1rem;
|
||||||
|
transition-property: all;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
.list-item-link:hover {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
background-color: hsla(162, 47%, 50%, 1);
|
||||||
|
}
|
||||||
|
.list-item-link:hover > span {
|
||||||
|
}
|
||||||
|
.list-item-link:hover > span > span {
|
||||||
|
color: rgba(243, 244, 246, 1);
|
||||||
|
}
|
||||||
|
.list-item-link:hover svg:last-child {
|
||||||
|
transform: translateX(0.25rem);
|
||||||
|
}
|
||||||
|
|
||||||
pre {
|
#other-links {
|
||||||
padding: 9px;
|
}
|
||||||
border-radius: 4px;
|
.button-pill {
|
||||||
background-color: black;
|
padding: 1.5rem 2rem;
|
||||||
color: #eee;
|
transition-duration: 300ms;
|
||||||
}
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.button-pill svg {
|
||||||
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
|
-webkit-backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
.button-pill > span {
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
.button-pill span span {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
}
|
||||||
|
.button-pill:hover svg,
|
||||||
|
.button-pill:hover {
|
||||||
|
color: rgba(255, 255, 255, 1) !important;
|
||||||
|
}
|
||||||
|
#nx-console:hover {
|
||||||
|
background-color: rgba(0, 122, 204, 1);
|
||||||
|
}
|
||||||
|
#nx-console svg {
|
||||||
|
color: rgba(0, 122, 204, 1);
|
||||||
|
}
|
||||||
|
|
||||||
details {
|
#nx-repo:hover {
|
||||||
border-radius: 4px;
|
background-color: rgba(24, 23, 23, 1);
|
||||||
color: #333;
|
}
|
||||||
background-color: rgba(0, 0, 0, 0);
|
#nx-repo svg {
|
||||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
color: rgba(24, 23, 23, 1);
|
||||||
padding: 3px 9px;
|
}
|
||||||
margin-bottom: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
summary {
|
#nx-cloud {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
}
|
||||||
|
#nx-cloud > div {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
#nx-cloud > div svg {
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
#nx-cloud > div h2 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
#nx-cloud > div h2 span {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
}
|
||||||
|
#nx-cloud p {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
#nx-cloud pre {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
#nx-cloud a {
|
||||||
|
color: rgba(107, 114, 128, 1);
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
#nx-cloud a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#commands {
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
}
|
||||||
|
#commands h2 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
#commands p {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
details {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
details pre > span {
|
||||||
|
color: rgba(181, 181, 181, 1);
|
||||||
|
}
|
||||||
|
summary {
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
font-weight: 400;
|
||||||
|
padding: 0.5rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
outline: none;
|
transition-property: background-color, border-color, color, fill, stroke,
|
||||||
height: 36px;
|
opacity, box-shadow, transform, filter, backdrop-filter,
|
||||||
line-height: 36px;
|
-webkit-backdrop-filter;
|
||||||
}
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
summary:hover {
|
||||||
|
background-color: rgba(243, 244, 246, 1);
|
||||||
|
}
|
||||||
|
summary svg {
|
||||||
|
height: 1.5rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.github-star-container {
|
#love {
|
||||||
margin-top: 12px;
|
color: rgba(107, 114, 128, 1);
|
||||||
line-height: 20px;
|
font-size: 0.875rem;
|
||||||
}
|
line-height: 1.25rem;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
opacity: 0.6;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#love svg {
|
||||||
|
color: rgba(252, 165, 165, 1);
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
display: inline;
|
||||||
|
margin-top: -0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.github-star-container a {
|
@media screen and (min-width: 768px) {
|
||||||
|
#hero {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
#hero .logo-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
}
|
||||||
text-decoration: none;
|
#middle-content {
|
||||||
color: #333;
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -14,8 +14,8 @@ describe('AppElement', () => {
|
|||||||
it('should have a greeting', () => {
|
it('should have a greeting', () => {
|
||||||
app.connectedCallback();
|
app.connectedCallback();
|
||||||
|
|
||||||
expect(app.querySelector('h1').innerHTML).toEqual(
|
expect(app.querySelector('h1').innerHTML).toContain(
|
||||||
'Welcome to <%= projectName %>!'
|
'Welcome <%= projectName %>'
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -8,88 +8,378 @@ export class AppElement extends HTMLElement {
|
|||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
const title = '<%= projectName %>';
|
const title = '<%= projectName %>';
|
||||||
this.innerHTML = `
|
this.innerHTML = `
|
||||||
<header class="flex">
|
<div class="wrapper">
|
||||||
<svg width="40" height="40" viewBox="0 0 262 163"><polygon id="Path" fill="#ffffff" points="130.68 104.59 97.49 52.71 97.44 96.3 40.24 0 0 0 0 162.57 39.79 162.57 39.92 66.39 96.53 158.26"></polygon><polygon id="Path" fill="#ffffff" points="97.5 41.79 137.24 41.79 137.33 41.33 137.33 0 97.54 0 97.49 41.33"></polygon><path d="M198.66,86.86 C189.139872,86.6795216 180.538723,92.516445 177.19,101.43 C182.764789,93.0931021 193.379673,89.7432211 202.73,93.37 C207.05,95.13 212.73,97.97 217.23,96.45 C212.950306,90.4438814 206.034895,86.8725952 198.66,86.86 L198.66,86.86 Z" id="Path" fill="#96D8E9"></path><path d="M243.75,106.42 C243.75,101.55 241.1,100.42 235.6,98.42 C231.52,97 226.89,95.4 223.52,91 C222.86,90.13 222.25,89.15 221.6,88.11 C220.14382,85.4164099 218.169266,83.037429 215.79,81.11 C212.58,78.75 208.37,77.6 202.91,77.6 C191.954261,77.6076705 182.084192,84.2206169 177.91,94.35 C183.186964,87.0278244 191.956716,83.0605026 200.940147,83.9314609 C209.923578,84.8024193 217.767888,90.3805017 221.54,98.58 C223.424615,101.689762 227.141337,103.174819 230.65,102.22 C236.02,101.07 235.65,106.15 243.76,107.87 L243.75,106.42 Z" id="Path" fill="#48C4E5"></path><path d="M261.46,105.38 L261.46,105.27 C261.34,73.03 235.17,45.45 202.91,45.45 C183.207085,45.4363165 164.821777,55.3450614 154,71.81 L153.79,71.45 L137.23,45.45 L97.5,45.4499858 L135.25,104.57 L98.41,162.57 L137,162.57 L153.79,136.78 L170.88,162.57 L209.48,162.57 L174.48,107.49 C173.899005,106.416838 173.583536,105.220114 173.56,104 C173.557346,96.2203871 176.64661,88.7586448 182.147627,83.2576275 C187.648645,77.7566101 195.110387,74.6673462 202.89,74.67 C219.11,74.67 221.82,84.37 225.32,88.93 C232.23,97.93 246.03,93.99 246.03,105.73 L246.03,105.73 C246.071086,108.480945 247.576662,111.001004 249.979593,112.340896 C252.382524,113.680787 255.317747,113.636949 257.679593,112.225896 C260.041438,110.814842 261.471086,108.250945 261.43,105.5 L261.43,105.5 L261.43,105.38 L261.46,105.38 Z" id="Path" fill="#ffffff"></path><path d="M261.5,113.68 C261.892278,116.421801 261.504116,119.218653 260.38,121.75 C258.18,126.84 254.51,125.14 254.51,125.14 C254.51,125.14 251.35,123.6 253.27,120.65 C255.4,117.36 259.61,117.74 261.5,113.68 Z" id="Path" fill="#022f56"></path></svg>
|
<div class="container">
|
||||||
<h1>Welcome to ${title}!</h1>
|
<!-- WELCOME -->
|
||||||
</header>
|
<div id="welcome">
|
||||||
<main>
|
<h1>
|
||||||
<h2>Resources & Tools</h2>
|
<span> Hello there, </span>
|
||||||
<p>
|
Welcome ${title} 👋
|
||||||
Thank you for using and showing some ♥ for Nx.
|
</h1>
|
||||||
</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>
|
</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://nxplaybook.com/p/nx-workspaces">
|
|
||||||
Nx video course
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="col-span-2">
|
|
||||||
<a
|
|
||||||
class="resource flex"
|
|
||||||
href="https://nx.dev/latest/react/getting-started/intro">
|
|
||||||
Nx video tutorial
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="col-span-2">
|
|
||||||
<a
|
|
||||||
class="resource flex"
|
|
||||||
href="https://nx.dev/latest/react/tutorial/01-create-application">
|
|
||||||
Interactive tutorial
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="col-span-2">
|
|
||||||
<a class="resource flex" href="https://nx.app/">
|
|
||||||
<svg width="36" height="36" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z" fill="#0E2039"/>
|
|
||||||
<path d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z" fill="white"/>
|
|
||||||
</svg>
|
|
||||||
<span class="gutter-left">Nx Cloud</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/web:lib ui
|
|
||||||
|
|
||||||
# Add a component
|
<!-- HERO -->
|
||||||
nx g @nrwl/web:component xyz --project ui\`
|
<div id="hero" class="rounded">
|
||||||
</pre>
|
<div class="text-container">
|
||||||
|
<h2>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>You're up and running</span>
|
||||||
|
</h2>
|
||||||
|
<a href="#commands"> What's next? </a>
|
||||||
|
</div>
|
||||||
|
<div class="logo-container">
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- MIDDLE CONTENT -->
|
||||||
|
<div id="middle-content">
|
||||||
|
<div id="learning-materials" class="rounded shadow">
|
||||||
|
<h2>Learning materials</h2>
|
||||||
|
<a href="https://nx.dev/getting-started/intro?utm_source=nx-project" target="_blank" rel="noreferrer" class="list-item-link">
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Documentation
|
||||||
|
<span> Everything is in there </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://blog.nrwl.io/?utm_source=nx-project" target="_blank" rel="noreferrer" class="list-item-link">
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Blog
|
||||||
|
<span> Changelog, features & events </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://www.youtube.com/c/Nrwl_io/videos?utm_source=nx-project&sub_confirmation=1" target="_blank" rel="noreferrer" class="list-item-link">
|
||||||
|
<svg
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="currentColor"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<title>YouTube</title>
|
||||||
|
<path
|
||||||
|
d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
YouTube channel
|
||||||
|
<span> Nx Show, talks & tutorials </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://nx.dev/tutorial/01-create-application?utm_source=nx-project" target="_blank" rel="noreferrer" class="list-item-link">
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Interactive tutorials
|
||||||
|
<span> Create an app, step-by-step </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://nxplaybook.com/?utm_source=nx-project" target="_blank" rel="noreferrer" class="list-item-link">
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path d="M12 14l9-5-9-5-9 5 9 5z" />
|
||||||
|
<path
|
||||||
|
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Video courses
|
||||||
|
<span> Nx custom courses </span>
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div id="other-links">
|
||||||
|
<a id="nx-console" class="button-pill rounded shadow" href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project" target="_blank" rel="noreferrer">
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<title>Visual Studio Code</title>
|
||||||
|
<path
|
||||||
|
d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Install Nx Console
|
||||||
|
<span>Plugin for VSCode</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<div id="nx-cloud" class="rounded shadow">
|
||||||
|
<div>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 120 120"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z"
|
||||||
|
fill="#0E2039"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z"
|
||||||
|
fill="white"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<h2>
|
||||||
|
NxCloud
|
||||||
|
<span>
|
||||||
|
Enable faster CI & better DX
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
You can activate distributed tasks executions and caching by
|
||||||
|
running:
|
||||||
|
</p>
|
||||||
|
<pre>nx connect-to-nx-cloud</pre>
|
||||||
|
<a href="https://nx.app/?utm_source=nx-project" target="_blank" rel="noreferrer"> What is Nx Cloud? </a>
|
||||||
|
</div>
|
||||||
|
<a id="nx-repo" class="button-pill rounded shadow" href="https://github.com/nrwl/nx?utm_source=nx-project" target="_blank" rel="noreferrer">
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>
|
||||||
|
Nx is open source
|
||||||
|
<span> Love Nx? Give us a star! </span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- COMMANDS -->
|
||||||
|
<div id="commands" class="rounded shadow">
|
||||||
|
<h2>Next steps</h2>
|
||||||
|
<p>Here are some things you can do with Nx:</p>
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Add UI library
|
||||||
|
</summary>
|
||||||
|
<pre><span># Generate UI lib</span>
|
||||||
|
nx g @nrwl/angular:lib ui
|
||||||
|
|
||||||
|
<span># Add a component</span>
|
||||||
|
nx g @nrwl/angular:component button --project ui</pre>
|
||||||
</details>
|
</details>
|
||||||
<details>
|
<details>
|
||||||
<summary>View dependency graph</summary>
|
<summary>
|
||||||
<pre>\`nx dep-graph\`</pre>
|
<svg
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
View interactive dependency graph
|
||||||
|
</summary>
|
||||||
|
<pre>nx dep-graph</pre>
|
||||||
</details>
|
</details>
|
||||||
<details>
|
<details>
|
||||||
<summary>Run affected commands</summary>
|
<summary>
|
||||||
<pre>
|
<svg
|
||||||
\`# see what's been affected by changes
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Run affected commands
|
||||||
|
</summary>
|
||||||
|
<pre><span># see what's been affected by changes</span>
|
||||||
nx affected:dep-graph
|
nx affected:dep-graph
|
||||||
|
|
||||||
# run tests for current changes
|
<span># run tests for current changes</span>
|
||||||
nx affected:test
|
nx affected:test
|
||||||
|
|
||||||
# run e2e tests for current changes
|
<span># run e2e tests for current changes</span>
|
||||||
nx affected:e2e\`
|
nx affected:e2e</pre>
|
||||||
</pre>
|
|
||||||
</details>
|
</details>
|
||||||
</main>`;
|
</div>
|
||||||
|
|
||||||
|
<p id="love">
|
||||||
|
Carefully crafted with
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
stroke="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
customElements.define('<%= prefix %>-root', AppElement);
|
customElements.define('<%= prefix %>-root', AppElement);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user