refactor(website): improve community page (#1022)

Author: Rel1cx

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

@@ -1,4 +1,4 @@
-import { ESLintReact } from "#/components/eslint-react";
+import { ESLintReact } from "#/components/ESLintReact";
 
 import { Card, Cards } from "fumadocs-ui/components/card";
 

apps/website/app/layout.config.tsx

@@ -2,7 +2,7 @@ import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
 import type { StaticImageData } from "next/image";
 import logo from "#/assets/logo.svg";
 
-import { Image } from "#/components/ui/image";
+import { Image } from "#/components/ui/Image";
 import React from "react";
 
 /**

apps/website/components/widgets/bsky-post.tsx renamed to apps/website/components/BskyPost.tsx

@@ -1,9 +1,9 @@
 import type { StaticImageData } from "next/image";
 import logo from "#/assets/logo.svg";
 
-import React from "react";
+import { Image } from "#/components/ui/Image";
 
-import { Image } from "./ui/image";
+import React from "react";
 
 export function ESLintReact() {
   return (

apps/website/components/eslint-react.tsx renamed to apps/website/components/ESLintReact.tsx

@@ -0,0 +1,12 @@
+import { cn } from "#/lib/cn";
+import { GithubInfo } from "fumadocs-ui/components/github-info";
+
+export function GitHubRepo({ className, token, ...rest }: Parameters<typeof GithubInfo>[0]) {
+  return (
+    <GithubInfo
+      className={cn("rounded-lg", "bg-gray-100", "dark:bg-gray-800", className)}
+      token={token ?? process.env["GITHUB_TOKEN"] ?? ""}
+      {...rest}
+    />
+  );
+}

apps/website/components/GitHubRepo.tsx

@@ -3,12 +3,12 @@ title: Community
 description: "Discover the growing community around ESLint React"
 ---
 
-import { BskyPost } from "../../components/widgets/bsky-post";
-import { CommunityPresets } from "../../components/widgets/community-presets";
+import { BskyPost } from "../../components/BskyPost";
+import { CommunityShowcases, CommunityPresets } from "./community";
 
 ## OSS Projects Using ESLint React
 
-[![used-by](/used_by.png)](https://github.com/Rel1cx/eslint-react/blob/main/assets/NOTABLE_PROJECTS_USING_ESLINT_REACT)
+<CommunityShowcases />
 
 <small>
 

apps/website/components/code-block.tsx renamed to apps/website/components/ui/CodeBlock.tsx

@@ -0,0 +1,61 @@
+import { GitHubRepo } from "#/components/GitHubRepo";
+
+const repos = [
+  { owner: "DimensionDev", repo: "Maskbook" },
+  { owner: "electric-sql", repo: "electric" },
+  { owner: "electric-sql", repo: "pglite" },
+  { owner: "ensdomains", repo: "thorin" },
+  { owner: "flirtual", repo: "flirtual" },
+  { owner: "hashintel", repo: "hash" },
+  { owner: "npmgraph", repo: "npmgraph" },
+  { owner: "offlegacy", repo: "event-tracker" },
+  { owner: "onejs", repo: "one" },
+  { owner: "prettier", repo: "prettier" },
+  { owner: "react-navigation", repo: "react-navigation" },
+  { owner: "refined-github", repo: "refined-github" },
+  { owner: "RSSNext", repo: "Follow" },
+  { owner: "TanStack", repo: "form" },
+  { owner: "TanStack", repo: "query" },
+  { owner: "TanStack", repo: "router" },
+  { owner: "TanStack", repo: "store" },
+  { owner: "toss", repo: "suspensive" },
+  { owner: "upleveled", repo: "eslint-config-upleveled" },
+  { owner: "XYOracleNetwork", repo: "sdk-xyo-react-js" },
+];
+
+const presets = [
+  { owner: "AndreaPontrandolfo", repo: "sheriff" },
+  { owner: "antfu", repo: "eslint-config" },
+  { owner: "RebeccaStevens", repo: "eslint-config-rebeccastevens" },
+  { owner: "SukkaW", repo: "eslint-config-sukka" },
+];
+
+export function CommunityShowcases() {
+  return (
+    <div className="not-prose grid grid-cols-1 gap-4 md:grid-cols-2">
+      {repos.map(({ owner, repo }) => (
+        <GitHubRepo
+          className="shadow-sm"
+          key={`${owner}/${repo}`}
+          owner={owner}
+          repo={repo}
+        />
+      ))}
+    </div>
+  );
+}
+
+export function CommunityPresets() {
+  return (
+    <div className="not-prose grid grid-cols-1 gap-4 md:grid-cols-2">
+      {presets.map(({ owner, repo }) => (
+        <GitHubRepo
+          className="shadow-sm"
+          key={`${owner}/${repo}`}
+          owner={owner}
+          repo={repo}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -1,5 +1,5 @@
 /* eslint-disable perfectionist/sort-objects */
-import { CodeBlock } from "#/components/code-block";
+import { CodeBlock } from "#/components/ui/CodeBlock";
 import dedent from "dedent";
 import { TypeTable } from "fumadocs-ui/components/type-table";