fix(eslint): add eslint jsx rule and fix nesting issues

.eslintrc.json

@@ -1,3 +1,23 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
+  "extends": ["next/core-web-vitals", "next/typescript", "plugin:mdx/recommended"],
+  "plugins": ["validate-jsx-nesting"],
+  "rules": {
+    "validate-jsx-nesting/no-invalid-jsx-nesting": "error"
+  },
+  "overrides": [
+    {
+      "files": ["*.mdx"],
+      "parserOptions": {
+        "sourceType": "module"
+      },
+      "rules": {
+        "react/jsx-no-undef": "off",
+        "react/no-unescaped-entities": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-unused-expressions": "off",
+        "no-unused-expressions": "off",
+        "@next/next/no-img-element": "off"
+      }
+    }
+  ]
 }

.github/workflows/deploy-to-arweave.yaml

@@ -23,8 +23,28 @@ on:
         type: string
 
 jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run linter
+        run: yarn lint
+
   deploy:
     runs-on: ubuntu-latest
+    needs: lint
 
     steps:
       - name: Checkout repository

.github/workflows/pr-preview.yaml

@@ -8,8 +8,29 @@ on:
       - "src/**"
 
 jobs:
+  lint:
+    runs-on: ubuntu-latest
+    if: github.event.action != 'closed'
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run linter
+        run: yarn lint
+
   deploy-preview:
     runs-on: ubuntu-latest
+    needs: lint
     if: github.event.pull_request.head.repo.full_name == github.repository && github.event.action != 'closed'
 
     steps:
@@ -32,14 +53,14 @@ jobs:
         with:
           deploy-key: ${{ secrets.DEPLOY_KEY }}
           arns-name: ${{ secrets.ARNS_NAME }}
-          preview: 'true'
+          preview: "true"
           github-token: ${{ secrets.GITHUB_TOKEN }}
           deploy-folder: ./out
 
   cleanup:
     runs-on: ubuntu-latest
     if: github.event.action == 'closed'
-    
+
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4

content/build/run-a-gateway/manage/troubleshooting.mdx

@@ -31,7 +31,7 @@ Below is a quick summary of what you should check when troubleshooting your gate
 ### My Gateway Seems to be Running but...
 
 <Accordions>
-<Accordion title="My release number doesn't match the latest version, or includes &quot;-pre&quot;">
+<Accordion title="My release number doesn't match the latest version, or includes'-pre'">
 
 If your release number when you go to `<your-gateway>/ar-io/info` is lower than the current release, you simply need to upgrade your gateway in order to reach the latest release.
 
@@ -67,7 +67,7 @@ Viewblock and https://gateways.ar.io use a very simple ping method for determini
 
 </Accordion>
 
-<Accordion title="&lt;gateway&gt;/ar-io/observer/reports/current just says &quot;report pending&quot;">
+<Accordion title="<gateway>/ar-io/observer/reports/current just says 'report pending'">
 
 This is normal. Your Observer is working to generate a report and that report will be displayed once it is complete.
 
@@ -196,7 +196,7 @@ If you continue to have issues, you can check the [official certbot instructions
 
 </Accordion>
 
-<Accordion title="I see an error in my logs that says &lt;h&quot;... is not valid JSON">
+<Accordion title="I see an error in my logs that says '<h...' is not valid JSON">
 
 - This happens when a request to a CU fails, and your gateway receives an html failure message instead of the expected JSON response. This will normally clear up on its own after congestion on that CU dies down, but if it is persistent try switching to a different CU.
 

content/learn/gateways/gateway-registry.mdx

@@ -16,9 +16,9 @@ These nodes adhere to the AR.IO Network's protocols, creating a collaborative en
 <div className="flex justify-center my-8">
   <div className="text-center">
     <img src="/gateways.png" alt="AR.IO Network Portal showing the Gateway Address Registry" className="rounded-lg" />
-    <p className="text-md text-primary italic mt-4 px-4">
+    <span className="block text-md text-primary italic mt-4 px-4">
       The gateways.ar.io portal displays all gateways currently in the network, showing their stakes, performance scores, and operational metrics
-    </p>
+    </span>
   </div>
 </div>
 

content/learn/token/staking.mdx

@@ -38,9 +38,9 @@ To promote participation from a wider audience, the network allows anyone with a
 <div className="flex justify-center my-8">
   <div className="text-center">
     <img src="/staking.png" alt="Gateway Portal Staking Page" className="rounded-lg" />
-    <p className="text-md text-primary italic mt-4 px-4">
+    <span className="block text-md text-primary italic mt-4 px-4">
       Delegators can select which gateways to stake with in gateways.ar.io - maximize their potential rewards based on operator performance, stakes, and weights
-    </p>
+    </span>
   </div>
 </div>
 

package.json

@@ -6,6 +6,7 @@
     "build": "NODE_ENV=production next build",
     "dev": "next dev --turbo",
     "start": "next start",
+    "lint": "eslint src/ content/ --ext .ts,.tsx,.mdx",
     "postinstall": "fumadocs-mdx",
     "generate-api-docs": "rm -rf content/api/turbo && rm -rf content/api/ar-io-node && tsx scripts/generate-api-docs.ts",
     "generate-sdk-docs": "tsx scripts/generate-sdk-docs.ts",
@@ -44,6 +45,8 @@
     "@types/react-dom": "^19.1.9",
     "eslint": "^8",
     "eslint-config-next": "15.5.2",
+    "eslint-plugin-mdx": "^3.6.2",
+    "eslint-plugin-validate-jsx-nesting": "^0.1.1",
     "next-validate-link": "^1.6.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.13",

src/components/page-feedback.tsx

@@ -6,7 +6,12 @@ interface PageFeedbackProps {
   pageUrl: string;
 }
 
-async function handleFeedback(pageUrl: string, feedback: any) {
+interface FeedbackData {
+  opinion: "good" | "bad";
+  message?: string;
+}
+
+async function handleFeedback(pageUrl: string, feedback: FeedbackData) {
   try {
     // Web3Forms configuration - Public access key for AR.IO documentation feedback
     const WEB3FORMS_ACCESS_KEY = "88dab14e-e2f1-47cc-b284-84496d1ddc59";