From ec1d468a5fa478fbca98b92a5773b3140771e7f9 Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Tue, 15 Jul 2025 18:54:29 -0700
Subject: [PATCH] feat: archive view done

---
 src/app/about/about.html     |  2 +-
 src/app/archive/archive.html | 12 +++++++++++-
 src/app/archive/archive.ts   | 38 ++++++++++++++++++++++++++++++------
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/app/about/about.html b/src/app/about/about.html
index 282a4db..2451205 100644
--- a/src/app/about/about.html
+++ b/src/app/about/about.html
@@ -9,7 +9,7 @@
   hopeful that you come to love the story we tell.
 </p>
 <p>
-  We publish a new comic every Monday, and offer an RSS feed so you can use your
+  We publish a new comic every Monday, and (will soon!) offer an RSS feed so you can use your
   favourite application to stay updated.
 </p>
 <p>
diff --git a/src/app/archive/archive.html b/src/app/archive/archive.html
index 44c4d9c..6e856a4 100644
--- a/src/app/archive/archive.html
+++ b/src/app/archive/archive.html
@@ -1 +1,11 @@
-<p>archive works!</p>
+<h1>Archive</h1>
+<p>Start browsing our comics from the very beginning, or find a comic from a specific day!</p>
+<div *ngIf="error">
+  <p>Error loading comics: {{ error }}</p>
+</div>
+<div *ngIf="comics.length !== 0">
+  <div *ngFor="let comic of comics">
+    <h2><a [routerLink]="['/comic', comic.number]"> {{ comic.title }}</a></h2>
+    <p>Published on: {{ comic.date }}</p>
+
+</div>
diff --git a/src/app/archive/archive.ts b/src/app/archive/archive.ts
index 3db2753..07d6689 100644
--- a/src/app/archive/archive.ts
+++ b/src/app/archive/archive.ts
@@ -1,11 +1,37 @@
-import { Component } from '@angular/core';
+/**
+ * @copyright nhcarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { ComicService } from "../comic-service.js";
 
 @Component({
-  selector: 'app-archive',
-  imports: [],
-  templateUrl: './archive.html',
-  styleUrl: './archive.css'
+  imports:     [ CommonModule, RouterModule ],
+  selector:    "app-archive",
+  styleUrl:    "./archive.css",
+  templateUrl: "./archive.html",
 })
 export class Archive {
-
+  public comics: Array<{ number: number; title: string; date: string }> = [];
+  public error:  string | undefined;
+  public constructor(private readonly comicService: ComicService) {
+    this.comicService.
+      loadComics().
+      then(() => {
+        this.comics = this.comicService.getComics();
+        this.error = undefined;
+      }).
+      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);
+      });
+  }
 }