Skip to content

feat(home): section dividers + lint-staged pre-commit#106

Open
BK5102 wants to merge 3 commits into
mainfrom
feat/section-separation
Open

feat(home): section dividers + lint-staged pre-commit#106
BK5102 wants to merge 3 commits into
mainfrom
feat/section-separation

Conversation

@BK5102

@BK5102 BK5102 commented May 19, 2026

Copy link
Copy Markdown
Contributor

Summary

Two improvements in one PR:

  1. Visual separation between homepage sections. Adds a soft horizontal gradient divider above each .section after the first on the homepage (About / Mission / Programs / Sponsors / Team), so the page reads as distinct chunks.
  2. Faster lint pre-commit hook. Replaces the whole-repo pnpm run lint in .husky/pre-commit with lint-staged, which runs ESLint + Prettier on only the files staged for commit.

Why

  • The homepage sections previously flowed into each other with only vertical padding, making the transitions feel indistinct. A subtle gradient line gives them clear separation without a heavy hard rule that would clash with the dark theme.
  • Running eslint . over the whole repo on every commit was both slow and made every unrelated commit fight pre-existing lint noise elsewhere in the codebase. lint-staged scopes lint+format to only the files in the commit and auto-fixes whitespace/format problems before the commit lands.

Changes

Section dividers (src/app.css)

  • .section is now position: relative so its ::before pseudo can anchor to it.
  • .section + .section::before renders a 3px-tall, up-to-80rem-wide gradient that fades from transparent to rgba(231,231,229,0.35) at the center and back to transparent.
  • Width clamps at 92% so it stays inset from the viewport edges on narrow screens.
  • The first .section (About, sitting directly under the Hero) deliberately gets no divider since the Hero already provides visual separation.

Lint-staged pre-commit (package.json, .husky/pre-commit)

  • Adds lint-staged to devDependencies and a lint:staged script.
  • Adds a lint-staged config block:
    • *.{ts,tsx,js,jsx}eslint --max-warnings=0 --fix then prettier --write
    • *.{css,md,json,yml,yaml,html}prettier --write
  • .husky/pre-commit now runs pnpm run lint:staged instead of full-repo lint + format:check. Vitest still runs to catch behavioral regressions.
  • .husky/pre-push (typecheck + tests) is unchanged.

Reviewer notes

  • Run pnpm install once before merging so pnpm-lock.yaml picks up the new lint-staged dev dep. (Lockfile wasn't updated in this PR because the local worktree didn't have a full node_modules tree.)
  • Hook still aborts on real lint errors in staged files (--max-warnings=0).

Test plan

Section dividers

  • Visit / and confirm a soft horizontal divider sits between About / Mission, Mission / Programs, Programs / Sponsors, and Sponsors / Team
  • About has no divider above it (Hero sits above it)
  • On mobile the divider stays inside the viewport (clamped to 92%)

Lint-staged

  • pnpm install resolves cleanly
  • git commit on a small TS/TSX edit runs eslint+prettier on just that file and passes
  • git commit with an intentional lint error in a staged file fails
  • Editing a file you did NOT stage no longer affects the commit
  • git push still triggers pnpm run typecheck and pnpm run test
image

BK5102 added 2 commits May 18, 2026 20:41
## Summary
Add a centered horizontal gradient divider above every `.section`
after the first on the homepage, giving the About / Mission / Programs /
Sponsors / Team sections clear visual separation.

## Why
The homepage sections previously flowed into each other with only
vertical padding between them, making the transitions feel
indistinct. A subtle gradient line provides separation without
introducing a heavy hard rule that would clash with the dark theme.

## Implementation notes
- `.section` is now `position: relative` so its `::before` pseudo can
  anchor to it.
- `.section + .section::before` renders a 3px-tall, up-to-80rem-wide
  gradient that fades from transparent to `rgba(231,231,229,0.35)` at
  the center and back to transparent.
- Width clamps at 92% so it stays inset from the viewport edges on
  narrow screens; the first `.section` (About, under the Hero) gets no
  divider since the Hero already provides visual separation.

## Test plan
- [ ] Visit `/` and confirm a soft horizontal divider sits between
      About / Mission, Mission / Programs, Programs / Sponsors,
      Sponsors / Team
- [ ] About has no divider above it (Hero sits above it)
- [ ] On mobile the divider stays inside the viewport (clamped to 92%)
## Summary
- Add `lint-staged` config + script and switch the husky pre-commit hook
  to run `pnpm run lint:staged` instead of `pnpm run lint` on the whole
  repo.
- TypeScript/JS files staged for commit now run `eslint --max-warnings=0
  --fix` followed by `prettier --write`. CSS/MD/JSON/YAML/HTML files just
  get `prettier --write`.
- Vitest still runs in the same hook to catch behavioral regressions on
  touched code paths.

## Why
The previous `pnpm run lint` ran ESLint over the entire repo on every
commit. With pre-existing lint warnings elsewhere in the codebase that
was both slow and made every commit fight unrelated noise. lint-staged
scopes lint+format to only the files in the commit and auto-fixes
whitespace/format problems before the commit lands, which keeps the
working tree clean and stops surprise blocking commits over code you
didn't touch.

## Reviewer notes
- Reviewer must run `pnpm install` once to update `pnpm-lock.yaml` with
  the new `lint-staged` dev dependency before merging.
- Hook still aborts on real lint errors in staged files
  (`--max-warnings=0`).
- `.husky/pre-push` (typecheck + tests) is unchanged.

## Test plan
- [ ] `pnpm install` resolves cleanly
- [ ] `git commit` on a small TS edit runs eslint+prettier on just that
      file and passes
- [ ] `git commit` with an intentional lint error in a staged file fails
- [ ] Editing a file you did NOT stage no longer affects the commit
@BK5102 BK5102 requested a review from a team as a code owner May 19, 2026 04:11
Regenerate pnpm-lock.yaml after adding lint-staged to package.json so
CI's `pnpm install --frozen-lockfile` no longer fails with
ERR_PNPM_OUTDATED_LOCKFILE.

Resolves the Lint/Typecheck/Format/Test workflow failure on this branch.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant