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

• Max Lee (@maxywaxyy)
• Nishant Ray (@Nishant-Ray)
• Arnav Roy (@aroy23)
• Daniel Zhou (@danielhzhou)
• Jaewook Cho (@dcho-jaewook)
• Jenna Wang (@ariyin)
• Hannah Kendall (@hannahkendall04)
• Kian Shandi (@kiankian)
• Kayla Hamakawa (@kaylahama)

Alumni Dev Team Contributors

• James Wu (@jamesmwu)
• Nathan Zhang (@nathanzzhang)
• Andy Lewis (@datowq)
• 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.9 or newer
• 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

Social preview image

index.html points both share-image tags at https://hack.uclaacm.com/hack-banner.png. Keep these URLs absolute so crawlers can read them from any route without running JavaScript. Vite copies the committed public/hack-banner.png into the production build unchanged.

The public image is a 1200 × 630 PNG made from src/images/hack-banner.png. It preserves the complete artwork with padding in the original background color. After changing the original, regenerate the public image with the existing Sharp dependency:

node --input-type=module -e "
import sharp from 'sharp';
await sharp('src/images/hack-banner.png')
  .resize(1200, 630, { fit: 'contain', background: '#f9dcfe' })
  .png()
  .toFile('public/hack-banner.png');
"

Homepage intro

The lightbulb intro plays only when the initial page load is the homepage. Navigating to the homepage from another page keeps the bulb and wiring lit, without replaying the dark overlay or hiding the navbar. Reloading the homepage plays the intro again.

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.

Add new quarters at the top of the archive. Use slide decks to verify session titles and presenters. Leave directors empty when no series directors are identified; the archive hides that credit. Include only available resource links.

Workshop search matches series names, session names, session tags, and presenters. Queries are case-insensitive, and every whitespace-separated word must match the same session's searchable text, including its parent series name. Unmatched queries show a message and a Clear search button that restores the archive.

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.

When an officer becomes an alum, remove their entry from src/data/profiles.js and add their name under the appropriate year in src/data/alumni.js.

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.

Keep the original officer and gallery JPEGs in their existing folders. npm run dev and npm run build generate responsive WebP assets with Sharp in src/images/optimized/; do not edit or commit that generated directory. After replacing photos while the dev server is running, run npm run images. The generator reads the active officer roster and the eight gallery photos.

Portraits are prepared 600 pixels before the team section enters view, including the adjacent carousel groups. Alternate photos load after the normal portrait, at low priority; a card keeps its normal portrait visible until its alternate is ready. The gallery likewise defers its images until the section is nearby.

The officer carousel autoplays only when at least 80% visible, not hovered, and keyboard focus is outside it. TeamSlideshow controls these conditions; keep Slick's pauseOnHover disabled so its internal hover state does not compete. Card flip buttons cover the existing cards and expose biography visibility with aria-expanded. Keep inactive Slick slides' buttons out of the tab order.

Officer cards show one at a time through 768px and two through 1024px. These layouts use readable fixed-size type and content-height cards above the campus artwork; do not restore absolute positioning or viewport-scaled biography text on phones. Keep the portrait sizes and adjacent-image preparation aligned with the layout breakpoints in TeamSlideshow. Through 1024px, swipe navigation and a small position counter replace the dot grid. Arrow keys navigate when the carousel has focus. Larger screens retain Slick pagination.

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.

Keep Vite's base set to / for this root-hosted site so direct visits and reloads on nested routes such as /blog/:blogId load JavaScript and CSS from /assets/. Preserve public/_redirects so Netlify serves the app for client-side routes.

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.