William Tran
2 years ago
commit
2b8362f89c
@ -1,35 +1,52 @@ |
||||
--- |
||||
kind: pipeline |
||||
type: docker |
||||
name: node14 |
||||
name: node16 |
||||
|
||||
steps: |
||||
- name: check-lockfile |
||||
image: node:16 |
||||
commands: |
||||
- node ./check-lockfile.js |
||||
|
||||
- name: install-deps |
||||
image: node:14 |
||||
image: node:16 |
||||
depends_on: |
||||
- check-lockfile |
||||
commands: |
||||
- npm install |
||||
|
||||
- name: lint |
||||
image: node:14 |
||||
image: node:16 |
||||
depends_on: |
||||
- install-deps |
||||
commands: |
||||
- npm run lint |
||||
|
||||
- name: build |
||||
image: node:14 |
||||
image: node:16 |
||||
depends_on: |
||||
- install-deps |
||||
commands: |
||||
- npm run build |
||||
|
||||
- name: export |
||||
image: node:14 |
||||
image: node:16 |
||||
depends_on: |
||||
- build |
||||
commands: |
||||
- npm run export |
||||
|
||||
- name: deploy (staging) |
||||
image: node:16 |
||||
depends_on: |
||||
- export |
||||
environment: |
||||
TOKEN: |
||||
from_secret: STAGING_TOKEN |
||||
commands: |
||||
- 'curl -XPOST -H "Authorization: $TOKEN" -H "X-Branch: $DRONE_BRANCH" "https://csclub.uwaterloo.ca/~a3thakra/update-csc/"' |
||||
|
||||
trigger: |
||||
event: |
||||
exclude: |
||||
|
||||
@ -0,0 +1,10 @@ |
||||
const lockfile = require('./package-lock.json') |
||||
|
||||
if (lockfile.lockfileVersion !== 2) { |
||||
console.error(` |
||||
Please upgrade to npm v7 and revert changes to the lockfile. |
||||
|
||||
- \`npm i -g npm\` to upgrade.
|
||||
`.trim())
|
||||
process.exit(1) |
||||
} |
||||
@ -1,7 +1,71 @@ |
||||
.bubble { |
||||
.container { |
||||
position: relative; |
||||
padding: calc(36rem / 16) 0; |
||||
overflow-x: clip; |
||||
} |
||||
|
||||
.bubble { |
||||
--border-radius: calc(5000rem / 16); |
||||
|
||||
display: flex; |
||||
flex-direction: row; |
||||
position: absolute; |
||||
top: 0; |
||||
height: 100%; |
||||
width: 100%; |
||||
justify-content: center; |
||||
align-items: flex-start; |
||||
} |
||||
|
||||
.bubble:nth-child(odd) { |
||||
background-color: var(--blue-1-20); |
||||
.bar { |
||||
height: 100%; |
||||
width: 100%; |
||||
} |
||||
|
||||
.decoration { |
||||
display: none; |
||||
width: calc(128rem / 16); |
||||
} |
||||
|
||||
.margin { |
||||
display: none; |
||||
} |
||||
|
||||
.content { |
||||
position: relative; |
||||
z-index: 1; |
||||
} |
||||
|
||||
.container:nth-child(odd) .bar { |
||||
background-color: var(--primary-accent-light); |
||||
} |
||||
|
||||
@media only screen and (min-width: calc(1350rem / 16)) { |
||||
.container:nth-child(odd) .decoration { |
||||
display: block; |
||||
position: absolute; |
||||
} |
||||
|
||||
.container:nth-child(4n + 1) .bar { |
||||
border-top-right-radius: var(--border-radius); |
||||
border-bottom-right-radius: var(--border-radius); |
||||
transform: translateX(-12.5vw); |
||||
} |
||||
|
||||
.container:nth-child(4n + 1) .decoration { |
||||
top: calc(-50rem / 16); |
||||
right: 8vw; |
||||
} |
||||
|
||||
.container:nth-child(4n + 3) .bar { |
||||
border-top-left-radius: var(--border-radius); |
||||
border-bottom-left-radius: var(--border-radius); |
||||
transform: translateX(12.5vw); |
||||
} |
||||
|
||||
.container:nth-child(4n + 3) .decoration { |
||||
top: calc(-50rem / 16); |
||||
left: 8vw; |
||||
transform: rotateY(180deg); |
||||
} |
||||
} |
||||
|
||||
@ -1,11 +1,24 @@ |
||||
import React from "react"; |
||||
|
||||
import { Image } from "@/components/Image"; |
||||
|
||||
import { DefaultLayout } from "./DefaultLayout"; |
||||
|
||||
import styles from "./Bubble.module.css"; |
||||
|
||||
export default function Bubble(props: { children: React.ReactNode }) { |
||||
export function Bubble(props: { children: React.ReactNode }) { |
||||
return ( |
||||
<div className={styles.bubble}> |
||||
<DefaultLayout>{props.children}</DefaultLayout> |
||||
<div className={styles.container}> |
||||
<div className={styles.bubble} aria-hidden> |
||||
<div className={styles.bar} /> |
||||
<Image |
||||
className={styles.decoration} |
||||
src="/images/bubble-decoration.svg" |
||||
/> |
||||
</div> |
||||
<div className={styles.content}> |
||||
<DefaultLayout>{props.children}</DefaultLayout> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
@ -0,0 +1,6 @@ |
||||
.code { |
||||
padding: 0 calc(4rem / 16); |
||||
background: var(--code-background); |
||||
border-radius: calc(5rem / 16); |
||||
word-wrap: break-word; |
||||
} |
||||
@ -0,0 +1,9 @@ |
||||
import React, { HTMLAttributes } from "react"; |
||||
|
||||
import styles from "./Code.module.css"; |
||||
|
||||
export function Code(props: HTMLAttributes<HTMLElement>) { |
||||
const classes = [styles.code, props.className ?? ""]; |
||||
|
||||
return <code {...props} className={classes.join(" ")} />; |
||||
} |
||||
@ -1,19 +1,24 @@ |
||||
import React from "react"; |
||||
import styles from "./EmailSignup.module.css"; |
||||
|
||||
import { Button } from "./Button"; |
||||
import { Input } from "./Input"; |
||||
|
||||
import styles from "./EmailSignup.module.css"; |
||||
|
||||
export function EmailSignup() { |
||||
return ( |
||||
<section className={styles.container}> |
||||
<h1 className={styles.header}>Join Our Mailing List!</h1> |
||||
<form className={styles.form} action=""> |
||||
<Input type="text" placeholder="Full Name*" required /> |
||||
<Input type="email" placeholder="Email*" required /> |
||||
<Button type="submit" className={styles.button}> |
||||
Subscribe |
||||
</Button> |
||||
</form> |
||||
<h1 className={styles.header}>Join our mailing list!</h1> |
||||
<p> |
||||
Join our mailing list to receive email notifications about important |
||||
news and upcoming events! |
||||
</p> |
||||
<Button |
||||
isLink={true} |
||||
href="https://mailman.csclub.uwaterloo.ca/postorius/lists/csc-general.csclub.uwaterloo.ca/" |
||||
className={styles.button} |
||||
> |
||||
Subscribe |
||||
</Button> |
||||
</section> |
||||
); |
||||
} |
||||
|
||||
@ -0,0 +1,7 @@ |
||||
.line { |
||||
display: block; |
||||
margin: calc(1rem / 16) 0 calc(34rem / 16); |
||||
height: calc(1rem / 16); |
||||
border: none; |
||||
background-color: var(--primary-heading); |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
import React from "react"; |
||||
|
||||
import styles from "./HorizontalLine.module.css"; |
||||
|
||||
export function HorizontalLine() { |
||||
return <hr className={styles.line} />; |
||||
} |
||||
@ -1,10 +1,10 @@ |
||||
.link { |
||||
color: var(--blue-2); |
||||
color: var(--primary-accent); |
||||
transition-duration: 0.3s; |
||||
text-decoration: none; |
||||
white-space: normal; |
||||
} |
||||
|
||||
.link:hover { |
||||
color: var(--teal-2); |
||||
color: var(--secondary-accent); |
||||
} |
||||
|
||||
@ -0,0 +1,40 @@ |
||||
.card { |
||||
display: flex; |
||||
flex-direction: row; |
||||
box-sizing: border-box; |
||||
padding: calc(16rem / 16); |
||||
color: var(--purple-2); |
||||
font-size: 1rem; |
||||
} |
||||
|
||||
.card aside { |
||||
max-width: calc(142rem / 16); |
||||
margin-right: calc(45rem / 16); |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.card aside img { |
||||
max-width: calc(142rem / 16); |
||||
max-height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
|
||||
.content { |
||||
padding: calc(4rem / 16); |
||||
} |
||||
|
||||
.content h1 { |
||||
margin: 0; |
||||
margin-top: calc(4rem / 16); |
||||
font-size: calc(18rem / 16); |
||||
} |
||||
|
||||
.card section { |
||||
padding-bottom: 0; |
||||
} |
||||
|
||||
.spacer { |
||||
margin-top: calc(76rem / 16); |
||||
} |
||||
@ -0,0 +1,23 @@ |
||||
import React from "react"; |
||||
|
||||
import { Image } from "./Image"; |
||||
|
||||
import styles from "./MiniTechTalkCard.module.css"; |
||||
|
||||
interface MiniTechTalkProps { |
||||
name: string; |
||||
short: string; |
||||
poster?: string; |
||||
} |
||||
|
||||
export function MiniTechTalkCard({ name, poster, short }: MiniTechTalkProps) { |
||||
return ( |
||||
<article className={styles.card}> |
||||
<aside>{poster && <Image alt={name} src={poster} />}</aside> |
||||
<div className={styles.content}> |
||||
<h1>{name}</h1> |
||||
<p>{short}</p> |
||||
</div> |
||||
</article> |
||||
); |
||||
} |
||||