Feature: Archive page

src/app/app.routes.ts

@@ -47,6 +47,12 @@ export const routes: Routes = [
     loadComponent: () => import('./pages/events/events.component').then(m => m.EventsComponent),
     title: makeTitle('Events')
   },
+  {
+    path: 'event-archives',
+    loadComponent: () =>
+      import('pages/event-archives/event-archives.component').then(m => m.EventArchivesComponent),
+    title: makeTitle('Event Archives')
+  },
   // Elections
   {
     path: 'elections',

src/app/components/nav-bar/nav-entries.ts

@@ -1,6 +1,7 @@
 import { CodeListItem } from '@csss-code/list/list-item/list-item.component';
 import { IconDefinition } from '@fortawesome/angular-fontawesome';
 import {
+  faBook,
   faChevronRight,
   faFile,
   faRoadBarrier,
@@ -89,6 +90,12 @@ export const NAVBAR_ENTRIES: NavItem[] = [
         label: 'Mountain Madness',
         icon: faUpRightFromSquare,
         href: 'https://new.sfucsss.org/mountain_madness/2024/index.html'
+      },
+      {
+        key: 'events.archives',
+        label: 'Archives',
+        icon: faBook,
+        route: '/event-archives'
       }
     ]
   },

src/app/pages/event-archives/event-archives.component.html

@@ -0,0 +1,56 @@
+<code-article>
+  <hgroup>
+    <h1>Event Archives</h1>
+    <p>Here's a list of all the past pages the CSSS used to promote their events.</p>
+    <p>
+      <strong>
+        Note: The links and the functionality of some of these pages were slightly altered, but
+        please be cautious clicking links within these sites.
+      </strong>
+    </p>
+  </hgroup>
+  <section class="events">
+    <section class="event">
+      <section>
+        <h2><span>Frosh</span></h2>
+        <ul class="event__list">
+          @for (year of froshYears; track year) {
+            <li class="event__link">
+              <a [href]="makeHref('frosh', year)" target="_blank">{{ year }}</a>
+            </li>
+          }
+        </ul>
+      </section>
+      <section>
+        <h2><span>Tech Fair</span></h2>
+        <ul class="event__list">
+          @for (year of techFairYears; track year) {
+            <li class="event__link">
+              <a [href]="makeHref('tech-fair', year)" target="_blank">{{ year }}</a>
+            </li>
+          }
+        </ul>
+      </section>
+      <section>
+        <h2><span>Fall Hacks</span></h2>
+        <ul class="event__list">
+          @for (year of fallHacksYears; track year) {
+            <li class="event__link">
+              <a [href]="makeHref('fall-hacks', year)" target="_blank">{{ year }}</a>
+            </li>
+          }
+        </ul>
+      </section>
+      <section>
+        <h2><span>Mountain Madness</span></h2>
+        <ul class="event__list">
+          @for (year of mountainMadnessYears; track year) {
+            <li class="event__link">
+              <a [href]="makeHref('madness', year)" target="_blank">{{ year }}</a>
+            </li>
+          }
+        </ul>
+      </section>
+    </section>
+  </section>
+</code-article>

src/app/pages/event-archives/event-archives.component.scss

