Skip to content

docs: cleanup readme and use standard conventions #1844

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
3kh0 merged 1 commit into from
Feb 7, 2026
+20 −13
Merged

docs: cleanup readme and use standard conventions #1844

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 20 additions & 13 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,28 @@

Hack 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:

Download the code to your computer:
1. Download the code to your computer:

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

Install dependencies:
2. Install dependencies:

$ yarn
```bash
yarn
```

Start running the website on your computer:
3. Start running the website on your computer:

$ yarn dev
```bash
yarn dev
```

And then open up your web browser and go to [localhost:3000](http://localhost:3000).
4. Open up your web browser and go to [localhost:3000](http://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](./next.config.mjs).
> [!NOTE]
> There are a number of redirects and rewrites essential to the website's functionality, which you can see in [next.config.mjs](./next.config.mjs).

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

Expand All @@ -35,11 +42,11 @@ See something that could be better? Make a PR! Have an easter egg idea? Make a P
If you need to add content to the site, here's how you can:

<details> <summary>Create a new card</summary>
<img width="600" alt="Screenshot 2023-08-16 at 9 09 55 PM" src="https://github.com/hackclub/site/assets/65808924/fed45800-c834-4e4c-ad87-a21e01414fa9">
<img width="600" alt="Screenshot of the Sprig card" src="https://github.com/hackclub/site/assets/65808924/fed45800-c834-4e4c-ad87-a21e01414fa9">

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 <Buttons> 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!
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 `<Buttons>` 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 :)

Expand All @@ -48,7 +55,7 @@ Your challenge: try and make the card as unique as possible, like a mini poster!
<details>
<summary>Add to the carousel</summary>

<img width="600" alt="Screenshot 2023-08-16 at 9 09 11 PM" src="https://github.com/hackclub/site/assets/65808924/044660eb-fb3d-43b6-a270-64a3fe51f3ca">
<img width="600" alt="Screenshot of a carousel section" src="https://github.com/hackclub/site/assets/65808924/044660eb-fb3d-43b6-a270-64a3fe51f3ca">

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:

Expand All @@ -61,12 +68,12 @@ If there's a Hack Club or Hack Club community-led project (past or present) that
"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"
}
}
```

</details>

Every week, [thousands of people](https://plausible.io/hackclub.com) visit hackclub.com. What story to you want to tell?
Every week, thousands of people visit hackclub.com. What story to you want to tell?

_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_

Expand Down