mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
wahoo!
This commit is contained in:
Belle
parent
4148bbb785
commit
edd2ca28da
25 changed files with 1357 additions and 790 deletions
|
|
@ -1,66 +0,0 @@
|
|||
import Tilt from './tilt'
|
||||
import Icon from '@hackclub/icons'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Flex,
|
||||
Container,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import { Zoom } from 'react-reveal'
|
||||
import ReactTooltip from 'react-tooltip'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
const CardModel = ({
|
||||
background,
|
||||
children,
|
||||
link,
|
||||
github_link,
|
||||
color,
|
||||
stars,
|
||||
delay,
|
||||
...props
|
||||
}) => (
|
||||
// <Zoom delay={delay}>
|
||||
<Card
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
color: color,
|
||||
my: 5,
|
||||
backgroundSize: 'cover',
|
||||
backgroundImage: `url(${background})` || '',
|
||||
backgroundPosition: 'center bottom',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
p: {
|
||||
fontSize: [1, '16px', '20px']
|
||||
}
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{github_link != null ? (
|
||||
<Flex
|
||||
sx={{ position: 'absolute', right: 2, top: 2, alignItems: 'center' }}
|
||||
>
|
||||
<Text as="h2">{stars} ⭐️</Text>
|
||||
<Link href={github_link}>
|
||||
<Icon glyph="github" size={64} color={color} />
|
||||
</Link>
|
||||
</Flex>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{children}
|
||||
<ReactTooltip />
|
||||
</Card>
|
||||
// </Zoom>
|
||||
)
|
||||
|
||||
export default CardModel
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
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 don’t 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>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
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={{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 }}>
|
||||
Mailing List
|
||||
</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 />
|
||||
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
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
import CardModel from './card-model'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import { useState } from 'react'
|
||||
import Fade from 'react-reveal/Fade'
|
||||
import Buttons from './button'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
export default function Workshops({ data, stars }) {
|
||||
const [workshop, setWorkshop] = useState('Splatter Paintv')
|
||||
const [workshopSlug, setWorkshopSlug] = useState('')
|
||||
|
||||
// function New() {
|
||||
// let rand = Math.floor(Math.random() * data.length - 2)
|
||||
|
||||
// setWorkshop(
|
||||
// data[rand].name
|
||||
// .replace('.js', '')
|
||||
// .replace(/[-]/g, ' ')
|
||||
// .replace(/[_]/g, ' ')
|
||||
// .replace('.', '')
|
||||
// .replace(/(?:^|\s|[-"'([{])+\S/g, (c) => c.toUpperCase())
|
||||
// )
|
||||
|
||||
// setWorkshopSlug(data[rand].name)
|
||||
// }
|
||||
|
||||
// console.log(data[Math.floor(Math.random() * data[0].length)])
|
||||
return (
|
||||
<CardModel
|
||||
color="white"
|
||||
sx={{
|
||||
backgroundColor: 'elevated',
|
||||
background:
|
||||
'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)'
|
||||
}}
|
||||
github_link="https://github.com/hackclub/workshops"
|
||||
stars={stars}
|
||||
>
|
||||
<Text variant="title">Workshops</Text>
|
||||
<Grid columns={[1]}>
|
||||
<Box>
|
||||
<Text as="p" variant="subtitle">
|
||||
A collection of community-contributed, self-guided coding tutorials
|
||||
+ ideas. Learn to code by building, one project at a time.
|
||||
</Text>
|
||||
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 2 }}>
|
||||
Get involved
|
||||
</Text>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
<Buttons
|
||||
content="click to learn more about how to submit a workshop"
|
||||
id="13"
|
||||
link="https://workshops.hackclub.com/submit-a-workshop/"
|
||||
icon="event-add"
|
||||
>
|
||||
Write and submit a workshop
|
||||
</Buttons>
|
||||
<Buttons
|
||||
id="14"
|
||||
link="https://workshops.hackclub.com"
|
||||
icon="code"
|
||||
>
|
||||
Follow a workshop and build a project
|
||||
</Buttons>
|
||||
</Flex>
|
||||
<Button
|
||||
variant="primary"
|
||||
sx={{
|
||||
background: 'white',
|
||||
color: 'blue',
|
||||
mt: 3
|
||||
}}
|
||||
as="a"
|
||||
href="https://workshops.hackclub.com"
|
||||
>
|
||||
Find workshops
|
||||
</Button>
|
||||
</Box>
|
||||
{/* <Fade spy={workshop} bottom>
|
||||
<Text
|
||||
// onClick={New}
|
||||
sx={{
|
||||
'&:hover': { cursor: 'pointer' },
|
||||
float: 'right',
|
||||
mt: '-20px'
|
||||
}}
|
||||
>
|
||||
Click for random workshop: {workshop} 👀
|
||||
</Text>
|
||||
</Fade> */}
|
||||
</Grid>
|
||||
</CardModel>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
export default function CarouselCards({
|
||||
background,
|
||||
titleColor,
|
||||
descriptionColor,
|
||||
title,
|
||||
description,
|
||||
img,
|
||||
link
|
||||
}) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
|
||||
'&:hover': { transform: 'scale(1.0625)', boxShadow: 'elevated' },
|
||||
}}
|
||||
>
|
||||
<Link sx={{textDecoration: 'none', '&:hover': {cursor: 'pointer'}}} href={link}>
|
||||
<img
|
||||
src={img}
|
||||
width="40"
|
||||
height="40"
|
||||
sx={{ position: 'absolute', top: '-20px', left: 4, zIndex: 2 }}
|
||||
/>
|
||||
<Card
|
||||
// variant="interactive"
|
||||
sx={{
|
||||
mr: 3,
|
||||
backgroundColor: background,
|
||||
position: 'relative',
|
||||
color: 'white',
|
||||
width: '300px',
|
||||
}}
|
||||
>
|
||||
<Text as="h2" sx={{ color: titleColor, fontSize: ['12px', '16px', '18px'], }}>
|
||||
{title}
|
||||
</Text>
|
||||
<Text as="p" sx={{ color: descriptionColor }}>
|
||||
{description}
|
||||
</Text>
|
||||
</Card>
|
||||
</Link>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import CarouselCards from './carousel-cards'
|
||||
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
|
||||
|
||||
// const move = keyframes`
|
||||
// 0% { transform: translateX(150vw); }
|
||||
// 100% { transform: translateX(-50vw)}
|
||||
// `
|
||||
|
||||
export default function Carousel() {
|
||||
let [speed, setSpeed] = useState(5)
|
||||
|
||||
const [pageIsVisible, setPageIsVisible] = useState(true)
|
||||
|
||||
const handleVisibilityChange = isVisible => {
|
||||
setPageIsVisible(isVisible)
|
||||
}
|
||||
|
||||
return (
|
||||
// <Box
|
||||
// sx={{
|
||||
// display: 'flex',
|
||||
// animation: `${move} 10s linear infinite`,
|
||||
// gap: '10px',
|
||||
// width: '150vw',
|
||||
// flexWrap: 'nowrap',
|
||||
// transform: 'translateX(0)',
|
||||
// animationPlayState: 'paused',
|
||||
// '&:hover': {
|
||||
// animationPlayState: 'paused'
|
||||
// }
|
||||
// }}
|
||||
// >
|
||||
<PageVisibility onChange={handleVisibilityChange}>
|
||||
{pageIsVisible && (
|
||||
<Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
|
||||
{() => (
|
||||
<Box
|
||||
as="div"
|
||||
sx={{ display: 'flex', py: 4 }}
|
||||
onMouseOver={() => setSpeed(3)}
|
||||
onMouseOut={() => setSpeed(6)}
|
||||
>
|
||||
<CarouselCards
|
||||
background="#000"
|
||||
titleColor="yellow"
|
||||
descriptionColor="white"
|
||||
title="Sprig"
|
||||
description="🍃 Learn to code by making games in a JavaScript web-based game editor."
|
||||
img="https://emoji.slack-edge.com/T0266FRGM/sprig-dino/6f01fec60b51b343.png"
|
||||
link="https://sprig.hackclub.com"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="#000"
|
||||
titleColor="#FF4794"
|
||||
descriptionColor="white"
|
||||
title="EPOCH"
|
||||
description="The most epic high school hackathon this new years!."
|
||||
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f386@2x.png"
|
||||
link="https://epoch.hackclub.com"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="blue"
|
||||
titleColor="white"
|
||||
textColor="white"
|
||||
title="Clubs network"
|
||||
description="High school students come together to have fun and code, IRL"
|
||||
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f5fa-fe0f@2x.png"
|
||||
link="/clubs"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="dark"
|
||||
titleColor="red"
|
||||
textColor="white"
|
||||
title="Hack Club Bank"
|
||||
description="Fiscal sponsorship and banking platform to organize anything."
|
||||
img="https://emoji.slack-edge.com/T0266FRGM/bank-hackclub-dark/8c6f85f387365072.png"
|
||||
link="/bank"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="#271932"
|
||||
titleColor="#CAB4D4"
|
||||
textColor="#CAB4D4"
|
||||
title="Sinerider"
|
||||
description="💖 A game about love, math, and graphing built by teenagers!"
|
||||
img="https://emoji.slack-edge.com/T0266FRGM/sinerider/68a0bc1208e885dd.png"
|
||||
link="https://sinerider.hackclub.com"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="black"
|
||||
titleColor="yellow"
|
||||
textColor="white"
|
||||
title="High school Hackathons"
|
||||
description="🔍 A curated list of high school hackathons"
|
||||
img="https://emoji.slack-edge.com/T0266FRGM/sprig-dino/6f01fec60b51b343.png"
|
||||
link="/hackathons"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="snow"
|
||||
titleColor="dark"
|
||||
descriptionColor="black"
|
||||
title="Workshops"
|
||||
description="100+ short coding workshops to start building"
|
||||
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f4bb@2x.png"
|
||||
link="https://workshops.hackclub.com"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Ticker>
|
||||
)}
|
||||
</PageVisibility>
|
||||
// </Box>
|
||||
)
|
||||
}
|
||||
|
|
@ -46,18 +46,30 @@ export default function Bank({ data }) {
|
|||
<Grid columns={[1, '1fr 0.6fr']}>
|
||||
<Box>
|
||||
<Text as="p" variant="subtitle">
|
||||
A fiscal sponsor and banking platform in one to help you organize
|
||||
Tool developed to make organising easier: a fiscal sponsor and banking platform in one to help you organize
|
||||
clubs, hackathons, and more!
|
||||
</Text>
|
||||
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 2 }}>
|
||||
Get involved
|
||||
</Text>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
<Buttons content="501(c)3 status, custom dashboard, debit cards, free domains/google workspace, and more" id="15" icon="bank-account" link="/bank">
|
||||
<Buttons
|
||||
content="501(c)3 status, custom dashboard, debit cards, free domains/google workspace, and more"
|
||||
id="15"
|
||||
icon="bank-account"
|
||||
link="/bank"
|
||||
>
|
||||
Run your event/organziation on Hack Club Bank
|
||||
</Buttons>
|
||||
</Flex>
|
||||
<Button variant="primary" as="a" href="/bank" mt={3}>
|
||||
<Button
|
||||
variant="primary"
|
||||
as="a"
|
||||
href="/bank"
|
||||
mt={3}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Start bankin!
|
||||
</Button>
|
||||
</Box>
|
||||
|
|
@ -68,7 +80,7 @@ export default function Bank({ data }) {
|
|||
<Box
|
||||
sx={{
|
||||
width: ['250px', '500px'],
|
||||
height: ['180px','360px'],
|
||||
height: ['180px', '360px'],
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
textAlign: 'center',
|
||||
95
components/index/cards/card-model.js
Normal file
95
components/index/cards/card-model.js
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import Tilt from './tilt'
|
||||
import Icon from '@hackclub/icons'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Flex,
|
||||
Container,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import { Zoom } from 'react-reveal'
|
||||
import ReactTooltip from 'react-tooltip'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
const CardModel = ({
|
||||
background,
|
||||
children,
|
||||
link,
|
||||
github_link,
|
||||
color,
|
||||
stars,
|
||||
delay,
|
||||
position,
|
||||
...props
|
||||
}) => (
|
||||
// <Zoom delay={delay}>
|
||||
<Card
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
color: color,
|
||||
my: 4,
|
||||
backgroundSize: 'cover',
|
||||
backgroundImage: `url(${background})` || '',
|
||||
backgroundPosition: 'center bottom',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
p: {
|
||||
fontSize: [1, '16px', '20px']
|
||||
}
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{github_link != null ? (
|
||||
<Box>
|
||||
{position == 'bottom' ? (
|
||||
<Flex
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
left: 3,
|
||||
bottom: 2,
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
href={github_link}
|
||||
sx={{ mr: 2 }}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<Icon glyph="github" size={42} color={color} />
|
||||
</Link>
|
||||
{stars != null ? <Text as="h2">{stars} ⭐️</Text> : <></>}
|
||||
</Flex>
|
||||
) : (
|
||||
<Flex
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: 2,
|
||||
top: 2,
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
{stars != null ? <Text as="h2">{stars} ⭐️</Text> : <></>}
|
||||
<Link href={github_link} sx={{ ml: 2 }}>
|
||||
<Icon glyph="github" size={42} color={color} />
|
||||
</Link>
|
||||
</Flex>
|
||||
)}
|
||||
</Box>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{children}
|
||||
<ReactTooltip />
|
||||
</Card>
|
||||
// </Zoom>
|
||||
)
|
||||
|
||||
export default CardModel
|
||||
|
|
@ -28,9 +28,9 @@ export default function Clubs() {
|
|||
sx={{
|
||||
backgroundColor: 'elevated',
|
||||
background:
|
||||
'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',
|
||||
'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.47) 50%, rgba(0, 0, 0, 0.5) 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
|
||||
|
|
@ -41,15 +41,18 @@ export default function Clubs() {
|
|||
mx: [-2, 0],
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'red',
|
||||
bg: 'white',
|
||||
textShadow: 'none'
|
||||
bg: 'white'
|
||||
}}
|
||||
>
|
||||
Network of coding clubs
|
||||
</Text>
|
||||
<Grid columns={[1]}>
|
||||
<Box>
|
||||
<Text as="p" variant="subtitle">
|
||||
<Text
|
||||
as="p"
|
||||
variant="subtitle"
|
||||
sx={{ textShadow: '1px 1px 5px black' }}
|
||||
>
|
||||
Join or start a Hack Club and be part of a network of high quality
|
||||
coding clubs where you learn to code entirely through building
|
||||
things. You can start with no experience and build and ship a
|
||||
|
|
@ -59,10 +62,33 @@ export default function Clubs() {
|
|||
Get involved
|
||||
</Text>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
<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>
|
||||
<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="primary" sx={{mt: 3, backgroundColor: 'red'}} as="a" href="/clubs">Learn more</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
sx={{ mt: 3, backgroundColor: 'red' }}
|
||||
as="a"
|
||||
href="/clubs"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Learn more
|
||||
</Button>
|
||||
</Box>
|
||||
</Grid>
|
||||
</CardModel>
|
||||
|
|
@ -97,7 +97,7 @@ export default function Epoch() {
|
|||
sx={theme => ({
|
||||
color: '#FF4794',
|
||||
position: 'relative',
|
||||
width: '120%',
|
||||
width: '135%',
|
||||
height: '85%',
|
||||
py: 4,
|
||||
borderRadius: '5px',
|
||||
|
|
@ -192,7 +192,12 @@ export default function Epoch() {
|
|||
>
|
||||
Sign up and attend EPOCH
|
||||
</Buttons>
|
||||
<Buttons content="join #epoch-bts on Slack" id="18" link="/slack" icon="idea">
|
||||
<Buttons
|
||||
content="join #epoch-bts on Slack"
|
||||
id="18"
|
||||
link="/slack"
|
||||
icon="idea"
|
||||
>
|
||||
Plan the hackathon
|
||||
</Buttons>
|
||||
</Flex>
|
||||
|
|
@ -200,6 +205,8 @@ export default function Epoch() {
|
|||
variant="primary"
|
||||
as="a"
|
||||
href="https://epoch.hackclub.com/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
sx={{ background: '#FF4794', color: 'white', mt: 3 }}
|
||||
>
|
||||
Sign up for Epoch
|
||||
101
components/index/cards/events.js
Normal file
101
components/index/cards/events.js
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
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" sx={{ fontSize: [3, 4, 5], zIndex: 2 }}>
|
||||
Virtual Events
|
||||
</Text>
|
||||
<Grid columns={[1, '0.6fr 1fr']}>
|
||||
<Box>
|
||||
<Text as="p" variant="subtitle">
|
||||
Hack Clubbers run events that don’t suck. From live coding sessions
|
||||
to movie nights, we like to hangout on calls.
|
||||
</Text>
|
||||
<Text as="p" variant="subtitle">
|
||||
Sometimes, we also invite someone we really want to speak to (like{' '}
|
||||
<Link
|
||||
href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
sx={{
|
||||
color: 'inherit',
|
||||
fontStyle: 'italic',
|
||||
textDecoration: 'none'
|
||||
}}
|
||||
>
|
||||
Sal Khan
|
||||
</Link>
|
||||
,{' '}
|
||||
<Link
|
||||
href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
sx={{
|
||||
color: 'inherit',
|
||||
fontStyle: 'italic',
|
||||
textDecoration: 'none'
|
||||
}}
|
||||
>
|
||||
George Hotz
|
||||
</Link>
|
||||
, and{' '}
|
||||
<Link
|
||||
href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
sx={{
|
||||
color: 'inherit',
|
||||
fontStyle: 'italic',
|
||||
textDecoration: 'none'
|
||||
}}
|
||||
>
|
||||
Lady Ada
|
||||
</Link>
|
||||
) and host an{' '}
|
||||
<Link
|
||||
href="/amas"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
sx={{ color: 'inherit' }}
|
||||
>
|
||||
AMA
|
||||
</Link>{' '}
|
||||
with them.{' '}
|
||||
</Text>
|
||||
<Button variant="primary" mt={3}>
|
||||
Find an event
|
||||
</Button>
|
||||
</Box>
|
||||
<Box>
|
||||
<Event events={events} />
|
||||
</Box>
|
||||
</Grid>
|
||||
</CardModel>
|
||||
)
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@ import {
|
|||
Text
|
||||
} from 'theme-ui'
|
||||
import Buttons from './button'
|
||||
import ScrollingHackathons from '../hackathons/scrolling-hackathons'
|
||||
import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
|
|
@ -62,10 +62,12 @@ export default function Hackathons({ data, stars }) {
|
|||
</Flex>
|
||||
<Button
|
||||
variant="primary"
|
||||
sx={{bg: 'blue'}}
|
||||
sx={{ bg: 'blue' }}
|
||||
mt={3}
|
||||
as="a"
|
||||
href="https://editor.sprig.hackclub.com"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Find a hackathon
|
||||
</Button>
|
||||
|
|
@ -16,7 +16,7 @@ import Buttons from './button'
|
|||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
export default function Sinerider({stars}) {
|
||||
export default function Sinerider({ stars }) {
|
||||
return (
|
||||
<CardModel
|
||||
github_link="https://github.com/hackclub/sinerider/"
|
||||
|
|
@ -30,6 +30,7 @@ export default function Sinerider({stars}) {
|
|||
backgroundPosition: 'center center',
|
||||
backgroundRepeat: 'no-repeat'
|
||||
}}
|
||||
position="bottom"
|
||||
>
|
||||
<img
|
||||
src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
|
||||
|
|
@ -39,17 +40,35 @@ export default function Sinerider({stars}) {
|
|||
<Box></Box>
|
||||
<Box sx={{ mt: '-180px' }}>
|
||||
<Text as="p" variant="subtitle">
|
||||
A game about love and graphing, coming 2023! This
|
||||
project is powered by teenage hackers of all kinds: artists,
|
||||
musicians, programmers, storytellers… so if that's you, come join
|
||||
us; we need your help to make this thing real!
|
||||
A game about love and graphing, coming 2023! This project is powered
|
||||
by teenage hackers of all kinds: artists, musicians, programmers,
|
||||
storytellers… so if that's you, come join us; we need your help to
|
||||
make this thing real!
|
||||
</Text>
|
||||
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 2 }}>
|
||||
Get involved
|
||||
</Text>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
<Buttons content="join #gamedev in Slack to get started" id="4" icon="rainbow" href="/slack">Create art for the game</Buttons>
|
||||
<Buttons content="DM @cwalker in Slack to learn more" id="5" icon="view" href="/slack">Be a scene maker</Buttons>
|
||||
<Buttons
|
||||
content="join #gamedev in Slack to get started"
|
||||
id="4"
|
||||
icon="rainbow"
|
||||
href="/slack"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Create art for the game
|
||||
</Buttons>
|
||||
<Buttons
|
||||
content="DM @cwalker in Slack to learn more"
|
||||
id="5"
|
||||
icon="view"
|
||||
href="/slack"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Be a scene maker
|
||||
</Buttons>
|
||||
</Flex>
|
||||
<Button
|
||||
variant="primary"
|
||||
|
|
@ -13,10 +13,10 @@ import {
|
|||
Text
|
||||
} from 'theme-ui'
|
||||
import Buttons from './button'
|
||||
import usePrefersMotion from '../../lib/use-prefers-motion'
|
||||
import useHasMounted from '../../lib/use-has-mounted'
|
||||
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'
|
||||
import SlackEvents from '../../slack/slack-events'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
|
|
@ -154,10 +154,11 @@ export default function Slack({ slackNum, slackKey }) {
|
|||
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
|
||||
Coding doesn't have to be a solidary activity. At Hack Club, it's a
|
||||
team sport and in our Slack (similar to Discord, but better), you'll
|
||||
find a group of{' '}
|
||||
<Box sx={{ display: 'inline', fontWeight: '700' }}>{slackNum} </Box>
|
||||
{/* <Box
|
||||
as="div"
|
||||
sx={{
|
||||
color: 'transparent',
|
||||
|
|
@ -169,7 +170,7 @@ export default function Slack({ slackNum, slackKey }) {
|
|||
}}
|
||||
key={slackKey}
|
||||
>
|
||||
{/* {slackNum[0]}{' '} */}
|
||||
{slackNum}{' '}
|
||||
<Text
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
|
|
@ -180,7 +181,7 @@ export default function Slack({ slackNum, slackKey }) {
|
|||
animationFillMode: 'forwards'
|
||||
}}
|
||||
>
|
||||
{/* {slackNum[0]} */}
|
||||
{slackNum}
|
||||
</Text>
|
||||
<Text
|
||||
sx={{
|
||||
|
|
@ -192,11 +193,27 @@ export default function Slack({ slackNum, slackKey }) {
|
|||
animationFillMode: 'forwards'
|
||||
}}
|
||||
>
|
||||
{/* {slackNum[1]} */}
|
||||
{slackNum}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box> */}
|
||||
fabulous people to talk to, active at all hours.
|
||||
</Text>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{ fontSize: [1, '16px', '20px'] }}
|
||||
>
|
||||
We're united by our love for coding but talk about everything else
|
||||
too. You could launch your latest project and get feedback or
|
||||
discuss a cool article you read, alongside other Hack Clubbers.
|
||||
</Text>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{ fontSize: [1, '16px', '20px'] }}
|
||||
>
|
||||
Come for the skills, stay for the friends!
|
||||
</Text>
|
||||
<Button
|
||||
variant="primary"
|
||||
sx={{
|
||||
|
|
@ -206,11 +223,13 @@ export default function Slack({ slackNum, slackKey }) {
|
|||
}}
|
||||
as="a"
|
||||
href="/slack"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
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'}}>
|
||||
{/* <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"
|
||||
|
|
@ -228,4 +247,4 @@ export default function Slack({ slackNum, slackKey }) {
|
|||
</Grid>
|
||||
</CardModel>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -21,7 +21,6 @@ export default function SprigConsole({ stars }) {
|
|||
<Box sx={{ position: 'relative' }}>
|
||||
<CardModel
|
||||
github_link="https://github.com/hackclub/sprig-hardware"
|
||||
stars={stars}
|
||||
// link="https://sprig.hackclub.com"
|
||||
color="white"
|
||||
sx={{
|
||||
|
|
@ -72,7 +71,7 @@ export default function SprigConsole({ stars }) {
|
|||
</Buttons>
|
||||
</Flex>
|
||||
<Button
|
||||
as="a"
|
||||
as="a"
|
||||
variant="primary"
|
||||
sx={{
|
||||
backgroundColor: '#427A43',
|
||||
|
|
@ -80,6 +79,8 @@ export default function SprigConsole({ stars }) {
|
|||
mt: 3
|
||||
}}
|
||||
href="https://editor.sprig.hackclub.com"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Make a game
|
||||
</Button>
|
||||
|
|
@ -145,7 +145,11 @@ function Game({ game, gameImage, gameImage1 }) {
|
|||
fontWeight: '300',
|
||||
fontSize: '1.1rem',
|
||||
color: 'rgb(151, 166, 187)',
|
||||
padding: 0
|
||||
padding: 0,
|
||||
textOverflow: 'ellipsis',
|
||||
width: '100%',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
by {game.author}
|
||||
|
|
@ -156,12 +160,7 @@ function Game({ game, gameImage, gameImage1 }) {
|
|||
)
|
||||
}
|
||||
|
||||
export default function Sprig({
|
||||
stars,
|
||||
game,
|
||||
gameImage,
|
||||
gameImage1
|
||||
}) {
|
||||
export default function Sprig({ stars, game, gameImage, gameImage1 }) {
|
||||
return (
|
||||
<CardModel
|
||||
github_link="https://github.com/hackclub/sprig/"
|
||||
|
|
@ -216,7 +215,7 @@ export default function Sprig({
|
|||
</Buttons>
|
||||
</Flex>
|
||||
<Button
|
||||
as="a"
|
||||
as="a"
|
||||
variant="primary"
|
||||
sx={{
|
||||
backgroundColor: '#FFDE4D',
|
||||
|
|
@ -224,13 +223,24 @@ export default function Sprig({
|
|||
mt: 3
|
||||
}}
|
||||
href="https://editor.sprig.hackclub.com"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Make a game
|
||||
</Button>
|
||||
</Box>
|
||||
<Box>
|
||||
<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%'}}>
|
||||
<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>
|
||||
166
components/index/cards/workshops.js
Normal file
166
components/index/cards/workshops.js
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
import CardModel from './card-model'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import { useState } from 'react'
|
||||
import Fade from 'react-reveal/Fade'
|
||||
import Buttons from './button'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
const WorkshopCard = ({ slug, name, description, img, height, section }) => (
|
||||
<Link
|
||||
href={`/${slug}`}
|
||||
passHref
|
||||
sx={{ textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<Card
|
||||
as="a"
|
||||
variant="interactive"
|
||||
sx={{
|
||||
color: 'text',
|
||||
textDecoration: 'none',
|
||||
p: [0, 0],
|
||||
lineHeight: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ p: 3, lineHeight: 'body' }}>
|
||||
<Heading as="h3" sx={{ my: 1 }}>
|
||||
{name}
|
||||
</Heading>
|
||||
<Text variant="caption">{description}</Text>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: height || '120px',
|
||||
mt: 'auto',
|
||||
backgroundImage: `url('${img}')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center center',
|
||||
backgroundRepeat: 'no-repeat'
|
||||
}}
|
||||
>
|
||||
{/* <img alt={`${name} demo`} src={img} /> */}
|
||||
</Box>
|
||||
</Card>
|
||||
</Link>
|
||||
)
|
||||
|
||||
export default function Workshops({ data, stars }) {
|
||||
const [workshop, setWorkshop] = useState('Splatter Paintv')
|
||||
const [workshopSlug, setWorkshopSlug] = useState('')
|
||||
|
||||
// function New() {
|
||||
// let rand = Math.floor(Math.random() * data.length - 2)
|
||||
|
||||
// setWorkshop(
|
||||
// data[rand].name
|
||||
// .replace('.js', '')
|
||||
// .replace(/[-]/g, ' ')
|
||||
// .replace(/[_]/g, ' ')
|
||||
// .replace('.', '')
|
||||
// .replace(/(?:^|\s|[-"'([{])+\S/g, (c) => c.toUpperCase())
|
||||
// )
|
||||
|
||||
// setWorkshopSlug(data[rand].name)
|
||||
// }
|
||||
|
||||
// console.log(data[Math.floor(Math.random() * data[0].length)])
|
||||
return (
|
||||
<CardModel
|
||||
color="white"
|
||||
sx={{
|
||||
backgroundColor: 'elevated',
|
||||
background:
|
||||
'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)'
|
||||
}}
|
||||
github_link="https://github.com/hackclub/workshops"
|
||||
stars={stars}
|
||||
>
|
||||
<Text variant="title">Workshops</Text>
|
||||
<Box>
|
||||
<Text as="p" variant="subtitle">
|
||||
A collection of community-contributed, self-guided coding tutorials +
|
||||
ideas. Learn to code by building, one project at a time.
|
||||
</Text>
|
||||
<Grid columns={[1, '0.8fr 1fr']}>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 4 }}>
|
||||
Get involved
|
||||
</Text>
|
||||
<Buttons id="14" link="https://workshops.hackclub.com" icon="code">
|
||||
Follow a workshop and build a project
|
||||
</Buttons>
|
||||
<Buttons
|
||||
content="click to learn more about how to submit a workshop"
|
||||
id="13"
|
||||
link="https://workshops.hackclub.com/submit-a-workshop/"
|
||||
icon="event-add"
|
||||
>
|
||||
Write and submit a workshop
|
||||
</Buttons>
|
||||
<Button
|
||||
variant="primary"
|
||||
sx={{
|
||||
background: 'white',
|
||||
color: 'blue',
|
||||
mt: 3,
|
||||
width: 'fit-content'
|
||||
}}
|
||||
as="a"
|
||||
href="https://workshops.hackclub.com"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Find workshops
|
||||
</Button>
|
||||
</Flex>
|
||||
<Grid sx={{ gap: 3 }} columns={[1, 2]}>
|
||||
<WorkshopCard
|
||||
key="personal_website"
|
||||
slug="personal_website"
|
||||
name="Personal Website"
|
||||
description="Make your first website from scratch"
|
||||
img="https://workshops.hackclub.com/_next/image/?url=/content/workshops/personal_website/img/demo.png&w=1080&q=75"
|
||||
/>
|
||||
<WorkshopCard
|
||||
key="particle_physics"
|
||||
slug="particle_physics"
|
||||
name="Particle Physics"
|
||||
description="Creating a basic particle physics simulation and rendering using p5.js"
|
||||
img="https://cloud-k50jkthdw.vercel.app/0particle-physics-summary.png"
|
||||
height="100px"
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
{/* <Fade spy={workshop} bottom>
|
||||
<Text
|
||||
// onClick={New}
|
||||
sx={{
|
||||
'&:hover': { cursor: 'pointer' },
|
||||
float: 'right',
|
||||
mt: '-20px'
|
||||
}}
|
||||
>
|
||||
Click for random workshop: {workshop} 👀
|
||||
</Text>
|
||||
</Fade> */}
|
||||
</CardModel>
|
||||
)
|
||||
}
|
||||
79
components/index/carousel-cards.js
Normal file
79
components/index/carousel-cards.js
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import Icon from '../icon'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
export default function CarouselCards({
|
||||
background,
|
||||
titleColor,
|
||||
descriptionColor,
|
||||
title,
|
||||
description,
|
||||
img,
|
||||
link
|
||||
}) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
|
||||
'&:hover': { transform: 'scale(1.0625)', boxShadow: 'elevated' }
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
sx={{
|
||||
textDecoration: 'none',
|
||||
'&:hover': { cursor: 'pointer' },
|
||||
'&:hover svg': { opacity: 0.5 }
|
||||
}}
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<img
|
||||
src={img}
|
||||
width="40"
|
||||
height="40"
|
||||
sx={{ position: 'absolute', top: '-20px', left: 4, zIndex: 2 }}
|
||||
/>
|
||||
<Card
|
||||
// variant="interactive"
|
||||
sx={{
|
||||
mr: 3,
|
||||
backgroundColor: background,
|
||||
position: 'relative',
|
||||
color: 'white',
|
||||
width: '300px'
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
as="h2"
|
||||
sx={{ color: titleColor, fontSize: ['12px', '16px', '18px'] }}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
<Text as="p" sx={{ color: descriptionColor }}>
|
||||
{description}
|
||||
</Text>
|
||||
<Icon
|
||||
glyph="external"
|
||||
size={32}
|
||||
sx={{ position: 'absolute', top: 2, right: 2, opacity: 0.3 }}
|
||||
/>
|
||||
</Card>
|
||||
</Link>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
139
components/index/carousel.js
Normal file
139
components/index/carousel.js
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import CarouselCards from './carousel-cards'
|
||||
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
|
||||
|
||||
// const move = keyframes`
|
||||
// 0% { transform: translateX(150vw); }
|
||||
// 100% { transform: translateX(-50vw)}
|
||||
// `
|
||||
|
||||
export default function Carousel() {
|
||||
let [speed, setSpeed] = useState(5)
|
||||
|
||||
const [pageIsVisible, setPageIsVisible] = useState(true)
|
||||
|
||||
const handleVisibilityChange = isVisible => {
|
||||
setPageIsVisible(isVisible)
|
||||
}
|
||||
|
||||
return (
|
||||
// <Box
|
||||
// sx={{
|
||||
// display: 'flex',
|
||||
// animation: `${move} 10s linear infinite`,
|
||||
// gap: '10px',
|
||||
// width: '150vw',
|
||||
// flexWrap: 'nowrap',
|
||||
// transform: 'translateX(0)',
|
||||
// animationPlayState: 'paused',
|
||||
// '&:hover': {
|
||||
// animationPlayState: 'paused'
|
||||
// }
|
||||
// }}
|
||||
// >
|
||||
<PageVisibility onChange={handleVisibilityChange}>
|
||||
{pageIsVisible && (
|
||||
<Box>
|
||||
<Box sx={{ maxWidth: 'layout', margin: 'auto', pt: [3, 4, 5] }} as="div">
|
||||
<Text variant="eyebrow" sx={{ fontSize: [1, 2, 3], mt: 4 }}>
|
||||
Here's a few projects you could get involved in:
|
||||
</Text>
|
||||
</Box>
|
||||
<Ticker speed={speed} sx={{ overflowX: 'hidden' }}>
|
||||
{() => (
|
||||
<Box
|
||||
as="div"
|
||||
sx={{ display: 'flex', py: 4 }}
|
||||
onMouseOver={() => setSpeed(3)}
|
||||
onMouseOut={() => setSpeed(6)}
|
||||
>
|
||||
<CarouselCards
|
||||
background="#000"
|
||||
titleColor="yellow"
|
||||
descriptionColor="white"
|
||||
title="Sprig"
|
||||
description="Learn to code by making games in a JavaScript game editor."
|
||||
img="https://emoji.slack-edge.com/T0266FRGM/sprig-dino/6f01fec60b51b343.png"
|
||||
link="https://sprig.hackclub.com"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="#000"
|
||||
titleColor="#FF4794"
|
||||
descriptionColor="white"
|
||||
title="EPOCH"
|
||||
description="The most epic high school hackathon this new years!."
|
||||
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f386@2x.png"
|
||||
link="https://epoch.hackclub.com"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="blue"
|
||||
titleColor="white"
|
||||
textColor="white"
|
||||
title="Clubs network"
|
||||
description="High school students come together to have fun and code, IRL"
|
||||
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f5fa-fe0f@2x.png"
|
||||
link="/clubs"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="dark"
|
||||
titleColor="red"
|
||||
textColor="white"
|
||||
title="Hack Club Bank"
|
||||
description="Fiscal sponsorship and banking platform to organize anything."
|
||||
img="https://emoji.slack-edge.com/T0266FRGM/bank-hackclub-dark/8c6f85f387365072.png"
|
||||
link="/bank"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="#271932"
|
||||
titleColor="#CAB4D4"
|
||||
textColor="#CAB4D4"
|
||||
title="Sinerider"
|
||||
description="💖 A game about love, math, and graphing built by teenagers!"
|
||||
img="https://emoji.slack-edge.com/T0266FRGM/sinerider/68a0bc1208e885dd.png"
|
||||
link="https://sinerider.hackclub.com"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="black"
|
||||
titleColor="yellow"
|
||||
textColor="white"
|
||||
title="High school Hackathons"
|
||||
description="🔍 A curated list of high school hackathons"
|
||||
img="https://emoji.slack-edge.com/T0266FRGM/sprig-dino/6f01fec60b51b343.png"
|
||||
link="/hackathons"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="snow"
|
||||
titleColor="dark"
|
||||
descriptionColor="black"
|
||||
title="Workshops"
|
||||
description="100+ short coding workshops to start building"
|
||||
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f4bb@2x.png"
|
||||
link="https://workshops.hackclub.com"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Ticker>
|
||||
</Box>
|
||||
)}
|
||||
</PageVisibility>
|
||||
// </Box>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import { Card, Box, Text, Grid, Flex, Avatar, Heading } from 'theme-ui'
|
||||
import { Card, Box, Text, Grid, Badge, 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()
|
||||
|
|
@ -13,6 +12,8 @@ const Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (
|
|||
href={`https://events.hackclub.com/${slug}`}
|
||||
as={`https://events.hackclub.com/${slug}`}
|
||||
passHref
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<Box
|
||||
as="a"
|
||||
|
|
@ -108,6 +109,7 @@ function Dot() {
|
|||
}
|
||||
|
||||
export default function Events({ events }) {
|
||||
console.log(events.length)
|
||||
return (
|
||||
<Box mb={3}>
|
||||
{/* <Heading>
|
||||
|
|
@ -116,9 +118,9 @@ export default function Events({ events }) {
|
|||
upcoming events
|
||||
</Link>
|
||||
</Heading> */}
|
||||
<Text>
|
||||
Events happening this month <Dot />
|
||||
</Text>
|
||||
{/* <Text>
|
||||
{events.map(e => !past(e.end)) ? <>Upcoming events <Dot /></> : <></>}
|
||||
</Text> */}
|
||||
<Grid
|
||||
mt={3}
|
||||
mb={2}
|
||||
|
|
@ -131,10 +133,42 @@ export default function Events({ events }) {
|
|||
boxShadow: 'elevated'
|
||||
}}
|
||||
>
|
||||
{events.map(event => (
|
||||
<Event {...event} key={event.id} />
|
||||
))}
|
||||
{events.map(event =>
|
||||
!past(event.end) ? <Event {...event} key={event.id} /> : <></>
|
||||
)}
|
||||
</Grid>
|
||||
<Text>
|
||||
We just had these events:{' '}
|
||||
{events.map(event =>
|
||||
past(event.end) ? (
|
||||
<Badge
|
||||
variant="pill"
|
||||
sx={{
|
||||
zIndex: '1',
|
||||
bg: 'rgb(255, 255, 255, 0.3)',
|
||||
color: 'white',
|
||||
textDecoration: 'none',
|
||||
fontWeight: 'normal',
|
||||
fontSize: 'small',
|
||||
mr: 1,
|
||||
my: 1,
|
||||
':hover': { bg: 'rgb(255, 255, 255, 0.5)', cursor: 'pointer' },
|
||||
transition: '0.3s ease',
|
||||
a: {
|
||||
textDecoration: 'none',
|
||||
color: 'white'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Link href={`https://events.hackclub.com/${event.slug}`}>
|
||||
{event.title}
|
||||
</Link>
|
||||
</Badge>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
)}{' '}
|
||||
</Text>
|
||||
{/* <Link href="/amas" target="_blank">
|
||||
*like George Hotz, Dylan Field, Sal Khan, and more
|
||||
</Link> */}
|
||||
134
components/index/github.js
Normal file
134
components/index/github.js
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import { useEffect, useState } from 'react'
|
||||
import RelativeTime from 'react-relative-time'
|
||||
import Fade from 'react-reveal/Fade'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
export default function GitHub({
|
||||
type,
|
||||
img,
|
||||
user,
|
||||
key,
|
||||
text,
|
||||
time,
|
||||
message,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<Box style={{ width: 'fit-content', display: 'inline' }}>
|
||||
<Badge
|
||||
variant="pill"
|
||||
bg="black"
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
color: 'white',
|
||||
fontWeight: '400 !important',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 2,
|
||||
zIndex: 4,
|
||||
transform: 'rotate(3deg)'
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<Fade appear spy={key}>
|
||||
<Link
|
||||
href="https://github.com/hackclub"
|
||||
sx={{
|
||||
textDecoration: 'none',
|
||||
color: 'inherit',
|
||||
fontWeight: '400 !important',
|
||||
display: 'flex',
|
||||
fontSize: '14px',
|
||||
height: '25px',
|
||||
position: 'relative',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
{user != null ? (
|
||||
user != 'dependabot[bot]' ? (
|
||||
user != 'github-actions[bot]' ? (
|
||||
<img src={img} sx={{ borderRadius: '100%', height: '90%' }} />
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{user != null ? (
|
||||
user != 'dependabot[bot]' ? (
|
||||
user != 'github-actions[bot]' ? (
|
||||
<Text sx={{ mr: 2 }}>{user}</Text>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{user != null ? (
|
||||
user != 'dependabot[bot]' ? (
|
||||
user != 'github-actions[bot]' ? (
|
||||
<Text
|
||||
sx={{
|
||||
textOverflow: 'ellipsis',
|
||||
maxWidth: '150px',
|
||||
display: 'inline-block',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap'
|
||||
}}
|
||||
>
|
||||
{message}
|
||||
</Text>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{user != null ? (
|
||||
user != 'dependabot[bot]' ? (
|
||||
user != 'github-actions[bot]' ? (
|
||||
<Text
|
||||
as="span"
|
||||
sx={{ fontSize: 'small', color: 'sunken', mx: 2 }}
|
||||
>
|
||||
<RelativeTime value={time} titleformat="iso8601" />
|
||||
</Text>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</Link>
|
||||
</Fade>
|
||||
</Badge>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
625
pages/index.js
625
pages/index.js
|
|
@ -23,28 +23,30 @@ import Footer from '../components/footer'
|
|||
import FooterImgFile from '../public/home/footer.png'
|
||||
import Stage from '../components/stage'
|
||||
import devtools from '../node_modules/devtools-detect/index.js'
|
||||
import Carousel from '../components/carousel'
|
||||
import Sprig from '../components/cards/sprig'
|
||||
import Sinerider from '../components/cards/sinerider'
|
||||
import SprigConsole from '../components/cards/sprig-console'
|
||||
import Clubs from '../components/cards/clubs'
|
||||
import Workshops from '../components/cards/workshops'
|
||||
import Bank from '../components/cards/bank'
|
||||
import Carousel from '../components/index/carousel'
|
||||
import Sprig from '../components/index/cards/sprig'
|
||||
import Sinerider from '../components/index/cards/sinerider'
|
||||
import SprigConsole from '../components/index/cards/sprig-console'
|
||||
import Clubs from '../components/index/cards/clubs'
|
||||
import Workshops from '../components/index/cards/workshops'
|
||||
import Bank from '../components/index/cards/bank'
|
||||
import FormData from 'form-data'
|
||||
import Epoch from '../components/cards/epoch'
|
||||
import Hackathons from '../components/cards/hackathons'
|
||||
import Epoch from '../components/index/cards/epoch'
|
||||
import Hackathons from '../components/index/cards/hackathons'
|
||||
import Flip from 'react-reveal/Flip'
|
||||
import Fade from 'react-reveal/Fade'
|
||||
import Inspect from '../components/inspect'
|
||||
import AssembleImgFile from '../public/home/assemble.jpg'
|
||||
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 MailingList from '../components/cards/mailing-list'
|
||||
import Slack from '../components/cards/slack'
|
||||
import Events from '../components/cards/events'
|
||||
import MailingList from '../components/index/cards/mailing-list'
|
||||
import Slack from '../components/index/cards/slack'
|
||||
import Events from '../components/index/cards/events'
|
||||
import Icon from '../components/icon'
|
||||
import GitHub from '../components/index/github'
|
||||
import Photo from '../components/photo'
|
||||
import ReactTooltip from 'react-tooltip'
|
||||
|
||||
// function SlackNum({slackData}) {
|
||||
// let [key, setKey] = useState()
|
||||
|
|
@ -68,6 +70,7 @@ function Page({
|
|||
bankData,
|
||||
// slackData,
|
||||
gitHubData,
|
||||
gitHubDataLength,
|
||||
stars,
|
||||
// githubData2,
|
||||
dataPieces,
|
||||
|
|
@ -79,28 +82,48 @@ function Page({
|
|||
let [gameImage1, setGameImage1] = useState('')
|
||||
let [reveal, setReveal] = useState(false)
|
||||
const [hover, setHover] = useState(true)
|
||||
let [slackNum, setSlackNum] = useState([])
|
||||
let [slackNum, setSlackNum] = useState(22594)
|
||||
let [slack, setSlack] = useState(22594)
|
||||
let [github, setGithub] = useState(0)
|
||||
|
||||
let [key, setKey] = useState(0)
|
||||
let [key1, setKey1] = useState(0)
|
||||
let [slackKey, setSlackKey] = useState(0)
|
||||
let [key, setKey] = useState(0)
|
||||
|
||||
// let gitHubDataLength = gitHubData.length
|
||||
|
||||
// console.log(gitHubDataLength)
|
||||
|
||||
// useEffect(() => {
|
||||
// function hehe() {
|
||||
// setKey(Math.random())
|
||||
// setGithub(Math.floor(Math.random() * (gitHubDataLength)))
|
||||
// console.log(gitHubData[github])
|
||||
// }
|
||||
// setInterval(hehe, 6000)
|
||||
// }, [])
|
||||
|
||||
const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||
|
||||
console.log(gitHubData)
|
||||
// console.log(gitHubData)
|
||||
// console.log(slackData)
|
||||
// useEffect(() => {
|
||||
// let array = github
|
||||
// let post = 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])
|
||||
// setSlack(slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
|
||||
// .total_members_count)
|
||||
// })
|
||||
useEffect(() => {
|
||||
// console.log("one", slack)
|
||||
|
||||
const add = setTimeout(() => {
|
||||
setSlack(x => x + 1)
|
||||
setSlackNum(slack)
|
||||
console.log(slackNum)
|
||||
}, Math.floor((Math.random() * (5 - 2) + 1) * 10000))
|
||||
|
||||
return () => clearTimeout(add)
|
||||
|
||||
// setInterval(add, 2000)
|
||||
// setSlackKey(Math.random())
|
||||
}, [slack])
|
||||
|
||||
// useEffect(() => {
|
||||
// if (typeof window !== 'undefined') {
|
||||
|
|
@ -125,15 +148,15 @@ function Page({
|
|||
// setKey1(Math.random())
|
||||
// }, slackData)
|
||||
|
||||
useEffect(() => {
|
||||
// window.kc = `In the days of old, when gaming was young \nA mysterious code was found among \nA sequence of buttons, pressed in a row \nIt unlocked something special, we all know \n\nUp, up, down, down, left, right, left, right \nB, A, Start, we all have heard it's plight \nIn the 8-bit days, it was all the rage \nAnd it still lives on, with time, it will never age \n\nKonami Code, it's a legend of days gone by \nIt's a reminder of the classics we still try \nNo matter the game, no matter the system \nThe code will live on, and still be with them \n\nSo the next time you play, take a moment to pause \nAnd remember the code, and the Konami cause \nIt's a part of gaming's history, and a part of our lives \nLet's keep it alive, and let the Konami Code thrive!\n`
|
||||
setInterval(() => {
|
||||
setKey(Math.random())
|
||||
// setGithub(Math.floor(Math.random()) * dataPieces.length)
|
||||
// console.log(Math.floor(Math.random()) * githubData2.length)
|
||||
console.log(Math.floor(Math.random() * dataPieces.length + 1))
|
||||
}, 8000)
|
||||
}, [])
|
||||
// useEffect(() => {
|
||||
// // window.kc = `In the days of old, when gaming was young \nA mysterious code was found among \nA sequence of buttons, pressed in a row \nIt unlocked something special, we all know \n\nUp, up, down, down, left, right, left, right \nB, A, Start, we all have heard it's plight \nIn the 8-bit days, it was all the rage \nAnd it still lives on, with time, it will never age \n\nKonami Code, it's a legend of days gone by \nIt's a reminder of the classics we still try \nNo matter the game, no matter the system \nThe code will live on, and still be with them \n\nSo the next time you play, take a moment to pause \nAnd remember the code, and the Konami cause \nIt's a part of gaming's history, and a part of our lives \nLet's keep it alive, and let the Konami Code thrive!\n`
|
||||
// setInterval(() => {
|
||||
// setKey(Math.random())
|
||||
// // setGithub(Math.floor(Math.random()) * dataPieces.length)
|
||||
// // console.log(Math.floor(Math.random()) * githubData2.length)
|
||||
// console.log(Math.floor(Math.random() * dataPieces.length + 1))
|
||||
// }, 8000)
|
||||
// }, [])
|
||||
|
||||
// useEffect(() => {
|
||||
// if (typeof window !== 'undefined') {
|
||||
|
|
@ -204,93 +227,6 @@ function Page({
|
|||
}
|
||||
}, [hover])
|
||||
|
||||
const Node = ({ type, img, user, text, time, message, ...props }) => (
|
||||
<Box
|
||||
// key={key1}
|
||||
style={{ width: 'fit-content', display: 'inline' }}
|
||||
// spy={key1}
|
||||
>
|
||||
<Badge
|
||||
variant="pill"
|
||||
bg="black"
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
color: 'white',
|
||||
fontWeight: '400 !important'
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<Link
|
||||
href="https://github.com/hackclub"
|
||||
sx={{
|
||||
textDecoration: 'none',
|
||||
color: 'inherit',
|
||||
fontWeight: '400 !important',
|
||||
display: 'flex',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
>
|
||||
{user != null ? (
|
||||
user != 'dependabot[bot]' ? (
|
||||
user != 'github-actions[bot]' ? (
|
||||
<img src={img} sx={{ borderRadius: '100%' }} />
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{user != null ? (
|
||||
user != 'dependabot[bot]' ? (
|
||||
user != 'github-actions[bot]' ? (
|
||||
<Text>{user}</Text>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{user != null ? (
|
||||
user != 'dependabot[bot]' ? (
|
||||
user != 'github-actions[bot]' ? (
|
||||
<Text sx={{ textOverflow: 'ellipsis' }}>{message}</Text>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{type == 'CreateEvent' ? (
|
||||
user != 'dependabot[bot]' ? (
|
||||
user != 'github-actions[bot]' ? (
|
||||
<Text sx={{ textOverflow: 'ellipsis' }}>{message}</Text>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<Text as="span" sx={{ fontSize: 'small', color: 'sunken', mr: 2 }}>
|
||||
<RelativeTime value={time} titleformat="iso8601" />
|
||||
</Text>
|
||||
{message}
|
||||
</Link>
|
||||
</Badge>
|
||||
</Box>
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Meta
|
||||
|
|
@ -344,37 +280,29 @@ function Page({
|
|||
src={AssembleImgFile}
|
||||
alt="Hack Clubbers assemble at Figma HQ for the first IRL hackathon in SF since 2020: Assemble. 📸 Photo by Kunal Botla, Hack Clubber in MA!"
|
||||
priority
|
||||
gradient="linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7))"
|
||||
gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.5))"
|
||||
/>
|
||||
{/* <SlideDown duration={768}> */}
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: [null, 'layout'],
|
||||
position: 'relative',
|
||||
mx: 'auto'
|
||||
mx: 'auto',
|
||||
py: 4
|
||||
}}
|
||||
>
|
||||
<Node
|
||||
type={gitHubData.type}
|
||||
img={gitHubData.userImage}
|
||||
user={gitHubData.user}
|
||||
// text={gitHubData.message}
|
||||
time={gitHubData.time}
|
||||
message={gitHubData.message}
|
||||
<GitHub
|
||||
type={gitHubData[github].type}
|
||||
img={gitHubData[github].userImage}
|
||||
user={gitHubData[github].user}
|
||||
// text={gitHubData[github].message}
|
||||
time={gitHubData[github].time}
|
||||
message={gitHubData[github].message}
|
||||
key={key}
|
||||
// text="✅ New commit in hackclub/hackclub by @bellesea"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 2,
|
||||
zIndex: 4,
|
||||
transform: 'rotate(3deg)'
|
||||
}}
|
||||
/>
|
||||
<Fade>
|
||||
<Text
|
||||
variant="eyebrow"
|
||||
sx={{ color: 'sunken', fontSize: [1, 2, 3] }}
|
||||
>
|
||||
<Text variant="eyebrow" sx={{ color: 'sunken' }}>
|
||||
Welcome to Hack Club
|
||||
</Text>
|
||||
</Fade>
|
||||
|
|
@ -384,7 +312,7 @@ function Page({
|
|||
variant="title"
|
||||
sx={{
|
||||
color: 'white',
|
||||
my: [3, 4],
|
||||
mb: [3, 4],
|
||||
mx: 'auto',
|
||||
zIndex: 1,
|
||||
textAlign: 'left',
|
||||
|
|
@ -399,9 +327,30 @@ function Page({
|
|||
pb: 3
|
||||
}}
|
||||
>
|
||||
Where teen makers around the world practice the
|
||||
Where{' '}
|
||||
<Text
|
||||
sx={{ color: 'transparent', mx: 2, whiteSpace: 'nowrap' }}
|
||||
as="a"
|
||||
onClick={() => {
|
||||
setHover(false)
|
||||
!reveal ? setReveal(true) : setReveal(false)
|
||||
}}
|
||||
sx={{
|
||||
color: 'inherit',
|
||||
'&:hover': {
|
||||
cursor: 'help'
|
||||
}
|
||||
}}
|
||||
>
|
||||
teen makers
|
||||
</Text>{' '}
|
||||
around the world practice the
|
||||
<Text
|
||||
sx={{
|
||||
color: 'transparent',
|
||||
ml: 2,
|
||||
mr: 4,
|
||||
whiteSpace: 'nowrap'
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
sx={{
|
||||
|
|
@ -414,28 +363,342 @@ function Page({
|
|||
transform: 'rotate(-3deg) translateY(5px)',
|
||||
color: 'white',
|
||||
whiteSpace: 'nowrap',
|
||||
textDecoration: 'none',
|
||||
'&:hover': {
|
||||
cursor: 'pointer'
|
||||
},
|
||||
svg: {
|
||||
mb: '20px',
|
||||
opacity: 0.5,
|
||||
transition: '0.3s',
|
||||
mr: '-5px'
|
||||
},
|
||||
'&:hover svg': {
|
||||
opacity: 1
|
||||
}
|
||||
}}
|
||||
as="a"
|
||||
onClick={() => {
|
||||
setHover(false)
|
||||
!reveal ? setReveal(true) : setReveal(false)
|
||||
}}
|
||||
href="/philosophy"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
hacker ethic
|
||||
<Icon glyph="external" size={24} />
|
||||
</Text>
|
||||
hacker ethic{' '}
|
||||
</Text>
|
||||
by building things we care about together.
|
||||
by using code to build things we care about together.
|
||||
</Text>
|
||||
</Heading>
|
||||
</Fade>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: ['center', 'center', 'flex-end'],
|
||||
marginRight: 2,
|
||||
mt: [2, 2, 1]
|
||||
}}
|
||||
>
|
||||
<Badge
|
||||
as="a"
|
||||
href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
variant="pill"
|
||||
sx={{
|
||||
zIndex: '1',
|
||||
bg: '#000',
|
||||
color: 'white',
|
||||
opacity: 0.5,
|
||||
textDecoration: 'none',
|
||||
fontWeight: 'normal',
|
||||
':hover': { opacity: 1 },
|
||||
transition: '0.3s ease'
|
||||
}}
|
||||
title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
|
||||
>
|
||||
Hackers at Assemble in SF
|
||||
</Badge>
|
||||
</Box>
|
||||
</Box>
|
||||
{/* </SlideDown> */}
|
||||
<Carousel />
|
||||
</Box>
|
||||
<Box as="section" sx={{ pt: [4, 5], color: 'black' }}>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
maxWidth: 'layout',
|
||||
margin: 'auto'
|
||||
}}
|
||||
// pb={4}
|
||||
>
|
||||
<Text variant="eyebrow" as="p" sx={{ fontSize: [1, 2, 3], mt: 4 }}>
|
||||
The rundown
|
||||
</Text>
|
||||
<Text variant="title" sx={{ fontSize: [3, 4, 5] }}>
|
||||
Join us in discovering the joy of code
|
||||
</Text>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{ fontSize: [1, '16px', '20px'] }}
|
||||
>
|
||||
Here, we don't wait for permission to code. Hack Clubbers come
|
||||
together to code because it's fun. Whether you’re a beginner
|
||||
programmer or have years of experience, there’s a place for you at
|
||||
Hack Club. Read about our{' '}
|
||||
<Link href="/philosophy" target="_blank" rel="noopener">
|
||||
hacker ethic
|
||||
</Link>
|
||||
.
|
||||
</Text>
|
||||
<Grid
|
||||
columns={[null, null, 2, '2.5fr 3fr']}
|
||||
gap={[3, 4]}
|
||||
pt={[3, 4]}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
figure: {
|
||||
position: 'absolute',
|
||||
transform: 'rotate(-3deg)',
|
||||
height: '85%',
|
||||
width: '100%'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Photo
|
||||
src="https://dl.airtable.com/.attachmentThumbnails/904cf56ceac6b0921eceae02958dcd29/5851864a"
|
||||
alt="Summer Creek Hack Club meeting, February 2020"
|
||||
width={3000}
|
||||
height={2550}
|
||||
showAlt
|
||||
/>
|
||||
</Box>
|
||||
<Grid
|
||||
columns="1fr"
|
||||
sx={{
|
||||
gridColumnGap: 3,
|
||||
span: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 24,
|
||||
display: 'inline-block',
|
||||
fontSize: 2,
|
||||
lineHeight: '30px',
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold',
|
||||
border: '3px solid currentColor'
|
||||
},
|
||||
p: { my: 0, fontSize: [1, '16px', '20px'] },
|
||||
strong: { display: 'block', fontSize: [1, '18px', '22px'] }
|
||||
}}
|
||||
>
|
||||
<Grid
|
||||
columns="auto 1fr"
|
||||
sx={{
|
||||
transitionDuration: '0.39s',
|
||||
py: 2,
|
||||
px: 2,
|
||||
color: 'inherit',
|
||||
position: 'relative',
|
||||
textDecoration: 'none',
|
||||
borderRadius: 'extra',
|
||||
'&:hover': {
|
||||
bg: 'purple',
|
||||
color: 'white',
|
||||
cursor: 'pointer'
|
||||
},
|
||||
'&:hover span': {
|
||||
color: 'white'
|
||||
}
|
||||
}}
|
||||
as="a"
|
||||
href="#community"
|
||||
data-effect="solid"
|
||||
data-tip="learn more about our online community"
|
||||
>
|
||||
<Text as="span" color="purple">
|
||||
1
|
||||
</Text>
|
||||
<Text as="p" variant="subtitle">
|
||||
<strong>Connect virtually with other teenagers</strong>
|
||||
We're united by our love for coding but talk about and do
|
||||
everything else too.
|
||||
{/* <Button
|
||||
variant="primary"
|
||||
sx={{
|
||||
backgroundColor: 'purple',
|
||||
color: 'white',
|
||||
mt: 3,
|
||||
display: 'flex',
|
||||
width: 'fit-content'
|
||||
}}
|
||||
as="a"
|
||||
href="/slack"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Join our community{' '}
|
||||
<Icon
|
||||
glyph="slack"
|
||||
sx={{ ml: '4px !important', display: 'inline-block' }}
|
||||
/>
|
||||
</Button> */}
|
||||
</Text>
|
||||
<Icon
|
||||
glyph="external"
|
||||
size={32}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 1,
|
||||
right: 2,
|
||||
color: 'white'
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
columns="auto 1fr"
|
||||
sx={{
|
||||
transitionDuration: '0.39s',
|
||||
py: 2,
|
||||
px: 2,
|
||||
color: 'inherit',
|
||||
position: 'relative',
|
||||
textDecoration: 'none',
|
||||
borderRadius: 'extra',
|
||||
'&:hover': {
|
||||
bg: 'cyan',
|
||||
color: 'white',
|
||||
cursor: 'pointer'
|
||||
},
|
||||
'&:hover span': {
|
||||
color: 'white'
|
||||
}
|
||||
}}
|
||||
as="a"
|
||||
href="#irl"
|
||||
data-effect="solid"
|
||||
data-tip="check out clubs and hackathons at Hack Club"
|
||||
>
|
||||
<Text as="span" color="cyan">
|
||||
2
|
||||
</Text>
|
||||
<Text
|
||||
as="p"
|
||||
variant="subtitle"
|
||||
sx={{
|
||||
mt: 0,
|
||||
pb: 3
|
||||
}}
|
||||
>
|
||||
<strong>Gather IRL with other makers</strong> Meet other
|
||||
Hack Clubbers in your community to code and make things, be
|
||||
it once a week after school (at{' '}
|
||||
<Link href="/clubs">Hack Clubs</Link>), a one-time 48 hour
|
||||
event (<Link href="/hackathons">hackathons</Link>), or
|
||||
anything in-between!
|
||||
{/* <Button
|
||||
variant="primary"
|
||||
sx={{
|
||||
backgroundColor: 'blue',
|
||||
color: 'white',
|
||||
mt: 3,
|
||||
display: 'flex',
|
||||
width: 'fit-content'
|
||||
}}
|
||||
as="a"
|
||||
href="/slack"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Start a club{' '}
|
||||
<Icon
|
||||
glyph="slack"
|
||||
sx={{ ml: '4px !important', display: 'inline-block' }}
|
||||
/>
|
||||
</Button> */}
|
||||
</Text>
|
||||
<Icon
|
||||
glyph="external"
|
||||
size={32}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 1,
|
||||
right: 2,
|
||||
color: 'white'
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
columns="auto 1fr"
|
||||
sx={{
|
||||
transitionDuration: '0.39s',
|
||||
py: 2,
|
||||
px: 2,
|
||||
color: 'inherit',
|
||||
position: 'relative',
|
||||
textDecoration: 'none',
|
||||
borderRadius: 'extra',
|
||||
'&:hover': {
|
||||
bg: 'orange',
|
||||
color: 'white',
|
||||
cursor: 'pointer'
|
||||
},
|
||||
'&:hover span': {
|
||||
color: 'white'
|
||||
}
|
||||
}}
|
||||
as="a"
|
||||
href="#tools"
|
||||
data-tip="click to projects we're currently working on"
|
||||
data-effect="solid"
|
||||
>
|
||||
<Text as="span" color="orange">
|
||||
3
|
||||
</Text>
|
||||
<Text as="p" variant="subtitle">
|
||||
<strong>Build open-source learning tools</strong>
|
||||
Contribute to projects like a game engine, daily streak
|
||||
system, graphing game, and more!
|
||||
{/* <Button
|
||||
variant="primary"
|
||||
sx={{
|
||||
backgroundColor: 'orange',
|
||||
color: 'white',
|
||||
mt: 3,
|
||||
display: 'flex',
|
||||
width: 'fit-content'
|
||||
}}
|
||||
as="a"
|
||||
href="/slack"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Find a hackathon{' '}
|
||||
<Icon
|
||||
glyph="slack"
|
||||
sx={{ ml: '4px !important', display: 'inline-block' }}
|
||||
/>
|
||||
</Button> */}
|
||||
</Text>
|
||||
<Icon
|
||||
glyph="external"
|
||||
size={32}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 1,
|
||||
right: 2,
|
||||
color: 'white'
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
<Carousel />
|
||||
<Box as="section" sx={{ pt: [4, 5], color: 'black' }}>
|
||||
<Box
|
||||
sx={{
|
||||
|
|
@ -463,7 +726,12 @@ function Page({
|
|||
</Text> */}
|
||||
{/* <Slack slackKey={slackKey} /> */}
|
||||
{/* <Events events={events} /> */}
|
||||
<Text variant="eyebrow" as="p" sx={{ fontSize: [1, 2, 3], mt: 4 }}>
|
||||
<Text
|
||||
variant="eyebrow"
|
||||
as="p"
|
||||
sx={{ fontSize: [1, 2, 3], mt: 4 }}
|
||||
id="community"
|
||||
>
|
||||
Hack Clubbers
|
||||
</Text>
|
||||
<Text variant="title" sx={{ fontSize: [3, 4, 5] }}>
|
||||
|
|
@ -499,7 +767,8 @@ function Page({
|
|||
>
|
||||
Join us →
|
||||
</Button> */}
|
||||
<Slack slackKey={slackKey} />
|
||||
<Slack slackKey={slackKey} slackNum={slackNum} />
|
||||
<Epoch delay={300} />
|
||||
{/* <MailingList /> */}
|
||||
{/* </Box> */}
|
||||
{/* <Box
|
||||
|
|
@ -544,6 +813,7 @@ function Page({
|
|||
backgroundRepeat: 'repeat',
|
||||
backgroundPosition: '10% 10%'
|
||||
}}
|
||||
id="tools"
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
|
|
@ -589,13 +859,14 @@ function Page({
|
|||
maxWidth: 'layout',
|
||||
margin: 'auto'
|
||||
}}
|
||||
id="irl"
|
||||
>
|
||||
<Text variant="eyebrow" as="p">
|
||||
Hack Clubbers
|
||||
</Text>
|
||||
<Text variant="title" sx={{ fontSize: [3, 4, 5] }}>
|
||||
Gather IRL to discover the{' '}
|
||||
<Text
|
||||
Gather IRL to create together
|
||||
{/* <Text
|
||||
as="span"
|
||||
sx={{
|
||||
borderRadius: 'default',
|
||||
|
|
@ -607,7 +878,7 @@ function Page({
|
|||
}}
|
||||
>
|
||||
joy of code
|
||||
</Text>
|
||||
</Text> */}
|
||||
</Text>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
|
|
@ -618,14 +889,13 @@ function Page({
|
|||
things, be it once a week after school, a one-time 48 hour
|
||||
event, or anything in-between!
|
||||
</Text>
|
||||
<Bank data={bankData} delay={100} />
|
||||
<Clubs delay={200} />
|
||||
<Epoch delay={300} />
|
||||
<Hackathons
|
||||
delay={400}
|
||||
data={hackathonsData}
|
||||
stars={stars.hackathons.stargazerCount}
|
||||
/>
|
||||
<Bank data={bankData} delay={100} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
|
@ -678,6 +948,8 @@ function Page({
|
|||
<Card
|
||||
as="a"
|
||||
href="/slack"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
variant="interactive"
|
||||
sx={{
|
||||
background:
|
||||
|
|
@ -712,6 +984,8 @@ function Page({
|
|||
as="a"
|
||||
href="/clubs"
|
||||
variant="interactive"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<Stage
|
||||
icon="clubs"
|
||||
|
|
@ -739,6 +1013,8 @@ function Page({
|
|||
as="a"
|
||||
href="https://github.com/hackclub"
|
||||
variant="interactive"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<Stage
|
||||
icon="github"
|
||||
|
|
@ -766,6 +1042,8 @@ function Page({
|
|||
as="a"
|
||||
href="/hackathons"
|
||||
variant="interactive"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<Stage
|
||||
icon="event-code"
|
||||
|
|
@ -830,7 +1108,7 @@ export async function getStaticProps() {
|
|||
|
||||
let raised = initialBankData.raised / 100
|
||||
|
||||
console.log(raised)
|
||||
// console.log(raised)
|
||||
|
||||
bankData.push(
|
||||
`💰 ${raised.toLocaleString('en-US', {
|
||||
|
|
@ -843,7 +1121,7 @@ export async function getStaticProps() {
|
|||
'https://api.github.com/orgs/hackclub/events'
|
||||
).then(r => r.json())
|
||||
|
||||
console.log(initialBankData)
|
||||
// console.log(initialBankData)
|
||||
|
||||
// if(initialGitHubData != null) {
|
||||
// let initialGitHubData1 = initialGitHubData.map(x =>
|
||||
|
|
@ -870,7 +1148,7 @@ export async function getStaticProps() {
|
|||
? x.actor.login
|
||||
: x.type == 'PullRequestEvent'
|
||||
? x.actor.login
|
||||
: x.type == 'CreateEvent'
|
||||
: x.type == 'WatchEvent'
|
||||
? x.actor.login
|
||||
: null,
|
||||
userImage:
|
||||
|
|
@ -878,7 +1156,7 @@ export async function getStaticProps() {
|
|||
? x.actor.avatar_url
|
||||
: x.type == 'PullRequestEvent'
|
||||
? x.actor.avatar_url
|
||||
: x.type == 'CreateEvent'
|
||||
: x.type == 'WatchEvent'
|
||||
? x.actor.avatar_url
|
||||
: null,
|
||||
message:
|
||||
|
|
@ -886,16 +1164,22 @@ export async function getStaticProps() {
|
|||
? x.payload.commits[0].message
|
||||
: x.type == 'PullRequestEvent'
|
||||
? x.payload.pull_request.title
|
||||
: x.type == 'PullRequestEvent'
|
||||
? x.payload.ref_type == 'branch'
|
||||
? 'Created a branch'
|
||||
: null
|
||||
: x.type == 'WatchEvent'
|
||||
? `starred ${x.repo.name}`
|
||||
: null,
|
||||
time: x.created_at
|
||||
}))
|
||||
|
||||
gitHubData = gitHubData.filter(
|
||||
x =>
|
||||
x.type == 'PushEvent' ||
|
||||
x.type == 'PullRequestEvent' ||
|
||||
x.type == 'WatchEvent'
|
||||
)
|
||||
|
||||
let gitHubDataLength = gitHubData.length
|
||||
|
||||
console.log(gitHubData)
|
||||
console.log('hi')
|
||||
// let initialGithubData3 = initialGitHubData.map(x =>
|
||||
// (x.type == 'PushEvent' &&
|
||||
// x.actor.login != 'github-actions[bot]' &&
|
||||
|
|
@ -957,6 +1241,8 @@ export async function getStaticProps() {
|
|||
// }
|
||||
// ).then(r => r.json())
|
||||
|
||||
// console.log(slackData)
|
||||
|
||||
const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming')
|
||||
const hackathonsData = await res.json()
|
||||
let games = []
|
||||
|
|
@ -987,6 +1273,7 @@ export async function getStaticProps() {
|
|||
game,
|
||||
gameTitle,
|
||||
gitHubData,
|
||||
gitHubDataLength,
|
||||
// githubData2,
|
||||
hackathonsData,
|
||||
bankData,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue