miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(repo): move gatsby plugin to nx-labs repo (#8617)

Browse Source
This commit is contained in:
Jack Hsu 2022-01-20 12:00:51 -05:00 committed by GitHub
parent 7b10c82cfe
commit f231cfc01b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
135 changed files with 26 additions and 6943 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.circleci/config.yml
View File

@ -197,7 +197,7 @@ jobs:
- run: - run:
name: Run E2E Tests name: Run E2E Tests
command: | command: |
npx nx affected --target=e2e --base=$NX_BASE --head=$NX_HEAD --exclude=e2e-react-native,e2e-detox,e2e-gatsby --parallel=1 npx nx affected --target=e2e --base=$NX_BASE --head=$NX_HEAD --exclude=e2e-react-native,e2e-detox --parallel=1
no_output_timeout: 45m no_output_timeout: 45m
- run: - run:
name: Stop All Running Agents for This CI Run name: Stop All Running Agents for This CI Run
@ -223,7 +223,7 @@ jobs:
- run: - run:
name: Run E2E Tests name: Run E2E Tests
command: | command: |
npx nx affected --target=e2e --base=$NX_BASE --head=$NX_HEAD --exclude=e2e-detox,e2e-js,e2e-next,e2e-gatsby,e2e-workspace-create,e2e-workspace-integrations,e2e-workspace-core,e2e-react,e2e-web,e2e-angular-extensions,e2e-angular-core,e2e-cli,e2e-nx-plugin,e2e-storybook,e2e-cypress,e2e-node,e2e-linter,e2e-jest,e2e-add-nx-to-monorepo --parallel=1 npx nx affected --target=e2e --base=$NX_BASE --head=$NX_HEAD --exclude=e2e-detox,e2e-js,e2e-next,e2e-workspace-create,e2e-workspace-integrations,e2e-workspace-core,e2e-react,e2e-web,e2e-angular-extensions,e2e-angular-core,e2e-cli,e2e-nx-plugin,e2e-storybook,e2e-cypress,e2e-node,e2e-linter,e2e-jest,e2e-add-nx-to-monorepo --parallel=1
no_output_timeout: 45m no_output_timeout: 45m
- run: - run:
name: Stop All Running Agents for This CI Run name: Stop All Running Agents for This CI Run

1
.cz-config.js
View File

@ -18,7 +18,6 @@ module.exports = {
{ name: 'core', description: 'anything Nx core specific' }, { name: 'core', description: 'anything Nx core specific' },
{ name: 'nxdev', description: 'anything related to docs infrastructure' }, { name: 'nxdev', description: 'anything related to docs infrastructure' },
{ name: 'nextjs', description: 'anything Next specific' }, { name: 'nextjs', description: 'anything Next specific' },
{ name: 'gatsby', description: 'anything Gatsby specific' },
{ name: 'nest', description: 'anything Nest specific' }, { name: 'nest', description: 'anything Nest specific' },
{ name: 'node', description: 'anything Node specific' }, { name: 'node', description: 'anything Node specific' },
{ name: 'js', description: 'anything TS->JS specific' }, { name: 'js', description: 'anything TS->JS specific' },

4
.github/workflows/e2e-matrix.yml vendored
View File

@ -42,7 +42,7 @@ jobs:
- e2e-angular-core,e2e-angular-extensions - e2e-angular-core,e2e-angular-extensions
- e2e-cli,e2e-nx-plugin,e2e-jest,e2e-linter - e2e-cli,e2e-nx-plugin,e2e-jest,e2e-linter
- e2e-cypress - e2e-cypress
- e2e-gatsby,e2e-react - e2e-react
- e2e-next - e2e-next
- e2e-node - e2e-node
- e2e-web - e2e-web
@ -69,7 +69,7 @@ jobs:
- os: macos-latest - os: macos-latest
packages: e2e-cypress packages: e2e-cypress
- os: macos-latest - os: macos-latest
packages: e2e-gatsby,e2e-react packages: e2e-react
- os: macos-latest - os: macos-latest
packages: e2e-next packages: e2e-next
- os: macos-latest - os: macos-latest

2
.github/workflows/e2e-windows.yml vendored
View File

@ -32,7 +32,7 @@ jobs:
- e2e-angular-core,e2e-angular-extensions - e2e-angular-core,e2e-angular-extensions
- e2e-cli,e2e-nx-plugin,e2e-jest,e2e-linter - e2e-cli,e2e-nx-plugin,e2e-jest,e2e-linter
- e2e-cypress - e2e-cypress
- e2e-gatsby,e2e-react - e2e-react
- e2e-next - e2e-next
- e2e-node - e2e-node
- e2e-web - e2e-web

1
CONTRIBUTING.md
View File

@ -237,7 +237,6 @@ The scope must be one of the following:
- dep-graph - anything dep-graph app specific - dep-graph - anything dep-graph app specific
- detox - anything Detox specific - detox - anything Detox specific
- devkit - devkit-related changes - devkit - devkit-related changes
- gatsby - anything Gatsby specific
- express - anything Express specific - express - anything Express specific
- js - anything related to @nrwl/js package or general js/ts support - js - anything related to @nrwl/js package or general js/ts support
- linter - anything Linter specific - linter - anything Linter specific

23
dep-graph/client/src/assets/graphs/nx.json
View File

@ -157,11 +157,6 @@
"type": "lib", "type": "lib",
"data": { "tags": [], "root": "packages/devkit", "files": [] } "data": { "tags": [], "root": "packages/devkit", "files": [] }
}, },
{
"name": "gatsby",
"type": "lib",
"data": { "tags": [], "root": "packages/gatsby", "files": [] }
},
{ {
"name": "linter", "name": "linter",
"type": "lib", "type": "lib",
@ -261,11 +256,6 @@
"type": "lib", "type": "lib",
"data": { "tags": [], "root": "packages/nx", "files": [] } "data": { "tags": [], "root": "packages/nx", "files": [] }
}, },
{
"name": "e2e-gatsby",
"type": "app",
"data": { "tags": [], "root": "e2e/gatsby", "files": [] }
},
{ {
"name": "e2e-linter", "name": "e2e-linter",
"type": "app", "type": "app",
@ -476,15 +466,6 @@
} }
], ],
"devkit": [{ "source": "devkit", "target": "tao", "type": "static" }], "devkit": [{ "source": "devkit", "target": "tao", "type": "static" }],
"gatsby": [
{ "source": "gatsby", "target": "tao", "type": "static" },
{ "source": "gatsby", "target": "workspace", "type": "static" },
{ "source": "gatsby", "target": "devkit", "type": "static" },
{ "source": "gatsby", "target": "cypress", "type": "static" },
{ "source": "gatsby", "target": "linter", "type": "static" },
{ "source": "gatsby", "target": "jest", "type": "static" },
{ "source": "gatsby", "target": "react", "type": "static" }
],
"linter": [ "linter": [
{ "source": "linter", "target": "eslint-plugin-nx", "type": "implicit" }, { "source": "linter", "target": "eslint-plugin-nx", "type": "implicit" },
{ "source": "linter", "target": "devkit", "type": "static" }, { "source": "linter", "target": "devkit", "type": "static" },
@ -644,10 +625,6 @@
{ "source": "e2e-cypress", "target": "e2e-utils", "type": "static" } { "source": "e2e-cypress", "target": "e2e-utils", "type": "static" }
], ],
"nx": [{ "source": "nx", "target": "cli", "type": "static" }], "nx": [{ "source": "nx", "target": "cli", "type": "static" }],
"e2e-gatsby": [
{ "source": "e2e-gatsby", "target": "gatsby", "type": "implicit" },
{ "source": "e2e-gatsby", "target": "e2e-utils", "type": "static" }
],
"e2e-linter": [ "e2e-linter": [
{ "source": "e2e-linter", "target": "linter", "type": "implicit" }, { "source": "e2e-linter", "target": "linter", "type": "implicit" },
{ "source": "e2e-linter", "target": "e2e-utils", "type": "static" } { "source": "e2e-linter", "target": "e2e-utils", "type": "static" }

52
docs/generated/api-gatsby/executors/build.md
View File

@ -1,52 +0,0 @@
---
title: '@nrwl/gatsby:build executor'
description: 'Build a Gatsby app'
---
# @nrwl/gatsby:build
Build a Gatsby app
Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets.
## Options
### color
Default: `true`
Type: `boolean`
Enable colored terminal output.
### graphqlTracing
Type: `boolean`
Trace every graphql resolver, may have performance implications.
### openTracingConfigFile
Type: `string`
Tracer configuration file (OpenTracing compatible).
### prefixPaths
Type: `boolean`
Build site with link paths prefixed (set pathPrefix in your config).
### profile
Type: `boolean`
Build site with react profiling.
### uglify
Default: `true`
Type: `boolean`
Build site without uglifying JS bundles (true by default).

48
docs/generated/api-gatsby/executors/server.md
View File

@ -1,48 +0,0 @@
---
title: '@nrwl/gatsby:server executor'
description: 'Starts server for app'
---
# @nrwl/gatsby:server
Starts server for app
Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets.
## Options
### buildTarget
Type: `string`
Target which builds the application
### host
Default: `localhost`
Type: `string`
Host to listen on.
### https
Default: `false`
Type: `boolean`
Serve using HTTPS.
### open
Type: `boolean`
Open the site in your (default) browser for you.
### port
Default: `4200`
Type: `number`
Port to listen on.

108
docs/generated/api-gatsby/generators/application.md
View File

@ -1,108 +0,0 @@
---
title: '@nrwl/gatsby:application generator'
description: 'Create an application'
---
# @nrwl/gatsby:application
Create an application
## Usage
```bash
nx generate application ...
```
```bash
nx g app ... # same
```
By default, Nx will search for `application` in the default collection provisioned in `workspace.json`.
You can specify the collection explicitly as follows:
```bash
nx g @nrwl/gatsby:application ...
```
Show what will be generated without writing to disk:
```bash
nx g application ... --dry-run
```
## Options
### name (_**required**_)
Type: `string`
### directory
Alias(es): d
Type: `string`
A directory where the project is placed
### e2eTestRunner
Default: `cypress`
Type: `string`
Possible values: `cypress`, `none`
Adds the specified e2e test runner
### js
Default: `false`
Type: `boolean`
Generate JavaScript files rather than TypeScript files
### setParserOptionsProject
Default: `false`
Type: `boolean`
Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons.
### standaloneConfig
Type: `boolean`
Split the project configuration into <projectRoot>/project.json rather than including it inside workspace.json
### style
Alias(es): s
Default: `css`
Type: `string`
Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none`
The file extension to be used for style files.
### tags
Alias(es): t
Type: `string`
Add tags to the project (used for linting)
### unitTestRunner
Default: `jest`
Type: `string`
Possible values: `jest`, `none`
Adds the specified unit test runner

112
docs/generated/api-gatsby/generators/component.md
View File

@ -1,112 +0,0 @@
---
title: '@nrwl/gatsby:component generator'
description: 'Create a component'
---
# @nrwl/gatsby:component
Create a component
## Usage
```bash
nx generate component ...
```
By default, Nx will search for `component` in the default collection provisioned in `workspace.json`.
You can specify the collection explicitly as follows:
```bash
nx g @nrwl/gatsby:component ...
```
Show what will be generated without writing to disk:
```bash
nx g component ... --dry-run
```
### Examples
Generate a component in the mylib library:
```bash
nx g component my-component --project=mylib
```
Generate a class component in the mylib library:
```bash
nx g component my-component --project=mylib --classComponent
```
## Options
### name (_**required**_)
Type: `string`
The name of the component.
### project (_**required**_)
Alias(es): p
Type: `string`
The name of the project.
### directory
Alias(es): dir
Type: `string`
Create the component under this directory (can be nested).
### export
Alias(es): e
Default: `false`
Type: `boolean`
When true, the component is exported from the project index.ts (if it exists).
### flat
Default: `false`
Type: `boolean`
Create component at the source root rather than its own directory.
### js
Default: `false`
Type: `boolean`
Generate JavaScript files rather than TypeScript files.
### skipTests
Default: `false`
Type: `boolean`
When true, does not create "spec.ts" test files for the new component.
### style
Alias(es): s
Default: `css`
Type: `string`
Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none`
The file extension to be used for style files.

112
docs/generated/api-gatsby/generators/page.md
View File

@ -1,112 +0,0 @@
---
title: '@nrwl/gatsby:page generator'
description: 'Create a page'
---
# @nrwl/gatsby:page
Create a page
## Usage
```bash
nx generate page ...
```
By default, Nx will search for `page` in the default collection provisioned in `workspace.json`.
You can specify the collection explicitly as follows:
```bash
nx g @nrwl/gatsby:page ...
```
Show what will be generated without writing to disk:
```bash
nx g page ... --dry-run
```
### Examples
Generate a page in the mylib library:
```bash
nx g page my-page --project=mylib
```
Generate a class component in the mylib library:
```bash
nx g page my-page --project=mylib --classComponent
```
## Options
### name (_**required**_)
Type: `string`
The name of the component.
### project (_**required**_)
Alias(es): p
Type: `string`
The name of the project.
### directory
Alias(es): dir
Type: `string`
Create the component under this directory (can be nested).
### export
Alias(es): e
Default: `false`
Type: `boolean`
When true, the component is exported from the project index.ts (if it exists).
### flat
Default: `false`
Type: `boolean`
Create component at the source root rather than its own directory.
### js
Default: `false`
Type: `boolean`
Generate JavaScript files rather than TypeScript files.
### skipTests
Default: `false`
Type: `boolean`
When true, does not create "spec.ts" test files for the new component.
### style
Alias(es): s
Default: `css`
Type: `string`
Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none`
The file extension to be used for style files.

1
docs/generated/executors.json
View File

@ -2,7 +2,6 @@
"angular", "angular",
"cypress", "cypress",
"detox", "detox",
"gatsby",
"jest", "jest",
"js", "js",
"linter", "linter",

1
docs/generated/generators.json
View File

@ -3,7 +3,6 @@
"cypress", "cypress",
"detox", "detox",
"express", "express",
"gatsby",
"jest", "jest",
"js", "js",
"linter", "linter",

37
docs/map.json
View File

@ -1128,43 +1128,6 @@
} }
] ]
}, },
{
"name": "gatsby",
"id": "gatsby",
"itemList": [
{
"id": "overview",
"name": "Overview",
"searchResultsName": "@nrwl/gatsby Overview",
"file": "shared/gatsby-plugin"
},
{
"name": "application generator",
"id": "application",
"file": "generated/api-gatsby/generators/application"
},
{
"name": "component generator",
"id": "component",
"file": "generated/api-gatsby/generators/component"
},
{
"name": "page generator",
"id": "page",
"file": "generated/api-gatsby/generators/page"
},
{
"name": "build executor",
"id": "build",
"file": "generated/api-gatsby/executors/build"
},
{
"name": "server executor",
"id": "server",
"file": "generated/api-gatsby/executors/server"
}
]
},
{ {
"name": "detox", "name": "detox",
"id": "detox", "id": "detox",

76
docs/shared/gatsby-plugin.md
View File

@ -1,76 +0,0 @@
# Gatsby Plugin
The Nx Plugin for Gatsby contains executors and generators for managing Gatsby applications and libraries within an Nx workspace. It provides:
- Scaffolding for creating, building, serving, linting, and testing Gatsby applications.
- Integration with building, serving, and exporting a Gatsby application.
- Integration with React libraries within the workspace.
## Installing the Gatsby Plugin
Installing the Gatsby plugin to a workspace can be done with the following:
```bash
yarn add -D @nrwl/gatsby
```
```bash
npm install -D @nrwl/gatsby
```
## Applications
Generating new applications can be done with the following:
```bash
nx generate @nrwl/gatsby:application <name>
```
This creates the following app structure:
```treeview
myorg/
├── apps/
│ ├── myapp/
│ │ ├── src/
│ │ │ ├── pages/
│ │ │ │ ├── index.module.css
│ │ │ │ └── index.tsx
│ │ ├── jest.conf.js
│ │ ├── tsconfig.json
│ │ ├── tsconfig.app.json
│ │ ├── tsconfig.spec.json
│ │ └── .eslintrc.json
│ └── myapp-e2e/
│ │ ├── src/
│ │ │ ├── integrations/
│ │ │ │ └── app.spec.ts
│ │ │ ├── fixtures/
│ │ │ ├── plugins/
│ │ │ └── support/
│ │ ├── cypress.json
│ │ ├── tsconfig.e2e.json
│ │ └── .eslintrc.json
├── libs/
├── workspace.json
├── nx.json
├── package.json
├── tools/
├── tsconfig.base.json
└── .eslintrc.json
```
## See Also
- [Using Gatsby](https://www.gatsbyjs.com/docs/quick-start/)
## Executors / Builders
- [build](/gatsby/build) - Builds a Gatsby application
- [server](/gatsby/server) - Builds and serves a Gatsby application
## Generators
- [application](/gatsby/application) - Create a Gatsby application
- [component](/gatsby/component) - Create a Gatsby component
- [page](/gatsby/page) - Create a Gatsby page

2
docs/shared/getting-started/nx-and-react.md
View File

@ -19,7 +19,7 @@ It is also a good idea to read the [mental model guide](/using-nx/mental-model)
Nx plugins help you develop [React](/react/overview) applications with fully integrated support for modern tools Nx plugins help you develop [React](/react/overview) applications with fully integrated support for modern tools
and libraries like [Jest](/jest/overview), [Cypress](/cypress/overview), and libraries like [Jest](/jest/overview), [Cypress](/cypress/overview),
Storybook, [ESLint](/linter/eslint), and more. Nx also supports React Storybook, [ESLint](/linter/eslint), and more. Nx also supports React
frameworks like [Gatsby](/gatsby/overview), [Next.js](/guides/nextjs), Remix, and has great support for [React Native](/react-native/overview). frameworks like [Next.js](/guides/nextjs), Remix, and has great support for [React Native](/react-native/overview).
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/sNz-4PUM0k8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe> <iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/sNz-4PUM0k8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>

2
docs/shared/migration/adding-to-monorepo.md
View File

@ -163,7 +163,7 @@ faster and with better dev ergonomics. But Nx enables much more than that.
Nx is like a VS Code of build tools. It has a very powerful core, but it's really the plugins and extra capabilities Nx is like a VS Code of build tools. It has a very powerful core, but it's really the plugins and extra capabilities
that really transform how you develop. that really transform how you develop.
Nx has first class support for React, Next.js, Gatsby, React Native, Angular, Node, NestJS, Jest, Cypress, Storybook and Nx has first class support for React, Next.js, React Native, Angular, Node, NestJS, Jest, Cypress, Storybook and
many more. All the plugins are designed to work together and create a cohesive and pleasant to use dev environment. many more. All the plugins are designed to work together and create a cohesive and pleasant to use dev environment.
In addition, Nx makes a lot of things much easier, like building large apps incrementally, distributing CI (no point in In addition, Nx makes a lot of things much easier, like building large apps incrementally, distributing CI (no point in

10
e2e/gatsby/jest.config.js
View File

@ -1,10 +0,0 @@
module.exports = {
preset: '../../jest.preset.js',
transform: {
'^.+\\.[tj]sx?$': 'ts-jest',
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
maxWorkers: 1,
globals: { 'ts-jest': { tsconfig: '<rootDir>/tsconfig.spec.json' } },
displayName: 'e2e-gatsby',
};

34
e2e/gatsby/project.json
View File

@ -1,34 +0,0 @@
{
"root": "e2e/gatsby",
"sourceRoot": "e2e/gatsby",
"projectType": "application",
"targets": {
"e2e": {
"executor": "@nrwl/workspace:run-commands",
"options": {
"commands": [
{
"command": "yarn e2e-start-local-registry"
},
{
"command": "yarn e2e-build-package-publish"
},
{
"command": "nx run-e2e-tests e2e-gatsby"
}
],
"parallel": false
}
},
"run-e2e-tests": {
"executor": "@nrwl/jest:jest",
"options": {
"jestConfig": "e2e/gatsby/jest.config.js",
"passWithNoTests": true,
"runInBand": true
},
"outputs": ["coverage/e2e/gatsby"]
}
},
"implicitDependencies": ["gatsby"]
}

110
e2e/gatsby/src/gatsby.test.ts
View File

@ -1,110 +0,0 @@
import {
checkFilesExist,
expectTestsPass,
newProject,
runCLI,
runCLIAsync,
uniq,
updateFile,
} from '@nrwl/e2e/utils';
describe('Gatsby Applications', () => {
let proj: string;
beforeEach(() => (proj = newProject()));
it('should generate a valid gatsby application', async () => {
const appName = uniq('app');
runCLI(`generate @nrwl/gatsby:app ${appName} --style css --no-interactive`);
runCLI(
`generate @nrwl/gatsby:component header --project ${appName} --style css --no-interactive`
);
checkFilesExist(
`apps/${appName}/package.json`,
`apps/${appName}/src/components/header.tsx`,
`apps/${appName}/src/components/header.spec.tsx`,
`apps/${appName}/src/pages/index.tsx`,
`apps/${appName}/src/pages/index.spec.tsx`
);
updateFile(`apps/${appName}/src/pages/index.tsx`, (content) => {
let updated = `import Header from '../components/header';\n${content}`;
updated = updated.replace('<main>', '<Header /><main>');
return updated;
});
runCLI(`build ${appName}`);
checkFilesExist(
`apps/${appName}/public/index.html`,
`apps/${appName}/public/404.html`,
`apps/${appName}/public/manifest.webmanifest`
);
const result = runCLI(`lint ${appName}`);
expect(result).toContain('All files pass linting.');
expectTestsPass(await runCLIAsync(`test ${appName}`));
}, 600000);
it('should support styled-jsx', async () => {
const appName = uniq('app');
runCLI(
`generate @nrwl/gatsby:app ${appName} --style styled-jsx --no-interactive`
);
runCLI(`build ${appName}`);
checkFilesExist(
`apps/${appName}/public/index.html`,
`apps/${appName}/public/404.html`,
`apps/${appName}/public/manifest.webmanifest`
);
const result = runCLI(`lint ${appName}`);
expect(result).toContain('All files pass linting.');
expectTestsPass(await runCLIAsync(`test ${appName}`));
}, 300000);
it('should support scss', async () => {
const appName = uniq('app');
runCLI(
`generate @nrwl/gatsby:app ${appName} --style scss --no-interactive`
);
runCLI(`build ${appName}`);
checkFilesExist(
`apps/${appName}/public/index.html`,
`apps/${appName}/public/404.html`,
`apps/${appName}/public/manifest.webmanifest`
);
const result = runCLI(`lint ${appName}`);
expect(result).toContain('All files pass linting.');
expectTestsPass(await runCLIAsync(`test ${appName}`));
}, 300000);
it('should support --js option', async () => {
const app = uniq('app');
runCLI(
`generate @nrwl/gatsby:app ${app} --js --style css --no-interactive`
);
checkFilesExist(
`apps/${app}/package.json`,
`apps/${app}/src/pages/index.js`,
`apps/${app}/src/pages/index.spec.js`
);
runCLI(`build ${app}`);
checkFilesExist(
`apps/${app}/public/index.html`,
`apps/${app}/public/404.html`,
`apps/${app}/public/manifest.webmanifest`
);
expectTestsPass(await runCLIAsync(`test ${app}`));
}, 300000);
});

13
e2e/gatsby/tsconfig.json
View File

@ -1,13 +0,0 @@
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"types": ["node", "jest"]
},
"include": [],
"files": [],
"references": [
{
"path": "./tsconfig.spec.json"
}
]
}

19
e2e/gatsby/tsconfig.spec.json
View File

@ -1,19 +0,0 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../dist/out-tsc",
"module": "commonjs",
"types": ["jest", "node"]
},
"include": [
"**/*.test.ts",
"**/*.spec.ts",
"**/*.spec.tsx",
"**/*.test.tsx",
"**/*.spec.js",
"**/*.test.js",
"**/*.spec.jsx",
"**/*.test.jsx",
"**/*.d.ts"
]
}

1
e2e/utils/index.ts
View File

@ -223,7 +223,6 @@ export function newProject({
`@nrwl/angular`, `@nrwl/angular`,
`@nrwl/eslint-plugin-nx`, `@nrwl/eslint-plugin-nx`,
`@nrwl/express`, `@nrwl/express`,
`@nrwl/gatsby`,
`@nrwl/jest`, `@nrwl/jest`,
`@nrwl/js`, `@nrwl/js`,
`@nrwl/linter`, `@nrwl/linter`,

13
e2e/workspace-create/src/create-nx-workspace.test.ts
View File

@ -96,19 +96,6 @@ describe('create-nx-workspace', () => {
expectNoAngularDevkit(); expectNoAngularDevkit();
}); });
xit('should be able to create an gatsby workspace', () => {
const wsName = uniq('gatsby');
const appName = uniq('app');
runCreateWorkspace(wsName, {
preset: 'gatsby',
style: 'css',
appName,
packageManager,
});
expectNoAngularDevkit();
});
it('should be able to create an web-components workspace', () => { it('should be able to create an web-components workspace', () => {
const wsName = uniq('web-components'); const wsName = uniq('web-components');
const appName = uniq('app'); const appName = uniq('app');

1
nx-dev/data-access-documents/src/lib/menu.utils.ts
View File

@ -103,7 +103,6 @@ export function getApiSection(items: MenuItem[]): MenuSection {
m.id === 'express' || m.id === 'express' ||
m.id === 'nest' || m.id === 'nest' ||
m.id === 'next' || m.id === 'next' ||
m.id === 'gatsby' ||
m.id === 'detox' || m.id === 'detox' ||
m.id === 'react-native' || m.id === 'react-native' ||
m.id === 'nx-plugin' || m.id === 'nx-plugin' ||

52
nx-dev/nx-dev/public/documentation/generated/api-gatsby/executors/build.md
View File

@ -1,52 +0,0 @@
---
title: '@nrwl/gatsby:build executor'
description: 'Build a Gatsby app'
---
# @nrwl/gatsby:build
Build a Gatsby app
Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets.
## Options
### color
Default: `true`
Type: `boolean`
Enable colored terminal output.
### graphqlTracing
Type: `boolean`
Trace every graphql resolver, may have performance implications.
### openTracingConfigFile
Type: `string`
Tracer configuration file (OpenTracing compatible).
### prefixPaths
Type: `boolean`
Build site with link paths prefixed (set pathPrefix in your config).
### profile
Type: `boolean`
Build site with react profiling.
### uglify
Default: `true`
Type: `boolean`
Build site without uglifying JS bundles (true by default).

48
nx-dev/nx-dev/public/documentation/generated/api-gatsby/executors/server.md
View File

@ -1,48 +0,0 @@
---
title: '@nrwl/gatsby:server executor'
description: 'Starts server for app'
---
# @nrwl/gatsby:server
Starts server for app
Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/configuration/projectjson#targets.
## Options
### buildTarget
Type: `string`
Target which builds the application
### host
Default: `localhost`
Type: `string`
Host to listen on.
### https
Default: `false`
Type: `boolean`
Serve using HTTPS.
### open
Type: `boolean`
Open the site in your (default) browser for you.
### port
Default: `4200`
Type: `number`
Port to listen on.

108
nx-dev/nx-dev/public/documentation/generated/api-gatsby/generators/application.md
View File

@ -1,108 +0,0 @@
---
title: '@nrwl/gatsby:application generator'
description: 'Create an application'
---
# @nrwl/gatsby:application
Create an application
## Usage
```bash
nx generate application ...
```
```bash
nx g app ... # same
```
By default, Nx will search for `application` in the default collection provisioned in `workspace.json`.
You can specify the collection explicitly as follows:
```bash
nx g @nrwl/gatsby:application ...
```
Show what will be generated without writing to disk:
```bash
nx g application ... --dry-run
```
## Options
### name (_**required**_)
Type: `string`
### directory
Alias(es): d
Type: `string`
A directory where the project is placed
### e2eTestRunner
Default: `cypress`
Type: `string`
Possible values: `cypress`, `none`
Adds the specified e2e test runner
### js
Default: `false`
Type: `boolean`
Generate JavaScript files rather than TypeScript files
### setParserOptionsProject
Default: `false`
Type: `boolean`
Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons.
### standaloneConfig
Type: `boolean`
Split the project configuration into <projectRoot>/project.json rather than including it inside workspace.json
### style
Alias(es): s
Default: `css`
Type: `string`
Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none`
The file extension to be used for style files.
### tags
Alias(es): t
Type: `string`
Add tags to the project (used for linting)
### unitTestRunner
Default: `jest`
Type: `string`
Possible values: `jest`, `none`
Adds the specified unit test runner

112
nx-dev/nx-dev/public/documentation/generated/api-gatsby/generators/component.md
View File

@ -1,112 +0,0 @@
---
title: '@nrwl/gatsby:component generator'
description: 'Create a component'
---
# @nrwl/gatsby:component
Create a component
## Usage
```bash
nx generate component ...
```
By default, Nx will search for `component` in the default collection provisioned in `workspace.json`.
You can specify the collection explicitly as follows:
```bash
nx g @nrwl/gatsby:component ...
```
Show what will be generated without writing to disk:
```bash
nx g component ... --dry-run
```
### Examples
Generate a component in the mylib library:
```bash
nx g component my-component --project=mylib
```
Generate a class component in the mylib library:
```bash
nx g component my-component --project=mylib --classComponent
```
## Options
### name (_**required**_)
Type: `string`
The name of the component.
### project (_**required**_)
Alias(es): p
Type: `string`
The name of the project.
### directory
Alias(es): dir
Type: `string`
Create the component under this directory (can be nested).
### export
Alias(es): e
Default: `false`
Type: `boolean`
When true, the component is exported from the project index.ts (if it exists).
### flat
Default: `false`
Type: `boolean`
Create component at the source root rather than its own directory.
### js
Default: `false`
Type: `boolean`
Generate JavaScript files rather than TypeScript files.
### skipTests
Default: `false`
Type: `boolean`
When true, does not create "spec.ts" test files for the new component.
### style
Alias(es): s
Default: `css`
Type: `string`
Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none`
The file extension to be used for style files.

112
nx-dev/nx-dev/public/documentation/generated/api-gatsby/generators/page.md
View File

@ -1,112 +0,0 @@
---
title: '@nrwl/gatsby:page generator'
description: 'Create a page'
---
# @nrwl/gatsby:page
Create a page
## Usage
```bash
nx generate page ...
```
By default, Nx will search for `page` in the default collection provisioned in `workspace.json`.
You can specify the collection explicitly as follows:
```bash
nx g @nrwl/gatsby:page ...
```
Show what will be generated without writing to disk:
```bash
nx g page ... --dry-run
```
### Examples
Generate a page in the mylib library:
```bash
nx g page my-page --project=mylib
```
Generate a class component in the mylib library:
```bash
nx g page my-page --project=mylib --classComponent
```
## Options
### name (_**required**_)
Type: `string`
The name of the component.
### project (_**required**_)
Alias(es): p
Type: `string`
The name of the project.
### directory
Alias(es): dir
Type: `string`
Create the component under this directory (can be nested).
### export
Alias(es): e
Default: `false`
Type: `boolean`
When true, the component is exported from the project index.ts (if it exists).
### flat
Default: `false`
Type: `boolean`
Create component at the source root rather than its own directory.
### js
Default: `false`
Type: `boolean`
Generate JavaScript files rather than TypeScript files.
### skipTests
Default: `false`
Type: `boolean`
When true, does not create "spec.ts" test files for the new component.
### style
Alias(es): s
Default: `css`
Type: `string`
Possible values: `css`, `scss`, `styl`, `less`, `styled-components`, `@emotion/styled`, `styled-jsx`, `none`
The file extension to be used for style files.

8
nx-dev/nx-dev/public/documentation/generated/api-js/executors/node.md
View File

@ -58,3 +58,11 @@ Extra args passed to the node process
Type: `array` Type: `array`
The targets to run to before starting the node app The targets to run to before starting the node app
### watch
Default: `true`
Type: `boolean`
Enable re-building when files change.

1
nx-dev/nx-dev/public/documentation/generated/executors.json
View File

@ -2,7 +2,6 @@
"angular", "angular",
"cypress", "cypress",
"detox", "detox",
"gatsby",
"jest", "jest",
"js", "js",
"linter", "linter",

1
nx-dev/nx-dev/public/documentation/generated/generators.json
View File

@ -3,7 +3,6 @@
"cypress", "cypress",
"detox", "detox",
"express", "express",
"gatsby",
"jest", "jest",
"js", "js",
"linter", "linter",

37
nx-dev/nx-dev/public/documentation/map.json
View File

@ -1128,43 +1128,6 @@
} }
] ]
}, },
{
"name": "gatsby",
"id": "gatsby",
"itemList": [
{
"id": "overview",
"name": "Overview",
"searchResultsName": "@nrwl/gatsby Overview",
"file": "shared/gatsby-plugin"
},
{
"name": "application generator",
"id": "application",
"file": "generated/api-gatsby/generators/application"
},
{
"name": "component generator",
"id": "component",
"file": "generated/api-gatsby/generators/component"
},
{
"name": "page generator",
"id": "page",
"file": "generated/api-gatsby/generators/page"
},
{
"name": "build executor",
"id": "build",
"file": "generated/api-gatsby/executors/build"
},
{
"name": "server executor",
"id": "server",
"file": "generated/api-gatsby/executors/server"
}
]
},
{ {
"name": "detox", "name": "detox",
"id": "detox", "id": "detox",

76
nx-dev/nx-dev/public/documentation/shared/gatsby-plugin.md
View File

@ -1,76 +0,0 @@
# Gatsby Plugin
The Nx Plugin for Gatsby contains executors and generators for managing Gatsby applications and libraries within an Nx workspace. It provides:
- Scaffolding for creating, building, serving, linting, and testing Gatsby applications.
- Integration with building, serving, and exporting a Gatsby application.
- Integration with React libraries within the workspace.
## Installing the Gatsby Plugin
Installing the Gatsby plugin to a workspace can be done with the following:
```bash
yarn add -D @nrwl/gatsby
```
```bash
npm install -D @nrwl/gatsby
```
## Applications
Generating new applications can be done with the following:
```bash
nx generate @nrwl/gatsby:application <name>
```
This creates the following app structure:
```treeview
myorg/
├── apps/
│ ├── myapp/
│ │ ├── src/
│ │ │ ├── pages/
│ │ │ │ ├── index.module.css
│ │ │ │ └── index.tsx
│ │ ├── jest.conf.js
│ │ ├── tsconfig.json
│ │ ├── tsconfig.app.json
│ │ ├── tsconfig.spec.json
│ │ └── .eslintrc.json
│ └── myapp-e2e/
│ │ ├── src/
│ │ │ ├── integrations/
│ │ │ │ └── app.spec.ts
│ │ │ ├── fixtures/
│ │ │ ├── plugins/
│ │ │ └── support/
│ │ ├── cypress.json
│ │ ├── tsconfig.e2e.json
│ │ └── .eslintrc.json
├── libs/
├── workspace.json
├── nx.json
├── package.json
├── tools/
├── tsconfig.base.json
└── .eslintrc.json
```
## See Also
- [Using Gatsby](https://www.gatsbyjs.com/docs/quick-start/)
## Executors / Builders
- [build](/gatsby/build) - Builds a Gatsby application
- [server](/gatsby/server) - Builds and serves a Gatsby application
## Generators
- [application](/gatsby/application) - Create a Gatsby application
- [component](/gatsby/component) - Create a Gatsby component
- [page](/gatsby/page) - Create a Gatsby page

2
nx-dev/nx-dev/public/documentation/shared/getting-started/nx-and-react.md
View File

@ -19,7 +19,7 @@ It is also a good idea to read the [mental model guide](/using-nx/mental-model)
Nx plugins help you develop [React](/react/overview) applications with fully integrated support for modern tools Nx plugins help you develop [React](/react/overview) applications with fully integrated support for modern tools
and libraries like [Jest](/jest/overview), [Cypress](/cypress/overview), and libraries like [Jest](/jest/overview), [Cypress](/cypress/overview),
Storybook, [ESLint](/linter/eslint), and more. Nx also supports React Storybook, [ESLint](/linter/eslint), and more. Nx also supports React
frameworks like [Gatsby](/gatsby/overview), [Next.js](/guides/nextjs), Remix, and has great support for [React Native](/react-native/overview). frameworks like [Next.js](/guides/nextjs), Remix, and has great support for [React Native](/react-native/overview).
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/sNz-4PUM0k8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe> <iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/sNz-4PUM0k8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>

2
nx-dev/nx-dev/public/documentation/shared/migration/adding-to-monorepo.md
View File

@ -163,7 +163,7 @@ faster and with better dev ergonomics. But Nx enables much more than that.
Nx is like a VS Code of build tools. It has a very powerful core, but it's really the plugins and extra capabilities Nx is like a VS Code of build tools. It has a very powerful core, but it's really the plugins and extra capabilities
that really transform how you develop. that really transform how you develop.
Nx has first class support for React, Next.js, Gatsby, React Native, Angular, Node, NestJS, Jest, Cypress, Storybook and Nx has first class support for React, Next.js, React Native, Angular, Node, NestJS, Jest, Cypress, Storybook and
many more. All the plugins are designed to work together and create a cohesive and pleasant to use dev environment. many more. All the plugins are designed to work together and create a cohesive and pleasant to use dev environment.
In addition, Nx makes a lot of things much easier, like building large apps incrementally, distributing CI (no point in In addition, Nx makes a lot of things much easier, like building large apps incrementally, distributing CI (no point in

17
packages/create-nx-workspace/bin/create-nx-workspace.ts
View File

@ -31,7 +31,6 @@ export enum Preset {
ReactWithExpress = 'react-express', ReactWithExpress = 'react-express',
ReactNative = 'react-native', ReactNative = 'react-native',
NextJs = 'next', NextJs = 'next',
Gatsby = 'gatsby',
Nest = 'nest', Nest = 'nest',
Express = 'express', Express = 'express',
} }
@ -66,10 +65,6 @@ const presetOptions: { name: Preset; message: string }[] = [
message: message:
'next.js [a workspace with a single Next.js application]', 'next.js [a workspace with a single Next.js application]',
}, },
{
name: Preset.Gatsby,
message: 'gatsby [a workspace with a single Gatsby application]',
},
{ {
name: Preset.Nest, name: Preset.Nest,
message: 'nest [a workspace with a single Nest application]', message: 'nest [a workspace with a single Nest application]',
@ -201,7 +196,7 @@ function showHelp() {
cli CLI to power the Nx workspace (options: "nx", "angular") cli CLI to power the Nx workspace (options: "nx", "angular")
style Default style option to be used when a non-empty preset is selected style Default style option to be used when a non-empty preset is selected
options: ("css", "scss", "less") plus ("styl") for all non-Angular and ("styled-components", "@emotion/styled", "styled-jsx") for React, Next.js, Gatsby options: ("css", "scss", "less") plus ("styl") for all non-Angular and ("styled-components", "@emotion/styled", "styled-jsx") for React, Next.js
interactive Enable interactive mode when using presets (boolean) interactive Enable interactive mode when using presets (boolean)
@ -424,14 +419,7 @@ function determineStyle(preset: Preset, parsedArgs: any) {
}); });
} }
if ( if ([Preset.ReactWithExpress, Preset.React, Preset.NextJs].includes(preset)) {
[
Preset.ReactWithExpress,
Preset.React,
Preset.NextJs,
Preset.Gatsby,
].includes(preset)
) {
choices.push( choices.push(
{ {
name: 'styled-components', name: 'styled-components',
@ -689,7 +677,6 @@ function pointToTutorialAndCourse(preset: Preset) {
case Preset.React: case Preset.React:
case Preset.ReactWithExpress: case Preset.ReactWithExpress:
case Preset.NextJs: case Preset.NextJs:
case Preset.Gatsby:
output.addVerticalSeparator(); output.addVerticalSeparator();
output.note({ output.note({
title, title,

24
packages/gatsby/.eslintrc.json
View File

@ -1,24 +0,0 @@
{
"extends": "../../.eslintrc",
"rules": {},
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {}
},
{
"files": ["**/*.ts"],
"excludedFiles": ["./src/migrations/**"],
"rules": {
"no-restricted-imports": [
"error",
"@nrwl/workspace",
"@angular-devkit/core",
"@angular-devkit/schematics",
"@angular-devkit/architect"
]
}
}
],
"ignorePatterns": ["!**/*"]
}

13
packages/gatsby/README.md
View File

@ -1,13 +0,0 @@
<p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx.png" width="600" alt="Nx - Smart, Fast and Extensible Build System"></p>
{{links}}
<hr>
# Nx: Smart, Fast and Extensible Build System
Nx is a next generation build system with first class monorepo support and powerful integrations.
This package is a [Gatsby plugin for Nx](https://nx.dev/gatsby/overview).
{{content}

31
packages/gatsby/babel.ts
View File

@ -1,31 +0,0 @@
/*
* Babel preset to provide Gatsby support for Nx.
*/
interface GatsbyBabelOptions {
reactRuntime?: string;
reactImportSource?: string;
}
module.exports = function (api: any, presetOptions: GatsbyBabelOptions) {
api.assertVersion(7);
return {
presets: [
'@nrwl/web/babel',
[
require.resolve('babel-preset-gatsby'),
getGatsbyBabelOptions({ presetOptions }),
],
],
};
};
function getGatsbyBabelOptions({ presetOptions }) {
const gatsbyPresetOptions: Record<string, string | boolean> = {
reactRuntime: presetOptions.reactRuntime ?? 'automatic',
};
if (presetOptions.reactImportSource) {
gatsbyPresetOptions.reactImportSource = presetOptions.reactImportSource;
}
return gatsbyPresetOptions;
}

26
packages/gatsby/executors.json
View File

@ -1,26 +0,0 @@
{
"executors": {
"build": {
"implementation": "./src/executors/build/build.impl",
"schema": "./src/executors/build/schema.json",
"description": "Build a Gatsby app"
},
"server": {
"implementation": "./src/executors/server/server.impl",
"schema": "./src/executors/server/schema.json",
"description": "Starts server for app"
}
},
"builders": {
"build": {
"implementation": "./src/executors/build/compat",
"schema": "./src/executors/build/schema.json",
"description": "Build a Gatsby app"
},
"server": {
"implementation": "./src/executors/server/compat",
"schema": "./src/executors/server/schema.json",
"description": "Starts server for app"
}
}
}

55
packages/gatsby/generators.json
View File

@ -1,55 +0,0 @@
{
"name": "nx/gatsby",
"version": "0.1",
"extends": ["@nrwl/react"],
"schematics": {
"init": {
"factory": "./src/generators/init/init#gatsbyInitSchematic",
"schema": "./src/generators/init/schema.json",
"description": "Initialize the @nrwl/gatsby plugin",
"hidden": true
},
"application": {
"factory": "./src/generators/application/application#applicationSchematic",
"schema": "./src/generators/application/schema.json",
"aliases": ["app"],
"x-type": "application",
"description": "Create an application"
},
"component": {
"factory": "./src/generators/component/component#componentSchematic",
"schema": "./src/generators/component/schema.json",
"description": "Create a component"
},
"page": {
"factory": "./src/generators/page/page#pageSchematic",
"schema": "./src/generators/page/schema.json",
"description": "Create a page"
}
},
"generators": {
"init": {
"factory": "./src/generators/init/init",
"schema": "./src/generators/init/schema.json",
"description": "Initialize the @nrwl/gatsby plugin",
"hidden": true
},
"application": {
"factory": "./src/generators/application/application",
"schema": "./src/generators/application/schema.json",
"aliases": ["app"],
"x-type": "application",
"description": "Create an application"
},
"component": {
"factory": "./src/generators/component/component",
"schema": "./src/generators/component/schema.json",
"description": "Create a component"
},
"page": {
"factory": "./src/generators/page/page",
"schema": "./src/generators/page/schema.json",
"description": "Create a page"
}
}
}

3
packages/gatsby/index.ts
View File

@ -1,3 +0,0 @@
export { applicationGenerator } from './src/generators/application/application';
export { componentGenerator } from './src/generators/component/component';
export { pageGenerator } from './src/generators/page/page';

10
packages/gatsby/jest.config.js
View File

@ -1,10 +0,0 @@
module.exports = {
preset: '../../jest.preset.js',
transform: {
'^.+\\.[tj]sx?$': 'ts-jest',
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
globals: { 'ts-jest': { tsconfig: '<rootDir>/tsconfig.spec.json' } },
displayName: 'gatsby',
testEnvironment: 'node',
};

458
packages/gatsby/migrations.json
View File

@ -1,458 +0,0 @@
{
"schematics": {
"add-js-include-11.6.0": {
"cli": "nx",
"version": "11.6.0-beta.0",
"description": "Add js patterns to tsconfig.app.json",
"factory": "./src/migrations/update-11-6-0/add-js-include-11-6-0"
},
"replace-node-sass-with-sass-12-6-1": {
"cli": "nx",
"version": "12.6.0-beta.12",
"description": "Replace node-sass with sass in package.json",
"factory": "./src/migrations/update-12-6-1/replace-node-sass-with-sass-12-6-1"
},
"replace-gatsby-image-with-gatsby-plugin-image-12.9.1": {
"cli": "nx",
"version": "12.9.1-beta.1",
"description": "Replace gatsby-image with gatsby-image-plugin in package.json",
"factory": "./src/migrations/update-12-9-1/replace-gatsby-image-with-gatsby-plugin-image-12-9-1"
}
},
"packageJsonUpdates": {
"12.0.0": {
"version": "12.0.0-beta.0",
"packages": {
"gatsby": {
"version": "3.1.3",
"alwaysAddToPackageJson": false
},
"gatsby-image": {
"version": "3.1.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-manifest": {
"version": "3.1.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-offline": {
"version": "4.1.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-react-helmet": {
"version": "4.1.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-sharp": {
"version": "3.1.3",
"alwaysAddToPackageJson": false
},
"gatsby-source-filesystem": {
"version": "3.1.0",
"alwaysAddToPackageJson": false
},
"gatsby-transformer-sharp": {
"version": "3.1.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-typescript": {
"version": "3.1.0",
"alwaysAddToPackageJson": false
},
"@testing-library/react": {
"version": "11.2.6",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-emotion": {
"version": "6.1.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-styled-components": {
"version": "4.1.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-sass": {
"version": "4.1.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-less": {
"version": "5.1.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-stylus": {
"version": "3.1.0",
"alwaysAddToPackageJson": false
},
"node-sass": {
"version": "5.0.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-svgr": {
"version": "3.0.0-beta.0",
"alwaysAddToPackageJson": false
}
}
},
"12.3.0": {
"version": "12.3.0-beta.0",
"packages": {
"gatsby": {
"version": "3.5.0",
"alwaysAddToPackageJson": false
},
"gatsby-image": {
"version": "3.5.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-manifest": {
"version": "3.5.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-offline": {
"version": "4.5.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-react-helmet": {
"version": "4.5.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-sharp": {
"version": "3.5.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-styled-jsx": {
"version": "4.5.0",
"alwaysAddToPackageJson": false
},
"gatsby-source-filesystem": {
"version": "3.5.0",
"alwaysAddToPackageJson": false
},
"gatsby-transformer-sharp": {
"version": "3.5.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-typescript": {
"version": "3.5.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-emotion": {
"version": "6.5.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-styled-components": {
"version": "4.5.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-sass": {
"version": "4.5.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-less": {
"version": "5.5.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-stylus": {
"version": "3.5.0",
"alwaysAddToPackageJson": false
}
}
},
"12.6.0": {
"version": "12.6.0-beta.12",
"packages": {
"gatsby": {
"version": "3.10.0",
"alwaysAddToPackageJson": false
},
"gatsby-image": {
"version": "3.10.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-manifest": {
"version": "3.10.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-offline": {
"version": "4.10.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-react-helmet": {
"version": "4.10.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-sharp": {
"version": "3.10.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-styled-jsx": {
"version": "4.10.0",
"alwaysAddToPackageJson": false
},
"gatsby-source-filesystem": {
"version": "3.10.0",
"alwaysAddToPackageJson": false
},
"gatsby-transformer-sharp": {
"version": "3.10.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-typescript": {
"version": "3.10.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-emotion": {
"version": "6.10.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-styled-components": {
"version": "4.10.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-sass": {
"version": "4.10.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-less": {
"version": "5.10.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-stylus": {
"version": "3.10.0",
"alwaysAddToPackageJson": false
},
"@testing-library/react": {
"version": "12.0.0",
"alwaysAddToPackageJson": false
}
}
},
"12.9.1": {
"version": "12.9.1-beta.1",
"packages": {
"gatsby": {
"version": "3.14.0",
"alwaysAddToPackageJson": false
},
"gatsby-image": {
"version": "3.11.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-manifest": {
"version": "3.14.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-offline": {
"version": "4.14.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-react-helmet": {
"version": "4.14.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-sharp": {
"version": "3.14.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-styled-jsx": {
"version": "4.14.0",
"alwaysAddToPackageJson": false
},
"gatsby-source-filesystem": {
"version": "3.14.0",
"alwaysAddToPackageJson": false
},
"gatsby-transformer-sharp": {
"version": "3.14.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-typescript": {
"version": "3.14.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-emotion": {
"version": "6.14.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-styled-components": {
"version": "4.14.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-sass": {
"version": "4.14.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-less": {
"version": "5.14.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-pnpm": {
"version": "1.2.8",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-stylus": {
"version": "3.14.0",
"alwaysAddToPackageJson": false
},
"sass": {
"version": "1.41.1",
"alwaysAddToPackageJson": false
},
"@testing-library/react": {
"version": "12.1.0",
"alwaysAddToPackageJson": false
}
}
},
"13.2.0": {
"version": "13.2.0-beta.0",
"packages": {
"gatsby": {
"version": "4.1.3",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-image": {
"version": "2.1.1",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-manifest": {
"version": "4.1.2",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-offline": {
"version": "5.1.2",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-react-helmet": {
"version": "5.1.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-sharp": {
"version": "4.1.2",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-styled-jsx": {
"version": "5.1.0",
"alwaysAddToPackageJson": false
},
"gatsby-source-filesystem": {
"version": "4.1.1",
"alwaysAddToPackageJson": false
},
"gatsby-transformer-sharp": {
"version": "4.1.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-typescript": {
"version": "4.1.1",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-emotion": {
"version": "7.1.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-styled-components": {
"version": "5.1.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-sass": {
"version": "5.1.1",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-less": {
"version": "6.1.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-stylus": {
"version": "4.1.0",
"alwaysAddToPackageJson": false
},
"sass": {
"version": "1.41.1",
"alwaysAddToPackageJson": false
},
"@testing-library/react": {
"version": "12.1.2",
"alwaysAddToPackageJson": false
}
}
},
"13.2.1": {
"version": "13.2.0-beta.0",
"packages": {
"gatsby": {
"version": "4.2.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-image": {
"version": "2.2.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-manifest": {
"version": "4.2.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-offline": {
"version": "5.2.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-react-helmet": {
"version": "5.2.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-sharp": {
"version": "4.2.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-styled-jsx": {
"version": "5.2.0",
"alwaysAddToPackageJson": false
},
"gatsby-source-filesystem": {
"version": "4.2.0",
"alwaysAddToPackageJson": false
},
"gatsby-transformer-sharp": {
"version": "4.2.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-typescript": {
"version": "4.2.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-emotion": {
"version": "7.2.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-styled-components": {
"version": "5.2.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-sass": {
"version": "5.2.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-less": {
"version": "6.2.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-stylus": {
"version": "4.2.0",
"alwaysAddToPackageJson": false
},
"gatsby-plugin-pnpm": {
"version": "1.2.9",
"alwaysAddToPackageJson": false
},
"babel-preset-gatsby": {
"version": "2.2.0",
"alwaysAddToPackageJson": false
},
"babel-plugin-module-resolver": {
"version": "4.1.0",
"alwaysAddToPackageJson": false
}
}
}
}
}

12
packages/gatsby/migrations.spec.ts
View File

@ -1,12 +0,0 @@
import path = require('path');
import json = require('./migrations.json');
describe('Gatsby migrations', () => {
it('should have valid paths', () => {
Object.values(json.schematics).forEach((m) => {
expect(() =>
require.resolve(path.join(__dirname, `${m.factory}.ts`))
).not.toThrow();
});
});
});

45
packages/gatsby/package.json
View File

@ -1,45 +0,0 @@
{
"name": "@nrwl/gatsby",
"version": "0.0.1",
"description": "Gatsby Plugin for Nx",
"repository": {
"type": "git",
"url": "https://github.com/nrwl/nx.git",
"directory": "packages/gatsby"
},
"keywords": [
"Monorepo",
"Gatsby",
"Web",
"Jest",
"Cypress",
"CLI"
],
"main": "./index.js",
"typings": "./index.d.ts",
"author": "Victor Savkin",
"license": "MIT",
"bugs": {
"url": "https://github.com/nrwl/nx/issues"
},
"homepage": "https://nx.dev",
"schematics": "./generators.json",
"builders": "./executors.json",
"ng-update": {
"requirements": {},
"migrations": "./migrations.json"
},
"peerDependencies": {
"gatsby": "^4.2.0"
},
"dependencies": {
"@nrwl/cypress": "*",
"@nrwl/linter": "*",
"@nrwl/devkit": "*",
"@nrwl/jest": "*",
"@nrwl/react": "*",
"@nrwl/workspace": "*",
"gatsby-cli": "^4.2.0",
"gatsby-codemods": "^3.2.0"
}
}

3
packages/gatsby/plugins/nx-gatsby-ext-plugin/gatsby-config.ts
View File

@ -1,3 +0,0 @@
module.exports = {
plugins: [`gatsby-plugin-typescript`],
};

26
packages/gatsby/plugins/nx-gatsby-ext-plugin/gatsby-node.ts
View File

@ -1,26 +0,0 @@
import * as path from 'path';
import { appRootPath } from '@nrwl/tao/src/utils/app-root';
import { readJsonFile } from '@nrwl/devkit';
function onCreateBabelConfig({ actions }, options) {
const tsConfig = readJsonFile(path.join(appRootPath, 'tsconfig.base.json'));
const tsConfigPaths: { [key: string]: Array<string> } =
tsConfig.compilerOptions.paths;
const paths = Object.entries(tsConfigPaths).reduce((result, [key, paths]) => {
return {
...result,
[key]: paths.map((p) => path.join(appRootPath, p)),
};
}, {});
actions.setBabelPlugin({
name: require.resolve(`babel-plugin-module-resolver`),
options: {
root: ['./src'],
alias: paths,
},
});
}
export { onCreateBabelConfig };

6
packages/gatsby/plugins/nx-gatsby-ext-plugin/package.json
View File

@ -1,6 +0,0 @@
{
"name": "nx-gatsby-ext-plugin",
"version": "1.0.0",
"main": "gatsby-config.js",
"license": "MIT"
}

87
packages/gatsby/project.json
View File

@ -1,87 +0,0 @@
{
"root": "packages/gatsby",
"sourceRoot": "packages/gatsby",
"projectType": "library",
"targets": {
"test": {
"executor": "@nrwl/jest:jest",
"options": {
"jestConfig": "packages/gatsby/jest.config.js",
"passWithNoTests": true
},
"outputs": ["coverage/packages/gatsby"]
},
"build-base": {
"executor": "@nrwl/js:tsc",
"options": {
"outputPath": "build/packages/gatsby",
"tsConfig": "packages/gatsby/tsconfig.lib.json",
"main": "packages/gatsby/index.ts",
"assets": [
{
"input": "packages/gatsby/src",
"glob": "**/.babelrc*",
"output": "./src"
},
{
"input": "packages/gatsby/src",
"glob": "**/*.!(ts)",
"output": "./src"
},
{
"input": "packages/gatsby/plugins",
"glob": "**/*.!(ts)",
"output": "./plugins"
},
{
"input": "packages/gatsby",
"glob": "**/*.json",
"ignore": ["**/tsconfig*.json", "project.json"],
"output": "/"
},
{
"input": "packages/gatsby",
"glob": "**/*.js",
"ignore": ["**/jest.config.js"],
"output": "/"
},
{
"input": "packages/gatsby",
"glob": "**/*.d.ts",
"output": "/"
},
"LICENSE"
]
},
"outputs": ["{options.outputPath}"]
},
"build": {
"executor": "@nrwl/workspace:run-commands",
"outputs": ["build/packages/gatsby"],
"options": {
"commands": [
{
"command": "node ./scripts/copy-readme.js gatsby"
}
],
"parallel": false
}
},
"lint": {
"executor": "@nrwl/linter:eslint",
"options": {
"lintFilePatterns": [
"packages/gatsby/**/*.ts",
"packages/gatsby/**/*.spec.ts",
"packages/gatsby/**/*_spec.ts",
"packages/gatsby/**/*.spec.tsx",
"packages/gatsby/**/*.spec.js",
"packages/gatsby/**/*.spec.jsx",
"packages/gatsby/**/*.d.ts"
]
},
"outputs": ["{options.outputFile}"]
}
},
"tags": []
}

75
packages/gatsby/src/executors/build/build.impl.ts
View File

@ -1,75 +0,0 @@
import { fork } from 'child_process';
import { join } from 'path';
import { GatsbyPluginBuilderSchema } from './schema';
import { ExecutorContext } from '@nrwl/tao/src/shared/workspace';
export default async function buildExecutor(
options: GatsbyPluginBuilderSchema,
context: ExecutorContext
) {
const projectRoot = context.workspace.projects[context.projectName].root;
await runGatsbyBuild(context.root, projectRoot, context.projectName, options);
return { success: true };
}
export function runGatsbyBuild(
workspaceRoot: string,
projectRoot: string,
projectName: string,
options: GatsbyPluginBuilderSchema
) {
return new Promise<void>((resolve, reject) => {
const cp = fork(
require.resolve('gatsby-cli'),
['build', ...createGatsbyBuildOptions(options)],
{
cwd: join(workspaceRoot, projectRoot),
}
);
// Ensure the child process is killed when the parent exits
process.on('exit', () => cp.kill());
process.on('SIGTERM', () => cp.kill());
cp.on('error', (err) => {
reject(err);
});
cp.on('exit', (code) => {
if (code === 0) {
resolve();
} else {
reject(
new Error(`Could not build "${projectName}". See errors above.`)
);
}
});
});
}
function createGatsbyBuildOptions(options: GatsbyPluginBuilderSchema) {
return Object.keys(options).reduce((acc, k) => {
const val = options[k];
if (typeof val === 'undefined') return acc;
switch (k) {
case 'prefixPaths':
return val ? acc.concat(`--prefix-paths`) : acc;
case 'uglify':
return val ? acc : acc.concat('--no-uglify');
case 'color':
return val ? acc : acc.concat('--no-color');
case 'profile':
return val ? acc.concat('--profile') : acc;
case 'openTracingConfigFile':
return val ? acc.concat([`--open-tracing-config-file`, val]) : acc;
case 'graphqlTracing':
return val ? acc.concat('--graphql-tracing') : acc;
case 'serve':
case 'host':
case 'port':
default:
return acc;
}
}, []);
}

5
packages/gatsby/src/executors/build/compat.ts
View File

@ -1,5 +0,0 @@
import { convertNxExecutor } from '@nrwl/devkit';
import buildExecutor from './build.impl';
export default convertNxExecutor(buildExecutor);

8
packages/gatsby/src/executors/build/schema.d.ts vendored
View File

@ -1,8 +0,0 @@
export interface GatsbyPluginBuilderSchema {
prefixPaths?: boolean;
uglify?: boolean;
profile?: boolean;
openTracingConfigFile?: string;
graphqlTracing?: boolean;
color?: boolean;
}

36
packages/gatsby/src/executors/build/schema.json
View File

@ -1,36 +0,0 @@
{
"cli": "nx",
"$schema": "http://json-schema.org/schema",
"title": "GatsbyPlugin builder",
"description": "",
"type": "object",
"properties": {
"prefixPaths": {
"type": "boolean",
"description": "Build site with link paths prefixed (set pathPrefix in your config)."
},
"uglify": {
"type": "boolean",
"description": "Build site without uglifying JS bundles (true by default).",
"default": true
},
"profile": {
"type": "boolean",
"description": "Build site with react profiling."
},
"openTracingConfigFile": {
"type": "string",
"description": "Tracer configuration file (OpenTracing compatible)."
},
"graphqlTracing": {
"type": "boolean",
"description": "Trace every graphql resolver, may have performance implications."
},
"color": {
"type": "boolean",
"description": "Enable colored terminal output.",
"default": true
}
},
"required": []
}

5
packages/gatsby/src/executors/server/compat.ts
View File

@ -1,5 +0,0 @@
import { convertNxExecutor } from '@nrwl/devkit';
import serverExecutor from './server.impl';
export default convertNxExecutor(serverExecutor);

7
packages/gatsby/src/executors/server/schema.d.ts vendored
View File

@ -1,7 +0,0 @@
export interface GatsbyPluginBuilderSchema {
buildTarget: string;
host: string;
port: string;
open: boolean;
https: boolean;
}

32
packages/gatsby/src/executors/server/schema.json
View File

@ -1,32 +0,0 @@
{
"cli": "nx",
"title": "Gatsby development server",
"description": "Gatsby development server",
"type": "object",
"properties": {
"buildTarget": {
"type": "string",
"description": "Target which builds the application"
},
"port": {
"type": "number",
"description": "Port to listen on.",
"default": 4200
},
"host": {
"type": "string",
"description": "Host to listen on.",
"default": "localhost"
},
"https": {
"type": "boolean",
"description": "Serve using HTTPS.",
"default": false
},
"open": {
"type": "boolean",
"description": "Open the site in your (default) browser for you."
}
},
"required": []
}

167
packages/gatsby/src/executors/server/server.impl.ts
View File

@ -1,167 +0,0 @@
import {
ExecutorContext,
parseTargetString,
readTargetOptions,
} from '@nrwl/devkit';
import { ChildProcess, fork } from 'child_process';
import { join } from 'path';
import { runGatsbyBuild } from '../build/build.impl';
import { GatsbyPluginBuilderSchema as BuildBuilderSchema } from '../build/schema';
import { GatsbyPluginBuilderSchema } from './schema';
export default async function* serverExecutor(
options: GatsbyPluginBuilderSchema,
context: ExecutorContext
) {
const buildTarget = parseTargetString(options.buildTarget);
const baseUrl = `${options.https ? 'https' : 'http'}://${options.host}:${
options.port
}`;
const projectRoot = context.workspace.projects[context.projectName].root;
const buildOptions = readTargetOptions<BuildBuilderSchema>(
buildTarget,
context
);
try {
if (context.configurationName === 'production') {
await runGatsbyBuild(
context.root,
projectRoot,
context.projectName,
buildOptions
);
await runGatsbyServe(context.root, projectRoot, options);
yield { baseUrl, success: true };
} else {
const success = await runGatsbyDevelop(
context.root,
projectRoot,
createGatsbyOptions(options)
);
yield {
baseUrl,
success,
};
}
// This Promise intentionally never resolves, leaving the process running
await new Promise<{ success: boolean }>(() => {});
} finally {
if (childProcess) {
childProcess.kill();
}
}
}
function createGatsbyOptions(options) {
return Object.keys(options).reduce((acc, k) => {
if (k === 'port' || k === 'host' || k === 'https' || k === 'open')
acc.push(`--${k}=${options[k]}`);
return acc;
}, []);
}
let childProcess: ChildProcess;
async function runGatsbyDevelop(workspaceRoot, projectRoot, options) {
return new Promise<boolean>((resolve, reject) => {
childProcess = fork(
require.resolve('gatsby-cli'),
['develop', ...options],
{
cwd: join(workspaceRoot, projectRoot),
env: {
...process.env,
},
stdio: ['inherit', 'inherit', 'inherit', 'ipc'],
}
);
childProcess.on('message', ({ action }: any) => {
if (
action?.type === 'ACTIVITY_END' &&
action?.payload?.status === 'SUCCESS' &&
action?.payload?.id === 'webpack-develop'
) {
resolve(true);
}
});
childProcess.on('error', (err) => {
reject(err);
});
childProcess.on('exit', (code) => {
if (code !== 0) {
reject(
new Error(
'Could not start Gatsby Development Server. See errors above.'
)
);
}
});
});
}
function runGatsbyServe(
workspaceRoot: string,
projectRoot: string,
options: GatsbyPluginBuilderSchema
) {
return new Promise((resolve, reject) => {
childProcess = fork(
require.resolve('gatsby-cli'),
['serve', ...createGatsbyServeOptions(options)],
{ cwd: join(workspaceRoot, projectRoot) }
);
childProcess.on('message', ({ action }: any) => {
if (
action?.type === 'LOG' &&
action?.payload?.text?.includes(options.host) &&
action?.payload?.text?.includes(options.port)
) {
resolve(true);
}
});
childProcess.on('error', (err) => {
reject(err);
});
childProcess.on('exit', (code) => {
if (code === 0) {
resolve(code);
} else {
reject(
new Error(
'Could not start Gatsby Production Server. See errors above.'
)
);
}
});
});
}
function createGatsbyServeOptions(options: GatsbyPluginBuilderSchema) {
return Object.keys(options).reduce((acc, k) => {
const val = options[k];
if (typeof val === 'undefined') return acc;
switch (k) {
case 'host':
return val ? acc.concat([`--host`, val]) : acc;
case 'open':
return val ? acc.concat(`--open`) : acc;
case 'prefixPaths':
return val ? acc.concat(`--prefix-paths`) : acc;
case 'port':
return val ? acc.concat([`--port`, val]) : acc;
default:
return acc;
}
}, []);
}

407
packages/gatsby/src/generators/application/application.spec.ts
View File

@ -1,407 +0,0 @@
import { NxJsonConfiguration, readProjectConfiguration } from '@nrwl/devkit';
import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
import { applicationGenerator } from './application';
import { readJson, Tree } from '@nrwl/devkit';
describe('app', () => {
let tree: Tree;
beforeEach(() => {
tree = createTreeWithEmptyWorkspace();
tree.write('.gitignore', '# empty');
tree.write('.prettierignore', '# empty');
});
it('should update workspace.json', async () => {
await applicationGenerator(tree, {
name: 'myApp',
style: 'css',
standaloneConfig: false,
});
const workspaceJson = readJson(tree, '/workspace.json');
const nxJson = readJson<NxJsonConfiguration>(tree, 'nx.json');
expect(workspaceJson.projects['my-app'].root).toEqual('apps/my-app');
expect(workspaceJson.projects['my-app-e2e'].root).toEqual(
'apps/my-app-e2e'
);
expect(nxJson.defaultProject).toEqual('my-app');
});
it('should update tags + implicitDependencies', async () => {
await applicationGenerator(tree, {
name: 'myApp',
style: 'css',
tags: 'one,two',
standaloneConfig: false,
});
const myAppConfig = readProjectConfiguration(tree, 'my-app');
const myAppConfigE2E = readProjectConfiguration(tree, 'my-app-e2e');
expect({
'my-app': { tags: myAppConfig.tags },
'my-app-e2e': {
tags: myAppConfigE2E.tags,
implicitDependencies: myAppConfigE2E.implicitDependencies,
},
}).toEqual({
'my-app': {
tags: ['one', 'two'],
},
'my-app-e2e': {
tags: [],
implicitDependencies: ['my-app'],
},
});
});
it('should generate files', async () => {
await applicationGenerator(tree, {
name: 'myApp',
style: 'css',
standaloneConfig: false,
});
expect(tree.exists('apps/my-app/tsconfig.json')).toBeTruthy();
expect(tree.exists('apps/my-app/tsconfig.app.json')).toBeTruthy();
expect(tree.exists('apps/my-app/src/pages/index.tsx')).toBeTruthy();
expect(tree.exists('apps/my-app/src/pages/index.spec.tsx')).toBeTruthy();
expect(tree.exists('apps/my-app/src/pages/index.module.css')).toBeTruthy();
});
describe('--style scss', () => {
it('should generate scss styles', async () => {
await applicationGenerator(tree, {
name: 'myApp',
style: 'scss',
standaloneConfig: false,
});
expect(
tree.exists('apps/my-app/src/pages/index.module.scss')
).toBeTruthy();
const indexContent = tree
.read('apps/my-app/src/pages/index.tsx')
.toString();
expect(indexContent).toContain(
`import * as styles from './index.module.scss'`
);
const nxJson = readJson<NxJsonConfiguration>(tree, 'nx.json');
expect(nxJson.generators['@nrwl/gatsby'].application.style).toEqual(
'scss'
);
});
});
describe('--style less', () => {
it('should generate less styles', async () => {
await applicationGenerator(tree, {
name: 'myApp',
style: 'less',
standaloneConfig: false,
});
expect(
tree.exists('apps/my-app/src/pages/index.module.less')
).toBeTruthy();
const indexContent = tree
.read('apps/my-app/src/pages/index.tsx')
.toString();
expect(indexContent).toContain(
`import * as styles from './index.module.less'`
);
const nxJson = readJson<NxJsonConfiguration>(tree, 'nx.json');
expect(nxJson.generators['@nrwl/gatsby'].application.style).toEqual(
'less'
);
});
});
describe('--style styl', () => {
it('should generate stylus styles', async () => {
await applicationGenerator(tree, {
name: 'myApp',
style: 'styl',
standaloneConfig: false,
});
expect(
tree.exists('apps/my-app/src/pages/index.module.styl')
).toBeTruthy();
const indexContent = tree
.read('apps/my-app/src/pages/index.tsx')
.toString();
expect(indexContent).toContain(
`import * as styles from './index.module.styl'`
);
const nxJson = readJson<NxJsonConfiguration>(tree, 'nx.json');
expect(nxJson.generators['@nrwl/gatsby'].application.style).toEqual(
'styl'
);
});
});
describe('--style styled-components', () => {
it('should generate scss styles', async () => {
await applicationGenerator(tree, {
name: 'myApp',
style: 'styled-components',
standaloneConfig: false,
});
expect(
tree.exists('apps/my-app/src/pages/index.module.styled-components')
).toBeFalsy();
const indexContent = tree
.read('apps/my-app/src/pages/index.tsx')
.toString();
expect(indexContent).not.toContain(
`import * as styles from './index.module`
);
expect(indexContent).toContain(`import styled from 'styled-components'`);
const nxJson = readJson<NxJsonConfiguration>(tree, 'nx.json');
expect(nxJson.generators['@nrwl/gatsby'].application.style).toEqual(
'styled-components'
);
});
});
describe('--style @emotion/styled', () => {
it('should generate emotion styles', async () => {
await applicationGenerator(tree, {
name: 'myApp',
style: '@emotion/styled',
standaloneConfig: false,
});
expect(
tree.exists('apps/my-app/src/pages/index.module.styled-components')
).toBeFalsy();
const indexContent = tree
.read('apps/my-app/src/pages/index.tsx')
.toString();
expect(indexContent).not.toContain(
`import * as styles from './index.module`
);
expect(indexContent).toContain(`import styled from '@emotion/styled'`);
const nxJson = readJson<NxJsonConfiguration>(tree, 'nx.json');
expect(nxJson.generators['@nrwl/gatsby'].application.style).toEqual(
'@emotion/styled'
);
});
});
describe('--style styled-jsx', () => {
it('should use <style jsx> in index page', async () => {
await applicationGenerator(tree, {
name: 'myApp',
style: 'styled-jsx',
standaloneConfig: false,
});
const indexContent = tree
.read('apps/my-app/src/pages/index.tsx')
.toString();
expect(indexContent).toMatch(/<style jsx>/);
expect(
tree.exists('apps/my-app/src/pages/index.module.styled-jsx')
).toBeFalsy();
expect(indexContent).not.toContain(
`import * as styles from './index.module`
);
expect(indexContent).not.toContain(
`import styled from 'styled-components'`
);
const nxJson = readJson<NxJsonConfiguration>(tree, 'nx.json');
expect(nxJson.generators['@nrwl/gatsby'].application.style).toEqual(
'styled-jsx'
);
});
});
it('should setup jest with tsx support', async () => {
await applicationGenerator(tree, {
name: 'my-app',
style: 'css',
standaloneConfig: false,
});
expect(tree.read('apps/my-app/jest.config.js', 'utf-8')).toContain(
`moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],`
);
});
it('should setup jest with SVGR support', async () => {
await applicationGenerator(tree, {
name: 'my-app',
style: 'css',
standaloneConfig: false,
});
expect(tree.read('apps/my-app/jest.config.js', 'utf-8')).toContain(
`'^(?!.*\\\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest'`
);
});
it('should set up the nrwl gatsby build builder', async () => {
await applicationGenerator(tree, {
name: 'my-app',
style: 'css',
standaloneConfig: false,
});
const workspaceJson = readJson(tree, 'workspace.json');
const architectConfig = workspaceJson.projects['my-app'].architect;
expect(architectConfig.build.builder).toEqual('@nrwl/gatsby:build');
expect(architectConfig.build.options).toMatchObject({
outputPath: 'apps/my-app/public',
});
});
it('should set up the nrwl gatsby server builder', async () => {
await applicationGenerator(tree, {
name: 'my-app',
style: 'css',
standaloneConfig: false,
});
const workspaceJson = readJson(tree, 'workspace.json');
const architectConfig = workspaceJson.projects['my-app'].architect;
expect(architectConfig.serve.builder).toEqual('@nrwl/gatsby:server');
expect(architectConfig.serve.options).toMatchObject({
buildTarget: 'my-app:build',
});
expect(architectConfig.serve.configurations).toEqual({
production: { buildTarget: 'my-app:build:production' },
});
});
describe('--unit-test-runner none', () => {
it('should not generate test configuration', async () => {
await applicationGenerator(tree, {
name: 'myApp',
style: 'css',
unitTestRunner: 'none',
standaloneConfig: false,
});
expect(tree.exists('jest.config.js')).toBeFalsy();
expect(tree.exists('apps/my-app/specs/index.spec.tsx')).toBeFalsy();
});
});
describe('--e2e-test-runner none', () => {
it('should not generate test configuration', async () => {
await applicationGenerator(tree, {
name: 'myApp',
style: 'css',
e2eTestRunner: 'none',
standaloneConfig: false,
});
expect(tree.exists('apps/my-app-e2e')).toBeFalsy();
const workspaceJson = readJson(tree, 'workspace.json');
expect(workspaceJson.projects['my-app-e2e']).toBeUndefined();
});
});
it('should generate an index component', async () => {
await applicationGenerator(tree, {
name: 'myApp',
style: 'css',
standaloneConfig: false,
});
const appContent = tree.read('apps/my-app/src/pages/index.tsx', 'utf-8');
expect(appContent).not.toMatch(/extends Component/);
});
it('should add .eslintrc.json and dependencies', async () => {
await applicationGenerator(tree, {
name: 'myApp',
style: 'css',
standaloneConfig: false,
});
const packageJson = readJson(tree, '/package.json');
expect(packageJson).toMatchObject({
devDependencies: {
'eslint-plugin-react': expect.anything(),
'eslint-plugin-react-hooks': expect.anything(),
},
});
const eslintJson = readJson(tree, '/apps/my-app/.eslintrc.json');
expect(eslintJson).toMatchInlineSnapshot(`
Object {
"extends": Array [
"plugin:@nrwl/nx/react",
"../../.eslintrc.json",
],
"ignorePatterns": Array [
"!**/*",
"public",
".cache",
],
"overrides": Array [
Object {
"files": Array [
"*.ts",
"*.tsx",
"*.js",
"*.jsx",
],
"rules": Object {},
},
Object {
"files": Array [
"*.ts",
"*.tsx",
],
"rules": Object {
"@typescript-eslint/camelcase": "off",
},
},
Object {
"files": Array [
"*.js",
"*.jsx",
],
"rules": Object {},
},
],
}
`);
});
describe('--js', () => {
it('generates JS files', async () => {
await applicationGenerator(tree, {
name: 'myApp',
style: 'css',
js: true,
standaloneConfig: false,
});
expect(tree.exists('apps/my-app/src/pages/index.js')).toBeTruthy();
expect(tree.exists('apps/my-app/src/pages/index.spec.js')).toBeTruthy();
const tsConfig = readJson(tree, 'apps/my-app/tsconfig.json');
expect(tsConfig.compilerOptions.allowJs).toEqual(true);
const tsConfigApp = readJson(tree, 'apps/my-app/tsconfig.app.json');
expect(tsConfigApp.include).toContain('**/*.js');
expect(tsConfigApp.exclude).toEqual(
expect.arrayContaining([
'**/*.spec.js',
'**/*.test.js',
'**/*.spec.jsx',
'**/*.test.jsx',
])
);
});
});
});

