Add/change/delete surrounding delimiter pairs with ease. Written with :heart: in Lua.

nvim-surround

The home for ACM Cyber at UCLA! Website for the premier cybersecurity club at UCLA.

acmcyber.com

An archive of past challenges from LA CTF hosted by ACM Cyber at UCLA and Psi Beta Rho.

lactf-archive

The official (award-winning) website for ACM at UCLA, the largest tech community on campus!

website

Hardware/Firmware for LA Hacks 2022 2nd Place Overall, Best Hardware Hack, Life Hacks Track Winner: An IoT Communal Sharing System

lockr-hardware

📊 Website with UCLA grade distributions from 2021-2024

uclagrades.com

opensource

LA CTF hosted by ACM Cyber & Psi Beta Rho! Website for the largest annual cybersecurity competition at UCLA! Whether you are tackling your first exploit or have professional experience, there will be challenges just right for you!

lactf-website

Platform for LA CTF. Forked from redpwn/rctf.

lactf-platform

ACM Cyber's modular script for syncing unified event information across disparate platforms!

cyanea

icpc-website

A proof verification of "Optimal Implementation of Quantum Gates with Two Controls".

2ControlVerification

A next.js, typescript, react starter repository with built-in linting and github actions for ACM project development!

next-ts-starter-template

XHacks 2021 Startup Track Winner: Be Heard. Educate, Enact, Empower. No voice left behind. (backend)

be-heard-backend

uclaacm/bias-by-us

https://api.github.com/repos/uclaacm/acmcyber.com/contents/{+path}

update archives using AI sponsored by microsoft

uclaacm/acmcyber.com

please remove copilot's "Increased" / "Changed" comments :D

either remove this copilot comment or apply it to all of the `onClick={(e) => e.stopPropagation()}`

oops i changed this from `Array.isArray` earlier but now I realize that that is probably a better way of putting this condition

copilot, this is unnecessary; we currently throw away the original quarterId after parsing Cyanea information in data.tsx, but we should just preserve that information in the `QuarterArchive` interface and reuse it here

Do we need to leave this in? It's unlikely that anyone will ever have to manually export the website, and next export should complain that you need to run next build first :D

Icon images should include an `alt` attribute (even if empty) to improve accessibility for screen readers.
```suggestion
          <img className={styles.icon} src="/images/utube.svg" alt="YouTube icon" loading="lazy" />
```

## Pull Request Overview

This PR enhances the archive page by adding a search bar with client-side filtering, improving anchor link behavior with smooth scrolling and IDs, and introducing responsive styling and lazy loading.

- Introduces search input state, filtering logic, and clear button
- Adds scroll-behavior, responsive font sizing, and text truncation in styles
- Implements lazy loading for images and anchor IDs for quarters/series; adds an `export` script

### Reviewed Changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 1 comment.

| File                     | Description                                                           |
| ------------------------ | --------------------------------------------------------------------- |
| styles/Archive.module.scss | Added search bar styles, anchor link behavior, responsive sizing, and ellipsis truncation |
| pages/archive.tsx        | Hooked up search state/filtering, anchor link IDs, lazy-loaded images, and popup stopPropagation |
| package.json             | Added “export” script for Next.js static export                        |


<details>
<summary>Comments suppressed due to low confidence (3)</summary>

**pages/archive.tsx:15**
* New search/filtering behavior isn't covered by existing tests; consider adding unit or integration tests to verify filtering logic and UI updates.
```
  const [searchQuery, setSearchQuery] = useState<string>("");
```
**pages/archive.tsx:273**
* Returning `null` in a className template will render the string "null"; consider using an empty string (`''`) or conditional class merging.
```
        mounted ? popUpStyle["mounted"] : null
```
**pages/archive.tsx:92**
* The `useMemo` hook references `archive` but doesn't include it in the dependency array; add `archive` if it can change to ensure accurate updates.
```
    [searchQuery]
```
</details>



Consider memoizing `filteredArchive` using `useMemo` to avoid refiltering on every render, improving performance for large archives.
```suggestion
  const filteredArchive = useMemo(() => 
    archive
      .map((quarter) => ({
        ...quarter,
        series: quarter.series
          .map((series) => ({
            ...series,
            events: series.events.filter((event) =>
              eventMatchesSearch(event, searchQuery)
            ),
          }))
          .filter((series) => series.events.length > 0),
      }))
      .filter((quarter) => quarter.series.length > 0),
    [searchQuery]
  );
```

For better accessibility, add an associated `<label>` element for the search input rather than relying solely on placeholder text.
```suggestion
      <div className={styles.searchContainer}>
        <label htmlFor="searchInput" className={styles.searchLabel}>
          Search events:
        </label>
        <input
          type="text"
          id="searchInput"
```

[nitpick] Avoid using `!important` for `font-size` and `line-height` in `.link`; consider restructuring specificity or using more specific selectors instead.

Add `display: inline-block` (or `block`) to `.link` so that `text-overflow: ellipsis` functions correctly, as it requires a block or inline-block container.

## Pull Request Overview

This PR adds client-side search functionality to the Archive page, enhances anchor-link navigation and responsiveness in the SCSS, and introduces a static export script.

- Implements search state, filtering logic, and clear button in `pages/archive.tsx`
- Enhances `styles/Archive.module.scss` with smooth scrolling, anchor-link styles, responsive typography, and search bar UI
- Adds an `"export"` script to `package.json` for Next.js static export

### Reviewed Changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 4 comments.

| File                         | Description                                                     |
| ---------------------------- | --------------------------------------------------------------- |
| styles/Archive.module.scss   | Added search bar, anchor links, responsive sizing, and ellipsis |
| pages/archive.tsx            | Introduced search/filter logic, anchor-link IDs, and event IDs  |
| package.json                 | Added `"export"` script for `next build && next export`         |


<details>
<summary>Comments suppressed due to low confidence (1)</summary>

**pages/archive.tsx:52**
* New search/filter functionality lacks unit or integration tests; consider adding tests for `eventMatchesSearch` and overall filtering behavior to ensure correctness.
```
  const eventMatchesSearch = (event: CyaneaEvent, query: string): boolean => {
```
</details>



open source at UCLA

Projects →

Learning →

Events →

Contribute →

featured project

acmcyber.com

what we've been doing recently...