From ad054dd24a14fa383af3e99584f55a43bd1bb146 Mon Sep 17 00:00:00 2001
From: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date: Thu, 19 Jan 2023 21:17:08 -0800
Subject: [PATCH] Create new page for board applications (#754)

Create new page for board applications (#754)
---
 .../recursive-ul/recursive-ul.svelte          |  16 ++
 src/lib/components/recursive-ul/types.ts      |   4 +
 src/lib/components/recursive-ul/utils.ts      |   5 +
 src/lib/public/board/data/index.ts            |   2 +
 src/lib/public/board/data/tiers.json          |   3 +
 src/lib/public/links/links.json               |   3 +-
 src/lib/server/links/data.ts                  |   2 +
 src/routes/(site)/s23positions/+page.svelte   | 133 +++++++++++++++
 src/routes/(site)/s23positions/data.ts        | 151 ++++++++++++++++++
 src/routes/(site)/s23positions/page.test.ts   |   8 +
 .../(site)/s23positions/position-list.svelte  |  13 ++
 .../(site)/s23positions/position.svelte       | 112 +++++++++++++
 src/routes/(site)/s23positions/position.ts    |  10 ++
 static/global.css                             |   6 +
 14 files changed, 467 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/recursive-ul/recursive-ul.svelte
 create mode 100644 src/lib/components/recursive-ul/types.ts
 create mode 100644 src/lib/components/recursive-ul/utils.ts
 create mode 100644 src/routes/(site)/s23positions/+page.svelte
 create mode 100644 src/routes/(site)/s23positions/data.ts
 create mode 100644 src/routes/(site)/s23positions/page.test.ts
 create mode 100644 src/routes/(site)/s23positions/position-list.svelte
 create mode 100644 src/routes/(site)/s23positions/position.svelte
 create mode 100644 src/routes/(site)/s23positions/position.ts

diff --git a/src/lib/components/recursive-ul/recursive-ul.svelte b/src/lib/components/recursive-ul/recursive-ul.svelte
new file mode 100644
index 000000000..5eb6c71a5
--- /dev/null
+++ b/src/lib/components/recursive-ul/recursive-ul.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { ListItem } from './types';
+
+  export let data: ListItem[];
+</script>
+
+<ul class="recursive-ul">
+  {#each data as item}
+    <li class="recursive-ul__item">
+      {@html item.html}
+      {#if item.children}
+        <svelte:self data={item.children} />
+      {/if}
+    </li>
+  {/each}
+</ul>
diff --git a/src/lib/components/recursive-ul/types.ts b/src/lib/components/recursive-ul/types.ts
new file mode 100644
index 000000000..ce858b540
--- /dev/null
+++ b/src/lib/components/recursive-ul/types.ts
@@ -0,0 +1,4 @@
+export interface ListItem {
+  html: string;
+  children?: ListItem[];
+}
diff --git a/src/lib/components/recursive-ul/utils.ts b/src/lib/components/recursive-ul/utils.ts
new file mode 100644
index 000000000..5d81ddd1a
--- /dev/null
+++ b/src/lib/components/recursive-ul/utils.ts
@@ -0,0 +1,5 @@
+import type { ListItem } from './types';
+
+export function li(html: string, children?: ListItem[]): ListItem {
+  return { html, children };
+}
diff --git a/src/lib/public/board/data/index.ts b/src/lib/public/board/data/index.ts
index 27db9b7b3..26dcd8ab0 100644
--- a/src/lib/public/board/data/index.ts
+++ b/src/lib/public/board/data/index.ts
@@ -3,6 +3,8 @@ import OFFICERS_JSON from './officers.json';
 import TIERS_JSON from './tiers.json';
 import TEAMS_JSON from './teams.json';
 
+export { OFFICERS_JSON, TIERS_JSON, TEAMS_JSON };
+
 export const VISIBLE_TERMS = [Term.Fall22, Term.Spring22, Term.Fall21, Term.Spring21];
 
 export const TIERS = { ...TIERS_JSON };
diff --git a/src/lib/public/board/data/tiers.json b/src/lib/public/board/data/tiers.json
index 2c7bc44af..c50ce869b 100644
--- a/src/lib/public/board/data/tiers.json
+++ b/src/lib/public/board/data/tiers.json
@@ -9,6 +9,7 @@
   "Special Events Officer": { "id": 7, "index": 450 },
   "Event Coordinator": { "id": 8, "index": 500 },
   "Marketing Leader": { "id": 9, "index": 550 },
+  "Marketing Officer": { "id": 24, "index": 560 },
   "Historian": { "id": 10, "index": 600 },
   "Algo Leader": { "id": 11, "index": 650 },
   "Algo Officer": { "id": 12, "index": 700 },
@@ -21,6 +22,8 @@
   "Dev Officer": { "id": 19, "index": 1050 },
   "AI Leader": { "id": 20, "index": 1100 },
   "AI Officer": { "id": 21, "index": 1150 },
+  "Game Dev Leader": { "id": 25, "index": 1170 },
+  "Game Dev Officer": { "id": 26, "index": 1180 },
   "Nodebuds Officer": { "id": 22, "index": 1200 },
   "ICC Representative": { "id": 23, "index": 1250 }
 }
diff --git a/src/lib/public/links/links.json b/src/lib/public/links/links.json
index 509433024..355a4f506 100644
--- a/src/lib/public/links/links.json
+++ b/src/lib/public/links/links.json
@@ -34,5 +34,6 @@
   "ai/projects/1": "https://docs.google.com/presentation/d/1BCYU3cTfNTffdUmiMHz8c2-A5qwna8yVPt7Fx3nzqGQ/edit?usp=sharing",
   "ai/projects/2": "https://colab.research.google.com/drive/1KaLN47LSfK4rAOzEOQleCX-Dy-qACZYC?usp=sharing",
   "roadmap": "https://github.com/users/EthanThatOneKid/projects/6",
-  "joblist": "/roadmap/views/10"
+  "joblist": "/roadmap/views/10",
+  "s23apply": "https://docs.google.com/forms/d/e/1FAIpQLScHHxO_LYHSyZvHozxuaSlhjY4WKU-lVsInm_cl_U88-6tbMQ/viewform"
 }
diff --git a/src/lib/server/links/data.ts b/src/lib/server/links/data.ts
index 59feed217..d29dca817 100644
--- a/src/lib/server/links/data.ts
+++ b/src/lib/server/links/data.ts
@@ -18,4 +18,6 @@ export const LINKS = {
   'design-template':
     'https://www.figma.com/file/MED3kRKmIxcoKblNTveEZZ/acmDesign-Challenge-Sheet?node-id=0%3A1',
   'live-walk': 'https://www.figma.com/file/PtYSxzB8BbKh3L46dQSjf1/Live-Interaction?node-id=0%3A1',
+  s23apply:
+    'https://docs.google.com/forms/d/e/1FAIpQLScHHxO_LYHSyZvHozxuaSlhjY4WKU-lVsInm_cl_U88-6tbMQ/viewform',
 } as const;
diff --git a/src/routes/(site)/s23positions/+page.svelte b/src/routes/(site)/s23positions/+page.svelte
new file mode 100644
index 000000000..0c22cb316
--- /dev/null
+++ b/src/routes/(site)/s23positions/+page.svelte
@@ -0,0 +1,133 @@
+<script lang="ts">
+  import { MetaTags } from 'svelte-meta-tags';
+  import Block from '$lib/components/block/block.svelte';
+  import Button from '$lib/components/button/button.svelte';
+  import Spacing from '$lib/public/legacy/spacing.svelte';
+  import { TextAlignment } from '$lib/public/legacy/text-alignment';
+
+  import PositionList from './position-list.svelte';
+  import { POSITIONS } from './data';
+
+  function expandAll() {
+    const positions = document.querySelectorAll('.position');
+    positions.forEach((el) => el.setAttribute('open', 'true'));
+  }
+</script>
+
+<svelte:head>
+  <title>Spring 2023 board applications | ACM at CSUF</title>
+</svelte:head>
+
+<MetaTags
+  openGraph={{
+    title: "Spring 2023 board applications",
+    description: "Listed below are the positions that are open for the Spring 2023 semester. Please read the descriptions carefully and apply for the position(s) that you are interested in. You may apply for multiple positions, but you may only be selected for one. If you are selected for a position, you will be contacted by the current board member in charge of that position.",
+    url: "https://acmcsuf.com/s23positions",
+    type: "article",
+    article: {
+      publishedTime: "2023-19-01T00:00:00.000Z",
+      modifiedTime: "2023-19-01T00:00:00.000Z",
+    },
+  }}
+/>
+
+<Spacing --min="175px" --med="200px" --max="200px" />
+
+<Block align={TextAlignment.LEFT}>
+  <h1 slot="headline" class="size-lg">Spring 2023 board applications</h1>
+  <p slot="text" class="size-sm">
+    Listed below are the positions that are open for the Spring 2023 semester. Please read the
+    descriptions carefully and apply for the position(s) that you are interested in. You may apply
+    for multiple positions, but you may only be selected for one. If you are selected for a
+    position, you will be contacted by the current board member in charge of that position.
+    <br />
+    <br />
+    Last updated January 19th, 2023
+    <br />
+    <br />
+    <span class="center-btn" on:click={expandAll} on:keypress={expandAll}>
+      <Button text="Expand all!" />
+    </span>
+  </p>
+</Block>
+
+<section class="positions-container">
+  <div class="positions-container-inner">
+    <PositionList data={POSITIONS} />
+  </div>
+</section>
+
+<Spacing --med="64px" />
+
+<span class="center-btn">
+  <Button link="/s23apply" text="Apply now!" />
+</span>
+
+<Spacing --med="64px" />
+
+<Block align={TextAlignment.LEFT}>
+  <h1 id="contact-information" slot="headline" class="size-lg">Contact information</h1>
+  <div slot="text" class="contact-text">
+    <p class="size-sm">
+      <span class="brand-italic"
+        >Feel free to contact the ACM Executive Board if you have questions.</span
+      >
+    </p>
+
+    <p class="size-sm">
+      <span class="brand-em">Karnikaa Velumani (ACM President)</span>
+    </p>
+    <ul>
+      <li>Email: <code>karnikaavelumani@csu.fullerton.edu</code></li>
+      <li>Discord: <code>Karbas#0001</code></li>
+    </ul>
+
+    <p>
+      <span class="brand-em">Ethan Davidson (ACM VP / Webmaster)</span>
+    </p>
+    <ul>
+      <li>Email: <code>ethandavidson@csu.fullerton.edu</code></li>
+      <li>Discord: <code>EthanThatOneKid#3456</code></li>
+    </ul>
+  </div>
+</Block>
+
+<Spacing --min="40px" --med="95px" --max="120px" />
+
+<style lang="scss">
+  .page-body {
+    width: 100%;
+    margin: 0 1rem;
+  }
+
+  .center-btn {
+    display: flex;
+    justify-content: center;
+  }
+
+  .contact-text ul {
+    padding: 0 0 0 1rem;
+  }
+
+  .positions-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .positions-container-inner {
+    margin: 0 24px;
+    width: 100%;
+  }
+
+  @media (min-width: 768px) {
+    .positions-container {
+      margin-top: 2rem;
+    }
+
+    .positions-container-inner {
+      max-width: 64ch;
+      margin: 0 1rem;
+    }
+  }
+</style>
diff --git a/src/routes/(site)/s23positions/data.ts b/src/routes/(site)/s23positions/data.ts
new file mode 100644
index 000000000..b7457f3d8
--- /dev/null
+++ b/src/routes/(site)/s23positions/data.ts
@@ -0,0 +1,151 @@
+import { li } from '$lib/components/recursive-ul/utils';
+
+import type { ClubPosition } from './position';
+
+/**
+ * The tools that are used in the club.
+ *
+ * @remarks This is a map of tool names to their reasons for being used.
+ */
+export const TOOLS = {
+  'Google Drive/Docs': 'To collaborate on presentations, documents, and spreadsheets.',
+  Discord: 'Internal team communication, assistance for student questions',
+  Figma: 'Create marketing materials and teaching students how to use it',
+  GitHub: 'To collaborate on code, manage projects, and teach students how to use it',
+  'Social media': 'Discord, Instagram, LinkedIn, and YouTube',
+  'Google Colab/Juptyer Notebook': 'Cloud development environment for Python',
+};
+
+export const POSITIONS: ClubPosition<keyof typeof TOOLS>[] = [
+  {
+    title: 'AI Officer',
+    teamColor: 'var(--acm-ai-rgb)',
+    requirements: [
+      li('Interest in artificial intelligence'),
+      li('Interest in public speaking/leading events'),
+      li('Passion for guiding AI related student projects'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'Google Colab/Juptyer Notebook'],
+    responsibilities: [
+      li('Attend AI board meetings and collaborate with other AI board members for workshops'),
+      li(
+        'Create biweekly/weekly workshop presentations prior to events that effectively teach students algorithms/data structures',
+        [li('Suggest new ideas/topics to teach at a workshop')]
+      ),
+      li('Oversee multiple AI semester projects'),
+      li('Check Discord messages and respond to the important discussion in regards to AI daily'),
+    ],
+  },
+  {
+    title: 'Algo Officer',
+    teamColor: 'var(--acm-algo-rgb)',
+    requirements: [
+      li('Passion for algorithms'),
+      li('Productive time management'),
+      li('Interest in public speaking and leading events'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord'],
+    responsibilities: [
+      li(
+        'Attend Algo board meetings and collaborate with other Algo board members for Algo workshops'
+      ),
+      li(
+        'Create weekly workshop presentations prior to events that effectively teach students algorithms/data structures'
+      ),
+      li('Check Discord messages and respond to the important discussion in regards to Algo daily'),
+    ],
+  },
+  {
+    title: 'Design Officer',
+    teamColor: 'var(--acm-design-rgb)',
+    requirements: [
+      li('Open mind to suggest new ideas in the field of design'),
+      li('Interest in learning and teaching common apps (ex. Figma)'),
+      li('Interest in programming to create basic front-end applications'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'Figma'],
+    responsibilities: [
+      li(
+        'Host engaging and interesting biweekly/weekly events along with the Design President and Officers'
+      ),
+      li(
+        'Research common design practices in tech and brands to relay this information via workshops and events, and to enhance our chapter'
+      ),
+      li('Attend weekly team meetings to catch up on what’s being worked on, progress, etc.'),
+      li(
+        'Check Discord messages and respond to the important discussion in regards to Design at least daily'
+      ),
+    ],
+  },
+  {
+    title: 'Dev Officer',
+    teamColor: 'var(--acm-dev-rgb)',
+    requirements: [
+      li('Passion for helping students develop projects'),
+      li('Strong communication and leadership'),
+      li('Flexibility with skills to assist students in a variety of projects'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'GitHub'],
+    responsibilities: [
+      li(
+        'Attend Dev board meetings, provide essential input and collaborate with the Dev President and other officers'
+      ),
+      li('Oversee multiple Dev semester projects'),
+      li('Assist and direct students in ACM Open Source Projects'),
+      li(
+        'Possibility of being tasked to collaborate and participate in events created in partnerships with other ACM branches',
+        [
+          li(
+            'These can include creating and presenting workshops on behalf of Dev or organizing an collab event'
+          ),
+        ]
+      ),
+      li(
+        'Check Discord messages and respond to the important discussion in regards to Dev at least daily'
+      ),
+    ],
+  },
+  {
+    title: 'Game Dev Officer',
+    teamColor: 'var(--acm-foundry-rgb)',
+    requirements: [
+      li('Passion and interest in game development'),
+      li('Strong communication and leadership'),
+      li('Flexibility with skills to assist students in a variety of projects'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'GitHub'],
+    responsibilities: [
+      li(
+        'Attend Game Dev board meetings, provide essential input and collaborate with the Game Dev President and other officers'
+      ),
+      li('Assist and direct students in Game Dev related projects'),
+      li(
+        'Host engaging and interesting biweekly/weekly workshops along with the Design President and Officers'
+      ),
+      li(
+        'Research common game dev techniques to relay this information via workshops and events, and to enhance our chapter'
+      ),
+      li(
+        'Check Discord messages and respond to the important discussion in regards to Dev at least daily'
+      ),
+    ],
+  },
+  {
+    title: 'Marketing Officer',
+    teamColor: 'var(--acm-marketing-rgb)',
+    requirements: [
+      li('Interest in exploring business and marketing'),
+      li('Substantial awareness or usage of multiple social media platforms'),
+      li('Represent and advocate diversity within the club'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'GitHub'],
+    responsibilities: [
+      li(
+        'Assist in designing flyers for marketing to be printed and posted on all forms of social media'
+      ),
+      li('Suggest and direct new ideas for the diversification of our club '),
+      li('Take pictures of our members to add to our socials and website gallery'),
+      li('Produce paragraphs for the announcements in our official Discord server'),
+    ],
+  },
+];
diff --git a/src/routes/(site)/s23positions/page.test.ts b/src/routes/(site)/s23positions/page.test.ts
new file mode 100644
index 000000000..3898fca63
--- /dev/null
+++ b/src/routes/(site)/s23positions/page.test.ts
@@ -0,0 +1,8 @@
+import { expect, test } from '@playwright/test';
+
+test.describe.configure({ mode: 'parallel' });
+
+test('s23positions page has expected h1', async ({ page }) => {
+  await page.goto('/s23positions');
+  expect(await page.textContent('h1')).toBe('Spring 2023 board applications');
+});
diff --git a/src/routes/(site)/s23positions/position-list.svelte b/src/routes/(site)/s23positions/position-list.svelte
new file mode 100644
index 000000000..3f194eab1
--- /dev/null
+++ b/src/routes/(site)/s23positions/position-list.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import Position from './position.svelte';
+  import type { ClubPosition } from './position';
+  import type { TOOLS } from './data';
+
+  export let data: ClubPosition<keyof typeof TOOLS>[];
+</script>
+
+{#each data as position}
+  <Position data={position} />
+{:else}
+  <p>There are no open positions at this time.</p>
+{/each}
diff --git a/src/routes/(site)/s23positions/position.svelte b/src/routes/(site)/s23positions/position.svelte
new file mode 100644
index 000000000..4d0731ecb
--- /dev/null
+++ b/src/routes/(site)/s23positions/position.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+  import RecursiveUL from '$lib/components/recursive-ul/recursive-ul.svelte';
+  import type { ClubPosition } from './position';
+  import { TOOLS } from './data';
+
+  export let data: ClubPosition<keyof typeof TOOLS>;
+
+  const id = data.title.replaceAll(/\s/g, '-').toLowerCase();
+  const formattedTools = data.tools.map((name) => ({
+    html: `<span class="headers">${name}:</span> ${TOOLS[name]}`,
+  }));
+</script>
+
+<details {id} style:--highlights={data.teamColor} class="position">
+  <summary class="position__summary">
+    <h2 class="headers">{data.title}</h2>
+  </summary>
+
+  <div class="position__body">
+    <div class="position__requirements">
+      <h3 class="headers">What you need</h3>
+      <RecursiveUL data={data.requirements} />
+    </div>
+
+    <p class="position__tools">
+      <span class="headers position__tools__title">Tools:</span>
+      <span class="position__tools__text"
+        >We used following tools to plan and keep up with the workload</span
+      >
+      <RecursiveUL data={formattedTools} />
+    </p>
+
+    <div class="position__responsibilities">
+      <h3 class="headers">Responsibilities</h3>
+      <RecursiveUL data={data.responsibilities} />
+    </div>
+  </div>
+</details>
+
+<style lang="scss">
+  .position {
+    scroll-padding-top: 1rem;
+    margin: 1rem 0;
+    box-shadow: 0 6px 18px rgba(var(--highlights, --acm-general-rgb), 0.25);
+    transition: all 0.15s ease-in-out;
+    border-radius: 30px;
+    border: 2px solid var(--acm-dark);
+
+    & :global(ul) {
+      padding-left: 1.5rem;
+      margin-left: 0;
+    }
+
+    &:hover {
+      box-shadow: 0 6px 18px rgba(var(--highlights, --acm-general-rgb), 0.65);
+    }
+
+    &[open] {
+      box-shadow: 0 6px 24px rgba(var(--highlights, --acm-general-rgb), 0.75);
+      border: 2px solid rgb(var(--highlights, --acm-general-rgb));
+    }
+
+    &:hover h2,
+    &[open] h2 {
+      color: rgb(var(--highlights, --acm-general-rgb));
+    }
+
+    &__summary {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem;
+      cursor: pointer;
+
+      /**
+       * [START HACK] Remove the default marker from the <details> element.
+       * @see https://stackoverflow.com/a/66814239
+       * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#customizing_the_disclosure_widget
+       */
+      list-style: none;
+      &::marker, /* Latest Chrome, Edge, Firefox */ 
+      &::-webkit-details-marker /* Safari */ {
+        display: none;
+      }
+      /* [END HACK] */
+    }
+
+    &__body {
+      padding: 1rem;
+    }
+
+    &__requirements {
+      margin-bottom: 1rem;
+    }
+
+    &__tools {
+      margin-bottom: 1rem;
+
+      &__title {
+        margin-bottom: 1rem;
+      }
+
+      &__text {
+        margin-bottom: 0.5rem;
+      }
+    }
+
+    &__responsibilities {
+      margin-bottom: 1rem;
+    }
+  }
+</style>
diff --git a/src/routes/(site)/s23positions/position.ts b/src/routes/(site)/s23positions/position.ts
new file mode 100644
index 000000000..39bab984c
--- /dev/null
+++ b/src/routes/(site)/s23positions/position.ts
@@ -0,0 +1,10 @@
+import type { ListItem } from '$lib/components/recursive-ul/types';
+import type { TIERS } from '$lib/public/board/data';
+
+export interface ClubPosition<ToolNames extends string = string> {
+  title: keyof typeof TIERS;
+  teamColor: string;
+  requirements: ListItem[];
+  tools: ToolNames[];
+  responsibilities: ListItem[];
+}
diff --git a/static/global.css b/static/global.css
index 7fa07a559..076452d04 100644
--- a/static/global.css
+++ b/static/global.css
@@ -19,6 +19,8 @@
   --acm-algo-rgb: 157, 53, 231;
   --acm-design-rgb: 255, 67, 101;
   --acm-dev-rgb: 30, 108, 255;
+  --acm-foundry-rgb: 111, 22, 255;
+  --acm-marketing-rgb: 212, 17, 83;
   --acm-special-events-rgb: 255, 208, 41;
 
   --perma-light: #f8f8f8;
@@ -64,6 +66,10 @@ body:has(nav > input[type='checkbox']:checked) {
   font-weight: 700;
 }
 
+.brand-italic {
+  font-style: italic;
+}
+
 .brand-header,
 .headers {
   font-weight: 600;