Merge remote-tracking branch 'origin/main' into feat/organized-content
This commit is contained in:
commit
d0437106b8
|
@ -10,6 +10,9 @@ stages:
|
|||
- build
|
||||
- staging
|
||||
|
||||
variables:
|
||||
NEXT_PUBLIC_BASE_PATH: '/~a3thakra/csc'
|
||||
|
||||
install_deps:
|
||||
stage: .pre
|
||||
script:
|
||||
|
@ -25,14 +28,22 @@ build:
|
|||
script:
|
||||
- npm run build
|
||||
|
||||
pages:
|
||||
staging:
|
||||
stage: staging
|
||||
script:
|
||||
- npm run export
|
||||
- mv public src-public
|
||||
- mv out public
|
||||
artifacts:
|
||||
paths:
|
||||
- public
|
||||
- out
|
||||
only:
|
||||
- main
|
||||
refs:
|
||||
- main
|
||||
|
||||
deploy_staging:
|
||||
stage: .post
|
||||
needs: ["staging"]
|
||||
script:
|
||||
- 'curl -XPOST -H "Authorization: Basic $STAGING_SECRET" "https://csclub.uwaterloo.ca/~a3thakra/csc/"'
|
||||
only:
|
||||
refs:
|
||||
- main
|
|
@ -0,0 +1,32 @@
|
|||
.button,
|
||||
.link {
|
||||
font-family: "Poppins", "sans-serif";
|
||||
border-radius: calc(20rem / 16);
|
||||
background-color: var(--blue-2);
|
||||
color: white;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition-duration: 0.3s;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button:hover,
|
||||
.link:hover {
|
||||
background-color: var(--teal-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.small {
|
||||
padding: calc(5rem / 16) calc(30rem / 16);
|
||||
font-size: calc(14rem / 16);
|
||||
}
|
||||
|
||||
.normal {
|
||||
padding: calc(10rem / 16) calc(50rem / 16);
|
||||
font-size: calc(18rem / 16);
|
||||
}
|
|
@ -0,0 +1,40 @@
|
|||
import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
|
||||
import styles from "./Button.module.css";
|
||||
|
||||
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
isLink?: false;
|
||||
}
|
||||
|
||||
interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
||||
isLink: true;
|
||||
}
|
||||
|
||||
type Props = (ButtonProps | LinkProps) & { size?: "small" | "normal" };
|
||||
|
||||
export function Button(props: Props) {
|
||||
const btnSize = props.size ? props.size : "normal";
|
||||
if (props.isLink) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { size, isLink, ...otherProps } = props;
|
||||
return (
|
||||
<a
|
||||
{...otherProps}
|
||||
target="_blank"
|
||||
className={`${styles.link} ${styles[btnSize]} ${
|
||||
otherProps.className ?? ""
|
||||
}`}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { size, isLink, ...otherProps } = props;
|
||||
return (
|
||||
<button
|
||||
{...otherProps}
|
||||
className={`${styles.button} ${styles[btnSize]} ${
|
||||
otherProps.className ?? ""
|
||||
}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -21,7 +21,8 @@
|
|||
}
|
||||
|
||||
.registerButton {
|
||||
width: 100%;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content > h1 {
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import React, { ReactNode } from "react";
|
||||
import { Button } from "./Button";
|
||||
import styles from "./EventCard.module.css";
|
||||
|
||||
import { EventSetting } from "./EventSetting";
|
||||
|
@ -29,11 +30,15 @@ export function EventCard({
|
|||
<aside>
|
||||
{poster && <Image alt={name} src={poster} />}
|
||||
{!poster && <div className={styles.spacer}></div>}
|
||||
{/* TODO: use the <Button /> component */}
|
||||
{registerLink && (
|
||||
<button className={styles.registerButton}>
|
||||
<a href={registerLink}>Register</a>
|
||||
</button>
|
||||
<Button
|
||||
isLink={true}
|
||||
href={registerLink}
|
||||
size="small"
|
||||
className={styles.registerButton}
|
||||
>
|
||||
Register
|
||||
</Button>
|
||||
)}
|
||||
</aside>
|
||||
<section className={styles.content}>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
box-sizing: border-box;
|
||||
max-width: calc(540rem / 16);
|
||||
padding: calc(24rem / 16);
|
||||
border-radius: calc(4rem / 16);
|
||||
border-radius: calc(20rem / 16);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
@ -22,7 +22,7 @@
|
|||
color: var(--purple-2);
|
||||
font-weight: bolder;
|
||||
font-size: calc(18rem / 16);
|
||||
line-height: calc(27rem / 16);
|
||||
line-height: calc(27 / 18);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
@ -42,7 +42,7 @@
|
|||
}
|
||||
|
||||
.logo {
|
||||
width: calc(30rem / 16);
|
||||
width: calc(32rem / 16);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
@ -50,7 +50,7 @@
|
|||
|
||||
.setting {
|
||||
margin: 0;
|
||||
color: var(--blue-1);
|
||||
color: var(--blue-2);
|
||||
font-weight: bolder;
|
||||
font-size: calc(14rem / 16);
|
||||
}
|
||||
|
@ -58,6 +58,34 @@
|
|||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.card {
|
||||
padding: 0;
|
||||
background-color: #e1eefa;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.details {
|
||||
min-width: calc(150rem / 16);
|
||||
}
|
||||
|
||||
.name,
|
||||
.setting {
|
||||
font-size: calc(14rem / 16);
|
||||
line-height: calc(21 / 14);
|
||||
}
|
||||
|
||||
.poster {
|
||||
width: calc(95rem / 16);
|
||||
height: calc(95rem / 16);
|
||||
border: 1px solid var(--purple-2);
|
||||
box-sizing: border-box;
|
||||
margin-right: calc(14rem / 16);
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: calc(12rem / 16);
|
||||
line-height: calc(18 / 12);
|
||||
}
|
||||
|
||||
.logo,
|
||||
.button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React, { ReactNode } from "react";
|
||||
// import { Button } from "./Button";
|
||||
import { Button } from "./Button";
|
||||
import { Image } from "./Image";
|
||||
import { EventSetting } from "./EventSetting";
|
||||
import styles from "./EventDescriptionCard.module.css";
|
||||
|
@ -65,9 +65,9 @@ export function EventDescriptionCard({
|
|||
<footer>
|
||||
{registerLink && (
|
||||
<div className={styles.button}>
|
||||
<button>
|
||||
<a href={registerLink}>Register</a>
|
||||
</button>
|
||||
<Button isLink={true} href={registerLink} size="small">
|
||||
Register
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{online && platformURL && (
|
||||
|
|
|
@ -0,0 +1,9 @@
|
|||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.setting {
|
||||
display: block;
|
||||
}
|
||||
}
|
|
@ -1,4 +1,5 @@
|
|||
import React from "react";
|
||||
import styles from "./EventSetting.module.css";
|
||||
|
||||
interface Props {
|
||||
date: Date;
|
||||
|
@ -15,13 +16,20 @@ export function EventSetting(props: Props) {
|
|||
const time = props.date.toLocaleTimeString("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
timeZoneName: "short",
|
||||
});
|
||||
const location = props.online ? `Online - ${props.location}` : props.location;
|
||||
const separator = <span className={styles.separator}> | </span>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<time dateTime={props.date.toISOString()}>{`${date} | ${time}`}</time>
|
||||
{` | ${location}`}
|
||||
<time className={styles.setting} dateTime={props.date.toISOString()}>
|
||||
{date}
|
||||
</time>
|
||||
{separator}
|
||||
<span className={styles.setting}>{time}</span>
|
||||
{separator}
|
||||
{location}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@ import React, { ImgHTMLAttributes } from "react";
|
|||
export function Image(props: ImgHTMLAttributes<HTMLImageElement>) {
|
||||
const { src: relativeSrc = "" } = props;
|
||||
|
||||
let absoluteSrc = process.env.BASE_PATH ?? "/";
|
||||
let absoluteSrc = process.env.NEXT_PUBLIC_BASE_PATH ?? "/";
|
||||
if (absoluteSrc.endsWith("/") && relativeSrc.startsWith("/")) {
|
||||
absoluteSrc += relativeSrc.slice(1);
|
||||
} else if (absoluteSrc.endsWith("/") || relativeSrc.startsWith("/")) {
|
||||
|
|
|
@ -8,19 +8,19 @@
|
|||
color: var(--purple-2);
|
||||
font-size: calc(18rem / 16);
|
||||
font-weight: bold;
|
||||
line-height: calc(27rem / 16);
|
||||
line-height: calc(27 / 18);
|
||||
}
|
||||
|
||||
.author {
|
||||
color: var(--purple-1);
|
||||
font-style: normal;
|
||||
line-height: calc(21rem / 16);
|
||||
line-height: calc(21 / 16);
|
||||
font-size: calc(14rem / 16);
|
||||
margin: calc(5rem / 16) 0 calc(7rem / 16) 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
line-height: calc(21rem / 16);
|
||||
line-height: calc(21 / 16);
|
||||
color: var(--purple-2);
|
||||
}
|
||||
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
font-weight: bold;
|
||||
color: var(--purple-2);
|
||||
font-size: calc(24rem / 16);
|
||||
line-height: calc(36rem / 16);
|
||||
line-height: calc(36 / 24);
|
||||
margin-bottom: calc(14rem / 16);
|
||||
}
|
||||
|
||||
|
@ -21,7 +21,7 @@
|
|||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: calc(14rem / 16);
|
||||
line-height: calc(21rem / 16);
|
||||
line-height: calc(21 / 14);
|
||||
white-space: pre-line;
|
||||
color: var(--purple-2);
|
||||
vertical-align: baseline;
|
||||
|
@ -62,7 +62,7 @@
|
|||
color: var(--purple-2);
|
||||
font-weight: 600;
|
||||
font-size: calc(24rem / 16);
|
||||
line-height: calc(36rem / 16);
|
||||
line-height: calc(36 / 24);
|
||||
}
|
||||
|
||||
.teamMemberDemo > hr {
|
||||
|
@ -84,7 +84,7 @@
|
|||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.newsDemo,
|
||||
.eventDescriptionCardDemo {
|
||||
background-color: #e1eefa;
|
||||
background-color: var(--off-white);
|
||||
}
|
||||
|
||||
.eventDescriptionCardDemo > * {
|
||||
|
|
|
@ -45,6 +45,7 @@ import { EventDescriptionCard } from "./EventDescriptionCard";
|
|||
import { TeamMember } from "./TeamMember";
|
||||
import { TeamMemberCard } from "./TeamMemberCard";
|
||||
import { OrganizedContent, LinkProps } from "./OrganizedContent";
|
||||
import { Button } from "./Button";
|
||||
|
||||
const events = [
|
||||
{ Content: OOTBReact, metadata: OOTBReactEventMetadata },
|
||||
|
@ -95,6 +96,31 @@ export function NewsCardDemo() {
|
|||
);
|
||||
}
|
||||
|
||||
export function ButtonDemo() {
|
||||
return (
|
||||
<>
|
||||
<h3>Standard buttons</h3>
|
||||
<p>
|
||||
<Button isLink={true} href="/">
|
||||
Link
|
||||
</Button>
|
||||
</p>
|
||||
<p>
|
||||
<Button>Button</Button>
|
||||
</p>
|
||||
<h3>Small buttons</h3>
|
||||
<p>
|
||||
<Button isLink={true} href="/" size="small">
|
||||
Small Link
|
||||
</Button>
|
||||
</p>
|
||||
<p>
|
||||
<Button size="small">Small Button</Button>
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function EventDescriptionCardDemo() {
|
||||
return (
|
||||
<div className={styles.eventDescriptionCardDemo}>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
export const metadata = {
|
||||
name: "Afterhours: Personal Relationships",
|
||||
short: "Learn how React works and make your own version!",
|
||||
date: new Date("2021-03-02 2:00 PM"),
|
||||
date: new Date("2021-03-02 2:00 PM GMT-4"),
|
||||
online: false,
|
||||
location: "MC",
|
||||
registerLink: "http://csclub.uwaterloo.ca/",
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
export const metadata = {
|
||||
name: "Alt-Tab",
|
||||
short: "CSC is proud to present to you Alt-Tab!",
|
||||
date: new Date("March 25, 2021 19:00:00"),
|
||||
date: new Date("March 25, 2021 19:00:00 GMT-4"),
|
||||
online: true,
|
||||
location: "Twitch",
|
||||
poster: "/images/playground/alt-tab.jpg",
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
export const metadata = {
|
||||
name: "Out of the Box: React",
|
||||
short: "Out of the Box is a series of code-along projects that explore what's under the hood of modern web frameworks.",
|
||||
date: new Date("March 23, 2021 19:00:00"),
|
||||
date: new Date("March 23, 2021 19:00:00 GMT-4"),
|
||||
online: true,
|
||||
location: "Twitch",
|
||||
poster: "/images/playground/intro-ootb.jpg",
|
||||
|
|
|
@ -5,5 +5,5 @@ const withMDX = require("@next/mdx")({
|
|||
module.exports = withMDX({
|
||||
pageExtensions: ["ts", "tsx", "mdx"],
|
||||
trailingSlash: true,
|
||||
basePath: process.env.BASE_PATH,
|
||||
basePath: process.env.NEXT_PUBLIC_BASE_PATH,
|
||||
});
|
||||
|
|
|
@ -1,15 +1,26 @@
|
|||
import React from "react";
|
||||
import React, { AnchorHTMLAttributes } from "react";
|
||||
import { AppProps } from "next/app";
|
||||
import { MDXProvider } from "@mdx-js/react";
|
||||
import { ThemeProvider } from "../components/theme";
|
||||
import { Navbar } from "../components/Navbar";
|
||||
import NextLink from "next/link";
|
||||
import "./_app.css";
|
||||
import "./font.css";
|
||||
|
||||
function Link(props: AnchorHTMLAttributes<HTMLAnchorElement>) {
|
||||
const { href, ...other } = props;
|
||||
|
||||
return (
|
||||
<NextLink href={href ?? "#"}>
|
||||
<a {...other}></a>
|
||||
</NextLink>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App({ Component, pageProps }: AppProps): JSX.Element {
|
||||
return (
|
||||
<ThemeProvider theme="light">
|
||||
<MDXProvider components={{}}>
|
||||
<MDXProvider components={{ a: Link }}>
|
||||
<Navbar />
|
||||
<Component {...pageProps} />
|
||||
</MDXProvider>
|
||||
|
|
|
@ -6,6 +6,7 @@ import {
|
|||
TeamMemberDemo,
|
||||
TeamMemberCardDemo,
|
||||
OrganizedContentDemo,
|
||||
ButtonDemo,
|
||||
} from "../components/playground";
|
||||
|
||||
import { TeamMemberCard } from "../components/TeamMemberCard";
|
||||
|
@ -37,6 +38,14 @@ unavailable
|
|||
|
||||
---
|
||||
|
||||
## `<Button />`
|
||||
|
||||
The `<Button />` is customizable in size and in whether it is an anchor tag or a button tag.
|
||||
|
||||
<ButtonDemo />
|
||||
|
||||
---
|
||||
|
||||
## `<EventDescriptionCard />`
|
||||
|
||||
The `<EventDescriptionCard />` component is used on the home page, and uses the
|
||||
|
@ -57,7 +66,7 @@ The `<EventCard />` component is used on the events page, and uses the
|
|||
|
||||
## `<TeamMember />`
|
||||
|
||||
The `<TeamMember />` component has an image of the team member along with their name and role.
|
||||
The `<TeamMember />` component has an image of the team member along with their name and role.
|
||||
It is used on the Meet the Team page for non executive members.
|
||||
|
||||
<TeamMemberDemo />
|
||||
|
|
Loading…
Reference in New Issue