diff --git a/components/cards/card-model.js b/components/cards/card-model.js deleted file mode 100644 index 08282c07..00000000 --- a/components/cards/card-model.js +++ /dev/null @@ -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 -}) => ( - // - - {github_link != null ? ( - - {stars} ⭐️ - - - - - ) : ( - <> - )} - {children} - - - // -) - -export default CardModel diff --git a/components/cards/events.js b/components/cards/events.js deleted file mode 100644 index 95a2a962..00000000 --- a/components/cards/events.js +++ /dev/null @@ -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 ( - - Events - - - - 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 AMA with them.{' '} - - {/* - Get involved - - - - Join an event - - - Plan and host an event - - */} - - - - - - - - ) -} diff --git a/components/cards/mailing-list.js b/components/cards/mailing-list.js deleted file mode 100644 index b1e25ec5..00000000 --- a/components/cards/mailing-list.js +++ /dev/null @@ -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 = () => ( - -) - -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 ( - - {/* */} - - Mailing List - - - 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. - - -
- - -
-
- - -
- - - - - {submitted && ( - - - Signed up! - - )} - {/* */} - - ) -} - -export default MailingList diff --git a/components/cards/workshops.js b/components/cards/workshops.js deleted file mode 100644 index ce0643b2..00000000 --- a/components/cards/workshops.js +++ /dev/null @@ -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 ( - - Workshops - - - - A collection of community-contributed, self-guided coding tutorials - + ideas. Learn to code by building, one project at a time. - - - Get involved - - - - Write and submit a workshop - - - Follow a workshop and build a project - - - - - {/* - - Click for random workshop: {workshop} 👀 - - */} - - - ) -} diff --git a/components/carousel-cards.js b/components/carousel-cards.js deleted file mode 100644 index 52f86cce..00000000 --- a/components/carousel-cards.js +++ /dev/null @@ -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 ( - - - - - - {title} - - - {description} - - - - - ) -} diff --git a/components/carousel.js b/components/carousel.js deleted file mode 100644 index de3867d7..00000000 --- a/components/carousel.js +++ /dev/null @@ -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 ( - // - - {pageIsVisible && ( - - {() => ( - setSpeed(3)} - onMouseOut={() => setSpeed(6)} - > - - - - - - - - - )} - - )} - - // - ) -} diff --git a/components/cards/bank.js b/components/index/cards/bank.js similarity index 81% rename from components/cards/bank.js rename to components/index/cards/bank.js index f1a3c878..515a24dd 100644 --- a/components/cards/bank.js +++ b/components/index/cards/bank.js @@ -46,18 +46,30 @@ export default function Bank({ data }) { - 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! Get involved - + Run your event/organziation on Hack Club Bank - @@ -68,7 +80,7 @@ export default function Bank({ data }) { ( + // + + {github_link != null ? ( + + {position == 'bottom' ? ( + + + + + {stars != null ? {stars} ⭐️ : <>} + + ) : ( + + {stars != null ? {stars} ⭐️ : <>} + + + + + )} + + ) : ( + <> + )} + {children} + + + // +) + +export default CardModel diff --git a/components/cards/clubs.js b/components/index/cards/clubs.js similarity index 52% rename from components/cards/clubs.js rename to components/index/cards/clubs.js index 1436dfe9..a52477d8 100644 --- a/components/cards/clubs.js +++ b/components/index/cards/clubs.js @@ -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' }} > Network of coding clubs - + 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 - Join a Hack Club near you - Start a club + + Join a Hack Club near you + + + Start a club + - + diff --git a/components/cards/epoch.js b/components/index/cards/epoch.js similarity index 95% rename from components/cards/epoch.js rename to components/index/cards/epoch.js index 7a63bb46..f2a4b114 100644 --- a/components/cards/epoch.js +++ b/components/index/cards/epoch.js @@ -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 - + Plan the hackathon @@ -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 diff --git a/components/index/cards/events.js b/components/index/cards/events.js new file mode 100644 index 00000000..4a62cc66 --- /dev/null +++ b/components/index/cards/events.js @@ -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 ( + + + Virtual Events + + + + + Hack Clubbers run events that don’t suck. From live coding sessions + to movie nights, we like to hangout on calls. + + + Sometimes, we also invite someone we really want to speak to (like{' '} + + Sal Khan + + ,{' '} + + George Hotz + + , and{' '} + + Lady Ada + + ) and host an{' '} + + AMA + {' '} + with them.{' '} + + + + + + + + + ) +} diff --git a/components/cards/hackathons.js b/components/index/cards/hackathons.js similarity index 93% rename from components/cards/hackathons.js rename to components/index/cards/hackathons.js index 3c72a2ac..db5f21af 100644 --- a/components/cards/hackathons.js +++ b/components/index/cards/hackathons.js @@ -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 }) { diff --git a/components/inspect.js b/components/index/cards/inspect.js similarity index 100% rename from components/inspect.js rename to components/index/cards/inspect.js diff --git a/components/cards/sinerider.js b/components/index/cards/sinerider.js similarity index 61% rename from components/cards/sinerider.js rename to components/index/cards/sinerider.js index e6f4a504..5d77efb4 100644 --- a/components/cards/sinerider.js +++ b/components/index/cards/sinerider.js @@ -16,7 +16,7 @@ import Buttons from './button' /** @jsxImportSource theme-ui */ -export default function Sinerider({stars}) { +export default function Sinerider({ stars }) { return ( - 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! Get involved - Create art for the game - Be a scene maker + + Create art for the game + + + Be a scene maker + - {/* + {/* ) -} \ No newline at end of file +} diff --git a/components/cards/sprig-console.js b/components/index/cards/sprig-console.js similarity index 97% rename from components/cards/sprig-console.js rename to components/index/cards/sprig-console.js index 77a51032..2ce1efe6 100644 --- a/components/cards/sprig-console.js +++ b/components/index/cards/sprig-console.js @@ -21,7 +21,6 @@ export default function SprigConsole({ stars }) { diff --git a/components/cards/sprig.js b/components/index/cards/sprig.js similarity index 90% rename from components/cards/sprig.js rename to components/index/cards/sprig.js index 0e77fba0..0f36a970 100644 --- a/components/cards/sprig.js +++ b/components/index/cards/sprig.js @@ -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 ( - New from the gallery... - + + New from{' '} + + the gallery + + ... + + diff --git a/components/cards/tilt.js b/components/index/cards/tilt.js similarity index 100% rename from components/cards/tilt.js rename to components/index/cards/tilt.js diff --git a/components/index/cards/workshops.js b/components/index/cards/workshops.js new file mode 100644 index 00000000..911c5775 --- /dev/null +++ b/components/index/cards/workshops.js @@ -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 }) => ( + + + + + {name} + + {description} + + + {/* {`${name} */} + + + +) + +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 ( + + Workshops + + + A collection of community-contributed, self-guided coding tutorials + + ideas. Learn to code by building, one project at a time. + + + + + Get involved + + + Follow a workshop and build a project + + + Write and submit a workshop + + + + + + + + + + {/* + + Click for random workshop: {workshop} 👀 + + */} + + ) +} diff --git a/components/index/carousel-cards.js b/components/index/carousel-cards.js new file mode 100644 index 00000000..e19164bc --- /dev/null +++ b/components/index/carousel-cards.js @@ -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 ( + + + + + + {title} + + + {description} + + + + + + ) +} diff --git a/components/index/carousel.js b/components/index/carousel.js new file mode 100644 index 00000000..f96c3124 --- /dev/null +++ b/components/index/carousel.js @@ -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 ( + // + + {pageIsVisible && ( + + + + Here's a few projects you could get involved in: + + + + {() => ( + setSpeed(3)} + onMouseOut={() => setSpeed(6)} + > + + + + + + + + + )} + + + )} + + // + ) +} diff --git a/components/events.js b/components/index/events.js similarity index 71% rename from components/events.js rename to components/index/events.js index 6d945d45..4ce6df3e 100644 --- a/components/events.js +++ b/components/index/events.js @@ -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" > {/* @@ -116,9 +118,9 @@ export default function Events({ events }) { upcoming events */} - - Events happening this month - + {/* + {events.map(e => !past(e.end)) ? <>Upcoming events : <>} + */} - {events.map(event => ( - - ))} + {events.map(event => + !past(event.end) ? : <> + )} + + We just had these events:{' '} + {events.map(event => + past(event.end) ? ( + + + {event.title} + + + ) : ( + <> + ) + )}{' '} + {/* *like George Hotz, Dylan Field, Sal Khan, and more */} diff --git a/components/index/github.js b/components/index/github.js new file mode 100644 index 00000000..bd2dd3c0 --- /dev/null +++ b/components/index/github.js @@ -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 ( + + + + + {user != null ? ( + user != 'dependabot[bot]' ? ( + user != 'github-actions[bot]' ? ( + + ) : ( + <> + ) + ) : ( + <> + ) + ) : ( + <> + )} + {user != null ? ( + user != 'dependabot[bot]' ? ( + user != 'github-actions[bot]' ? ( + {user} + ) : ( + <> + ) + ) : ( + <> + ) + ) : ( + <> + )} + {user != null ? ( + user != 'dependabot[bot]' ? ( + user != 'github-actions[bot]' ? ( + + {message} + + ) : ( + <> + ) + ) : ( + <> + ) + ) : ( + <> + )} + {user != null ? ( + user != 'dependabot[bot]' ? ( + user != 'github-actions[bot]' ? ( + + + + ) : ( + <> + ) + ) : ( + <> + ) + ) : ( + <> + )} + + + + + ) +} diff --git a/pages/index.js b/pages/index.js index 3261e67d..b1c9104c 100644 --- a/pages/index.js +++ b/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 }) => ( - - - - {user != null ? ( - user != 'dependabot[bot]' ? ( - user != 'github-actions[bot]' ? ( - - ) : ( - <> - ) - ) : ( - <> - ) - ) : ( - <> - )} - {user != null ? ( - user != 'dependabot[bot]' ? ( - user != 'github-actions[bot]' ? ( - {user} - ) : ( - <> - ) - ) : ( - <> - ) - ) : ( - <> - )} - {user != null ? ( - user != 'dependabot[bot]' ? ( - user != 'github-actions[bot]' ? ( - {message} - ) : ( - <> - ) - ) : ( - <> - ) - ) : ( - <> - )} - {type == 'CreateEvent' ? ( - user != 'dependabot[bot]' ? ( - user != 'github-actions[bot]' ? ( - {message} - ) : ( - <> - ) - ) : ( - <> - ) - ) : ( - <> - )} - - - - {message} - - - - ) - return ( <> {/* */} - - + Welcome to Hack Club @@ -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{' '} { + setHover(false) + !reveal ? setReveal(true) : setReveal(false) + }} + sx={{ + color: 'inherit', + '&:hover': { + cursor: 'help' + } + }} + > + teen makers + {' '} + around the world practice the + { - setHover(false) - !reveal ? setReveal(true) : setReveal(false) - }} + href="/philosophy" + target="_blank" + rel="noopener" > hacker ethic + hacker ethic{' '} - by building things we care about together. + by using code to build things we care about together. + + + Hackers at Assemble in SF + + {/* */} - + + + + The rundown + + + Join us in discovering the joy of code + + + 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{' '} + + hacker ethic + + . + + + + + + + + + 1 + + + Connect virtually with other teenagers + We're united by our love for coding but talk about and do + everything else too. + {/* */} + + + + + + 2 + + + Gather IRL with other makers Meet other + Hack Clubbers in your community to code and make things, be + it once a week after school (at{' '} + Hack Clubs), a one-time 48 hour + event (hackathons), or + anything in-between! + {/* */} + + + + + + 3 + + + Build open-source learning tools + Contribute to projects like a game engine, daily streak + system, graphing game, and more! + {/* */} + + + + + + + + */} {/* */} {/* */} - + Hack Clubbers @@ -499,7 +767,8 @@ function Page({ > Join us → */} - + + {/* */} {/* */} {/* Hack Clubbers - Gather IRL to discover the{' '} - joy of code - + */} - - + @@ -678,6 +948,8 @@ function Page({ 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,