49
packages/gatsby/src/generators/application/application.ts
View File

@ -1,49 +0,0 @@
import { convertNxGenerator, formatFiles, Tree } from '@nrwl/devkit';
import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
import { gatsbyInitGenerator } from '../init/init';
import { Schema } from './schema';
import { normalizeOptions } from './lib/normalize-options';
import { addCypress } from './lib/add-cypress';
import { addJest } from './lib/add-jest';
import { addLinting } from './lib/add-linting';
import { addProject } from './lib/add-project';
import { createApplicationFiles } from './lib/create-application-files';
import { addStyleDependencies } from '../../utils/styles';
import { updateJestConfig } from './lib/update-jest-config';
import { addPrettierIgnoreEntry } from './lib/add-prettier-ignore-entry';
import { addGitIgnoreEntry } from './lib/add-git-ignore-entry';
import { setDefaults } from './lib/set-defaults';
export async function applicationGenerator(host: Tree, schema: Schema) {
const options = normalizeOptions(host, schema);
const initTask = await gatsbyInitGenerator(host, {
...options,
skipFormat: true,
});
createApplicationFiles(host, options);
addProject(host, options);
const styledTask = addStyleDependencies(host, options.style);
const lintTask = await addLinting(host, options);
const cypressTask = await addCypress(host, options);
const jestTask = await addJest(host, options);
updateJestConfig(host, options);
addPrettierIgnoreEntry(host, options);
addGitIgnoreEntry(host, options);
setDefaults(host, options);
await formatFiles(host);
return runTasksInSerial(
initTask,
styledTask,
lintTask,
cypressTask,
jestTask
);
}
export default applicationGenerator;
export const applicationSchematic = convertNxGenerator(applicationGenerator);

