feat: added ecsact unreal codegen section

Author: zaucy

src/app/start/start.component.html

@@ -44,7 +44,8 @@
 			<a routerLink="/start/cli" routerLinkActive="active">Overview</a>
 		</ecsact-sidenav-section>
 		<ecsact-sidenav-section title="Unreal Engine">
-			<a routerLink="/start/unreal" routerLinkActive="active">Setup</a>
+			<a routerLink="/start/unreal" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Setup</a>
+			<a routerLink="/start/unreal/codegen" routerLinkActive="active">Codegen</a>
 		</ecsact-sidenav-section>
 		<ecsact-sidenav-section title="Godot">
 			<a routerLink="/start/godot" routerLinkActive="active"

src/app/start/unreal/BUILD.bazel

@@ -10,6 +10,7 @@ ng_project(
         "start-unreal-routing.module.ts",
     ],
     deps = [
+        "//src/app/start/unreal/codegen",
         "//:node_modules/@angular/common",
         "//:node_modules/@angular/core",
         "//:node_modules/@angular/router",

src/app/start/unreal/codegen/BUILD.bazel

@@ -0,0 +1,18 @@
+load("//tools:ng.bzl", "ng_project")
+
+package(default_visibility = ["//:__subpackages__"])
+
+ng_project(
+    name = "codegen",
+    srcs = [
+        "unreal-codegen.component.html",
+        "unreal-codegen.component.ts",
+    ],
+    deps = [
+        "//:node_modules/@angular/common",
+        "//:node_modules/@angular/core",
+        "//:node_modules/@angular/router",
+        "//src/components/code-block-variation",
+        "//src/components/prism",
+    ],
+)

src/app/start/unreal/codegen/unreal-codegen.component.html

@@ -0,0 +1,31 @@
+<article>
+	<h1>Ecsact -> Unreal C++</h1>
+	<p>A large part of what makes Ecsact work is code generation and with Unreal projects its no exception. The Ecsact Unreal plugin is not only an Unreal plugin, but an Ecsact Codegen plugin as well!</p>
+	<h2 id="whats-generated">What's Generated?</h2>
+	<p>
+		The goal of the codegen plugin is to remove a lot of boilerplate code that would otherwise be tedious to write. By default the Ecsact Unreal codegen plugin generates the following:
+	</p>
+	<ul>
+		<li><a href="https://dev.epicgames.com/documentation/en-us/unreal-engine/structs-in-unreal-engine" _target="_blank"><span class="i24">open_in_new</span> <code>UStructs</code></a> for every component in your Ecsact file</li>
+		<li><a href="https://dev.epicgames.com/documentation/en-us/unreal-engine/overview-of-mass-entity-in-unreal-engine" _target="blank"><span class="i24">open_in_new</span> Unreal Mass Entity</a> Fragments or Tags for every component in your Ecsact file</li>
+		<li>Ecsact Runner Subsystem with easily overridable component events</li>
+		<li>Ecsact Runner Subsystem for Ecsact to Entity Mass communication</li>
+	</ul>
+
+	<h2 id="setup-codegen">Setup Codegen</h2>
+	<p>
+	We recommend using the <code>EcsactUnrealCodegen</code> command line tool that comes with the <a routerLink="/start">Ecsact SDK</a> since <code>0.9.0</code>. Simply execute <code>EcsactUnrealCodegen</code> for your project and the tool will search for all <code>.ecsact</code> files in your <code>Source</code> directory and use the Ecsact codegen tool with the Ecsat Unreal codegen plugin. The Ecsact Unreal plugin is required to be installed for the tool to find the right codegen plugin. If you run into issues please see the output of <code>EcsactUnrealCodegen</code> for details.</p>
+	<h3 id="run-codegen-command-line">Command Line or Script</h3>
+	<p>Replace <code>path/to/project.uproject</code> with the path to your unreal project file and <code>path/to/unreal/install</code> with the full path to your Unreal Engine installation directory</p>
+	<pre><code prism language="bash">
+		EcsactUnrealCodegen path/to/project.uproject --engine-dir path/to/unreal/install
+	</code></pre>
+	<h3 id="run-codegen-prebuildstep">As a PreBuildStep (recommended)</h3>
+	<pre><code prism language="javascript">
+		"PreBuildSteps": {{'{'}}
+			"Win64": [
+				"EcsactUnrealCodegen $(ProjectDir) --engine-dir $(EngineDir) --format || exit /b 1"
+			]
+		{{'}'}}
+	</code></pre>
+</article>

src/app/start/unreal/codegen/unreal-codegen.component.ts

@@ -0,0 +1,15 @@
+import {Component, OnInit, ChangeDetectionStrategy} from '@angular/core';
+import {RouterLink} from '@angular/router';
+import {PrismComponent} from '../../../../components/prism/prism.component';
+
+@Component({
+	templateUrl: './unreal-codegen.component.html',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	standalone: true,
+	imports: [RouterLink, PrismComponent],
+})
+export class UnrealCodegenComponent implements OnInit {
+	constructor() {}
+
+	ngOnInit(): void {}
+}

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

@@ -8,6 +8,14 @@ const routes: Routes = [
 		loadComponent: () =>
 			import('./start-unreal.component').then(m => m.StartUnrealComponent),
 	},
+	{
+		path: 'codegen',
+		pathMatch: 'full',
+		loadComponent: () =>
+			import('./codegen/unreal-codegen.component').then(
+				m => m.UnrealCodegenComponent,
+			),
+	},
 ];
 
 @NgModule({

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

@@ -51,14 +51,13 @@ <h2 id="ecsact-unreal-plugin-features">Ecsact Unreal Plugin Features</h2>
 			<a
 				class="aspect-video rounded-lg shadow-lg border border-transparent hover:border-secondary transition-colors bg-content-bg py-4 px-8"
 				routerLink="/start/unreal/runtime">
-				<div>Ecsact Unreal Codegen</div>
+				<div>Ecsact Runtime</div>
 				<div>TODO</div>
 			</a>
 			<a
 				class="aspect-video rounded-lg shadow-lg border border-transparent hover:border-secondary transition-colors bg-content-bg py-4 px-8"
 				routerLink="/start/unreal/codegen">
 				<div>Ecsact Unreal Codegen</div>
-				<div>TODO</div>
 			</a>
 			<a
 				class="aspect-video rounded-lg shadow-lg border border-transparent hover:border-secondary transition-colors bg-content-bg py-4 px-8"