chore(website): Cleanup docusaurus setup (#3355)

* Update docusaurus typescript setup for v3

And fix lint-staged and eslint

* Enable automatic JSX runtime

* Remove babel config and dependencies

* update yarn.lock

* add typecheck to site workflow

* update typedoc config

* downgrade docusaurus packages

* Update site.yml

* Type context and options in webpack-docusaurus-plugin.ts

---------

Co-authored-by: Matt Hatcher <3768988+MatthewSH@users.noreply.github.com>

website/.eslintrc.yml

@@ -1,14 +1,29 @@
+root: true
 env:
   browser: true
   es2021: true
 extends:
-  - plugin:react/recommended
   - standard-with-typescript
-  - prettier
+  - plugin:react/recommended
+  - plugin:react/jsx-runtime
+  - plugin:prettier/recommended
 overrides: []
 parserOptions:
   ecmaVersion: latest
   sourceType: module
+  project: ['./tsconfig.json']
+ignorePatterns:
+  - .docusaurus
+  - .yarn
+  - build
+  - node_modules
+  - api_reference
+settings:
+  react:
+    version: 18.2.0
 plugins:
   - react
-rules: {}
+rules:
+  '@typescript-eslint/prefer-nullish-coalescing': off
+  '@typescript-eslint/strict-boolean-expressions': off
+  '@typescript-eslint/explicit-function-return-type': off

website/api_reference/generated/modules.md

@@ -6,8 +6,8 @@
 
 ### Modules
 
-- [@discordeno/bot](modules/Bot.md)
-- [@discordeno/gateway](modules/Gateway.md)
-- [@discordeno/rest](modules/Rest.md)
-- [@discordeno/types](modules/Types.md)
-- [@discordeno/utils](modules/Utils.md)
+- [@discordeno/bot](modules/Bot)
+- [@discordeno/gateway](modules/Gateway)
+- [@discordeno/rest](modules/Rest)
+- [@discordeno/types](modules/Types)
+- [@discordeno/utils](modules/Utils)

website/babel.config.js

@@ -1,4 +0,0 @@
-module.exports = {
-  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
-  plugins: ['babel-plugin-styled-components'],
-}

website/docusaurus.config.js

@@ -1,277 +0,0 @@
-// @ts-check
-// Note: type annotations allow type checking and IDEs autocompletion
-
-const { themes } = require('prism-react-renderer')
-
-/** @type {import('@docusaurus/types').Config} */
-const config = {
-  title: 'Discordeno',
-  tagline: 'Making Scalable Bots Easy!',
-  favicon: 'img/favicon.png',
-
-  // Set the production url of your site here
-  url: 'https://discordeno.js.org/',
-  // Set the /<baseUrl>/ pathname under which your site is served
-  // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: '/',
-
-  // GitHub pages deployment config.
-  // If you aren't using GitHub pages, you don't need these.
-  organizationName: 'discordeno', // Usually your GitHub org/user name.
-  projectName: 'discordeno', // Usually your repo name.
-  deploymentBranch: 'gh-pages',
-  trailingSlash: false,
-
-  webpack: {
-    jsLoader: isServer => ({
-      loader: require.resolve('esbuild-loader'),
-      options: {
-        loader: 'tsx',
-        format: isServer ? 'cjs' : undefined,
-        target: isServer ? 'node12' : 'es2017',
-      },
-    }),
-  },
-
-  onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
-
-  // Even if you don't use internalization, you can use this field to set useful
-  // metadata like html lang. For example, if your site is Chinese, you may want
-  // to replace "en" with "zh-Hans".
-  i18n: {
-    defaultLocale: 'en',
-    locales: ['en'],
-  },
-
-  presets: [
-    [
-      'classic',
-      /** @type {import('@docusaurus/preset-classic').Options} */
-      ({
-        docs: {
-          sidebarPath: require.resolve('./sidebars.js'),
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
-          editUrl:
-            'https://github.com/discordeno/discordeno/tree/main/website/',
-        },
-        blog: {
-          showReadingTime: true,
-        },
-        theme: {
-          customCss: require.resolve('./src/styling/index.css'),
-        },
-      }),
-    ],
-  ],
-
-  themeConfig:
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
-    ({
-      // Replace with your project's social card
-      image: 'img/links-embed-image.png',
-      navbar: {
-        title: 'Discordeno',
-        logo: {
-          alt: 'Discordeno Logo',
-          src: 'img/logo.svg',
-        },
-        items: [
-          {
-            type: 'doc',
-            docId: 'intro',
-            position: 'left',
-            label: 'Documentation',
-          },
-          {
-            type: 'docSidebar',
-            sidebarId: 'old_docs',
-            position: 'left',
-            label: 'Old Docs',
-            docsPluginId: 'old_docs',
-          },
-          {
-            type: 'docSidebar',
-            sidebarId: 'tutorial',
-            position: 'left',
-            label: 'Tutorial',
-            docsPluginId: 'tutorial',
-          },
-          {
-            type: 'docSidebar',
-            sidebarId: 'api_reference',
-            position: 'left',
-            label: 'API Reference',
-            docsPluginId: 'api_reference',
-          },
-          { to: '/blog', label: 'Blog', position: 'left' },
-          {
-            href: 'https://discord.gg/ddeno',
-            label: 'Discord',
-            position: 'right',
-          },
-          {
-            href: 'https://github.com/discordeno/discordeno',
-            label: 'GitHub',
-            position: 'right',
-          },
-        ],
-      },
-      footer: {
-        style: 'light',
-        links: [
-          {
-            title: 'Docs',
-            items: [
-              {
-                label: 'Documentation',
-                to: '/docs/intro',
-              },
-            ],
-          },
-          {
-            title: 'Old Docs',
-            items: [
-              {
-                label: 'Introduction',
-                to: '/old_docs/intro',
-              },
-              {
-                label: 'Getting Started',
-                to: '/old_docs/getting-started',
-              },
-              {
-                label: 'FAQ',
-                to: '/old_docs/frequently-asked-questions',
-              },
-              {
-                label: 'Benchmark',
-                to: '/old_docs/benchmark',
-              },
-            ],
-          },
-          {
-            title: 'Tutorial',
-            items: [
-              {
-                label: 'Big Bot',
-                to: '/tutorial/big-bot-guide/step-by-step',
-              },
-              {
-                label: 'Node.js',
-                to: '/tutorial/nodejs/getting-started',
-              },
-              {
-                label: 'Amethyst',
-                to: '/tutorial/amethyst/intro',
-              },
-            ],
-          },
-          {
-            title: 'API Reference',
-            items: [
-              {
-                label: 'Classes',
-                to: '/api_reference/category/classes-3',
-              },
-              {
-                label: 'Enums',
-                to: '/api_reference/category/enums-3',
-              },
-              {
-                label: 'Interfaces',
-                to: '/api_reference/category/interfaces-3',
-              },
-              {
-                label: 'Modules',
-                to: '/api_reference/category/modules-3',
-              },
-            ],
-          },
-          {
-            title: 'Community',
-            items: [
-              {
-                label: 'Discord',
-                href: 'https://discord.gg/ddeno',
-              },
-            ],
-          },
-          {
-            title: 'More',
-            items: [
-              {
-                label: 'Blog',
-                to: '/blog',
-              },
-              {
-                label: 'GitHub',
-                href: 'https://github.com/discordeno/discordeno',
-              },
-            ],
-          },
-        ],
-        copyright: `Copyright © 2021-${new Date().getFullYear()}, Discordeno.`,
-      },
-      prism: {
-        theme: themes.github,
-        darkTheme: themes.dracula,
-      },
-    }),
-
-  plugins: [
-    [
-      '@docusaurus/plugin-content-docs',
-      /** @type {import('@docusaurus/plugin-content-docs').Options} */
-      {
-        id: 'old_docs',
-        path: 'old_docs',
-        routeBasePath: 'old_docs',
-        sidebarPath: require.resolve('./sidebars.js'),
-        editUrl: 'https://github.com/discordeno/discordeno/tree/main/site/',
-      },
-    ],
-    [
-      '@docusaurus/plugin-content-docs',
-      /** @type {import('@docusaurus/plugin-content-docs').Options} */
-      {
-        id: 'tutorial',
-        path: 'tutorial',
-        routeBasePath: 'tutorial',
-        sidebarPath: require.resolve('./sidebars.js'),
-        editUrl: 'https://github.com/discordeno/discordeno/tree/main/site/',
-      },
-    ],
-    [
-      '@docusaurus/plugin-content-docs',
-      /** @type {import('@docusaurus/plugin-content-docs').Options} */
-      {
-        id: 'api_reference',
-        path: 'api_reference',
-        routeBasePath: 'api_reference',
-        sidebarPath: require.resolve('./sidebars.js'),
-        editUrl: 'https://github.com/discordeno/discordeno/tree/main/site/',
-      },
-    ],
-    [
-      require.resolve('@easyops-cn/docusaurus-search-local'),
-      {
-        indexDocs: true,
-        indexPages: true,
-        docsRouteBasePath: ['/docs', '/tutorial', 'api_reference'],
-        language: ['en'],
-        hashed: true,
-        docsDir: ['docs', 'tutorial', 'api_reference'],
-        blogDir: [],
-        removeDefaultStopWordFilter: true,
-        highlightSearchTermsOnTargetPage: true,
-        searchResultLimits: 8,
-        searchResultContextMaxLength: 50,
-      },
-    ],
-    './webpack-docusaurus-plugin',
-  ],
-}
-
-module.exports = config

website/docusaurus.config.ts

@@ -0,0 +1,276 @@
+// Note: type annotations allow type checking and IDEs autocompletion
+
+import type { Options as PluginContentDocs } from '@docusaurus/plugin-content-docs'
+import type {
+  Options as PresetClassicOptions,
+  ThemeConfig,
+} from '@docusaurus/preset-classic'
+import type { Config } from '@docusaurus/types'
+import { themes } from 'prism-react-renderer'
+
+const config: Config = {
+  title: 'Discordeno',
+  tagline: 'Making Scalable Bots Easy!',
+  favicon: 'img/favicon.png',
+
+  // Set the production url of your site here
+  url: 'https://discordeno.js.org/',
+  // Set the /<baseUrl>/ pathname under which your site is served
+  // For GitHub pages deployment, it is often '/<projectName>/'
+  baseUrl: '/',
+
+  // GitHub pages deployment config.
+  // If you aren't using GitHub pages, you don't need these.
+  organizationName: 'discordeno', // Usually your GitHub org/user name.
+  projectName: 'discordeno', // Usually your repo name.
+  deploymentBranch: 'gh-pages',
+  trailingSlash: false,
+
+  webpack: {
+    jsLoader: isServer => ({
+      loader: require.resolve('esbuild-loader'),
+      options: {
+        loader: 'tsx',
+        jsx: 'automatic',
+        format: isServer ? 'cjs' : undefined,
+        target: isServer ? 'node12' : 'es2017',
+      },
+    }),
+  },
+
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+
+  // Even if you don't use internalization, you can use this field to set useful
+  // metadata like html lang. For example, if your site is Chinese, you may want
+  // to replace "en" with "zh-Hans".
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
+
+  presets: [
+    [
+      'classic',
+      {
+        docs: {
+          sidebarPath: require.resolve('./sidebars.ts'),
+          // Please change this to your repo.
+          // Remove this to remove the "edit this page" links.
+          editUrl:
+            'https://github.com/discordeno/discordeno/tree/main/website/',
+        },
+        blog: {
+          showReadingTime: true,
+        },
+        theme: {
+          customCss: require.resolve('./src/styling/index.css'),
+        },
+      } satisfies PresetClassicOptions,
+    ],
+  ],
+
+  themeConfig: {
+    // Replace with your project's social card
+    image: 'img/links-embed-image.png',
+    navbar: {
+      title: 'Discordeno',
+      logo: {
+        alt: 'Discordeno Logo',
+        src: 'img/logo.svg',
+      },
+      items: [
+        {
+          type: 'doc',
+          docId: 'intro',
+          position: 'left',
+          label: 'Documentation',
+        },
+        {
+          type: 'docSidebar',
+          sidebarId: 'old_docs',
+          position: 'left',
+          label: 'Old Docs',
+          docsPluginId: 'old_docs',
+        },
+        {
+          type: 'docSidebar',
+          sidebarId: 'tutorial',
+          position: 'left',
+          label: 'Tutorial',
+          docsPluginId: 'tutorial',
+        },
+        {
+          type: 'docSidebar',
+          sidebarId: 'api_reference',
+          position: 'left',
+          label: 'API Reference',
+          docsPluginId: 'api_reference',
+        },
+        { to: '/blog', label: 'Blog', position: 'left' },
+        {
+          href: 'https://discord.gg/ddeno',
+          label: 'Discord',
+          position: 'right',
+        },
+        {
+          href: 'https://github.com/discordeno/discordeno',
+          label: 'GitHub',
+          position: 'right',
+        },
+      ],
+    },
+    footer: {
+      style: 'light',
+      links: [
+        {
+          title: 'Docs',
+          items: [
+            {
+              label: 'Documentation',
+              to: '/docs/intro',
+            },
+          ],
+        },
+        {
+          title: 'Old Docs',
+          items: [
+            {
+              label: 'Introduction',
+              to: '/old_docs/intro',
+            },
+            {
+              label: 'Getting Started',
+              to: '/old_docs/getting-started',
+            },
+            {
+              label: 'FAQ',
+              to: '/old_docs/frequently-asked-questions',
+            },
+            {
+              label: 'Benchmark',
+              to: '/old_docs/benchmark',
+            },
+          ],
+        },
+        {
+          title: 'Tutorial',
+          items: [
+            {
+              label: 'Big Bot',
+              to: '/tutorial/big-bot-guide/step-by-step',
+            },
+            {
+              label: 'Node.js',
+              to: '/tutorial/nodejs/getting-started',
+            },
+            {
+              label: 'Amethyst',
+              to: '/tutorial/amethyst/intro',
+            },
+          ],
+        },
+        {
+          title: 'API Reference',
+          items: [
+            {
+              label: 'Classes',
+              to: '/api_reference/category/classes-3',
+            },
+            {
+              label: 'Enums',
+              to: '/api_reference/category/enums-3',
+            },
+            {
+              label: 'Interfaces',
+              to: '/api_reference/category/interfaces-3',
+            },
+            {
+              label: 'Modules',
+              to: '/api_reference/category/modules-3',
+            },
+          ],
+        },
+        {
+          title: 'Community',
+          items: [
+            {
+              label: 'Discord',
+              href: 'https://discord.gg/ddeno',
+            },
+          ],
+        },
+        {
+          title: 'More',
+          items: [
+            {
+              label: 'Blog',
+              to: '/blog',
+            },
+            {
+              label: 'GitHub',
+              href: 'https://github.com/discordeno/discordeno',
+            },
+          ],
+        },
+      ],
+      copyright: `Copyright © 2021-${new Date().getFullYear()}, Discordeno.`,
+    },
+    prism: {
+      theme: themes.github,
+      darkTheme: themes.dracula,
+    },
+  } satisfies ThemeConfig,
+
+  plugins: [
+    [
+      '@docusaurus/plugin-content-docs',
+      {
+        id: 'old_docs',
+        path: 'old_docs',
+        routeBasePath: 'old_docs',
+        sidebarPath: require.resolve('./sidebars.js'),
+        editUrl: 'https://github.com/discordeno/discordeno/tree/main/site/',
+      } satisfies PluginContentDocs,
+    ],
+    [
+      '@docusaurus/plugin-content-docs',
+      {
+        id: 'tutorial',
+        path: 'tutorial',
+        routeBasePath: 'tutorial',
+        sidebarPath: require.resolve('./sidebars.js'),
+        editUrl: 'https://github.com/discordeno/discordeno/tree/main/site/',
+      } satisfies PluginContentDocs,
+    ],
+    [
+      '@docusaurus/plugin-content-docs',
+      {
+        id: 'api_reference',
+        path: 'api_reference',
+        routeBasePath: 'api_reference',
+        sidebarPath: require.resolve('./sidebars.js'),
+        editUrl: 'https://github.com/discordeno/discordeno/tree/main/site/',
+      } satisfies PluginContentDocs,
+    ],
+    [
+      require.resolve('@easyops-cn/docusaurus-search-local'),
+      {
+        indexDocs: true,
+        indexPages: true,
+        docsRouteBasePath: ['/docs', '/tutorial', 'api_reference'],
+        language: ['en'],
+        hashed: true,
+        docsDir: ['docs', 'tutorial', 'api_reference'],
+        blogDir: [],
+        removeDefaultStopWordFilter: true,
+        highlightSearchTermsOnTargetPage: true,
+        searchResultLimits: 8,
+        searchResultContextMaxLength: 50,
+      },
+    ],
+    './webpack-docusaurus-plugin.ts',
+  ],
+}
+
+export default config

website/package.json

@@ -13,43 +13,45 @@
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
     "typecheck": "tsc",
-    "lint": "eslint src --ext ts,tsx",
+    "lint": "eslint . --ext js,ts,tsx",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,md,mdx}\"",
     "setup-dd": ""
   },
   "dependencies": {
-    "@babel/plugin-syntax-flow": "^7.23.3",
     "@docusaurus/core": "3.0.1",
     "@docusaurus/preset-classic": "3.0.1",
-    "@easyops-cn/docusaurus-search-local": "^0.38.1",
+    "@docusaurus/theme-common": "3.0.1",
+    "@easyops-cn/docusaurus-search-local": "^0.40.1",
     "@mdx-js/react": "^3.0.0",
-    "babel-plugin-styled-components": "^2.1.4",
     "chart.js": "^4.4.1",
-    "clsx": "^2.0.0",
-    "prism-react-renderer": "^2.3.0",
+    "clsx": "^2.1.0",
+    "prism-react-renderer": "^2.3.1",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "reactflow": "^11.10.1",
-    "styled-components": "^6.1.1"
+    "styled-components": "^6.1.6"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.0.1",
-    "@tsconfig/docusaurus": "^2.0.2",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
-    "esbuild": "^0.19.8",
+    "@docusaurus/tsconfig": "3.0.1",
+    "@docusaurus/types": "3.0.1",
+    "@types/react": "^18.2.47",
+    "@typescript-eslint/eslint-plugin": "^6.18.0",
+    "@typescript-eslint/parser": "^6.18.0",
+    "esbuild": "^0.19.11",
     "esbuild-loader": "^4.0.2",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard-with-typescript": "^40.0.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-n": "^16.3.1",
+    "eslint-config-standard-with-typescript": "^43.0.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.1",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
-    "prettier": "^3.1.0",
-    "terser-webpack-plugin": "^5.3.9",
-    "typescript": "5.3.2"
+    "prettier": "^3.1.1",
+    "terser-webpack-plugin": "^5.3.10",
+    "typescript": "5.3.3",
+    "webpack": "^5.89.0"
   },
   "browserslist": {
     "production": [
@@ -64,6 +66,6 @@
     ]
   },
   "engines": {
-    "node": ">=16.14"
+    "node": ">=18.0"
   }
 }