11
packages/gatsby/src/generators/application/files/.babelrc__tmpl__
View File

@ -1,11 +0,0 @@
{
"presets": [
[
"@nrwl/gatsby/babel", {
"reactRuntime": "automatic"
<% if (style === '@emotion/styled') { %>,"reactImportSource": "@emotion/react"<% } %>
}
]
],
"plugins": []
}

69
packages/gatsby/src/generators/application/files/.gitignore vendored
View File

@ -1,69 +0,0 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Typescript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# dotenv environment variable files
.env*
# gatsby files
.cache/
public
# Mac files
.DS_Store
# Yarn
yarn-error.log
.pnp/
.pnp.js
# Yarn Integrity file
.yarn-integrity

4
packages/gatsby/src/generators/application/files/.prettierignore
View File

@ -1,4 +0,0 @@
.cache
package.json
package-lock.json
public

4
packages/gatsby/src/generators/application/files/.prettierrc
View File

@ -1,4 +0,0 @@
{
"arrowParens": "avoid",
"semi": false
}

22
packages/gatsby/src/generators/application/files/LICENSE
View File

@ -1,22 +0,0 @@
The MIT License (MIT)
Copyright (c) 2015 gatsbyjs
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

99
packages/gatsby/src/generators/application/files/README.md
View File

