feat: start CLI page

.editorconfig

@@ -1,8 +1,8 @@
 root = true
 
 [*]
-tab_width = 4
-indent_size = 4
+tab_width = 2
+indent_size = 2
 indent_style = tab
 end_of_line = lf
 insert_final_newline = true

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,37 @@
+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/components/prism",
+    ],
+)

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,75 @@
+<div class="flex flex-col md:flex-row gap-6 max-w-4xl mx-auto px-8 my-8">
+	<div
+		class="always-dark text-secondary hover:text-primary-bright transition-colors min-w-[350px] text-xs text-left m-auto bg-[black] rounded-lg p-4 py-8 border">
+		<ecsact-typed-ascii-logo />
+	</div>
+	<div class="flex-grow">
+		<h1><span class="i48">terminal</span> The Ecsact CLI</h1>
+		<p>
+			The Ecsact Command Line Interface (CLI) is the bare bones tool for working
+			with Ecsact. It's what powers all Ecsact integrations and customizations.
+		</p>
+		<p>
+			The Ecsact CLI is available when
+			<a routerLink="/start">installing the Ecsact SDK</a>.
+		</p>
+	</div>
+</div>
+
+<article>
+	<section>
+		<h1 id="subcommands">Subcommands</h1>
+		<p>
+			There are several subcommands in the Ecsact CLI. As you might expect from
+			any CLI you may pass the <code>--help</code> flag to the CLI or any of its
+			subcommands to see the available options.
+		</p>
+
+		<pre><code prism language="bash">
+			ecsact --help        # get available subcommands
+			ecsact build --help  # get options for 'build' subcommand
+		</code></pre>
+	</section>
+
+	<section>
+		<h2 id="subcommand-config"><pre>ecsact config</pre></h2>
+		<p>
+			<code>ecsact config</code> subcommand gives various information about your
+			Ecsact SDK installation. This subcommand is mainly useful for creating
+			<a routerLink="/start/custom">custom integrations</a>, integrating into
+			your devops, or other various automation scripts.
+		</p>
+
+		<p>To see the available config key options use:</p>
+		<pre><code prism language="bash">
+				ecsact config --help
+		</code></pre>
+	</section>
+
+	<section>
+		<h2 id="subcommand-codegen">ecsact codegen</h2>
+		<p>TODO</p>
+
+		<pre><code prism language="bash">
+				ecsact codegen --help
+		</code></pre>
+	</section>
+
+	<section>
+		<h2 id="subcommand-build">ecsact build</h2>
+		<p>TODO</p>
+
+		<pre><code prism language="bash">
+				ecsact build --help
+		</code></pre>
+	</section>
+
+	<section>
+		<h2 id="subcommand-benchmark">ecsact benchmark</h2>
+		<p>TODO</p>
+
+		<pre><code prism language="bash">
+				ecsact benchmark --help
+		</code></pre>
+	</section>
+</article>

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

@@ -0,0 +1,16 @@
+import {Component, OnInit, ChangeDetectionStrategy} from '@angular/core';
+import {TypedAsciiLogoComponent} from './typed-ascii-logo.component';
+import {RouterLink} from '@angular/router';
+import {PrismComponent} from '../../../components/prism/prism.component';
+
+@Component({
+	templateUrl: './start-cli.component.html',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	standalone: true,
+	imports: [TypedAsciiLogoComponent, RouterLink, PrismComponent],
+})
+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