fix eslint errors with website

Author: yaacovCR

eslint.config.mjs

@@ -21,8 +21,7 @@ export default tsConfig(
       'npmDist',
       'npmEsmDist',
       'denoDist',
-      'websiteDist',
-      'website',
+      'website/.next',
       'integrationTests/ts/*.ts',
     ],
   },
@@ -881,8 +880,26 @@ export default tsConfig(
     rules: {
       ...reactHooksPlugin.configs.recommended.rules,
       'no-restricted-exports': 'off',
+      'import/extensions': [
+        'error',
+        'ignorePackages',
+        {
+          ts: 'never',
+          tsx: 'never',
+        },
+      ],
       'import/no-default-export': 'off',
+      'import/no-extraneous-dependencies': 'off',
       'import/no-nodejs-modules': 'off',
+      'n/no-missing-import': 'off', // allows linting from root of project when website packages are not installed
+      'n/file-extension-in-import': [
+        'error',
+        'always',
+        {
+          '': 'never',
+        },
+      ],
+      'import/unambiguous': 'off',
     },
   },
 );

website/next.config.mjs website/next.config.jswebsite/next.config.mjs renamed to website/next.config.js

@@ -1,6 +1,7 @@
-import nextra from 'nextra';
-import path from 'node:path';
 import fs from 'node:fs';
+import path from 'node:path';
+
+import nextra from 'nextra';
 
 const fileContents = fs.readFileSync('./vercel.json', 'utf-8');
 const vercel = JSON.parse(fileContents);
@@ -31,7 +32,7 @@ export default withNextra({
     });
     return config;
   },
-  redirects: async () => vercel.redirects,
+  redirects: () => vercel.redirects,
   output: 'export',
   images: {
     loader: 'custom',
@@ -40,6 +41,7 @@ export default withNextra({
   },
   transpilePackages: ['next-image-export-optimizer'],
   env: {
+    /* eslint-disable camelcase */
     nextImageExportOptimizer_imageFolderPath: 'public/images',
     nextImageExportOptimizer_exportFolderPath: 'out',
     nextImageExportOptimizer_quality: '75',
@@ -52,6 +54,7 @@ export default withNextra({
     // If you want to cache the remote images, you can set the time to live of the cache in seconds.
     // The default value is 0 seconds.
     nextImageExportOptimizer_remoteImageCacheTTL: '0',
+    /* eslint-enable camelcase */
   },
   trailingSlash: true,
 });

website/package.json

@@ -2,6 +2,7 @@
   "name": "website",
   "version": "0.0.0",
   "description": "The GraphQL.JS documentation website",
+  "type": "module",
   "private": true,
   "directories": {
     "doc": "docs"

website/pages/_app.tsx

@@ -1,6 +1,9 @@
+/* eslint-disable camelcase, new-cap, react/react-in-jsx-scope, react/no-unknown-property */
+
 import type { AppProps } from 'next/app';
 import { Roboto_Flex, Roboto_Mono } from 'next/font/google';
 
+// eslint-disable-next-line import/no-unassigned-import
 import '../css/globals.css';
 
 const robotoFlex = Roboto_Flex({

website/pages/_document.tsx

@@ -1,4 +1,6 @@
-import { Html, Head, Main, NextScript } from 'next/document';
+/* eslint-disable react/react-in-jsx-scope */
+
+import { Head, Html, Main, NextScript } from 'next/document';
 
 export default function Document() {
   return (

website/postcss.config.js

@@ -1,7 +1,9 @@
-module.exports = {
+const config = {
   plugins: {
     'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
   },
 };
+
+export default config;

website/tailwind.config.js

@@ -1,6 +1,6 @@
 import typography from '@tailwindcss/typography';
 
-module.exports = {
+const config = {
   content: [
     './pages/**/*.{ts,tsx,mdx}',
     './icons/**/*.{ts,tsx,mdx}',
@@ -38,3 +38,5 @@ module.exports = {
   plugins: [typography],
   darkMode: ['class', 'html[class~="dark"]'],
 };
+
+export default config;

website/theme.config.tsx

@@ -1,14 +1,17 @@
-import React from 'react';
-import { DocsThemeConfig, ThemeSwitch, useConfig } from 'nextra-theme-docs';
+/* eslint-disable internal-rules/only-ascii */
 import NextLink from 'next/link';
+import { useRouter } from 'next/router';
+import type { DocsThemeConfig } from 'nextra-theme-docs';
+import { ThemeSwitch, useConfig } from 'nextra-theme-docs';
+import React from 'react';
+
 import {
+  DiscordIcon,
+  GitHubIcon,
   GraphQLWordmarkLogo,
   StackOverflowIcon,
-  GitHubIcon,
-  DiscordIcon,
   TwitterIcon,
 } from './icons/index';
-import { useRouter } from 'next/router';
 
 const graphQLLogo = (
   <GraphQLWordmarkLogo className="h-8 nextra-logo" title="GraphQL" />
@@ -23,7 +26,7 @@ function List({
   items,
 }: {
   title: string;
-  items: { title: string; url: string }[];
+  items: Array<{ title: string; url: string }>;
 }) {
   return (
     <ul className="text-sm flex flex-col gap-4 max-lg:w-[46%]">
@@ -196,14 +199,18 @@ const cfg: DocsThemeConfig = {
       <>
         <title>{title}</title>
         <meta property="og:title" content={title} />
-        {description && (
+        {description != null && description !== '' && (
           <>
             <meta name="description" content={description} />
             <meta property="og:description" content={description} />
           </>
         )}
-        {canonical && <link rel="canonical" href={canonical} />}
-        {image && <meta name="og:image" content={image} />}
+        {canonical != null && canonical !== '' && (
+          <link rel="canonical" href={canonical} />
+        )}
+        {image != null && image !== '' && (
+          <meta name="og:image" content={image} />
+        )}
         <meta property="og:image" content="/img/og-image.png" />
         <meta property="twitter:site" content="@graphql" />
       </>
@@ -212,7 +219,7 @@ const cfg: DocsThemeConfig = {
   banner: {
     content: (
       <>
-        🎬 That's a Wrap for GraphQLConf 2024! • Watch the Videos •{' '}
+        🎬 That&apos;s a Wrap for GraphQLConf 2024! • Watch the Videos •{' '}
         <NextLink
           href="https://graphql.org/conf/2024"
           className="underline after:content-['_→'] after:font-sans"