Squashed commit of the following:

commit ffb717b
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Mon Sep 19 19:03:43 2022 -0800

    Recreated #570

commit 700ffc8
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Mon Sep 19 17:12:28 2022 -0800

    Added error page Playwright test

commit 1698f87
Merge: 3d96e18 3781e15
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Mon Sep 19 17:06:53 2022 -0800

    Merge branch 'mgr8/about' into mgr8/error

commit 3781e15
Merge: 5d808c1 42cc73b
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Mon Sep 19 17:02:25 2022 -0800

    Merge branch 'mig/index' into mgr8/about

commit 42cc73b
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Mon Sep 19 16:44:30 2022 -0800

    Update check_website.yaml

commit 196d2b6
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Mon Sep 19 16:35:56 2022 -0800

    Update check_website.yaml

commit 5d808c1
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Mon Sep 19 16:32:54 2022 -0800

    Moved officer data directory

commit 94e2573
Merge: 77a2c65 cb3e7dd
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Mon Sep 19 16:06:42 2022 -0800

    Merge branch 'mig/index' into mgr8/about

commit cb3e7dd
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Mon Sep 19 16:04:56 2022 -0800

    Force comma-dangle for only-multiline

commit 385567f
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Mon Sep 19 15:55:02 2022 -0800

    Using microsoft/playwright-github-action for Website Check

    See: <https://github.com/marketplace/actions/run-playwright-tests#usage>

commit df2c572
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Mon Sep 19 15:49:54 2022 -0800

    Moved `/legacy/` to `/src/lib/public/legacy/`

commit 77a2c65
Merge: fe5d751 d688512
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Mon Sep 19 15:44:07 2022 -0800

    Merge branch 'mig/index' into mgr8/about

commit d688512
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Mon Sep 19 15:43:17 2022 -0800

    Update package.json

commit fe5d751
Merge: 5414725 dafd2e0
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Mon Sep 19 15:40:13 2022 -0800

    Merge branch 'mig/index' into mgr8/about

commit dafd2e0
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Mon Sep 19 15:35:21 2022 -0800

    Update package.json

commit 7158eaa
Merge: 5e33be2 13dbf81
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Mon Sep 19 15:01:15 2022 -0800

    Merge branch 'main' into mig/index

