Link from [term] to [term]/[event] (#412)

Closes #189

https://csclub.uwaterloo.ca/~a3thakra/csc/j285he-term-to-term-event/events/

Co-authored-by: Jared He <66887902+jaredjhe@users.noreply.github.com>
Reviewed-on: #412
Reviewed-by: n3parikh <n3parikh@csclub.uwaterloo.ca>
pull/419/head
Jared He 6 months ago
parent b0ca27416c
commit 0f1e8b7e81
  1. 4
      components/EventCard.module.css
  2. 16
      components/EventCard.tsx
  3. 4
      components/MiniEventCard.module.css
  4. 13
      components/MiniEventCard.tsx
  5. 6
      lib/events.ts
  6. 1
      pages/events/[year]/[term]/[event].tsx
  7. 1
      pages/events/[year]/[term]/index.tsx

@ -31,6 +31,10 @@
margin-bottom: 0;
}
.content > h1 a {
color: var(--primary-heading);
}
.content,
.content > h2 {
font-weight: 400;

@ -18,6 +18,10 @@ interface EventCardProps {
permaLink: string;
showDescription?: boolean;
children: ReactNode;
year: string;
term: string;
slug: string;
titleLinked: boolean;
}
export function EventCard({
@ -30,6 +34,10 @@ export function EventCard({
registerLink,
children,
showDescription = false,
year,
term,
slug,
titleLinked,
}: EventCardProps) {
return (
<article className={styles.card}>
@ -54,7 +62,13 @@ export function EventCard({
showDescription ? styles.mobileShowDescriptionContent : "",
].join(" ")}
>
<h1>{name}</h1>
<h1>
{titleLinked ? (
<Link href={`/events/${year}/${term}/${slug}`}>{name}</Link>
) : (
name
)}
</h1>
<h2>
<EventSetting date={date} online={online} location={location} />
</h2>

@ -14,6 +14,10 @@
margin: 0;
}
.name a {
color: var(--primary-heading);
}
.nameSpacer {
width: calc(140rem / 16);
}

@ -1,32 +1,39 @@
import React, { ReactNode } from "react";
import { EventSetting } from "./EventSetting";
import { Link } from "./Link";
import styles from "./MiniEventCard.module.css";
interface Props {
interface MiniEventCardProps {
name: string;
description: ReactNode;
short: string;
online: boolean;
location: string;
date: Date;
year: string;
term: string;
slug: string;
}
export const MiniEventCard: React.FC<Props> = ({
export const MiniEventCard: React.FC<MiniEventCardProps> = ({
name,
short,
description,
location,
date,
online,
year,
term,
slug,
}) => {
return (
<details className={styles.card}>
<summary>
<div onClick={(event) => event.preventDefault()}>
<h2 className={styles.name}>
<div>{name}</div>
<Link href={`/events/${year}/${term}/${slug}`}>{name}</Link>
<div className={styles.nameSpacer}></div>
</h2>
<div className={styles.info}>

@ -53,6 +53,9 @@ interface Metadata {
location: string;
permaLink: string;
registerLink?: string;
year: string;
term: string;
slug: string;
}
export interface Event {
@ -82,6 +85,9 @@ export async function getEventBySlug(
).toString(),
// permaLink is based on the directory structure in /pages
permaLink: `/events/${year}/${term}/${slug}`,
year: year,
term: term,
slug: slug,
} as Metadata,
};
}

@ -28,6 +28,7 @@ export default function EventInfoPage({ year, term, event }: Props) {
{...event.metadata}
date={new Date(event.metadata.date)}
showDescription
titleLinked={false}
>
<MDXRemote {...event.content} />
</EventCard>

@ -75,6 +75,7 @@ export default function TermPage(props: Props) {
{...metadata}
date={new Date(metadata.date)}
key={metadata.name + metadata.date.toString()}
titleLinked={true}
>
<MDXRemote {...content} />
</EventCard>

Loading…
Cancel
Save