Skip to content

feat: Integrate Biome as code formatter and linter #287

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
OmkarTipugade wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat: Integrate Biome as code formatter and linter #287

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
04d53ae
Configure Biome formatter and apply formatting
OmkarTipugade Feb 9, 2026
a7620c5
Sorted imports
OmkarTipugade Feb 9, 2026
0de17a5
updated package.json
OmkarTipugade Feb 10, 2026
52a5950
Merge branch 'main' into feature/formatter
OmkarTipugade Feb 10, 2026
0d6db5e
Update app/components/About/About.jsx
OmkarTipugade Feb 10, 2026
b5a98e3
Merge branch 'main' into feature/formatter
OmkarTipugade Mar 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.biome": "explicit"
}
}
78 changes: 39 additions & 39 deletions app/components/About/About.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,71 @@
.about {
padding: 4rem 0;
background-color: white;
padding: 4rem 0;
background-color: white;
}

.about-container {
display: flex;
align-items: center;
justify-content: center;
max-width: 1000px;
margin: 0 auto;
gap: 4rem;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
max-width: 1000px;
margin: 0 auto;
gap: 4rem;
padding: 0 20px;
}

.about-logo {
flex: 1;
display: flex;
justify-content: center;
flex: 1;
display: flex;
justify-content: center;
}

.about-logo img {
max-width: 100%;
height: auto;
max-height: 300px;
max-width: 100%;
height: auto;
max-height: 300px;
}

.about-content {
flex: 1;
flex: 1;
}

.about-content h2 {
font-size: 2.5rem;
line-height: 1.2;
margin-bottom: 1.5rem;
font-weight: 700;
color: #1a1a1a;
font-size: 2.5rem;
line-height: 1.2;
margin-bottom: 1.5rem;
font-weight: 700;
color: #1a1a1a;
}

.about-content p {
font-size: 1rem;
line-height: 1.6;
color: #555;
margin-bottom: 2rem;
font-size: 1rem;
line-height: 1.6;
color: #555;
margin-bottom: 2rem;
}

.social-links {
display: flex;
gap: 1.5rem;
display: flex;
gap: 1.5rem;
}

.social-links a {
color: #888;
font-size: 1.5rem;
transition: color 0.2s;
color: #888;
font-size: 1.5rem;
transition: color 0.2s;
}

.social-links a:hover {
color: #1a1a1a;
color: #1a1a1a;
}

@media (max-width: 768px) {
.about-container {
flex-direction: column;
text-align: center;
}
.social-links {
justify-content: center;
}
.about-container {
flex-direction: column;
text-align: center;
}

.social-links {
justify-content: center;
}
}
85 changes: 43 additions & 42 deletions app/components/About/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,50 @@
import "./About.css";
import AossieLogo from "../../assets/aossie_logo.png";
import { SiGitlab } from "react-icons/si";
import { FaEnvelope, FaGithub, FaDiscord } from "react-icons/fa";
import Image from "next/image";
import { BsTwitterX } from "react-icons/bs";
import { FaDiscord, FaEnvelope, FaGithub } from "react-icons/fa";
import { SiGitlab } from "react-icons/si";
import AossieLogo from "../../assets/aossie_logo.png";

const About = () => {
return (
<section className="about">
<div className="about-container">
<div className="about-logo">
<img src={AossieLogo.src} alt="AOSSIE Logo" />
</div>
<div className="about-content">
<h2>
We Innovate
<br />
We Educate
</h2>
<p>
We are an Australian not-for-profit umbrella organization for
open-source projects. We believe the open-source philosophy provides
a resource-efficient channel to transfer knowledge and achieve
innovation and education.
</p>
<div className="social-links">
<a href="mailto:contact@aossie.org">
<FaEnvelope />
</a>
<a href="https://gitlab.com/aossie">
<SiGitlab />
</a>
<a href="https://github.com/AOSSIE-Org">
<FaGithub />
</a>
<a href="https://discord.com/invite/MMZBadkYFm">
<FaDiscord />
</a>
<a href="https://x.com/aossie_org">
<BsTwitterX />
</a>
</div>
</div>
</div>
</section>
);
return (
<section className="about">
<div className="about-container">
<div className="about-logo">
<Image src={AossieLogo.src} alt="AOSSIE Logo" />
Comment thread
OmkarTipugade marked this conversation as resolved.
Outdated
</div>
<div className="about-content">
<h2>
We Innovate
<br />
We Educate
</h2>
<p>
We are an Australian not-for-profit umbrella organization for
open-source projects. We believe the open-source philosophy provides
a resource-efficient channel to transfer knowledge and achieve
innovation and education.
</p>
<div className="social-links">
<a href="mailto:contact@aossie.org">
<FaEnvelope />
</a>
<a href="https://gitlab.com/aossie">
<SiGitlab />
</a>
<a href="https://github.com/AOSSIE-Org">
<FaGithub />
</a>
<a href="https://discord.com/invite/MMZBadkYFm">
<FaDiscord />
</a>
<a href="https://x.com/aossie_org">
<BsTwitterX />
</a>
</div>
</div>
</div>
</section>
);
};

