ACM Hack Website

This repository contains the code for ACM Hack’s website!

This website is developed with React using Vite, and is an active project being developed by ACM Hack’s Dev Team.

ACM Hack Dev Team Contributors

• James Wu (@jamesmwu)
• Jenna Wang (@ariyin)
• Hannah Kendall (@hannahkendall04)
• Kayla Hamakawa (@kaylahama)
• Andy Lewis (@datowq)
• Nathan Zhang (@nathanzzhang)

Alumni Dev Team Contributors

• Jakob Reinwald (@jakobreinwald)
• Katelyn Yu (@katelynsyu)
• Nareh Agazaryan (@nareha)
• Einar Balan (@EinarBalan)
• Alex Xia (@khxia)
• Jody Lin (@jodymlin)
• Galen Wong (@GalenWong)
• Timothy Gu (@TimothyGu)

ACM Hack is a subcomittee of ACM @ UCLA, the largest Computer Science student organization in Southern California. Check out our website to learn more about who we are and what we do!

Getting Started

You’ll need:

• Git
• Node.js 20.x
• If you use VSCode, we recommend you install the Prettier extension to adhere to our linter rules.

Running the Project

Type the following lines in your command line:

$ git clone https://github.com/uclaacm/hack.uclaacm.com.git
$ cd hack.uclaacm.com
$ npm install
$ npm run dev

You can then navigate to http://localhost:8000/ in your browser to see the website!

Notes

• Be sure to run npm install every time there are changes to package.json. Usually you’ll want to run npm install in the following scenarios:
  • after pulling from main
  • after merging main into your branch
  • after switching branches (that may have different dependencies)
• This project uses ESLint to ensure code style compliance. ESLint is automatically run when you try to make a Git commit, though this can be overridden in exigent circumstances with --no-verify. To run ESLint manually, do npm run lint.

Troubleshooting

If something breaks in a weird way, try the following in order:

• run npm install
• delete the node_modules directory entirely and reinstall dependencies by running npm install

Maintenance

Adding Blog Posts

Our blogs are written in Markdown format.

To add new blogs, create a folder of the term under the directory blogPosts/. If the current year does not exist yet (e.g. winter2030). Then, create the directory that holds the blog post (e.g. hoth-intro). This would be the path to the blog post:

hack.uclaacm.com/blogs/winter2020-hoth-intro/

Then, create a index.md markdown file. Start the file with the following metadata format.

# Title
## Subtitle
### <Date>
#### By <Authors>

Example:

# Function and This
## JavaScript Chats with ACM Hack Session 1
### October 8th, 2019
#### By Galen Wong

Finally, update src/data/blogs.js by adding another object to the blogs array. The object should be of the following format:

{
  id: '<quarterYear>-<blogTitle>,
  title: <title>,
  author: <author>,
  date: <date (as a string)>,
  readTime: <readTime>,
  summary: <summary (matches subtitle)>
  markdown: new URL(<pathToPost>), import meta.url).href,
}

Adding Events to Workshop Archive

The event workshop data is statically stored (for now) in src/data/archive.js. This is incomplete as of Nov 2024, as a result of our migration off of the Gatsby infrastructure to v2 of the Hack website.

You can reference src/data/archive for the previous yml files containing workshop data.

Changing Officer Profiles

Officers come and go. We don't stay in college forever. To change the officer profiles, go to src/data/profiles.js. Modify the array directly.

The profile pictures of the officer is put under src/images/team. The naming of the file should be <id>.jpg, where <id> is specified in the data in profiles.js.

This format follows as well for team-easter-egg.

To modify alumni data, directly modify the array at src/data/alumni.js.

Deployment

Deployment is done automatically when the main branch is updated. We deploy using Netlify, and have our domain name hack.uclaacm.com set to point towards that deployment.

Continuous Integration (CI)

We set up Netlify to build our site for preview for every pull request. You can see the preview link right at our pull request.

But do note that Netlify has a monthly limit of 1000 build minutes. We share this quota with the HOTH website. Don't push too much.