feat: Integrate Biome as code formatter and linter#287
feat: Integrate Biome as code formatter and linter#287OmkarTipugade wants to merge 6 commits intoAOSSIE-Org:mainfrom
Conversation
- Set up Biome with configuration and npm scripts - Format all components and configuration files - Add VSCode Biome settings
📝 WalkthroughWalkthroughAdds Biome tooling and VSCode formatter settings, new npm scripts and devDependency, and widespread formatting/import reorder changes across the Next.js app; replaces some Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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 Tip CodeRabbit can suggest fixes for GitHub Check annotations.Configure the |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 Fix all issues with AI agents
In `@app/components/About/About.jsx`:
- Line 13: The Image usage in About.jsx is passing AossieLogo.src (a string) to
Next.js Image which requires width/height (or fill) and will error; update the
<Image> invocation to either pass the static import object (AossieLogo) directly
so Next can read intrinsic dimensions, or supply explicit width and height (or
use layout="fill"/fill prop) on the Image component; locate the Image element
and the AossieLogo import and change the prop from AossieLogo.src to AossieLogo
(or add width and height props) to resolve the runtime error.
In `@app/components/DownloadApp/StoreButton.js`:
- Line 1: Remove the unused default import "React" from the top of
StoreButton.js (the line `import React from "react";`) since the project uses
the automatic JSX runtime; just delete that import, keep the StoreButton
component and its exports unchanged, and run the linter to confirm the Biome
noUnusedImports warning is resolved.
In `@app/components/Features/Features.jsx`:
- Around line 48-53: The Image components are being passed the imported asset's
.src string which bypasses Next.js static image optimization; update the JSX in
Features.jsx to pass the imported StaticImageData object directly (use
src={feature.image} instead of src={feature.image.src}) and likewise in
About.jsx use src={AossieLogo} instead of src={AossieLogo.src}; you can remove
explicit width/height since Next infers them from the StaticImageData or keep
them only if intentionally overriding intrinsic sizes.
In `@app/components/Hero/Hero.css`:
- Line 2: The CSS declaration "background: `#ffffff` 100%" in Hero.css is invalid;
remove the extraneous "100%" token and set the background to a solid white color
by replacing that declaration with a simple color-only background (e.g., use
background-color or a background shorthand with only the color) in the selector
where "background: `#ffffff` 100%" appears.
In `@app/components/Layout/NavBar/index.jsx`:
- Around line 23-30: The navbar logo div with className "navbar-logo" uses
onClick={scrollToTop} but is not keyboard-accessible; either replace that div
with a semantic interactive element (e.g., a button or anchor) that calls
scrollToTop, or keep the div and make it accessible by adding role="button",
tabIndex={0}, and an onKeyDown handler that triggers scrollToTop when Enter or
Space is pressed; update any tests/styles that assume a div if you change the
element and ensure Logo.src and the img/ span markup remain intact.
In `@app/layout.js`:
- Around line 21-22: The metadata export still contains deprecated keys
themeColor and viewport; remove these keys from the metadata object and add a
dedicated export const viewport = { viewport: "...", themeColor: "..." } (or
according to Next.js 15 spec place themeColor inside the viewport export shape
required) — update app/layout.js by deleting themeColor and viewport from the
metadata export and creating a new named export called viewport that contains
those values so Next.js 15 consumes them correctly.
In `@package.json`:
- Around line 14-30: Current npm scripts ("format", "lint", "check") always pass
--write which mutates files; add CI-friendly read-only variants that run biome
without --write and therefore fail the process on violations (e.g. add scripts
named "format:ci", "lint:ci", "check:ci" that invoke "biome format", "biome
lint", "biome check" respectively), and keep the existing developer-facing
write-enabled scripts ("format", "lint", "check") unchanged so local autofix
behavior remains.
🧹 Nitpick comments (8)
app/components/Layout/NavBar/index.jsx (1)
28-28:<img>element should use Next.js<Image />for consistency.The PR description screenshot shows Biome's
noImgElementrule flagging<img>usage in other components (About.jsx, Features.jsx), and those were migrated to<Image />. This<img>on Line 28 was not addressed. Consider usingnext/imagehere as well for consistent handling of image optimization.♻️ Suggested change
+import Image from "next/image"; import Logo from "@/assets/resonate_logo_white.svg";- <img src={Logo.src} alt="Resonate Logo" className="logo-icon" /> + <Image src={Logo} alt="Resonate Logo" className="logo-icon" width={40} height={40} />Adjust
width/heightto match the actual logo dimensions..vscode/settings.json (2)
1-7: This file uses 4-space indentation instead of tabs.The Biome formatter is configured to use tabs across the project (as evidenced by all other reformatted files). This file should also use tabs for consistency. Biome may not format
.vscode/settings.jsonby default since it's outside the project source — consider running the formatter on it manually or adjusting indentation.♻️ Suggested fix
{ - "editor.defaultFormatter": "biomejs.biome", - "editor.formatOnSave": true, - "editor.codeActionsOnSave": { - "source.fixAll.biome": "explicit" - } + "editor.defaultFormatter": "biomejs.biome", + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll.biome": "explicit" + } }
1-7: Consider adding.vscode/extensions.jsonto recommend the Biome extension.Committing workspace settings that reference the
biomejs.biomeextension assumes contributors have it installed. Adding anextensions.jsonfile ensures VSCode prompts contributors to install it.{ "recommendations": ["biomejs.biome"] }biome.json (3)
9-11: Consider settingignoreUnknowntotrue.With
false, Biome will report errors for file types it doesn't understand (e.g., images, fonts,.md). Since this is a Next.js project with various asset types, setting this totrueavoids noisy failures when runningbiome check .orbiome format .across the whole project.Suggested change
"files": { - "ignoreUnknown": false + "ignoreUnknown": true },
25-25:semicolons: "asNeeded"— verify this is the team's preferred style.
"asNeeded"omits semicolons where ASI (Automatic Semicolon Insertion) applies, which is a valid style but can be surprising in a codebase that previously used semicolons everywhere (as seen innext.config.jsline 10:module.exports = nextConfig;). Ensure the team has agreed on this convention to avoid churn.
28-36:useSortedPropertiesmay cause unnecessary churn in JSX/config files.Auto-sorting object properties by key can reorder semantically grouped properties (e.g.,
titlebeforedescriptionin metadata, or CSS-in-JS shorthand orderings). This is generally more disruptive than beneficial in a React/Next.js project. Consider whether this rule aligns with the team's preferences.Also, minor formatting inconsistency on line 33 — missing space before the value:
"useSortedProperties":"on" // ← no space after colon "organizeImports": "on" // ← has spaceapp/page.jsx (2)
218-218: Use.forEach()instead of.map()for side-effect-only iteration.
.map()allocates a new array that is immediately discarded..forEach()is the idiomatic choice for side-effect-only loops.- ScrollTrigger.getAll().map((t) => t.kill()); + ScrollTrigger.getAll().forEach((t) => t.kill());
7-11: Orphaned comment after import reorder.The
// Componentscomment on Line 10 no longer sits above the first component import — it's now betweenFeaturesandHero. Consider removing it or moving it aboveAbout(Line 7).
| import React from 'react'; | ||
| import { FaApple } from 'react-icons/fa'; | ||
| import './DownloadApp.css'; | ||
| import React from "react"; |
There was a problem hiding this comment.
Unused React import — Biome already flags this as fixable.
With React 19 and the automatic JSX runtime, the React default import is unnecessary. Biome's own noUnusedImports rule (visible in the PR screenshot) flags this. Remove it to keep the linter output clean.
Proposed fix
-import React from "react";
import { FaApple } from "react-icons/fa";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import React from "react"; | |
| import { FaApple } from "react-icons/fa"; |
🤖 Prompt for AI Agents
In `@app/components/DownloadApp/StoreButton.js` at line 1, Remove the unused
default import "React" from the top of StoreButton.js (the line `import React
from "react";`) since the project uses the automatic JSX runtime; just delete
that import, keep the StoreButton component and its exports unchanged, and run
the linter to confirm the Biome noUnusedImports warning is resolved.
| <Image | ||
| src={feature.image.src} | ||
| alt={`Feature ${feature.id}`} | ||
| width={400} | ||
| height={300} | ||
| /> |
There was a problem hiding this comment.
Pass the static import directly to <Image> instead of extracting .src.
When you statically import an image in Next.js, the import resolves to a StaticImageData object. Passing feature.image.src (a plain string) to <Image> bypasses Next.js image optimization (automatic srcset, blur placeholder, format negotiation). Pass the object directly instead.
The same issue exists in app/components/About/About.jsx at Line 13 (src={AossieLogo.src}).
Proposed fix
<Image
- src={feature.image.src}
+ src={feature.image}
alt={`Feature ${feature.id}`}
- width={400}
- height={300}
/>When using a static import, width and height are inferred automatically, so they can be omitted (or kept if you want to override the intrinsic size).
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Image | |
| src={feature.image.src} | |
| alt={`Feature ${feature.id}`} | |
| width={400} | |
| height={300} | |
| /> | |
| <Image | |
| src={feature.image} | |
| alt={`Feature ${feature.id}`} | |
| /> |
🤖 Prompt for AI Agents
In `@app/components/Features/Features.jsx` around lines 48 - 53, The Image
components are being passed the imported asset's .src string which bypasses
Next.js static image optimization; update the JSX in Features.jsx to pass the
imported StaticImageData object directly (use src={feature.image} instead of
src={feature.image.src}) and likewise in About.jsx use src={AossieLogo} instead
of src={AossieLogo.src}; you can remove explicit width/height since Next infers
them from the StaticImageData or keep them only if intentionally overriding
intrinsic sizes.
| <div | ||
| className="navbar-logo" | ||
| onClick={scrollToTop} | ||
| style={{ cursor: "pointer" }} | ||
| > | ||
| <img src={Logo.src} alt="Resonate Logo" className="logo-icon" /> | ||
| <span className="logo-text">Resonate</span> | ||
| </div> |
There was a problem hiding this comment.
Non-interactive element has onClick handler — accessibility concern.
The <div> with onClick={scrollToTop} is not keyboard-accessible. It lacks a role and onKeyDown handler, so keyboard-only users cannot activate it.
♿ Suggested fix
- <div
- className="navbar-logo"
- onClick={scrollToTop}
- style={{ cursor: "pointer" }}
- >
+ <button
+ className="navbar-logo"
+ onClick={scrollToTop}
+ type="button"
+ style={{ cursor: "pointer", background: "none", border: "none", padding: 0 }}
+ >
<img src={Logo.src} alt="Resonate Logo" className="logo-icon" />
<span className="logo-text">Resonate</span>
- </div>
+ </button>Alternatively, keep the <div> and add role="button", tabIndex={0}, and an onKeyDown handler for Enter/Space.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div | |
| className="navbar-logo" | |
| onClick={scrollToTop} | |
| style={{ cursor: "pointer" }} | |
| > | |
| <img src={Logo.src} alt="Resonate Logo" className="logo-icon" /> | |
| <span className="logo-text">Resonate</span> | |
| </div> | |
| <button | |
| className="navbar-logo" | |
| onClick={scrollToTop} | |
| type="button" | |
| style={{ cursor: "pointer", background: "none", border: "none", padding: 0 }} | |
| > | |
| <img src={Logo.src} alt="Resonate Logo" className="logo-icon" /> | |
| <span className="logo-text">Resonate</span> | |
| </button> |
🤖 Prompt for AI Agents
In `@app/components/Layout/NavBar/index.jsx` around lines 23 - 30, The navbar logo
div with className "navbar-logo" uses onClick={scrollToTop} but is not
keyboard-accessible; either replace that div with a semantic interactive element
(e.g., a button or anchor) that calls scrollToTop, or keep the div and make it
accessible by adding role="button", tabIndex={0}, and an onKeyDown handler that
triggers scrollToTop when Enter or Space is pressed; update any tests/styles
that assume a div if you change the element and ensure Logo.src and the img/
span markup remain intact.
| themeColor: "#000000", | ||
| viewport: "width=device-width, initial-scale=1", |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Next.js 15 viewport metadata export API documentation
💡 Result:
Next.js (including v15) documents the Viewport Metadata Export API here: App Router → API Reference → Functions → generateViewport. It covers both supported approaches:
- Static export:
export const viewport = { ... }fromapp/**/layout.(t|j)sxorpage.(t|j)sx - Dynamic export:
export function generateViewport(...) { return { ... } }returning aViewportobject
Key rules from the docs:
viewport/generateViewportare Server Components only- You can’t export both from the same route segment [1]
- The old
metadata.viewportoption is deprecated since Next.js 14; useviewportexports instead [2]
Docs: [1], and related deprecation note: [2].
Sources
[1] Next.js Docs — generateViewport API Reference (Last updated Jan 23, 2026) (nextjs.org)
[2] Next.js Docs — generateMetadata (viewport option deprecated) (nextjs.org)
Citations:
- 1: https://nextjs.org/docs/app/api-reference/functions/generate-viewport?utm_source=openai
- 2: https://nextjs.org/docs/app/api-reference/functions/generate-metadata?utm_source=openai
🌐 Web query:
Next.js Viewport object properties themeColor width initialScale
💡 Result:
In the Next.js App Router, you set viewport-related <meta> tags by exporting either:
- a static
export const viewportobject, or - a dynamic
export function generateViewport()that returns aViewportobject. [1]
themeColor
Creates one or more <meta name="theme-color" ... /> tags.
import type { Viewport } from 'next'
export const viewport: Viewport = {
themeColor: 'black',
}You can also provide multiple theme colors with a media query:
export const viewport: Viewport = {
themeColor: [
{ media: '(prefers-color-scheme: light)', color: 'cyan' },
{ media: '(prefers-color-scheme: dark)', color: 'black' },
],
}[1]
width and initialScale
These generate the <meta name="viewport" content="..." /> tag.
import type { Viewport } from 'next'
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
}Commonly used alongside maximumScale and userScalable:
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
userScalable: false,
}[1]
Defaults / notes
- Next.js adds a default viewport meta tag even if you don’t configure one (defaults include
width=device-width, initial-scale=1). [2] - Next.js notes manual viewport configuration is “usually unnecessary” because the default is sufficient, but you can override it via
viewport/generateViewport. [1] viewport/generateViewportare Server Components only, and you can’t export both from the same route segment. [1]
Sources: Next.js docs on generateViewport / viewport fields [1] and default viewport behavior [2].
Move themeColor and viewport to a separate viewport export.
In Next.js 15, these keys are deprecated inside the metadata export and must be moved to a dedicated viewport export. This is a pre-existing issue surfaced by the formatting pass.
Suggested change
export const metadata = {
title: "Resonate - Social Voice Platform",
description:
"Resonate is an Open Source social voice platform maintained by AOSSIE. Join rooms, talk to people, and connect with the community.",
icons: {
icon: "/resonate_logo_white.svg",
apple: "/logo192.png",
},
manifest: "/manifest.json",
- themeColor: "#000000",
- viewport: "width=device-width, initial-scale=1",
};
+
+export const viewport = {
+ themeColor: "#000000",
+ width: "device-width",
+ initialScale: 1,
+};🤖 Prompt for AI Agents
In `@app/layout.js` around lines 21 - 22, The metadata export still contains
deprecated keys themeColor and viewport; remove these keys from the metadata
object and add a dedicated export const viewport = { viewport: "...",
themeColor: "..." } (or according to Next.js 15 spec place themeColor inside the
viewport export shape required) — update app/layout.js by deleting themeColor
and viewport from the metadata export and creating a new named export called
viewport that contains those values so Next.js 15 consumes them correctly.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
|
@M4dhav, please review and merge this PR. Let me know if any changes are needed. |
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
app/components/Layout/NavBar/index.jsx (1)
23-27:⚠️ Potential issue | 🟡 MinorMake the logo control keyboard-accessible (still unresolved).
The clickable
.navbar-logo<div>is not keyboard-operable. Replace it with a semantic interactive element (preferred) or add keyboard handlers (role,tabIndex, Enter/Space handling).Suggested fix
- <div + <button className="navbar-logo" onClick={scrollToTop} - style={{ cursor: "pointer" }} + type="button" + style={{ cursor: "pointer", background: "none", border: "none", padding: 0 }} > <img src={Logo.src} alt="Resonate Logo" className="logo-icon" /> <span className="logo-text">Resonate</span> - </div> + </button>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/components/Layout/NavBar/index.jsx` around lines 23 - 27, The .navbar-logo div that calls scrollToTop is not keyboard-accessible; replace the <div className="navbar-logo"> with a semantic interactive element (preferably a <button> or an <a>) that calls scrollToTop on click, or if you must keep the div, add role="button", tabIndex={0}, and keyDown handler to call scrollToTop on Enter/Space; ensure scrollToTop remains the called function and that styling and cursor: "pointer" are preserved on the element with className "navbar-logo".
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/components/DownloadApp/DownloadApp.jsx`:
- Around line 1-2: The file is missing the React API import used for
memoization; update the top imports in DownloadApp.jsx to import React or the
memo symbol so the React.memo call on the DownloadApp component resolves (e.g.,
add an import for React or import { memo } from "react"), then replace the
existing React.memo usage accordingly if you choose to import memo directly.
- Line 20: The file exports the component with React.memo(DownloadApp) but never
imports React, which causes a runtime error; add an import for React by
inserting import React from "react"; at the top of the module so React is
defined for the React.memo(DownloadApp) call (locate the export default
React.memo(DownloadApp) and add the import above the DownloadApp component
definition).
In `@app/components/Layout/NavBar/index.jsx`:
- Around line 33-38: In the NavBar component, the hamburger button currently
lacks an explicit type which can cause it to act as a submit button inside
forms; update the button element in the NavBar (the element using onClick={() =>
setOpen(!open)} and aria-* attributes) to include type="button" so it’s
explicitly non-submitting and clearer in intent.
---
Duplicate comments:
In `@app/components/Layout/NavBar/index.jsx`:
- Around line 23-27: The .navbar-logo div that calls scrollToTop is not
keyboard-accessible; replace the <div className="navbar-logo"> with a semantic
interactive element (preferably a <button> or an <a>) that calls scrollToTop on
click, or if you must keep the div, add role="button", tabIndex={0}, and keyDown
handler to call scrollToTop on Enter/Space; ensure scrollToTop remains the
called function and that styling and cursor: "pointer" are preserved on the
element with className "navbar-logo".
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 1a1bfbf5-4bd0-407c-9ec8-37fb7544ac2f
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (7)
app/components/About/About.jsxapp/components/DownloadApp/DownloadApp.jsxapp/components/Features/Features.jsxapp/components/Hero/Hero.jsxapp/components/Layout/Footer/index.jsxapp/components/Layout/NavBar/index.jsxapp/components/TechStack/TechStack.jsx
🚧 Files skipped from review as they are similar to previous changes (4)
- app/components/Hero/Hero.jsx
- app/components/About/About.jsx
- app/components/Features/Features.jsx
- app/components/TechStack/TechStack.jsx
| import "./DownloadApp.css"; | ||
| import StoreButton from "./StoreButton"; |
There was a problem hiding this comment.
Missing React import required for React.memo usage.
The imports are missing React (or memo from React), which is required on line 20. While React 17+ with the new JSX transform doesn't require importing React for JSX syntax, you still need to import React APIs like memo explicitly.
🐛 Proposed fix
+import React from "react";
import "./DownloadApp.css";
import StoreButton from "./StoreButton";Or, import memo directly:
+import { memo } from "react";
import "./DownloadApp.css";
import StoreButton from "./StoreButton";If using the second approach, also update line 20:
-export default React.memo(DownloadApp);
+export default memo(DownloadApp);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import "./DownloadApp.css"; | |
| import StoreButton from "./StoreButton"; | |
| import React from "react"; | |
| import "./DownloadApp.css"; | |
| import StoreButton from "./StoreButton"; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/components/DownloadApp/DownloadApp.jsx` around lines 1 - 2, The file is
missing the React API import used for memoization; update the top imports in
DownloadApp.jsx to import React or the memo symbol so the React.memo call on the
DownloadApp component resolves (e.g., add an import for React or import { memo }
from "react"), then replace the existing React.memo usage accordingly if you
choose to import memo directly.
| ); | ||
| }; | ||
|
|
||
| export default React.memo(DownloadApp); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Check for React.memo usage and corresponding React imports
echo "=== Files using React.memo ==="
rg -n "React\.memo" --type=js --type=jsx -g '*.jsx' -g '*.js'
echo ""
echo "=== Checking DownloadApp.jsx for React import ==="
cat app/components/DownloadApp/DownloadApp.jsx | head -10
echo ""
echo "=== Other components using memo - checking their imports ==="
rg -l "React\.memo|from ['\"]react['\"]" app/components/ --type=js -g '*.jsx' -g '*.js'Repository: AOSSIE-Org/Resonate-Website
Length of output: 846
🏁 Script executed:
cat -n app/components/DownloadApp/DownloadApp.jsxRepository: AOSSIE-Org/Resonate-Website
Length of output: 689
Add missing React import — React.memo() will cause a runtime error without it.
Line 20 calls React.memo() but React is never imported. Add import React from "react"; at the top of the file to fix this.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/components/DownloadApp/DownloadApp.jsx` at line 20, The file exports the
component with React.memo(DownloadApp) but never imports React, which causes a
runtime error; add an import for React by inserting import React from "react";
at the top of the module so React is defined for the React.memo(DownloadApp)
call (locate the export default React.memo(DownloadApp) and add the import above
the DownloadApp component definition).
| <button | ||
| className="hamburger" | ||
| onClick={() => setOpen(!open)} | ||
| aria-label="Toggle navigation" | ||
| aria-expanded={open} | ||
| > |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n app/components/Layout/NavBar/index.jsx | head -50Repository: AOSSIE-Org/Resonate-Website
Length of output: 1704
🏁 Script executed:
# Check if there's any form element that might wrap this component
# First, let's look at the complete component structure
cat -n app/components/Layout/NavBar/index.jsx | tail -30Repository: AOSSIE-Org/Resonate-Website
Length of output: 866
🏁 Script executed:
# Search for where the Navbar component is imported and used
rg "from.*Navbar|import.*Navbar" --type jsx --type js --type tsxRepository: AOSSIE-Org/Resonate-Website
Length of output: 98
🏁 Script executed:
# Search for Navbar imports without specifying jsx type
rg "Navbar" --include="*.jsx" --include="*.js" --include="*.tsx" -l | head -20Repository: AOSSIE-Org/Resonate-Website
Length of output: 512
🏁 Script executed:
# Search for files containing "Navbar" import
grep -r "Navbar" --include="*.jsx" --include="*.js" --include="*.tsx" . 2>/dev/null | grep -i import | head -10Repository: AOSSIE-Org/Resonate-Website
Length of output: 134
🏁 Script executed:
# Search for where Navbar component is imported/used as a React component
grep -r "NavBar\|Navbar" . --include="*.jsx" --include="*.js" --include="*.tsx" 2>/dev/null | grep -v "\.css\|node_modules" | head -20Repository: AOSSIE-Org/Resonate-Website
Length of output: 294
🏁 Script executed:
cat -n app/layout.jsRepository: AOSSIE-Org/Resonate-Website
Length of output: 1199
Add explicit button type for clarity.
Set type="button" to explicitly indicate the button is not a form submission button, improving code clarity and following best practices.
Suggested fix
<button
className="hamburger"
+ type="button"
onClick={() => setOpen(!open)}
aria-label="Toggle navigation"
aria-expanded={open}
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <button | |
| className="hamburger" | |
| onClick={() => setOpen(!open)} | |
| aria-label="Toggle navigation" | |
| aria-expanded={open} | |
| > | |
| <button | |
| className="hamburger" | |
| type="button" | |
| onClick={() => setOpen(!open)} | |
| aria-label="Toggle navigation" | |
| aria-expanded={open} | |
| > |
🧰 Tools
🪛 Biome (2.4.7)
[error] 33-38: Provide an explicit type prop for the button element.
(lint/a11y/useButtonType)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/components/Layout/NavBar/index.jsx` around lines 33 - 38, In the NavBar
component, the hamburger button currently lacks an explicit type which can cause
it to act as a submit button inside forms; update the button element in the
NavBar (the element using onClick={() => setOpen(!open)} and aria-* attributes)
to include type="button" so it’s explicitly non-submitting and clearer in
intent.
1 participant
Description
This PR introduces Biome as the official code formatter and linter for the Resonate Website project, replacing the need for separate ESLint and Prettier configurations. Biome provides faster performance and a unified toolchain for code formatting and linting.
Fixes # (issue)
Type of change
Added @biomejs/biome as a dev dependency (v2.3.14)
Created biome.json configuration with formatting and linting rules
Added VSCode settings ( .vscode/settings.json ) for Biome editor integration
Added npm scripts for formatting, linting, and checking code
Applied consistent formatting across all component files and configuration files
Reordered imports in component files to follow best practices (framework imports first)
New feature (non-breaking change which adds functionality)
How Has This Been Tested?
Checklist:
Maintainer Checklist
Summary by CodeRabbit
New Features
Chores