@ -1,99 +0,0 @@
<!-- AUTO-GENERATED-CONTENT:START (STARTER) -->
<p style="text-align: center;">
<a href="https://www.gatsbyjs.org">
<img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" />
</a>
</p>
<h1 align="center">
Gatsby's default starter
</h1>
Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._
## 🚀 Quick start
1. **Create a Gatsby site.**
Use the Gatsby CLI to create a new site, specifying the default starter.
```shell
# create a new Gatsby site using the default starter
gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default
```
1. **Start developing.**
Navigate into your new site’s directory and start it up.
```shell
cd my-default-starter/
gatsby develop
```
1. **Open the source code and start editing!**
Your site is now running at `http://localhost:8000`!
_Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._
Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
## 🧐 What's inside?
A quick look at the top-level files and directories you'll see in a Gatsby project.
.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail).
7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
9. **`LICENSE`**: Gatsby is licensed under the MIT license.
10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
12. **`README.md`**: A text file containing useful reference information about your project.
## 🎓 Learning Gatsby
Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start:
- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
## 💫 Deploy
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default)
[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/import/project?template=https://github.com/gatsbyjs/gatsby-starter-default)
<!-- AUTO-GENERATED-CONTENT:END -->

7
packages/gatsby/src/generators/application/files/gatsby-browser.js
View File

@ -1,7 +0,0 @@
/**
* Implement Gatsby's Browser APIs in this file.
*
* See: https://www.gatsbyjs.org/docs/browser-apis/
*/
// You can delete this file if you're not using it

58
packages/gatsby/src/generators/application/files/gatsby-config.js__tmpl__
View File

@ -1,58 +0,0 @@
module.exports = {
siteMetadata: {
title: `<%= name %>`,
description: `This is a gatsby application created by Nx.`
},
plugins: [
<% if (style === 'less') { %>'gatsby-plugin-less',<% } %>
<% if (style === 'scss') { %>'gatsby-plugin-sass',<% } %>
<% if (style === 'styl') { %>'gatsby-plugin-stylus',<% } %>
<% if (style === 'styled-components') { %>'gatsby-plugin-styled-components',<% } %>
<% if (style === '@emotion/styled') { %>'gatsby-plugin-emotion',<% } %>
<% if (style === 'styled-jsx') { %>'gatsby-plugin-styled-jsx',<% } %>
<% if (isPnpm) { %>
{
resolve: 'gatsby-plugin-pnpm',
options: {
strict: false
}
},
<% } %>
{
resolve: 'gatsby-plugin-svgr',
options: {
svgo: false,
ref: true
}
},
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`
}
},
`gatsby-plugin-image`,
`gatsby-transformer-sharp`,
{
resolve: require.resolve(`@nrwl/gatsby/plugins/nx-gatsby-ext-plugin`),
options: {
path: __dirname
}
},
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `<%= name %>`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/logo.svg`
}
}
]
};