@@ -0,0 +1,44 @@
+@use 'globals';
+
+h2 {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.events {
+  display: grid;
+  gap: 1rem;
+}
+
+.event__list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
+  gap: 1rem;
+}
+
+.event__link {
+  text-align: center;
+  border: 1px black solid;
+  border-radius: 5px;
+  background-color: globals.$accent;
+
+  &:hover {
+    background-color: globals.$accent1;
+  }
+
+  > a {
+    display: block;
+    padding: 1rem;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .event__link {
+    transition: background-color 0.5s ease;
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+}

src/app/pages/event-archives/event-archives.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventArchivesComponent } from './event-archives.component';
+
+describe('EventsArchiveComponent', () => {
+  let component: EventArchivesComponent;
+  let fixture: ComponentFixture<EventArchivesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EventArchivesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EventArchivesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/event-archives/event-archives.component.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ArticleComponent } from '@csss-code/article/article.component';
+import {
+  FALL_HACKS_YEARS,
+  FROSH_YEARS,
+  MOUNTAIN_MADNESS_YEARS,
+  TECH_FAIR_YEARS
+} from './events-archive.data';
+
+@Component({
+  selector: 'cs-event-archives',
+  imports: [ArticleComponent],
+  templateUrl: './event-archives.component.html',
+  styleUrl: './event-archives.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class EventArchivesComponent {
+  protected froshYears = FROSH_YEARS;
+  protected fallHacksYears = FALL_HACKS_YEARS;
+  protected techFairYears = TECH_FAIR_YEARS;
+  protected mountainMadnessYears = MOUNTAIN_MADNESS_YEARS;
+
+  makeHref(event: string, year: number): string {
+    return `https://${event}.sfucsss.org/${year}`;
+  }
+}

src/app/pages/event-archives/events-archive.data.ts

@@ -0,0 +1,9 @@
+export const FROSH_YEARS = [
+  2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012
+] as const;
+
+export const FALL_HACKS_YEARS = [2024, 2020] as const;
+
+export const TECH_FAIR_YEARS = [2024, 2023, 2022] as const;
+
+export const MOUNTAIN_MADNESS_YEARS = [2024, 2023, 2022, 2021, 2020, 2019] as const;

src/app/services/application/applications.ts

@@ -101,6 +101,16 @@ export const routeApplicationMap: Map<number, AppInfo> = new Map([
     6,
     {
       id: 6,
+      label: 'Event Archives',
+      activityKey: '',
+      key: 'event-archives',
+      route: '/event-archives'
+    }
+  ],
+  [
+    7,
+    {
+      id: 7,
       label: 'Elections',
       activityKey: '',
       key: 'elections',

src/assets/icons/README.md

@@ -0,0 +1,16 @@
+For some reason the Angular FontAwesome package doesn't document what an `IconDefinition`'s type
+are, so I'm typing it out here. [ Angular FontAwesome Documentation ](https://github.com/FortAwesome/angular-fontawesome/blob/main/docs/guide/custom-icons.md)
+
+```typescript
+export interface {
+  prefix: string; // The package the icon resides in (just use `csss` if you're not sure)
+  iconName: string; // The name of the icon to use when importing it
+  icon: [
+    number,   // viewBox width
+    number,   // viewBox height
+    string[], // litgatures  (not used in Angular FontAwesome, so just pass in an empty array)
+    string,   // unicode (not used in Angular FontAwesome, so just pass in an empty string)
+    string | string[] // paths of the SVG
+  ]
+}
+```

src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.html

@@ -0,0 +1,33 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xml:space="preserve"
+  id="svg1"
+  version="1.1"
+  [attr.width]="_width()"
+  [attr.height]="_height()"
+  viewBox="0 0 512 512"
+>
+  <path
+    id="path1"
+    fill="#000"
+    [attr.fill]="_bgColor()"
+    fill-opacity="1"
+    stroke="#000"
+    stroke-dasharray="none"
+    stroke-opacity="1"
+    stroke-width="5.7"
+    d="m257 45-44 88a9 9 0 0 1-13 3l-44-25 28 141a9 9 0 0 1-15 8l-57-61-14 33a9 9 0 0 1-10 5l-73-15 25 77a9 9 0 0 1-4 10L7 323l127 102a9 9 0 0 1 2 10l-15 43h273l-16-43a9 9 0 0 1 3-10l126-102-28-14a9 9 0 0 1-5-10l25-77-73 15a9 9 0 0 1-10-5l-14-33-57 61a9 9 0 0 1-14-8l27-141-44 25a9 9 0 0 1-12-3z"
+    display="inline"
+  />
+  <path
+    id="text33"
+    [attr.fill]="_fgColor()"
+    stroke-width=".3"
+    d="M201 395 93 347v-16l108-54v26l-75 35 75 31zm101-138-59 160h-30l59-160zm11 112 75-31-75-35v-26l109 54v16l-109 48z"
+    aria-label="&lt;/&gt;"
+    display="inline"
+    font-size="223.8"
+    font-weight="700"
+    style="-inkscape-font-specification: 'sans-serif Bold'"
+  />
+</svg>

src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.scss

@@ -0,0 +1,12 @@
+.bg {
+  color: black;
+}
+
+.fg {
+  color: #00ff00;
+}
+
+fa-stack {
+  width: 1.5em;
+  height: 1em;
+}

src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FallHacksIconComponent } from './fall-hacks-icon.component';
+
+describe('FallHacksIconComponent', () => {
+  let component: FallHacksIconComponent;
+  let fixture: ComponentFixture<FallHacksIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FallHacksIconComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FallHacksIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/assets/icons/fall-hacks-icon/fall-hacks-icon.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+@Component({
+  selector: 'cs-fall-hacks-icon',
+  imports: [],
+  templateUrl: './fall-hacks-icon.component.html',
+  styleUrl: './fall-hacks-icon.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FallHacksIconComponent {
+  bgColor = input<string>();
+  fgColor = input<string>();
+  width = input<number>();
+  height = input<number>();
+  protected _bgColor = computed(() => this.bgColor() ?? '#000');
+  protected _fgColor = computed(() => this.fgColor() ?? '#0f0');
+  protected _width = computed(() => this.width() ?? 64);
+  protected _height = computed(() => this.height() ?? 64);
+}

src/assets/icons/fall-hacks-icon/fall-hacks.svg.ts

@@ -0,0 +1,18 @@
+import { IconDefinition } from '@fortawesome/angular-fontawesome';
+
+const bgPath =
+  'm257 45-44 88a9 9 0 0 1-13 3l-44-25 28 141a9 9 0 0 1-15 8l-57-61-14 33a9 9 0 0 1-10 5l-73-15 25 77a9 9 0 0 1-4 10L7 323l127 102a9 9 0 0 1 2 10l-15 43h273l-16-43a9 9 0 0 1 3-10l126-102-28-14a9 9 0 0 1-5-10l25-77-73 15a9 9 0 0 1-10-5l-14-33-57 61a9 9 0 0 1-14-8l27-141-44 25a9 9 0 0 1-12-3z';
+
+export const fallHacksBg: IconDefinition = {
+  prefix: 'csss',
+  iconName: 'fall-hacks-logo',
+  icon: [512, 512, [], '', bgPath]
+};
+
+const codePath =
+  'M201 395 93 347v-16l108-54v26l-75 35 75 31zm101-138-59 160h-30l59-160zm11 112 75-31-75-35v-26l109 54v16l-109 48z';
+export const fallHacksCode: IconDefinition = {
+  prefix: 'csss',
+  iconName: 'fall-hacks-logo',
+  icon: [512, 512, [], '', codePath]
+};

src/styles.scss

@@ -42,7 +42,9 @@ a.csss-link {
 
 article.content {
   line-height: 1.5;
-  header {
+
+  hgroup:nth-child(1),
+  header:nth-child(1) {
     margin-top: 5svh;
   }
 

src/ui/csss-code/button/button.component.scss

@@ -25,6 +25,3 @@ button {
 fa-icon {
   color: white;
 }
-
-button:hover {
-}