feat: new eslint rules (#5929)

* feat: new eslint rules

* chore: formatted files

.eslintrc.json

···
     },
     {
       "files": ["**/*.ts?(x)"],
-      "plugins": ["@typescript-eslint", "no-relative-import-paths"],
-      "extends": "plugin:@typescript-eslint/recommended",
+      "plugins": ["@typescript-eslint", "no-relative-import-paths", "import"],
+      "extends": [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript"
+      ],
       "parser": "@typescript-eslint/parser",
       "rules": {
         "@typescript-eslint/consistent-type-imports": "error",
         "no-relative-import-paths/no-relative-import-paths": [
           "warn",
           { "allowSameFolder": true, "prefix": "@" }
+        ],
+        "import/order": [
+          "error",
+          {
+            "groups": [
+              "builtin",
+              "external",
+              "internal",
+              ["sibling", "parent"],
+              "index",
+              "unknown"
+            ],
+            "newlines-between": "always",
+            "alphabetize": {
+              "order": "asc",
+              "caseInsensitive": true
+            }
+          }
         ]
       }
     },
···
     {
       "files": ["**/*.{mdx,tsx}"],
       "rules": {
+        "@typescript-eslint/consistent-type-definitions": ["error", "type"],
         "react/function-component-definition": [
           "error",
           {
···
             "selector": "ImportDeclaration[source.value='react'] :matches(ImportNamespaceSpecifier)",
             "message": "Named * React import is not allowed. Please import what you need from React with Named Imports"
           }
-        ],
-        "@typescript-eslint/consistent-type-definitions": ["error", "type"]
+        ]
       }
     }
   ]

app/en/feed/[feed]/route.ts

···
 import { NextResponse } from 'next/server';
+
+import { generateWebsiteFeeds } from '@/next.data.mjs';
 import { blogData } from '@/next.json.mjs';
-import { generateWebsiteFeeds } from '@/next.data.mjs';
 
 // loads all the data from the blog-posts-data.json file
 const websiteFeeds = generateWebsiteFeeds(blogData);

app/sitemap.ts

···
-import { allPaths } from '@/next.dynamic.mjs';
-import { defaultLocale } from '@/next.locales.mjs';
+import type { MetadataRoute } from 'next';
+
 import {
   STATIC_ROUTES_IGNORES,
   DYNAMIC_GENERATED_ROUTES,
···
   BASE_URL,
   EXTERNAL_LINKS_SITEMAP,
 } from '@/next.constants.mjs';
-import type { MetadataRoute } from 'next';
+import { allPaths } from '@/next.dynamic.mjs';
+import { defaultLocale } from '@/next.locales.mjs';
 
 // This is the combination of the Application Base URL and Base PATH
 const baseUrlAndPath = `${BASE_URL}${BASE_PATH}`;

components/Common/ActiveLocalizedLink/index.tsx

···
+import classNames from 'classnames';
+import type Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useState, useEffect, type FC } from 'react';
-import classNames from 'classnames';
+import { useState, useEffect } from 'react';
+import type { ComponentProps, FC } from 'react';
+
 import LocalizedLink from '@/components/LocalizedLink';
