refactor: remove ESLint configuration and adjust class order for consistency

Author: codegino

.eslintrc

@@ -0,0 +1,33 @@
+import pluginNext from '@next/eslint-plugin-next'
+import parser from '@typescript-eslint/parser' // optional
+import tailwind from 'eslint-plugin-tailwindcss'
+
+export default [
+  ...tailwind.configs['flat/recommended'],
+  {
+    name: 'ESLint Config - nextjs',
+    languageOptions: {
+      parser, // optional
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    settings: {
+      tailwindcss: {
+        callees: ['classnames', 'clsx', 'ctl', 'cn', 'cva'],
+      },
+    },
+    plugins: {
+      '@next/next': pluginNext,
+    },
+    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
+    rules: {
+      ...pluginNext.configs.recommended.rules,
+      ...pluginNext.configs['core-web-vitals'].rules,
+    },
+  },
+]

eslint.config.mjs

@@ -32,7 +32,7 @@
     "react-dom": "19.0.0",
     "react-github-calendar": "4.5.1",
     "react-gtm-module": "2.0.11",
-    "react-i18next": "15.1.0",
+    "react-i18next": "15.1.4",
     "react-intersection-observer": "9.13.1",
     "react-responsive-carousel": "3.2.23",
     "react-transition-group": "4.4.5",
@@ -54,15 +54,14 @@
     "eslint": "9.16.0",
     "eslint-config-next": "15.0.4",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-tailwindcss": "^3.17.5",
     "globby": "14.0.2",
     "gray-matter": "4.0.3",
-    "husky": "9.1.6",
+    "husky": "9.1.7",
     "lint-staged": "15.2.10",
     "plaiceholder": "3.0.0",
-    "postcss": "8.4.47",
-    "prettier": "3.3.3",
+    "postcss": "8.4.49",
+    "prettier": "3.4.2",
     "sharp": "0.33.5",
     "tailwindcss": "3.4.14",
     "typescript": "5.7.2"

package.json

@@ -39,7 +39,7 @@ const AboutMePage: NextPage = async () => {
               >
                 <h3 className="mb-4 text-xl">{detail.label}</h3>
                 <div
-                  className="text-justify max-w-screen-md px-4"
+                  className="max-w-screen-md px-4 text-justify"
                   dangerouslySetInnerHTML={{
                     __html: dompurify.sanitize(detail.content),
                   }}
@@ -52,7 +52,7 @@ const AboutMePage: NextPage = async () => {
         <h2 className="text-center">This website is powered by</h2>
         <TechStackCarousel techStacks={techStacks} />
 
-        <section className="mt-4 mb-2">
+        <section className="mb-2 mt-4">
           <h4 className="text-center">
             This awesome carousel is easily made using&nbsp;
             <NextLink

pnpm-lock.yaml

@@ -74,7 +74,7 @@ const BlogsWrapper = ({blogs}: {blogs: IBlogMetadata[]}) => {
           <h2>Empty result👎</h2>
           <h3>Try a different combination</h3>
           <button
-            className="px-4 py-2 mt-4 text-white bg-primary-600 rounded-md hover:bg-primary-700"
+            className="mt-4 rounded-md bg-primary-600 px-4 py-2 text-white hover:bg-primary-700"
             onClick={() => {
               setSelectedTags(null);
               setSearch(null);

src/app/about/page.tsx

@@ -44,7 +44,7 @@ function DebouncedInput({
   return (
     <input
       {...props}
-      className="md:pl-8 bg-transparent focus:outline-none w-full ring-1 ring-neutral-500 dark:ring-neutral-200 rounded-md"
+      className="w-full rounded-md bg-transparent ring-1 ring-neutral-500 focus:outline-none dark:ring-neutral-200 md:pl-8"
       value={value}
       onChange={e => setValue(e.target.value)}
     />
@@ -72,16 +72,16 @@ export default function SearchField() {
   };
 
   return (
-    <div className="relative flex items-center w-96">
-      <SearchIcon className="absolute w-4 h-4 ml-2  text-neutral-600 dark:text-neutral-200" />
+    <div className="relative flex w-96 items-center">
+      <SearchIcon className="absolute ml-2 size-4 text-neutral-600  dark:text-neutral-200" />
       <DebouncedInput
         placeholder="Filter by title or description"
         value={searchFilter}
         onChange={handleGlobalFilterChange}
       />
       {searchFilter && (
         <div
-          className="absolute w-4 h-4 mr-2 right-0 flex"
+          className="absolute right-0 mr-2 flex size-4"
           onClick={() => {
             setSearchFilter(null);
           }}

src/app/blog/BlogsWrapper.tsx

@@ -68,7 +68,7 @@ const BlogPage: NextPage<{
 
   if (!blog) {
     return (
-      <div className="h-[80vh] w-full bg-transparent text-center pt-10">
+      <div className="h-[80vh] w-full bg-transparent pt-10 text-center">
         <h2>Please wait</h2>
         <h3>Using magic to load content...</h3>
       </div>

src/app/blog/SearchField.tsx

@@ -21,7 +21,7 @@ async function BlogPage() {
 
   return (
     <>
-      <main className="flex items-center flex-col sm:pt-12">
+      <main className="flex flex-col items-center sm:pt-12">
         <h1>{t('myBlogs')}</h1>
         <BlogsWrapper blogs={blogs} />
       </main>

src/app/blog/[slug]/page.tsx

@@ -11,7 +11,7 @@ export default function Error({
 }) {
   useEffect(() => {
     // Log the error to an error reporting service
-    // eslint-disable-next-line no-console
+     
     console.error(error);
   }, [error]);