commit 13dbf81
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Fri Sep 16 16:05:37 2022 -0800

    Revised `/1st` (#569)

    * Initial progress

    * Updated 1st contributions!

commit 2005116
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Thu Sep 15 20:45:06 2022 -0800

    Added `/devproposal` for tomorrow's Dev event (#567)

    For the _Dev Project Setup_ event (9/16/22).

    See: <https://acmcsuf.com/events#dev-project-setup-2022-september-16>

commit 5414725
Merge: df8af18 5e33be2
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Wed Sep 14 19:58:55 2022 -0800

    Merge branch 'mig/index' into mgr8/about

commit 5e33be2
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Wed Sep 14 19:58:30 2022 -0800

    Specified `/tests` for Playwright testing

commit df8af18
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Wed Sep 14 19:40:16 2022 -0800

    Progress

    TODO: figure out how to make Playwright ONLY test in `/tests/`.

commit 198a5dc
Author: Mike Lee <mike.lee816@gmail.com>
Date:   Wed Sep 14 22:10:01 2022 -0400

    Add document title to quiz page (#565)

commit 90fff24
Merge: 36d15b5 d95ae45
Author: Erwin Medina <erwin.l.medina@gmail.com>
Date:   Wed Sep 14 13:05:28 2022 -0700

    Merge pull request #562 from erwinmedina/erwinmedina

    Adjusted all titles to reflect consistency; format: {page} | ACM at CSUF

commit d95ae45
Merge: 0114ae6 36d15b5
Author: Erwin Medina <erwin.l.medina@gmail.com>
Date:   Wed Sep 14 10:18:20 2022 -0700

    Merge branch 'main' into erwinmedina

commit 0114ae6
Author: Erwin Medina <erwin.l.medina@gmail.com>
Date:   Wed Sep 14 09:58:56 2022 -0700

    fixed all titles to read {page} | ACM at CSUF

commit fa086b9
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Tue Sep 13 21:56:21 2022 -0800

    Revert "Merge branch 'mgr8/teams' into mig/index"

    This reverts commit e218f8f, reversing
    changes made to e6e1704.

commit fbd3d2f
Author: Erwin Medina <erwin.l.medina@gmail.com>
Date:   Tue Sep 13 22:54:59 2022 -0700

    Adjusted the Events title, 401 title to have a vertical slash instead of a forward slash. Added a title for 1st  Contributions, using same template as the other titles.

commit 223b10c
Author: Erwin Medina <erwin.l.medina@gmail.com>
Date:   Tue Sep 13 22:50:21 2022 -0700

    Adjusted the Events title, 401 title to have a vertical slash instead of a forward slash. Added a title for First Contributions, using same template as the other titles.

commit e218f8f
Merge: e6e1704 a306b5b
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Tue Sep 13 16:07:58 2022 -0800

    Merge branch 'mgr8/teams' into mig/index

commit 3d96e18
Author: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Tue Sep 13 15:05:30 2022 -0800

    Create +error.svelte

    See: <https://kit.svelte.dev/docs/routing#error>

commit 36d15b5
Author: jason wong <jayywong92@gmail.com>
Date:   Tue Sep 13 00:24:38 2022 -0700

    f (#553)

commit 7260205
Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Date:   Tue Sep 13 07:05:45 2022 +0000

    Updated officer data (#550)

    Co-authored-by: jaasonw <jaasonw@users.noreply.github.com>
    Co-authored-by: jason wong <jayywong92@gmail.com>

commit 8fa06a8
Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Date:   Tue Sep 13 07:00:00 2022 +0000

    Add/Update officer Ethan Davidson (#552)

    * Updated officer data

    * convert to webp

    * weird

    Co-authored-by: jaasonw <jaasonw@users.noreply.github.com>
    Co-authored-by: jaasonw <jayywong92@gmail.com>

commit 948b855
Author: jason wong <jayywong92@gmail.com>
Date:   Mon Sep 12 23:29:02 2022 -0700

    update create-pull-request package to v4.1.1 (#548)

    attempt to fix officer automation workflow by updating the create-pull-request package

commit a306b5b
Author: EthanThatOneKid <31261035+EthanThatOneKid@users.noreply.github.com>
Date:   Mon Sep 12 18:24:21 2022 -0700

    Page `/teams` init

commit 1f0d8b9
Merge: 44a2435 caace44
Author: Erwin Medina <erwin.l.medina@gmail.com>
Date:   Mon Sep 12 12:40:16 2022 -0700

    Merge pull request #544 from erwinmedina/erwinmedina

    Adjusted 'ready-up.svelte' from 800+ members to 1000+ members

commit caace44
Author: Erwin Medina <erwin.l.medina@gmail.com>
Date:   Sun Sep 11 21:00:41 2022 -0700

    Adjusted 'ready-up.svelte' from 800+ members to 1000+ members

.eslintrc.cjs

@@ -16,6 +16,8 @@ module.exports = {
     indent: ['error', 2, { SwitchCase: 1 }],
     'func-style': ['error', 'declaration', { allowArrowFunctions: false }],
     'prefer-arrow-callback': 'error',
+    'comma-dangle': 'off',
+    '@typescript-eslint/comma-dangle': ['error', 'only-multiline'],
     '@typescript-eslint/no-unused-vars': 'error',
     '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
   },

.github/workflows/check_website.yaml

@@ -46,6 +46,9 @@ jobs:
       - name: Check
         run: npm run check
 
+      - name: npx playwright install
+        run: npx playwright install
+
       - name: Test
         run: npm run test
 

.github/workflows/update_officer.yaml

@@ -44,7 +44,7 @@ jobs:
 
       - name: Create Pull Request
         id: pull_request
-        uses: peter-evans/create-pull-request@v3
+        uses: peter-evans/create-pull-request@v4.1.1
         with:
           commit-message: Updated officer data
           title: 'Add/Update officer ${{ steps.officer-name.outputs.result }}'

package.json

@@ -11,19 +11,20 @@
     "url": "https://github.com/EthanThatOneKid/acmcsuf.com.git/"
   },
   "scripts": {
+    "start": "npm run dev",
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
-    "test": "vitest --run",
+    "test": "vitest --run && npm run test:browser",
     "test:watch": "vitest",
     "test:size": "npm i && size-limit",
     "test:coverage": "vitest run --coverage",
-    "test:browser": "playwright test",
+    "test:browser": "playwright test /tests",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --compiler-warnings \"css-unused-selector:ignore,unused-export-let:error\"",
-    "lint": "prettier --check . && eslint .",
+    "lint": "eslint . --fix",
     "format": "prettier --write .",
     "host": "npm run all && npm run preview",
-    "all": "npm run format && npm run lint && npm run check && npm t && npm run build"
+    "all": "npm run lint && npm run format && npm run check && npm run build && npm t"
   },
   "devDependencies": {
     "@playwright/test": "^1.25.0",

src/lib/components/block/block.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { TextAlignment } from '$lib/public/text-alignment/text-alignment';
+
+  export let align: TextAlignment = TextAlignment.CENTER;
+</script>
+
+<section style:--alignment={align}>
+  <div>
+    <slot name="headline" tag="h1" class="headline" />
+    <slot name="text" tag="p" class="text" />
+  </div>
+</section>
+
+<style lang="scss">
+  section {
+    --alignment: center;
+
+    display: flex;
+    justify-content: center;
+    text-align: var(--alignment);
+    margin: 0 24px;
+  }
+
+  section div {
+    width: min(1150px, calc(70% + 100px));
+  }
+
+  section div :global(h2) {
+    font-weight: 600;
+  }
+
+  section div :global(p) {
+    margin-top: 16px;
+  }
+</style>

src/lib/components/nav/bar.svelte

@@ -4,7 +4,7 @@
   import Toggle from '$lib/components/toggle/toggle.svelte';
   import ThemeLight from '$lib/components/svg/theme-light.svelte';
   import ThemeDark from '$lib/components/svg/theme-dark.svelte';
-  import { AcmTheme, theme } from '$lib/legacy/theme';
+  import { AcmTheme, theme } from '$lib/public/legacy/theme';
 
   let jsEnabled = false;
   onMount(() => (jsEnabled = true));

src/lib/components/toaster/toasts.ts

@@ -1,4 +1,4 @@
-import { acmGeneral } from '$lib/legacy/acm-paths';
+import { acmGeneral } from '$lib/public/legacy/acm-paths';
 import { writable } from 'svelte/store';
 
 const MAX_TOASTS = 4;

src/lib/public/board/data/index.ts

@@ -0,0 +1,10 @@
+import type { Officer } from '$lib/public/board/types';
+import { Term } from '$lib/public/board/types';
+import OFFICERS_JSON from './officers.json';
+import TIERS_JSON from './tiers.json';
+
+export const VISIBLE_TERMS = [Term.Fall22, Term.Spring22, Term.Fall21, Term.Spring21];
+
+export const OFFICERS: Officer[] = [...OFFICERS_JSON];
+
+export const TIERS: string[] = [...TIERS_JSON];

src/lib/public/board/types.ts

@@ -0,0 +1,20 @@
+export enum Term {
+  Spring21 = 'S21',
+  Fall21 = 'F21',
+  Spring22 = 'S22',
+  Fall22 = 'F22',
+  Spring23 = 'S23',
+}
+
+export interface Officer {
+  fullName: string;
+  picture: string;
+  displayName?: string;
+
+  positions: {
+    [t in Term]?: {
+      title: string;
+      tier: number;
+    };
+  };
+}

src/lib/public/board/utils.ts

@@ -0,0 +1,17 @@
+import type { Officer, Term } from './types';
+import { TIERS, VISIBLE_TERMS } from './data';
+import { writable } from 'svelte/store';
+
+export const termIndex = writable<number>(0);
+
+export function getPositionByTermIndex(
+  officer: Officer,
+  termIndex: number
+): Officer['positions'][Term] | undefined {
+  return officer.positions[VISIBLE_TERMS[termIndex]];
+}
+
+export function getOfficerTierByTermIndex(officer: Officer, termIndex: number): string | undefined {
+  const position = getPositionByTermIndex(officer, termIndex);
+  return position ? TIERS[position.tier] : undefined;
+}

src/lib/public/text-alignment/text-alignment.ts

@@ -0,0 +1,5 @@
+export enum TextAlignment {
+  LEFT = 'left',
+  RIGHT = 'right',
+  CENTER = 'center',
+}

src/routes/+error.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+</script>
+
+<svelte:head>
+  <title>ACM at CSUF / {$page.status || 404}</title>
+</svelte:head>
+
+<section title={$page.error?.message}>
+  <em>404</em>
+  <h1>Frank can't find where you're going!</h1>
+  <img src="/assets/png/lost-frank.png" alt="404 - Page Not Found" />
+</section>
+
+<style>
+  section {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 24px;
+    color: var(--acm-light);
+  }
+
+  section h1 {
+    margin-bottom: 2em;
+    align-items: center;
+    text-align: center;
+  }
+
+  section em {
+    align-items: center;
+    text-align: center;
+    font-size: 50px;
+    margin-bottom: 0.5em;
+    margin-top: 2em;
+    text-shadow: 2px 2px #92c4df;
+    font-weight: 600;
+  }
+
+  section img {
+    width: 100%;
+    max-width: 1000px;
+    height: auto;
+    margin-bottom: 3em;
+  }
+</style>

src/routes/+layout.svelte

@@ -2,7 +2,7 @@
   import Navbar from '$lib/components/nav/bar.svelte';
   import Footer from '$lib/components/footer/footer.svelte';
   import AcmToaster from '$lib/components/toaster/toaster.svelte';
-  import { AcmTheme, theme } from '$lib/legacy/theme';
+  import { AcmTheme, theme } from '$lib/public/legacy/theme';
   import { onMount } from 'svelte';
 
   function changeTheme(event: MediaQueryListEvent) {

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Spacing from '$lib/legacy/spacing.svelte';
+  import Spacing from '$lib/public/legacy/spacing.svelte';
   import Hero from './hero.svelte';
   import WhyJoin from './why-join.svelte';
   import AcmPaths from './acm-paths.svelte';

src/routes/about/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import Spacing from '$lib/legacy/spacing.svelte';
+  import Spacing from '$lib/public/legacy/spacing.svelte';
+  import type { Officer } from '$lib/public/board/types';
+  import { getPositionByTermIndex, termIndex } from '$lib/public/board/utils';
   import AboutUs from './about-us.svelte';
   import OfficerProfileList from './officer-profile-list.svelte';
-  import { getPositionByTermIndex, type Officer } from './officers';
-  import { termIndex } from './term-index';
 
   function filterOfficers(officer: Officer): boolean {
     const isCurrentTerm = getPositionByTermIndex(officer, $termIndex) !== undefined;

src/routes/about/officer-profile-list.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import Select from '$lib/components/select/select.svelte';
+  import type { Officer, Term } from '$lib/public/board/types';
+  import { OFFICERS, VISIBLE_TERMS } from '$lib/public/board/data';
+  import { termIndex } from '$lib/public/board/utils';
   import OfficerProfile from './officer-profile.svelte';
-  import type { Officer, Term } from './officers';
-  import { OFFICERS, VISIBLE_TERMS } from './officers';
-  import { termIndex } from './term-index';
 
   export let placeholderPicture: string | undefined = undefined;
   export let filter: (officer: Officer) => boolean;

src/routes/about/officer-profile.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
-  import { getOfficerTierByTermIndex, getPositionByTermIndex, type Officer } from './officers';
-  import { termIndex } from './term-index';
+  import type { Officer } from '$lib/public/board/types';
+  import {
+    termIndex,
+    getOfficerTierByTermIndex,
+    getPositionByTermIndex,
+  } from '$lib/public/board/utils';
 
   export let info: Officer;
   export let placeholderPicture = 'placeholder.webp';

src/routes/acm-paths.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { pinnedPaths } from '$lib/legacy/acm-paths';
+  import { pinnedPaths } from '$lib/public/legacy/acm-paths';
 </script>
 
 <section>

src/routes/ready-up.svelte

@@ -15,7 +15,7 @@
         <br /><br />
 
         <span class="brand-med">
-          Our chapter of 800+ members is forever free and open for anyone to join, regardless of
+          Our chapter of 1000+ members is forever free and open for anyone to join, regardless of
           major or technical ability.
         </span>
       </p>

src/routes/teams/+page.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { TextAlignment } from '$lib/public/text-alignment/text-alignment';
+  import { acmAI, acmAlgo, acmDesign, acmDev } from '$lib/public/legacy/acm-paths';
+  import Spacing from '$lib/public/legacy/spacing.svelte';
+  import Block from '$lib/components/block/block.svelte';
+  import PathSection from './path-section.svelte';
+</script>
+
+<svelte:head>
+  <title>Teams | ACM at CSUF</title>
+</svelte:head>
+
+<Spacing --min="175px" --med="200px" --max="200px" />
+
+<Block>
+  <h1 slot="headline" class="size-xl">Meet the Teams</h1>
+  <p slot="text" class="size-md">
+    Teams are committees that specialize in specific fields in the tech industry. We’ve designed the
+    teams to be gateways for students to explore new fields, develop new interests, and learn new
+    skills that will benefit them in the industry.
+  </p>
+</Block>
+
+<Spacing --min="100px" --med="175px" --max="200px" />
+
+<PathSection info={acmAI} textAlign={TextAlignment.RIGHT}>
+  <p slot="content" class="size-md">
+    This team is dedicated to providing accessible information about artificial intelligence and
+    machine learning to all. <span class="brand-emerald brand-em">AI</span> focuses on fun projects geared
+    towards beginners in the field.
+  </p>
+</PathSection>
+
+<Spacing --med="64px" />
+
+<PathSection info={acmAlgo} textAlign={TextAlignment.LEFT}>
+  <p slot="content" class="size-md">
+    This team is dedicated to building programming fundamentals within students.
+    <span class="brand-purple brand-em">Algo</span> focuses on mastering data structures and algorithms,
+    enhancing problem solving abilities, and exploration of competitive programming.
+  </p>
+</PathSection>
+
+<Spacing --med="64px" />
+
+<PathSection info={acmDesign} textAlign={TextAlignment.RIGHT}>
+  <p slot="content" class="size-md">
+    This team is dedicated to emphasizing the importance of product design and product management in
+    the tech industry. <span class="brand-pink brand-em">Design</span> focuses on educating students
+    about design principles, design tools, and the intricacies of conceptualization, development, and
+    management of a product.
+  </p>
+</PathSection>
+
+<Spacing --med="64px" />
+
+<PathSection info={acmDev} textAlign={TextAlignment.LEFT}>
+  <p slot="content" class="size-md">
+    This team is dedicated to giving students the opportunity to explore tech via hands-on projects
+    and activities. <span class="brand-em brand-bluer">Dev</span> focuses on introducing students to
+    software development, and the various tech stacks used in the industry.
+  </p>
+</PathSection>
+
+<Spacing --min="40px" --med="95px" --max="120px" />