-import type Link from 'next/link';
-import type { ComponentProps } from 'react';
 
 type ActiveLocalizedLinkProps = ComponentProps<typeof Link> & {
   activeClassName: string;

components/Common/Badge/index.stories.tsx

···
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
 import Badge from './';
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
 type Story = StoryObj<typeof Badge>;
 type Meta = MetaObj<typeof Badge>;

components/Common/Badge/index.tsx

···
 import ArrowRightIcon from '@heroicons/react/24/solid/ArrowRightIcon';
+import type Link from 'next/link';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
+
 import LocalizedLink from '@/components/LocalizedLink';
-import type { ComponentProps, FC, PropsWithChildren } from 'react';
-import type Link from 'next/link';
 
 import styles from './index.module.css';
 

components/Common/Banner/index.stories.tsx

···
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
 import Banner from './';
 
 type Story = StoryObj<typeof Banner>;

components/Common/Banner/index.tsx

···
-import LocalizedLink from '@/components/LocalizedLink';
 import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
 import type { FC } from 'react';
+
+import LocalizedLink from '@/components/LocalizedLink';
 
 import styles from './index.module.css';
 

components/Common/Blockquote/index.stories.tsx

···
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
 import Blockquote from './';
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
 type Story = StoryObj<typeof Blockquote>;
 type Meta = MetaObj<typeof Blockquote>;

components/Common/Button/index.stories.tsx

···
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
 import Button from './';
 
 type Story = StoryObj<typeof Button>;

components/Common/CrossLink/index.stories.tsx

···
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
 import CrossLink from './index';
 
 type Story = StoryObj<typeof CrossLink>;

components/Common/CrossLink/index.tsx

···
-import styles from './index.module.css';
 import classNames from 'classnames';
-import LocalizedLink from '@/components/LocalizedLink';
-import PrevNextArrow from '@/components/Common/PrevNextArrow';
+import type { FC } from 'react';
 import { FormattedMessage } from 'react-intl';
-import type { FC } from 'react';
+
+import PrevNextArrow from '@/components/Common/PrevNextArrow';
+import LocalizedLink from '@/components/LocalizedLink';
+
+import styles from './index.module.css';
 
 type CrossLinkProps = {
   type: 'previous' | 'next';

components/Downloads/DownloadList.tsx

···
+import type { FC } from 'react';
 import { FormattedMessage } from 'react-intl';
+
 import LocalizedLink from '@/components/LocalizedLink';
 import { useNavigation } from '@/hooks/useNavigation';
 import type { NodeRelease } from '@/types';
-import type { FC } from 'react';
 
 const DownloadList: FC<NodeRelease> = ({ versionWithPrefix }) => {
   const { getSideNavigation } = useNavigation();

components/Downloads/DownloadReleasesTable.tsx

···
+import type { FC } from 'react';
 import { FormattedMessage } from 'react-intl';
+
+import { useNodeReleases } from '@/hooks/useNodeReleases';
+import { getNodeApiLink } from '@/util/getNodeApiLink';
 import { getNodejsChangelog } from '@/util/getNodeJsChangelog';
-import { getNodeApiLink } from '@/util/getNodeApiLink';
-import { useNodeReleases } from '@/hooks/useNodeReleases';
-import type { FC } from 'react';
 
 const DownloadReleasesTable: FC = () => {
   const { releases } = useNodeReleases();

components/Downloads/PrimaryDownloadMatrix.tsx

···
 import classNames from 'classnames';
+import type { FC } from 'react';
 import semVer from 'semver';
+
 import LocalizedLink from '@/components/LocalizedLink';
 import { useDetectOS } from '@/hooks/useDetectOS';
 import { useLayoutContext } from '@/hooks/useLayoutContext';
 import { DIST_URL } from '@/next.constants.mjs';
 import type { LegacyDownloadsFrontMatter, NodeRelease } from '@/types';
-import type { FC } from 'react';
 
 // @TODO: Instead of using a static list it should be created dynamically. This is done on `nodejs.dev`
 // since this is a temporary solution and going to be fixed in the future.

components/Downloads/SecondaryDownloadMatrix.tsx

···
-import DownloadList from './DownloadList';
+import type { FC } from 'react';
+
 import { useLayoutContext } from '@/hooks/useLayoutContext';
-import { WithNodeRelease } from '@/providers/withNodeRelease';
 import { DIST_URL } from '@/next.constants.mjs';
+import { WithNodeRelease } from '@/providers/withNodeRelease';
 import type { LegacyDownloadsFrontMatter, NodeRelease } from '@/types';
-import type { FC } from 'react';
+
+import DownloadList from './DownloadList';
 
 // @TODO: Instead of using a static list it should be created dynamically. This is done on `nodejs.dev`
 // since this is a temporary solution and going to be fixed in the future.

components/Footer.tsx

···
-import { FormattedMessage } from 'react-intl';
 import type { FC } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 type FooterProps = { className?: string };
 

components/Header.tsx

···
-import { useIntl } from 'react-intl';
+import classNames from 'classnames';
 import Image from 'next/image';
-import classNames from 'classnames';
-import LocalizedLink from './LocalizedLink';
-import { useNavigation } from '@/hooks/useNavigation';
+import { useIntl } from 'react-intl';
+
 import { useLocale } from '@/hooks/useLocale';
+import { useNavigation } from '@/hooks/useNavigation';
 import { useRouter } from '@/hooks/useRouter';
+
+import LocalizedLink from './LocalizedLink';
 
 const Header = () => {
   const { availableLocales, isCurrentLocaleRoute } = useLocale();

components/Home/HomeDownloadButton.tsx

···
+import type { FC } from 'react';
+
 import LocalizedLink from '@/components/LocalizedLink';
 import { useDetectOS } from '@/hooks/useDetectOS';
 import { useLayoutContext } from '@/hooks/useLayoutContext';
+import { DIST_URL } from '@/next.constants.mjs';
+import type { NodeRelease } from '@/types';
 import { downloadUrlByOS } from '@/util/downloadUrlByOS';
 import { getNodejsChangelog } from '@/util/getNodeJsChangelog';
-import { DIST_URL } from '@/next.constants.mjs';
-import type { FC } from 'react';
-import type { NodeRelease } from '@/types';
 
 const HomeDownloadButton: FC<NodeRelease> = ({
   major,

components/HtmlHead.tsx

···
 import Head from 'next/head';
+import type { FC } from 'react';
+
+import { useLocale } from '@/hooks/useLocale';
+import { useRouter } from '@/hooks/useRouter';
 import { useSiteConfig } from '@/hooks/useSiteConfig';
-import { useRouter } from '@/hooks/useRouter';
-import { useLocale } from '@/hooks/useLocale';
 import { BASE_URL, BASE_PATH } from '@/next.constants.mjs';
 import type { LegacyFrontMatter } from '@/types';
-import type { FC } from 'react';
 
 // This is the combination of the Application Base URL and Base PATH
 const baseUrlAndPath = `${BASE_URL}${BASE_PATH}`;

components/LocalizedLink.tsx

···
+import Link from 'next/link';
 import { useMemo } from 'react';
-import Link from 'next/link';
+import type { FC, ComponentProps, HTMLAttributes } from 'react';
+
 import { useLocale } from '@/hooks/useLocale';
 import { linkWithLocale } from '@/util/linkWithLocale';
-import type { FC, ComponentProps, HTMLAttributes } from 'react';
 
 // This is a wrapper on HTML's `a` tag
 const HtmlLink: FC<HTMLAttributes<HTMLAnchorElement>> = ({

components/Pagination.tsx

···
+import type { FC } from 'react';
 import { FormattedMessage } from 'react-intl';
+
 import LocalizedLink from './LocalizedLink';
-import type { FC } from 'react';
 
 type PaginationProps = { prevSlug?: number; nextSlug?: number };
 

components/SideNavigation.tsx

···
 import classNames from 'classnames';
-import LocalizedLink from './LocalizedLink';
+import type { FC } from 'react';
+
 import { useLocale } from '@/hooks/useLocale';
 import { useNavigation } from '@/hooks/useNavigation';
 import type { NavigationKeys } from '@/types';
-import type { FC } from 'react';
+
+import LocalizedLink from './LocalizedLink';
 
 type SideNavigationProps = {
   navigationKey: NavigationKeys;

components/__design__/hex-logos.stories.tsx

···
-import Image from 'next/image';
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import Image from 'next/image';
 
 export const HexLogos: StoryObj = {};
 

components/__design__/horizontal-logos.stories.tsx

···
-import Image from 'next/image';
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import Image from 'next/image';
 
 export const HorizontalLogos: StoryObj = {};
 

components/__design__/js-logos.stories.tsx

···
-import Image from 'next/image';
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import Image from 'next/image';
 
 export const JSLogos: StoryObj = {};
 

components/__design__/platform-logos.stories.tsx

···
-import Image from 'next/image';
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import Image from 'next/image';
 
 export const PlatformLogos: StoryObj = {};
 

components/__design__/social-logos.stories.tsx

···
-import Image from 'next/image';
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import Image from 'next/image';
 
 export const SocialLogos: StoryObj = {};
 

components/__design__/stacked-logos.stories.tsx

···
-import Image from 'next/image';
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import Image from 'next/image';
 
 export const StackedLogos: StoryObj = {};
 

hooks/useBlogData.ts

···
 import { useCallback, useContext, useMemo } from 'react';
-import { useRouter } from './useRouter';
+
 import { BlogDataContext } from '@/providers/blogDataProvider';
+
+import { useRouter } from './useRouter';
 
 export const useBlogData = () => {
   const { asPath } = useRouter();

hooks/useDetectOS.ts

···
 import { useEffect, useState } from 'react';
+
+import type { UserOS } from '@/types/userOS';
 import { detectOS } from '@/util/detectOS';
 import { getBitness } from '@/util/getBitness';
-import type { UserOS } from '@/types/userOS';
 
 type UserOSState = {
   os: UserOS;

hooks/useLayoutContext.ts

···
 import { useContext } from 'react';
+
 import { LayoutContext } from '@/providers/layoutProvider';
 
 export const useLayoutContext = () => useContext(LayoutContext);

hooks/useLocale.ts

···
 import { useContext } from 'react';
-import { useRouter } from './useRouter';
+
 import { LocaleContext } from '@/providers/localeProvider';
 import { linkWithLocale } from '@/util/linkWithLocale';
+
+import { useRouter } from './useRouter';
 
 export const useLocale = () => {
   const { asPath } = useRouter();

hooks/useNavigation.tsx

···
 import { FormattedMessage } from 'react-intl';
+
 import { siteNavigation } from '@/next.json.mjs';
 import type { NavigationEntry, NavigationKeys } from '@/types';
 

hooks/useNodeReleases.ts

···
 import { useCallback, useContext } from 'react';
+
 import { NodeReleasesContext } from '@/providers/nodeReleasesProvider';
 import type { NodeReleaseStatus } from '@/types';
 

hooks/useRouter.ts

···
-import { useMemo } from 'react';
 import { useRouter as useNextRouter } from 'next/router';
+import type { NextRouter } from 'next/router';
+import { useMemo } from 'react';
+
 import {
   availableLocales,
   getCurrentLocale,
   defaultLocale,
 } from '@/next.locales.mjs';
-import type { NextRouter } from 'next/router';
 
 // Maps all available locales by only their Language Code
 const mappedLocalesByCode = availableLocales.map(l => l.code);

hooks/useSiteConfig.ts

···
 import { useContext } from 'react';
+
 import { SiteContext } from '@/providers/siteProvider';
 
 export const useSiteConfig = () => {

layouts/AboutLayout.tsx

···
-import BaseLayout from './BaseLayout';
-import SideNavigation from '@/components/SideNavigation';
 import type { FC, PropsWithChildren } from 'react';
+
+import SideNavigation from '@/components/SideNavigation';
+
+import BaseLayout from './BaseLayout';
 
 const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
   <BaseLayout>

layouts/BaseLayout.tsx

···
+import type { FC, PropsWithChildren } from 'react';
+
 import Footer from '@/components/Footer';
 import Header from '@/components/Header';
-import type { FC, PropsWithChildren } from 'react';
 
 const BaseLayout: FC<PropsWithChildren> = ({ children }) => (
   <>

layouts/BlogIndexLayout.tsx

···
 import { useMemo } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { FormattedMessage } from 'react-intl';
-import BaseLayout from './BaseLayout';
+
 import { Time } from '@/components/Common/Time';
-import Pagination from '@/components/Pagination';
 import LocalizedLink from '@/components/LocalizedLink';
+import Pagination from '@/components/Pagination';
 import { useBlogData } from '@/hooks/useBlogData';
-import type { FC, PropsWithChildren } from 'react';
 import type { BlogPost } from '@/types';
+
+import BaseLayout from './BaseLayout';
 
 const BlogIndexLayout: FC<PropsWithChildren> = ({ children }) => {
   const { getPagination, getPostsByYear, currentCategory } = useBlogData();

layouts/BlogPostLayout.tsx

···
+import type { FC, PropsWithChildren } from 'react';
 import { FormattedMessage } from 'react-intl';
-import BaseLayout from './BaseLayout';
+
 import { Time } from '@/components/Common/Time';
 import { useLayoutContext } from '@/hooks/useLayoutContext';
-import type { FC, PropsWithChildren } from 'react';
 import type { LegacyBlogFrontMatter } from '@/types';
+
+import BaseLayout from './BaseLayout';
 
 const BlogPostLayout: FC<PropsWithChildren> = ({ children }) => {
   const { frontMatter } = useLayoutContext();

layouts/CategoryIndexLayout.tsx

···
 import { useMemo } from 'react';
-import BaseLayout from './BaseLayout';
+import type { FC, PropsWithChildren } from 'react';
+
 import { Time } from '@/components/Common/Time';
 import LocalizedLink from '@/components/LocalizedLink';
-import { useLayoutContext } from '@/hooks/useLayoutContext';
 import { useBlogData } from '@/hooks/useBlogData';
-import type { FC, PropsWithChildren } from 'react';
+import { useLayoutContext } from '@/hooks/useLayoutContext';
 import type { BlogPost } from '@/types';
+
+import BaseLayout from './BaseLayout';
 
 const CategoryIndexLayout: FC<PropsWithChildren> = ({ children }) => {
   const { frontMatter } = useLayoutContext();

layouts/ContributeLayout.tsx

···
-import BaseLayout from './BaseLayout';
-import SideNavigation from '@/components/SideNavigation';
 import type { FC, PropsWithChildren } from 'react';
+
+import SideNavigation from '@/components/SideNavigation';
+
+import BaseLayout from './BaseLayout';
 
 const ContributeLayout: FC<PropsWithChildren> = ({ children }) => (
   <BaseLayout>

layouts/DefaultLayout.tsx

···
+import type { FC, PropsWithChildren } from 'react';
+
 import BaseLayout from './BaseLayout';
-import type { FC, PropsWithChildren } from 'react';
 
 const DefaultLayout: FC<PropsWithChildren> = ({ children }) => (
   <BaseLayout>

layouts/DocsLayout.tsx

···
 import { useMemo } from 'react';
-import BaseLayout from './BaseLayout';
+import type { FC, PropsWithChildren } from 'react';
+
 import SideNavigation from '@/components/SideNavigation';
 import { useNodeReleases } from '@/hooks/useNodeReleases';
-import type { FC, PropsWithChildren } from 'react';
+
+import BaseLayout from './BaseLayout';
 
 const DocsLayout: FC<PropsWithChildren> = ({ children }) => {
   const { getReleaseByStatus } = useNodeReleases();

layouts/DownloadCurrentLayout.tsx

···
-import BaseLayout from './BaseLayout';
+import type { FC, PropsWithChildren } from 'react';
+
 import PrimaryDownloadMatrix from '@/components/Downloads/PrimaryDownloadMatrix';
 import SecondaryDownloadMatrix from '@/components/Downloads/SecondaryDownloadMatrix';
 import { useLayoutContext } from '@/hooks/useLayoutContext';
 import { WithNodeRelease } from '@/providers/withNodeRelease';
-import type { FC, PropsWithChildren } from 'react';
 import type { LegacyDownloadsFrontMatter } from '@/types';
+
+import BaseLayout from './BaseLayout';
 
 const DownloadCurrentLayout: FC<PropsWithChildren> = ({ children }) => {
   const { frontMatter } = useLayoutContext();

layouts/DownloadLayout.tsx

···
-import BaseLayout from './BaseLayout';
+import type { FC, PropsWithChildren } from 'react';
+
 import PrimaryDownloadMatrix from '@/components/Downloads/PrimaryDownloadMatrix';
 import SecondaryDownloadMatrix from '@/components/Downloads/SecondaryDownloadMatrix';
 import { useLayoutContext } from '@/hooks/useLayoutContext';
 import { WithNodeRelease } from '@/providers/withNodeRelease';
-import type { FC, PropsWithChildren } from 'react';
 import type { LegacyDownloadsFrontMatter } from '@/types';
+
+import BaseLayout from './BaseLayout';
 
 const DownloadLayout: FC<PropsWithChildren> = ({ children }) => {
   const { frontMatter } = useLayoutContext();

layouts/DownloadReleasesLayout.tsx

···
 import { useMemo } from 'react';
-import BaseLayout from './BaseLayout';
-import { useLayoutContext } from '@/hooks/useLayoutContext';
-import DownloadReleasesTable from '@/components/Downloads/DownloadReleasesTable';
 import type { FC, PropsWithChildren } from 'react';
+
+import DownloadReleasesTable from '@/components/Downloads/DownloadReleasesTable';
+import { useLayoutContext } from '@/hooks/useLayoutContext';
 import type { LegacyDownloadsReleasesFrontMatter } from '@/types';
+
+import BaseLayout from './BaseLayout';
 
 const DownloadReleasesLayout: FC<PropsWithChildren> = ({ children }) => {
   const { frontMatter } = useLayoutContext();

layouts/IndexLayout.tsx

···
-import BaseLayout from './BaseLayout';
+import type { FC, PropsWithChildren } from 'react';
+
 import Banner from '@/components/Home/Banner';
 import HomeDownloadButton from '@/components/Home/HomeDownloadButton';
 import { useDetectOS } from '@/hooks/useDetectOS';
 import { useLayoutContext } from '@/hooks/useLayoutContext';
 import { WithNodeRelease } from '@/providers/withNodeRelease';
-import type { FC, PropsWithChildren } from 'react';
 import type { UserOS } from '@/types/userOS';
+
+import BaseLayout from './BaseLayout';
 
 const getDownloadHeadTextOS = (os: UserOS, bitness: number) => {
   switch (os) {

middleware.ts

···
 import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
 import { availableLocales } from './next.locales.mjs';
-import type { NextRequest } from 'next/server';
 
 // This Middleware is responsible for handling automatic language detection from a user's Browser
 // This middleware should only run on "/" requests coming to the Website

pages/404.tsx

···
+import type { GetStaticProps } from 'next';
 import { FormattedMessage } from 'react-intl';
+
 import Theme from '@/theme';
-import type { GetStaticProps } from 'next';
 
 const NotFound = () => (
   <Theme>

pages/[...path].tsx

···
 import { sep } from 'node:path';
-import Theme from '@/theme';
-import {
-  getMarkdownFile,
-  generateStaticProps,
-  allPaths,
-} from '@/next.dynamic.mjs';
+
+import type { GetStaticPaths, GetStaticProps } from 'next';
+
 import {
   ENABLE_STATIC_EXPORT,
   STATIC_ROUTES_IGNORES,
···
   DYNAMIC_ROUTES_REWRITES,
   DYNAMIC_GENERATED_ROUTES,
 } from '@/next.constants.mjs';
-import type { GetStaticPaths, GetStaticProps } from 'next';
+import {
+  getMarkdownFile,
+  generateStaticProps,
+  allPaths,
+} from '@/next.dynamic.mjs';
+import Theme from '@/theme';
 import type { DynamicStaticProps } from '@/types';
 
 type DynamicStaticPaths = { path: string[] };

pages/_app.tsx

···
+import { Analytics } from '@vercel/analytics/react';
+import type { AppProps } from 'next/app';
 import { Source_Sans_3 } from 'next/font/google';
-import { Analytics } from '@vercel/analytics/react';
-import { SiteProvider } from '@/providers/siteProvider';
+
+import { VERCEL_ENV } from '@/next.constants.mjs';
+import { BlogDataProvider } from '@/providers/blogDataProvider';
 import { LocaleProvider } from '@/providers/localeProvider';
-import { BlogDataProvider } from '@/providers/blogDataProvider';
 import { NodeReleasesProvider } from '@/providers/nodeReleasesProvider';
-import { VERCEL_ENV } from '@/next.constants.mjs';
-import type { AppProps } from 'next/app';
+import { SiteProvider } from '@/providers/siteProvider';
 
 import '@/styles/old/index.css';
 

pages/_document.tsx

···
+import { Html, Head, Main, NextScript } from 'next/document';
 import Script from 'next/script';
-import { Html, Head, Main, NextScript } from 'next/document';
+
 import { LEGACY_JAVASCRIPT_FILE } from '@/next.constants.mjs';
 
 const Document = () => (

providers/blogDataProvider.tsx

···
 import { createContext } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+
 import blogData from '@/public/blog-posts-data.json';
-import type { FC, PropsWithChildren } from 'react';
 import type { BlogData } from '@/types';
 
 export const BlogDataContext = createContext<BlogData>({

providers/layoutProvider.tsx

···
 import { createContext, useMemo } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+
 import AboutLayout from '@/layouts/AboutLayout';
 import BlogIndexLayout from '@/layouts/BlogIndexLayout';
 import BlogPostLayout from '@/layouts/BlogPostLayout';
···
 import ContributeLayout from '@/layouts/ContributeLayout';
 import DefaultLayout from '@/layouts/DefaultLayout';
 import DocsLayout from '@/layouts/DocsLayout';
-import DownloadLayout from '@/layouts/DownloadLayout';
 import DownloadCurrentLayout from '@/layouts/DownloadCurrentLayout';
+import DownloadLayout from '@/layouts/DownloadLayout';
 import DownloadReleasesLayout from '@/layouts/DownloadReleasesLayout';
 import IndexLayout from '@/layouts/IndexLayout';
-import type { FC, PropsWithChildren } from 'react';
 import type { LegacyFrontMatter, LegacyLayouts } from '@/types';
 
 type LayoutContextProps = {

providers/localeProvider.tsx

···
 import { createContext, useMemo } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { IntlProvider } from 'react-intl';
+
 import { useRouter } from '@/hooks/useRouter';
 import {
   defaultLocale,
···
   getCurrentLocale,
   getCurrentTranslations,
 } from '@/next.locales.mjs';
-import type { FC, PropsWithChildren } from 'react';
 import type { LocaleContext as LocaleContextType } from '@/types';
 
 // Initialises the Context with the default Localisation Data

providers/mdxProvider.tsx

···
-import { useEffect } from 'react';
 import { MDXProvider as BaseMDXProvider } from '@mdx-js/react';
+import type { MDXComponents } from 'mdx/types';
 import { MDXRemote } from 'next-mdx-remote';
+import { useEffect } from 'react';
+import type { FC } from 'react';
+
 import NodeApiVersionLinks from '@/components/Docs/NodeApiVersionLinks';
-import type { FC } from 'react';
-import type { MDXComponents } from 'mdx/types';
 
 const mdxComponents: MDXComponents = {
   NodeApiVersionLinks: NodeApiVersionLinks,

providers/nodeReleasesProvider.tsx

···
 import { createContext, useMemo } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+
 import nodeReleasesData from '@/public/node-releases-data.json';
+import type { NodeReleaseSource, NodeRelease } from '@/types';
 import { getNodeReleaseStatus } from '@/util/nodeRelease';
-import type { FC, PropsWithChildren } from 'react';
-import type { NodeReleaseSource, NodeRelease } from '@/types';
 
 export const NodeReleasesContext = createContext<NodeRelease[]>([]);
 

providers/siteProvider.tsx

···
 import { createContext } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+
 import { siteConfig } from '@/next.json.mjs';
-import type { FC, PropsWithChildren } from 'react';
 import type { SiteConfig } from '@/types';
 
 export const SiteContext = createContext<SiteConfig>(siteConfig);

providers/withNodeRelease.tsx

···
 import { useMemo } from 'react';
+import type { FC } from 'react';
+
 import { useNodeReleases } from '@/hooks/useNodeReleases';
+import type { NodeRelease, NodeReleaseStatus } from '@/types';
 import { isNodeRelease } from '@/util/nodeRelease';
-import type { FC } from 'react';
-import type { NodeRelease, NodeReleaseStatus } from '@/types';
 
 type WithNodeReleaseProps = {
   status: NodeReleaseStatus;

theme.tsx

···
 import { memo } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+
+import HtmlHead from './components/HtmlHead';
 import { LayoutProvider } from './providers/layoutProvider';
 import { MDXProvider } from './providers/mdxProvider';
-import HtmlHead from './components/HtmlHead';
-import type { FC, PropsWithChildren } from 'react';
 import type { DynamicStaticProps } from './types';
 
 type ThemeProps = PropsWithChildren<DynamicStaticProps>;

types/dynamic.ts

···
 import type { Heading } from '@vcarl/remark-headings';
+
 import type { LegacyFrontMatter } from './frontmatter';
 
 export interface DynamicStaticProps {

util/getNodeApiLink.ts

···
 import semVer from 'semver';
+
 import { DOCS_URL, DIST_URL } from '@/next.constants.mjs';
 
 export const getNodeApiLink = (version: string) => {