diff --git a/README.md b/README.md index 795145f0..90e0a18c 100755 --- a/README.md +++ b/README.md @@ -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]. @@ -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:
Create a new card -Screenshot 2023-08-16 at 9 09 55 PM +Screenshot of the Sprig card 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! +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 :) @@ -48,7 +55,7 @@ Your challenge: try and make the card as unique as possible, like a mini poster!
Add to the carousel -Screenshot 2023-08-16 at 9 09 11 PM +Screenshot of a carousel section 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: @@ -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" - } +} ```
-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_