Add permalink in event card (#316)

https://csclub.uwaterloo.ca/~a3thakra/csc/permalink-homepage/

Co-authored-by: Neil Parikh <n3parikh@csclub.uwaterloo.ca>
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Reviewed-on: www/www-new#316
Reviewed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-authored-by: n3parikh <n3parikh@csclub.uwaterloo.ca>
Co-committed-by: n3parikh <n3parikh@csclub.uwaterloo.ca>
fix-md-font
n3parikh 1 year ago
parent 2ba73b398a
commit e088ff1f4f
  1. 14
      components/EventCard.tsx
  2. 3
      components/EventDescriptionCard.module.css
  3. 4
      components/EventDescriptionCard.tsx
  4. 8
      lib/events.ts
  5. 1
      pages/events/[year]/[term]/index.tsx
  6. 78
      types.d.ts

@ -7,7 +7,7 @@ import { Link } from "./Link";
import styles from "./EventCard.module.css";
interface BaseProps {
interface EventCardProps {
name: string;
short: string;
date: Date;
@ -15,15 +15,13 @@ interface BaseProps {
location: string;
poster?: string;
registerLink?: string;
permaLink: string;
showDescription?: boolean;
children: ReactNode;
}
type EventCardProps =
| (BaseProps & { showDescription?: false; link: string })
| (BaseProps & { showDescription: true; link?: string });
export function EventCard({
link,
permaLink,
name,
date,
online,
@ -60,8 +58,8 @@ export function EventCard({
<h2>
<EventSetting date={date} online={online} location={location} />
</h2>
{!showDescription && link && (
<Link href={link}>
{!showDescription && (
<Link href={permaLink}>
<span className={styles.mobileLearnMore}>Learn more</span>
</Link>
)}

@ -29,6 +29,9 @@
}
.logo {
display: flex;
justify-content: center;
align-items: center;
width: calc(32rem / 16);
margin-left: auto;
}

@ -3,6 +3,7 @@ import React from "react";
import { Button } from "./Button";
import { EventSetting } from "./EventSetting";
import { Image } from "./Image";
import { Link } from "./Link";
import { Discord, Twitch, Instagram, Facebook } from "./SocialLinks";
import styles from "./EventDescriptionCard.module.css";
@ -15,6 +16,7 @@ interface Props {
date: Date;
poster?: string;
registerLink?: string;
permaLink: string;
}
/**
@ -35,6 +37,7 @@ export function EventDescriptionCard({
date,
online,
registerLink,
permaLink,
}: Props) {
const Icon = getIcon(location);
@ -48,6 +51,7 @@ export function EventDescriptionCard({
<EventSetting date={date} online={online} location={location} />
</h2>
<p className={styles.desc}>{short}</p>
<Link href={permaLink}>Learn more</Link>
<footer>
{registerLink && (

@ -27,13 +27,13 @@ export async function getEventTermsByYear(year: string): Promise<string[]> {
}
interface Metadata {
slug: string;
name: string;
poster?: string;
short: string;
date: string;
online: boolean;
location: string;
permaLink: string;
registerLink?: string;
}
@ -55,7 +55,11 @@ export async function getEventBySlug(
return {
content: await serialize(content),
metadata: { ...metadata, slug } as Metadata,
metadata: {
...metadata,
// permaLink is based on the directory structure in /pages
permaLink: `/events/${year}/${term}/${slug}`,
} as Metadata,
};
}

@ -75,7 +75,6 @@ export default function Term(props: Props) {
{...metadata}
date={new Date(metadata.date)}
key={metadata.name + metadata.date.toString()}
link={`/events/${props.year}/${props.term}/${metadata.slug}`}
>
<MDXRemote {...content} />
</EventCard>

78
types.d.ts vendored

@ -1,84 +1,6 @@
/* eslint-disable import/order */
/* eslint-disable import/no-duplicates */
declare module "*.event.mdx" {
import { ComponentType } from "react";
interface EventMetadata {
name: string;
short: string;
date: Date;
online: boolean;
location: string;
poster?: string;
registerLink?: string;
}
const ReactComponent: ComponentType;
export const metadata: EventMetadata;
export default ReactComponent;
}
declare module "*.news.mdx" {
import { ComponentType } from "react";
interface NewsMetadata {
author: string;
date: Date;
}
const ReactComponent: ComponentType;
export const metadata: NewsMetadata;
export default ReactComponent;
}
declare module "*.team-member.mdx" {
import { ComponentType } from "react";
interface TeamMemberMetadata {
name: string;
role: string;
}
const ReactComponent: ComponentType;
export const metadata: TeamMemberMetadata;
export default ReactComponent;
}
declare module "*.section.mdx" {
import { ComponentType } from "react";
interface SectionMetadata {
title: string;
id: string;
}
const ReactComponent: ComponentType;
export const metadata: SectionMetadata;
export default ReactComponent;
}
declare module "*.talk.mdx" {
import { ComponentType } from "react";
interface TalkMetadata {
slug: string;
title: string;
presentors: string[];
thumbnails: { small: string; large?: string };
links: { file: string; type: string; size?: string }[];
}
const ReactComponent: ComponentType;
export const metadata: TalkMetadata;
export default ReactComponent;
}
declare module "*.mdx" {
import { ComponentType } from "react";

Loading…
Cancel
Save