7
packages/gatsby/src/generators/application/files/gatsby-node.js
View File

@ -1,7 +0,0 @@
/**
* Implement Gatsby's Node APIs in this file.
*
* See: https://www.gatsbyjs.org/docs/node-apis/
*/
// You can delete this file if you're not using it

7
packages/gatsby/src/generators/application/files/gatsby-ssr.js
View File

@ -1,7 +0,0 @@
/**
* Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
*
* See: https://www.gatsbyjs.org/docs/ssr-apis/
*/
// You can delete this file if you're not using it

11
packages/gatsby/src/generators/application/files/package.json
View File

@ -1,11 +0,0 @@
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and develop quickly with Gatsby",
"version": "0.0.0",
"license": "MIT",
"dependencies": {
"gatsby": "*",
"gatsby-plugin-image": "*"
}
}

8
packages/gatsby/src/generators/application/files/src/images/logo.svg
View File

@ -1,8 +0,0 @@
<svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M543.321 552.663L465.329 430.752L465.212 533.183L330.799 306.89H236.24V688.908H329.742L330.047 462.898L463.073 678.78L543.321 552.663V552.663Z" fill="#002F56"/>
<path d="M465.352 405.091H558.735L558.947 404.01V306.89H465.446L465.328 404.01L465.352 405.091V405.091Z" fill="#002F56"/>
<path d="M703.065 511C680.694 510.576 660.482 524.292 652.613 545.237C665.713 525.647 690.657 517.775 712.629 526.297C722.78 530.433 736.128 537.107 746.702 533.535C736.645 519.421 720.395 511.029 703.065 511V511Z" fill="#143055"/>
<path d="M809.02 556.963C809.02 545.52 802.793 542.864 789.869 538.165C780.281 534.828 769.401 531.068 761.482 520.728C759.931 518.684 758.498 516.381 756.97 513.937C753.549 507.608 748.909 502.017 743.318 497.488C735.775 491.943 725.882 489.24 713.051 489.24C687.307 489.258 664.113 504.798 654.305 528.601C666.705 511.394 687.313 502.072 708.423 504.118C729.532 506.165 747.966 519.273 756.829 538.541C761.258 545.848 769.992 549.338 778.237 547.094C790.856 544.392 789.986 556.329 809.044 560.371L809.02 556.963Z" fill="#143055"/>
<path d="M850.636 554.519V554.261C850.354 478.501 788.858 413.691 713.051 413.691C666.752 413.659 623.549 436.944 598.119 475.634L597.626 474.788L558.712 413.691H465.352L554.059 552.616L467.49 688.908H558.171L597.626 628.305L637.785 688.908H728.49L646.245 559.477C644.879 556.956 644.138 554.143 644.083 551.276C644.076 532.995 651.336 515.461 664.262 502.534C677.189 489.608 694.723 482.348 713.004 482.355C751.119 482.355 757.487 505.148 765.712 515.864C781.949 537.013 814.378 527.754 814.378 555.342V555.342C814.474 561.806 818.012 567.728 823.659 570.876C829.305 574.025 836.203 573.922 841.753 570.606C847.303 567.29 850.662 561.265 850.566 554.801V554.801V554.519H850.636Z" fill="#002F56"/>
<path d="M850.731 574.023C851.653 580.466 850.741 587.039 848.1 592.987C842.93 604.948 834.306 600.953 834.306 600.953C834.306 600.953 826.88 597.334 831.392 590.402C836.397 582.671 846.29 583.564 850.731 574.023Z" fill="#002F56"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

