feat: initial site setup (#1)

### Explanation

_No response_

### Issue

_No response_

### Attestations

- [x] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/)
- [x] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/).
- [x] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/).

### Dependencies

- [x] I have pinned the dependencies to a specific patch version.

### Style

- [x] I have run the linter and resolved any errors.
- [x] My pull request uses an appropriate title, matching the conventional commit standards.
- [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request.

### Tests

- [ ] My contribution adds new code, and I have added tests to cover it.
- [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes.
- [ ] All new and existing tests pass locally with my changes.
- [ ] Code coverage remains at or above the configured threshold.

### Documentation

_No response_

### Versioning

_No response_

Reviewed-on: #1
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

src/app/comic/comic.ts

@@ -0,0 +1,68 @@
+/**
+ * @copyright nhcarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+import { CommonModule } from "@angular/common";
+import { Component, inject, input, signal } from "@angular/core";
+import { ActivatedRoute, RouterModule } from "@angular/router";
+import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+import { faLeftLong, faRightLong } from "@fortawesome/free-solid-svg-icons";
+import { ComicService } from "../comic-service.js";
+
+@Component({
+  imports:     [ CommonModule, RouterModule, FontAwesomeModule ],
+  selector:    "app-comic",
+  styleUrl:    "./comic.css",
+  templateUrl: "./comic.html",
+})
+export class Comic {
+  public comicId = signal("");
+  public readonly id = input<string | undefined>("id");
+  // eslint-disable-next-line stylistic/max-len -- I dunno.
+  public comic:           { number: number; title: string; date: string } | undefined;
+  public error:           string | undefined;
+  public previousComicId: string | undefined;
+  public nextComicId:     string | undefined;
+  public readonly backIcon = faLeftLong;
+  public readonly forwardIcon = faRightLong;
+  private readonly activatedRoute = inject(ActivatedRoute);
+
+  public constructor(private readonly comicService: ComicService) {
+    this.comicService.
+      loadComics().
+      then(() => {
+        this.activatedRoute.params.subscribe((parameters_) => {
+          const parameters: Record<string, string> = parameters_;
+          console.log(`FoundID: ${parameters["id"]}`);
+          this.comicId.set(
+            parameters["id"] ?? this.comicService.getLatestComicId(),
+          );
+          this.previousComicId = this.comicService.
+            getComicById(String(Number.parseInt(this.comicId(), 10) - 1))?.
+            number.toString();
+          this.nextComicId = this.comicService.
+            getComicById(String(Number.parseInt(this.comicId(), 10) + 1))?.
+            number.toString();
+
+          // Load the comic data for the new ID
+          this.comic = this.comicService.getComicById(this.comicId());
+          if (this.comic) {
+            // Clear any previous error
+            this.error = undefined;
+          } else {
+            this.error = `Cannot find comic with ID ${this.comicId()}.`;
+          }
+        });
+      }).
+      catch((error: unknown) => {
+        this.error = `Failed to load comics: ${
+          error instanceof Error
+            ? error.message
+            : "Please check the browser console for more details."
+        }`;
+        console.error("Error loading comics:", error);
+      });
+  }
+}