From 433e67b18b7964a92d593bdc78c518143accfc8b Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Wed, 9 Sep 2026 16:05:59 +0200
Subject: [PATCH] feat(website): link the community plugin directory

Add a paseo.cafe link to the Plugins card on the landing page and a
section at the top of the related projects doc. The card link is accented
so it reads without hover; the card now takes a list of links instead of
one hardcoded link.
---
 .../website/src/components/landing-page.tsx   | 76 +++++++++++++------
 public-docs/community.md                      |  7 ++
 2 files changed, 59 insertions(+), 24 deletions(-)

diff --git a/packages/website/src/components/landing-page.tsx b/packages/website/src/components/landing-page.tsx
index 638609fcf1..6655c6ab37 100644
--- a/packages/website/src/components/landing-page.tsx
+++ b/packages/website/src/components/landing-page.tsx
@@ -4,6 +4,7 @@ import {
   Bot,
   BookOpen,
   Braces,
+  Coffee,
   ExternalLink,
   GitFork,
   Laptop,
@@ -790,40 +791,58 @@ function ExtensibleSection() {
           icon={Puzzle}
           title="Plugins"
           description="Plugins can add server-side functionality and modify the client with custom components. They work across all clients, including mobile"
-          href="/docs/plugins"
-          linkLabel="Plugin documentation"
-          linkIcon="book"
+          links={PLUGIN_CARD_LINKS}
         />
         <ExtensibleCard
           icon={GitFork}
           title="Fork the repo"
           description="Paseo is licensed under Apache 2.0. You can inspect the implementation, fork the project, and adapt it to your workflow or organization"
-          href="https://github.com/getpaseo/paseo"
-          linkLabel="View the repository"
-          linkIcon="github"
-          external
+          links={FORK_CARD_LINKS}
         />
       </div>
     </FeatureSection>
   );
 }
 
+interface ExtensibleCardLink {
+  href: string;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+  external?: boolean;
+  /** Accent links stand out without hover, for destinations worth noticing. */
+  accent?: boolean;
+}
+
+const PLUGIN_CARD_LINKS: ReadonlyArray<ExtensibleCardLink> = [
+  { href: "/docs/plugins", label: "Plugin documentation", icon: BookOpen },
+  {
+    href: "https://paseo.cafe",
+    label: "Community plugins",
+    icon: Coffee,
+    external: true,
+    accent: true,
+  },
+];
+
+const FORK_CARD_LINKS: ReadonlyArray<ExtensibleCardLink> = [
+  {
+    href: "https://github.com/getpaseo/paseo",
+    label: "View the repository",
+    icon: GitHubIcon,
+    external: true,
+  },
+];
+
 function ExtensibleCard({
   icon: Icon,
   title,
   description,
-  href,
-  linkLabel,
-  linkIcon,
-  external = false,
+  links,
 }: {
   icon: LucideIcon;
   title: string;
   description: string;
-  href: string;
-  linkLabel: string;
-  linkIcon?: "book" | "github";
-  external?: boolean;
+  links: ReadonlyArray<ExtensibleCardLink>;
 }) {
   return (
     <div className="flex min-h-64 flex-col rounded-xl border border-white/10 bg-white/[0.025] p-6">
@@ -832,15 +851,24 @@ function ExtensibleCard({
       </div>
       <h3 className="text-lg font-medium text-white/85">{title}</h3>
       <p className="mt-2 text-sm leading-relaxed text-white/45">{description}</p>
-      <a
-        href={href}
-        {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
-        className="mt-auto inline-flex items-center gap-2 pt-6 text-sm text-muted-foreground transition-colors hover:text-foreground"
-      >
-        {linkIcon === "book" ? <BookOpen className="h-4 w-4" /> : null}
-        {linkIcon === "github" ? <GitHubIcon className="h-4 w-4" /> : null}
-        {linkLabel}
-      </a>
+      <div className="mt-auto flex flex-col items-start gap-3 pt-6">
+        {links.map((link) => (
+          <a
+            key={link.href}
+            href={link.href}
+            {...(link.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+            className={
+              link.accent
+                ? "inline-flex items-center gap-2 text-sm text-emerald-300/85 transition-colors hover:text-emerald-200"
+                : "inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
+            }
+          >
+            <link.icon className="h-4 w-4" />
+            {link.label}
+            {link.external ? <ExternalLink className="h-3.5 w-3.5 opacity-70" /> : null}
+          </a>
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/public-docs/community.md b/public-docs/community.md
index 1658ca6130..72f949bc83 100644
--- a/public-docs/community.md
+++ b/public-docs/community.md
@@ -10,6 +10,13 @@ category: Getting started
 
 These projects are related to Paseo and built by the community.
 
+## Plugin directory
+
+[paseo.cafe](https://paseo.cafe) is a community-run directory of Paseo plugins. Listings are generated
+from each plugin's public repository, so it is the fastest way to see what people are building and to
+publish your own. It is independent of the Paseo project and nothing on it is reviewed or endorsed by
+us, so read a plugin's source before installing it.
+
 ## Tools and integrations
 
 | Project                                                                                      | What it does                                                                                                                         |