5
packages/gatsby/src/generators/application/files/src/pages/404.js
View File

@ -1,5 +0,0 @@
import React from "react"
const NotFoundPage = () => <h1>NOT FOUND</h1>
export default NotFoundPage

401
packages/gatsby/src/generators/application/files/src/pages/index.module.__style__
View File

@ -1,401 +0,0 @@
/*
* Remove template code below
*/
:global(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;
}
: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;
}
:global(.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);
}
:global(.rounded) {
border-radius: 1.5rem;
}
:global(.wrapper) {
width: 100%;
}
: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;
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;
}
:global(#hero .text-container) {
color: rgba(255, 255, 255, 1);
padding: 3rem 2rem;
}
:global(#hero .text-container h2) {
font-size: 1.5rem;
line-height: 2rem;
position: relative;
}
:global(#hero .text-container h2 svg) {
color: hsla(162, 47%, 50%, 1);
height: 2rem;
left: -0.25rem;
position: absolute;
top: 0;
width: 2rem;
}
:global(#hero .text-container h2 span) {
margin-left: 2.5rem;
}
:global(#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;
}
:global(#hero .logo-container) {
display: none;
justify-content: center;
padding-left: 2rem;
padding-right: 2rem;
}
:global(#hero .logo-container svg) {
color: rgba(255, 255, 255, 1);
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;
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%;
}
: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;
display: flex;
}
:global(.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;
}
:global(.button-pill > span) {
letter-spacing: -0.025em;
font-weight: 400;
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));
}
}

