refactor(website): update 'configurations.mdx' and 'configurations.tsx'

Rel1cx · Jan 25, 2025 · e2e8891 · e2e8891
1 parent 31be9c8
commit e2e8891
Show file tree

Hide file tree

Showing 14 changed files with 203 additions and 85 deletions.
diff --git a/package.json b/package.json
@@ -111,16 +111,16 @@
   },
   "pnpm": {
     "overrides": {
-      "is-core-module": "npm:@nolyfill/is-core-module@^1.0.39",
-      "safe-buffer": "npm:@nolyfill/safe-buffer@^1.0.41",
-      "safer-buffer": "npm:@nolyfill/safer-buffer@^1.0.41",
-      "typedarray": "npm:@nolyfill/typedarray@^1.0.29",
       "@types/react": "^19.0.8",
       "@types/react-dom": "^19.0.3",
       "cross-spawn": "^7.0.6",
+      "is-core-module": "npm:@nolyfill/is-core-module@^1.0.39",
       "react": "^19.0.0",
       "react-dom": "^19.0.0",
+      "safe-buffer": "npm:@nolyfill/safe-buffer@^1.0.41",
+      "safer-buffer": "npm:@nolyfill/safer-buffer@^1.0.41",
       "ts-api-utils": "^2.0.0",
+      "typedarray": "npm:@nolyfill/typedarray@^1.0.29",
       "typescript": "^5.7.3"
     }
   }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/app/docs/[[...slug]]/page.tsx b/website/app/docs/[[...slug]]/page.tsx
@@ -14,7 +14,7 @@ export default async function Page(props: {
   const MDX = page.data.body;
 
   return (
-    <DocsPage toc={page.data.toc} full={!!page.data.full}>
+    <DocsPage full={!!page.data.full} toc={page.data.toc}>
       <DocsTitle>{page.data.title}</DocsTitle>
       <DocsDescription>{page.data.description}</DocsDescription>
       <DocsBody>
@@ -36,7 +36,7 @@ export async function generateMetadata(props: {
   if (!page) notFound();
 
   return {
-    title: page.data.title,
     description: page.data.description,
+    title: page.data.title,
   };
 }
diff --git a/website/app/layout.config.tsx b/website/app/layout.config.tsx
@@ -13,38 +13,38 @@ import { Image } from "#/components/ui/image";
  * Docs Layout: app/docs/layout.tsx
  */
 export const baseOptions: BaseLayoutProps = {
-  nav: {
-    title: (
-      <>
-        <Image src={logo as StaticImageData} width="20" height="20" alt="logo" />ESLint React
-      </>
-    ),
-  },
+  githubUrl: "https://github.com/Rel1cx/eslint-react",
   links: [
     {
+      active: "nested-url",
       text: "Getting Started",
       url: "/docs/getting-started",
-      active: "nested-url",
     },
     {
+      active: "nested-url",
       text: "Rules",
       url: "/docs/rules",
-      active: "nested-url",
     },
     {
+      active: "nested-url",
       text: "Presets",
       url: "/docs/presets",
-      active: "nested-url",
     },
     {
+      active: "nested-url",
       text: "Roadmap",
       url: "/docs/roadmap",
-      active: "nested-url",
     },
     {
       text: "Changelog",
       url: "https://github.com/Rel1cx/eslint-react/releases",
     },
   ],
-  githubUrl: "https://github.com/Rel1cx/eslint-react",
+  nav: {
+    title: (
+      <>
+        <Image alt="logo" height="20" src={logo as StaticImageData} width="20" />ESLint React
+      </>
+    ),
+  },
 };
diff --git a/website/app/layout.tsx b/website/app/layout.tsx
@@ -9,21 +9,21 @@ export default function Layout({ children }: { children: ReactNode }) {
   return (
     <ViewTransitions>
       <html lang="en" suppressHydrationWarning>
-        <meta name="msapplication-TileColor" content="#fff" />
-        <meta httpEquiv="Content-Language" content="en" />
-        <meta name="apple-mobile-web-app-title" content="ESLint React" />
-        <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:site" content="https://eslint-react.xyz" />
+        <meta content="#fff" name="msapplication-TileColor" />
+        <meta content="en" httpEquiv="Content-Language" />
+        <meta content="ESLint React" name="apple-mobile-web-app-title" />
+        <meta content="/ms-icon-144x144.png" name="msapplication-TileImage" />
+        <meta content="summary_large_image" name="twitter:card" />
+        <meta content="https://eslint-react.xyz" name="twitter:site" />
         <link
+          href="https://eslint-react.xyz/apple-touch-icon.png"
           rel="apple-touch-icon"
           sizes="180x180"
-          href="https://eslint-react.xyz/apple-touch-icon.png"
         />
         <link
+          href="https://eslint-react.xyz/favicon.png"
           rel="icon"
           type="image/png"
-          href="https://eslint-react.xyz/favicon.png"
         />
         <body className="flex flex-col min-h-screen">
           <RootProvider>{children}</RootProvider>

diff --git a/website/components/eslint-react.tsx b/website/components/eslint-react.tsx
@@ -8,7 +8,7 @@ import { Image } from "./ui/image";
 export function ESLintReact() {
   return (
     <div className="flex flex-col items-center gap-4 m-0 mx-auto p-8 w-fit">
-      <Image src={logo as StaticImageData} alt="logo" width="150" height="150" />
+      <Image alt="logo" height="150" src={logo as StaticImageData} width="150" />
       <span className="text-2xl">ESLint React</span>
     </div>
   );

diff --git a/website/components/tweet-cards.tsx b/website/components/tweet-cards.tsx
@@ -4,14 +4,14 @@ import { Tweet } from "react-tweet";
 import { chunk } from "#/lib/chunk";
 import { cn } from "#/lib/cn";
 
-export function TweetCards({ tweets, className }: { tweets: string[]; className?: string }) {
+export function TweetCards({ className, tweets }: { className?: string; tweets: string[] }) {
   const chunkedTweets = useMemo(() => chunk(tweets, 2), [tweets]);
   return (
     <div className={cn("grid grid-cols-1 md:grid-cols-2 md:gap-x-12 mt-8 max-w-3xl", className)}>
       {chunkedTweets.map((chunk) => (
-        <div key={chunk.join("_")} className="grid justify-center">
+        <div className="grid justify-center" key={chunk.join("_")}>
           {chunk.map((id) => (
-            <div key={id} className="h-fit max-w-full">
+            <div className="h-fit max-w-full" key={id}>
               <Tweet id={id} />
             </div>
           ))}

diff --git a/website/content/docs/configurations.data.tsx b/website/content/docs/configurations.data.tsx
diff --git a/website/content/docs/configurations.mdx b/website/content/docs/configurations.mdx
@@ -2,14 +2,13 @@
 title: Configurations
 ---
 
-import { TypeTable } from 'fumadocs-ui/components/type-table';
-import { properties } from "./configurations.data"
+import { ConfigurationsTypeTable } from "./configurations"
 
 ESLint React provides the following configurations:
 
 ## Properties
 
-<TypeTable type={properties} />
+<ConfigurationsTypeTable />
 
 ## Descriptions
 

diff --git a/website/content/docs/configurations.tsx b/website/content/docs/configurations.tsx
@@ -0,0 +1,84 @@
+/* eslint-disable perfectionist/sort-objects */
+import dedent from "dedent";
+import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";
+import { TypeTable } from "fumadocs-ui/components/type-table";
+import { Link } from "next-view-transitions";
+
+export function ConfigurationsTypeTable() {
+  return (
+    <TypeTable
+      type={{
+        version: {
+          type: "string",
+          description: <Link href="#version">React version to perform the analysis.</Link>,
+          default: "detect",
+        },
+        importSource: {
+          type: "string",
+          description: <Link href="#importsource">The source where React is imported from.</Link>,
+          default: "react",
+        },
+        polymorphicPropName: {
+          type: "string",
+          description: (
+            <Link href="#polymorphicpropname">The prop your code uses to create polymorphic components.</Link>
+          ),
+          default: "as",
+        },
+        additionalComponents: {
+          type: "CustomComponent[]",
+          description: <Link href="#additionalcomponents">An array of components and its attributes mapping.</Link>,
+          default: "[]",
+          typeDescription: (
+            <DynamicCodeBlock
+              code={dedent`
+                type CustomComponent = {
+                  name: string;
+                  as?: string;
+                  attributes?: {
+                    name: string;
+                    as?: string;
+                    defaultValue?: string;
+                  }[]
+                }
+              `}
+              lang="ts"
+            />
+          ),
+        },
+        additionalHooks: {
+          type: "Record<ReactBuiltInHookName, string[]>",
+          description: <Link href="#additionalhooks">An object of aliases for React built-in Hooks.</Link>,
+          default: "{}",
+          typeDescription: (
+            <DynamicCodeBlock
+              code={dedent`
+                type ReactBuiltInHookName =
+                  | "use"
+                  | "useActionState"
+                  | "useCallback"
+                  | "useContext"
+                  | "useDebugValue"
+                  | "useDeferredValue"
+                  | "useEffect"
+                  | "useFormStatus"
+                  | "useId"
+                  | "useImperativeHandle"
+                  | "useInsertionEffect"
+                  | "useLayoutEffect"
+                  | "useMemo"
+                  | "useOptimistic"
+                  | "useReducer"
+                  | "useRef"
+                  | "useState"
+                  | "useSyncExternalStore"
+                  | "useTransition";
+              `}
+              lang="ts"
+            />
+          ),
+        },
+      }}
+    />
+  );
+}
diff --git a/website/eslint.config.d.ts b/website/eslint.config.d.ts