feat: start CLI page

src/app/start/BUILD.bazel

@@ -15,6 +15,7 @@ ng_project(
         "//:node_modules/@angular/router",
         "//:node_modules/@types/node",
         "//:node_modules/detect-browser",
+        "//src/app/start/cli",
         "//src/app/start/custom",
         "//src/app/start/godot",
         "//src/app/start/tutorials",

src/app/start/cli/BUILD.bazel

@@ -0,0 +1,36 @@
+load("@bazel_skylib//rules:copy_file.bzl", "copy_file")
+load("//tools:ng.bzl", "ng_project")
+load("//tools:sass.bzl", "sass_binary")
+
+package(default_visibility = ["//:__subpackages__"])
+
+copy_file(
+    name = "copy_typed_scss",
+    src = "@typed_css//:typed.scss",
+    out = "typed.scss",
+)
+
+sass_binary(
+    name = "typed-ascii-logo-styles",
+    srcs = [
+        "typed.scss",
+        "typed-ascii-logo.component.scss",
+    ],
+)
+
+ng_project(
+    name = "cli",
+    srcs = [
+        "start-cli.component.html",
+        "start-cli.component.ts",
+        "start-cli-routing.module.ts",
+        "typed-ascii-logo.component.css",
+        "typed-ascii-logo.component.html",
+        "typed-ascii-logo.component.ts",
+    ],
+    deps = [
+        "//:node_modules/@angular/common",
+        "//:node_modules/@angular/core",
+        "//:node_modules/@angular/router",
+    ],
+)

src/app/start/cli/start-cli-routing.module.ts

@@ -0,0 +1,17 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {StartCliComponent} from './start-cli.component';
+
+const routes: Routes = [
+	{
+		path: '',
+		pathMatch: 'full',
+		component: StartCliComponent,
+	},
+];
+
+@NgModule({
+	imports: [RouterModule.forChild(routes)],
+	exports: [RouterModule],
+})
+export class StartCliRoutingModule {}

src/app/start/cli/start-cli.component.html

@@ -0,0 +1,6 @@
+<article>
+	<div class="flex justify-center items-center w-100">
+		<ecsact-typed-ascii-logo />
+	</div>
+	<p>Start CLI page!</p>
+</article>

src/app/start/cli/start-cli.component.ts

@@ -0,0 +1,14 @@
+import {Component, OnInit, ChangeDetectionStrategy} from '@angular/core';
+import {TypedAsciiLogoComponent} from './typed-ascii-logo.component';
+
+@Component({
+	templateUrl: './start-cli.component.html',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	standalone: true,
+	imports: [TypedAsciiLogoComponent],
+})
+export class StartCliComponent implements OnInit {
+	constructor() {}
+
+	ngOnInit(): void {}
+}

src/app/start/cli/typed-ascii-logo.component.html

@@ -0,0 +1,13 @@
+<div class="typed-ascii-logo font-mono whitespace-pre">
+	<div class="line1"></div>
+	<div class="line2"></div>
+	<div class="line3"></div>
+	<div class="line4"></div>
+	<div class="line5"></div>
+	<div class="line6"></div>
+	<div class="line7"></div>
+	<div class="line8"></div>
+	<div class="line9"></div>
+	<div class="line10"></div>
+	<div class="line11"></div>
+</div>

src/app/start/cli/typed-ascii-logo.component.scss

@@ -0,0 +1,30 @@
+@import 'typed';
+
+@mixin ascii-line($line) {
+	@include typed(
+		$line,
+		4,
+		(
+			caret-width: 0px,
+			caret-space: 2px,
+			iterations: 1,
+			delay: 0,
+			caret-speed: 0,
+		)
+	);
+}
+
+// prettier-ignore
+.typed-ascii-logo {
+	.line1  { @include ascii-line('         /##########\\'); }
+	.line2  { @include ascii-line('     ####  #/     \\##\\'); }
+	.line3  { @include ascii-line('    ######         \\##\\'); }
+	.line4  { @include ascii-line('     ####  ##\\      \\#        |@@@@'); }
+	.line5  { @include ascii-line('           \\##\\        ####   @@@@@@@@@'); }
+	.line6  { @include ascii-line('      @@@@@@@@@@@@@@@ ###### @@@@@@@@@@@@@@'); }
+	.line7  { @include ascii-line('                       ####   @@@@@@@@@'); }
+	.line8  { @include ascii-line('                   /#         |@@@@'); }
+	.line9  { @include ascii-line('         ####     /####/'); }
+	.line10 { @include ascii-line('        ###### ####/'); }
+	.line11 { @include ascii-line('         ####'); }
+}

src/app/start/cli/typed-ascii-logo.component.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'ecsact-typed-ascii-logo',
+	templateUrl: 'typed-ascii-logo.component.html',
+	styleUrl: 'typed-ascii-logo.component.scss',
+	standalone: true,
+})
+export class TypedAsciiLogoComponent {}

src/app/start/start-routing.module.ts

@@ -17,6 +17,14 @@ const routes: Routes = [
 				m => m.StartUnityRoutingRoutingModule,
 			),
 	},
+	{
+		path: 'cli',
+		pathMatch: 'prefix',
+		loadChildren: () =>
+			import('./cli/start-cli-routing.module').then(
+				m => m.StartCliRoutingModule,
+			),
+	},
 	{
 		path: 'godot',
 		pathMatch: 'prefix',

src/app/start/start.component.html

@@ -39,6 +39,9 @@
 				<span class="i24 mr-2">school</span>Using Async
 			</a>
 		</ecsact-sidenav-section>
+		<ecsact-sidenav-section title="Ecsact CLI">
+			<a routerLink="/start/cli" routerLinkActive="active">Overview</a>
+		</ecsact-sidenav-section>
 		<ecsact-sidenav-section title="Unreal Engine">
 			<a routerLink="/start/unreal" routerLinkActive="active"
 				>Ecsact Unreal Overview</a

src/styles.scss

@@ -197,12 +197,10 @@ table {
 
 // De emphasize non-header text
 article {
-	*:not(.btn) {
-		p,
-		ul,
-		ol {
-			opacity: 0.85;
-		}
+	p,
+	ul,
+	ol {
+		opacity: 0.85;
 	}
 }