817
packages/gatsby/src/generators/application/files/src/pages/index.none.tsx__tmpl__
View File

@ -1,817 +0,0 @@
import React from 'react';
export function Index() {
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 <%= 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&apos;re up and running</span>
</h2>
<a href="#commands"> What&apos;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&apos;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 Index;

13
packages/gatsby/src/generators/application/files/src/pages/index.spec.tsx__tmpl__
View File

@ -1,13 +0,0 @@
import React from 'react';
import { render } from '@testing-library/react';
import Index from './index';
describe('Index', () => {
it('should render successfully', () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const props: any = {};
const { getByText } = render(<Index {...props} />);
expect(getByText(/Welcome <%= projectName %>/gi)).toBeTruthy();
});
});

38
packages/gatsby/src/generators/application/files/src/pages/index.tsx__tmpl__
View File

@ -1,38 +0,0 @@
import React from 'react';
<% if (styledModule && styledModule !== 'styled-jsx') {
var wrapper = 'StyledApp';
%>import styled from '<%= styledModule %>';<% } else {
var wrapper = 'div';
%>
<%- styledModule !== 'styled-jsx' ? `import * as styles from './index.module.${style}';` : '' %>
<% }
%>
<% if (styledModule && styledModule !== 'styled-jsx') { %>
const StyledApp = styled.div`
<%- pageWrapperStyle %>
<%- pageStyleContent %>
`;
<% }%>
export function Index() {
/*
* Replace the elements below with your own.
*
* Note: The corresponding styles are in the ./<%= fileName %>.<%= style %> file.
*/
return (
<<%= wrapper %><% if (!styledModule) {%> className={styles.page} <%} else if (styledModule === 'styled-jsx'){%> className='page' <%}%>>
<%- styledModule === 'styled-jsx' ? `<style jsx>{\`
.page {
${pageWrapperStyle}
}
${pageStyleContent}
\`}</style>` : `` %>
<%- appContent %>
</<%= wrapper %>>
);
};
export default Index;

12
packages/gatsby/src/generators/application/files/tsconfig.app.json__tmpl__
View File

@ -1,12 +0,0 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "<%= offsetFromRoot %>dist/out-tsc",
"types": [
<% if (style === 'styled-jsx') { %>"styled-jsx",<% } %>
"node"
]
},
"exclude": ["**/*.spec.ts", "**/*.test.ts", "**/*.spec.tsx", "**/*.test.tsx", "**/*.spec.js", "**/*.test.js", "**/*.spec.jsx", "**/*.test.jsx"],
"include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"]
}

22
packages/gatsby/src/generators/application/files/tsconfig.json__tmpl__
View File

@ -1,22 +0,0 @@
{
"extends": "<%= offsetFromRoot %>tsconfig.base.json",
"compilerOptions": {
"jsx": "preserve",
"allowJs": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"resolveJsonModule": true,
"isolatedModules": true
},
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.app.json"
}
],
"exclude": ["node_modules"]
}

18
packages/gatsby/src/generators/application/lib/add-cypress.ts
View File

@ -1,18 +0,0 @@
import { cypressProjectGenerator } from '@nrwl/cypress';
import { Tree } from '@nrwl/devkit';
import { NormalizedSchema } from './normalize-options';
import { Linter } from '@nrwl/linter';
export async function addCypress(host: Tree, options: NormalizedSchema) {
if (options?.e2eTestRunner !== 'cypress') {
return () => {};
}
return cypressProjectGenerator(host, {
...options,
linter: Linter.EsLint,
name: `${options.name}-e2e`,
directory: options.directory,
project: options.projectName,
});
}

12
packages/gatsby/src/generators/application/lib/add-git-ignore-entry.ts
View File

@ -1,12 +0,0 @@
import { logger, Tree } from '@nrwl/devkit';
import { NormalizedSchema } from './normalize-options';
export function addGitIgnoreEntry(host: Tree, options: NormalizedSchema) {
if (host.exists('.gitignore')) {
let content = host.read('.gitignore', 'utf-8');
content = `${content}\n/apps/${options.projectName}/node_modules\n/apps/${options.projectName}/public\n/apps/${options.projectName}/.cache\n`;
host.write('.gitignore', content);
} else {
logger.warn(`Couldn't find .gitignore file to update`);
}
}

24
packages/gatsby/src/generators/application/lib/add-jest.ts
View File

@ -1,24 +0,0 @@
import { jestProjectGenerator } from '@nrwl/jest';
import { NormalizedSchema } from './normalize-options';
import { Tree, updateJson } from '@nrwl/devkit';
export async function addJest(host: Tree, options: NormalizedSchema) {
if (options?.unitTestRunner !== 'jest') {
return () => {};
}
const installTask = await jestProjectGenerator(host, {
project: options.projectName,
supportTsx: true,
skipSerializers: true,
setupFile: 'none',
compiler: 'babel',
});
updateJson(host, `${options.projectRoot}/tsconfig.spec.json`, (json) => {
json.compilerOptions.jsx = 'react';
return json;
});
return installTask;
}

60
packages/gatsby/src/generators/application/lib/add-linting.ts
View File

@ -1,60 +0,0 @@
import { Tree } from '@nrwl/tao/src/shared/tree';
import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
import { Linter, lintProjectGenerator } from '@nrwl/linter';
import {
addDependenciesToPackageJson,
joinPathFragments,
updateJson,
} from '@nrwl/devkit';
import { extraEslintDependencies, createReactEslintJson } from '@nrwl/react';
import type { Linter as ESLintLinter } from 'eslint';
import { NormalizedSchema } from './normalize-options';
export async function addLinting(host: Tree, options: NormalizedSchema) {
const lintTask = await lintProjectGenerator(host, {
linter: Linter.EsLint,
project: options.projectName,
tsConfigPaths: [
joinPathFragments(options.projectRoot, 'tsconfig.app.json'),
],
eslintFilePatterns: [`${options.projectRoot}/**/*.{ts,tsx,js,jsx}`],
skipFormat: true,
});
const reactEslintJson = createReactEslintJson(
options.projectRoot,
options.setParserOptionsProject
);
updateJson(
host,
joinPathFragments(options.projectRoot, '.eslintrc.json'),
(json: ESLintLinter.Config) => {
json = reactEslintJson;
json.ignorePatterns = ['!**/*', 'public', '.cache'];
for (const override of json.overrides) {
if (!override.files || override.files.length !== 2) {
continue;
}
if (
!(override.files.includes('*.ts') && override.files.includes('*.tsx'))
) {
continue;
}
override.rules = override.rules || {};
override.rules['@typescript-eslint/camelcase'] = 'off';
}
return json;
}
);
const installTask = await addDependenciesToPackageJson(
host,
extraEslintDependencies.dependencies,
extraEslintDependencies.devDependencies
);
return runTasksInSerial(lintTask, installTask);
}

12
packages/gatsby/src/generators/application/lib/add-prettier-ignore-entry.ts
View File

@ -1,12 +0,0 @@
import { logger, Tree } from '@nrwl/devkit';
import { NormalizedSchema } from './normalize-options';
export function addPrettierIgnoreEntry(host: Tree, options: NormalizedSchema) {
if (host.exists('.prettierignore')) {
let content = host.read('.prettierignore', 'utf-8');
content = `${content}\n/apps/${options.projectName}/node_modules\n/apps/${options.projectName}/public\n/apps/${options.projectName}/.cache\n`;
host.write('.prettierignore', content);
} else {
logger.warn(`Couldn't find .prettierignore file to update`);
}
}

51
packages/gatsby/src/generators/application/lib/add-project.ts
View File

@ -1,51 +0,0 @@
import { NormalizedSchema } from './normalize-options';
import {
addProjectConfiguration,
joinPathFragments,
ProjectConfiguration,
Tree,
} from '@nrwl/devkit';
export function addProject(host: Tree, options: NormalizedSchema) {
const targets: Record<string, any> = {};
targets.build = {
builder: '@nrwl/gatsby:build',
options: {
outputPath: `${options.projectRoot}/public`,
uglify: true,
color: true,
profile: false,
},
configurations: {
production: {},
},
};
targets.serve = {
builder: '@nrwl/gatsby:server',
options: {
buildTarget: `${options.projectName}:build`,
},
configurations: {
production: {
buildTarget: `${options.projectName}:build:production`,
},
},
};
const project: ProjectConfiguration = {
root: options.projectRoot,
sourceRoot: joinPathFragments(options.projectRoot, 'src'),
projectType: 'application',
targets,
tags: options.parsedTags,
};
addProjectConfiguration(
host,
options.projectName,
project,
options.standaloneConfig
);
}

819
packages/gatsby/src/generators/application/lib/create-application-files.helpers.ts
View File

@ -1,819 +0,0 @@
export function createAppJsx(name: 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 ${name} 👋
</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&apos;re up and running</span>
</h2>
<a href="#commands"> What&apos;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&apos;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 function createPageWrapperStyle() {
return '';
}
export function createPageStyleContent() {
return '';
}

55
packages/gatsby/src/generators/application/lib/create-application-files.ts
View File

@ -1,55 +0,0 @@
import { join } from 'path';
import { NormalizedSchema } from './normalize-options';
import {
generateFiles,
names,
offsetFromRoot,
toJS,
Tree,
updateTsConfigsToJs,
} from '@nrwl/devkit';
import {
createAppJsx,
createPageStyleContent,
createPageWrapperStyle,
} from './create-application-files.helpers';
export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
const isPnpm = host.exists('pnpm-lock.yaml');
const templateVariables = {
...options,
isPnpm,
...names(options.name),
offsetFromRoot: offsetFromRoot(options.projectRoot),
tmpl: '',
appContent: createAppJsx(options.projectName),
pageWrapperStyle: createPageWrapperStyle(),
pageStyleContent: createPageStyleContent(),
};
generateFiles(
host,
join(__dirname, '../files'),
options.projectRoot,
templateVariables
);
if (options.styledModule) {
host.delete(
`${options.projectRoot}/src/pages/index.module.${options.style}`
);
}
if (options.style === 'none') {
host.delete(`${options.projectRoot}/src/pages/index.tsx`);
host.rename(
`${options.projectRoot}/src/pages/index.none.tsx`,
`${options.projectRoot}/src/pages/index.tsx`
);
} else {
host.delete(`${options.projectRoot}/src/pages/index.none.tsx`);
}
if (options.js) {
toJS(host);
updateTsConfigsToJs(host, { projectRoot: options.projectRoot });
}
}

53
packages/gatsby/src/generators/application/lib/normalize-options.ts
View File

@ -1,53 +0,0 @@
import {
getWorkspaceLayout,
joinPathFragments,
names,
Tree,
} from '@nrwl/devkit';
import { Schema } from '../schema';
import { assertValidStyle } from '@nrwl/react';
export interface NormalizedSchema extends Schema {
projectName: string;
projectRoot: string;
projectDirectory: string;
parsedTags: string[];
styledModule: null | string;
}
export function normalizeOptions(
host: Tree,
options: Schema
): NormalizedSchema {
const name = names(options.name).fileName;
const directoryName = options.directory
? names(options.directory).fileName
: '';
const projectDirectory = options.directory
? `${directoryName}/${name}`
: name;
const projectName = projectDirectory.replace(new RegExp('/', 'g'), '-');
const { appsDir } = getWorkspaceLayout(host);
const projectRoot = joinPathFragments(appsDir, projectDirectory);
const parsedTags = options.tags
? options.tags.split(',').map((s) => s.trim())
: [];
const styledModule = /^(css|scss|less|styl)$/.test(options.style)
? null
: options.style;
assertValidStyle(options.style);
return {
...options,
name,
unitTestRunner: options.unitTestRunner || 'jest',
e2eTestRunner: options.e2eTestRunner || 'cypress',
styledModule,
projectName,
projectRoot,
projectDirectory,
parsedTags,
};
}

