refactor(website): update component imports and restructure codebase

Author: Rel1cx

package.json

@@ -107,20 +107,20 @@
   },
   "pnpm": {
     "overrides": {
-      "array-flatten": "npm:@nolyfill/array-flatten@^1.0.42",
-      "is-core-module": "npm:@nolyfill/is-core-module@^1.0.39",
-      "isarray": "npm:@nolyfill/isarray@^1.0.29",
-      "safe-buffer": "npm:@nolyfill/safe-buffer@^1.0.41",
-      "safer-buffer": "npm:@nolyfill/safer-buffer@^1.0.41",
-      "side-channel": "npm:@nolyfill/side-channel@^1.0.29",
-      "typedarray": "npm:@nolyfill/typedarray@^1.0.29",
       "@types/react": "^19.0.2",
       "@types/react-dom": "^19.0.2",
+      "array-flatten": "npm:@nolyfill/array-flatten@^1.0.42",
       "cross-spawn": "7.0.6",
+      "is-core-module": "npm:@nolyfill/is-core-module@^1.0.39",
+      "isarray": "npm:@nolyfill/isarray@^1.0.29",
       "next": "^15.1.2",
       "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",
+      "side-channel": "npm:@nolyfill/side-channel@^1.0.29",
       "ts-api-utils": "^2.0.0",
+      "typedarray": "npm:@nolyfill/typedarray@^1.0.29",
       "typescript": "^5.7.2"
     }
   }

pnpm-lock.yaml

@@ -1,10 +1,9 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import React from "react";
 
 import logo from "#/assets/logo.svg";
 import { Image } from "#/components/image";
 
-export function ESLintReactLogo() {
+export function Logo() {
   return (
     <div className="flex flex-col items-center gap-4 m-0 mx-auto p-8 w-fit">
       <Image src={logo} alt="logo" width="150" height="150" />

website/components/callout.tsx

@@ -1,37 +1,53 @@
 import js from "@eslint/js";
+import * as mdx from "eslint-plugin-mdx";
 import tseslint from "typescript-eslint";
 import next from "@next/eslint-plugin-next";
 import react from "@eslint-react/eslint-plugin";
 import reactHooks from "eslint-plugin-react-hooks";
 import gitignore from "eslint-config-flat-gitignore";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+
+const GLOB_TS = ["**/*.{ts,tsx}"];
+const GLOB_JS = ["**/*.{js,cjs,mjs}"];
+const GLOB_MDX = ["**/*.mdx"];
+const GLOB_APP = ["app/**/*.{js,ts,jsx,tsx}"];
 
 export default tseslint.config(
   js.configs.recommended,
-  ...tseslint.configs.recommendedTypeChecked,
+  ...tseslint.configs.recommended,
+  {
+    ...mdx.flat,
+    files: GLOB_MDX,
+    processor: mdx.createRemarkProcessor({
+      lintCodeBlocks: false,
+    }),
+  },
   {
+    files: GLOB_TS,
     languageOptions: {
       parserOptions: {
         project: "./tsconfig.json",
         tsconfigRootDir: import.meta.dirname,
       },
     },
     rules: {
+      ...tseslint.configs.strictTypeCheckedOnly.rules,
       "no-undef": "off",
     },
   },
   {
-    files: ["**/*.{ts,tsx}"],
+    files: [...GLOB_TS, ...GLOB_MDX],
     ...react.configs.recommended,
   },
   {
-    files: ["**/*.{ts,tsx}"],
+    files: GLOB_TS,
     plugins: {
       "react-hooks": reactHooks,
     },
     rules: reactHooks.configs.recommended.rules,
   },
   {
-    files: ["**/*.{ts,tsx}"],
+    files: GLOB_TS,
     plugins: {
       "@next/next": next,
     },
@@ -41,18 +57,29 @@ export default tseslint.config(
     },
   },
   {
-    files: ["app/**/*.{js,ts,jsx,tsx}"],
+    files: [...GLOB_TS, ...GLOB_MDX],
+    plugins: {
+      "simple-import-sort": simpleImportSort,
+    },
+    rules: {
+      "simple-import-sort/exports": "warn",
+      "simple-import-sort/imports": "warn",
+    },
+  },
+  {
+    files: GLOB_APP,
     rules: {
       "@typescript-eslint/require-await": "off",
     },
   },
   {
-    files: ["*.js", "*.cjs"],
+    files: [...GLOB_JS, ...GLOB_MDX],
     ...tseslint.configs.disableTypeChecked,
   },
   {
-    files: ["*.js", "*.cjs"],
+    files: GLOB_JS,
     rules: {
+      "no-undef": "off",
       "@typescript-eslint/no-require-imports": "off",
     },
   },

website/widgets/eslint-react-logo.tsx website/components/logo.tsxwebsite/widgets/eslint-react-logo.tsx renamed to website/components/logo.tsx

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx";
+import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export const cn = (...inputs: ReadonlyArray<ClassValue>) => twMerge(clsx(inputs));

website/eslint.config.mjs

@@ -1,17 +1,17 @@
 import nextra from "nextra";
+import remarkGFM from "remark-gfm";
 // import codeImport from "remark-code-import";
-// import remarkGFM from "remark-gfm";
 
 const withNextra = nextra({
   theme: "nextra-theme-docs",
   themeConfig: "./theme.config.tsx",
   // defaultShowCopyCode: false,
-  // mdxOptions: {
-  //   remarkPlugins: [
-  //     remarkGFM,
-  //     codeImport,
-  //   ],
-  // },
+  mdxOptions: {
+    remarkPlugins: [
+      remarkGFM,
+      // codeImport,
+    ],
+  },
 });
 
 /** @type {import('next').NextConfig} */

website/lib/cn.ts website/libs/cn.tswebsite/lib/cn.ts renamed to website/libs/cn.ts

@@ -2,8 +2,10 @@
   "name": "@eslint-react/website",
   "version": "1.0.0",
   "scripts": {
+    "prebuild": "rimraf .next",
     "build": "next build",
     "clean": "rm -rf .next node_modules/.cache",
+    "predev": "rimraf .next",
     "dev": "next dev",
     "lint": "eslint .",
     "start": "next start"
@@ -28,9 +30,9 @@
     "@types/node": "^22.10.2",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
-    "@typescript-eslint/eslint-plugin": "^8.18.1",
     "@vitejs/plugin-react": "^4.3.4",
     "@workspace/configs": "workspace:*",
+    "@workspace/eslint-plugins": "workspace:*",
     "autoprefixer": "^10.4.20",
     "clsx": "2.1.1",
     "effect": "^3.11.9",
@@ -42,6 +44,7 @@
     "remark-code-import": "^1.2.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
+    "rimraf": "^6.0.1",
     "sass": "^1.83.0",
     "tailwind-merge": "^2.5.5",
     "tailwindcss": "^3.4.17",