mirror of
https://github.com/System-End/site.git
synced 2026-04-19 15:18:18 +00:00
docs: cleanup readme and use standard conventions (#1844)
- Local dev setup guide is now a numbered list, and uses fences instead of dollar signs (fixes MD014) - The "Please note" for next.config now uses the GFM note block - Added actual alt text to screenshots, instead of just "Screenshot date" - Removed plausible link that leads to a 404
This commit is contained in:
BananaJeans
GitHub
parent
a7d2e7f7e5
commit
5733a57c2f
1 changed files with 20 additions and 13 deletions
33
README.md
33
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:
|
||||
|
||||
<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 :)
|
||||
|
||||
|
|
@ -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:
|
||||
|
||||
|
|
@ -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_
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue