feat(website): add community section and integrate bsky-react-post component (#1021)

Author: Rel1cx

README.md

@@ -26,7 +26,7 @@ More than 80 high-quality linting rules to identify possible problems in your Re
 
 ### All-In-One
 
-- [`@eslint-react/eslint-plugin`](https://www.npmjs.com/package/@eslint-react/eslint-plugin) - Main plugin combining all rules and presets from the above packages.
+- [`@eslint-react/eslint-plugin`](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin) - Main plugin combining all rules and presets from the above packages.
 
 ## Installation
 

apps/website/app/(home)/page.tsx

@@ -1,4 +1,5 @@
 import { ESLintReact } from "#/components/eslint-react";
+
 import { Card, Cards } from "fumadocs-ui/components/card";
 
 import { Link } from "next-view-transitions";
@@ -10,6 +11,39 @@ const features = [
   ["Comprehensive", "Handles complex scenarios and identifies problems that other tools might miss."],
 ] as const;
 
+const plugins = [
+  [
+    "eslint-plugin-react-x",
+    "Core rules (renderer-agnostic, compatible with x-platform).",
+    "https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x",
+  ],
+  [
+    "eslint-plugin-react-dom",
+    "DOM specific rules for React DOM.",
+    "https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom",
+  ],
+  [
+    "eslint-plugin-react-web-api",
+    "Rules for interacting with Web APIs.",
+    "https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-web-api",
+  ],
+  [
+    "eslint-plugin-react-hooks-extra",
+    "Extra React Hooks rules.",
+    "https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-hooks-extra",
+  ],
+  [
+    "eslint-plugin-react-naming-convention",
+    "Naming convention rules.",
+    "https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-naming-convention",
+  ],
+  [
+    "@eslint-react/eslint-plugin",
+    "Main plugin combining all rules and presets from the above packages.",
+    "https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin",
+  ],
+] as const;
+
 export default function HomePage() {
   return (
     <main className="w-full min-w-0 max-w-6xl px-8 pt-4 pb-12 md:px-12 mx-auto">
@@ -22,6 +56,12 @@ export default function HomePage() {
         <Cards className="grid grid-cols-1 gap-4 md:grid-cols-4">
           {features.map(([title, description]) => <Card description={description} key={title} title={title} />)}
         </Cards>
+        <h2>ESLint Plugins</h2>
+        <Cards className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          {plugins.map(([title, description, href]) => (
+            <Card description={description} href={href} key={title} title={title} />
+          ))}
+        </Cards>
         <h2>Roadmap</h2>
         <p>
           Check out the <Link href="/roadmap">roadmap</Link> to see what's planned for the future.

apps/website/app/layout.config.tsx

@@ -32,13 +32,24 @@ export const baseOptions: BaseLayoutProps = {
     },
     {
       active: "nested-url",
-      text: "Roadmap",
-      url: "/docs/roadmap",
+      text: "Community",
+      url: "/docs/community",
     },
     {
+      active: "nested-url",
       text: "Changelog",
       url: "/docs/changelog",
     },
+    {
+      active: "nested-url",
+      text: "Roadmap",
+      url: "/docs/roadmap",
+    },
+    {
+      active: "nested-url",
+      text: "FAQ",
+      url: "/FAQ",
+    },
   ],
   nav: {
     title: (

apps/website/app/overrides.css

@@ -83,3 +83,7 @@ figure.fd-codeblock.shiki {
   /* improve code block readability */
   background-color: color-mix(in oklab, var(--color-fd-secondary) 25%, transparent);
 }
+
+.bsky-post [class^="embed-module_externalThumbnail"] {
+  display: none;
+}

apps/website/components/widgets/bsky-post.tsx

@@ -0,0 +1,17 @@
+import { cn } from "#/lib/cn";
+import { Post } from "bsky-react-post";
+import "bsky-react-post/theme.css";
+
+export interface BskyPostProps {
+  id: string;
+  classNames?: string;
+  handle: string;
+}
+
+export function BskyPost({ id, classNames, handle }: BskyPostProps) {
+  return (
+    <div className={cn("bsky-post", "not-prose", "my-8", classNames)}>
+      <Post handle={handle} id={id} />
+    </div>
+  );
+}

apps/website/components/widgets/community-presets.tsx

@@ -0,0 +1,34 @@
+import { Card, Cards } from "fumadocs-ui/components/card";
+
+const presets = [
+  {
+    description: "Anthony's ESLint config preset",
+    name: "antfu/eslint-config",
+    link: "https://github.com/antfu/eslint-config",
+  },
+  {
+    description: "Rebecca's ESLint config preset",
+    name: "eslint-config-rebeccastevens",
+    link: "https://github.com/RebeccaStevens/eslint-config-rebeccastevens",
+  },
+  {
+    description: "A comprehensive and opinionated Typescript-first ESLint configuration",
+    name: "eslint-config-sheriff",
+    link: "https://github.com/AndreaPontrandolfo/sheriff",
+  },
+  {
+    description: "Sukka's ESLint config preset",
+    name: "eslint-config-sukka",
+    link: "https://github.com/SukkaW/eslint-config-sukka",
+  },
+];
+
+export function CommunityPresets() {
+  return (
+    <Cards className="grid grid-cols-1 gap-4 md:grid-cols-2">
+      {presets.map((preset) => (
+        <Card description={preset.description} href={preset.link} key={preset.name} title={preset.name} />
+      ))}
+    </Cards>
+  );
+}

apps/website/content/docs/community.mdx

@@ -0,0 +1,31 @@
+---
+title: Community
+description: "Discover the growing community around ESLint React"
+---
+
+import { BskyPost } from "../../components/widgets/bsky-post";
+import { CommunityPresets } from "../../components/widgets/community-presets";
+
+## OSS Projects Using ESLint React
+
+[![used-by](/used_by.png)](https://github.com/Rel1cx/eslint-react/blob/main/assets/NOTABLE_PROJECTS_USING_ESLINT_REACT)
+
+<small>
+
+_Data collected from GitHub dependents network, if there are any mismatch or outdated information, feel free to [open issue](https://github.com/Rel1cx/eslint-react/issues/new?assignees=&labels=type%3A+documentation&projects=&template=docs_report.md&title=%5Bdocs%5D+) or pull request._
+
+</small>
+
+## Adoption Feedback on Social Media
+
+<BskyPost handle="tkdodo.eu" id="3lbn55t5d5s24" />
+
+Find more on [https://x.com/search?q=eslint-react.xyz](https://x.com/search?q=eslint-react.xyz&src=typed_query&f=live).
+
+---
+
+## See Also
+
+**Community Maintained Presets**
+
+<CommunityPresets />

apps/website/content/docs/getting-started/javascript.mdx

@@ -62,4 +62,3 @@ export default defineConfig([
 
 - [Configure ESLint](https://eslint.org/docs/latest/use/configure/)
 - [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-- [WebStorm ESLint integration](https://www.jetbrains.com/help/webstorm/eslint.html)

apps/website/content/docs/getting-started/typescript.mdx

@@ -59,4 +59,3 @@ export default tseslint.config({
 
 - [Configure ESLint](https://eslint.org/docs/latest/use/configure/)
 - [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-- [WebStorm ESLint integration](https://www.jetbrains.com/help/webstorm/eslint.html)

apps/website/content/docs/meta.json

@@ -10,9 +10,9 @@
     "!advanced-configuration",
     "!using-an-alternative-parser",
     "---Other---",
+    "community",
     "changelog",
     "roadmap",
-    "used-by",
     "faq"
   ]
 }