[ { "path": ".github/dependabot.yml", "content": "# To get started with Dependabot version updates, you'll need to specify which\n# package ecosystems to update and where the package manifests are located.\n# Please see the documentation for all configuration options:\n# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates\n\nversion: 2\nupdates:\n - package-ecosystem: 'bun'\n directory: '/'\n schedule:\n interval: 'weekly'\n\n - package-ecosystem: 'github-actions'\n directory: '/'\n schedule:\n interval: 'weekly'\n" }, { "path": ".github/workflows/attachment-warn.yml", "content": "name: Perhaps You Should Upload To CDN Instead?\n\non:\n pull_request:\n types: [opened, synchronize]\n\njobs:\n warn:\n runs-on: ubuntu-slim\n permissions:\n pull-requests: write\n steps:\n - uses: actions/github-script@v9\n continue-on-error: true\n with:\n # this checks via the octokit, because just using pull_requests.paths would warn on every single commit, regardless of the files changed if the PR has at least 1 attachment in it\n script: |\n // dont comment again if already commented\n const comments = await github.rest.issues.listComments({\n owner: context.repo.owner,\n repo: context.repo.repo,\n issue_number: context.issue.number\n });\n\n const existingComment = comments.data.find(c =>\n c.body.includes(\"Heyo, maybe upload these to a CDN instead\")\n );\n\n // unallowed file extensions\n const EXTENSIONS = [\n 'png','jpg','jpeg','gif','webp',\n 'webm','pdf','mp4','mov','zip',\n ];\n\n // paginate cause what if there's 100+ changed files, better safe than sorry\n const files = await github.paginate(\n github.rest.pulls.listFiles,\n {\n owner: context.repo.owner,\n repo: context.repo.repo,\n pull_number: context.issue.number,\n per_page: 100\n }\n );\n\n // check if any of the changed files have unallowed extension, and are not removed\n // only exclude removed files, since modifying/copying/etc has the same hit to the repo size as a new file\n const blobs = files.filter(f => {\n if (!f.filename.includes('.')) return false;\n const ext = f.filename.split('.').pop().toLowerCase();\n return EXTENSIONS.includes(ext) && f.status !== 'removed';\n });\n\n if (blobs.length === 0) {\n // if we already commented, but the files were removed, edit the comment to kinda mark as resolved\n if (existingComment) {\n await github.rest.issues.updateComment({\n owner: context.repo.owner,\n repo: context.repo.repo,\n comment_id: existingComment.id,\n body: `## ~~Heyo, maybe upload these to a CDN instead~~\\n\\nThis has been resolved now.`\n });\n return;\n }\n return\n };\n\n const prefix = `## Heyo, maybe upload these to a CDN instead\\n\\nImages, videos or any attachments can unnecessarily bloat the repository size. Consider uploading these files to [Hack Club CDN](https://cdn.hackclub.com/) instead, and using the CDN links instead.\\n\\n---\\n\\n### Files Detected:\\n\\n`;\n\n if (existingComment) {\n // Update existing comment with new file list\n await github.rest.issues.updateComment({\n owner: context.repo.owner,\n repo: context.repo.repo,\n comment_id: existingComment.id,\n body: `${prefix}${blobs.map(b => `- \\`${b.filename}\\``).join('\\n')}`\n });\n return;\n }\n\n // create comment if there are any attachments\n await github.rest.issues.createComment({ \n owner: context.repo.owner,\n repo: context.repo.repo,\n issue_number: context.issue.number,\n body: `${prefix}${blobs.map(b => `- \\`${b.filename}\\``).join('\\n')}`\n });\n" }, { "path": ".github/workflows/caniuse-update.yml", "content": "name: Update Browserslist database\n\non:\n workflow_dispatch:\n schedule:\n - cron: '0 2 1,15 * *'\n\npermissions:\n contents: write\n pull-requests: write\n\njobs:\n update-browserslist-database:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout repository\n uses: actions/checkout@v6\n with:\n fetch-depth: 0\n - name: Configure git\n run: |\n git config --global user.email \"action@github.com\"\n git config --global user.name \"GitHub Action\"\n - name: Update Browserslist database and create PR if applies\n uses: c2corg/browserslist-update-action@v2\n with:\n github_token: ${{ secrets.GITHUB_TOKEN }}\n branch: browserslist-update\n base_branch: main\n commit_message: 'build: update Browserslist db'\n title: 'build: update Browserslist db'\n body: Auto-generated by [browserslist-update-action](https://github.com/c2corg/browserslist-update-action/). Caniuse database has been updated. Review changes, merge this PR, and be merry.\n" }, { "path": ".github/workflows/ci.yml", "content": "name: CI\non:\n - push\n - pull_request\n\njobs:\n lint:\n name: Lint\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v6\n - uses: actions/setup-node@v6\n - uses: oven-sh/setup-bun@v2\n - run: bun install\n - run: bun run lint\n\n format:\n name: Format\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v6\n - uses: actions/setup-node@v6\n - uses: oven-sh/setup-bun@v2\n - run: bun install\n - run: bun run format:check\n" }, { "path": ".github/workflows/validate-team-json.yml", "content": "name: Validate Team JSON\n\non:\n push:\n paths:\n - 'public/team.json'\n pull_request:\n paths:\n - 'public/team.json'\n\njobs:\n validate:\n name: Validate team.json\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v6\n - name: Validate JSON format\n run: |\n if ! jq empty public/team.json 2>/dev/null; then\n echo \"Error: team.json is not valid JSON\"\n exit 1\n fi\n echo \"✓ team.json is valid JSON\"\n" }, { "path": ".gitignore", "content": ".now\n.env*\n.next\nnode_modules\n.DS_Store\npublic/sitemap.xml\n.vercel\n.vscode\nyarn-error.log\nbun.lockb\n.idea\n.yarn\n.yarnrc.yml\n.env*.local\ntsconfig.tsbuildinfo\nnext-env.d.ts" }, { "path": ".prettierignore", "content": ".next" }, { "path": ".prettierrc", "content": "{\n \"singleQuote\": true,\n \"trailingComma\": \"none\",\n \"arrowParens\": \"avoid\",\n \"printWidth\": 80,\n \"semi\": false\n}\n" }, { "path": "AGENT.md", "content": "# AGENT.md - Hack Club Site Development Guide\n\n## Commands\n\n- **Dev**: `bun run dev` (start development server)\n- **Build**: `bun run build` (production build)\n- **Lint**: `bun run lint` (Next.js ESLint)\n- **Format**: `bun run format` (Prettier formatting)\n- **Start**: `bun run start` (production server)\n- **Test**: No test framework configured\n\n## Code Style\n\n- **Imports**: Use relative imports (`../components/nav`), Theme UI components (`{ Box, Text }`)\n- **Formatting**: Single quotes, no semicolons, no trailing commas, 80 char width\n- **Components**: Functional components with destructured props, default exports\n- **Styling**: Theme UI `sx` prop for styling, styled components with @emotion/styled\n- **Types**: TypeScript enabled but strict mode off, prefer implicit typing\n- **Naming**: camelCase for variables/functions, PascalCase for components\n\n## Architecture\n\n- Next.js app with pages/ directory structure\n- MDX support for content pages\n- Theme UI for consistent styling with Hack Club theme\n- Components in components/ directory, modular cards in components/index/cards/\n- Static assets in public/\n- Configuration in next.config.mjs includes essential redirects/rewrites\n" }, { "path": "LICENSE.md", "content": "_Code under MIT License, assets may not be re-used or re-distributed._\n\n### MIT License\n\nCopyright 2026 The Hack Foundation\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n" }, { "path": "README.md", "content": "

\"Hack

\n

Hack Club's Site (v3)

\n

The source code for hackclub.com

\n\nHack Club's new website. This codebase is what runs on [hackclub.com](https://hackclub.com). For new developers getting started, run the following in your terminal:\n\n1. Download the code to your computer:\n\n ```bash\n git clone https://github.com/hackclub/site && cd site\n ```\n\n2. Install dependencies:\n\n ```bash\n bun install\n ```\n\n3. Start running the website on your computer:\n\n ```bash\n bun run dev\n ```\n\n4. Open up your web browser and go to [localhost:3000](http://localhost:3000)\n\n> [!NOTE]\n> There are a number of redirects and rewrites essential to the website's functionality, which you can see in [next.config.ts](./next.config.ts).\n\nPowered by [Next.js] with [MDX], [Theme UI], & [Hack Club Theme].\n\nCode under MIT License, assets may not be re-used or re-distributed.\n\n---\n\n

Building hackclub.com

\n\nJoin us in building Hack Club's homepage and show new hackers what Hack Club could be for them 💖.\n\nSee something that could be better? Make a PR! Have an easter egg idea? Make a PR! Is the site missing something? Make a PR! _(Do you see a trend? :))_\n\nIf you need to add content to the site, here's how you can:\n\n
Create a new card\n\"Screenshot\n\nMost things on the homepage are cards, modular components that can easily be added and removed according to relevancy to Hack Clubbers. There are 3 main sections: connection, open-source, and IRL community. Most new cards will likely fall within the first two sections!\n\nFirst, you can create a new file under [components/index/cards](components/index/cards/) with the name of your new event/project. Next add `import CardModel from './card-model'` and add whatever you want :) Finally, use a `` component (`import Buttons from './button'`) to highlight call-to-action buttons. If it's the main button, use the primary prop to add a background color!\n\nYour challenge: try and make the card as unique as possible, like a mini poster! Not sure where to start? Look at other cards on the page :)\n\n
\n\n
\nAdd to the carousel\n\n\"Screenshot\n\nIf there's a Hack Club or Hack Club community-led project (past or present) that Hack Clubbers can get involved in, please add it to [public/carousel.json](public/carousel.json) and add your card to the end of the json file. An example looks like this:\n\n```json\n{\n \"background\": \"dark\",\n \"titleColor\": \"white\",\n \"descriptionColor\": \"white\",\n \"title\": \"Hackers Wanted\",\n \"description\": \"Our open love letter to hackers\",\n \"img\": \"https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f4bb@2x.png\",\n \"link\": \"/hackers-wanted\"\n}\n```\n\n
\n\nEvery week, thousands of people visit hackclub.com. What story do you want to tell?\n\n_Have questions? Join us in [#hackclub-site-dev](https://hackclub.slack.com/archives/C036BTDGP43) and to learn more about the style guide at Hack Club check [this](https://hackclub.com/brand/) out_\n\n---\n\nHack Club, 2026. MIT License.\n\n[next.js]: https://nextjs.org\n[mdx]: https://mdxjs.com\n[theme ui]: https://theme-ui.com\n[hack club theme]: https://theme.hackclub.com\n" }, { "path": "components/AButton.ts", "content": "import { Button } from 'theme-ui'\n\nexport const AButton = Button as any\n" }, { "path": "components/analytics.tsx", "content": "import Script from 'next/script'\n\nconst Analytics = () => (\n \n)\n\nexport default Analytics\n" }, { "path": "components/announcement.tsx", "content": "import { keyframes } from '@emotion/react'\nimport Image from 'next/image'\nimport { Box, Card, Text } from 'theme-ui'\nimport Icon from './icon'\n\nexport const unfold = keyframes({\n from: { transform: 'scaleY(0)' },\n to: { transform: 'scaleY(100%)' }\n})\n\ntype AnnouncementProps = {\n caption?: string\n copy: string\n iconLeft?: string\n iconRight?: string\n imgSrc?: string\n imgAlt?: string\n color?: string\n textColor?: string\n sx?: any\n width?: number | string\n href?: string\n}\n\nconst Announcement = ({\n caption,\n copy,\n iconLeft,\n iconRight,\n imgSrc,\n imgAlt,\n color = 'accent',\n textColor = 'secondary',\n sx = {},\n width,\n ...props\n}: AnnouncementProps) => (\n \n {iconLeft && (\n \n )}\n {imgSrc && (\n \n \n \n )}\n \n {copy}\n {caption && (\n \n {' '}\n {caption}\n \n )}\n \n {iconRight && }\n \n)\n\nexport default Announcement\n" }, { "path": "components/announcements/amount.tsx", "content": "import Sparkles from '../sparkles'\n\nconst Amount = ({ amount }) => (\n \n {amount}\n \n)\n\nexport default Amount\n" }, { "path": "components/announcements/cta.tsx", "content": "import { Box, Button, Grid, Heading, Text } from 'theme-ui'\nimport Icon from '@hackclub/icons'\nimport NextLink from 'next/link'\nimport { thousands } from '../../lib/members'\n\nexport default function SlackCTA() {\n return (\n t.util.gx('yellow', 'orange'),\n color: 'white',\n py: [4, 5]\n }}\n >\n \n \n \n \n Teenager? New here? Welcome!\n \n \n Hack Club is a global community of high school makers & student-led\n coding clubs. We’ve got a 24/7 Slack chatroom of {thousands}k+\n teenagers learning to code & building amazing projects, & you’ll fit\n right in.\n \n
\n
\n \n \n \n \n \n \n )\n}\n" }, { "path": "components/announcements/elon.mdx", "content": "import Amount from './amount'\nimport Signature from '../signature'\n\n# Today, I’m proud to share: Elon Musk is donating to [Hack Club](https://hackclub.com).\n\nElon Musk is one of the most prolific and ambitious hackers of the last decade.\n\nIt was a huge honor last month to have Elon [spend an hour in an ask-me-anything call with our community of high schoolers](https://youtu.be/riru9OzScwk)—at one point he remarked we were “asking better questions than all the mainstream media” and called our community “very wholesome.”\n\n**Afterwards, Elon wanted to support Hack Club further.**\n\nWhen hackers see problems in the world, we don’t blame someone else: we try to take them on to solve. Elon is very selective about the nonprofits he supports and I’m proud Hack Club is one of them.\n\nSo…how will Hack Club invest $500,000? We want to use this to help 1,000 more students start and join Hack Clubs in their towns ([see the worldwide map](https://hackclub.com/map/)). For those already in Hack Club, we look to you to help us make a higher-quality experience. We plan to continue much of what we’re already doing (and [what I wrote about in January](https://zachinto2020.wordpress.com/2019/12/31/as-midnight-approaches/)): spending as little money as possible at all times, growing slowly, adding diverse staff to make Hack Club better (video game designers, software engineers, media producers, and more). We are pushing hard to try and make the [Hack Club Slack](https://hackclub.com/) the best place to be a teenager on the internet and expanding [HCB](https://hackclub.com/fiscal-sponsorship/).\n\nWe’ll be fully transparent in how we spend this money. One thing we’ve been working toward after winning the [Frank Grant](https://grant.frank.ly/) is open sourcing our finances. Hack Club HQ has been running on HCB since February, and starting today, [**you can see our finances publicly**](https://hcb.hackclub.com/hq). Through HCB, you can track how we spend every dollar of Elon’s gift. Soon, we’ll also launch [Frank’s](https://frank.ly/) transparency tools on [hackclub.com](https://hackclub.com/).\n\nHack Club’s mission is to build a new generation of hackers. This starts in high school, where Hack Club students learn to be technically proficient, build their friend network, learn to raise and spend money, and develop into kind, curious, thoughtful, optimistic, and honest leaders. And now Elon Musk is one of our largest supporters.\n\nTo every Hack Clubber: Elon is now supporting you and your work, so go forth and do amazing things. We can’t wait to show Elon what you make.\n\n\n\nZach Latta, Founder\n" }, { "path": "components/announcements/hcb-mobile.mdx", "content": "I’m Mohamad, a 17-year-old from the SF Bay Area, and I just shipped the official mobile app for HCB.\n\nIf you haven't heard of it, HCB is the financial backbone for over **6,500 teenager-led nonprofits**, clubs, and hackathons. We provide **501(c)(3) nonprofit** status, access to a bank account, a donation collection platform, and debit cards for thousands of young people trying to do good in their communities.\n\nHCB is currently processing an average of **$6 million per month** (over $80M in its lifetime).[^1] For the last year, I’ve led the project to build the first-ever mobile app for this entire community.\n\n_The entire project is open source on [GitHub](https://github.com/hackclub/hcb-mobile) (we'd love a ⭐️!)._\n\n## Why build this?\n\nThese teenagers are running run robotics teams, hackathons, and nonprofit projects that improve their community. They need a way to manage their organization's finances from their pocket.\nWith HCB Mobile, they'll be able to:\n\n- Track their **organization's balance** and transactions on the go.\n- Accept in-person **tap-to-pay donations**, perfect for an in-person fundraiser or event! No extra hardware required. Just tap any credit/debit card against your phone.\n- **Issue new debit cards**, add them to **Apple / Google Wallet**, and freeze or cancel them directly from their phone.\n- **Upload receipts** directly from their device or match existing receipts in Receipt Bin to transactions with a tap.\n\n## The Technical Stuff\n\nWhen I started working on this app, I wanted to build in native code like **SwiftUI** for iOS and **Kotlin/Jetpack Compose** for Android. However, I realized that it would be a pain for me, a **full-time student** with classes, to handle two codebases. I'd have to duplicate every feature I created for one OS to the other and deal with all the integration issues along the way. Then, I discovered **Expo** (a React Native framework) which allowed me to write one app that worked on multiple devices. Working with Expo, I learned about creating my own Expo Modules (to bridge native code features to Typescript) and optimization methods like memoization and component recycling.\n\nThe non-code side of this app was _no joke_, either. I had to work with the Apple and Google app review teams to obtain **restricted entitlements** for features like mobile **tap-to-pay terminal provisioning** (made possible by Stripe) and **push provisioning** (which allows users to add cards to their payment wallet directly from HCB Mobile). It took several months and many back-and-forth email chains to finally get the entitlements we needed.\n\nAfter over 250 hours of development work, I can say that I'm incredibly proud of HCB Mobile because it's **built by teenagers** to make it easier for teenagers like me to run nonprofit organizations and projects with HCB. Beyond teenagers, HCB also supports hundreds of adult-ran organizations such as mutual aid groups, open source projects, and community spaces.\n\n
\n\n## Download the app!\n\n
\n\n \n\n   \n\n \n\n\n[^1]: _This amount is excluding HQ (our own) [finances](https://hcb.hackclub.com/hq)._\n" }, { "path": "components/announcements/hcb-open-source.mdx", "content": "Hack Club launched HCB in 2018 to enable hackathons to raise and spend money\nthrough [fiscal sponsorship](https://hackclub.com/fiscal-sponsorship/). Since\nthen, we’ve expanded to all nonprofit projects; our 12,000 users have transacted\n$50 million.\n\n

\n \n

\n\nLocal student-ran hackathons, robotics teams, and community groups use HCB as a\nnonprofit neobank to collect donations, send payments, issue debit cards, and\ngain 501(c)(3) status.\n\nWhen we started HCB, it was developed in private for security reasons. That\nsaid, one of Hack Club’s core principles has always been transparency - we [open\nsource](https://github.com/hackclub/ledger) our\n[finances](https://hcb.hackclub.com/hq), [document how we run\nevents](https://github.com/hackclub/assemble), and have 500+ public repositories\non [GitHub](https://github.com/hackclub).\n\n**_[github.com/hackclub/hcb](https://github.com/hackclub/hcb) is now public -\ncheck it out and star it._**\n\nPaired with our technical documentation, it’s a great resource for anyone\ninterested in building financial software or applications with Ruby on Rails.\nOur engineering work is also entirely public; the world can learn from our\nsuccesses and mistakes.\n\nSince 2018, over fifty people have made 10k+ commits to HCB (thank you!); we\ncan’t wait for more contributors to join us:\n\n\n\nPS: if you’re looking to start a nonprofit, we’re accepting applications! Head\nover to [nonprofit.new](https://nonprofit.new/) and we’ll be in touch.\n\n\nWe're launching this live from SF!\n" }, { "path": "components/announcements/hcb_cta.tsx", "content": "import { Box, Button, Grid, Heading, Text } from 'theme-ui'\nimport Icon from '@hackclub/icons'\nimport NextLink from 'next/link'\n\nexport default function HCBCTA() {\n return (\n t.util.gx('yellow', 'orange'),\n color: 'white',\n py: [4, 5]\n }}\n >\n \n \n \n \n Looking to start a nonprofit?\n \n \n We're accepting applications! No startup fees, no minimum balance,\n and no long wait time.\n \n
\n
\n \n \n \n    \n \n \n \n \n \n \n )\n}\n" }, { "path": "components/announcements/holder.tsx", "content": "import { Container, BaseStyles } from 'theme-ui'\n\nexport default function AnnouncementHolder({ children }) {\n return (\n \n {children}\n \n )\n}\n" }, { "path": "components/announcements/pills.tsx", "content": "import { Avatar, Badge, Flex } from 'theme-ui'\n\nexport function PillHolder({ children }) {\n return (\n \n {children}\n \n )\n}\n\nexport function AuthorPill({ tag, image, firstName }) {\n return (\n \n \n {tag}\n \n )\n}\n\nexport function DatePill({ tag }) {\n return (\n \n {tag}\n \n )\n}\n" }, { "path": "components/announcements/preston-werner-2022.mdx", "content": "This gift means a lot to the Hack Club community, and we are grateful for Tom and Theresa’s continued support.\n\nIn 2014, Hack Club was founded, and Tom joined as Hack Club’s first board member. In the years since, he has contributed open source code, mentored Hack Clubbers 1:1, donated dozens of laptops to teenagers who didn't have access to computers, and been a constant advisor on the Hack Club community, strategy, and product.\n\nTom and Theresa also helped fund [The Hacker Zephyr](https://hack.af/zephyrdoc), an epic, cross-country train hackathon taken by 42 teen hackers in the summer of 2021. Tom even hacked alongside Hack Clubbers onboard.\n\nWith this gift, we will continue to build the engineering team at Hack Club, including a Tech Lead for [HCB](https://hackclub.com/fiscal-sponsorship), and new engineers to support clubs, the Hack Club online community, and events.\n\nOne of our goals in 2022 is to improve Hack Club and to support more teenagers in joining the community. Thank you Tom and Theresa for helping make this possible.\n\nWe thank Tom and Theresa for their generous gift and will carefully use each cent to advance our mission to create a new generation of young, highly-technical teen leaders capable of solving our world’s greatest problems. Every penny will be spent [transparently](https://hcb.hackclub.com/hq).\n\n— Christina Asquith, COO, and Zach Latta, founder\n" }, { "path": "components/announcements/preston-werner.mdx", "content": "import Amount from './amount'\n\n# Today, we're proud to share: Tom and Theresa Preston-Werner are donating to [Hack Club](https://hackclub.com).\n\nWe are deeply grateful for this gift.\n\nIn the coming months, we hope you’ll share our excitement as we make 2 new hires directly serving Hack Clubbers. This gift increases Hack Club’s budget by 60%, and helps us build a diverse foundation at the leadership level of Hack Club as we grow.\n\nWe are so honored to be included among the many gifts the Preston-Werners make each year. This is the 3rd year the Preston-Werners have given a gift to Hack Club, and they've supported the organization from the beginning.\n\nTom and Theresa inspire Hack Club's values. They are self-made hackers, passionate about constructing a better world in creative ways. They are deeply committed to environmental protection, women’s rights, ending global poverty and injustice; and are tremendous collaborators in making Hack Club a place where all young people can build and create their own solutions through coding and technology, regardless of their background. They apply rigorous-thinking, curiosity, humility, transparency, and deep expertise in academia and coding to the problems that need solving in the world, and inspire us to do the same.\n\nThe Preston-Werners generously donate dozens of hours of their time each year to Hack Club HQ and Hack Clubbers. Theresa has been a steady champion of Hack Club, supporting us with feedback, advice, editing, and meeting with Hack Club students. Tom is a founding board member and a personal mentor of Zach’s for the last 5 years. Just some of the ways they support Hack Club is that they inspired the idea to launch Hack Club’s “Ask Me Anything” series, and Tom was our first speaker last April. In December 2019, they threw an amazing Christmas party at their San Francisco home for Hack Club.\n\nTheir incredible and generous gift ushers Hack Club into a big new year in which we get closer to our vision to build a new cultural institution for the 21st century akin to the Boy and Girl Scouts, in which we support high schoolers to gain critical computer science skills, healthy, fun and wholesome friendships, and a set of modern values that honor kindness, integrity, inclusivity, curiosity, optimism, and building and doing.\n\nWe send them a huge thank you. To every Hack Clubber: Tom and Theresa are now supporting you and your work, so go forth and do amazing things. We can’t wait to show them what you make.\n\n—Christina Asquith, COO, and Zach Latta, founder\n" }, { "path": "components/announcements/relon.mdx", "content": "import Signature from '../signature'\nimport Signatures from '../signatures'\nimport Image from 'theme-ui'\n\nIn March 2020, Elon Musk [spent an hour hanging out with Hack Clubbers](https://www.youtube.com/watch?v=riru9OzScwk). He [donated $500,000 to build our team](https://hackclub.com/elon/), [tweeted Hack Club was a cool group](https://twitter.com/elonmusk/status/1263275969743216640), and said that Hack Club makes him more optimistic about the future. This year, Hack Clubbers met SpaceX engineers and demoed projects on SpaceX's factory floor in Hawthorne, California.\n\nThis summer, Elon reached back out.\n\nToday, we're excited to announce Elon is donating $1 million to Hack Club.\n\nThis gift will help launch a number of ideas we've been discussing, including helping more in-person hackathons get off the ground, providing more direct 1:1 technical support on the [Hack Club Slack](https://slack.hackclub.com), and starting up cool new projects like [The Hacker Zephyr](https://github.com/hackclub/the-hacker-zephyr). We also want to use his gift to help 1,000 more teenagers start and join Hack Clubs in their towns.\n\nWe will be spending every dollar as wisely as possible, growing thoughtfully, and adding diverse staff to make Hack Club better. We are pushing hard to try and make the Hack Club Slack the best place to be a teenager on the internet and expanding [HCB](https://hackclub.com/fiscal-sponsorship/).\n\nElon is very selective about the nonprofits he supports and we're proud Hack Club is one of them.\n\nHack Club will be fully transparent in how we spend this money. Hack Club HQ has been running on HCB since February 2020, and [you can see our finances publicly here](https://hcb.hackclub.com/hq).\n\nHack Club's mission is to help foster a new generation of hackers. This starts in high school, where Hack Clubbers learn to be technically proficient, build their friend network, learn to raise and spend money, and develop into kind, curious, thoughtful, optimistic, and honest leaders. And now Elon Musk is one of our largest supporters.\n\nTo every Hack Clubber: Elon continues to support you and your work, so go forth and do amazing things. We can't wait to share what you make.\n\n\n\nZach Latta, Founder & Executive Director \nChristina Asquith, COO\n" }, { "path": "components/arcade/footer.tsx", "content": "import { Box, Heading, Text, Link } from 'theme-ui'\nimport Footer from '../footer'\n\nconst Description = () => (\n \n \n A project by Hack Club.\n \n \n Previous edition: Power Hour\n \n \n Hack Club is a registered 501(c)3 nonprofit organization that supports a\n network of 20k+ technical high schoolers. We believe you learn best by\n building so we're creating community and providing grants so you can make.\n In the past few years, we've{' '}\n \n given away 100k+ in hardware grants\n \n ,{' '}\n \n hosted the world's longest hackathon on land\n \n , and{' '}\n \n brought 183 teenagers to SF for a hackathon\n \n .\n \n \n)\n\nconst ArcadeFooter = () => {\n return (\n
\n \n
\n )\n}\n\nexport default ArcadeFooter\n" }, { "path": "components/arcade/projects.tsx", "content": "/** @jsxImportSource theme-ui */\nimport React, { useState } from 'react'\nimport styled from '@emotion/styled'\nimport {\n Box,\n Button,\n Container,\n Flex,\n Heading,\n Card,\n Grid,\n Text,\n Avatar\n} from 'theme-ui'\nimport NextImage from 'next/image'\nimport Marquee from '../marquee'\nimport Photo1 from '../../public/winter/1.jpeg'\nimport Photo2 from '../../public/winter/2.png'\nimport Photo3 from '../../public/winter/3.jpeg'\nimport Photo4 from '../../public/winter/4.jpeg'\nimport Photo5 from '../../public/winter/5.jpeg'\nimport Photo6 from '../../public/winter/6.jpeg'\nimport Photo7 from '../../public/winter/7.jpeg'\nimport Photo8 from '../../public/winter/8.jpeg'\nimport Photo9 from '../../public/winter/9.jpeg'\nimport Photo10 from '../../public/winter/10.jpeg'\nimport Photo12 from '../../public/winter/12.jpeg'\nimport Photo13 from '../../public/winter/13.jpeg'\nimport Photo14 from '../../public/winter/14.jpeg'\nimport Photo15 from '../../public/winter/15.jpeg'\nimport Photo16 from '../../public/winter/16.jpeg'\nimport Photo17 from '../../public/winter/17.jpeg'\nimport Photo18 from '../../public/winter/18.jpeg'\nimport Photo19 from '../../public/winter/19.jpeg'\nimport Photo20 from '../../public/winter/20.jpeg'\nimport Photo21 from '../../public/winter/21.jpeg'\n\nconst Header = styled(Box)`\n background: url('/pattern.svg');\n`\n\nconst PhotoRow = ({ photos }) => (\n \n \n {}} onFinish={() => {}}>\n {photos.map((photo, index) => (\n \n ))}\n \n \n \n {}} onFinish={() => {}}>\n {photos.map((photo, index) => (\n \n ))}\n \n \n \n)\n\nconst Cards = ({ avatar, username, description, image }) => {\n return (\n \n \n \n \n \n @{username}\n \n \n \n div': { width: 18, height: 18 }\n }}\n >\n {description}\n \n \n {/* */}\n \n \n )\n}\n\nexport default function Projects() {\n const [count, setCount] = useState(0)\n\n const list = [\n 'Drawing robot',\n '3D printer',\n 'DIY Electric Skateboard',\n 'Pixel art display',\n 'Smart Garden',\n 'CNC machine',\n 'Interactive LED Art',\n 'VR Escape Room',\n 'Image Recognition App',\n 'DIY Camera',\n 'Multiplayer AR Game',\n 'Drone Swarm Choreography'\n ]\n\n if (count === list.length - 1) {\n setCount(0)\n }\n\n const project_idea = list[count]\n\n return (\n \n
\n \n \n \n \n You could be building a\n setCount(count + 1)}\n >\n \n {project_idea}\n \n \n \n \n \n \n \n \n \n See more projects →\n \n \n \n \n \n \n \n \n \n \n
\n \n )\n}\n" }, { "path": "components/background-image.tsx", "content": "import { Box } from 'theme-ui'\nimport Image, { StaticImageData } from 'next/image'\n\n/*\n * Use this component inside a container with CSS:\n * `position: relative; overflow: hidden;`\n * then pass width/height/alt/src as usual\n * (you can pass `gradient` valueless to avoid gradient)\n */\n\ntype BGImgProps = {\n gradient?: string | boolean\n alt?: string\n src: string | StaticImageData\n placeholder?: 'blur' | 'empty'\n}\n\nexport default function BGImg({\n gradient = 'linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5))',\n alt = '',\n ...props\n}: BGImgProps) {\n return (\n \n {alt}\n \n )\n}\n" }, { "path": "components/bin/GalleryPosts.tsx", "content": "/** @jsxImportSource theme-ui */\nimport Image from 'next/image'\nimport styles from '../../public/bin/style/gallery.module.css'\nimport PartTag from './PartTag'\n\ntype BinPostProps = {\n title: string\n desc: string\n slack: string\n link: string\n id: string\n date: string\n parts?: string[]\n}\n\nconst BinPost = ({\n title = 'Bin Post',\n desc = 'Bin Project',\n slack = '',\n link = '',\n id,\n date,\n parts\n}: BinPostProps) => {\n link = link.trim()\n if (!/^https?:\\/\\//i.test(link)) {\n link = 'https://' + link\n }\n const projectID = link.split('/')[4]\n const imgLink = `https://thumbs.wokwi.com/projects/${projectID}/social/bin.png`\n\n function handleClick() {\n if (typeof window !== 'undefined') {\n window.open(link, '_blank')\n }\n }\n\n function formatDate(dateString) {\n const inputDate = new Date(dateString)\n const now = new Date()\n const oneDay = 24 * 60 * 60 * 1000 // Number of milliseconds in one day\n\n // Check if the input date is within the last 24 hours\n if (now.getTime() - inputDate.getTime() < oneDay) {\n const hours = inputDate.getHours().toString().padStart(2, '0')\n const minutes = inputDate.getMinutes().toString().padStart(2, '0')\n return `Today at ${hours}:${minutes}`\n } else {\n // Format the date to \"Month day, year\"\n const options = {\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n } as const\n return inputDate.toLocaleDateString(undefined, options)\n }\n }\n if (parts) {\n parts = parts.filter(\n part => part !== 'recvK14pXAY1tn3HQ' && part !== 'rec5TQNvkGkscsGuQ'\n ) //Filter out breadboards and raspberry pi\n }\n\n return (\n
\n

\n {title}\n
\n

\n\n
\n \"Project\n
\n\n

{desc}

\n \n {(slack ? (slack.startsWith('@') ? slack : `@${slack}`) : '') + ' '}\n \n {formatDate(date)}\n
\n {parts &&\n parts.map(part => {\n return \n })}\n
\n
\n )\n}\n\nexport default BinPost\n" }, { "path": "components/bin/PartTag.module.css", "content": ".tag {\n color: e1e1e1;\n padding: 4px 10px;\n border-radius: 20px;\n width: fit-content;\n max-width: 300px;\n display: flex;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: transform 0.3s ease;\n box-sizing: border-box;\n}\n\n.tag:hover {\n cursor: pointer;\n transform: scale(1.1);\n}\n\n.outlined {\n border: 5px dotted #c5c5c5;\n}\n" }, { "path": "components/bin/PartTag.tsx", "content": "import React from 'react'\nimport styles from './PartTag.module.css'\nimport { useState } from 'react'\n\nconst PartTag = ({ partID, search = false, addFilter, removeFilter }) => {\n const [isOutlined, setIsOutlined] = useState(false)\n\n const handleClick = () => {\n if (search) {\n setIsOutlined(prevState => !prevState)\n if (isOutlined) {\n removeFilter(partID)\n } else {\n addFilter(partID)\n }\n }\n }\n\n let backgroundColor: string\n let text: string\n switch (partID) {\n case 'recltWikgPdLvpJfe':\n backgroundColor = '#0000FF' // Vibrant blue\n text = 'Servo'\n break\n case 'recRzllr0dui91NLd':\n backgroundColor = '#008000' // Vibrant green\n text = 'LED'\n break\n case 'recM7OOofV9Bp7AM9':\n backgroundColor = '#FF0000' // Vibrant red\n text = 'ESP32'\n break\n case 'recALoD1CCKt3CxKE':\n backgroundColor = '#800080' // Vibrant purple\n text = 'Buzzer'\n break\n case 'rechtwyljZ5WR8DtR':\n backgroundColor = '#FF4500' // Vibrant orange\n text = 'Slider'\n break\n case 'recry1GsMO6QLakzw':\n backgroundColor = '#8B4513' // Dark brown\n text = 'Photoresistor'\n break\n case 'recjRu1vTAU3qDanE':\n backgroundColor = '#FF1493' // Vibrant pink\n text = 'LCD'\n break\n case 'recrgS7NnxS42tkmg':\n backgroundColor = '#A52A2A' // Vibrant brown\n text = 'LED Screen'\n break\n case 'recocuypi4xP0UgAj':\n backgroundColor = '#000000' // Black\n text = 'Joystick'\n break\n case 'recgLUxtFZHufN70W':\n backgroundColor = '#1E90FF' // Dodger blue\n text = 'LED Bar Graph'\n break\n case 'recKBAnftT9PgppUC':\n backgroundColor = '#00FFFF' // Vibrant cyan\n text = 'Shift Register'\n break\n case 'recibIXNCSdhDHjXD':\n backgroundColor = '#FF00FF' // Vibrant magenta\n text = 'Thermistor'\n break\n case 'recwSKHd3anpKqNbg':\n backgroundColor = '#00FF00' // Vibrant lime\n text = 'IR Receiver'\n break\n case 'recLRovQNumB1Et8B':\n backgroundColor = '#008080' // Vibrant teal\n text = 'Range Finder'\n break\n case 'recMVBkeJ4KQdZihl':\n backgroundColor = '#808000' // Vibrant olive\n text = 'Keypad'\n break\n case 'recGrj5GpSExI18Ff':\n backgroundColor = '#000080' // Vibrant navy\n text = 'Humidity'\n break\n case 'rec9G0CAXM0kdp7HY':\n backgroundColor = '#800000' // Vibrant maroon\n text = 'RTC'\n break\n case 'rec4vTiJIx4UP8Thl':\n backgroundColor = '#DAA520' // Goldenrod\n text = 'Motion Sensor'\n break\n case 'reczWN9rZOY95VXOT':\n backgroundColor = '#FF8C00' // Dark orange\n text = 'LED Matrix'\n break\n case 'recNjAmh8gF0gZNtI':\n backgroundColor = '#FF6347' // Tomato red\n text = 'Accelerometer'\n break\n case 'recPmyV5b8cvaMtTk':\n backgroundColor = '#4B0082' // Vibrant indigo\n text = 'Neopixel LED'\n break\n case 'recj5b4DKez4GNa8i':\n backgroundColor = '#87CEEB' // Vibrant sky blue\n text = 'Relay'\n break\n case 'rec5TQNvkGkscsGuQ':\n backgroundColor = '#9932CC' // Vibrant orchid\n text = 'Pico W'\n break\n case 'recqffGd1j1jRh56m':\n backgroundColor = '#DDA0DD' // Vibrant plum\n text = 'Multicolor LED'\n break\n case 'recJUolkJURydamzG':\n backgroundColor = '#CD5C5C' // Vibrant light coral\n text = 'Encoder'\n break\n case 'rec7lggt0DsgrWHzc':\n backgroundColor = '#20B2AA' // Vibrant light sea green\n text = 'Temp Sensor'\n break\n case 'rectVgu4kWbbaqccc':\n backgroundColor = '#FFA07A' // Vibrant light salmon\n text = 'Button'\n break\n case 'recWKEXSaByRvl68t':\n backgroundColor = '#4682B4' // Vibrant light steel blue\n text = '4 Digit Display'\n break\n default:\n backgroundColor = 'gray' // Default gray\n text = 'Invalid Tag'\n console.log('invalid', partID)\n }\n\n return (\n \n {text}\n \n )\n}\n\nexport default PartTag\n" }, { "path": "components/bin/nav.tsx", "content": "import React from 'react'\nimport styles from '../../public/bin/style/gallery.module.css'\n\nconst Nav = () => {\n return (\n
\n (window.location.href = '/bin')}\n >\n Bin Home\n \n (window.location.href = '/bin/gallery')}\n >\n Gallery\n \n
\n )\n}\n\nexport default Nav\n" }, { "path": "components/bin/rsvp-form.tsx", "content": "/** @jsxImportSource theme-ui */\n\nimport { Checkbox, Input, Label, Text, Box } from 'theme-ui'\nimport useForm from '../../lib/use-form'\nimport Submit from '../submit'\nimport { Slide } from '../react-reveal-compat'\n\nexport default function RsvpForm() {\n const { status, formProps, useField } = useForm('/api/bin/rsvp', null, {\n clearOnSubmit: 5000,\n method: 'POST',\n initData: {},\n bearer: null\n })\n\n return (\n <>\n
\n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n" }, { "path": "components/bio.tsx", "content": "/** @jsxImportSource theme-ui */\nimport Icon from '@hackclub/icons'\nimport { useState } from 'react'\nimport { Box, Card, Flex, Text } from 'theme-ui'\n\nexport default function Bio({ popup = true, spanTwo = false, ...props }) {\n const { name, teamRole, pronouns, text, subrole, email, href, video, img } =\n props\n const [expand, setExpand] = useState(false)\n return (\n <>\n {\n if (text && popup) {\n setExpand(true)\n }\n }}\n >\n {img && (\n \n )}\n \n \n {name}\n \n \n \n \n {teamRole}\n \n {subrole && (\n <>\n
\n \n {subrole}\n \n \n )}\n {pronouns && (\n \n ({pronouns})\n \n )}\n \n \n {!popup &&\n email &&\n (email.includes('@') ? (\n \n {email}\n
\n \n ) : (\n \n {email}@hackclub.com\n
\n \n ))}\n\n {!popup && (\n <>\n \n {text}\n \n {video && (\n \n \n \n )}\n \n )}\n {!popup && href && (\n \n \n \n \n \n {href}\n \n \n )}\n \n \n {popup && expand && (\n \n \n setExpand(false)}\n />\n \n )}\n \n )\n}\n" }, { "path": "components/boardbio.tsx", "content": "/** @jsxImportSource theme-ui */\nimport Icon from '@hackclub/icons'\nimport { useState } from 'react'\nimport { Avatar, Box, Card, Flex, Text } from 'theme-ui'\n\nexport default function BoardBox({ popup = true, ...props }) {\n const { img, name, teamRole, pronouns, text, subrole, email, href, video } =\n props\n const [expand, setExpand] = useState(false)\n\n return (\n <>\n {\n if (text && popup) {\n setExpand(true)\n }\n }}\n >\n {popup ? (\n <>\n \n {name}\n \n \n {teamRole}\n \n {subrole && (\n \n {subrole}\n \n )}\n \n \n ) : (\n <>\n \n \n \n {name}\n \n \n \n \n {teamRole}\n \n {subrole && (\n <>\n
\n \n {subrole}\n \n \n )}\n {pronouns && (\n \n ({pronouns})\n \n )}\n \n \n {email &&\n (email.includes('@') ? (\n \n {email}\n
\n \n ) : (\n \n {email}@hackclub.com\n
\n \n ))}\n \n {text}\n \n {video && (\n \n \n \n )}\n {href && (\n \n \n \n \n \n {href}\n \n \n )}\n \n \n )}\n \n {popup && expand && (\n \n \n setExpand(false)}\n />\n \n )}\n \n )\n}\n" }, { "path": "components/color-switcher.tsx", "content": "import { IconButton, useColorMode } from 'theme-ui'\n\nconst ColorSwitcher = props => {\n const [mode, setMode] = useColorMode()\n return (\n setMode(mode === 'dark' ? 'light' : 'dark')}\n title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}\n sx={{\n position: 'absolute',\n top: [2, 3],\n right: [2, 3],\n color: 'primary',\n cursor: 'pointer',\n borderRadius: 'circle',\n transition: 'box-shadow .125s ease-in-out',\n ':hover,:focus': {\n boxShadow: '0 0 0 3px',\n outline: 'none'\n }\n }}\n {...props}\n >\n \n \n \n \n \n )\n}\n\nexport default ColorSwitcher\n" }, { "path": "components/comma.ts", "content": "export default function Comma({ children }) {\n return children\n ? children.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')\n : ''\n}\n" }, { "path": "components/directoryModal.tsx", "content": "/** @jsxImportSource theme-ui */\n\nexport const badges = [\n {\n label: 'Transparent',\n id: 'Transparent',\n tooltip: 'Transparent',\n color: 'purple',\n icon: 'explore',\n match: org => org.isTransparent\n }\n]\n\nexport function getBadgesForOrg(org: { [key: string]: any }): typeof badges {\n return badges.filter(badge => badge.match?.(org))\n}\n\nimport { Badge as ThemeBadge, Box, Flex } from 'theme-ui'\nimport { Text, Button, Card } from 'theme-ui'\nimport Icon from '@hackclub/icons'\nimport Image from 'next/image'\n\ntype OrganizationModalProps = {\n organization: {\n name: string\n location: {\n country: string\n }\n branding: {\n backgroundImage: string\n logo?: string\n description?: string\n }\n links: {\n website?: string\n financials?: string\n donations: string\n }\n raw: {\n transparent?: boolean\n }\n }\n onClose: () => void\n}\nexport function OrganizationModal({\n organization,\n onClose\n}: OrganizationModalProps) {\n return (\n \n {\n e.stopPropagation()\n }}\n >\n \n \n \n \n \n \n {organization.branding.logo && (\n \n )}\n \n \n {organization.name}\n \n \n {organization.location.country}\n \n \n \n \n\n {/* Badges */}\n \n {/* hardcoded \"nonprofit\" badge */}\n \n Nonprofit\n \n\n {organization.raw.transparent && (\n \n Transparent\n \n )}\n \n\n \n {/* info & buttons */}\n \n {organization.branding.description && (\n \n {organization.branding.description}\n \n )}\n\n \n {organization.links.website && (\n \n \n \n Website\n \n \n \n )}\n {organization.links.financials && (\n \n \n \n Transparent Finances\n \n \n \n )}\n \n \n \n\n \n \n All donations are tax-deductible.\n \n\n t.util.gx('green', 'blue'),\n width: ['100%', 'auto', 'auto']\n }}\n >\n \n \n \n Make a Donation\n \n \n \n \n \n )\n}\n" }, { "path": "components/donate/donors.json", "content": "{\n \"1517\": \"http://www.1517fund.com/\",\n \"Aakash Adesara\": null,\n \"Abby Fischler\": null,\n \"Achal Srinivasan\": null,\n \"Adora Svitak\": null,\n \"Adrienne Tran\": null,\n \"Alex Koren\": \"https://twitter.com/alexekoren\",\n \"Alex Peña\": \"http://www.alexaaronpena.com/home.html\",\n \"Alexander Turin\": null,\n \"Alishaan Ali\": \"https://alishaan.io\",\n \"Allyson Dias\": \"https://twitter.com/AllysonDias\",\n \"Amanda Mae-an Wofford\": null,\n \"Amanda Southworth\": \"https://twitter.com/amndasuthwrth\",\n \"Amogh Chaubey\": \"https://amogh.sh\",\n \"Amritha Jayanti\": null,\n \"Amy Sorto\": null,\n \"Andrew Breckenridge\": \"https://github.com/AndrewSB\",\n \"Andrew Downing\": null,\n \"Andrew Ninh\": null,\n \"Andrew Zoerb\": null,\n \"Andy Haden\": \"https://github.com/andyh2\",\n \"Angus Jyu\": null,\n \"Ankit Ranjan\": \"http://www.ankit.io/\",\n \"Ankit Shah\": \"https://twitter.com/AnkitShah\",\n \"Ann Mazuk\": null,\n \"Arjun Dileep\": null,\n \"Asta Lasf\": null,\n \"Athul Blesson\": \"https://www.linkedin.com/in/athul-blesson-92ab3b115/\",\n \"Avi Romanoff\": null,\n \"Ben Yu\": \"https://twitter.com/intenex\",\n \"Beyang Liu\": \"https://www.linkedin.com/in/beyang-liu-07651227\",\n \"Bhargav Yadavalli\": \"https://www.linkedin.com/in/bhargavy/\",\n \"Bigglesworth Family Foundation\": \"https://www.bigglesworthff.org/\",\n \"Brayden McLean\": null,\n \"Brett Neese\": null,\n \"Brian Nguyen\": null,\n \"Cayce Beames\": null,\n \"Chaleb Pommells\": null,\n \"Changbai Li\": \"https://changbai.li/\",\n \"Chaoyi Zha\": null,\n \"Chris Van Pelt\": \"https://twitter.com/vanpelt\",\n \"Chris Walker\": \"https://twitter.com/EnDimensions\",\n \"Christian Zenaty\": null,\n \"Christina Kim\": null,\n \"Christina Lewis Halpern\": null,\n \"Clara Tsao\": null,\n \"Connie Liu\": null,\n \"Daniel Sinclair\": null,\n \"David C Farnan-Williams\": null,\n \"Dennis Ashendorf\": null,\n \"Dhruv Maheshwari\": null,\n \"Doris Capet\": null,\n \"Edward Jiang\": null,\n \"Elon Musk\": \"https://en.wikipedia.org/wiki/Elon_Musk\",\n \"Emily Pries\": null,\n \"Emily Tseng\": null,\n \"Erik Batista\": null,\n \"Ethan Resnick\": null,\n \"Evan Shui\": null,\n \"Fast Forward\": \"https://www.ffwd.org/\",\n \"Fern Ray\": null,\n \"Ferran Arricivita\": null,\n \"Fiona Carty\": \"https://dribbble.com/nonafiona\",\n \"Garrett Wesley\": null,\n \"Gautam Bhargava\": null,\n \"Gautam Mittal\": null,\n \"Gemma Busoni\": \"https://twitter.com/gemmabusoni\",\n \"Geoff Ralston\": null,\n \"Gisela Kottmeier\": null,\n \"Google.org\": \"https://www.google.org/\",\n \"Gordon Smith\": null,\n \"Guilherme de Souza\": null,\n \"Hallie Lomax\": \"http://lomax.ninja/\",\n \"Hamza bnr Bellucci\": null,\n \"Hortensia Gomez-tirella\": null,\n \"Ishaan Parikh\": null,\n \"Jack Chak\": null,\n \"Jackcheal Dang\": null,\n \"Jacob Haap\": \"https://jacobhaap.com\",\n \"Jake Brownson\": null,\n \"Jamsheed Mistri\": null,\n \"Jason Marmon\": null,\n \"Jay Freeman\": \"http://www.saurik.com/\",\n \"Jeff Hilnbrand\": null,\n \"Jeffrey Owens\": null,\n \"Jennifer Kakuske\": null,\n \"Jevin Sidhu\": null,\n \"Jim Latta\": null,\n \"Joe Lonsdale\": null,\n \"Joseph Douglas\": \"https://twitter.com/JosephRDouglas\",\n \"Josh & Michelle Weatherspoon\": null,\n \"Julie Latta\": null,\n \"Junius Sim\": \"https://www.linkedin.com/in/juniussim/\",\n \"Justin Brezhnev\": null,\n \"Justin Harris\": \"https://envisionwithjustin.com/\",\n \"Kartik Talwar\": null,\n \"Katie Latta\": null,\n \"Keala Lusk\": \"http://kea.la/\",\n \"Kelly Peng\": null,\n \"Kevin Chu\": null,\n \"Kevin Conner\": null,\n \"Kevin Wang\": \"https://twitter.com/kevinverse\",\n \"Kunal Batra\": null,\n \"Kyle Emile\": null,\n \"Lachlan Campbell\": \"https://lachlanjc.com\",\n \"LạiDuy\": null,\n \"Lan Paje\": \"https://twitter.com/lanpaje\",\n \"Larry Weiss\": null,\n \"Lia Stanciu Gregory\": null,\n \"Liam Horne\": \"https://twitter.com/liamihorne\",\n \"Mackenzie Burnett\": null,\n \"Maria Choi\": null,\n \"Mark Prideaux\": null,\n \"Matthew Stanciu\": \"https://matthewstanciu.me\",\n \"Megan Cui\": \"https://megancui.com/\",\n \"Michael Akilian\": null,\n \"Michael Copley\": null,\n \"Michael Hulet\": null,\n \"Michael Yoo\": null,\n \"Michelle Leveille\": null,\n \"Mick Donahue\": null,\n \"Mike Swift\": \"https://twitter.com/swiftalphaone\",\n \"Mingjie Jiang\": \"https://mingjie.info\",\n \"Mohit Bhatia\": \"https://github.com/mohitbhatia1994\",\n \"Myles Byrne\": \"https://twitter.com/quackingduck\",\n \"Nate Wienert\": \"https://github.com/natew\",\n \"Nelson Gomez\": null,\n \"Nick Quinlan\": null,\n \"Nikhil Srinivasan\": null,\n \"Oliver Belanger\": null,\n \"Patrick Pistor\": \"https://github.com/yogert96\",\n \"Paul Cichocki\": null,\n \"Phat Le\": \"https://www.phatle.com/\",\n \"Phil Hedayatnia\": \"http://www.hedayatnia.com/\",\n \"Polly Schneider\": null,\n \"Prisma Data, Inc.\": \"https://prismic.io/\",\n \"Quinn Slack\": \"https://qslack.com/\",\n \"Rashid Al-Abri\": null,\n \"Reid Workman\": null,\n \"Robert Gregory\": null,\n \"Rohith Varanasi\": null,\n \"Rush Wofford\": null,\n \"Ryan Orbuch\": \"https://twitter.com/orbuch\",\n \"Saharsh Yeruva\": \"https://saharsh.tech\",\n \"Samay Shamdasani\": \"https://shamdasani.org/\",\n \"Samuel Escapa\": \"https://github.com/saescapa\",\n \"Santiago Siri\": \"https://twitter.com/santisiri\",\n \"Scott Chow\": null,\n \"Scott Motte\": \"https://www.scottmotte.com/\",\n \"Sean Kim\": null,\n \"Selynna Sun\": \"https://www.selynnasun.com/\",\n \"Shariq Hashme\": \"https://shar.iq/\",\n \"Sheryl Kern-Jones\": null,\n \"Shrav Mehta\": null,\n \"Shriya Nevatia\": null,\n \"Shriyash Jalukar\": \"https://www.linkedin.com/in/shriyashjalukar/\",\n \"Siddhartha Desai\": null,\n \"Sina Hamedian\": null,\n \"Sourcegraph\": \"https://sourcegraph.com/\",\n \"Spencer Yen\": null,\n \"Stephanie He\": null,\n \"Steven Duong\": null,\n \"Tanya Latta\": null,\n \"Taylor Otwell\": null,\n \"Tejas Manohar\": \"https://tejas.io/\",\n \"The Reva & David Logan Foundation\": \"http://www.loganfdn.org/\",\n \"The Thiel Fellowship\": \"http://thielfellowship.org/\",\n \"Thiel Foundation\": \"http://www.thielfoundation.org/\",\n \"Tiffany Yin\": null,\n \"Tom Preston-Werner\": \"http://tom.preston-werner.com/\",\n \"Truman Chan\": null,\n \"Tyler Hilliard\": null,\n \"Victor Truong\": \"https://victortruong.net\",\n \"Waj Waj\": null,\n \"Will Gaybrick\": null,\n \"William Wold\": null,\n \"Xavier Shay\": \"https://xaviershay.com/\",\n \"Yacoub Oulad Daoud\": null,\n \"Yev Barkalov\": \"http://www.yev.sh/\",\n \"Zach Holman\": \"https://zachholman.com/\",\n \"Zane Davis-Barrs\": \"https://zane.sh/\",\n \"Zane Sindhu\": null\n}\n" }, { "path": "components/donate/sponsors.tsx", "content": "/** @jsxImportSource theme-ui */\nimport styled from '@emotion/styled'\nimport { Box, Image, Link } from 'theme-ui'\n\nconst Base = styled(Box)`\n display: grid;\n grid-gap: 18px;\n grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n align-items: center;\n justify-content: center;\n img {\n margin: auto;\n max-width: 12rem;\n }\n`\n\nconst Sponsor = ({ name, href, img, ...props }) => (\n \n \n \n)\n\nconst Sponsors = props => (\n \n {[\n 'Vercel',\n 'Slack',\n 'Netlify',\n 'FullStory',\n 'BrowserStack',\n 'Stripe',\n 'Segment',\n 'Bugsnag',\n 'Google',\n 'Dialpad'\n ].map(name => (\n \n ))}\n \n \n \n \n)\n\nexport default Sponsors\n" }, { "path": "components/dot.tsx", "content": "import { Text } from 'theme-ui'\nimport { keyframes } from '@emotion/react'\n\nconst flashing = keyframes({\n from: { opacity: 0 },\n '50%': { opacity: 1 },\n to: { opacity: 0 }\n})\n\nexport default function Dot({ hideOnMobile }) {\n return (\n \n )\n}\n" }, { "path": "components/elon.mdx", "content": "Elon Musk holds a special place amongst hackers. After growing up in a difficult\nfamily situation in South Africa, working his way in small jobs until reaching\nLos Angeles, teaching himself to code, and making hundreds of millions\nco-founding PayPal, he kept on building.\n\nIt was a huge honor last month to have Elon [spend an hour in a Hack Club\nAMA](https://youtu.be/riru9OzScwk)—at one point he remarked we were “asking\nbetter questions than all the mainstream media.”\n\nAfterwards, Elon wanted to support Hack Club further.\n\n# Today, I’m proud to share: Elon Musk is donating $500,000 to Hack Club.\n\nIn so many ways, this is a milestone for every Hack Clubber. 6 years ago, I\nstarted Hack Club as a 16-year-old programmer living on my own, scraping by,\nbarely able to make rent. Now Elon Musk is one of our largest supporters.\n\nElon is supporting us because we are a community of builders. When hackers see\nproblems in the world, we don’t blame someone else: we try to take them on\nourselves to solve. Elon is very selective about the nonprofits he supports and\nI’m proud Hack Club is one of them.\n\nSo…how is Hack Club going to invest $500k? We want to use this to help 1000 more\nstudents start and join Hack Clubs in their communities. For those already in\nHack Clubs, we look to you to help us make a more high-quality experience. We’re\na lot of what we’ve already been doing (and [what I wrote about at the beginning\nof the year](https://zachinto2020.wordpress.com/2019/12/31/as-midnight-approaches/)):\nwe’ll spend as little money as possible at all times, and we’ll hire a small\nnumber of diverse staff from video game engineers to media producers to make\nHack Club better. We are pushing hard now to expand users of [HCB](https://hackclub.com/fiscal-sponsorship/),\nand continuing to try and make the Hack Club Slack the best place to be a teenager on the intenet.\n\nWe’ll have a proper announcement in a few weeks, but one thing we’re doing after\nwinning the [Frank Grant](https://grant.frank.ly/) and now receiving Elon’s\ngift, is open sourcing our finances. Hack Club HQ has been running on HCB\nsince February and starting today, you can see our account publicly at\nhttps://hcb.hackclub.com/hq. You can track how we spend every single dollar of\nElon’s gift. Soon, we will also launch https://frank.ly/ on Hack Club’s\nwebsite.\n\nHack Club’s mission is to build a new generation of hackers. This starts in high\nschool, where Hack Club students learn to be technically proficient, build their\nfriend network, learn to raise and spend money, and develop into kind, curious,\nthoughtful, optimistic, and honest leaders.\n\nElon Musk is now supporting you and your work, so go out and do amazing things.\nElon can’t wait to see what you make.\n\n—Zach\n" }, { "path": "components/fade-in.tsx", "content": "import React from 'react'\nimport { Box } from 'theme-ui'\nimport styled from '@emotion/styled'\nimport { keyframes } from '@emotion/react'\n\nconst fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })\n\nconst Wrapper = styled(Box)`\n @media (prefers-reduced-motion: no-preference) {\n animation-name: ${fadeIn};\n animation-fill-mode: backwards;\n }\n`\n\nconst FadeIn = ({ duration = 300, delay = 0, ...props }) => (\n \n)\n\nexport default FadeIn\n" }, { "path": "components/fiscal-sponsorship/contact.tsx", "content": "import Icon from '../icon'\nimport { Flex, Link, Text } from 'theme-ui'\n\nconst phoneNumber = '+1 (844) 237-2290'\nconst phoneNumberUri = '+1-844-237-2290'\nconst email = 'hcb@hackclub.com'\n\nexport default function ContactBanner({ sx }) {\n return (\n \n \n \n Questions? Email {email}{' '}\n or call {phoneNumber}\n \n \n )\n}\n" }, { "path": "components/fiscal-sponsorship/directory/card.tsx", "content": "import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'\nimport { Organization } from '../../../lib/organization'\nimport Tilt from '../../tilt'\nimport Icon from '@hackclub/icons'\nimport Tooltip from '../tooltip'\n\nexport const Badge = ({ badge }) =>\n badge.image ? (\n \n .\n \n ) : (\n \n \n \n )\n\ntype OrganizationCardProps = {\n organization: Organization\n openModal: (organization: Organization) => void\n badges: any[]\n}\n\n/**\n *\n * @param {{\n * organization: Organization,\n * showTags: boolean\n * }} props\n * @returns\n */\nexport const OrganizationCard = ({\n openModal,\n badges,\n organization\n}: OrganizationCardProps) => (\n \n openModal(organization)}\n rel=\"noopener noreferrer\"\n itemScope\n itemType=\"http://schema.org/Event\"\n variant=\"event\"\n sx={{\n justifyContent: 'center',\n alignItems: 'center',\n minHeight: 128,\n color: 'white',\n cursor: 'pointer',\n textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',\n textDecoration: 'none',\n backgroundColor: 'black',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n backgroundRepeat: 'no-repeat',\n borderRadius: 'extra',\n overflow: 'hidden',\n position: 'relative',\n p: 3,\n height: '100%',\n display: 'flex',\n px: 3,\n backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,\n textAlign: 'center',\n flexDirection: 'column'\n }}\n >\n \n {badges.map((badge, i) => (\n \n \n \n \n \n ))}\n \n\n {organization.branding.logo && (\n \n )}\n \n {organization.name}\n \n \n <>\n \n \n {organization.raw.location.continent}\n \n \n \n \n \n {organization.links.website}\n \n \n \n)\n\nexport default OrganizationCard\n" }, { "path": "components/fiscal-sponsorship/features.tsx", "content": "import { Box, Heading, Link, Text, Container, Grid } from 'theme-ui'\nimport Icon from '../icon'\nimport { Balancer } from 'react-wrap-balancer'\nimport Image from 'next/image'\nimport imgLaptop from '../../public/fiscal-sponsorship/laptop.png'\n\nexport default function Features() {\n return (\n \n \n \n \n Powerful financial tools built by our nonprofit, for yours.\n \n \n \n Since day one, we’ve built beautiful, self-serve software to empower\n you to raise and spend money without administrative hassle. We’re also\n open source!\n \n \n \n {/* Send money & reimburse via check, ACH, bank wire, & more.\n Operate globally with a US Entity.\n Issue physical & virtual debit cards to your team.\n Get 24 hour support on weekdays.\n Pay team members with built-in payroll.\n Embed a custom donation form on your website.\n We file all your taxes automatically, including Form 990. \" */}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n See our open source on GitHub\n \n \n \n \n )\n}\n\nfunction Module({ icon, name, body }) {\n return (\n \n \n \n \n \n \n \n {name}\n {' '}\n {body}\n \n \n \n )\n}\n\nfunction Laptop({ href, title }) {\n return (\n \n \n \n See Reboot’s finances in Transparency Mode\n \n \n )\n}\n" }, { "path": "components/fiscal-sponsorship/first/apply-button.tsx", "content": "import { Button, Text, Flex } from 'theme-ui'\nimport Icon from '../../icon'\nimport Link from 'next/link'\n\nexport default function ApplyButton() {\n return (\n \n \n \n \n Apply now\n \n \n \n \n \n )\n}\n" }, { "path": "components/fiscal-sponsorship/first/features.tsx", "content": "/** @jsxImportSource theme-ui */\nimport { Box, Heading, Link, Text, Container, Card, Image } from 'theme-ui'\nimport Icon from '../../icon'\nimport Masonry from 'react-masonry-css'\nimport NextImage from 'next/image'\n\nimport { Fade } from '../../react-reveal-compat'\n\nexport default function Features() {\n return (\n \n \n \n \n \n \n Everything you'll need.\n \n
\n
\n \n Organize your team's finances in real time, receive grants, gain\n nonprofit status, & more.\n
\n Use features engineered by FIRST alumni to help you run a\n successful team.\n \n
\n
\n \n \n \n \n\n \n \n \n \n \n\n \n\n \n\n \n\n \n {/* \n \n \n \n */}\n \n {/* \n \n \n \n Date\n \n 10-10-2020\n \n \n \n Pay to the
\n order of\n \n \n Hack Club\n \n\n \n $\n \n 1000\n \n \n \n \n One thousand only\n \n Dollars\n \n \n\n \n \n Memo\n \n {' '}\n Grant for Poseidon Robotics\n \n \n \n \n \n \n ⑆ 00000000000 ⑆ 123456789 ⑆\n \n \n \n */}\n {/* */}\n \n \n \n \n Hack Club does not directly provide banking services. Banking services\n are provided by FDIC-certified financial institutions.\n \n \n \n \n )\n}\n\ntype ModuleProps = {\n icon: string\n name: string\n body: string\n iconColor?: string\n}\n\nfunction Module({ icon, name, body, iconColor }: ModuleProps) {\n return (\n \n \n \n \n \n \n {name}\n \n {body}\n \n \n \n \n )\n}\n\nfunction ModuleDetails({ children }) {\n return (\n \n \n {children}\n \n \n )\n}\n\nfunction Document({ name, cost }) {\n return (\n \n \n \n {name}\n\n {cost && (\n \n {cost}\n \n )}\n \n \n )\n}\n\nfunction Laptop({ href, title, sx }) {\n return (\n \n \n \n )\n}\n" }, { "path": "components/fiscal-sponsorship/first/start.tsx", "content": "import { Box, Link, Text, Heading, Flex } from 'theme-ui'\nimport Stats from './stats'\nimport ApplyButton from './apply-button'\n\nexport default function Start({ stats }) {\n return (\n <>\n \n \n \n \n Sign up for HCB.\n \n \n Open to Hack Clubs, hackathons, and charitable organizations in\n the US and Canada.\n \n \n \n \n \n \n We run Hack Club HQ on HCB!{' '}\n \n See our finances.\n \n \n \n \n \n \n )\n}\n" }, { "path": "components/fiscal-sponsorship/first/stats.tsx", "content": "import { Text, Box, Flex } from 'theme-ui'\nimport { useEffect, useState } from 'react'\n\nconst easeInOutExpo = x =>\n x === 0\n ? 0\n : x === 1\n ? 1\n : x < 0.5\n ? Math.pow(2, 20 * x - 10) / 2\n : (2 - Math.pow(2, -20 * x + 10)) / 2\n\nfunction startMoneyAnimation(\n setBalance,\n amount,\n duration = 2_000,\n moneyFormatter\n) {\n const startTime = performance.now()\n\n function animate() {\n const time = performance.now() - startTime\n const progress = time / duration\n const easedProgress = easeInOutExpo(progress)\n\n setBalance(moneyFormatter(amount * easedProgress))\n\n if (progress < 1) {\n requestAnimationFrame(animate)\n } else {\n setBalance(moneyFormatter(amount))\n }\n }\n\n requestAnimationFrame(animate)\n}\n\nfunction formatMoney(amount) {\n const normalisedAmount = amount / 100\n return normalisedAmount\n .toLocaleString('en-US', { style: 'currency', currency: 'USD' })\n .split('.')\n}\n\nconst Stats = ({ stats }) => {\n const [balance, setBalance] = useState(0) // A formatted balance string, split by decimal\n\n useEffect(() => {\n const observer = new IntersectionObserver(\n e => {\n if (e[0].isIntersecting) {\n console.info('intersecting')\n startMoneyAnimation(\n setBalance,\n stats.transactions_volume,\n 2_500,\n formatMoney\n )\n }\n },\n { threshold: 1.0 }\n )\n observer.observe(document.querySelector('#parent'))\n\n return () => observer.disconnect()\n }, [stats.transactions_volume])\n\n if (stats.transactions_volume === undefined) {\n return null\n }\n\n return (\n \n \n So far we have enabled\n {stats ? (\n <>\n \n {balance[0]}\n .{balance[1]}\n \n \n ) : (\n \n ...\n \n )}\n in transactions\n \n \n )\n}\n\nexport async function getStaticProps() {\n const res = await fetch(`https://hcb.hackclub.com/stats`)\n try {\n const stats = await res.json()\n return {\n props: {\n stats\n },\n revalidate: 10\n }\n } catch (e) {\n return {\n props: {\n stats: {}\n },\n revalidate: 10\n }\n }\n}\n\nexport default Stats\n" }, { "path": "components/fiscal-sponsorship/first/testimonials.tsx", "content": "import {\n Box,\n Image,\n Text,\n Heading,\n Container,\n Grid,\n Link,\n Avatar,\n Button\n} from 'theme-ui'\nimport { Slide } from '../../react-reveal-compat'\n\nexport default function Testimonials() {\n return (\n <>\n \n \n FIRST teams all over the country run on HCB.\n \n \n Everywhere from San Jose to Boston to New York, HCB powers teams of\n all sizes.\n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction Organization({\n logo,\n name,\n website,\n teamNum,\n teamLocation,\n budget: _budget,\n budgetLabel: _budgetLabel,\n url,\n imgSrc,\n quote,\n hackerName,\n hackerAvatarUrl,\n hackerRole,\n transparency = undefined\n}) {\n return (\n \n \n \n \n \n \n \n \n \n \n {name}\n \n
\n \n {teamNum}\n {' '}\n • {teamLocation}\n \n \n \n\n
\n \n \"{quote}\"\n \n\n \n \n \n \n \n {hackerName}\n \n {hackerRole}\n \n \n {transparency && (\n \n \n See Finances\n \n \n )}\n \n \n \n \n \n )\n}\n" }, { "path": "components/fiscal-sponsorship/open-source.tsx", "content": "/** @jsxImportSource theme-ui */\n\nimport { Box, Heading, Button, Text, Container, Grid, Flex } from 'theme-ui'\nimport Icon from '../icon'\nimport Photo from '../photo'\nimport HCBGource from '../../public/fiscal-sponsorship/hcb-gource.gif'\n\nexport default function OpenSource() {\n return (\n \n \n \n
\n \n Open source infrastructure for fiscally sponsored organizations.\n \n \n HCB is open source and built in public, like many other Hack Club\n projects. Join us in building the infrastructure powering fiscally\n sponsored organizations around the world.\n \n \n \n Star on GitHub\n \n \n \n Read our blog post\n \n \n \n
\n \n \n \n \n )\n}\n" }, { "path": "components/fiscal-sponsorship/organization-spotlight.tsx", "content": "/** @jsxImportSource theme-ui */\nimport Tilt from '../tilt'\nimport { Card, Heading, Text } from 'theme-ui'\nimport Image from 'next/image'\nimport { Balancer } from 'react-wrap-balancer'\n\nexport default function OrganizationSpotlight({ organization }) {\n return (\n \n \n \n
\n \n {organization.name}\n \n \n {organization.location.readable}\n \n
\n \n {organization.description}\n \n \n \n )\n}\n" }, { "path": "components/fiscal-sponsorship/sign-in.tsx", "content": "/** @jsxImportSource theme-ui */\nimport { useEffect, useState } from 'react'\nimport { Button, Image } from 'theme-ui'\n\nexport default function SignIn() {\n const [user, setUser] = useState(null)\n\n useEffect(() => {\n ;(async () => {\n const _user = await fetch('https://hcb.hackclub.com/api/current_user', {\n credentials: 'include'\n })\n .then(r => (r.ok ? r.json() : null))\n .catch(() => {})\n\n if (_user) setUser(_user)\n })()\n }, [])\n\n return (\n \n {user ? (\n <>\n \n Continue to HCB\n \n ) : (\n 'Sign in'\n )}\n \n )\n}\n" }, { "path": "components/fiscal-sponsorship/tooltip.tsx", "content": "import React from 'react'\n\nconst tooltip = direction =>\n function Tooltip({ children, text, id }) {\n const escapedText = text.replace(/'/g, \"\\\\'\")\n const directionalStyles = {\n e: `\n left: 100%;\n bottom: 50%;\n right: 0;\n margin-left: 0.5rem;\n transform: translateY(50%);\n `,\n w: `\n right: 100%;\n bottom: 50%;\n margin-right: 0.5rem;\n transform: translateY(50%);\n `,\n n: `\n right: 50%;\n bottom: 100%;\n margin-bottom: 0.5rem;\n transform: translateX(50%);\n `,\n s: `\n right: 50%;\n top: 100%;\n margin-top: 0.5rem;\n transform: translateX(50%);\n `\n }[direction || 'e']\n\n return (\n <>\n \n\n {children}\n \n )\n }\n\ntype TooltipComponent = React.FC<{ children: any; text: any; id: any }> & {\n N: React.FC<{ children: any; text: any; id: any }>\n S: React.FC<{ children: any; text: any; id: any }>\n E: React.FC<{ children: any; text: any; id: any }>\n W: React.FC<{ children: any; text: any; id: any }>\n}\n\nconst Tooltip = tooltip('e') as TooltipComponent\nTooltip.N = tooltip('n')\nTooltip.S = tooltip('s')\nTooltip.E = tooltip('e')\nTooltip.W = tooltip('w')\n\nexport { Tooltip }\nexport default Tooltip\n" }, { "path": "components/flag.tsx", "content": "import theme from '../lib/theme'\nimport styled from '@emotion/styled'\nimport { css, keyframes } from '@emotion/react'\nimport Link from 'next/link'\n\nconst waveFlag = keyframes`\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(-5deg);\n }\n`\n\nconst waveFlagScaled = keyframes`\n from {\n transform: scale(.875) rotate(0deg);\n }\n to {\n transform: scale(.875) rotate(-5deg);\n }\n`\n\nconst scrolled = props =>\n props.scrolled\n ? css`\n transform: scale(0.875);\n height: 56px;\n &:hover,\n &:focus {\n animation: ${waveFlagScaled} 0.5s linear infinite alternate;\n }\n `\n : undefined\n\nconst Base = styled(Link)<{ uwu?: boolean }>`\n background-image: ${props =>\n props.uwu\n ? 'url(/stickers/hack-club-anime.png)'\n : 'url(https://assets.hackclub.com/flag-orpheus-top.svg)'};\n background-repeat: no-repeat;\n background-position: top left;\n background-size: contain;\n cursor: pointer;\n flex-shrink: 0;\n width: 112px;\n height: 48px;\n transition: ${3 / 16}s cubic-bezier(0.375, 0, 0.675, 1) transform;\n transform-origin: top left;\n @media (min-width: ${theme.breakpoints[1]}) {\n width: 172px;\n height: 64px;\n }\n &:hover,\n &:focus {\n animation: ${waveFlag} 0.5s linear infinite alternate;\n }\n @media (prefers-reduced-motion: reduce) {\n animation: none !important;\n }\n ${scrolled};\n`\n\nconst Flag = props => \n\nexport default Flag\n" }, { "path": "components/flex-col.tsx", "content": "import { Flex } from 'theme-ui'\n\nexport default function FlexCol({ children, ...props }) {\n return {children}\n}\n" }, { "path": "components/footer.tsx", "content": "import React from 'react'\nimport styled from '@emotion/styled'\nimport { Box, Container, Grid, Heading, Link, Text } from 'theme-ui'\nimport NextLink from 'next/link'\nimport theme from '@hackclub/theme'\nimport Icon from './icon'\nimport { getGitSha, getGitShaShort } from '../lib/git-info'\n\nconst Base = styled(Box, { shouldForwardProp: prop => prop !== 'dark' })<{\n dark?: boolean\n}>`\n background: ${props =>\n props.dark\n ? `${theme.colors.darker} radial-gradient(${theme.colors.black} 1px, transparent 1px)`\n : `${theme.colors.snow} url('/pattern.svg') repeat`};\n ${props =>\n props.dark &&\n `\n background-size: ${theme.space[4]}px ${theme.space[4]}px;\n `} @media print {\n display: none;\n }\n`\n\nconst Logo = props => (\n \n \n \n \n)\n\nconst Service = ({ href, icon, name = '', ...props }) => (\n \n \n \n)\n\nconst Footer = ({\n dark = false,\n email = 'team@hackclub.com',\n children = undefined,\n ...props\n}) => (\n \n \n {children}\n div > a': {\n display: 'block',\n mb: 2\n },\n 'h2,p': { color: 'muted' },\n h2: { fontSize: 3 },\n 'a,p': { fontSize: 2 }\n }}\n >\n \n \n Hack Club\n \n \n Philosophy\n \n \n Our Team & Board\n \n \n Jobs\n \n \n Brand Guide\n \n \n Press Inquiries\n \n \n Donate\n \n \n Imprint\n \n \n \n \n Resources\n \n Community Events\n Jams\n Toolbox\n Clubs Map\n Code of Conduct\n Privacy & Terms\n \n \n \n \n \n \n \n {getGitShaShort()}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n 1-855-625-HACK\n
\n \n (call toll-free)\n \n \n \n \n \n © {new Date().getFullYear()} Hack Club. 501(c)(3) nonprofit (EIN:\n 81-2908499)\n \n \n \n)\n\nexport default Footer\n" }, { "path": "components/force-theme.ts", "content": "import { useEffect } from 'react'\nimport { useColorMode } from 'theme-ui'\n\nconst ForceTheme = ({ theme }) => {\n const [_colorMode, setColorMode] = useColorMode()\n useEffect(() => {\n setColorMode(theme)\n }, [setColorMode, theme])\n return null\n}\n\nexport default ForceTheme\n" }, { "path": "components/hackathons/features/marketing.tsx", "content": "/** @jsxImportSource theme-ui */\nimport { Button, Box, Container, Heading, Text } from 'theme-ui'\nimport usePrefersMotion from '../../../lib/use-prefers-motion'\nimport useHasMounted from '../../../lib/use-has-mounted'\nimport Link from 'next/link'\n\nconst Content = () => (\n \n \n hackathons.hackclub.com\n \n \n Spread the word about your hackathon.\n \n \n Reach hackers worldwide by listing your event on hackathons.hackclub.com,\n the first Google search result for \"high school hackathons.\" Your event\n will also be emailed to a network of high school hackers in your area.\n \n \n theme.util.gx('yellow', 'red')\n }}\n >\n Add your hackathon →\n \n \n \n)\n\nconst Cover = () => (\n t.util.gx('slate', 'black'),\n opacity: 0.7,\n zIndex: 1\n }}\n />\n)\n\nconst Static = ({\n img = 'https://cloud-ateizv565-hack-club-bot.vercel.app/0screen_shot_2022-07-27_at_2.57.41_pm.png'\n}) => (\n \n \n \n \n)\n\nconst Marketing = () => {\n const hasMounted = useHasMounted()\n const prefersMotion = usePrefersMotion()\n if (hasMounted && prefersMotion) {\n return (\n \n \n \n \n \n \n \n \n \n )\n } else {\n return \n }\n}\n\nexport default Marketing\n" }, { "path": "components/hackathons/features/slack.tsx", "content": "/** @jsxImportSource theme-ui */\nimport { Button, Box, Container, Heading, Text, Link } from 'theme-ui'\nimport usePrefersMotion from '../../../lib/use-prefers-motion'\nimport useHasMounted from '../../../lib/use-has-mounted'\nimport NextLink from 'next/link'\n\nconst Content = () => (\n \n \n The Hack Club Community\n \n \n A hackathon organizer's{' '}\n \n best friend\n \n .\n \n \n The{' '}\n \n \n #hackathon-organizers\n \n {' '}\n channel is where teenagers around the world ask questions and share their\n own hackathon organizing experiences—from finding a venue to securing\n sponsorships to ordering food.\n \n \n \n Join us on Slack →\n \n \n \n)\n\nconst Cover = () => (\n t.util.gx('cyan', 'purple'),\n opacity: 0.825,\n zIndex: 1\n }}\n />\n)\n\nconst Static = ({\n // screenshot of messages from #hackathon-organizers\n img = 'https://cloud-8611bon87-hack-club-bot.vercel.app/0screen_shot_2022-08-05_at_2.27.38_pm.png'\n}) => (\n \n \n \n \n)\n\nconst Slack = () => {\n const hasMounted = useHasMounted()\n const prefersMotion = usePrefersMotion()\n if (hasMounted && prefersMotion) {\n return (\n \n \n \n \n \n \n \n \n \n )\n } else {\n return \n }\n}\n\nexport default Slack\n" }, { "path": "components/hackathons/keep-exploring.tsx", "content": "import { Box, Heading, Button, Text, Grid, Container } from 'theme-ui'\nimport Link from 'next/link'\nimport Icon from '../icon'\n\nexport default function KeepExploring() {\n return (\n <>\n t.util.gx('orange', 'red'),\n margin: 'auto',\n maxWidth: '90%',\n my: 4,\n borderRadius: 8,\n color: 'white',\n textAlign: 'center',\n py: 5\n }}\n >\n \n Keep exploring{' '}\n \n \n \n \n Meet other hackers\n \n \n\n \n \n \n \n\n \n \n \n Behind the scenes...\n \n \n Teenagers organize hackathons like{' '}\n \n Assemble\n {' '}\n &{' '}\n \n Windy City Hacks\n \n . The hack’s the limit.\n \n \n \n \n )\n}\n" }, { "path": "components/hackathons/landing.tsx", "content": "import { Box, Button, Heading, Text, Card } from 'theme-ui'\nimport { Fade } from '../react-reveal-compat'\nimport ScrollHint from '../scroll-hint'\nimport Image from 'next/image'\nimport Icon from '../icon'\n\nexport default function Landing() {\n return (\n <>\n \n \n \n \n \n \n t.util.gx('yellow', 'pink'),\n position: 'absolute',\n right: [0, -3],\n top: -3,\n transform: [\n 'translateY(-50%) rotate(8deg)',\n 'translateX(15%) rotate(12deg)'\n ],\n fontSize: [2, 3],\n display: ['none', 'inline', 'inline']\n }}\n >\n Looking for hackathons?{' '}\n \n \n\n \n Welcome to the{' '}\n \n high school hackathon.\n \n \n \n \n It's not an extracurricular or a club. It's not a class or a\n lecture.\n {' '}\n Hackathons are a place to build things for fun and meet others\n doing the same.\n \n \n \n \n
\n
\n \n \n \n \n )\n}\n\nfunction Slide({ children }) {\n return (\n \n \n {children}\n \n )\n}\n\nfunction BlueGradientFilter() {\n return (\n \n )\n}\n" }, { "path": "components/hackathons/overview.tsx", "content": "import { Box, Heading, Container, Text, Grid } from 'theme-ui'\n\nexport default function Overview() {\n return (\n <>\n \n \n \n A hackathon is a social coding marathon where teenagers{' '}\n come together to{' '}\n build projects for a weekend and{' '}\n share them with the world.\n \n \n \n \n The best way to learn is by building.\n \n A hackathon is a space that helps give makers everything they need\n to start building–mentors, collaborators, inspiration, and a goal\n to work towards. Hackers will leave a hackathon with a project of\n their own, ready and excited to keep hacking once they get home.\n \n \n \n We're at our best when we're making.\n \n Hack Club is a global community of thousands of high school\n makers. We're organizers, coders, hackers, painters, engineers,\n musicians, writers, volunteers. We make things. We want others to\n make things too.\n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction Highlight({ children }) {\n return (\n \n {children}\n \n )\n}\n" }, { "path": "components/hackathons/recap.tsx", "content": "/** @jsxImportSource theme-ui */\nimport { Card, Box, Heading, Grid, Text } from 'theme-ui'\nimport Stage from '../stage'\n\nexport default function Recap() {\n return (\n <>\n \n \n Get started today\n \n \n Resources so you can organize an{' '}\n \n amazing\n {' '}\n hackathon.\n \n \n a, > div': {\n borderRadius: 'extra',\n boxShadow: 'elevated',\n px: [3, null, 4],\n py: [4, null, 5]\n },\n span: {\n boxShadow:\n '-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)'\n },\n svg: { fill: 'currentColor' }\n }}\n >\n \n \n \n \n \n \n \n \n )\n}\n" }, { "path": "components/hackathons/scrolling-hackathons.tsx", "content": "/** @jsxImportSource theme-ui */\nimport Ticker from 'react-ticker'\nimport {\n Box,\n Card,\n Text,\n Heading,\n Badge,\n Container,\n Image,\n Link\n} from 'theme-ui'\nimport { useState } from 'react'\nimport { keyframes } from '@emotion/react'\nimport Tilt from '../tilt'\nimport PageVisibility from 'react-page-visibility'\nimport { formatAddress } from '../../lib/helpers'\n\nexport default function ScrollingHackathons({\n eventData,\n mode,\n title,\n ...props\n}) {\n const [pageIsVisible, setPageIsVisible] = useState(true)\n const handleVisibilityChange = isVisible => {\n setPageIsVisible(isVisible)\n }\n\n return (\n <>\n {title ? (\n \n \n Join other high-schoolers at an upcoming hackathon.\n \n \n \n \n \n \n from{' '}\n \n hackathons.hackclub.com\n \n , last updated just now.\n \n \n \n ) : (\n <>\n )}\n \n {pageIsVisible && (\n \n {() => (\n \n {eventData.map((event: any) => (\n \n ))}\n \n )}\n \n )}\n \n \n )\n}\n\nconst flashing = keyframes({\n from: { opacity: 0 },\n '50%': { opacity: 1 },\n to: { opacity: 0 }\n})\n\nfunction Dot() {\n return (\n \n )\n}\n\ntype EventCardProps = {\n name: string\n website: string\n start: string\n end: string\n city?: string\n state?: string\n country?: string\n countryCode?: string\n banner: string\n logo?: string\n virtual?: boolean\n hybrid?: boolean\n footer?: React.ReactNode\n}\n\nfunction EventCard({\n name,\n website,\n start,\n end,\n city,\n state,\n country,\n countryCode,\n banner,\n logo,\n virtual,\n hybrid,\n footer\n}: EventCardProps) {\n return (\n \n \n \n {virtual ? 'Online' : hybrid ? 'Hybrid' : 'In-Person'}\n \n\n {logo && (\n \n )}\n\n \n {name}\n \n \n {footer ? (\n footer\n ) : (\n <>\n \n {!virtual && (\n \n {formatAddress(city, state, country, countryCode)}\n \n )}\n \n \n )}\n \n \n \n {virtual\n ? 'https://schema.org/OnlineEventAttendanceMode'\n : 'https://schema.org/OfflineEventAttendanceMode'}\n \n {website}\n \n {start}\n \n \n {end}\n \n \n \n \n )\n}\n" }, { "path": "components/icon.tsx", "content": "import React from 'react'\nimport Icon from '@hackclub/icons'\n\nexport default function IconComponent(props: any): React.ReactElement {\n return \n}\n" }, { "path": "components/index/cards/beest.tsx", "content": "/** @jsxImportSource theme-ui */\nimport CardModel from './card-model'\nimport { Box, Image, Text } from 'theme-ui'\nimport { keyframes } from '@emotion/react'\n\nconst slideIn = keyframes({\n from: { transform: 'translateX(0)' },\n to: { transform: 'translateX(-70%)' }\n})\n\nexport default function Beest() {\n return (\n \n \n \n \n\n \n Spend 40 hours building projects, fly to the Netherlands, build a\n mechanical animal!\n \n \n \n Get building!\n \n \n \n \n )\n}\n" }, { "path": "components/index/cards/button.tsx", "content": "/** @jsxImportSource theme-ui */\nimport { Box, Button, Text } from 'theme-ui'\nimport ReactTooltip from '../../react-tooltip'\nimport Icon from '@hackclub/icons'\n\ntype ButtonsProps = {\n children: React.ReactNode\n icon?: string\n customIcon?: React.ReactNode\n id: string\n content?: React.ReactNode\n link?: string\n primary?: boolean | string\n overrideColor?: string\n zIndex?: number\n sx?: any\n}\n\nexport default function Buttons({\n children,\n icon,\n customIcon,\n id,\n content,\n link,\n primary,\n overrideColor,\n zIndex,\n sx,\n ...props\n}: ButtonsProps) {\n const fontWeight = primary ? '700' : '400'\n\n return (\n \n \n {customIcon ? (\n \n {customIcon}\n \n ) : (\n \n )}\n \n {children}\n \n \n {\n return null\n }}\n className=\"custom-tooltip-radius custom-arrow-radius\"\n arrowRadius=\"2\"\n tooltipRadius=\"10\"\n >\n {content}\n \n \n )\n}\n" }, { "path": "components/index/cards/card-model.tsx", "content": "import Icon from '../../icon'\nimport { Box, Card, Flex, Image, Link, Text } from 'theme-ui'\nimport ReactTooltip from '../../react-tooltip'\nimport Comma from '../../comma'\n\n/** @jsxImportSource theme-ui */\nconst CardModel = ({\n background,\n children,\n image,\n image_fit,\n link,\n highlight,\n github_link,\n badge,\n text,\n color,\n stars,\n delay,\n position,\n filter,\n visible = false,\n ...props\n}: {\n [x: string]: any\n background?: any\n children?: any\n image?: any\n image_fit?: any\n link?: any\n highlight?: any\n github_link?: any\n badge?: any\n text?: any\n color?: any\n stars?: any\n delay?: any\n position?: any\n filter?: any\n visible?: boolean\n}) => (\n // \n \n {badge && (\n \n {text || 'Happening now'}\n \n )}\n {github_link && (\n \n {position === 'bottom' ? (\n \n \n \n \n {stars ? (\n \n ⭐️ {stars}\n \n ) : (\n <>\n )}\n \n ) : (\n \n {stars ? (\n \n ⭐️ {stars}\n \n ) : (\n <>\n )}\n \n \n \n \n )}\n \n )}\n {image && (\n \n )}\n {children}\n \n \n // \n)\n\nexport default CardModel\n" }, { "path": "components/index/cards/clubs.tsx", "content": "/** @jsxImportSource theme-ui */\nimport Buttons from './button'\nimport CardModel from './card-model'\nimport { Box, Grid, Flex, Image, Text } from 'theme-ui'\n\nconst Cover = () => (\n \n)\n\nexport default function Clubs() {\n // let [fooRef, setFooRef] = useState('')\n // let [toggle, setToggle] = useState(true)\n\n return (\n \n \n \n \n A Network of 1000+ Coding Clubs\n \n \n \n \n Join or start a Hack Club and be part of a network of high\n quality coding clubs where you learn to code entirely through\n building things.\n \n \n You can start with no experience and build and ship a project every\n meeting.\n \n \n \n Start a club\n \n \n \n \n \n )\n}\n" }, { "path": "components/index/cards/fallout.tsx", "content": "/** @jsxImportSource theme-ui */\nimport { Box, Text, Image } from 'theme-ui'\nimport CardModel from './card-model'\nimport Buttons from './button'\n\nexport default function Fallout() {\n return (\n \n \n \n \n\n \n \n \n Build hardware projects, track your hours, then{' '}\n \n attend a hardware hackathon in Shenzhen!\n \n \n \n Start Building\n \n \n \n )\n}\n" }, { "path": "components/index/cards/flavortown.tsx", "content": "/** @jsxImportSource theme-ui */\nimport CardModel from './card-model'\nimport { Box, Flex, Grid, Image, Text } from 'theme-ui'\nimport Buttons from './button'\n\nexport default function Flavortown() {\n return (\n \n \n \n \n\n \n Make a website, game, hardware project, or anything your heart\n desires, share your project for others to experience and to get\n cookies - our virtual currency, and exchange your cookies for iPads,\n MacBooks, Raspberry Pis and so many more things - all for free!\n \n \n Start Cooking\n \n \n\n \n \n \n \n \n \n \n \n )\n}\n" }, { "path": "components/index/cards/hackathons.tsx", "content": "/** @jsxImportSource theme-ui */\nimport CardModel from './card-model'\nimport { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'\nimport Buttons from './button'\nimport Dot from '../../dot'\nimport { formatDate } from '../../../lib/dates'\n\nconst Cover = () => (\n \n)\n\nexport default function Hackathons({ data, stars }) {\n return (\n \n \n \n \n High School Hackathons\n \n \n \n \n We support the largest network of high school hackathons in the\n world. From an online community of organizers to free stickers and\n more!{' '}\n \n \n \n Attend a hackathon\n \n \n Organizer? Learn more.\n \n \n \n \n \n \n Upcoming Hackathons\n \n {data.slice(0, 5).map(data => (\n \n {data.logo && (\n \n \n \n )}\n \n \n {data.name}\n \n \n {formatDate({ format: 'mmmm d', date: data.start })}\n \n \n \n ))}\n \n \n \n \n \n Upcoming Hackathons:\n \n \n {data.slice(0, 2).map(data => (\n \n {data.logo && (\n \n \n \n )}\n {data.name}\n \n ))}\n \n \n \n )\n}\n" }, { "path": "components/index/cards/haxidraw.tsx", "content": "/** @jsxImportSource theme-ui */\nimport CardModel from './card-model'\nimport { Box, Flex, Grid, Text } from 'theme-ui'\nimport Buttons from './button'\n\nexport default function Haxidraw({ stars }) {\n return (\n \n \n Blot\n \n \n \n \n Blot is an open source drawing machine and online editor, designed\n to be a fun and beginner friendly introduction to digital\n fabrication and generative art.\n \n \n \n \n \n Learn more\n \n \n Create something in the editor\n \n \n Share your creations and chat on Slack\n \n \n \n \n \n )\n}\n" }, { "path": "components/index/cards/hcb.tsx", "content": "/** @jsxImportSource theme-ui */\nimport CardModel from './card-model'\nimport { Box, Grid, Heading, Text } from 'theme-ui'\nimport Buttons from './button'\n\nexport default function Bank({ data }) {\n return (\n \n \n \n HCB\n \n \n \n \n Become a 501(c)3 nonprofit and join 700+ teams using HCB to run\n world-class events.\n \n \n This platform is built and maintained by the Hack Club team.\n \n \n Start fundraising!\n \n \n \n {/* */}\n \n \n \n \n \n \n {' '}\n \n {/* */}\n \n \n \n )\n}\n" }, { "path": "components/index/cards/hctg.tsx", "content": "/** @jsxImportSource theme-ui */\nimport CardModel from './card-model'\nimport { Box, Image, Text } from 'theme-ui'\n\nexport default function HackClubTheGame() {\n return (\n \n \n \n \n Hack Club: The Game\n \n\n \n Build any type of project you want! Submit them, and eventually you'll\n be able to compete in a scavenger hunt adventure game across\n Manhattan!\n \n \n \n \n \n \n Join the Game!\n \n \n \n )\n}\n" }, { "path": "components/index/cards/horizons.tsx", "content": "/** @jsxImportSource theme-ui */\nimport CardModel from './card-model'\nimport { Text, Box, Image, Button } from 'theme-ui'\nimport localFont from 'next/font/local'\n\nconst hypebuzz = localFont({\n src: '../../../public/horizons/Hypebuzz.otf'\n})\nexport default function Horizons() {\n return (\n \n \n \n \n \n \n \n HIGH SCHOOL FLAGSHIP HACKATHONS ACROSS THE WORLD\n \n \n \n {[\n { color: '#ffa936', height: '15px' },\n { color: '#f86d95', height: '15px' },\n { color: '#46467c', height: '15px' }\n ].map(({ color, height }) => (\n \n ))}\n \n \n \n \n CLICK HERE TO LEARN MORE!\n \n \n \n \n \n )\n}\n" }, { "path": "components/index/cards/jackpot.tsx", "content": "/** @jsxImportSource theme-ui */\nimport { Box, Text, Image, Grid, Flex } from 'theme-ui'\nimport CardModel from './card-model'\n\nexport default function Jackpot() {\n return (\n \n \n \n \n \n No hours required...enjoy a weekend hackathon in Las Vegas!\n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n" }, { "path": "components/index/cards/macondo.tsx", "content": "/** @jsxImportSource theme-ui */\nimport { Box, Text, Image } from 'theme-ui'\nimport CardModel from './card-model'\nimport Buttons from './button'\n\nexport default function Macondo() {\n return (\n \n \n\n \n \n \n Build software or hardware projects (with up to $1k in funding for\n hardware), win prizes, and{' '}\n \n fly to Bogotá, Colombia for a hackathon!\n \n \n \n Start Building\n \n \n \n )\n}\n" }, { "path": "components/index/cards/mailing-list.tsx", "content": "import Icon from '@hackclub/icons'\nimport { useEffect, useRef, useState } from 'react'\nimport { Box, Button, Card, Flex, Grid, Input, Link, Text } from 'theme-ui'\nimport { format, parse } from 'date-fns'\nimport BGImg from '../../background-image'\nimport background from '../../../public/home/footer.png'\nimport MailCard from '../../mail-card'\n\nconst Loading = () => (\n \n)\n\nconst MailingList = () => {\n const [submitting, setSubmitting] = useState(false)\n const [submitted, setSubmitted] = useState(false)\n const [data, setData] = useState({ finalHtml: [], names: [] })\n const formRef = useRef(null)\n\n const handleSubmit = async e => {\n e.preventDefault()\n setSubmitting(true)\n\n const res = await fetch('/api/mailing-list', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n name: e.target.name.value,\n email: e.target.email.value\n })\n })\n\n formRef.current.reset()\n\n if (res.ok) {\n setSubmitted(true)\n }\n setSubmitting(false)\n }\n\n // This lovely concoction of JavaScript basically fetches the last two newsletters from the GitHub repo,\n // converts them to HTML, gets rid of those HTML tags, the sets all of that as the state of the component.\n // Then, It makes a second fetch request to get the filename, so that can be used to determine the link.\n // After that, it removes the file extension, so we can use that as the date.\n // Finally, it sets the state of data to the final HTML and the names of the files, so we can map that later on!\n\n useEffect(() => {\n Promise.all([\n fetch(\n 'https://api.github.com/repos/hackclub/leaders-newsletter/contents/updates'\n )\n .then(response => response.json())\n .then(data => data.sort((a, b) => b.name.localeCompare(a.name))) // Makes sure we only get the latest two newsletters\n .then(data => data.slice(0, 2))\n .then(data => Promise.all(data.map(item => fetch(item.download_url)))) // Makes a separate fetch request for the content of each newsletter\n .then(responses =>\n Promise.all(responses.map(response => response.text()))\n )\n .then(markdown =>\n import('@hackclub/markdown').then(mod =>\n Promise.all(markdown.map(md => mod.default(md)))\n )\n )\n .then(html =>\n html.map(html =>\n html.replace(/<[^>]*>/g, '').replace(/The Hackening/g, '')\n )\n ), // Chucks out all html tags + 'The Hackening'\n\n fetch(\n 'https://api.github.com/repos/hackclub/leaders-newsletter/contents/updates'\n )\n .then(response => response.json())\n .then(data => data.sort((a, b) => b.name.localeCompare(a.name)))\n .then(data => data.map(item => item.name.split('.')[0])) // Grabs the name and gets rid of the file extension\n ]).then(([finalHtml, names]) => setData({ finalHtml, names }))\n }, [])\n\n return (\n \n \n \n \n \n \n Join the newsletter\n \n \n We'll send you an email no more than once a month, when we\n work on something cool for you. Check out our{' '}\n \n previous issues\n \n .\n \n \n \n \n \n \n
\n \n
\n \n \n \n \n {data.finalHtml\n .map((html, index) => (\n \n ))\n .reverse()}\n \n \n \n \n \n )\n}\n\nexport default MailingList\n" }, { "path": "components/index/cards/sinerider.tsx", "content": "/** @jsxImportSource theme-ui */\nimport CardModel from './card-model'\nimport { Box, Flex, Grid, Image, Text } from 'theme-ui'\nimport Buttons from './button'\n\nexport default function Sinerider({ stars }) {\n return (\n \n \n \n \n \n \n SineRider is a game about love and graphing, powered by teenage\n hackers of all kinds: artists, musicians, programmers, storytellers…\n so if that’s you, come join us! We can always use help keeping\n everything up to date and running smoothly.\n \n \n \n Play now\n \n \n Join the development\n \n \n \n \n \n )\n}\n" }, { "path": "components/index/cards/slack.tsx", "content": "/** @jsxImportSource theme-ui */\nimport CardModel from './card-model'\nimport { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'\nimport Buttons from './button'\nimport Event from '../events'\nimport Comma from '../../comma'\n\nconst Cover = () => (\n \n)\nconst Stats = ({ data, subheading, nonMobile = false }) => (\n \n \n {data}\n \n \n {subheading}\n \n \n)\nexport default function Slack({ data, events }) {\n return (\n t.util.gx('cyan', 'purple'),\n minHeight: ['500px', '400px'],\n py: [3, 3, 4]\n }}\n >\n \n \n \n \n Our Online Community\n \n \n \n \n \n Coding doesn't have to be a solitary activity. At Hack Club, we\n make remarkable things together, and in our Slack you'll find\n awesome people to hang out with too. Code together, find your\n programming community, dream up something wild, or just #lounge.\n \n \n Occasionally we invite someone we really want to speak to (like Sal\n Khan, George Hotz, and Lady Ada) and host an{' '}\n \n AMA\n {' '}\n with them.{' '}\n \n \n \n Join our Slack\n \n 0 ? 'block' : 'none'\n }}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n" }, { "path": "components/index/cards/sleepover.tsx", "content": "/** @jsxImportSource theme-ui */\nimport { Box, Image, Text } from 'theme-ui'\nimport CardModel from './card-model'\n\nexport default function Sleepover() {\n return (\n \n \n {/* Numbered list on the right */}\n \n \n {[\n 'Spend 30 hours learning to code',\n 'Earn prizes like plushies, iPads, and more!',\n 'Fly to a slumber party themed hackathon in Chicago this April!'\n ].map((item, i) => (\n \n \n {i + 1}.\n \n \n {item}\n \n \n ))}\n \n \n\n {/* Logo on the left */}\n \n \n {/* Button below logo - tablet/desktop only */}\n \n \n \n \n\n {/* Button at bottom center - mobile only */}\n \n \n \n \n \n )\n}\n" }, { "path": "components/index/cards/sprig-console.tsx", "content": "/** @jsxImportSource theme-ui */\nimport { Box, Grid, Image, Text } from 'theme-ui'\nimport Buttons from './button'\nimport CardModel from './card-model'\nimport Tilt from '../../tilt'\n\nexport default function SprigConsole({ stars, consoleCount }) {\n return (\n \n \n \n \n \n Join the other {consoleCount} teenagers with Sprigs!\n \n \n \n \n \n Play your own Sprig games on this console, which you can assemble\n and disassemble. Each kit includes parts needed for getting\n started with hardware engineering and embedded systems\n programming.{' '}\n \n \n Build a game and get your console\n \n \n \n \n \n \n \n \n \n )\n}\n" }, { "path": "components/index/cards/sprig.tsx", "content": "/** @jsxImportSource theme-ui */\nimport CardModel from './card-model'\nimport { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'\nimport Buttons from './button'\nimport RelativeTime from 'react-relative-time'\n\nfunction Game({ game, gameImage, gameImage1, ...props }) {\n return (\n ')`,\n borderImageOutset: '2',\n boxShadow: '0 8px 8px rgba(0, 0, 0, 0.2)',\n '&:hover': {\n transform: 'scale(1.05)',\n background: 'rgba(77, 90, 114, 0.8)'\n }\n }}\n {...props}\n >\n ')`,\n borderImageOutset: '2',\n height: '100%',\n textDecoration: 'none'\n }}\n >\n {/* \n \n */}\n \n \n {game?.title}\n \n \n by {game?.author}\n \n \n \n \n \n \n \n )\n}\n\nexport default function Sprig({ stars, game, gameImage, gameImage1 }) {\n return (\n \n \n \n \n \n Draw, make music, and craft games in our web-based JavaScript game\n editor, which has been used by 7k+ makers around the world.\n \n \n \n Build a Sprig game\n \n \n Review games / build the engine\n \n \n Connect with other game devs\n \n \n \n \n \n New from{' '}\n \n the gallery\n \n ...\n \n \n \n \n \n \n \n \n \n \n )\n}\n" }, { "path": "components/index/cards/stasis.tsx", "content": "/** @jsxImportSource theme-ui */\nimport { Box, Flex, Image, Text } from 'theme-ui'\nimport CardModel from './card-model'\n\nexport default function Stasis() {\n return (\n \n \n \n \n \n\n \n We're bringing 100+ hack clubbers from all over the world to Austin,\n TX for a 4-day hardware hackathon, and we're funding your next biggest\n hardware projects.\n \n\n \n \n \n \n \n )\n}\n" }, { "path": "components/index/cards/workshops.tsx", "content": "/** @jsxImportSource theme-ui */\nimport CardModel from './card-model'\nimport { Box, Card, Flex, Grid, Heading, Image, Text } from 'theme-ui'\nimport Buttons from './button'\n\nconst WorkshopCard = ({\n slug,\n name,\n description,\n img,\n height,\n section,\n ...props\n}) => (\n \n \n \n {name}\n \n {description}\n \n \n \n \n \n)\n\nexport default function Workshops({ stars }) {\n return (\n \n \n Workshops\n \n \n \n \n 100+ community-contributed, self-guided coding tutorials and ideas.\n Learn to code by building, one project at a time.\n \n \n Browse The Workshops\n \n \n Build A Workshop\n \n \n \n \n \n \n \n \n )\n}\n" }, { "path": "components/index/carousel-cards.tsx", "content": "import { Box, Card, Image, Link, Text } from 'theme-ui'\nimport Icon from '../icon'\n\nexport default function CarouselCards({\n background,\n backgroundImage,\n backgroundSize,\n titleColor,\n descriptionColor,\n title,\n description,\n img,\n link\n}) {\n return (\n \n \n \n \n \n {title}\n \n \n {description}\n \n \n \n \n \n )\n}\n" }, { "path": "components/index/carousel.tsx", "content": "/** @jsxImportSource theme-ui */\nimport { Box, Text } from 'theme-ui'\nimport CarouselCards from './carousel-cards'\nimport React, { useState } from 'react'\nimport Ticker from 'react-ticker'\nimport PageVisibility from 'react-page-visibility'\n\nexport default function Carousel({ cards }) {\n const [speed, setSpeed] = useState(5)\n\n const [pageIsVisible, setPageIsVisible] = useState(true)\n\n const handleVisibilityChange = isVisible => {\n setPageIsVisible(isVisible)\n }\n\n return (\n \n {pageIsVisible && (\n \n \n Here are a few projects you could get involved in:\n \n \n {() => (\n setSpeed(2)}\n onMouseOut={() => setSpeed(6)}\n >\n {cards.map((card, idx) => (\n \n ))}\n \n )}\n \n \n )}\n \n )\n}\n" }, { "path": "components/index/ctas.tsx", "content": "/** @jsxImportSource theme-ui */\nimport { Box, Text, Image, Card } from 'theme-ui'\nimport React, { useState } from 'react'\nimport PageVisibility from 'react-page-visibility'\n\nexport default function CTAS({ cards }) {\n const [pageIsVisible, setPageIsVisible] = useState(true)\n\n const handleVisibilityChange = isVisible => {\n setPageIsVisible(isVisible)\n }\n\n return (\n \n {pageIsVisible && (\n \n {cards.map((card, idx) => {\n const {\n background,\n backgroundImage,\n backgroundSize,\n gridBackground,\n stickerImage,\n stickerImageScale,\n buttonImage,\n animatedStickers,\n\n description,\n descriptionColor,\n\n title,\n logo,\n logoScale,\n\n link\n } = card\n\n return (\n \n {animatedStickers && (\n \n {animatedStickers.map((sticker, i) => (\n \n ))}\n \n )}\n {stickerImage && !animatedStickers && (\n \n )}\n \n \n \n {description}\n \n {buttonImage && (\n \n )}\n \n \n )\n })}\n \n )}\n \n )\n}\n" }, { "path": "components/index/events.tsx", "content": "import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'\nimport tt from 'tinytime'\nimport Link from 'next/link'\n\nconst past = dt => new Date(dt) < new Date()\nconst now = (start, end) =>\n new Date() > new Date(start) && new Date() < new Date(end)\n\nconst Event = ({ id, slug, title, desc, leader, avatar, start, end, cal }) => (\n \n \n \n \n {tt('{MM} {Do}').render(new Date(start))}{' '}\n {tt('{h}:{mm}').render(new Date(start))}–\n {tt('{h}:{mm} {a}').render(new Date(end))}\n \n \n \n {title}\n \n \n {now(start, end)}\n {!avatar.includes('emoji') && (\n \n )}\n {leader}\n \n {/* {now(start, end) && (\n \n )} */}\n \n \n)\n\nexport default function Events({ events }) {\n return (\n \n \n {events\n .slice(0, 3)\n .map(event =>\n !past(event.end) ? : <>\n )}\n \n \n )\n}\n" }, { "path": "components/index/github.tsx", "content": "import { Badge, Image, Text } from 'theme-ui'\nimport RelativeTime from 'react-relative-time'\n\ntype GitHubProps = {\n type: 'commit' | 'issue' | 'pull_request'\n img: string\n user: string\n time: string\n message: string\n opacity?: number\n url?: string\n}\n\nexport default function GitHub({\n type,\n img,\n user,\n time,\n message,\n opacity,\n url,\n ...props\n}: GitHubProps) {\n return (\n \n \n \n {user}\n \n \n {message}\n \n \n \n \n \n )\n}\n" }, { "path": "components/letterhead.tsx", "content": "/** @jsxImportSource theme-ui */\nimport { Avatar, Badge, Box, Container, Flex, Heading } from 'theme-ui'\nimport Head from 'next/head'\nimport Meta from '@hackclub/meta'\nimport Nav from './nav'\nimport Footer from './footer'\nimport ForceTheme from './force-theme'\n\nconst Authored = ({ name, avatar, url, date, ...props }) => (\n \n \n \n {name}\n \n \n {date}\n \n \n)\n\nconst Letterhead = ({\n title,\n desc,\n author = { name: null, avatar: null, url: null },\n date,\n img,\n path,\n includeMeta = true,\n hideGitHub = false,\n children,\n ...props\n}) => (\n <>\n \n