Root causes (this round):
- dependabot.yml had been overwritten to a minimal version with NO
ignore rules -> major bumps allowed (typescript 7, eslint 10, tsparticles 4)
- main branch had NO branch protection -> 'gh pr merge --auto' merged
even with failing CI
- auto-merge workflow had no check-run verification step
Fixes:
- Branch protection on main: required status check 'lint + typecheck +
test + build' (strict) so auto-merge cannot land failing changes
- dependabot-auto-merge.yml: verify CI check-run conclusion == success
(actions/github-script poll with timeout) before enabling auto-merge
- dependabot.yml: restore ignore rules for eslint/typescript/@tsparticles
majors + eslint-config-next + eslint-plugin-react
- Rollback toolchain to known-good exact pins:
typescript 6.0.3, eslint 9.39.5, @tsparticles/{react,engine,slim} 3.x
(exact versions, no ranges dependabot can widen)
- Close dependabot PR #19 (tsparticles 4.4.0)
CI after the overlay fix exposed two regressions from dependabot
auto-merges:
- eslint back to ^10 (crashes eslint-plugin-react: display-name
getFilename) -> >=9.24.0 <10 (9.0/9.20 lack eslint/config export)
- @tsparticles/engine+slim to ^4 (v4 API drift breaks sparkles.tsx),
and mixing ^3.0 with slim's nested 3.9.1 broke Engine type identity
-> all pinned ~3.9.0 so bun hoists a single engine copy
Verified locally: lint/typecheck/test/build/format all green.
CI revealed eslint had been bumped to ^10 again (react/display-name:
contextOrFilename.getFilename is not a function). Restore ^9 pin so the
declared toolchain matches the vendored components' validated stack.
Root cause of the all-black view: the gallery demo hardcoded
<MultiStepLoader loading /> (loading=true forever), which renders a
fixed inset-0 z-[100] backdrop-blur overlay over the entire viewport.
Replace with an interactive demo (button triggers loader, auto-resets
after 4s).
Also soften flat-black dark backgrounds:
- /ui page: dark:bg-black -> dark:bg-zinc-950 + subtle top radial gradient
- home hero: dark:bg-black -> dark:bg-zinc-950 + white 6% radial gradient
Root cause of recurring breaking bumps: dependabot-auto-merge ran
gh pr merge --auto with no CI gate and the repo has no branch protection,
so PRs merged the moment checks finished — including FAILED ones
(eslint@10, tsparticles@4, typescript@7 all landed repeatedly).
Add a github-script step: list check-runs for the PR head, fail unless
all checks completed AND none failed. Breaking bumps now block instead
of silently landing.
- dependabot ignore for npm does NOT support wildcards (only groups.patterns
does). The '@tsparticles/*' rule was silently ignored -> v4 bumps kept
landing. Replace with exact scoped names.
- bump actions/checkout v5->v7 (closes dependabot PR #5); the CI failure on
that PR was a stale-branch format-check, not checkout v7.
Open @tsparticles PRs now closed (#9 already closed earlier).
Replace create-next-app boilerplate home with a signature Aceternity hero:
- Spotlight glow top-left, SparklesCore particle field background
- Cover underlines 'animated UI out of the box'
- MagneticButton on the gallery CTA (href=/ui)
- Staggered fade-up entry via motion/react
Full gate: lint/typecheck/build/test/format green.
Middlewate file convention is deprecated in Next 16.3.5 (renamed to proxy).
git mv middleware.ts -> proxy.ts, rename exported fn middleware -> proxy.
Build now emits `ƒ Proxy (Middleware)` with no deprecation warning.
LayoutProps<'/'> is a Next-generated global type that only exists after
next typegen/build creates .next/types. Fresh CI clones fail tsc --noEmit
because .next doesn't exist yet. Use Readonly<{children}> — no dependency
on generated types.
- Enable noUnusedLocals/noUnusedParameters in tsconfig (unused code = error)
- Remove unused React import in scroll-area (caught by strict unused checks)
- Pin NODE_ENV=development for dev script (box shell leaks NODE_ENV=production,
which made next dev emit a non-standard-env warning)
- Added ESLint configuration for Next.js with custom global ignores.
- Created Next.js configuration file with basic setup.
- Initialized package.json with dependencies for Next.js, React, and TypeScript.
- Set up PostCSS configuration for Tailwind CSS.
- Added SVG assets for the project.
- Created TypeScript configuration file with strict settings and Next.js support.
- Defined custom type declarations for Next.js cache life and routing parameters.
- Implemented validation types for Next.js pages and layouts.
asepharyana