potential format?

This commit is contained in:
Belle 2022-12-06 08:01:20 -05:00
parent 6f2b36b221
commit b70f06dc32
18 changed files with 667 additions and 161 deletions

View file

@ -57,18 +57,18 @@ export default function Bank({ data }) {
Run your event/organziation on Hack Club Bank
</Buttons>
</Flex>
<Button variant="lg" as="a" href="/bank" mt={3}>
<Button variant="primary" as="a" href="/bank" mt={3}>
Start bankin!
</Button>
</Box>
</Grid>
</CardModel>
<Box sx={{ position: 'absolute', right: '-200px', top: 5 }}>
<Box sx={{ position: 'absolute', right: '-100px', top: 5 }}>
{' '}
<Box
sx={{
width: ['300px', '600px'],
height: ['200px','400px'],
width: ['250px', '500px'],
height: ['180px','360px'],
position: 'relative',
display: 'block',
textAlign: 'center',

View file

@ -29,7 +29,7 @@ export default function Buttons({ children, icon, id, content, link }) {
// }
// }}
>
<Button
<Box
// ref={ref => (fooRef = ref)}
data-place="right"
data-for={id}
@ -43,27 +43,27 @@ export default function Buttons({ children, icon, id, content, link }) {
display: 'flex',
alignItems: 'start',
color: 'inherit',
pr: 3,
px: 3,
py: 1,
width: 'fit-content',
textTransform: 'none',
fontWeight: '400',
fontSize: [1, 2],
fontSize: [1, '14px', '16px'],
backdropFilter: 'blur(2px)'
}}
as="a"
href={link || '/'}
target="_blank"
rel="noreferrer"
// as="a"
// href={link || '/'}
// target="_blank"
// rel="noreferrer"
>
<Icon
glyph={icon || 'plus-fill'}
sx={{ color: 'inherit', marginRight: 2 }}
size={32}
size={24}
mr={2}
/>
<Text sx={{ fontFamily: 'Phantom Sans' }}>{children}</Text>
</Button>
</Box>
<ReactTooltip
id={id}
delayShow={150}

View file

@ -38,7 +38,10 @@ const CardModel = ({
backgroundSize: 'cover',
backgroundImage: `url(${background})` || '',
backgroundPosition: 'center bottom',
backgroundRepeat: 'no-repeat'
backgroundRepeat: 'no-repeat',
p: {
fontSize: [1, '16px', '20px']
}
}}
{...props}
>

View file

@ -28,7 +28,9 @@ export default function Clubs() {
sx={{
backgroundColor: 'elevated',
background:
'linear-gradient(rgba(255, 140, 55, 0.9) 0%, rgba(236, 55, 80, 0.9) 100%)'
'linear-gradient(to bottom,rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.4) 25%,rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.6) 100%), url("https://cloud-flzg18ipb-hack-club-bot.vercel.app/0screenshot_2022-12-05_at_9.44.11_pm.png")',
backgroundPositon: 'center center',
backgroundSize: '100% auto',
}}
>
<Text
@ -38,7 +40,7 @@ export default function Clubs() {
px: 2,
mx: [-2, 0],
whiteSpace: 'nowrap',
color: 'orange',
color: 'red',
bg: 'white',
textShadow: 'none'
}}
@ -60,7 +62,7 @@ export default function Clubs() {
<Buttons content="scan our clubs map and reach out to team@hackclub.com to be connected" id="1" icon="rep" link="/map">Join a Hack Club near you</Buttons>
<Buttons content="we'll support you with meeting content, stickers, and more" id="2" icon="welcome" link="/clubs">Start a club</Buttons>
</Flex>
<Button variant="lg" sx={{mt: 3, backgroundColor: 'orange'}}>Learn more</Button>
<Button variant="primary" sx={{mt: 3, backgroundColor: 'red'}}>Learn more</Button>
</Box>
</Grid>
</CardModel>

View file

@ -197,7 +197,7 @@ export default function Epoch() {
</Buttons>
</Flex>
<Button
variant="lg"
variant="primary"
as="a"
href="https://epoch.hackclub.com/"
sx={{ background: '#FF4794', color: 'white', mt: 3 }}

View file

@ -0,0 +1,58 @@
import CardModel from './card-model'
import {
Box,
Button,
Card,
Container,
Flex,
Grid,
Heading,
Image,
Badge,
Link,
Text
} from 'theme-ui'
import Buttons from './button'
import Event from '../events'
/** @jsxImportSource theme-ui */
export default function Events({ data, stars, events }) {
return (
<CardModel
color="white"
sx={{
backgroundColor: 'elevated',
background:
'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
backgroundPositon: 'center center',
backgroundSize: '100% auto',
}}
>
<Text variant="title">Events</Text>
<Grid columns={[1, '0.6fr 1fr']}>
<Box>
<Text as="p" variant="subtitle">
Hack Clubbers run events on Zoom that dont suck. From live coding nights. Sometimes, we also invite someone we really want to speak to (like Sal Khan, George Hotz, and Lady Ada) and host an <Link href='/amas'>AMA</Link> with them.{' '}
</Text>
{/* <Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 2 }}>
Get involved
</Text>
<Flex sx={{ flexDirection: 'column' }}>
<Buttons id="31" icon="event-code" content="keep your eye out on our events page">
Join an event
</Buttons>
<Buttons content="learn more about available resources" id="32" icon="bolt" link="/hackathons">
Plan and host an event
</Buttons>
</Flex> */}
<Button variant="primary" mt={3}>
Find an event
</Button>
</Box>
<Box>
<Event events={events} />
</Box>
</Grid>
</CardModel>
)
}

View file

@ -51,33 +51,13 @@ export default function Hackathons({ data, stars }) {
Organize a hackthon in your community
</Buttons>
</Flex>
<Button variant="lg" mt={3}>
<Button variant="primary" mt={3}>
Learn more
</Button>
</Box>
<Box
sx={{
transform: 'translateY(25%)'
// '&:before': {
// background: 'linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%)',
// content: '""',
// height: '231.992px',
// position: 'absolute',
// width: '150px',
// zIndex: 2,
// left: 0,
// top: 0
// }, '&:after': {
// background: 'linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%)',
// content: '""',
// height: '231.992px',
// position: 'absolute',
// width: '150px',
// zIndex: 2,
// right: 0,
// top: 0,
// transform: 'rotateZ(180deg)'
// },
}}
>
<ScrollingHackathons eventData={data} mode="await" />

View file

@ -0,0 +1,141 @@
import Icon from '@hackclub/icons'
import { useRef, useState } from 'react'
import {
Box,
Label,
Input,
Button,
Text,
Alert,
Card,
Heading,
Grid
} from 'theme-ui'
import CardModel from './card-model'
const Loading = () => (
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100%',
width: '100%',
border: '2px solid #f3f3f3',
borderTop: '2px solid #ec3750',
borderRadius: '50%',
width: '10px',
height: '10px',
animation: 'spin 2s linear infinite',
'@keyframes spin': {
'0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' }
}
}}
></Box>
)
const MailingList = () => {
const [submitting, setSubmitting] = useState(false)
const [submitted, setSubmitted] = useState(false)
const formRef = useRef(null)
// const handleSubmit = async e => {
// e.preventDefault()
// setSubmitting(true)
// await fetch('/api/winter-rsvp', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify({
// Name: e.target.name.value,
// Email: e.target.email.value
// })
// })
// formRef.current.reset()
// setSubmitting(false)
// setSubmitted(true)
// }
return (
<CardModel sx={{my: '0 !important', height: '100%'}}>
{/* <Card
sx={{
maxWidth: 'narrowPlus',
mx: 'auto',
mt: [3, 4],
background: 'rgb(255,255,255, 0.45)',
backdropFilter: 'blur(8px)'
}}
> */}
<Text variant="title" sx={{ fontSize: [3, 4, 5], zIndex: 2 }}>
Hacker Newsletter
</Text>
<Text sx={{ color: 'muted' }} as="p">
We'll send you an email whenever we launch a new project, so you can get
involved if you're interested. We never spam or sell your data.
</Text>
<Grid
as="form"
ref={formRef}
// onSubmit={handleSubmit}
gap={[2, 3]}
sx={{
mt: [null, 3],
gridTemplateColumns: [null, '1fr 1fr auto'],
textAlign: 'left',
alignItems: 'end',
input: { bg: 'sunken' }
}}
>
<div>
<Label htmlFor="location">Name</Label>
<Input
autofillBackgroundColor="highlight"
type="text"
name="name"
id="name"
placeholder="Fiona Hackworth"
required
/>
</div>
<div>
<Label htmlFor="email">Email</Label>
<Input
autofillBackgroundColor="highlight"
type="email"
name="email"
id="email"
placeholder="fiona@hackclub.com"
required
/>
</div>
<Button type="submit" sx={{ mt: [2, 0] }}>
{submitting ? (
<>
<Loading />
&nbsp;Subscribe
</>
) : (
'Subscribe'
)}
</Button>
</Grid>
{submitted && (
<Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
<Icon glyph="send" />
<Text sx={{ ml: 2 }}>Signed up!</Text>
</Alert>
)}
{/* </Card> */}
</CardModel>
)
}
export default MailingList

View file

@ -52,7 +52,7 @@ export default function Sinerider({stars}) {
<Buttons content="DM @cwalker in Slack to learn more" id="5" icon="view" href="/slack">Be a scene maker</Buttons>
</Flex>
<Button
variant="lg"
variant="primary"
sx={{
backgroundColor: '#CAB4D4',
color: '#271932',

231
components/cards/slack.js Normal file
View file

@ -0,0 +1,231 @@
import CardModel from './card-model'
import {
Box,
Button,
Card,
Container,
Flex,
Grid,
Heading,
Image,
Badge,
Link,
Text
} from 'theme-ui'
import Buttons from './button'
import usePrefersMotion from '../../lib/use-prefers-motion'
import useHasMounted from '../../lib/use-has-mounted'
import { keyframes } from '@emotion/react'
import SlackEvents from '../slack/slack-events'
/** @jsxImportSource theme-ui */
// const Cover = () => (
// <Box
// sx={{
// position: 'absolute',
// bottom: 0,
// top: 0,
// left: 0,
// right: 0,
// backgroundImage: t => t.util.gx('cyan', 'purple'),
// opacity: 0.825,
// zIndex: 1
// }}
// />
// )
// const Static = ({
// img = 'https://cloud-nykwtt0z7.vercel.app/2020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
// // img="https://cloud-re5hkabx0.vercel.app/2020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
// }) => (
// <Box
// as="section"
// id="slack"
// sx={{
// position: 'relative',
// overflow: 'hidden',
// backgroundImage: `url(https://cloud-nykwtt0z7.vercel.app/2020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png)`,
// backgroundSize: 'cover'
// }}
// >
// <Cover />
// <Content />
// </Box>
// )
const rollin = keyframes`
0% {
transform: translateY(100%);
},
30% {
transform: translateY(100%);
},
100% {
transform: translateY(0);
}
`
const rollout = keyframes`
0% {
transform: translateY(0);
},
60% {
transform: translateY(-100%);
},
100% {
transform: translateY(-100%);
}
`
const Cover = () => (
<Box
sx={{
position: 'absolute',
bottom: 0,
top: 0,
left: 0,
right: 0,
backgroundImage: t => t.util.gx('cyan', 'purple'),
opacity: 0.9,
zIndex: 1
}}
/>
)
export default function Slack({ slackNum, slackKey }) {
const hasMounted = useHasMounted()
const prefersMotion = usePrefersMotion()
return (
<CardModel
color="white"
sx={{
position: 'relative',
overflow: 'hidden',
my: '0 !important'
// backgroundImage: `url(https://cloud-nykwtt0z7.vercel.app/2020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png)`,
// backgroundSize: 'cover'
}}
>
<Box
as="video"
autoPlay
muted
loop
playsInline
poster="https://cloud-nykwtt0z7.vercel.app/2020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
duration={2000}
sx={{
position: 'absolute',
bottom: 0,
top: 0,
left: 0,
right: 0,
height: '100%',
zIndex: 0,
width: '100vw',
objectFit: 'cover'
}}
>
<source
src="https://cdn.glitch.com/2d637c98-ed35-417a-bf89-cecc165d7398%2Foutput-no-duplicate-frames.hecv.mp4?v=1590780967658"
type="video/mp4; codecs=hevc"
/>
<source
src="https://cdn.glitch.com/2d637c98-ed35-417a-bf89-cecc165d7398%2Foutput-no-duplicate-frames.webm?v=1590781698834"
type="video/webm; codecs=vp9,opus"
/>
<source
src="https://cdn.glitch.com/2d637c98-ed35-417a-bf89-cecc165d7398%2Foutput-no-duplicate-frames.mov?v=1590781491717"
type="video/quicktime"
/>
</Box>
<Cover />
<Grid sx={{ zIndex: 2 }}>
<Text variant="title" sx={{ fontSize: [3, 4, 5], zIndex: 2 }}>
Our online community
</Text>
</Grid>
<Grid columns={[1, 1]} sx={{ zIndex: 2 }}>
<Box sx={{ zIndex: 2 }}>
<Text
variant="subtitle"
as="p"
sx={{ fontSize: [1, '16px', '20px'] }}
>
Coding doesn't have to be a solidary activity. At Hack Club, it's a team sport and in our
Slack (Discord-style online groupchat), you'll find a
group of{' '}
<Box
as="div"
sx={{
color: 'transparent',
position: 'relative',
overflow: 'hidden',
display: 'inline-block',
mb: '-8px',
mr: '2px'
}}
key={slackKey}
>
{/* {slackNum[0]}{' '} */}
<Text
sx={{
position: 'absolute',
top: 0,
left: 0,
color: 'text',
animation: `${rollout} 2s`,
animationFillMode: 'forwards'
}}
>
{/* {slackNum[0]} */}
</Text>
<Text
sx={{
position: 'absolute',
top: 0,
left: 0,
color: 'white',
animation: `${rollin} 2s`,
animationFillMode: 'forwards'
}}
>
{/* {slackNum[1]} */}
</Text>
</Box>
fabulous people to talk to, active at all hours.
</Text>
<Button
variant="primary"
sx={{
backgroundColor: 'white',
color: 'purple',
mt: 3
}}
as="a"
href="/slack"
>
Join our community
</Button>
</Box>
{/* <Box sx={{py: 3, px: 4, borderRadius: 4, float: 'right', backgroundColor: 'rgb(255,255,255, 0.2)', backdropFilter: 'blur(8px)', mt: '-40px'}}>
<Heading
as="h2"
variant="subheadline"
sx={{
mt: 0,
color: 'white',
textTransform: 'uppercase',
letterSpacing: 'headline'
}}
>
Live from our&nbsp;Slack
</Heading>
<SlackEvents color="transparent" textColor="white" />
</Box> */}
</Grid>
</CardModel>
)
}

View file

@ -72,7 +72,7 @@ export default function SprigConsole({ stars }) {
</Buttons>
</Flex>
<Button
variant="lg"
variant="primary"
sx={{
backgroundColor: '#427A43',
color: '#fff',

View file

@ -216,7 +216,7 @@ export default function Sprig({
</Buttons>
</Flex>
<Button
variant="lg"
variant="primary"
sx={{
backgroundColor: '#FFDE4D',
color: '#000',
@ -227,8 +227,8 @@ export default function Sprig({
</Button>
</Box>
<Box>
<Text as="p" sx={{fontStyle: 'italic'}}>New from <Link href="https://sprig.hackclub.com/gallery" sx={{textDecoration: 'none', color: 'inherit'}}>the gallery</Link>...</Text>
<Flex sx={{height: '80%', gap: '20px', mt: 3}}>
<Text sx={{fontStyle: 'italic', fontSize: [1, '14px', '16px']}}>New from <Link href="https://sprig.hackclub.com/gallery" sx={{textDecoration: 'none', color: 'inherit'}}>the gallery</Link>...</Text>
<Flex sx={{height: '80%', gap: '20px', mt: 3, width: '90%'}}>
<Game game={game[0]} gameImage={gameImage} />
<Game game={game[1]} gameImage1={gameImage1} />
</Flex>

View file

@ -77,7 +77,7 @@ export default function Workshops({ data, stars }) {
</Buttons>
</Flex>
<Button
variant="lg"
variant="primary"
sx={{
background: 'white',
color: 'blue',

View file

@ -44,10 +44,10 @@ export default function CarouselCards({
backgroundColor: background,
position: 'relative',
color: 'white',
width: '350px',
width: '300px',
}}
>
<Text as="h2" sx={{ color: titleColor }}>
<Text as="h2" sx={{ color: titleColor, fontSize: ['12px', '16px', '18px'], }}>
{title}
</Text>
<Text as="p" sx={{ color: descriptionColor }}>

View file

@ -51,7 +51,6 @@ export default function Carousel() {
// >
<PageVisibility onChange={handleVisibilityChange}>
{pageIsVisible && (
<Fade>
<Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
{() => (
<Box
@ -126,7 +125,6 @@ export default function Carousel() {
</Box>
)}
</Ticker>
</Fade>
)}
</PageVisibility>
// </Box>

View file

@ -2,6 +2,7 @@ import { Card, Box, Text, Grid, Flex, Avatar, Heading } from 'theme-ui'
import tt from 'tinytime'
import Link from 'next/link'
import Sparkles from './sparkles'
import { keyframes } from '@emotion/react'
const past = dt => new Date(dt) < new Date()
const now = (start, end) =>
@ -61,7 +62,7 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
)}
<Text as="span">{leader}</Text>
</Flex>
{now(start, end) && (
{/* {now(start, end) && (
<Sparkles
aria-hidden
style={{
@ -73,39 +74,70 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
bottom: 0
}}
/>
)}
)} */}
</Box>
</Link>
)
const flashing = keyframes({
from: { opacity: 0 },
'50%': { opacity: 1 },
to: { opacity: 0 }
})
function Dot() {
return (
<Text
sx={{
bg: 'green',
color: 'white',
borderRadius: 'circle',
display: 'inline-block',
lineHeight: 0,
width: '.5em',
height: '.5em',
marginRight: '.4em',
marginBottom: '.12em',
animationName: `${flashing}`,
animationDuration: '3s',
animationTimingFunction: 'ease-in-out',
animationIterationCount: 'infinite'
}}
/>
)
}
export default function Events({ events }) {
return (
<Box mb={3}>
<Heading>
{/* <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>
</Heading> */}
<Text>
Events happening this month <Dot />
</Text>
<Grid
mt={3}
mb={2}
columns={[2, 3, 4]}
columns={[2, 3]}
gap="1px"
sx={{
bg: 'sunken',
borderRadius: 'extra',
overflow: 'hidden',
boxShadow: 'elevated',
boxShadow: 'elevated'
}}
>
{events.map(event => (
<Event {...event} key={event.id} />
))}
</Grid>
<Link href="/amas" target="_blank">
{/* <Link href="/amas" target="_blank">
*like George Hotz, Dylan Field, Sal Khan, and more
</Link>
</Link> */}
</Box>
)
}

View file

@ -43,7 +43,7 @@ const generateEvent = () => ({
const SlackEvents = ({ sx, ...props }) => {
const SlackEvents = ({ sx, color, textColor, ...props }) => {
const didUnmount = useRef(false)
const [events, setEvents] = useState([])
function createMockEvents(){
@ -104,7 +104,7 @@ const SlackEvents = ({ sx, ...props }) => {
listStyle: 'none',
lineHeight: 'heading',
pl: 0,
color: 'black',
color: textColor || 'black',
fontSize: 2,
overflowY: 'hidden',
position: 'relative',
@ -117,7 +117,7 @@ const SlackEvents = ({ sx, ...props }) => {
display: 'block',
height: '2em',
backgroundImage: theme =>
`linear-gradient(rgba(255,255,255,0), ${theme.colors.white})`
`linear-gradient(rgba(255,255,255,0), ${color || theme.colors.white})`
},
div: { mb: [1, 2] },
'circle:last-of-type': { animationDuration: '1s' },
@ -152,3 +152,15 @@ const SlackEvents = ({ sx, ...props }) => {
}
export default SlackEvents
// `
// 10-days-in-public amas assemble all-hands apple art bank books ib
// challenges code college-apps confessions cooking community coronavirus counttoamillion deals
// debate design the-democratic-republic-of-yishun dogs ethical-hacking epoch epoch-bts flutter film food
// gamedev gh go go-bears hack-night hackathons hardware
// homelab hours hq india javascript languages late-night-hw-club leaders lgbtq linux lounge
// mayhaps memes minecraft music neuroscience photography python orpheus-podcast
// rust scrapbook ship sink-my-ship sleep social studycorner support swift swim
// politics newsletter surroundings sprig hackathon-organizers hq hq-surroundings
// `

View file

@ -42,28 +42,10 @@ import { get } from 'lodash'
import useSWR from 'swr'
import Konami from 'react-konami-code'
import Secret from '../components/secret'
import Events from '../components/events'
import MailingList from '../components/cards/mailing-list'
import Slack from '../components/cards/slack'
import Events from '../components/cards/events'
let Highlight = styled(Text)`
color: inherit;
border-radius: 1em 0 1em 0;
background: linear-gradient(
-100deg,
rgba(250, 247, 133, 0.33),
rgba(250, 247, 133, 0.66) 95%,
rgba(250, 247, 133, 0.1)
);
`
Highlight = Highlight.withComponent('mark')
const rollout = keyframes`
0% {
transform: translateY(-100px);
}
100% {
transform: translateY(0);
}
`
// function SlackNum({slackData}) {
// let [key, setKey] = useState()
// useEffect(() => {
@ -84,7 +66,7 @@ const rollout = keyframes`
function Page({
hackathonsData,
bankData,
slackData,
// slackData,
stars,
githubData2,
dataPieces,
@ -96,11 +78,25 @@ function Page({
let [gameImage1, setGameImage1] = useState('')
let [reveal, setReveal] = useState(false)
const [hover, setHover] = useState(true)
let [slackNum, setSlackNum] = useState([])
let [key, setKey] = useState(0)
let [key1, setKey1] = useState(0)
let [slackKey, setSlackKey] = useState(0)
const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
// console.log(slackData)
// useEffect(() => {
// let array = slackNum
// let newNum = withCommas(
// slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
// .total_members_count
// )
// array.unshift(newNum)
// array.splice(2)
// setSlackNum(array)
// setSlackKey(Math.random())
// }, [slackData])
useEffect(() => {
if (typeof window !== 'undefined') {
@ -120,10 +116,10 @@ function Page({
}
})
useEffect(() => {
setKey(Math.random())
setKey1(Math.random())
}, slackData)
// useEffect(() => {
// setKey(Math.random())
// setKey1(Math.random())
// }, slackData)
// useEffect(() => {
// if (typeof window !== 'undefined') {
@ -180,16 +176,16 @@ function Page({
// })
const easterEgg = () => {
alert('Hey, you typed the Konami Code!');
alert('Hey, you typed the Konami Code!')
}
useEffect(() => {
console.log('hi')
if (reveal && !hover) {
setTimeout(() => {
console.log(reveal)
console.log(hover)
setReveal(false)
console.log(reveal)
console.log(hover)
setReveal(false)
}, 2000)
}
}, [hover])
@ -206,7 +202,6 @@ function Page({
bg="black"
sx={{
flexGrow: 1,
fontSize: 2,
color: 'white',
fontWeight: '400 !important'
}}
@ -218,10 +213,11 @@ function Page({
textDecoration: 'none',
color: 'inherit',
fontWeight: '400 !important',
display: 'flex'
display: 'flex',
fontSize: '14px'
}}
>
<Text as="span" sx={{ fontSize: 'smaller', color: 'sunken', mr: 2 }}>
<Text as="span" sx={{ fontSize: 'small', color: 'sunken', mr: 2 }}>
<RelativeTime value={time} titleformat="iso8601" />
</Text>
{text}{' '}
@ -265,7 +261,7 @@ function Page({
console.log('hover:', hover)
}}
/>
<Konami action={easterEgg} code={[38,38,40,40]}>
<Konami action={easterEgg} code={[38, 38, 40, 40]}>
{"Hey, I'm an Easter Egg! Look at me!"}
</Konami>
<Box
@ -288,7 +284,7 @@ function Page({
{/* <SlideDown duration={768}> */}
<Box
sx={{
maxWidth: [null, 'layoutPlus'],
maxWidth: [null, 'layout'],
position: 'relative',
mx: 'auto'
}}
@ -306,20 +302,24 @@ function Page({
}}
/>
<Fade>
<Text variant="eyebrow" sx={{ color: 'sunken' }}>
<Text
variant="eyebrow"
sx={{ color: 'sunken', fontSize: [1, 2, 3] }}
>
Welcome to Hack Club
</Text>
</Fade>
<Fade bottom delay={200}>
<Heading
as="h1"
variant="ultratitle"
variant="title"
sx={{
color: 'white',
my: [3, 4],
mx: 'auto',
zIndex: 1,
textAlign: 'left'
textAlign: 'left',
fontSize: 'large'
}}
>
<Text
@ -331,7 +331,9 @@ function Page({
}}
>
We inspire the hacker ethic in
<Text sx={{ color: 'transparent', mx: 2 }}>
<Text
sx={{ color: 'transparent', mx: 2, whiteSpace: 'nowrap' }}
>
<Text
sx={{
lineHeight: 0.875,
@ -348,7 +350,8 @@ function Page({
}}
as="a"
onClick={() => {
setHover(false); !reveal ? setReveal(true) : setReveal(false)
setHover(false)
!reveal ? setReveal(true) : setReveal(false)
}}
>
teen makers
@ -365,42 +368,48 @@ function Page({
<Carousel />
</Box>
<Box as="section" sx={{ pt: [4, 5], color: 'black' }}>
<Container
<Box
sx={{
position: 'relative'
position: 'relative',
maxWidth: 'layout',
margin: 'auto'
}}
pb={4}
// pb={4}
>
<Text variant="eyebrow" as="p">
<Text variant="eyebrow" as="p" sx={{ fontSize: [1, 2, 3] }}>
A Hack Clubber is someone that
</Text>
<Text variant="title">
<Text variant="title" sx={{ fontSize: [3, 4, 5] }}>
Discovers technology by building things for the joy of it
</Text>
<Text
variant="subtitle"
as="p"
sx={{ fontSize: [1, '16px', '20px'] }}
>
Here, teenagers don't wait for permission to code. Hack Clubbers
come together to code because it's fun. Whether youre a beginner
programmer or have years of experience, theres a place for you at
Hack Club.
</Text>
{/* <Slack slackKey={slackKey} /> */}
{/* <Events events={events} /> */}
<Text variant="eyebrow" as="p" sx={{ fontSize: [1, 2, 3], mt: 4 }}>
Hack Clubbers
</Text>
<Text variant="title" sx={{ fontSize: [3, 4, 5] }}>
Hangout online
</Text>
<Grid columns={[1, 2]}>
<Box
{/* <Box
pt={4}
pb={5}
sx={{
position: 'relative',
margin: 'auto'
}}
>
<Text variant="subtitle" as="p">
Here, teenagers don't wait for permission to code. Hack
Clubbers come together to code because it's fun. Whether
youre a beginner programmer or have years of experience,
theres a place for you at Hack Club. Coding doesn't have to
be a solidary activity. In the Hack Club Slack (Discord-style
online groupchat), you'll find a group of{' '}
{withCommas(
slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
.total_members_count
)}{' '}
fabulous people to talk to, active at all hours.
</Text>
<Link href="/slack" passHref sx={{ textDecoration: 'none' }}>
<Button
> */}
{/* <Button
as="a"
variant="ctaLg"
sx={{
@ -410,10 +419,11 @@ function Page({
my={3}
>
Join us
</Button>
</Link>
</Box>
<Box
</Button> */}
<Slack slackKey={slackKey} />
<MailingList />
{/* </Box> */}
{/* <Box
sx={{
position: 'relative',
width: '100%',
@ -441,11 +451,11 @@ function Page({
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></Box>
</Box>
</Box> */}
</Grid>
<Events events={events}/>
<Events events={events} />
{/* <Inspect /> */}
</Container>
</Box>
<Box
py={4}
sx={{
@ -456,12 +466,23 @@ function Page({
backgroundPosition: '10% 10%'
}}
>
<Container>
<Text variant="eyebrow" as="p">
<Box
sx={{
maxWidth: 'layout',
margin: 'auto'
}}
>
<Text variant="eyebrow" as="p" sx={{ fontSize: [1, 2, 3] }}>
Hack Clubbers
</Text>
<Text variant="title">Build open source tools</Text>
<Text variant="subtitle" as="p">
<Text variant="title" sx={{ fontSize: [3, 4, 5] }}>
Build open source tools
</Text>
<Text
variant="subtitle"
as="p"
sx={{ fontSize: [1, '16px', '20px'] }}
>
Led by engineers on the Hack Club team in collaboration with
Hack Clubbers in the community, these learning tools are built
with and for teenagers. Get involved with these projects by
@ -481,14 +502,20 @@ function Page({
stars={stars.sprigHardware.stargazerCount}
/>
<Workshops delay={400} stars={stars.hackclub.stargazerCount} />
</Container>
</Box>
</Box>
<Box>
<Container py={3}>
<Box
py={3}
sx={{
maxWidth: 'layout',
margin: 'auto'
}}
>
<Text variant="eyebrow" as="p">
Hack Clubbers
</Text>
<Text variant="title">
<Text variant="title" sx={{ fontSize: [3, 4, 5] }}>
Gather IRL to discover the{' '}
<Text
as="span"
@ -504,7 +531,11 @@ function Page({
joy of code
</Text>
</Text>
<Text variant="subtitle" as="p">
<Text
variant="subtitle"
as="p"
sx={{ fontSize: [1, '16px', '20px'] }}
>
Meet other Hack Clubbers in your community to code and make
things, be it once a week after school, a one-time 48 hour
event, or anything in-between!
@ -517,20 +548,21 @@ function Page({
data={hackathonsData}
stars={stars.hackathons.stargazerCount}
/>
</Container>
</Box>
</Box>
</Box>
<Box bg="snow" color="black" py={[3, 4]}>
<Container
<Box
sx={{
textAlign: 'left'
maxWidth: 'layout',
margin: 'auto'
}}
>
<Text as="p" variant="eyebrow">
Let's quickly review
</Text>
<Heading as="h2" variant="title">
Find your second-home in{' '}
<Heading as="h2" variant="title" sx={{ fontSize: [3, 4, 5] }}>
Find your second-family with{' '}
<Text
as="span"
sx={{
@ -581,6 +613,11 @@ function Page({
color="white"
name="Join our online community"
desc="Connect with other technical teenagers on Slack and hack on things together."
sx={{
p: {
fontSize: [1, '16px', '20px']
}
}}
/>
</Card>
<Card
@ -600,6 +637,11 @@ function Page({
color="white"
name="Start a Club or Attend a Hackathon"
desc="Build an in-person community of high school hackers, and we're here to help."
sx={{
p: {
fontSize: [1, '16px', '20px']
}
}}
/>
</Card>
<Card
@ -619,10 +661,15 @@ function Page({
color="white"
name="Explore our open-sourced tools"
desc="We're currently building a game engine, daily streak system, graphing game, and more!"
sx={{
p: {
fontSize: [1, '16px', '20px']
}
}}
/>
</Card>
</Grid>
</Container>
</Box>
</Box>
</Box>
<Footer
@ -686,7 +733,9 @@ export async function getStaticProps() {
// if(initialGitHubData != null) {
let initialGitHubData1 = initialGitHubData.map(x =>
(x.type == 'PushEvent' && x.actor.login != 'github-actions[bot]' && x.actor.login != 'dependabot[bot]') ||
(x.type == 'PushEvent' &&
x.actor.login != 'github-actions[bot]' &&
x.actor.login != 'dependabot[bot]') ||
x.type == 'WatchEvent' ||
x.type == 'PullRequestEvent'
? x.type == 'PushEvent'
@ -727,21 +776,21 @@ export async function getStaticProps() {
return el != null
})
const formData = new FormData()
// const formData = new FormData()
formData.append('token', process.env.SLACK_API_TOKEN)
formData.append('date_range', '30d')
// formData.append('token', process.env.SLACK_API_TOKEN)
// formData.append('date_range', '30d')
const slackData = await fetch(
'https://hackclub.slack.com/api/team.stats.timeSeries',
{
method: 'POST',
body: formData,
headers: {
Cookie: process.env.SLACK_API_COOKIE
}
}
).then(r => r.json())
// const slackData = await fetch(
// 'https://hackclub.slack.com/api/team.stats.timeSeries',
// {
// method: 'POST',
// body: formData,
// headers: {
// Cookie: process.env.SLACK_API_COOKIE
// }
// }
// ).then(r => r.json())
const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming')
const hackathonsData = await res.json()
@ -763,9 +812,9 @@ export async function getStaticProps() {
res => res.json()
)
let events = await fetch('https://events.hackclub.com/api/events/upcoming/').then(
res => res.json()
)
let events = await fetch(
'https://events.hackclub.com/api/events/upcoming/'
).then(res => res.json())
return {
props: {
@ -775,7 +824,7 @@ export async function getStaticProps() {
githubData2,
hackathonsData,
bankData,
slackData,
// slackData,
stars,
events
},