ci(docs): add linter check (#10376)

### Description

Turning on the linter for the docs site now that we've done the bulk of
our high velocity work.

### Testing Instructions

CI. You can also browse the preview for anything that may look amiss.

Author: anthonyshew

docs/site/.eslintrc.js

@@ -1,12 +1,15 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
   root: true,
-  extends: ["@turbo/eslint-config/library", "next"],
+  extends: ["@turbo/eslint-config/library", "plugin:@next/next/recommended"],
   ignorePatterns: [
     "turbo",
     ".map.ts",
     "!app/.well-known/vercel/flags/route.ts",
     ".source",
+    "components/ui/**",
+    // TODO: Need to fix the JSON inference in this file
+    "components/examples-table.tsx",
   ],
   overrides: [
     {
@@ -16,7 +19,15 @@ module.exports = {
       },
     },
     {
-      files: ["next.config.mjs", "global-error.jsx"],
+      files: [
+        "next.config.mjs",
+        "global-error.tsx",
+        "page.tsx",
+        "not-found.tsx",
+        "source.config.ts",
+        "next.config.ts",
+        "layout.tsx",
+      ],
       rules: {
         "import/no-default-export": "off",
       },

docs/site/app/(no-sidebar)/[...slug]/layout.tsx

@@ -2,7 +2,7 @@ import { notFound } from "next/navigation";
 import { extraPages } from "@/app/source";
 
 export default async function SlugLayout(props: {
-  params: Promise<{ slug?: string[] }>;
+  params: Promise<{ slug?: Array<string> }>;
   children: React.ReactNode;
 }): Promise<JSX.Element> {
   const params = await props.params;

docs/site/app/(no-sidebar)/[...slug]/page.tsx

@@ -5,7 +5,7 @@ import { createMetadata } from "@/lib/create-metadata";
 import { mdxComponents } from "@/mdx-components";
 
 export default async function Page(props: {
-  params: Promise<{ slug?: string[] }>;
+  params: Promise<{ slug?: Array<string> }>;
 }): Promise<JSX.Element> {
   const params = await props.params;
   const page = extraPages.getPage(params.slug);
@@ -14,6 +14,7 @@ export default async function Page(props: {
     notFound();
   }
 
+  /* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- MDX component */
   const Mdx = page.data.body;
 
   return (
@@ -24,14 +25,14 @@ export default async function Page(props: {
   );
 }
 
-export function generateStaticParams(): { slug: string[] }[] {
+export function generateStaticParams(): Array<{ slug: Array<string> }> {
   return extraPages.getPages().map((page) => ({
     slug: page.slugs,
   }));
 }
 
 export async function generateMetadata(props: {
-  params: Promise<{ slug?: string[] }>;
+  params: Promise<{ slug?: Array<string> }>;
 }): Promise<Metadata> {
   const params = await props.params;
   const page = extraPages.getPage(params.slug);

docs/site/app/(no-sidebar)/blog/[...slug]/page.tsx

@@ -7,14 +7,14 @@ import { createMetadata } from "@/lib/create-metadata";
 import { FaviconHandler } from "@/app/_components/favicon-handler";
 import { mdxComponents } from "@/mdx-components";
 
-export function generateStaticParams(): { slug: string[] }[] {
+export function generateStaticParams(): Array<{ slug: Array<string> }> {
   return blog.getPages().map((page) => ({
     slug: page.slugs,
   }));
 }
 
 export async function generateMetadata(props: {
-  params: Promise<{ slug?: string[] }>;
+  params: Promise<{ slug?: Array<string> }>;
 }): Promise<Metadata> {
   const params = await props.params;
   const page = blog.getPage(params.slug);
@@ -38,13 +38,14 @@ export async function generateMetadata(props: {
 }
 
 export default async function Page(props: {
-  params: Promise<{ slug?: string[] }>;
+  params: Promise<{ slug?: Array<string> }>;
 }): Promise<JSX.Element> {
   const params = await props.params;
   const page = blog.getPage(params.slug);
 
   if (!page) notFound();
 
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- Not being inferred correctly
   const Mdx = page.data.body;
 
   return (

docs/site/app/(no-sidebar)/layout.tsx

@@ -11,7 +11,7 @@ export default function Layout({
   return (
     <>
       <FaviconHandler />
-      {/* @ts-expect-error */}
+      {/* @ts-expect-error - className isn't on type but it works. */}
       <HomeLayout className="p-0" {...baseOptions}>
         {children}
       </HomeLayout>

docs/site/app/(no-sidebar)/page.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import React, { useState } from "react";
-import { cn } from "@/components/cn";
 import Link from "next/link";
 import { motion } from "framer-motion";
+import { cn } from "@/components/cn";
 import { Clients } from "@/app/_clients/clients";
 import { FadeIn } from "@/app/_components/home-shared/fade-in";
 import { PackLogo } from "@/app/_components/logos/pack-logo";

docs/site/app/(openapi)/docs/openapi/[[...slug]]/page.tsx

@@ -7,11 +7,10 @@ import {
 import { notFound } from "next/navigation";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 import { openapi, openapiPages } from "../source";
-// eslint-disable-next-line rulesdir/global-css
 import "./openapi.css";
 
 export default async function Page(props: {
-  params: Promise<{ slug?: string[] }>;
+  params: Promise<{ slug?: Array<string> }>;
 }): Promise<JSX.Element> {
   const params = await props.params;
   const page = openapiPages.getPage(params.slug);
@@ -20,6 +19,7 @@ export default async function Page(props: {
     notFound();
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- Not typed properly?
   const Mdx = page.data.body;
 
   return (
@@ -30,6 +30,7 @@ export default async function Page(props: {
         <Mdx
           components={{
             ...defaultMdxComponents,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- Not typed properly?
             APIPage: openapi.APIPage,
           }}
         />
@@ -38,6 +39,6 @@ export default async function Page(props: {
   );
 }
 
-export function generateStaticParams(): { slug: string[] }[] {
+export function generateStaticParams(): Array<{ slug: Array<string> }> {
   return openapiPages.generateParams();
 }

docs/site/app/(openapi)/docs/openapi/layout.tsx

@@ -4,11 +4,7 @@ import { Navigation } from "@/components/nav";
 import { Sidebar } from "#/components/docs-layout/sidebar";
 import { openapiPages } from "./source";
 
-export default async function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Navigation />

docs/site/app/(openapi)/docs/openapi/source.ts

@@ -1,14 +1,11 @@
 import { createMDXSource } from "fumadocs-mdx";
-import { createOpenAPI, attachFile } from "fumadocs-openapi/server";
+import { createOpenAPI } from "fumadocs-openapi/server";
 import { loader } from "fumadocs-core/source";
 import { openapiDocs, openapiMeta } from "@/.source";
 
 export const openapiPages = loader({
   baseUrl: "/docs/openapi",
   source: createMDXSource(openapiDocs, openapiMeta),
-  pageTree: {
-    attachFile,
-  },
 });
 
 export const openapi = createOpenAPI();

docs/site/app/(sidebar)/docs/[[...slug]]/layout.tsx

@@ -3,7 +3,7 @@ import { notFound } from "next/navigation";
 import { repoDocsPages } from "@/app/source";
 
 export default async function SlugLayout(props: {
-  params: Promise<{ slug?: string[] }>;
+  params: Promise<{ slug?: Array<string> }>;
   children: React.ReactNode;
 }): Promise<JSX.Element> {
   const params = await props.params;

docs/site/app/(sidebar)/docs/[[...slug]]/page.tsx

@@ -1,14 +1,14 @@
+import { readFileSync } from "node:fs";
 import { notFound } from "next/navigation";
-import { readFileSync } from "fs";
 import type { Metadata } from "next/types";
 import { repoDocsPages } from "@/app/source";
 import { createMetadata } from "@/lib/create-metadata";
 import { mdxComponents } from "@/mdx-components";
-import { SystemEnvironmentVariablesHashHighlighter } from "./system-environment-variables-hash-highlighter";
 import { CopyToMarkdown } from "@/components/copy-to-markdown";
+import { SystemEnvironmentVariablesHashHighlighter } from "./system-environment-variables-hash-highlighter";
 
 export async function generateMetadata(props: {
-  params: Promise<{ slug?: string[] }>;
+  params: Promise<{ slug?: Array<string> }>;
 }): Promise<Metadata> {
   const params = await props.params;
   const page = repoDocsPages.getPage(params.slug);
@@ -22,14 +22,14 @@ export async function generateMetadata(props: {
   });
 }
 
-export function generateStaticParams(): { slug: string[] }[] {
+export function generateStaticParams(): Array<{ slug: Array<string> }> {
   return repoDocsPages.getPages().map((page) => ({
     slug: page.slugs,
   }));
 }
 
 export default async function Page(props: {
-  params: Promise<{ slug?: string[] }>;
+  params: Promise<{ slug?: Array<string> }>;
 }): Promise<JSX.Element> {
   const params = await props.params;
   const page = repoDocsPages.getPage(params.slug);
@@ -41,10 +41,14 @@ export default async function Page(props: {
   const rawMarkdown = readFileSync(page.data._file.absolutePath)
     .toString()
     // Removes frontmatter
-    .replace(/^---\n(.*?\n)---\n/s, "")
+    .replace(/^---\n(?<content>.*?\n)---\n/s, "")
     // Removes import statements for components
-    .replace(/^import\s+{[^}]+}\s+from\s+['"]#\/[^'"]+['"];(\r?\n|$)/gm, "");
+    .replace(
+      /^import\s+{[^}]+}\s+from\s+['"]#\/[^'"]+['"];(?<lineEnding>\r?\n|$)/gm,
+      ""
+    );
 
+  /* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- MDX component is dynamically imported */
   const Mdx = page.data.body;
 
   return (

docs/site/app/(sidebar)/layout.tsx

@@ -1,15 +1,11 @@
 import { DocsLayout } from "@/components/docs-layout";
 import { repoDocsPages } from "@/app/source";
-import { baseOptions } from "../layout-config";
 import { Navigation } from "@/components/nav";
-import { RedirectsHandler } from "./redirects-handler";
 import { Sidebar } from "#/components/docs-layout/sidebar";
+import { baseOptions } from "../layout-config";
+import { RedirectsHandler } from "./redirects-handler";
 
-export default async function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Navigation />

docs/site/app/(sidebar)/redirects-handler.tsx

@@ -193,18 +193,19 @@ const handleRedirect = (
     clientRedirectsMap[pathname as keyof typeof clientRedirectsMap];
 
   const newHash: string | undefined =
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- These are correct.
     redirectList?.[window.location.hash]?.hash;
 
   const newLocation: string | undefined =
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- These are correct.
     redirectList?.[window.location.hash]?.location;
 
   if (newHash && newLocation) {
     /* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- TODO: Fix ESLint Error (#13355)
      * biome-ignore lint/correctness/noVoidTypeReturn: Ignored using `--suppress`
      * */
-    return router.push(`${newLocation ?? ""}${newHash ? `#${newHash}` : ""}`);
+    router.push(`${newLocation ?? ""}${newHash ? `#${newHash}` : ""}`);
+    return;
   }
 
   if (newHash) {
@@ -223,7 +224,6 @@ export function RedirectsHandler(): null {
 
   useEffect(() => {
     handleRedirect(router, pathname);
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want this hook to run on initial entry to the site.
   }, []);
 
   return null;

docs/site/app/_clients/client-logo.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { cn } from "@/components/cn";
 import Image from "next/image";
+import { cn } from "@/components/cn";
 import type { TurboUser } from "./users";
 
 const DEFAULT_SIZE = {
@@ -23,28 +23,30 @@ export function Logo({
     ...DEFAULT_SIZE,
     ...user.style,
   };
-  let numericWidth: number;
-  let numericHeight: number;
+
+  // Initialize with default values
+  let numericWidth = DEFAULT_SIZE.width;
+  let numericHeight = DEFAULT_SIZE.height;
+
   if (typeof styles.width === "number") {
     numericWidth = styles.width;
   }
   if (typeof styles.height === "number") {
     numericHeight = styles.height;
   }
+
   const logo = (
     <Image
       alt={`${user.caption}'s Logo`}
       className={cn("mx-8", className)}
-      // biome-ignore lint/style/noNonNullAssertion: Ignored using `--suppress`
-      height={numericHeight!}
+      height={numericHeight}
       priority
       src={user.image.replace(
         "/logos",
         theme === "light" ? "/logos/white" : "/logos/color"
       )}
       style={styles}
-      // biome-ignore lint/style/noNonNullAssertion: Ignored using `--suppress`
-      width={numericWidth!}
+      width={numericWidth}
     />
   );
 

docs/site/app/_clients/clients.tsx

@@ -2,10 +2,10 @@
 
 import type { ReactElement } from "react";
 import React, { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
 import { cn } from "@/components/cn";
 import { users } from "./users";
 import { Logo } from "./client-logo";
-import { useTheme } from "next-themes";
 
 interface LogoWrapperProps {
   className: string;
@@ -31,7 +31,7 @@ export function Clients({
 }: {
   linked?: boolean;
   staticWidth?: boolean;
-  companyList?: string[];
+  companyList?: Array<string>;
 }) {
   const [mounted, setMounted] = useState(false);
   const { theme } = useTheme();

docs/site/app/_clients/users.ts

@@ -8,7 +8,7 @@ export interface TurboUser {
   style?: CSSProperties;
 }
 
-export const users: TurboUser[] = [
+export const users: Array<TurboUser> = [
   {
     caption: "Vercel",
     image: "/images/logos/vercel.svg",