search

hackclub / site

🌈 The new, new Hack Club website (uses Next.js & Theme UI).
https://hackclub.com
Other
191 stars 171 forks source link
hackclub hacktoberfest nextjs theme-ui

readme

Hack Club logo

Hack Club's Site (v3)

The source code for hackclub.com

Hack Club's new website. This codebase is what runs on hackclub.com. For new developers getting started, run the following in your terminal:

Download the code to your computer:

$ git clone https://github.com/hackclub/site && cd site

Install dependencies:

$ yarn

Start running the website on your computer:

$ yarn dev

And then open up your web browser and go to localhost:3000.

Please note: There are a number of redirects and rewrites essential to the website's functionality, which you can see in next.config.mjs.

Powered by Next.js with MDX, Theme UI, & Hack Club Theme.

Code under MIT License, assets may not be re-used or re-distributed.

Building hackclub.com

Join us in building Hack Club's homepage and show new hackers what Hack Club could be for them 💖.

See 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? :))

If you need to add content to the site, here's how you can:

Create a new card Screenshot 2023-08-16 at 9 09 55 PM Most 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! First, 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! Your 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 :)
Add to the carousel Screenshot 2023-08-16 at 9 09 11 PM If 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 [lib/carousel.json](lib/carousel.json) and add your card to the end of the json file. An example looks like this: ```json { "background": "dark", "titleColor": "white", "descriptionColor": "white", "title": "Hackers Wanted", "description": "Our open love letter to hackers", "img": "https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f4bb@2x.png", "link": "/hackers-wanted" } ```

Every week, thousands of people visit hackclub.com. What story to you want to tell?

Have questions? Join us in #hackclub-site-dev and to learn more about the style guide at Hack Club check this out

Hack Club, 2024. MIT License.