mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
events
This commit is contained in:
Belle
parent
e65c175849
commit
6f2b36b221
6 changed files with 270 additions and 145 deletions
|
|
@ -15,7 +15,7 @@ import { keyframes } from '@emotion/react'
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import Ticker from 'react-ticker'
|
||||
import PageVisibility from 'react-page-visibility'
|
||||
|
||||
import { Fade } from 'react-reveal'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
// const noOfCards = 7
|
||||
|
|
@ -51,6 +51,7 @@ export default function Carousel() {
|
|||
// >
|
||||
<PageVisibility onChange={handleVisibilityChange}>
|
||||
{pageIsVisible && (
|
||||
<Fade>
|
||||
<Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
|
||||
{() => (
|
||||
<Box
|
||||
|
|
@ -125,6 +126,7 @@ export default function Carousel() {
|
|||
</Box>
|
||||
)}
|
||||
</Ticker>
|
||||
</Fade>
|
||||
)}
|
||||
</PageVisibility>
|
||||
// </Box>
|
||||
|
|
|
|||
111
components/events.js
Normal file
111
components/events.js
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
import { Card, Box, Text, Grid, Flex, Avatar, Heading } from 'theme-ui'
|
||||
import tt from 'tinytime'
|
||||
import Link from 'next/link'
|
||||
import Sparkles from './sparkles'
|
||||
|
||||
const past = dt => new Date(dt) < new Date()
|
||||
const now = (start, end) =>
|
||||
new Date() > new Date(start) && new Date() < new Date(end)
|
||||
|
||||
const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
|
||||
<Link
|
||||
href={`https://events.hackclub.com/${slug}`}
|
||||
as={`https://events.hackclub.com/${slug}`}
|
||||
passHref
|
||||
>
|
||||
<Box
|
||||
as="a"
|
||||
sx={{
|
||||
position: 'relative',
|
||||
textDecoration: 'none',
|
||||
bg: 'elevated',
|
||||
color: 'text',
|
||||
p: [3, 3]
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
bg: past(end) ? 'sunken' : 'primary',
|
||||
color: past(end) ? 'text' : 'white',
|
||||
lineHeight: ['subheading', 'body'],
|
||||
m: -3,
|
||||
py: 2,
|
||||
px: 3,
|
||||
mb: 3,
|
||||
strong: { display: ['block', 'inline'] }
|
||||
}}
|
||||
>
|
||||
<Text>
|
||||
<strong>{tt('{MM} {Do}').render(new Date(start))}</strong>{' '}
|
||||
{tt('{h}:{mm}').render(new Date(start))}–
|
||||
{tt('{h}:{mm} {a}').render(new Date(end))}
|
||||
</Text>
|
||||
</Box>
|
||||
<Heading variant="subheadline" sx={{ mt: 0, mb: 1 }}>
|
||||
{title}
|
||||
</Heading>
|
||||
<Flex
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
color: 'muted'
|
||||
}}
|
||||
>
|
||||
{now(start, end)}
|
||||
{!avatar.includes('emoji') && (
|
||||
<Avatar
|
||||
src={avatar}
|
||||
alt={`${leader} profile picture`}
|
||||
size={24}
|
||||
sx={{ height: 24, mr: 2 }}
|
||||
/>
|
||||
)}
|
||||
<Text as="span">{leader}</Text>
|
||||
</Flex>
|
||||
{now(start, end) && (
|
||||
<Sparkles
|
||||
aria-hidden
|
||||
style={{
|
||||
pointerEvents: 'none',
|
||||
position: 'absolute !important',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Link>
|
||||
)
|
||||
|
||||
export default function Events({ events }) {
|
||||
return (
|
||||
<Box mb={3}>
|
||||
<Heading>
|
||||
Come hangout, talk to cool people*, and hack together at one of our {' '}
|
||||
<Link href="https://events.hackclub.com" target="_blank">
|
||||
upcoming events
|
||||
</Link>
|
||||
</Heading>
|
||||
<Grid
|
||||
mt={3}
|
||||
mb={2}
|
||||
columns={[2, 3, 4]}
|
||||
gap="1px"
|
||||
sx={{
|
||||
bg: 'sunken',
|
||||
borderRadius: 'extra',
|
||||
overflow: 'hidden',
|
||||
boxShadow: 'elevated',
|
||||
}}
|
||||
>
|
||||
{events.map(event => (
|
||||
<Event {...event} key={event.id} />
|
||||
))}
|
||||
</Grid>
|
||||
<Link href="/amas" target="_blank">
|
||||
*like George Hotz, Dylan Field, Sal Khan, and more
|
||||
</Link>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
|
@ -149,6 +149,9 @@ const Navigation = props => (
|
|||
<NextLink href="/slack" passHref>
|
||||
<Link>Slack</Link>
|
||||
</NextLink>
|
||||
<NextLink href="/clubs" passHref>
|
||||
<Link>Events</Link>
|
||||
</NextLink>
|
||||
<Link href="https://workshops.hackclub.com/">Workshops</Link>
|
||||
</NavBar>
|
||||
)
|
||||
|
|
|
|||
130
components/secret.js
Normal file
130
components/secret.js
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
import { Box, Text } from "theme-ui"
|
||||
import { useState, useEffect } from "react"
|
||||
|
||||
export default function Secret({ reveal, ...props }) {
|
||||
const [img, setImage] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
setImage('https://geta.dino.icu/dino.png')
|
||||
})
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
right: 5,
|
||||
bottom: 0,
|
||||
transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
|
||||
transition: '1s',
|
||||
zIndex: 3
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<Box
|
||||
as="div"
|
||||
sx={{
|
||||
height: '200px',
|
||||
width: '300px',
|
||||
backgroundColor: 'black',
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
zIndex: 0,
|
||||
'&:hover > .lid-one': {
|
||||
transform: 'rotateX(90deg)',
|
||||
transitionDelay: '0s'
|
||||
},
|
||||
'&:hover > .lid-two': {
|
||||
transform: 'rotateX(180deg)',
|
||||
transitionDelay: '0.25s'
|
||||
},
|
||||
'&:hover > .letter': {
|
||||
transform: 'translateY(-50px)',
|
||||
transitionDelay: '0.5s'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
as="div"
|
||||
className="lid-one"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
top: 0,
|
||||
left: 0,
|
||||
borderRight: '150px solid transparent',
|
||||
borderBottom: '100px solid transparent',
|
||||
borderLeft: '150px solid transparent',
|
||||
transformOrigin: 'top',
|
||||
transition: 'transform 0.25s linear',
|
||||
borderTop: '100px solid #8492a6',
|
||||
transform: 'rotateX(0deg)',
|
||||
zIndex: 3,
|
||||
transitionDelay: '0.75s'
|
||||
}}
|
||||
></Box>
|
||||
<Box
|
||||
as="div"
|
||||
className="lid-two"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
top: 0,
|
||||
left: 0,
|
||||
borderRight: '150px solid transparent',
|
||||
borderBottom: '100px solid transparent',
|
||||
borderLeft: '150px solid transparent',
|
||||
transformOrigin: 'top',
|
||||
transition: 'transform 0.25s linear',
|
||||
borderTop: '100px solid #8492a6',
|
||||
transform: 'rotateX(90deg)',
|
||||
zIndex: 1,
|
||||
transitionDelay: '0.5s'
|
||||
}}
|
||||
></Box>
|
||||
<Box
|
||||
as="div"
|
||||
className="envelope"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
top: 0,
|
||||
left: 0,
|
||||
borderTop: '100px solid transparent',
|
||||
borderRight: '150px solid #f9fafc',
|
||||
borderBottom: '150px solid #f9fafc',
|
||||
borderLeft: '150px solid #f9fafc',
|
||||
zIndex: 3
|
||||
}}
|
||||
></Box>
|
||||
<Box
|
||||
as="div"
|
||||
className="letter"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '80%',
|
||||
height: '80%',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '5px',
|
||||
border: '3px solid #e0e6ed',
|
||||
zIndex: 2,
|
||||
transition: '0.5s',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
mt: 3
|
||||
}}
|
||||
>
|
||||
<img src={img} width="30%" sx={{ margin: 'auto' }} />
|
||||
<Text>print kc</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
// credits: https://codepen.io/Coding-Star/pen/WNpbvwB
|
||||
|
|
@ -18,6 +18,7 @@ const nextConfig = {
|
|||
'cloud-k3mgtdz5i-hack-club-bot.vercel.app',
|
||||
'cloud-2jmtbnrpz-hack-club-bot.vercel.app',
|
||||
'assets.hackclub.com',
|
||||
'v5.airtableusercontent.com',
|
||||
''
|
||||
]
|
||||
},
|
||||
|
|
|
|||
166
pages/index.js
166
pages/index.js
|
|
@ -41,6 +41,8 @@ import RelativeTime from 'react-relative-time'
|
|||
import { get } from 'lodash'
|
||||
import useSWR from 'swr'
|
||||
import Konami from 'react-konami-code'
|
||||
import Secret from '../components/secret'
|
||||
import Events from '../components/events'
|
||||
|
||||
let Highlight = styled(Text)`
|
||||
color: inherit;
|
||||
|
|
@ -79,134 +81,6 @@ const rollout = keyframes`
|
|||
// )
|
||||
// }
|
||||
|
||||
// credits: https://codepen.io/Coding-Star/pen/WNpbvwB
|
||||
|
||||
function Secret({ reveal, ...props }) {
|
||||
const [img, setImage] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
setImage('https://geta.dino.icu/dino.png')
|
||||
})
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
right: 5,
|
||||
bottom: 0,
|
||||
transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
|
||||
transition: '1s',
|
||||
zIndex: 3
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<Box
|
||||
as="div"
|
||||
sx={{
|
||||
height: '200px',
|
||||
width: '300px',
|
||||
backgroundColor: 'black',
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
zIndex: 0,
|
||||
'&:hover > .lid-one': {
|
||||
transform: 'rotateX(90deg)',
|
||||
transitionDelay: '0s'
|
||||
},
|
||||
'&:hover > .lid-two': {
|
||||
transform: 'rotateX(180deg)',
|
||||
transitionDelay: '0.25s'
|
||||
},
|
||||
'&:hover > .letter': {
|
||||
transform: 'translateY(-50px)',
|
||||
transitionDelay: '0.5s'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
as="div"
|
||||
className="lid-one"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
top: 0,
|
||||
left: 0,
|
||||
borderRight: '150px solid transparent',
|
||||
borderBottom: '100px solid transparent',
|
||||
borderLeft: '150px solid transparent',
|
||||
transformOrigin: 'top',
|
||||
transition: 'transform 0.25s linear',
|
||||
borderTop: '100px solid #8492a6',
|
||||
transform: 'rotateX(0deg)',
|
||||
zIndex: 3,
|
||||
transitionDelay: '0.75s'
|
||||
}}
|
||||
></Box>
|
||||
<Box
|
||||
as="div"
|
||||
className="lid-two"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
top: 0,
|
||||
left: 0,
|
||||
borderRight: '150px solid transparent',
|
||||
borderBottom: '100px solid transparent',
|
||||
borderLeft: '150px solid transparent',
|
||||
transformOrigin: 'top',
|
||||
transition: 'transform 0.25s linear',
|
||||
borderTop: '100px solid #8492a6',
|
||||
transform: 'rotateX(90deg)',
|
||||
zIndex: 1,
|
||||
transitionDelay: '0.5s'
|
||||
}}
|
||||
></Box>
|
||||
<Box
|
||||
as="div"
|
||||
className="envelope"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
top: 0,
|
||||
left: 0,
|
||||
borderTop: '100px solid transparent',
|
||||
borderRight: '150px solid #f9fafc',
|
||||
borderBottom: '150px solid #f9fafc',
|
||||
borderLeft: '150px solid #f9fafc',
|
||||
zIndex: 3
|
||||
}}
|
||||
></Box>
|
||||
<Box
|
||||
as="div"
|
||||
className="letter"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '80%',
|
||||
height: '80%',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '5px',
|
||||
border: '3px solid #e0e6ed',
|
||||
zIndex: 2,
|
||||
transition: '0.5s',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
mt: 3
|
||||
}}
|
||||
>
|
||||
<img src={img} width="30%" sx={{ margin: 'auto' }} />
|
||||
<Text>print kc</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
function Page({
|
||||
hackathonsData,
|
||||
bankData,
|
||||
|
|
@ -215,12 +89,13 @@ function Page({
|
|||
githubData2,
|
||||
dataPieces,
|
||||
game,
|
||||
gameTitle
|
||||
gameTitle,
|
||||
events
|
||||
}) {
|
||||
let [gameImage, setGameImage] = useState('')
|
||||
let [gameImage1, setGameImage1] = useState('')
|
||||
let [reveal, setReveal] = useState(false)
|
||||
const [hover, setHover] = useState(false)
|
||||
const [hover, setHover] = useState(true)
|
||||
|
||||
let [key, setKey] = useState(0)
|
||||
let [key1, setKey1] = useState(0)
|
||||
|
|
@ -309,14 +184,15 @@ function Page({
|
|||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log('hi')
|
||||
if (reveal && !hover) {
|
||||
setTimeout(() => {
|
||||
if (reveal && !hover) {
|
||||
console.log(reveal)
|
||||
console.log(hover)
|
||||
setReveal(false)
|
||||
}
|
||||
}, 3000)
|
||||
}, 2000)
|
||||
}
|
||||
}, [reveal, hover])
|
||||
}, [hover])
|
||||
|
||||
const Node = ({ text, time, ...props }) => (
|
||||
<Flip
|
||||
|
|
@ -381,11 +257,11 @@ function Page({
|
|||
<Secret
|
||||
reveal={reveal}
|
||||
onMouseEnter={() => {
|
||||
setHover(false)
|
||||
setHover(true)
|
||||
console.log('hover:', hover)
|
||||
}}
|
||||
onMouseOut={() => {
|
||||
setHover(true)
|
||||
setHover(false)
|
||||
console.log('hover:', hover)
|
||||
}}
|
||||
/>
|
||||
|
|
@ -472,7 +348,7 @@ function Page({
|
|||
}}
|
||||
as="a"
|
||||
onClick={() => {
|
||||
!reveal ? setReveal(true) : setReveal(false)
|
||||
setHover(false); !reveal ? setReveal(true) : setReveal(false)
|
||||
}}
|
||||
>
|
||||
teen makers
|
||||
|
|
@ -553,15 +429,11 @@ function Page({
|
|||
duration={2000}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
// bottom: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
// right: 0,
|
||||
// height: '100%',
|
||||
zIndex: 1,
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
// objectFit: 'cover'
|
||||
}}
|
||||
src="https://www.youtube.com/embed/-sxRdKtKNa0"
|
||||
title="YouTube video player"
|
||||
|
|
@ -571,7 +443,8 @@ function Page({
|
|||
></Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Inspect />
|
||||
<Events events={events}/>
|
||||
{/* <Inspect /> */}
|
||||
</Container>
|
||||
<Box
|
||||
py={4}
|
||||
|
|
@ -813,7 +686,7 @@ export async function getStaticProps() {
|
|||
|
||||
// if(initialGitHubData != null) {
|
||||
let initialGitHubData1 = initialGitHubData.map(x =>
|
||||
(x.type == 'PushEvent' && x.actor.login != 'github-actions[bot]') ||
|
||||
(x.type == 'PushEvent' && x.actor.login != 'github-actions[bot]' && x.actor.login != 'dependabot[bot]') ||
|
||||
x.type == 'WatchEvent' ||
|
||||
x.type == 'PullRequestEvent'
|
||||
? x.type == 'PushEvent'
|
||||
|
|
@ -890,6 +763,10 @@ export async function getStaticProps() {
|
|||
res => res.json()
|
||||
)
|
||||
|
||||
let events = await fetch('https://events.hackclub.com/api/events/upcoming/').then(
|
||||
res => res.json()
|
||||
)
|
||||
|
||||
return {
|
||||
props: {
|
||||
dataPieces,
|
||||
|
|
@ -899,7 +776,8 @@ export async function getStaticProps() {
|
|||
hackathonsData,
|
||||
bankData,
|
||||
slackData,
|
||||
stars
|
||||
stars,
|
||||
events
|
||||
},
|
||||
revalidate: 30
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue