style: apply lint fixes

.github/pull_request_template.md

@@ -23,10 +23,11 @@ List any issues that are linked to this pull request (e.g., `Closes #123`).
 ## Checklist
 
 - [ ] I've tested this change locally and it works as expected
-- [ ] `bun run build` or `npm run build` completes without errors
-- [ ] My commit messages follow [Conventional Commits](https://www.conventionalcommits.org/) (e.g. `fix: ...`, `feat: ...`, `chore: ...`)
-- [ ] I've updated relevant docs (README, comments, etc.) if this change needs it
-- [ ] No leftover `console.log` or debug code
+- [ ] `bun run lint` or `npm run lint` completes without warnings or errors
+- [ ] `bun run build` or `npm run build` completes successfully
+- [ ] My commit messages follow [Conventional Commits](https://www.conventionalcommits.org/) (e.g. `feat: ...`, `fix: ...`, `chore: ...`)
+- [ ] I've updated relevant documentation (README, comments, etc.) if needed
+- [ ] I've removed any temporary debugging code (e.g. `console.log`)
 
 ## Screenshots / recordings (if applicable)
 

app/articles/[slug]/ArticleClient.tsx

@@ -397,12 +397,14 @@ export default function ArticleClient({ article, previews }: Props) {
             className="relative w-full overflow-hidden rounded-lg"
             style={{ maxHeight: "260px" }}
           >
-            <img
-              src={article.banner}
-              alt={article.title}
-              className="w-full h-full object-cover"
-              style={{ maxHeight: "260px" }}
-            />
+            <div className="relative w-full h-[260px]">
+              <Image
+                src={article.banner}
+                alt={article.title}
+                fill
+                className="object-cover"
+              />
+            </div>
             {/* Dark gradient overlay at bottom for text legibility */}
             <div
               className="absolute inset-0"

app/not-found.tsx

@@ -96,8 +96,9 @@ export default function NotFound() {
             color: text.muted,
           }}
         >
-          This page doesn't exist, or it wandered off somewhere into the void.
-          Let's get you back on track.
+          {
+            "This page doesn't exist, or it wandered off somewhere into the void. Let's get you back on track."
+          }
         </motion.p>
 
         {/* CTA buttons */}

app/partners/page.tsx

@@ -23,6 +23,7 @@ import {
   ShieldCheck,
   Users,
 } from "lucide-react";
+import Image from "next/image";
 import { useEffect, useState } from "react";
 
 type DiscordData = {
@@ -236,10 +237,11 @@ function PartnerCard({
         style={{ aspectRatio: "4 / 1", minHeight: 150, maxHeight: 200 }}
       >
         {showImageBanner ? (
-          <img
+          <Image
             src={showImageBanner}
             alt=""
-            className="absolute inset-0 w-full h-full object-cover"
+            fill
+            className="absolute inset-0 object-cover"
           />
         ) : showColourBanner ? (
           <div
@@ -284,10 +286,11 @@ function PartnerCard({
             }}
           >
             {logoSrc ? (
-              <img
+              <Image
                 src={logoSrc}
                 alt={serverName}
-                className="w-full h-full object-cover"
+                fill
+                className="object-cover"
               />
             ) : (
               logoInitials

components.json

@@ -12,7 +12,7 @@
   },
   "iconLibrary": "lucide",
   "aliases": {
-    "components": "@/components",
+    "components": "@/components/bits",
     "utils": "@/lib/utils",
     "ui": "@/components/ui",
     "lib": "@/lib",

components/LinkPreviewCard.tsx

@@ -1,5 +1,6 @@
 import { accent, indigo, text } from "@/lib/colors";
 import { AnimatePresence, motion } from "framer-motion";
+import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
@@ -240,15 +241,17 @@ export function LinkPreviewCard({
                   </div>
 
                   {showImage && (
-                    <div className="shrink-0">
-                      <img
-                        src={data.image!}
-                        alt=""
-                        loading="lazy"
+                    <div
+                      className="relative w-[6rem] h-[6rem]"
+                      style={{ border: `1px solid ${indigo(0.18)}` }}
+                    >
+                      <Image
+                        src={data.image || ""}
+                        alt="Preview"
+                        fill
                         referrerPolicy="no-referrer"
                         onError={() => setImgError(true)}
-                        className="w-[6rem] h-[6rem] object-cover aspect-square transition-all duration-300 hover:scale-105"
-                        style={{ border: `1px solid ${indigo(0.18)}` }}
+                        className="object-cover aspect-square transition-all duration-300 hover:scale-105"
                       />
                     </div>
                   )}

components/bits/TargetCursor.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { text } from "@/lib/colors";
 import { gsap } from "gsap";
 import React, {
   useCallback,
@@ -8,7 +9,6 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { text } from "@/lib/colors";
 
 // A position: fixed element is positioned relative to the viewport UNLESS an
 // ancestor establishes a containing block (transform, perspective, filter,
@@ -114,6 +114,8 @@ const TargetCursor: React.FC<TargetCursorProps> = ({
   useEffect(() => {
     if (!mounted || isMobile || !cursorRef.current) return;
 
+    const activeStrength = activeStrengthRef.current;
+
     const originalCursor = document.body.style.cursor;
     if (hideDefaultCursor) {
       document.body.style.cursor = "none";
@@ -168,7 +170,7 @@ const TargetCursor: React.FC<TargetCursorProps> = ({
       ) {
         return;
       }
-      const strength = activeStrengthRef.current.current;
+      const strength = activeStrength.current;
       if (strength === 0) return;
       const cursorX = gsap.getProperty(cursorRef.current, "x") as number;
       const cursorY = gsap.getProperty(cursorRef.current, "y") as number;
@@ -301,7 +303,7 @@ const TargetCursor: React.FC<TargetCursorProps> = ({
       isActiveRef.current = true;
       gsap.ticker.add(tickerFnRef.current!);
 
-      gsap.to(activeStrengthRef.current, {
+      gsap.to(activeStrength, {
         current: 1,
         duration: hoverDuration,
         ease: "power2.out",
@@ -320,7 +322,10 @@ const TargetCursor: React.FC<TargetCursorProps> = ({
         gsap.ticker.remove(tickerFnRef.current!);
         isActiveRef.current = false;
         targetCornerPositionsRef.current = null;
-        gsap.set(activeStrengthRef.current, { current: 0, overwrite: true });
+        gsap.set(activeStrength, {
+          current: 0,
+          overwrite: true,
+        });
         activeTarget = null;
 
         if (cursorColorOnTarget && cornersRef.current) {
@@ -418,7 +423,7 @@ const TargetCursor: React.FC<TargetCursorProps> = ({
       document.body.style.cursor = originalCursor;
       isActiveRef.current = false;
       targetCornerPositionsRef.current = null;
-      activeStrengthRef.current.current = 0;
+      activeStrength.current = 0;
     };
   }, [
     mounted,

components/home/BelongSection.tsx

@@ -126,9 +126,9 @@ export default function BelongSection() {
             className="mt-4 text-sm max-w-xl mx-auto leading-relaxed"
             style={{ fontFamily: "var(--font-geist-mono)", color: text.dim }}
           >
-            Whether you're making your first commit or building your next big
-            project, DevHub is a community where you can learn, contribute, and
-            learn together.
+            {
+              "Whether you're making your first commit or building your next big project, DevHub is a community where you can learn, contribute, and learn together."
+            }
           </motion.p>
         </motion.div>
 

components/site/Footer.tsx

@@ -1,5 +1,6 @@
 import { accent, background, indigo, text } from "@/lib/colors";
 import data from "@/lib/staticdata.config";
+import Image from "next/image";
 import Link from "next/link";
 
 const { email } = data;
@@ -39,9 +40,11 @@ export default function Footer() {
                 className="font-bold text-[#6366f1] text-lg"
                 style={{ fontFamily: "var(--font-geist-mono)" }}
               >
-                <img
+                <Image
                   src="https://raw.githubusercontent.com/open-devhub/.github/refs/heads/main/assets/icon_darker.png"
-                  width="30"
+                  alt="Open DevHub logo"
+                  width={30}
+                  height={30}
                 />
               </span>
               <span

components/site/Navbar.tsx

@@ -3,6 +3,7 @@
 import { menuItem, menuOverlay } from "@/lib/animations";
 import { indigo, shadow } from "@/lib/colors";
 import { AnimatePresence, motion } from "framer-motion";
+import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -71,9 +72,11 @@ export default function Navbar() {
                 className="font-bold text-[#6366f1] text-lg"
                 style={{ fontFamily: "var(--font-geist-mono)" }}
               >
-                <img
+                <Image
                   src="https://raw.githubusercontent.com/open-devhub/.github/refs/heads/main/assets/icon_darker.png"
-                  width="30"
+                  alt="Open DevHub logo"
+                  width={30}
+                  height={30}
                 />
               </span>
               <span

content/pages/community/acknowledgements.md

@@ -27,7 +27,7 @@ Everyone who has opened a PR, reviewed someone else's code, filed a well-written
 - [GitHub](https://github.com), Hosts the source code and manages issues, pull requests, and contributions.
 - [Node.js](https://nodejs.org), Runs backend services, tooling, and development utilities across the project.
 - [Discord.js](https://discord.js.org), Powers DevHub bots and integrations within the Discord ecosystem.
-- [ESLint & Prettier](https://prettier.io), Maintain consistent code quality and formatting across the project.
+- [ESLint & Prettier](https://eslint.org), Maintain consistent code quality and formatting across the project.
 
 ## Inspiration
 

lib/redirects.config.ts

@@ -1,7 +1,7 @@
 import data from "./staticdata.config.ts";
 const { invite, github, quillbot } = data;
 
-export default [
+const redirectConfig = [
   {
     sources: ["/join", "/invite", "/discord", "/chat"],
     destination: invite,
@@ -40,3 +40,5 @@ export default [
     permanent: false,
   },
 ];
+
+export default redirectConfig;

lib/staticdata.config.ts

@@ -1,8 +1,10 @@
-export default {
+const staticData = {
   invite: "https://discord.gg/MuZFAeVHgp",
   members: 500,
   github: "https://github.com/open-devhub",
   quillbot:
     "https://discord.com/oauth2/authorize?client_id=1447982776740610058",
   email: "open-devhub@outlook.com",
 };
+
+export default staticData;

package.json

@@ -1,13 +1,13 @@
 {
-  "name": "wesite",
+  "name": "website",
   "version": "1.0.0",
   "private": true,
   "license": "GPL-3.0-only",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint .",
     "typecheck": "tsc --noEmit",
     "format": "prettier --write ."
   },
@@ -48,7 +48,7 @@
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.3.0",
     "framer-motion": "^12.38.0",
-    "gsap": "^3.15.0",
+    "gsap": "^3.13.0",
     "input-otp": "^1.2.4",
     "lucide-react": "^0.446.0",
     "motion": "^12.40.0",