chore: upgrade ESLint to v9 and update configurations (#356)

* chore: upgrade ESLint to v9 and update configurations

Upgrade ESLint and configure and update ESLint rules.

* refactor: update code to comply with new ESLint v9 rules

.eslintignore

@@ -1,6 +0,0 @@
-.husky
-.vscode
-node_modules
-public
-dist
-.yarn

.eslintrc.js

@@ -1,24 +0,0 @@
-module.exports = {
-  env: {
-    node: true,
-    es2022: true,
-    browser: true,
-  },
-  extends: ["eslint:recommended", "plugin:astro/recommended"],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-  },
-  overrides: [
-    {
-      files: ["*.astro"],
-      parser: "astro-eslint-parser",
-      parserOptions: {
-        parser: "@typescript-eslint/parser",
-        extraFileExtensions: [".astro"],
-      },
-      rules: {},
-    },
-  ],
-};

.prettierignore

@@ -9,5 +9,5 @@
 !astro.config.ts
 !package.json
 !.prettierrc
-!.eslintrc.js
+!eslint.config.mjs
 !README.md

eslint.config.mjs

@@ -0,0 +1,44 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import astroParser from "astro-eslint-parser";
+import eslintPluginAstro from "eslint-plugin-astro";
+
+export default [
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...eslintPluginAstro.configs.recommended,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
+  {
+    files: ["*.astro"],
+    languageOptions: {
+      parser: astroParser,
+      parserOptions: {
+        parser: "@typescript-eslint/parser",
+        extraFileExtensions: [".astro"],
+      },
+    },
+  },
+  {
+    files: ["tailwind.config.cjs", "**/*.d.ts"],
+    rules: {
+      "@typescript-eslint/no-require-imports": "off",
+      "@typescript-eslint/triple-slash-reference": "off",
+    },
+  },
+  {
+    rules: {
+      "@typescript-eslint/no-unused-expressions": "off",
+    },
+  },
+  {
+    ignores: ["dist/**", ".astro"],
+  },
+];

package.json

@@ -34,14 +34,16 @@
     "@types/github-slugger": "^1.3.0",
     "@types/lodash.kebabcase": "^4.1.9",
     "@types/react": "^18.3.3",
-    "@typescript-eslint/parser": "^6.19.0",
+    "@typescript-eslint/parser": "^8.1.0",
-    "astro-eslint-parser": "^0.16.2",
+    "astro-eslint-parser": "^1.0.2",
-    "eslint": "^8.56.0",
+    "eslint": "^9.9.0",
-    "eslint-plugin-astro": "^0.31.3",
+    "eslint-plugin-astro": "^1.2.3",
+    "globals": "^15.9.0",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "typescript-eslint": "^8.1.0"
   }
 }

src/components/Search.tsx

@@ -58,7 +58,7 @@ export default function SearchBar({ searchList }: Props) {
   useEffect(() => {
     // Add search result only if
     // input value is more than one character
-    let inputResult = inputVal.length > 1 ? fuse.search(inputVal) : [];
+    const inputResult = inputVal.length > 1 ? fuse.search(inputVal) : [];
     setSearchResults(inputResult);
 
     // Update search string in URL

src/layouts/PostDetails.astro

@@ -150,8 +150,10 @@ const layoutProps = {
   /** Attaches links to headings in the document,
    *  allowing sharing of sections easily */
   function addHeadingLinks() {
-    let headings = Array.from(document.querySelectorAll("h2, h3, h4, h5, h6"));
+    const headings = Array.from(
-    for (let heading of headings) {
+      document.querySelectorAll("h2, h3, h4, h5, h6")
+    );
+    for (const heading of headings) {
       heading.classList.add("group");
       const link = document.createElement("a");
       link.className =
@@ -170,14 +172,14 @@ const layoutProps = {
   /** Attaches copy buttons to code blocks in the document,
    * allowing users to copy code easily. */
   function attachCopyButtons() {
-    let copyButtonLabel = "Copy";
+    const copyButtonLabel = "Copy";
-    let codeBlocks = Array.from(document.querySelectorAll("pre"));
+    const codeBlocks = Array.from(document.querySelectorAll("pre"));
 
-    for (let codeBlock of codeBlocks) {
+    for (const codeBlock of codeBlocks) {
-      let wrapper = document.createElement("div");
+      const wrapper = document.createElement("div");
       wrapper.style.position = "relative";
 
-      let copyButton = document.createElement("button");
+      const copyButton = document.createElement("button");
       copyButton.className =
         "copy-code absolute right-3 -top-3 rounded bg-skin-card px-2 py-1 text-xs leading-4 text-skin-base font-medium";
       copyButton.innerHTML = copyButtonLabel;
@@ -194,8 +196,8 @@ const layoutProps = {
     }
 
     async function copyCode(block, button) {
-      let code = block.querySelector("code");
+      const code = block.querySelector("code");
-      let text = code?.innerText;
+      const text = code?.innerText;
 
       await navigator.clipboard.writeText(text ?? "");