diff --git a/components/dot.js b/components/dot.js new file mode 100644 index 00000000..0985e215 --- /dev/null +++ b/components/dot.js @@ -0,0 +1,30 @@ +import { Text } from "theme-ui" +import { keyframes } from '@emotion/react' + +const flashing = keyframes({ + from: { opacity: 0 }, + '50%': { opacity: 1 }, + to: { opacity: 0 } +}) + +export default function Dot() { + return ( + + ) +} \ No newline at end of file diff --git a/components/index/cards/bank.js b/components/index/cards/bank.js index 515a24dd..aa8518ae 100644 --- a/components/index/cards/bank.js +++ b/components/index/cards/bank.js @@ -37,31 +37,59 @@ export default function Bank({ data }) { - + Hack Club Bank - + - Tool developed to make organising easier: a fiscal sponsor and banking platform in one to help you organize - clubs, hackathons, and more! + Tool developed to make organising easier: a fiscal sponsor and + banking platform in one to help you organize clubs, hackathons, + and more! - - Get involved - - - + {' '} + - Run your event/organziation on Hack Club Bank - - + + + Network of coding clubs @@ -58,12 +60,19 @@ export default function Clubs() { things. You can start with no experience and build and ship a project every meeting. - + Get involved { const difference = +new Date(`2022-12-30T23:00:00.000Z`) - +new Date() @@ -136,7 +130,20 @@ export default function Epoch() { ) }) return ( - + + Happening Now + + - + {timer.length ? ( {timer} @@ -164,19 +169,18 @@ export default function Epoch() { <> )} - + - Join us this winter as 150+ teenage hackers from all around the world - travel to Delhi, India for Epoch — Hack Club’s first hackathon - outside the US! We’ll build the unexpected, share what we’ve learnt + Join us this winter as 150+ teenage hackers from all around the + world travel to Delhi, India for Epoch! Together, we’ll build the unexpected, share what we’ve learnt in 2022, and experience the thrill of being in-person together. @@ -189,7 +193,7 @@ export default function Epoch() { link="https://epoch.hackclub.com" icon="post" > - Sign up and attend EPOCH + Sign up and attend Epoch - Plan the hackathon + Help plan the hackathon + ) } diff --git a/components/index/cards/events.js b/components/index/cards/events.js index 4a62cc66..dda66e02 100644 --- a/components/index/cards/events.js +++ b/components/index/cards/events.js @@ -14,6 +14,7 @@ import { } from 'theme-ui' import Buttons from './button' import Event from '../events' + /** @jsxImportSource theme-ui */ export default function Events({ data, stars, events }) { @@ -28,7 +29,7 @@ export default function Events({ data, stars, events }) { backgroundSize: '100% auto' }} > - + Virtual Events diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js index db5f21af..77b9023a 100644 --- a/components/index/cards/hackathons.js +++ b/components/index/cards/hackathons.js @@ -32,7 +32,7 @@ export default function Hackathons({ data, stars }) { github_link="https://github.com/hackclub/hackathons" // background="https://hackclub.com/bank/bg.webp" > - High School Hackathons + High School Hackathons @@ -40,7 +40,8 @@ export default function Hackathons({ data, stars }) { world. From an online community of organizers to free stickers and more!{' '} - + Get involved @@ -74,7 +75,7 @@ export default function Hackathons({ data, stars }) { diff --git a/components/index/cards/sinerider.js b/components/index/cards/sinerider.js index 5d77efb4..c7d47778 100644 --- a/components/index/cards/sinerider.js +++ b/components/index/cards/sinerider.js @@ -30,45 +30,56 @@ export default function Sinerider({ stars }) { backgroundPosition: 'center center', backgroundRepeat: 'no-repeat' }} - position="bottom" + position={[null, "bottom", "bottom"]} > - + - + 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! - + Get involved Create art for the game Be a scene maker + + View a game preview + diff --git a/components/index/cards/slack.js b/components/index/cards/slack.js index 41b1143c..72f1ac1d 100644 --- a/components/index/cards/slack.js +++ b/components/index/cards/slack.js @@ -17,37 +17,10 @@ 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 Event from '../events' +import Dot from '../../dot' /** @jsxImportSource theme-ui */ -const flashing = keyframes({ - from: { opacity: 0 }, - '50%': { opacity: 1 }, - to: { opacity: 0 } -}) - -function Dot() { - return ( - - ) -} - // const Cover = () => ( // ( left: 0, right: 0, backgroundImage: t => t.util.gx('cyan', 'purple'), - opacity: 0.9, + opacity: 0.8, zIndex: 1 }} /> ) -export default function Slack({ data, slackKey }) { +export default function Slack({ data, slackKey, events }) { const hasMounted = useHasMounted() const prefersMotion = usePrefersMotion() @@ -168,101 +141,85 @@ export default function Slack({ data, slackKey }) { - - - - Live from Slack - - Total members: {data.total_members_count} - Daily messages: {data.messages_count_1d} - Online right now: {data.readers_count_1d} - - - - + Our online community - + - 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{' '} + Coding doesn't have to be a solidary activity. At Hack Club, we make + things together and in our Slack (similar to Discord, but better), + you'll find a group of{' '} {data.total_members_count}{' '} - {/* + + Sometimes, we also invite someone we really want to speak to (like{' '} + - {slackNum}{' '} - - {slackNum} - - - {slackNum} - - */} - fabulous people to talk to, active at all hours. - - - 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. - - - Come for the skills, stay for the friends! + Sal Khan + + ,{' '} + + George Hotz + + , and{' '} + + Lady Ada + + ) and host an{' '} + + AMA + {' '} + with them.{' '} + + - - {/* - + - Live from our Slack - - - */} + + + Live from Slack + + + Total members: {data.total_members_count} + + + Daily messages: {data.messages_count_1d} + + + Online today: {data.readers_count_1d} + + + + ) diff --git a/components/index/cards/sprig-console.js b/components/index/cards/sprig-console.js index 4e925521..78e89913 100644 --- a/components/index/cards/sprig-console.js +++ b/components/index/cards/sprig-console.js @@ -18,7 +18,6 @@ import fetcher from '../../../lib/fetcher' /** @jsxImportSource theme-ui */ export default function SprigConsole({ stars }) { - const { data: consoles } = useSWR( 'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests', fetcher, @@ -32,6 +31,7 @@ export default function SprigConsole({ stars }) { - {450 - consoleCount} consoles left + + {450 - consoleCount} consoles left + - - A console you can assemble and disassemble. Each kit includes + + + Play your own Sprig games on this console, which you can assemble and disassemble. Each kit includes parts needed for getting started with hardware engineering and embedded systems programming.{' '} - + Get involved @@ -64,23 +86,15 @@ export default function SprigConsole({ stars }) { icon="emoji" link="https://editor.sprig.hackclub.com" > - Make a game + Make a game and share it in the gallery - Share it in the gallery - - - Get a console - + */} @@ -104,11 +118,12 @@ export default function SprigConsole({ stars }) { src="https://cloud-7dokxtxhu-hack-club-bot.vercel.app/0sprig-light-top.png" sx={{ position: 'absolute', - right: '-120px', - top: 5, - width: '60%', + right: ['', '-50%', '-20%'], + top: ['', '25%', '15%'], + width: ['', '100%', '70%'], pointerEvents: 'none', - userSelect: 'none' + userSelect: 'none', + display: ['none', 'block', 'block'] }} /> diff --git a/components/index/cards/sprig.js b/components/index/cards/sprig.js index 09c32827..504e9c59 100644 --- a/components/index/cards/sprig.js +++ b/components/index/cards/sprig.js @@ -18,7 +18,7 @@ import RelativeTime from 'react-relative-time' /** @jsxImportSource theme-ui */ -function Game({ game, gameImage, gameImage1 }) { +function Game({ game, gameImage, gameImage1, ...props }) { return ( {game.title} @@ -196,7 +197,8 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) { Draw, make music, and craft games in our web-based JavaScript game editor. - + Get involved @@ -206,22 +208,22 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) { icon="emoji" link="https://editor.sprig.hackclub.com" > - Make a game + Build a Sprig game - Help review games - + */} - Work on the engine + Help review games or contribute to the engine - Answer questions in slack + Connect with other Sprig game developers + + + + ) +} diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js index 911c5775..dde627dc 100644 --- a/components/index/cards/workshops.js +++ b/components/index/cards/workshops.js @@ -18,13 +18,14 @@ import Buttons from './button' /** @jsxImportSource theme-ui */ -const WorkshopCard = ({ slug, name, description, img, height, section }) => ( +const WorkshopCard = ({ slug, name, description, img, height, section, ...props }) => ( - Workshops + Workshops A collection of community-contributed, self-guided coding tutorials + @@ -100,7 +101,7 @@ export default function Workshops({ data, stars }) { - + Get involved @@ -130,7 +131,7 @@ export default function Workshops({ data, stars }) { Find workshops - + diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js index e19164bc..3f8f4901 100644 --- a/components/index/carousel-cards.js +++ b/components/index/carousel-cards.js @@ -29,7 +29,7 @@ export default function CarouselCards({ position: 'relative', display: 'inline-block', transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out', - '&:hover': { transform: 'scale(1.0625)', boxShadow: 'elevated' } + '&:hover': { transform: 'scale(1.0625)' } }} > {title} @@ -70,7 +70,7 @@ export default function CarouselCards({ diff --git a/components/index/carousel.js b/components/index/carousel.js index 753fe5c6..b487fe4c 100644 --- a/components/index/carousel.js +++ b/components/index/carousel.js @@ -70,7 +70,7 @@ export default function Carousel() { titleColor="yellow" descriptionColor="white" title="Sprig" - description="Learn to code by making games in a JavaScript game editor." + 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" /> @@ -79,7 +79,7 @@ export default function Carousel() { titleColor="#FF4794" descriptionColor="white" title="EPOCH" - description="The most epic high school hackathon this new years!" + 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" /> @@ -97,16 +97,25 @@ export default function Carousel() { titleColor="red" textColor="white" title="Hack Club Bank" - description="Fiscal sponsorship and banking platform to organize anything." + description="Fiscal sponsor and banking platform to organize anything" img="https://emoji.slack-edge.com/T0266FRGM/bank-hackclub-dark/8c6f85f387365072.png" link="/bank" /> + @@ -116,7 +125,7 @@ export default function Carousel() { 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" + img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f4bb@2x.png" link="/hackathons" /> : <> )} - + We just had these events:{' '} - {events.map(event => + {events.slice(0, 3).map(event => past(event.end) ? ( @@ -51,8 +51,8 @@ export default function GitHub({ color: 'inherit', fontWeight: '400 !important', display: 'flex', - fontSize: '14px', - height: '25px', + fontSize: ['11px', '11px', '14px'], + height: ['15px', '15px', '25px'], position: 'relative', alignItems: 'center' }} @@ -113,7 +113,7 @@ export default function GitHub({ user != 'github-actions[bot]' ? ( diff --git a/components/nav.js b/components/nav.js index 341817e4..6c555c14 100644 --- a/components/nav.js +++ b/components/nav.js @@ -111,7 +111,7 @@ const layout = props => display: flex; justify-content: flex-end; position: absolute; - left: 75%; + left: 65%; transform: translateX(-50%); } a { diff --git a/pages/index.js b/pages/index.js index c0ba161b..d53901dc 100644 --- a/pages/index.js +++ b/pages/index.js @@ -46,6 +46,7 @@ import Icon from '../components/icon' import GitHub from '../components/index/github' import Photo from '../components/photo' import ReactTooltip from 'react-tooltip' +import Winter from '../components/index/cards/winter' function Page({ hackathonsData, @@ -64,63 +65,21 @@ function Page({ let [gameImage1, setGameImage1] = useState('') let [reveal, setReveal] = useState(false) const [hover, setHover] = useState(true) - // let [slackNum, setSlackNum] = useState(22594) - let [slack, setSlack] = useState(22594) let [github, setGithub] = 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, 30000) - }, []) + // useEffect(() => { + // function hehe() { + // setKey(Math.random()) + // setGithub(Math.floor(Math.random() * gitHubDataLength)) + // console.log(gitHubData[github]) + // } + // setInterval(hehe, 30000) + // }, []) const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') - // console.log(gitHubData) - // console.log(slackData) - // useEffect(() => { - // setSlack(slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0] - // .total_members_count) - // }) - // useEffect(() => { - - // const add = setTimeout(() => { - // setSlack(x => x + 1) - // setSlackNum(slack) - // console.log(slackNum) - // }, Math.floor((Math.random() * (5 - 2) + 1) * 10000)) - - // return () => clearTimeout(add) - - // }, [slack]) - - // useEffect(() => { - // if (typeof window !== 'undefined') { - // // Check if it's open - // console.log('Is DevTools open:', devtools.isOpen) - - // // Check it's orientation, `undefined` if not open - // console.log('DevTools orientation:', devtools.orientation) - - // // Get notified when it's opened/closed or orientation changes - // window.addEventListener('devtoolschange', event => { - // console.log('Is DevTools open:', event.detail.isOpen) - // console.log('DevTools orientation:', event.detail.orientation) - // }) - - // 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` - // } - // }) 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` }, []) @@ -188,6 +147,30 @@ function Page({ } }, [hover]) + const [count, setCount] = useState(0) + + let photos = [ + '/home/hero.png', + '/home/golden-train.png', + '/home/flagship_4.jpg', + '/home/meetings.png', + '/home/flagship_megan.png', + '/hackathons/mahacks.jpeg' + ] + + let alt = [ + 'Flagship meeting with club leaders, 2019', + 'Hack Clubbers on cross country train trip, Zephyr', + 'Hack Clubbers at Flagship, 2019', + 'Virtual Hack Club meeting, 2022', + 'Hack Clubber giving a talk on sponsorship', + 'Hack Clubber organized MA Hacks' + ] + + if (count == photos.length) { + setCount(0) + } + return ( <> - {/* */} The rundown - + Join us in discovering the joy of code setCount(count + 1)} > - + + + + + + + + + + 1 - Connect virtually with other teenagers + Connect with other teenage coders We're united by our love for coding but talk about and do everything else too. - {/* */} 2 @@ -559,26 +578,6 @@ function Page({ Hack Clubs), a one-time 48 hour event (hackathons), or anything in-between! - {/* */} 3 @@ -623,26 +622,6 @@ function Page({ Build open-source learning tools Contribute to projects like a game engine, daily streak system, graphing game, and more! - {/* */} - {/* - A Hack Clubber is someone that - - - Discovers technology by building things for the joy of it - - - Here, teenagers 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. - */} - {/* */} - {/* */} Hack Clubbers - + Connect with each other from around the world - - - {/* */} + + + - {/* */} Hack Clubbers - + Build open source tools Hack Clubbers - + Create spaces to have fun with code - {/* - joy of code - */} - + - - + {/* */} + - Let's quickly review + Let's recap - + Find your place with{' '} a, > div': { @@ -900,7 +851,7 @@ function Page({ - - + */} + + @@ -1018,7 +971,9 @@ export async function getStaticProps() { let raised = initialBankData.raised / 100 - let slackData = await fetch('https://site-git-v4.hackclub.dev/api/slack').then(r => r.json()) + let slackData = await fetch( + 'https://site-git-v4.hackclub.dev/api/slack' + ).then(r => r.json()) console.log(slackData) bankData.push( @@ -1043,7 +998,9 @@ export async function getStaticProps() { gameTitle = game.map(r => r.title) - const hackathonsData = await fetch('https://hackathons.hackclub.com/api/events/upcoming').then(res => res.json()) + const hackathonsData = await fetch( + 'https://hackathons.hackclub.com/api/events/upcoming' + ).then(res => res.json()) let stars = await fetch('https://site-git-v4.hackclub.dev/api/stars').then( res => res.json() )