Skip to content

Commit

Permalink
feat: generate server.json for extension site from google sheet (#756)
Browse files Browse the repository at this point in the history
  • Loading branch information
@wendytang
wendytang authored Jan 24, 2025
1 parent f2952d6 commit 28c9f99
Show file tree
Hide file tree
Showing 6 changed files with 295 additions and 313 deletions.
123 changes: 79 additions & 44 deletions extensions-site/app/components/server-card.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Star, Download, Terminal, ChevronRight } from "lucide-react";
import { Star, Download, Terminal, ChevronRight, Info } from "lucide-react";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { Card, CardContent, CardHeader } from "./ui/card";
Expand All @@ -8,6 +8,15 @@ import { useState } from "react";
import { motion, AnimatePresence } from "motion/react";

function getGooseInstallLink(server: MCPServer): string {
if (server.is_builtin) {
const queryParams = [
'cmd=goosed',
'arg=mcp',
`arg=${encodeURIComponent(server.id)}`,
`description=${encodeURIComponent(server.id)}`
].join('&');
return `goose://extension?${queryParams}`;
}
const parts = server.command.split(" ");
const baseCmd = parts[0]; // npx or uvx
const args = parts.slice(1); // remaining arguments
Expand Down Expand Up @@ -74,35 +83,47 @@ export function ServerCard({ server }: { server: MCPServer }) {
</div>

<div className="py-4">
<button
onClick={() => setIsCommandVisible(!isCommandVisible)}
className="flex items-center gap-2 w-full hover:text-accent dark:text-gray-300
dark:hover:text-accent/90 transition-colors"
>
<Terminal className="h-4 w-4" />
<h4 className="font-medium">Command</h4>
<ChevronRight
className={`h-4 w-4 ml-auto transition-transform ${
isCommandVisible ? "rotate-90" : ""
}`}
/>
</button>
<AnimatePresence>
{isCommandVisible && (
<motion.code
className="block bg-gray-100 dark:bg-gray-900 p-2 mt-2 rounded text-sm dark:text-gray-300 z-[-1]"
initial={{ opacity: 0, translateY: -20 }}
animate={{ opacity: 1, translateY: 0 }}
exit={{
opacity: 0,
translateY: -20,
transition: { duration: 0.1 },
}}
{server.is_builtin ? (
<div className="flex items-center gap-2 text-sm dark:text-gray-300">
{/* <Terminal className="h-4 w-4" /> */}
<Info className="h-4 w-4" />
Can be enabled in the goose settings page
</div>
) : (
<>
<button
onClick={() => setIsCommandVisible(!isCommandVisible)}
className="flex items-center gap-2 w-full hover:text-accent dark:text-gray-300
dark:hover:text-accent/90 transition-colors"
>
goose session --with-extension "{server.command}"
</motion.code>
)}
</AnimatePresence>
<Terminal className="h-4 w-4" />
<h4 className="font-medium">Command</h4>
<ChevronRight
className={`h-4 w-4 ml-auto transition-transform ${
isCommandVisible ? "rotate-90" : ""
}`}
/>
</button>
<AnimatePresence>
{isCommandVisible && (
<motion.div
className="block bg-gray-100 dark:bg-gray-900 p-2 mt-2 rounded text-sm dark:text-gray-300 z-[-1]"
initial={{ opacity: 0, translateY: -20 }}
animate={{ opacity: 1, translateY: 0 }}
exit={{
opacity: 0,
translateY: -20,
transition: { duration: 0.1 },
}}
>
<code>
{`goose session --with-extension "${server.command}"`}
</code>
</motion.div>
)}
</AnimatePresence>
</>
)}
</div>
</div>

Expand All @@ -111,22 +132,36 @@ export function ServerCard({ server }: { server: MCPServer }) {
<Star className="h-4 w-4" />
<span className="ml-1">{server.githubStars} on Github</span>
</div>
<a
href={getGooseInstallLink(server)}
target="_blank"
rel="noopener noreferrer"
className="no-underline"
>
<Button
size="icon"
variant="link"
className="group/download flex items-center justify-center text-xs leading-[14px] text-textSubtle px-0 transition-all"
title="Install with Goose"
{server.is_builtin ? (
<div
className="inline-block"
title="This extension is built into goose and can be enabled in the settings page"
>
<Badge
variant="secondary"
className="ml-2 text-xs cursor-help"
>
Built-in
</Badge>
</div>
) : (
<a
href={getGooseInstallLink(server)}
target="_blank"
rel="noopener noreferrer"
className="no-underline"
>
<span>Install</span>
<Download className="h-4 w-4 ml-2 group-hover/download:text-[#FA5204]" />
</Button>
</a>
<Button
size="icon"
variant="link"
className="group/download flex items-center justify-center text-xs leading-[14px] text-textSubtle px-0 transition-all"
title="Install with Goose"
>
<span>Install</span>
<Download className="h-4 w-4 ml-2 group-hover/download:text-[#FA5204]" />
</Button>
</a>
)}
</div>
</CardContent>
</Card>
Expand Down
15 changes: 8 additions & 7 deletions extensions-site/app/mcp-servers.ts
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
import type { MCPServer } from '../types/server';

export async function fetchMCPServers(): Promise<MCPServer[]> {
const baseUrl = import.meta.env.VITE_BASENAME || "";
try {
// Fetch all servers from the unified JSON file
const response = await fetch(`${baseUrl}servers.json`);
// Use absolute path from root
const url = '/servers.json';
const response = await fetch(url);
if (!response.ok) {
throw new Error('Failed to fetch servers');
}

const servers = await response.json();
throw new Error(`Failed to fetch servers: ${response.status} ${response.statusText}`);
}
const text = await response.text();
const servers = JSON.parse(text);
return servers.sort((a, b) => b.githubStars - a.githubStars);
} catch (error) {
console.error('Error fetching servers:', error);
throw error;
}
}


export async function searchMCPServers(query: string): Promise<MCPServer[]> {
const allServers = await fetchMCPServers();
const searchTerms = query.toLowerCase().split(' ').filter(term => term.length > 0);
Expand Down
116 changes: 82 additions & 34 deletions extensions-site/app/routes/detail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,24 @@ import {
Download,
Star,
Terminal,
ChevronRight,
ArrowLeft,
Info
} from "lucide-react";
import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import { Card, CardContent, CardHeader } from "../components/ui/card";
import { useEffect, useState } from "react";
import { fetchMCPServers } from "../mcp-servers";

interface Server {
id: string;
name: string;
description: string;
command: string;
link: string;
installation_notes: string;
is_builtin: boolean;
endorsed: boolean;
githubStars: number;
environmentVariables: {
name: string;
Expand Down Expand Up @@ -46,18 +51,31 @@ export default function DetailPage() {
const { id } = useParams();
const [server, setServer] = useState<Server | null>(null);
const [isCommandVisible, setIsCommandVisible] = useState(true);
const serverUrl = "https://block.github.io/goose/v1/extensions/servers.json";

const [error, setError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
fetch(serverUrl)
.then((res) => res.json())
.then((servers) => {
const matchingServer = servers.find((s: Server) => s.id === id);
if (matchingServer) {
setServer(matchingServer);
const loadServer = async () => {
try {
setIsLoading(true);
setError(null);
const servers = await fetchMCPServers();
const foundServer = servers.find((s) => s.id === id);
if (!foundServer) {
setError(`Server with ID "${id}" not found`);
return;
}
});
setServer(foundServer);
} catch (err) {
const errorMessage = err instanceof Error ? err.message : "Unknown error";
setError(`Failed to load server: ${errorMessage}`);
console.error("Error loading server:", err);
} finally {
setIsLoading(false);
}
};

loadServer();
}, [id]);

if (!server) {
Expand Down Expand Up @@ -134,22 +152,33 @@ export default function DetailPage() {
<p className="text-xl text-textSubtle">{server.description}</p>
{/* <Button className="mt-4">Download Goose for desktop</Button> */}
</div>
<div>
<p className="text-md text-textSubtle">{server.installation_notes}</p>
</div>

<div className="space-y-2">
<div className="flex items-center gap-2 text-textStandard">
<Terminal className="h-4 w-4" />
<h4 className="font-medium">Command</h4>
</div>
<code className="block bg-gray-100 dark:bg-gray-900 p-2 rounded text-sm dark:text-gray-300">
goose session --with-extension "{server.command}"
</code>
{server.is_builtin ? (
<div className="flex items-center gap-2 text-sm dark:text-gray-300">
<Info className="h-4 w-4" />
Can be enabled in the goose settings page
</div>
) : (
<>
<div className="flex items-center gap-2 text-textStandard">
<Terminal className="h-4 w-4" />
<h4 className="font-medium">Command</h4>
</div>
<code className="block bg-gray-100 dark:bg-gray-900 p-2 rounded text-sm dark:text-gray-300">
{`goose session --with-extension "${server.command}"`}
</code>
</>
)}
</div>

{server.environmentVariables.length > 0 && (
<div className="space-y-4">
<h2 className="text-lg font-medium dark:text-gray-300">
Environment Variables
</h2>
<div className="space-y-4">
<h2 className="text-lg font-medium dark:text-gray-300">
Environment Variables
</h2>
{server.environmentVariables.length > 0 ? (
<div className="">
{server.environmentVariables.map((env) => (
<div
Expand All @@ -170,8 +199,13 @@ export default function DetailPage() {
</div>
))}
</div>
</div>
)}
) : (
<div className="text-gray-600 dark:text-gray-400 text-sm flex items-center gap-2">
<Info className="h-4 w-4" />
No environment variables needed
</div>
)}
</div>

<div className="flex items-center justify-between">
<div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
Expand All @@ -185,15 +219,29 @@ export default function DetailPage() {
rel="noopener noreferrer"
className="no-underline"
>
<Button
size="icon"
variant="link"
className="group/download flex items-center justify-center text-xs leading-[14px] text-textSubtle px-0 transition-all"
title="Install with Goose"
>
<span>Install</span>
<Download className="h-4 w-4 ml-2 group-hover/download:text-[#FA5204]" />
</Button>
{server.is_builtin ? (
<div
className="inline-block"
title="This extension is built into goose and can be enabled in the settings page"
>
<Badge
variant="secondary"
className="ml-2 text-xs cursor-help"
>
Built-in
</Badge>
</div>
) : (
<Button
size="icon"
variant="link"
className="group/download flex items-center justify-center text-xs leading-[14px] text-textSubtle px-0 transition-all"
title="Install with Goose"
>
<span>Install</span>
<Download className="h-4 w-4 ml-2 group-hover/download:text-[#FA5204]" />
</Button>
)}
</a>
</div>
</CardContent>
Expand Down
33 changes: 20 additions & 13 deletions extensions-site/app/routes/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,19 +89,26 @@ export default function HomePage() {
) : (
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{/* <AnimatePresence> */}
{servers.map((server, index) => (
<motion.div
key={server.id}
initial={{
opacity: 0,
}}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.6 }}
>
<ServerCard key={server.id} server={server} />
</motion.div>
))}
{servers
.sort((a, b) => {
// Sort built-in servers first
if (a.is_builtin && !b.is_builtin) return -1;
if (!a.is_builtin && b.is_builtin) return 1;
return 0;
})
.map((server, index) => (
<motion.div
key={server.id}
initial={{
opacity: 0,
}}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.6 }}
>
<ServerCard key={server.id} server={server} />
</motion.div>
))}
{/* </AnimatePresence> */}
</div>
)}
Expand Down
Loading

0 comments on commit 28c9f99

Please sign in to comment.