website/sidebars.ts

@@ -9,10 +9,9 @@
  Create as many sidebars as you want.
  */
 
-// @ts-check
+import { type SidebarsConfig } from '@docusaurus/plugin-content-docs'
 
-/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
-const sidebars = {
+const sidebars: SidebarsConfig = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
   tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }],
   tutorial: [{ type: 'autogenerated', dirName: '.' }],
@@ -32,4 +31,4 @@ const sidebars = {
    */
 }
 
-module.exports = sidebars
+export default sidebars

website/src/components/Benchmark.tsx

@@ -9,7 +9,7 @@ import {
   Title,
   Tooltip,
 } from 'chart.js'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Chart } from 'react-chartjs-2'
 ChartJS.register(
   CategoryScale,
@@ -19,7 +19,7 @@ ChartJS.register(
   LineElement,
   Title,
   Tooltip,
-  Legend
+  Legend,
 )
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@@ -142,17 +142,17 @@ export default function BenchmarkResultCharts(): JSX.Element {
 
   useEffect(() => {
     if (!data) {
-      ;(async () => {
+      void (async () => {
         setData(
           JSON.parse(
             (
               await (
                 await fetch(
-                  'https://raw.githubusercontent.com/discordeno/discordeno/benchies/benchmarksResult/data.js'
+                  'https://raw.githubusercontent.com/discordeno/discordeno/benchies/benchmarksResult/data.js',
                 )
               ).text()
-            ).slice(24)
-          )
+            ).slice(24),
+          ) as { entries: { Benchmark: [] } },
         )
       })()
     }
@@ -181,7 +181,7 @@ export default function BenchmarkResultCharts(): JSX.Element {
       {data ? (
         Array.from(
           collectBenchesPerTestCase(data.entries.Benchmark),
-          ([key, value]) => ({ benchName: key, benches: value })
+          ([key, value]) => ({ benchName: key, benches: value }),
         ).map((bench, index) => (
           <BenchmarkResultChart
             key={index}

website/src/components/architecture/BaseFlowChart.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import ReactFlow, {
   Background,
   Controls,
-  Edge,
   Handle,
-  Node,
   Position,
   useEdgesState,
   useNodesState,
+  type Edge,
+  type Node,
 } from 'reactflow'
 import 'reactflow/dist/style.css'
 
@@ -51,11 +51,13 @@ export default function BaseFlowChart({
     }
 
     window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
   }, [])
 
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
+  const [nodes] = useNodesState(initialNodes)
+  const [edges] = useEdgesState(initialEdges)
 
   return (
     <>

website/src/components/architecture/FlowChart.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import { Edge, Node } from 'reactflow'
+import { type Edge, type Node } from 'reactflow'
 import 'reactflow/dist/style.css'
 import BaseFlowChart, { defaultNodeOptions, multiplier } from './BaseFlowChart'
 

website/src/components/architecture/FlowChart2.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import { Edge, Node, Position } from 'reactflow'
+import { type Edge, type Node, Position } from 'reactflow'
 import 'reactflow/dist/style.css'
 import BaseFlowChart, {
   defaultGroupOptions,

website/src/components/architecture/FlowChart3.tsx

@@ -1,14 +1,14 @@
-import React, { useEffect, useState } from 'react'
+import type React from 'react'
+import { useEffect, useState } from 'react'
 import ReactFlow, {
   Background,
   Controls,
-  Edge,
   Handle,
-  Node,
-  NodeMouseHandler,
   Position,
   useEdgesState,
   useNodesState,
+  type Edge,
+  type Node,
 } from 'reactflow'
 import 'reactflow/dist/style.css'
 import {
@@ -18,12 +18,13 @@ import {
   widthMultiplier,
 } from './BaseFlowChart'
 
-const handlers: {
-  [index: string]: {
+const handlers: Record<
+  string,
+  {
     transformers: string[]
     event: string
   }
-} = {
+> = {
   handleChannelCreate: {
     transformers: ['transformers.channel'],
     event: 'events.channelCreate',
@@ -350,6 +351,8 @@ const handlers: {
 
 export default function FlowChart({
   handlerFilter = (handler: string) => true,
+}: {
+  handlerFilter: (handler: string) => boolean
 }) {
   function getWindowDimensions() {
     const { innerWidth: width, innerHeight: height } = window
@@ -369,7 +372,9 @@ export default function FlowChart({
     }
 
     window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
   }, [])
 
   const transformers = []
@@ -467,7 +472,6 @@ export default function FlowChart({
     },
   ]
 
-  //@ts-ignore
   for (const [index, handler] of Object.keys(handlers)
     .filter(handlerFilter)
     .entries()) {
@@ -528,7 +532,6 @@ export default function FlowChart({
     }
   }
 
-  //@ts-ignore
   for (const [index, transformer] of transformers.entries()) {
     initialNodes.push({
       id: transformer,
@@ -544,7 +547,6 @@ export default function FlowChart({
     })
   }
 
-  //@ts-ignore
   for (const [index, event] of events.entries()) {
     initialNodes.push({
       id: event,
@@ -647,12 +649,16 @@ export default function FlowChart({
     },
   )
 
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
-  const [handlerIndex, setHandlerIndex] = useState(0)
+  const [nodes] = useNodesState(initialNodes)
+  const [edges, setEdges] = useEdgesState(initialEdges)
+  const [, setHandlerIndex] = useState(0)
   const [userClick, setUserClick] = useState(false)
 
-  const nodeMouseHandler: NodeMouseHandler = (_, node, userTrigger = true) => {
+  const nodeMouseHandler = (
+    _: React.MouseEvent,
+    node: Node,
+    userTrigger = true,
+  ) => {
     if (userTrigger) setUserClick(true)
     if (node.id.split('-')[0] === 'baseNode') {
       edges.forEach(e => {
@@ -817,13 +823,19 @@ export default function FlowChart({
       if (!userClick) {
         nodeMouseHandler(
           undefined,
-          { id: Object.keys(handlers).filter(handlerFilter)[randomIndex] },
+          {
+            id: Object.keys(handlers).filter(handlerFilter)[randomIndex],
+            data: undefined,
+            position: undefined,
+          },
           false,
         )
       }
       setHandlerIndex(randomIndex)
     }, 1000)
-    return () => clearInterval(interval)
+    return () => {
+      clearInterval(interval)
+    }
   }, [userClick])
 
   useEffect(() => {
@@ -831,7 +843,9 @@ export default function FlowChart({
       const timeout = setTimeout(() => {
         setUserClick(false)
       }, 10000)
-      return () => clearTimeout(timeout)
+      return () => {
+        clearTimeout(timeout)
+      }
     }
   }, [userClick])
 
@@ -863,9 +877,15 @@ export default function FlowChart({
           onNodeDoubleClick={nodeMouseHandler}
           onNodeClick={nodeMouseHandler}
           onClick={e => {
-            //@ts-ignore
-            if (e.target.className === 'react-flow__pane')
-              nodeMouseHandler(e, { id: ' - ', data: { label: ' - ' } })
+            const target = e.target as HTMLDivElement
+
+            if (target.className === 'react-flow__pane') {
+              nodeMouseHandler(e, {
+                id: ' - ',
+                data: { label: ' - ' },
+                position: undefined,
+              })
+            }
           }}
           nodeTypes={{
             baseLineNode: () => (

website/src/components/footer/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function Footer() {
   return (
     <svg

website/src/components/header/index.tsx

@@ -1,6 +1,5 @@
 import Link from '@docusaurus/Link'
-import { Header, Highlight, Button, HeaderBody } from '@site/src/styling'
-import React from 'react'
+import { Button, Header, HeaderBody, Highlight } from '@site/src/styling'
 
 export default function DiscordenoHeader(): JSX.Element {
   return (

website/src/components/home/faq/index.tsx

@@ -4,7 +4,7 @@ import {
   FaqQuestion,
   FaqSection,
 } from '@site/src/styling'
-import React from 'react'
+import { useState } from 'react'
 
 const Faq = ({
   question,
@@ -15,7 +15,7 @@ const Faq = ({
   answer: string
   defaultExpanded?: boolean
 }) => {
-  const [visible, setVisible] = React.useState(defaultExpanded ?? false)
+  const [visible, setVisible] = useState(defaultExpanded ?? false)
 
   const toggleVisibility = () => {
     setVisible(!visible)

website/src/components/home/features/feature.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import { FeatureList } from '@site/src/types'
+import { type FeatureList } from '@site/src/types'
 import clsx from 'clsx'
 
 export default function Feature({ data }: FeatureList): JSX.Element {

website/src/components/home/features/index.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
 import styles from '@site/src/styling/styles.module.css'
-import { FeatureItem } from '@site/src/types'
+import { type FeatureItem } from '@site/src/types'
 import Feature from './feature'
 
 const FeatureList: FeatureItem[] = [

website/src/components/home/reviews/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   ReviewsBox,
   ReviewsElement,
@@ -11,7 +10,7 @@ import {
   StarContainer,
   StarIcon,
 } from '@site/src/styling'
-import { DiscordLibraries, IReview } from '@site/src/types'
+import { DiscordLibraries, type IReview } from '@site/src/types'
 
 const reviewList: IReview[] = [
   {
@@ -199,7 +198,7 @@ export default function DiscordenoReviews() {
                       </svg>
                       {String(review.bot.guild_count).replace(
                         /\B(?=(\d{3})+(?!\d))/g,
-                        ','
+                        ',',
                       )}{' '}
                       guilds
                     </div>

website/src/pages/index.tsx

@@ -1,18 +1,17 @@
-import React from 'react'
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import Layout from '@theme/Layout'
-import DiscordenoHeader from '../components/header'
-import { MainPage } from '../styling'
-import DiscordenoFeatures from '../components/home/features'
+import { useEffect, useState } from 'react'
 import Footer from '../components/footer'
-import DiscordenoReviews from '../components/home/reviews'
+import DiscordenoHeader from '../components/header'
 import DiscordenoFAQ from '../components/home/faq'
+import DiscordenoFeatures from '../components/home/features'
+import DiscordenoReviews from '../components/home/reviews'
+import { MainPage } from '../styling'
 
 export default function Home(): JSX.Element {
   // Use loading to give time to JS to load
-  const [loading, setLoading] = React.useState(true)
+  const [loading, setLoading] = useState(true)
 
-  React.useEffect(() => {
+  useEffect(() => {
     setTimeout(() => {
       setLoading(false)
 

website/src/styling/index.ts

@@ -308,7 +308,7 @@ export const StarContainer = styled.div`
   align-items: center;
 `
 
-export const StarIcon = styled.svg`
+export const StarIcon = styled.svg<{ active: boolean }>`
   width: 20px;
   height: 20px;
   fill: ${props => (props.active ? 'currentColor' : '#CBD5E0')};
@@ -429,7 +429,7 @@ export const FaqQuestion = styled.h3`
   }
 `
 
-export const FaqAnswer = styled.div`
+export const FaqAnswer = styled.div<{ visible: boolean }>`
   padding: ${({ visible }) => (visible ? '10px' : '0px')};
   background-color: var(--ifm-footer-background-color);
   color: #fff;

website/src/types.ts

@@ -1,11 +1,11 @@
-export type FeatureList = {
+export interface FeatureList {
   data: {
     feature: FeatureItem
     featureList: FeatureItem[]
   }
 }
 
-export type FeatureItem = {
+export interface FeatureItem {
   title: string
   Svg: JSX.Element
   description: JSX.Element
@@ -35,7 +35,7 @@ export enum DiscordLibraries {
   CUSTOM = 'Custom', // Custom library
 }
 
-export type IReview = {
+export interface IReview {
   review: string // the review
   bot: {
     username: string // Clyde

website/tsconfig.json

@@ -1,7 +1,8 @@
 {
   // This file is not used in compilation. It is here just for a nice editor experience.
-  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
+    "downlevelIteration": true
   }
 }

website/webpack-docusaurus-plugin.ts

@@ -3,16 +3,17 @@
  * https://github.com/facebook/docusaurus/issues/4765#issuecomment-1679863984
  */
 
-const TerserPlugin = require('terser-webpack-plugin')
+import type { LoadContext, Plugin } from '@docusaurus/types'
+import TerserPlugin, { esbuildMinify } from 'terser-webpack-plugin'
 
-module.exports = function (context, options) {
+export default function (context: LoadContext, options: unknown): Plugin {
   return {
     name: 'webpack-docusaurus-plugin',
     configureWebpack(config, isServer, utils) {
       const cacheOptions = { cache: process.env.CI !== 'true' }
 
       const minimizer = new TerserPlugin({
-        minify: TerserPlugin.esbuildMinify,
+        minify: esbuildMinify,
       })
       const minimizers = config.optimization.minimizer?.map(m =>
         m instanceof TerserPlugin ? minimizer : m,