Create new page for board applications (#754)

Create new page for board applications (#754)

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>

src/lib/components/recursive-ul/types.ts

@@ -0,0 +1,4 @@
+export interface ListItem {
+  html: string;
+  children?: ListItem[];
+}

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 };
+}

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 };

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 }
 }

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"
 }

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;

src/routes/(site)/s23positions/+page.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  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>
+
+<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 18th, 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>

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'),
+    ],
+  },
+];

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');
+});

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}