feat: add animated gradient background to Hero section#148
Conversation
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 0 minutes and 20 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: ⛔ Files ignored due to path filters (16)
📒 Files selected for processing (26)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| name: E2E Tests | ||
| runs-on: ubuntu-latest | ||
| needs: [build] | ||
| steps: | ||
| - uses: actions/checkout@v4 | ||
| - uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: '20' | ||
| cache: 'npm' | ||
| - run: npm ci | ||
| - run: npx playwright install --with-deps | ||
| - run: npm run e2e |
Check warning
Code scanning / CodeQL
Workflow does not contain permissions Medium
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 3 months ago
In general, the fix is to add a permissions block that explicitly limits the GITHUB_TOKEN scope to the minimal required set, rather than relying on repository defaults. Since all jobs in this workflow only need to read the repository contents (for actions/checkout and running Node/npm commands) and do not appear to write to the repo, issues, or PRs, the least-privilege configuration is contents: read.
The single best way to fix this without changing existing functionality is to add a workflow-level permissions block near the top of .github/workflows/ci.yml, so it applies to all jobs (lint, typecheck, test, build, e2e) at once. This documents the intended permissions and ensures that even if the repository/org defaults are read-write, this CI workflow will only get read access. Concretely, insert:
permissions:
contents: readafter the name: CI line (line 1) and before the on: block (line 3). No additional methods, imports, or definitions are needed; this is purely a YAML configuration change in the workflow file.
| @@ -1,4 +1,6 @@ | ||
| name: CI | ||
| permissions: | ||
| contents: read | ||
|
|
||
| on: | ||
| push: |
Not up to standards ⛔🔴 Issues
|
| Category | Results |
|---|---|
| BestPractice | 3 medium |
| Complexity | 1 medium |
🟢 Metrics 0 complexity . 0 duplication
Metric Results Complexity 0 Duplication 0
TIP This summary will be updated as you push new changes. Give us feedback
There was a problem hiding this comment.
Pull request overview
This PR adds an animated gradient background utility and applies it to the landing page Hero, with prefers-reduced-motion support. In addition, it introduces a broad Storybook + Vitest (browser/Playwright) setup, new Storybook example content/assets, and CI changes (including a new E2E job).
Changes:
- Add
.animated-gradient+@keyframes gradient-shiftutilities (with reduced-motion override) and apply them to the Hero background layer. - Add Storybook configuration, example stories/assets, and Storybook-focused Vitest project configuration.
- Add accessibility/navigation improvements (skip link + main landmark id) and add a CI E2E job.
Reviewed changes
Copilot reviewed 23 out of 42 changed files in this pull request and generated 14 comments.
Show a summary per file
| File | Description |
|---|---|
| vitest.shims.d.ts | Adds Vitest browser-playwright type references. |
| vite.config.ts | Switches Vitest config to multi-project (unit + Storybook browser tests) and wires Storybook/Vitest plugin. |
| src/stories/Page.tsx | Adds Storybook example Page component. |
| src/stories/Page.stories.ts | Adds Storybook example stories + interaction test. |
| src/stories/page.css | Adds styling for Storybook example Page. |
| src/stories/Header.tsx | Adds Storybook example Header component. |
| src/stories/Header.stories.ts | Adds Storybook example Header stories. |
| src/stories/header.css | Adds styling for Storybook example Header. |
| src/stories/Configure.mdx | Adds Storybook onboarding/configuration docs page content. |
| src/stories/Button.tsx | Adds Storybook example Button component. |
| src/stories/Button.stories.ts | Adds Storybook example Button stories. |
| src/stories/button.css | Adds styling for Storybook example Button. |
| src/stories/assets/youtube.svg | Adds Storybook docs asset. |
| src/stories/assets/tutorials.svg | Adds Storybook docs asset. |
| src/stories/assets/styling.png | Adds Storybook docs asset. |
| src/stories/assets/github.svg | Adds Storybook docs asset. |
| src/stories/assets/docs.png | Adds Storybook docs asset. |
| src/stories/assets/discord.svg | Adds Storybook docs asset. |
| src/stories/assets/context.png | Adds Storybook docs asset. |
| src/stories/assets/avif-test-image.avif | Adds Storybook test asset. |
| src/stories/assets/assets.png | Adds Storybook docs asset. |
| src/stories/assets/accessibility.svg | Adds Storybook docs asset. |
| src/index.css | Adds animated gradient CSS utilities + reduced-motion handling. |
| src/components/ui/Input.stories.tsx | Adds UI Input stories. |
| src/components/ui/Container.stories.tsx | Adds UI Container stories. |
| src/components/ui/Button.stories.tsx | Adds UI Button stories. |
| src/components/Hero.tsx | Applies animated gradient background layer to Hero section. |
| src/App.tsx | Adds main landmark id for skip link and wires CookieConsent component. |
| package.json | Adds Storybook scripts/deps and Playwright/Vitest browser deps. |
| package-lock.json | Locks new Storybook/Playwright/Vitest dependency graph changes. |
| index.html | Adds “Skip to main content” link. |
| eslint.config.js | Adds eslint-plugin-storybook flat config integration. |
| .storybook/preview.ts | Adds Storybook preview parameters (incl. a11y addon config). |
| .storybook/main.ts | Adds Storybook main config (stories/addons/framework). |
| .gitignore | Ignores Storybook logs and static build output. |
| .github/workflows/ci.yml | Adds Playwright E2E job to CI. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| projects: [ | ||
| { | ||
| extends: true, | ||
| test: { | ||
| globals: true, | ||
| environment: 'jsdom', | ||
| setupFiles: './src/test/setup.ts', | ||
| include: ['src/**/*.test.{ts,tsx}'], | ||
| }, | ||
| }, | ||
| { | ||
| extends: true, | ||
| plugins: [ | ||
| // The plugin will run tests for the stories defined in your Storybook config | ||
| // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest | ||
| storybookTest({ | ||
| configDir: path.join(dirname, '.storybook'), | ||
| }), | ||
| ], | ||
| test: { | ||
| name: 'storybook', | ||
| browser: { | ||
| enabled: true, | ||
| headless: true, | ||
| provider: playwright({}), | ||
| instances: [ | ||
| { | ||
| browser: 'chromium', | ||
| }, | ||
| ], | ||
| }, | ||
| }, |
There was a problem hiding this comment.
Enabling the Storybook Vitest project with browser.provider: playwright() means vitest/vitest run will try to execute browser-based story tests by default. This typically requires installing Playwright browsers (e.g. npx playwright install) and will likely fail in CI/local environments that only run unit tests. Consider gating the Storybook project behind an env flag, moving it behind a separate npm script/CI job, or ensuring the test job installs browsers before running Vitest.
| cache: 'npm' | ||
| - run: npm ci | ||
| - run: npx playwright install --with-deps | ||
| - run: npm run e2e |
There was a problem hiding this comment.
This new E2E job will likely fail because Playwright’s webServer config expects port 5173, but Vite is configured to run on port 3000 (vite.config.ts server.port). Align the ports (update Playwright config or Vite server.port) so npm run e2e can actually detect the started dev server.
| - run: npm run e2e | |
| - name: Run E2E tests (align dev server port with Playwright) | |
| run: npm run e2e | |
| env: | |
| PORT: 5173 |
| "@playwright/test": "^1.40.0", | ||
| "@storybook/builder-vite": "^10.3.3", | ||
| "@storybook/react": "^10.3.3", | ||
| "@storybook/test": "^8.6.15", |
There was a problem hiding this comment.
@storybook/test is pinned to ^8.6.15 while the rest of Storybook is ^10.3.3. The lockfile shows @storybook/test@8.6.15 has a peer dependency on storybook@^8.6.15, so this combination is likely incompatible. Use a @storybook/test version that matches the installed Storybook major, or remove it if you’re using the newer storybook/test entrypoint via core packages.
| "@storybook/test": "^8.6.15", | |
| "@storybook/test": "^10.3.3", |
| "prepare": "husky", | ||
| "e2e": "playwright test", | ||
| "storybook": "storybook dev -p 6006", | ||
| "build-storybook": "storybook build" |
There was a problem hiding this comment.
The PR description focuses on an animated Hero gradient, but this change set also introduces Storybook configuration/assets, new CI E2E workflow steps, skip-link/main landmark changes, and cookie consent wiring. Please either split these into separate PRs or update the PR description/acceptance criteria to reflect the broader scope.
| @@ -0,0 +1,388 @@ | |||
| import { Meta } from "@storybook/addon-docs/blocks"; | |||
|
|
|||
| import Github from "./assets/github.svg"; | |||
There was a problem hiding this comment.
Brand spelling: rename Github to GitHub (and update any corresponding alt text) to use the correct capitalization.
| import Github from "./assets/github.svg"; | |
| import GitHub from "./assets/github.svg"; |
| @@ -0,0 +1,86 @@ | |||
| import type { Meta, StoryObj } from '@storybook/react'; | |||
There was a problem hiding this comment.
These stories import types from @storybook/react, while other stories added in this PR use @storybook/react-vite. Mixing the two can lead to renderer/type mismatches; prefer importing Meta/StoryObj from the same renderer package used by your Storybook framework (@storybook/react-vite) for consistency.
| import type { Meta, StoryObj } from '@storybook/react'; | |
| import type { Meta, StoryObj } from '@storybook/react-vite'; |
| @@ -0,0 +1,69 @@ | |||
| import type { Meta, StoryObj } from '@storybook/react'; | |||
There was a problem hiding this comment.
These stories import types from @storybook/react, while other stories in this repo/PR use @storybook/react-vite. For consistency with the configured framework (@storybook/react-vite), consider importing Meta/StoryObj from @storybook/react-vite here as well.
| import type { Meta, StoryObj } from '@storybook/react'; | |
| import type { Meta, StoryObj } from '@storybook/react-vite'; |
| @@ -0,0 +1,42 @@ | |||
| import type { Meta, StoryObj } from '@storybook/react'; | |||
There was a problem hiding this comment.
These stories import types from @storybook/react, while other stories in this repo/PR use @storybook/react-vite. For consistency with the configured framework (@storybook/react-vite), consider importing Meta/StoryObj from @storybook/react-vite here as well.
| import type { Meta, StoryObj } from '@storybook/react'; | |
| import type { Meta, StoryObj } from '@storybook/react-vite'; |
| <img src={Youtube} alt="Youtube logo" className="sb-explore-image"/> | ||
| <div> | ||
| Watch tutorials, feature previews and interviews. |
There was a problem hiding this comment.
Brand spelling: "Youtube" should be capitalized as "YouTube" in this alt text (and consider renaming the imported identifier too for consistency).
| </div> | ||
| <div className="sb-section-item"> | ||
| <img src={Tutorials} alt="A book" className="sb-explore-image"/> | ||
| <p>Follow guided walkthroughs on for key workflows.</p> |
There was a problem hiding this comment.
Grammar: "Follow guided walkthroughs on for key workflows." reads incorrectly (extra "on"). Consider rephrasing (e.g., "Follow guided walkthroughs for key workflows.").
| <p>Follow guided walkthroughs on for key workflows.</p> | |
| <p>Follow guided walkthroughs for key workflows.</p> |
Summary
Acceptance Criteria
Testing
Open the landing page and verify the Hero section has a subtle animated gradient background