33
packages/gatsby/src/generators/application/lib/set-defaults.ts
View File

@ -1,33 +0,0 @@
import {
Tree,
readWorkspaceConfiguration,
updateWorkspaceConfiguration,
} from '@nrwl/devkit';
import { NormalizedSchema } from './normalize-options';
export function setDefaults(host: Tree, options: NormalizedSchema) {
const workspace = readWorkspaceConfiguration(host);
if (!workspace.defaultProject) {
workspace.defaultProject = options.projectName;
}
workspace.generators = workspace.generators || {};
workspace.generators['@nrwl/gatsby'] =
workspace.generators['@nrwl/gatsby'] || {};
const prev = workspace.generators['@nrwl/gatsby'];
workspace.generators = {
...workspace.generators,
'@nrwl/gatsby': {
...prev,
application: {
style: options.style,
...prev.application,
},
},
};
updateWorkspaceConfiguration(host, workspace);
}

14
packages/gatsby/src/generators/application/lib/update-jest-config.ts
View File

@ -1,14 +0,0 @@
import { NormalizedSchema } from './normalize-options';
import { Tree } from '@nrwl/devkit';
import { updateJestConfigContent } from '@nrwl/react/src/utils/jest-utils';
export function updateJestConfig(host: Tree, options: NormalizedSchema) {
if (options.unitTestRunner !== 'jest') {
return;
}
const configPath = `${options.projectRoot}/jest.config.js`;
const originalContent = host.read(configPath, 'utf-8');
const content = updateJestConfigContent(originalContent);
host.write(configPath, content);
}

13
packages/gatsby/src/generators/application/schema.d.ts vendored
View File

@ -1,13 +0,0 @@
import { SupportedStyles } from '@nrwl/react';
export interface Schema {
name: string;
tags?: string;
style: SupportedStyles;
directory?: string;
unitTestRunner?: 'jest' | 'none';
e2eTestRunner?: 'cypress' | 'none';
js?: boolean;
setParserOptionsProject?: boolean;
standaloneConfig?: boolean;
}

99
packages/gatsby/src/generators/application/schema.json
View File

@ -1,99 +0,0 @@
{
"$schema": "http://json-schema.org/schema",
"cli": "nx",
"$id": "NxGatsbyApp",
"title": "",
"type": "object",
"properties": {
"name": {
"type": "string",
"description": "",
"$default": {
"$source": "argv",
"index": 0
},
"x-prompt": "What name would you like to use?"
},
"tags": {
"type": "string",
"description": "Add tags to the project (used for linting)",
"alias": "t"
},
"directory": {
"type": "string",
"description": "A directory where the project is placed",
"alias": "d"
},
"unitTestRunner": {
"description": "Adds the specified unit test runner",
"type": "string",
"enum": ["jest", "none"],
"default": "jest"
},
"e2eTestRunner": {
"description": "Adds the specified e2e test runner",
"type": "string",
"enum": ["cypress", "none"],
"default": "cypress"
},
"style": {
"description": "The file extension to be used for style files.",
"type": "string",
"alias": "s",
"default": "css",
"x-prompt": {
"message": "Which stylesheet format would you like to use?",
"type": "list",
"items": [
{
"value": "css",
"label": "CSS"
},
{
"value": "scss",
"label": "SASS(.scss) [ http://sass-lang.com ]"
},
{
"value": "styl",
"label": "Stylus(.styl) [ http://stylus-lang.com ]"
},
{
"value": "less",
"label": "LESS [ http://lesscss.org ]"
},
{
"value": "styled-components",
"label": "styled-components [ https://styled-components.com ]"
},
{
"value": "@emotion/styled",
"label": "emotion [ https://emotion.sh ]"
},
{
"value": "styled-jsx",
"label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]"
},
{
"value": "none",
"label": "None"
}
]
}
},
"js": {
"type": "boolean",
"description": "Generate JavaScript files rather than TypeScript files",
"default": false
},
"setParserOptionsProject": {
"type": "boolean",
"description": "Whether or not to configure the ESLint \"parserOptions.project\" option. We do not do this by default for lint performance reasons.",
"default": false
},
"standaloneConfig": {
"description": "Split the project configuration into <projectRoot>/project.json rather than including it inside workspace.json",
"type": "boolean"
}
},
"required": ["name"]
}

50
packages/gatsby/src/generators/component/component.spec.ts
View File

@ -1,50 +0,0 @@
import { applicationGenerator } from '../application/application';
import { componentGenerator } from './component';
import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
import { Tree } from '@nrwl/devkit';
describe('component', () => {
let tree: Tree;
let projectName: string;
beforeEach(async () => {
projectName = 'my-app';
tree = createTreeWithEmptyWorkspace();
tree.write('.gitignore', '# empty');
tree.write('.prettierignore', '# empty');
await applicationGenerator(tree, {
name: projectName,
style: 'css',
standaloneConfig: false,
});
});
it('should generate component in components directory', async () => {
await componentGenerator(tree, {
name: 'hello',
project: projectName,
style: 'css',
});
expect(tree.exists('apps/my-app/src/components/hello.tsx')).toBeTruthy();
expect(
tree.exists('apps/my-app/src/components/hello.spec.tsx')
).toBeTruthy();
expect(
tree.exists('apps/my-app/src/components/hello.module.css')
).toBeTruthy();
});
it('should allow directory override', async () => {
await componentGenerator(tree, {
name: 'hello',
project: projectName,
directory: 'lib',
style: 'css',
});
expect(tree.exists('apps/my-app/src/lib/hello.tsx')).toBeTruthy();
expect(tree.exists('apps/my-app/src/lib/hello.spec.tsx')).toBeTruthy();
expect(tree.exists('apps/my-app/src/lib/hello.module.css')).toBeTruthy();
});
});

36
packages/gatsby/src/generators/component/component.ts
View File

@ -1,36 +0,0 @@
import type { SupportedStyles } from '@nrwl/react';
import { componentGenerator as reactComponentGenerator } from '@nrwl/react';
import { convertNxGenerator, Tree } from '@nrwl/devkit';
import { addStyleDependencies } from '../../utils/styles';
import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
interface Schema {
name: string;
project: string;
style: SupportedStyles;
directory?: string;
flat?: boolean;
}
/*
* This schematic is basically the React one, but for Gatsby we need
* extra dependencies for css, sass, less, styl style options.
*/
export async function componentGenerator(host: Tree, options: Schema) {
const componentTask = await reactComponentGenerator(host, {
...options,
directory: options.directory || 'components',
pascalCaseFiles: false,
export: false,
classComponent: false,
routing: false,
flat: true,
});
const styledTask = addStyleDependencies(host, options.style);
return runTasksInSerial(componentTask, styledTask);
}
export default componentGenerator;
export const componentSchematic = convertNxGenerator(componentGenerator);

108
packages/gatsby/src/generators/component/schema.json
View File

@ -1,108 +0,0 @@
{
"$schema": "http://json-schema.org/schema",
"cli": "nx",
"$id": "NxGatsbyReactComponent",
"title": "Create a React Component for Gatsby",
"type": "object",
"examples": [
{
"command": "g component my-component --project=mylib",
"description": "Generate a component in the mylib library"
},
{
"command": "g component my-component --project=mylib --classComponent",
"description": "Generate a class component in the mylib library"
}
],
"properties": {
"project": {
"type": "string",
"description": "The name of the project.",
"alias": "p",
"$default": {
"$source": "projectName"
},
"x-prompt": "What is the name of the project for this component?"
},
"name": {
"type": "string",
"description": "The name of the component.",
"$default": {
"$source": "argv",
"index": 0
},
"x-prompt": "What name would you like to use for the component?"
},
"style": {
"description": "The file extension to be used for style files.",
"type": "string",
"alias": "s",
"default": "css",
"x-prompt": {
"message": "Which stylesheet format would you like to use?",
"type": "list",
"items": [
{
"value": "css",
"label": "CSS"
},
{
"value": "scss",
"label": "SASS(.scss) [ http://sass-lang.com ]"
},
{
"value": "styl",
"label": "Stylus(.styl) [ http://stylus-lang.com ]"
},
{
"value": "less",
"label": "LESS [ http://lesscss.org ]"
},
{
"value": "styled-components",
"label": "styled-components [ https://styled-components.com ]"
},
{
"value": "@emotion/styled",
"label": "emotion [ https://emotion.sh ]"
},
{
"value": "styled-jsx",
"label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]"
},
{
"value": "none",
"label": "None"
}
]
}
},
"skipTests": {
"type": "boolean",
"description": "When true, does not create \"spec.ts\" test files for the new component.",
"default": false
},
"directory": {
"type": "string",
"description": "Create the component under this directory (can be nested).",
"alias": "dir"
},
"export": {
"type": "boolean",
"description": "When true, the component is exported from the project index.ts (if it exists).",
"alias": "e",
"default": false
},
"js": {
"type": "boolean",
"description": "Generate JavaScript files rather than TypeScript files.",
"default": false
},
"flat": {
"type": "boolean",
"description": "Create component at the source root rather than its own directory.",
"default": false
}
},
"required": ["name", "project"]
}

33
packages/gatsby/src/generators/init/init.spec.ts
View File

@ -1,33 +0,0 @@
import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
import { NxJsonConfiguration, readJson, Tree } from '@nrwl/devkit';
import { gatsbyInitGenerator } from './init';
describe('init', () => {
let tree: Tree;
beforeEach(() => {
tree = createTreeWithEmptyWorkspace();
});
it('should add react dependencies', async () => {
await gatsbyInitGenerator(tree, {});
const packageJson = readJson(tree, 'package.json');
expect(packageJson.dependencies['@nrwl/gatsby']).toBeUndefined();
expect(packageJson.dependencies['@nrwl/react']).toBeUndefined();
expect(packageJson.dependencies['gatsby']).toBeDefined();
});
describe('defaultCollection', () => {
it('should be set if none was set before', async () => {
await gatsbyInitGenerator(tree, {});
const { cli } = readJson<NxJsonConfiguration>(tree, 'nx.json');
expect(cli.defaultCollection).toEqual('@nrwl/gatsby');
});
});
it('should not add jest config if unitTestRunner is none', async () => {
await gatsbyInitGenerator(tree, { unitTestRunner: 'none' });
expect(tree.exists('jest.config.js')).toEqual(false);
});
});

97
packages/gatsby/src/generators/init/init.ts
View File

@ -1,97 +0,0 @@
import {
addDependenciesToPackageJson,
convertNxGenerator,
detectPackageManager,
GeneratorCallback,
Tree,
updateJson,
} from '@nrwl/devkit';
import { jestInitGenerator } from '@nrwl/jest';
import { cypressInitGenerator } from '@nrwl/cypress';
import { reactDomVersion, reactInitGenerator, reactVersion } from '@nrwl/react';
import { setDefaultCollection } from '@nrwl/workspace/src/utilities/set-default-collection';
import {
babelPluginModuleResolverVersion,
babelPresetGatsbyVersion,
gatsbyPluginImageVersion,
gatsbyPluginManifestVersion,
gatsbyPluginOfflineVersion,
gatsbyPluginPnpm,
gatsbyPluginReactHelmetVersion,
gatsbyPluginSharpVersion,
gatsbyPluginSvgrVersion,
gatsbyPluginTypescriptVersion,
gatsbySourceFilesystemVersion,
gatsbyTransformerSharpVersion,
gatsbyVersion,
nxVersion,
propTypesVersion,
reactHelmetVersion,
testingLibraryReactVersion,
} from '../../utils/versions';
import { InitSchema } from './schema';
import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
function updateDependencies(host: Tree) {
updateJson(host, 'package.json', (json) => {
if (json.dependencies && json.dependencies['@nrwl/gatsby']) {
delete json.dependencies['@nrwl/gatsby'];
}
return json;
});
const isPnpm = detectPackageManager(host.root) === 'pnpm';
return addDependenciesToPackageJson(
host,
{
gatsby: gatsbyVersion,
'gatsby-plugin-image': gatsbyPluginImageVersion,
'gatsby-plugin-svgr': gatsbyPluginSvgrVersion,
'gatsby-plugin-manifest': gatsbyPluginManifestVersion,
'gatsby-plugin-offline': gatsbyPluginOfflineVersion,
'gatsby-plugin-react-helmet': gatsbyPluginReactHelmetVersion,
'gatsby-plugin-sharp': gatsbyPluginSharpVersion,
'gatsby-source-filesystem': gatsbySourceFilesystemVersion,
'gatsby-transformer-sharp': gatsbyTransformerSharpVersion,
'prop-types': propTypesVersion,
react: reactVersion,
'react-dom': reactDomVersion,
'react-helmet': reactHelmetVersion,
'gatsby-plugin-typescript': gatsbyPluginTypescriptVersion,
...(isPnpm ? { 'gatsby-plugin-pnpm': gatsbyPluginPnpm } : {}),
},
{
'@nrwl/gatsby': nxVersion,
'@testing-library/react': testingLibraryReactVersion,
'babel-plugin-module-resolver': babelPluginModuleResolverVersion,
'babel-preset-gatsby': babelPresetGatsbyVersion,
}
);
}
export async function gatsbyInitGenerator(host: Tree, schema: InitSchema) {
const tasks: GeneratorCallback[] = [];
setDefaultCollection(host, '@nrwl/gatsby');
if (!schema.unitTestRunner || schema.unitTestRunner === 'jest') {
const jestTask = jestInitGenerator(host, {});
tasks.push(jestTask);
}
if (!schema.e2eTestRunner || schema.e2eTestRunner === 'cypress') {
const cypressTask = cypressInitGenerator(host);
tasks.push(cypressTask);
}
const reactTask = await reactInitGenerator(host, schema);
tasks.push(reactTask);
const installTask = updateDependencies(host);
tasks.push(installTask);
return runTasksInSerial(...tasks);
}
export default gatsbyInitGenerator;
export const gatsbyInitSchematic = convertNxGenerator(gatsbyInitGenerator);

5
packages/gatsby/src/generators/init/schema.d.ts vendored
View File

@ -1,5 +0,0 @@
export interface InitSchema {
unitTestRunner?: 'jest' | 'none';
e2eTestRunner?: 'cypress' | 'none';
skipFormat?: boolean;
}

Some files were not shown because too many files have changed in this diff Show More