export default About;
103 changes: 52 additions & 51 deletions app/components/DownloadApp/DownloadApp.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,87 @@
.download-app-section {
padding: 4rem 20px;
display: flex;
justify-content: center;
background-color: white;
padding: 4rem 20px;
display: flex;
justify-content: center;
background-color: white;
}

.download-app-card {
background-color: #1a1a1a;
border-radius: 20px;
padding: 4rem 2rem;
text-align: center;
width: 100%;
max-width: 1000px;
color: white;
background-color: #1a1a1a;
border-radius: 20px;
padding: 4rem 2rem;
text-align: center;
width: 100%;
max-width: 1000px;
color: white;
}

.download-app-card h2 {
font-size: 2.5rem;
margin-bottom: 2rem;
font-weight: 400;
font-size: 2.5rem;
margin-bottom: 2rem;
font-weight: 400;
}

.store-buttons {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}

.store-btn img {
height: 50px;
width: auto;
transition: transform 0.2s;
height: 50px;
width: auto;
transition: transform 0.2s;
}

.store-btn:hover img {
transform: scale(1.05);
transform: scale(1.05);
}

.store-badge {
display: flex;
align-items: center;
background-color: #000;
color: #fff;
border: 1px solid #4a4a4a;
border-radius: 8px;
padding: 10px 20px;
text-decoration: none;
transition: all 0.2s ease;
min-width: 180px;
height: 60px;
display: flex;
align-items: center;
background-color: #000;
color: #fff;
border: 1px solid #4a4a4a;
border-radius: 8px;
padding: 10px 20px;
text-decoration: none;
transition: all 0.2s ease;
min-width: 180px;
height: 60px;
}

.store-badge:hover {
transform: scale(1.05);
background-color: #1a1a1a;
border-color: #fff;
transform: scale(1.05);
background-color: #1a1a1a;
border-color: #fff;
}

.store-icon {
width: 32px;
height: 32px;
margin-right: 14px;
flex-shrink: 0;
width: 32px;
height: 32px;
margin-right: 14px;
flex-shrink: 0;
}

.store-text {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1;
}

.store-subtitle {
font-size: 10px;
margin-bottom: 2px;
text-transform: uppercase;
font-size: 10px;
margin-bottom: 2px;
text-transform: uppercase;
}

.store-title {
font-size: 18px;
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 600;
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
sans-serif;
}

30 changes: 15 additions & 15 deletions app/components/DownloadApp/DownloadApp.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import './DownloadApp.css';
import StoreButton from './StoreButton';
import "./DownloadApp.css";
import StoreButton from "./StoreButton";
Comment on lines +1 to +2
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

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.

Suggested change
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.


const DownloadApp = () => {
return (
<section className="download-app-section">
<div className="download-app-card">
<h2>Get the Resonate Mobile app.</h2>
<div className="store-buttons">
<StoreButton
store="google"
url="https://play.google.com/store/apps/details?id=com.resonate.resonate"
/>
</div>
</div>
</section>
);
return (
<section className="download-app-section">
<div className="download-app-card">
<h2>Get the Resonate Mobile app.</h2>
<div className="store-buttons">
<StoreButton
store="google"
url="https://play.google.com/store/apps/details?id=com.resonate.resonate"
/>
</div>
</div>
</section>
);
};

export default DownloadApp;
Loading