#6 added a trendy layout

apps/trendy/src/app/app.component.html

@@ -1,113 +1,3 @@
-<header class="flex">
-  <img
-    alt="Nx logo"
-    width="75"
-    src="https://nx.dev/assets/images/nx-logo-white.svg"
-  />
-  <h1>Welcome to {{ title }}!</h1>
-</header>
-<main>
-  <h2>Resources &amp; Tools</h2>
-  <p>Thank you for using and showing some ♥ for Nx.</p>
-  <div class="flex github-star-container">
-    <a
-      href="https://github.com/nrwl/nx"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      If you like Nx, please give it a star:
-      <div class="github-star-badge">
-        <svg
-          class="material-icons"
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-        >
-          <path d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-          />
-        </svg>
-        Star
-      </div>
-    </a>
-  </div>
-  <p>Here are some links to help you get started.</p>
-  <ul class="resources">
-    <li class="col-span-2">
-      <a class="resource flex" href="https://nxplaybook.com/p/nx-workspaces">
-        Nx video course
-      </a>
-    </li>
-    <li class="col-span-2">
-      <a
-        class="resource flex"
-        href="https://nx.dev/latest/angular/getting-started/getting-started"
-      >
-        Nx video tutorial
-      </a>
-    </li>
-    <li class="col-span-2">
-      <a
-        class="resource flex"
-        href="https://nx.dev/latest/angular/tutorial/01-create-application"
-      >
-        Interactive tutorial
-      </a>
-    </li>
-    <li class="col-span-2">
-      <a class="resource flex" href="https://nx.app/">
-        <svg
-          width="36"
-          height="36"
-          viewBox="0 0 120 120"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z"
-            fill="#0E2039"
-          />
-          <path
-            d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z"
-            fill="white"
-          />
-        </svg>
-        <span class="gutter-left">Nx Cloud</span>
-      </a>
-    </li>
-  </ul>
-  <h2>Next Steps</h2>
-  <p>Here are some things you can do with Nx.</p>
-  <details open>
-    <summary>Add UI library</summary>
-    <pre>
-# Generate UI lib
-ng g @nrwl/angular:lib ui
-
-# Add a component
-ng g @nrwl/angular:component xyz --project ui</pre
-    >
-  </details>
-  <details>
-    <summary>View dependency graph</summary>
-    <pre>nx dep-graph</pre>
-  </details>
-  <details>
-    <summary>Run affected commands</summary>
-    <pre>
-# see what's been affected by changes
-ng affected:dep-graph
-
-# run tests for current changes
-ng affected:test
-
-# run e2e tests for current changes
-ng affected:e2e
-</pre
-    >
-  </details>
-</main>
-
-<router-outlet></router-outlet>
+<demo-app-trendy-layout>
+    <router-outlet></router-outlet>
+</demo-app-trendy-layout>

apps/trendy/src/app/app.component.scss

@@ -4,9 +4,6 @@
 :host {
   display: block;
   font-family: sans-serif;
-  min-width: 300px;
-  max-width: 600px;
-  margin: 50px auto;
 }
 
 .gutter-left {

apps/trendy/src/app/app.module.ts

@@ -1,17 +1,27 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { LayoutModule } from '@demo-app/layout';
 import { AppComponent } from './app.component';
 import { RouterModule } from '@angular/router';
+import { PicturesModule, picturesRoutes } from '@demo-app/pictures';
+import { TrendyLayoutModule } from '@demo-app/trendy-layout';
 
 @NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
-    RouterModule.forRoot([], { initialNavigation: 'enabled' }),
+    RouterModule.forRoot(
+      [
+        { path: '', children: picturesRoutes },
+        { path: 'pictures', children: picturesRoutes },
+      ],
+      {
+        initialNavigation: 'enabled',
+      }
+    ),
     BrowserAnimationsModule,
-    LayoutModule,
+    TrendyLayoutModule,
+    PicturesModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

apps/trendy/src/styles.scss

@@ -1 +1,5 @@
-/* You can add global styles to this file, and also import other style files */
+@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';
+
+body {
+    margin: 0;
+}

docs/trendy-client-layout.md

@@ -0,0 +1,7 @@
+# Trendy Client Layout
+
+nx generate @nrwl/angular:lib pictures --routing --parent-module=apps/trendy/src/app/app.module.ts
+
+nx generate @nrwl/angular:lib trendy-layout
+
+nx generate @nrwl/angular:component containers/trendy-layout --project=trendy-layout

jest.config.js

@@ -9,5 +9,7 @@ module.exports = {
     '<rootDir>/apps/nest-demo',
     '<rootDir>/libs/trends',
     '<rootDir>/apps/trendy',
+    '<rootDir>/libs/pictures',
+    '<rootDir>/libs/trendy-layout',
   ],
 };

libs/pictures/.eslintrc.json

@@ -0,0 +1,29 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "parserOptions": { "project": ["libs/pictures/tsconfig.*?.json"] },
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          { "type": "attribute", "prefix": "demoApp", "style": "camelCase" }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          { "type": "element", "prefix": "demo-app", "style": "kebab-case" }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

libs/pictures/README.md

@@ -0,0 +1,7 @@
+# pictures
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test pictures` to execute the unit tests.

libs/pictures/jest.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+  displayName: 'pictures',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+      astTransformers: {
+        before: [
+          'jest-preset-angular/build/InlineFilesTransformer',
+          'jest-preset-angular/build/StripStylesTransformer',
+        ],
+      },
+    },
+  },
+  coverageDirectory: '../../coverage/libs/pictures',
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/pictures/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/pictures.module';

libs/pictures/src/lib/pictures.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Route } from '@angular/router';
+
+export const picturesRoutes: Route[] = [];
+
+@NgModule({
+  imports: [CommonModule, RouterModule],
+})
+export class PicturesModule {}

libs/pictures/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

libs/pictures/tsconfig.json

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

libs/pictures/tsconfig.lib.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "target": "es2015",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": ["dom", "es2018"]
+  },
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts"],
+  "include": ["**/*.ts"]
+}

libs/pictures/tsconfig.spec.json

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

libs/trendy-layout/.eslintrc.json

@@ -0,0 +1,29 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "parserOptions": { "project": ["libs/trendy-layout/tsconfig.*?.json"] },
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          { "type": "attribute", "prefix": "demoApp", "style": "camelCase" }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          { "type": "element", "prefix": "demo-app", "style": "kebab-case" }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

libs/trendy-layout/README.md

@@ -0,0 +1,7 @@
+# trendy-layout
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test trendy-layout` to execute the unit tests.

libs/trendy-layout/jest.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+  displayName: 'trendy-layout',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+      astTransformers: {
+        before: [
+          'jest-preset-angular/build/InlineFilesTransformer',
+          'jest-preset-angular/build/StripStylesTransformer',
+        ],
+      },
+    },
+  },
+  coverageDirectory: '../../coverage/libs/trendy-layout',
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/trendy-layout/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/trendy-layout.module';

libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.html

@@ -0,0 +1,7 @@
+<mat-toolbar color="primary" fxLayout="row">
+  <span>BREAKING ART</span>
+  <div class="right-nav">
+    Paintings
+  </div>
+</mat-toolbar>
+<ng-content></ng-content>

libs/trendy-layout/src/lib/containers/trendy-layout/trendy-layout.component.scss

@@ -0,0 +1,3 @@
+.right-nav {
+    margin-left: auto;
+}