diff --git a/package.json b/package.json
index be7e5e1b..a6925a52 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"@hackclub/icons": "^0.0.9",
"@hackclub/meta": "1.1.32",
"@hackclub/theme": "^0.3.3",
+ "@harelpls/use-pusher": "^7.2.1",
"@mdx-js/loader": "^1.6.22",
"@next/mdx": "^12.2.0",
"@octokit/auth-app": "^3.6.1",
diff --git a/pages/_app.js b/pages/_app.js
index 2f68acfe..ecfeaabc 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,19 +1,27 @@
import React from 'react'
import Head from 'next/head'
-
import Analytics from "../components/analytics.js";
-
import Meta from '@hackclub/meta'
import '@hackclub/theme/fonts/reg-bold.css'
import theme from '../lib/theme'
import { ThemeProvider } from 'theme-ui'
+import { PusherProvider } from '@harelpls/use-pusher';
+
+const pusherConfig = {
+ clientKey: "de6cd13556d73c05beed",
+ appId: "1435548",
+ cluster: "us2",
+ useTLS: true,
+};
const App = ({ Component, pageProps }) => (
+
+
)
export default App
diff --git a/pages/index.js b/pages/index.js
index 1048976b..fa60f9cb 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -26,6 +26,8 @@ import FooterImgFile from '../public/home/footer.png'
import GoldenTrainImgFile from '../public/home/golden-train.png'
import Slack from '../components/slack'
import Announcement from '../components/announcement'
+import { useChannel, useEvent } from '@harelpls/use-pusher'
+import { useState } from 'react'
// import { timeSince } from '../lib/dates'
let Highlight = styled(Text)`
@@ -129,381 +131,397 @@ const Stage = ({ icon, color, name, desc, children, ...props }) => (
)
-const Page = () => (
- <>
-
-
-
-
-
-
-
- {
+ const [cssSnippets, setCssSnippets] = useState([]);
+ const channel = useChannel("css");
+ useEvent(channel, "new", async ({ message }) => {
+ console.log(message)
+ setCssSnippets([...cssSnippets, message]);
+ });
+ return (
+ <>
+
+
+
+
+
+
+
+
-
+ />
-
-
-
+
- Don’t run your coding club alone.
-
- Make it a{' '}
-
- Hack Club
-
- .
-
-
-
-
- Hack Club is a nonprofit network of high school coding clubs and
- makers around the world. Applications are now open.
-
-
-
-
-
-
-
-
- Hackers onboard The Hacker Zephyr
-
-
-
-
-
-
- The rundown
-
-
- Clubs discovering the{' '}
-
- joy of code
-
- .
-
-
- Hack Clubs typically meet for 1.5 hours each week in high schools,
- makerspaces, community centers, churches, and any other venue where
- teenagers can gather. As a club leader, you get members (mostly
- beginners) started on something to learn/create, then members work at
- their own pace, building websites, apps, & games, and presenting them
- at the end.
-
-
-
-
-
- 1
-
-
-
- A group of teens, many beginners, gather to start coding.
-
- The leader (that’s you!) presents for a few minutes, getting the
- group started building something new.
-
-
- 2
-
- Everyone gets hacking, individually. Not hacking
- bank accounts, being creative and{' '}
- making something awesome.
+ Don’t run your coding club alone.
-
- 3
+ Make it a{' '}
+
+ Hack Club
-
- To end, everyone demos their work.
- As a leader, you’re cultivating a community of makers. Each member
- showing off their work builds momentum & motivation.
-
-
-
-
-
- Go beyond club meetings.
+ .
+
+
- Hack Clubs attend and run{' '}
- hackathons like{' '}
- Windy City Hacks &{' '}
-
- Hack the Fog
-
- , run summer programs like{' '}
-
- Hack Camp
-
- , and compete in events like the{' '}
-
- Congressional App Challenge
-
- . The hack’s the limit.
+ Hack Club is a nonprofit network of high school coding clubs
+ and makers around the world.{' '}
+ Applications are now open.
-
-
-
-
-
-
-
- ~ Welcome to Hackerland ~
-
-
- By the students, for the students.
-
-
- Learning to code is like gaining a superpower — turning you from a
- consumer of technology into a creator. It shouldn’t be taught like a
- class — it should be a creative, inclusive space. To foster this
- environment,{' '}
- every Hack Club is student-led &
- members make self-directed projects.
-
-
+
+
+
+
+
+
- Our philosophy →
-
-
-
-
-
-
-
+ Hackers onboard The Hacker Zephyr
+
+
+
+
+
- Hit the ground running
+ The rundown
- Get your club{' '}
+ Clubs discovering the{' '}
- going & growing
+ joy of code
- with Hack Club.
+ .
-
-
+ Hack Clubs typically meet for 1.5 hours each week in high schools,
+ makerspaces, community centers, churches, and any other venue where
+ teenagers can gather. As a club leader, you get members (mostly
+ beginners) started on something to learn/create, then members work
+ at their own pace, building websites, apps, & games, and presenting
+ them at the end.
+
+
+
+
+
+ 1
+
+
+
+ A group of teens, many beginners, gather to start coding.
+
+ The leader (that’s you!) presents for a few minutes, getting the
+ group started building something new.
+
+
+ 2
+
+
+ Everyone gets hacking, individually. Not
+ hacking bank accounts, being creative and{' '}
+ making something awesome.
+
+
+ 3
+
+
+ To end, everyone demos their work.
+ As a leader, you’re cultivating a community of makers. Each
+ member showing off their work builds momentum & motivation.
+
+
+
+
+
+ Go beyond club meetings.
+
+
+ Hack Clubs attend and run{' '}
+ hackathons like{' '}
+ Windy City Hacks &{' '}
+
+ Hack the Fog
+
+ , run summer programs like{' '}
+
+ Hack Camp
+
+ , and compete in events like the{' '}
+
+ Congressional App Challenge
+
+ . The hack’s the limit.
+
+
+
+
+
+
+
+
+ ~ Welcome to Hackerland ~
+
+
+ By the students, for the students.
+
+
+ Learning to code is like gaining a superpower — turning you from a
+ consumer of technology into a creator. It shouldn’t be taught like a
+ class — it should be a creative, inclusive space. To foster this
+ environment,{' '}
+ every Hack Club is student-led &
+ members make self-directed projects.
+
+
+
+
+
+
+
+
-
- In our Slack community, you’ll
- be invited to a space for Hack Club leaders to ask
- questions & chat, share projects, & attend weekly live events.
-
- }
- />
-
- Come prepared to every meeting with over 100{' '}
- workshops (3 years’
- worth!) that guide your club members through making fun,
- creative projects.
-
- }
- >
- {/*
+
+ Hit the ground running
+
+
+ Get your club{' '}
+
+ going & growing
+
+ with Hack Club.
+
+
+
+
+ In our Slack community, you’ll be
+ invited to a space for Hack Club leaders to ask questions
+ & chat, share projects, & attend weekly live events.
+
+ }
+ />
+
+ Come prepared to every meeting with over 100{' '}
+ workshops (3
+ years’ worth!) that guide your club members through making
+ fun, creative projects.
+
+ }
+ >
+ {/*
@@ -521,229 +539,233 @@ const Page = () => (
sx={{ maxWidth: [null, 332] }}
/>
*/}
-
- Get amazing stickers for marketing
- your club shipped directly to you & your club members.
-
- }
- color="green"
- icon="sticker"
- >
-
- Use our 501(c)(3) status and a restricted fund with{' '}
- Hack Club Bank to fundraise, accept
- donations, buy things!
-
- }
- />
-
- From Hack Night to{' '}
- AMAs
- {' to '}
-
- weirder events
-
- , the Slack community has live events for leaders & members
- alike every week.
-
- }
- icon="event-code"
- color="blue"
- >
-
- Free subscriptions to Figma Pro, Postman, and more for running a
- great club.
-
- }
- />
- {/*
+ Get amazing stickers for
+ marketing your club shipped directly to you & your club
+ members.
+
+ }
+ color="green"
+ icon="sticker"
+ >
+
+ Use our 501(c)(3) status and a restricted fund with{' '}
+ Hack Club Bank to fundraise, accept
+ donations, buy things!
+
+ }
+ />
+
+ From Hack Night to{' '}
+ AMAs
+ {' to '}
+
+ weirder events
+
+ , the Slack community has live events for leaders & members
+ alike every week.
+
+ }
+ icon="event-code"
+ color="blue"
+ >
+
+ Free subscriptions to Figma Pro, Postman, and more for running
+ a great club.
+
+ }
+ />
+ {/* */}
-
-
- When established CS clubs join, they get all the Hack Club
- benefits: Zoom Pro, stickers, our Slack community,{' '}
- workshops, the
- works. They’re welcome to use the “Hack Club” name or keep
- their existing one.
-
- }
- as="aside"
- sx={{
- display: 'grid',
- gridGap: [0, 4],
- gridTemplateColumns: [null, 'auto 1fr'],
- alignItems: 'start',
- justifyContent: 'start',
- bg: 'rgba(255,88,88,0.125)',
- p: [3, 4],
- mt: [3, 4],
- borderRadius: 'extra',
- span: { transform: 'none', width: 'min-intrinsic' },
- svg: { color: 'white' }
- }}
- />
-
-
-
-
-
-
- Next steps
-
-
- Apply today to{' '}
-
+
+ When established CS clubs join, they get all the Hack Club
+ benefits: Zoom Pro, stickers, our Slack community,{' '}
+ workshops, the
+ works. They’re welcome to use the “Hack Club” name or keep
+ their existing one.
+
+ }
+ as="aside"
sx={{
- borderRadius: 'default',
- px: 2,
- ml: [-2, 0],
- whiteSpace: ['wrap', 'nowrap'],
- color: 'white',
- bg: '#6f31b7'
- }}
- >
- start your club
-
- .
-
-
- It’s all-online, free, & takes under an hour. We’ll help from there!
-
- a, > div': {
+ display: 'grid',
+ gridGap: [0, 4],
+ gridTemplateColumns: [null, 'auto 1fr'],
+ alignItems: 'start',
+ justifyContent: 'start',
+ bg: 'rgba(255,88,88,0.125)',
+ p: [3, 4],
+ mt: [3, 4],
borderRadius: 'extra',
- boxShadow: 'elevated',
- px: [3, null, 4],
- py: [4, null, 5]
- },
- span: {
- boxShadow:
- '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
- },
- svg: { fill: 'currentColor' }
- }}
- >
-
+
+
+
+
+
+
+ Next steps
+
+
+ Apply today to{' '}
+
+ start your club
+
+ .
+
+
+ It’s all-online, free, & takes under an hour. We’ll help from there!
+
+ a, > div': {
+ borderRadius: 'extra',
+ boxShadow: 'elevated',
+ px: [3, null, 4],
+ py: [4, null, 5]
+ },
+ span: {
+ boxShadow:
+ '-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
+ },
+ svg: { fill: 'currentColor' }
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-)
+ }
+ ${cssSnippets.join("\n")}
+ `}
+
+
+
+ )
+}
export default Page
diff --git a/yarn.lock b/yarn.lock
index ff8b64ff..01cb3151 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -503,6 +503,15 @@
resolved "https://registry.npmjs.org/@hackclub/theme/-/theme-0.3.3.tgz"
integrity sha512-+K7jVUArvpziophJCCGB6vlQ7uvsm6VQnUnhHSMnF22s681Wgv6M0w12lUJBOevTu3KtgJVCmYlY888uvdaLvQ==
+"@harelpls/use-pusher@^7.2.1":
+ version "7.2.1"
+ resolved "https://registry.yarnpkg.com/@harelpls/use-pusher/-/use-pusher-7.2.1.tgz#f1f133c09f971b89dc692dc2a11a4198ee003dce"
+ integrity sha512-e94JTkNsaVKDnB6j6j4P3RRAGSNtMN6V+f3Or+gwe3TsdLUlpeGrw7JchIsSLmsxYvnJwS4YRees4fbuHLeQFQ==
+ dependencies:
+ dequal "^2.0.1"
+ invariant "^2.2.4"
+ pusher-js "^7.0.0"
+
"@humanwhocodes/config-array@^0.9.2":
version "0.9.2"
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.2.tgz#68be55c737023009dfc5fe245d51181bb6476914"
@@ -1657,6 +1666,11 @@ deprecation@^2.0.0, deprecation@^2.3.1:
resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
+dequal@^2.0.1:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+ integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
detab@2.0.4:
version "2.0.4"
resolved "https://registry.npmjs.org/detab/-/detab-2.0.4.tgz"
@@ -2415,6 +2429,13 @@ internal-slot@^1.0.3:
has "^1.0.3"
side-channel "^1.0.4"
+invariant@^2.2.4:
+ version "2.2.4"
+ resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+ integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+ dependencies:
+ loose-envify "^1.0.0"
+
is-alphabetical@1.0.4, is-alphabetical@^1.0.0:
version "1.0.4"
resolved "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz"
@@ -2816,7 +2837,7 @@ lodash@^4.17.11, lodash@^4.17.19, lodash@^4.17.21:
resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -3256,6 +3277,13 @@ punycode@^2.1.0:
resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"
integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+pusher-js@^7.0.0:
+ version "7.0.6"
+ resolved "https://registry.yarnpkg.com/pusher-js/-/pusher-js-7.0.6.tgz#4ff0066eda7eb99e1ba48c3e211189e72329ce2d"
+ integrity sha512-I44FTlF2OfGNg/4xcxmFq/JqFzJswoQWtWCPq+DkCh31MFg3Qkm3bNFvTXU+c5KR19TyBZ9SYlYq2rrpJZzbIA==
+ dependencies:
+ tweetnacl "^1.0.3"
+
qs@~6.5.2:
version "6.5.2"
resolved "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz"
@@ -3852,6 +3880,11 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
resolved "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz"
integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
+tweetnacl@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-1.0.3.tgz#ac0af71680458d8a6378d0d0d050ab1407d35596"
+ integrity sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==
+
type-check@^0.4.0, type-check@~0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"