feat(home): section dividers + lint-staged pre-commit#106
Open
BK5102 wants to merge 3 commits into
Open
Conversation
## 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
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two improvements in one PR:
.sectionafter the first on the homepage (About / Mission / Programs / Sponsors / Team), so the page reads as distinct chunks.pnpm run lintin.husky/pre-commitwithlint-staged, which runs ESLint + Prettier on only the files staged for commit.Why
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).sectionis nowposition: relativeso its::beforepseudo can anchor to it..section + .section::beforerenders a 3px-tall, up-to-80rem-wide gradient that fades from transparent torgba(231,231,229,0.35)at the center and back to transparent..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)lint-stagedtodevDependenciesand alint:stagedscript.lint-stagedconfig block:*.{ts,tsx,js,jsx}→eslint --max-warnings=0 --fixthenprettier --write*.{css,md,json,yml,yaml,html}→prettier --write.husky/pre-commitnow runspnpm run lint:stagedinstead of full-repo lint + format:check. Vitest still runs to catch behavioral regressions..husky/pre-push(typecheck + tests) is unchanged.Reviewer notes
pnpm installonce before merging sopnpm-lock.yamlpicks up the newlint-stageddev dep. (Lockfile wasn't updated in this PR because the local worktree didn't have a fullnode_modulestree.)--max-warnings=0).Test plan
Section dividers
/and confirm a soft horizontal divider sits between About / Mission, Mission / Programs, Programs / Sponsors, and Sponsors / TeamLint-staged
pnpm installresolves cleanlygit commiton a small TS/TSX edit runs eslint+prettier on just that file and passesgit commitwith an intentional lint error in a staged file failsgit pushstill triggerspnpm run typecheckandpnpm run test