Globalize more components, wip fall ctf events page

_global/components/BaseHead.astro

@@ -3,7 +3,7 @@ import { ViewTransitions } from 'astro:transitions';
 import { type SiteName, getSiteConfig } from '../configs';
 
 export interface HeadProps {
-  site_name: SiteName;
+  site_name?: SiteName;
   title?: string;
   description?: string;
   image?: string;
@@ -16,6 +16,9 @@ export interface HeadProps {
 
 
 const props = Astro.props as HeadProps;
+if (!props.site_name) {
+  throw new Error("site_name is required in BaseHead");
+}
 const siteConfig = getSiteConfig(props.site_name);
 
 const siteName = siteConfig.title;

_global/content/events/fallctf/2024/index.mdx

@@ -66,14 +66,4 @@ The beginner division is intended for underclassmen students who do not have muc
 If either you or your teammate have taken CS 341 (previously CS 241), ECE 391, or have played in three or more CTFs, then your team should be registered in the Advanced division. If you have some experience or would like to compete in the Advanced Division, teams can opt into the Advanced division! Otherwise, teams will play in the Beginner division.
 
 ## Frequently Asked Questions
-**Q:** What is a CTF?  
-**A:** CTF is an acronym for "capture-the-flag," which in the context of the cybersecurity field are competitions where teams solve security-related challenges to find a flag (usually a string of text). The flag can then be submitted to the competition platform for points, and the teams compete against each other for the most points!
 
-**Q:** How are tie-breakers determined?  
-**A:** The leaderboard is sorted first by the team with the most points. If teams have the same number of points, then the team who submitted their most recent flag earlier wins the tie-break.
-
-**Q:** How do I form a team?  
-**A:** By the day before the competition, we will be opening team registration on our competition platform. Feel free to find your team partner beforehand. We will also have multiple opportunities before and during the event to find and form teams!
-
-**Q:** I heard that there will be companies present. Do I need to dress up or prepare a resume?  
-**A:** We do not require a dress code and the expectation is that most people will be dressed casually. We will be offering a resume book to our sponsors and a resume PDF upload form will be provided during the event. If you need help preparing a resume, feel free to ask for advice in our Discord or take advantage of campus career resources!

sigpwny.com/src/styles/md.css → _global/styles/md.css

@@ -7,6 +7,25 @@
   padding-top: 1rem;
   padding-bottom: 0.25rem;
 }
+.md-root h1,
+.md-root h2,
+.md-root h3 {
+  font-weight: bold;
+}
+.md-root h1 {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  margin-bottom: 0.5rem;
+}
+.md-root h2 {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  margin-bottom: 0.5rem;
+}
+.md-root h3 {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
 .md-root h1:first-child,
 .md-root h2:first-child,
 .md-root h3:first-child,
@@ -84,7 +103,4 @@
 }
 .md-root tbody tr:last-child td:last-child {
   border-radius: 0 0 0.75rem 0;
-}
-.md-root .gatsby-resp-image-wrapper {
-  @apply mb-2;
 }

fallctf.com/package.json

@@ -28,6 +28,7 @@
     "@floating-ui/react": "^0.26.23",
     "astro": "^4.14.3",
     "dayjs": "^1.11.13",
+    "framer-motion": "^11.5.4",
     "rehype-katex": "^7.0.1",
     "remark-math": "^6.0.0",
     "tailwindcss": "^3.4.10",

fallctf.com/src/components/FallCTFLogo.tsx

@@ -0,0 +1,15 @@
+interface Props {
+  year?: number;
+  color?: string;
+}
+
+export default function FallCTFLogo({ year, color }: Props) {
+  return (
+    <>
+      <p className="font-bold text-8xl">
+        <span>Fall CTF</span>
+        {year ? <span>&nbsp;{year}</span> : null}
+      </p>
+    </>
+  )
+}

fallctf.com/src/layouts/Base.astro

@@ -1,6 +1,8 @@
 ---
 import '@/styles/fallctf.css';
+import '$/styles/md.css';
 import '$/styles/prism-one-dark.css';
+import 'katex/dist/katex.min.css';
 
 import type { HeadProps } from '$/components/BaseHead.astro';
 import BaseHead from '$/components/BaseHead.astro';

fallctf.com/src/layouts/Event.astro

@@ -0,0 +1,70 @@
+---
+import Layout from '@/layouts/Base.astro';
+import Link from '$/components/Link.astro';
+import { type CollectionEntry } from 'astro:content';
+import { type HeadProps } from '$/components/BaseHead.astro';
+import FallCTFLogo from '@/components/FallCTFLogo';
+
+type Event = CollectionEntry<'events'>['data'];
+
+interface Props extends HeadProps {
+  event: Event;
+};
+
+const props: Props = Astro.props;
+const event = props.event;
+
+// const rawMeetings = (await getMeetings()).sort(
+//   (a, b) => b.data.time_start.valueOf() - a.data.time_start.valueOf()
+// );
+
+// type MeetingType = typeof rawMeetings[0];
+
+// const meetingsBySemester = rawMeetings.reduce(
+//   (acc, meeting) => {
+//     const semester = meeting.data.semester;
+//     if (acc[semester]) {
+//       acc[semester].push(meeting);
+//     } else {
+//       acc[semester] = [meeting];
+//     }
+//     return acc;
+//   }, {} as {[semester: string]: MeetingType[]}
+// );
+
+// const meetingSidebarItems = Object.keys(meetingsBySemester).map((semester) => ({
+//   name: formatSemester(semester),
+//   items: meetingsBySemester[semester].map((meeting) => ({
+//     name: meeting.data.week_number != null ? `Week ${weekNumber(meeting.data.week_number)}: ${meeting.data.title}` : meeting.data.title,
+//     url: meeting.slug,
+//     active: meeting.slug === Astro.url.pathname,
+//   })),
+//   active: false
+// }));
+
+// // If a meeting is set as active, we also want to set the parent semester as active
+// meetingSidebarItems.forEach((semester) => {
+//   semester.active = semester.items.some((meeting) => meeting.active);
+// });
+---
+
+<Layout {...props}>
+  <section id="hero">
+    <div class="flex flex-col items-center">
+      <FallCTFLogo year={2024} />
+      <span class="flex flex-row gap-2">
+        {event.links.map((link) => (
+          <Link
+            href={link.url}
+            class="btn-primary font-bold border-2 border-surface-250"
+          >
+            {link.name}
+          </Link>
+        ))}
+      </span>
+    </div>
+  </section>
+  <div class="flex flex-row gap-x-4">
+    <slot />
+  </div>
+</Layout>

fallctf.com/src/pages/2024.astro

@@ -0,0 +1,34 @@
+---
+import Layout from '@/layouts/Event.astro';
+import { getCollection } from 'astro:content';
+
+const page = (await getCollection('events', (event) => event.data.title === "Fall CTF 2024"))[0];
+if (!page) {
+  return Astro.error(404, 'Event not found');
+}
+const event = page.data;
+---
+<Layout
+  event={event}
+  title={event.title}
+  description={event.description}
+>
+  <div class="flex flex-col gap-4">
+    <details>
+      <summary>What is a CTF?</summary>
+      <span>CTF is an acronym for "capture-the-flag," which in the context of the cybersecurity field are competitions where teams solve security-related challenges to find a flag (usually a string of text). The flag can then be submitted to the competition platform for points, and the teams compete against each other for the most points!</span>
+    </details>
+    <details>
+      <summary>How are tie-breakers determined?</summary>
+      <span>The leaderboard is sorted first by the team with the most points. If teams have the same number of points, then the team who submitted their most recent flag earlier wins the tie-break.</span>
+    </details>
+    <details>
+      <summary>How do I form a team?</summary>
+      <span>By the day before the competition, we will be opening team registration on our competition platform. Feel free to find your team partner beforehand. We will also have multiple opportunities before and during the event to find and form teams!</span>
+    </details>
+    <details>
+      <summary>I heard that there will be companies present. Do I need to dress up or prepare a resume?</summary>
+      <span>We do not require a dress code and the expectation is that most people will be dressed casually. We will be offering a resume book to our sponsors and a resume PDF upload form will be provided during the event. If you need help preparing a resume, feel free to ask for advice in our Discord or take advantage of campus career resources!</span>
+    </details>
+  </div>
+</Layout>

fallctf.com/src/pages/[...slug].astro

@@ -0,0 +1,49 @@
+---
+import Layout from '@/layouts/Event.astro';
+import { getCollection, render } from 'astro:content';
+import Link from '$/components/Link.astro';
+import { MdxComponents } from '$/components/Mdx/index.astro';
+import FallCTFLogo from '@/components/FallCTFLogo';
+
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import duration from 'dayjs/plugin/duration';
+import advanced from 'dayjs/plugin/advancedFormat';
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(duration);
+dayjs.extend(advanced);
+
+export async function getStaticPaths() {
+  // filter to only fallctf events
+  const events = (await getCollection('events', (event) => event.data.series === "fallctf")).sort(
+    (a, b) => b.data.time_start.valueOf() - a.data.time_start.valueOf()
+  );
+  return events.map((event) => ({
+    params: { slug: dayjs(event.data.time_start).format('YYYY') },
+    props: { page: event },
+  }));
+};
+
+const { page } = Astro.props;
+const { Content } = await render(page);
+const event = page.data;
+
+// const fallEvents = rawEvents
+//   .filter(e => e.data.series === 'fallctf')
+//   .sort((a, b) => new Date(b.data.time_start).getTime() - new Date(a.data.time_start).getTime());
+
+// const [latestEvent, ...previousEvents] = fallEvents;
+
+const flavor = 'Fall CTF is a beginner-friendly CTF competition for UIUC students, designed to introduce students to cybersecurity topics.'
+---
+<Layout
+  event={event}
+  title={event.title}
+  description={event.description}
+>
+  <section class="md-root w-full max-w-prose mx-auto">
+    <Content components={MdxComponents} />
+  </section>
+</Layout>