feat: add simple description to showcase app (#991)

## Proposed change

<!-- Please include a summary of the changes and the related issue.
Please also include relevant motivation and context. List any
dependencies that is required for this change. -->

## Related issues

- 🐛 Fixes #(issue)
- 🚀 Feature #(issue)

<!-- Please make sure to follow the contributing guidelines on
https://github.com/amadeus-digital/Otter/blob/main/CONTRIBUTING.md -->

apps/showcase/src/app/home/home.component.ts

@@ -2,12 +2,13 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
 import { CommonModule } from '@angular/common';
 import { O3rComponent } from '@o3r/core';
 import { DynamicContentModule } from '@o3r/dynamic-content';
+import { CopyTextPresComponent } from '../../components';
 
 @O3rComponent({ componentType: 'Page' })
 @Component({
   selector: 'o3r-home',
   standalone: true,
-  imports: [CommonModule, DynamicContentModule],
+  imports: [CommonModule, DynamicContentModule, CopyTextPresComponent],
   templateUrl: './home.template.html',
   styleUrls: ['./home.style.scss'],
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/app/home/home.style.scss

@@ -3,4 +3,8 @@ o3r-home {
     aspect-ratio: 1 / 1;
     max-width: 100%;
   }
+
+  .get-start-section {
+    margin-top: 10em;
+  }
 }

apps/showcase/src/app/home/home.template.html

@@ -1,6 +1,41 @@
 <div class="d-flex flex-column gap-2 align-items-center justify-center flex-fill">
-  <h1>Otter</h1>
-  <p>This is a showcase application.</p>
-  <p>You can find examples of Otter features with some explanations.</p>
-  <img width="500" [src]="'otter-a.svg' | dynamicContent" class="otter-logo">
+  <img width="350" [src]="'otter-a.svg' | dynamicContent" class="otter-logo" alt="Otter">
+  <h1 class="h1 display-1 text-center mt-0 mb-5"><b>Easily build a customizable Angular based application</b></h1>
+  <h2 class="h4 mt-5 pt-5 text-secondary">
+    The Otter project is a highly modular framework whose goal is to provide a common platform to <b>accelerate</b> and <b>facilitate</b> the development of <span class="text-danger">Angular</span> based Web Applications.<br />
+    The framework offers the capability to customize the application using <b>Content Management System</b>.
+  </h2>
 </div>
+
+<div class="get-start-section d-flex flex-column gap-2 align-items-center justify-center flex-fill">
+  <h3 class="display-3 text-center mt-0 mb-5">Get started with Otter</h3>
+  <p class="text-secondary">
+    To start a new project you just need to follow the <a target="_blank" href="https://github.com/AmadeusITGroup/otter/blob/main/docs/core/START_NEW_APPLICATION.md">new application guide</a> or use the following command lines:
+  </p>
+
+  <div class="section container mt-3">
+    <div class="row g-3 g-md-5 mb-5 pb-5 justify-content-center">
+      <div class="col-lg-6 py-lg-5 pe-lg-5 pt-lg-5">
+        <h3>Setup the project ...</h3>
+        <p class="mt-4 text-secondary">
+          Create a new project <i>(npm)</i>
+          <o3r-copy-text-pres language="bash" text="npm create @o3r <your-project>"></o3r-copy-text-pres>
+          or <i>(yarn)</i>
+          <o3r-copy-text-pres language="bash" text="yarn create @o3r <your-project>"></o3r-copy-text-pres>
+        </p>
+      </div>
+      <div class="col-lg-6 py-lg-5 pe-lg-5 ps-lg-5 border-lg-start">
+        <h3>... and start to create</h3>
+        <p class="mt-4 text-secondary">
+          A new application:
+          <o3r-copy-text-pres language="bash" text="ng g application <app-name>"></o3r-copy-text-pres>
+          A new SDK:
+          <o3r-copy-text-pres language="bash" text="ng g sdk <sdk-name>"></o3r-copy-text-pres>
+          Or a new library:
+          <o3r-copy-text-pres language="bash" text="ng g library <lib-name>"></o3r-copy-text-pres>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+

packages/@o3r/components/builders/component-extractor/index.js

@@ -8,5 +8,6 @@ It should not be part of the package.
 const {resolve} = require('node:path');
 
 require('ts-node').register({ project: resolve(__dirname, '..', '..', 'tsconfig.builders.json') });
+require('ts-node').register = () => {};
 
 module.exports = require('./index.ts');

packages/@o3r/core/builders/multi-watcher/index.js

@@ -0,0 +1,13 @@
+/*
+
+This files is used to allow the usage of the builder within @o3r/framework mono-repository.
+It should not be part of the package.
+
+*/
+
+const {resolve} = require('node:path');
+
+require('ts-node').register({ project: resolve(__dirname, '..', '..', 'tsconfig.builders.json') });
+require('ts-node').register = () => { };
+
+module.exports = require('./index.ts');

packages/@o3r/core/package.json

@@ -130,6 +130,7 @@
     "rxjs": "^7.8.1",
     "semver": "^7.5.2",
     "ts-jest": "~29.1.1",
+    "ts-node": "~10.9.1",
     "type-fest": "^3.12.0",
     "typescript": "~5.1.6",
     "zone.js": "~0.13.1"

packages/@o3r/core/tsconfig.eslint.json

@@ -5,6 +5,6 @@
     "jest.config.js",
     "testing/*",
     "tooling/**/*.js",
-    "schematics/**/*.ts"
+    "builders/**/index.js"
   ]
 }

packages/@o3r/localization/builders/i18n/index.js

@@ -8,5 +8,6 @@ It should not be part of the package.
 const {resolve} = require('node:path');
 
 require('ts-node').register({ project: resolve(__dirname, '..', '..', 'tsconfig.builders.json') });
+require('ts-node').register = () => { };
 
 module.exports = require('./index.ts');

packages/@o3r/localization/builders/localization-extractor/index.js

@@ -8,5 +8,6 @@ It should not be part of the package.
 const {resolve} = require('node:path');
 
 require('ts-node').register({ project: resolve(__dirname, '..', '..', 'tsconfig.builders.json') });
+require('ts-node').register = () => { };
 
 module.exports = require('./index.ts');

packages/@o3r/localization/builders/localization/index.js

@@ -8,5 +8,6 @@ It should not be part of the package.
 const {resolve} = require('node:path');
 
 require('ts-node').register({ project: resolve(__dirname, '..', '..', 'tsconfig.builders.json') });
+require('ts-node').register = () => { };
 
 module.exports = require('./index.ts');

packages/@o3r/rules-engine/builders/rules-engine-extractor/index.js

@@ -8,5 +8,6 @@ It should not be part of the package.
 const {resolve} = require('node:path');
 
 require('ts-node').register({ project: resolve(__dirname, '..', '..', 'tsconfig.builders.json') });
+require('ts-node').register = () => { };
 
 module.exports = require('./index.ts');

packages/@o3r/styling/builders/style-extractor/index.js

@@ -8,5 +8,6 @@ It should not be part of the package.
 const {resolve} = require('node:path');
 
 require('ts-node').register({ project: resolve(__dirname, '..', '..', 'tsconfig.builders.json') });
+require('ts-node').register = () => { };
 
 module.exports = require('./index.ts');

packages/@o3r/workspace/schematics/ng-add/index.ts

@@ -2,7 +2,7 @@ import { chain, Rule, SchematicContext, Tree } from '@angular-devkit/schematics'
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import type { PackageJson } from 'type-fest';
-import { registerPackageCollectionSchematics } from '@o3r/schematics';
+import { getPackageManagerExecutor, getWorkspaceConfig, registerPackageCollectionSchematics } from '@o3r/schematics';
 import { NgAddSchematicsSchema } from './schema';
 import { RepositoryInitializerTask } from '@angular-devkit/schematics/tasks';
 import { prepareProject } from './project-setup';
@@ -29,6 +29,16 @@ export function ngAdd(options: NgAddSchematicsSchema): Rule {
           commit.message = 'Setup of Otter Framework';
           c.addTask(new RepositoryInitializerTask(undefined, commit));
         }
+      },
+
+      // Schematics advertizing
+      (t, c) => {
+        const workspaceConfig = getWorkspaceConfig(t);
+        c.logger.info('Your project is now ready, you can start to generate your first packages with one of the following commands:');
+        c.logger.info(`  ${getPackageManagerExecutor(workspaceConfig)} ng g application`);
+        c.logger.info(`  ${getPackageManagerExecutor(workspaceConfig)} ng g sdk`);
+        c.logger.info(`  ${getPackageManagerExecutor(workspaceConfig)} ng g library`);
+        c.logger.info(`... or discover the full list of commands with "${getPackageManagerExecutor(workspaceConfig)} ng g --help".`);
       }
     ])(tree, context);
   };

yarn.lock

@@ -7247,6 +7247,7 @@ __metadata:
     rxjs: ^7.8.1
     semver: ^7.5.2
     ts-jest: ~29.1.1
+    ts-node: ~10.9.1
     tslib: ^2.5.3
     type-fest: ^3.12.0
     typescript: ~5.1.6