docs: remove retired site resources (#10817)
Co-authored-by: Douwe M Osinga <douwe@sidewalklabs.com>
This commit is contained in:
Douwe Osinga
@@ -1,147 +0,0 @@
|
||||
import { Download, Terminal, Info } from "lucide-react";
|
||||
import Link from "@docusaurus/Link";
|
||||
import { useState } from "react";
|
||||
import CodeBlock from '@theme/CodeBlock';
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { getGooseInstallLink } from "@site/src/utils/install-links";
|
||||
import type { MCPServer } from "@site/src/types/server";
|
||||
import type { Prompt, Extension } from "@site/src/types/prompt";
|
||||
|
||||
function extensionToMCPServer(extension: Extension): MCPServer {
|
||||
return {
|
||||
id: extension.command,
|
||||
name: extension.name,
|
||||
command: extension.command,
|
||||
url: extension.url,
|
||||
description: extension.name,
|
||||
is_builtin: extension.is_builtin,
|
||||
link: extension.link || '',
|
||||
installation_notes: extension.installation_notes || '',
|
||||
endorsed: false,
|
||||
environmentVariables: extension.environmentVariables || [],
|
||||
};
|
||||
}
|
||||
|
||||
export function PromptCard({ prompt }: { prompt: Prompt }) {
|
||||
const [expandedExtension, setExpandedExtension] = useState<string | null>(null);
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={`/prompt-library/detail?id=${prompt.id}`}
|
||||
className="block no-underline hover:no-underline"
|
||||
>
|
||||
<div className="extension-title h-full">
|
||||
<div className="server-card interactive w-full h-full">
|
||||
<div className="card-glow"></div>
|
||||
<div className="prompt-card">
|
||||
<div className="card-header">
|
||||
<div className="card-header-content">
|
||||
<span className="home-page-server-name">
|
||||
{prompt.title}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="prompt-card-content">
|
||||
<div>
|
||||
<div>
|
||||
<p className="card-description">{prompt.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<div className="border-t border-borderSubtle pt-4">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{prompt.extensions.map((extension, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-col"
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
inline-flex items-center h-9 px-4 rounded-full
|
||||
bg-background-subtle border border-borderSubtle
|
||||
transition-all duration-150 ease-in-out
|
||||
hover:bg-background-standard hover:border-borderStandard
|
||||
group ${extension.is_builtin ? 'cursor-help' : 'cursor-pointer'}
|
||||
${expandedExtension === extension.command ? 'bg-background-standard border-borderStandard' : ''}
|
||||
`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!extension.is_builtin) {
|
||||
setExpandedExtension(expandedExtension === extension.command ? null : extension.command);
|
||||
}
|
||||
}}
|
||||
title={extension.is_builtin ? "Built-in extension - can be enabled in settings" : "Click to see installation options"}
|
||||
>
|
||||
<span className="text-sm text-textStandard group-hover:text-textProminent">
|
||||
{extension.name}
|
||||
</span>
|
||||
{extension.is_builtin ? (
|
||||
<div className="inline-flex items-center ml-2">
|
||||
<span className="text-sm text-textSubtle">
|
||||
Built-in
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="ml-2 text-textSubtle">
|
||||
<Download className="h-4 w-4" />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Inline Expansion */}
|
||||
<AnimatePresence>
|
||||
{!extension.is_builtin && expandedExtension === extension.command && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: "auto", opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="mt-2 bg-background-subtle rounded-md p-3 border border-borderSubtle space-y-3">
|
||||
<a
|
||||
href={getGooseInstallLink(extensionToMCPServer(extension))}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 text-textStandard hover:text-textProminent"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
<span className="text-sm">Install via Desktop</span>
|
||||
</a>
|
||||
|
||||
<div className="border-t border-borderSubtle" />
|
||||
|
||||
<button
|
||||
className="command-toggle"
|
||||
>
|
||||
<Terminal className="h-4 w-4" />
|
||||
<h4 className="mx-2">Command</h4>
|
||||
</button>
|
||||
{extension.url ? (
|
||||
<CodeBlock language="bash">
|
||||
goose session --with-remote-extension "{extension.url}"
|
||||
</CodeBlock>
|
||||
) : (
|
||||
<CodeBlock language="bash">
|
||||
goose session --with-extension "{extension.command}"
|
||||
</CodeBlock>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -1,128 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import Link from "@docusaurus/Link";
|
||||
import { Check, Copy } from "lucide-react";
|
||||
import type { Skill } from "@site/src/pages/skills/types";
|
||||
|
||||
function generateInstallCommand(repoUrl: string, skillId: string): string {
|
||||
return `npx skills add ${repoUrl} --skill ${skillId}`;
|
||||
}
|
||||
|
||||
export function SkillCard({ skill }: { skill: Skill }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const handleCopyInstall = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const command = generateInstallCommand(skill.repoUrl, skill.id);
|
||||
navigator.clipboard.writeText(command);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full">
|
||||
<Link
|
||||
to={`/skills/detail?id=${skill.id}`}
|
||||
className="block no-underline hover:no-underline h-full"
|
||||
>
|
||||
<div className="absolute inset-0 rounded-2xl bg-purple-500 opacity-10 blur-2xl" />
|
||||
|
||||
<div className="relative z-10 w-full h-full rounded-2xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-[#1A1A1A] flex flex-col justify-between p-6 transition-shadow duration-200 ease-in-out hover:shadow-[0_0_0_2px_rgba(99,102,241,0.4),_0_4px_20px_rgba(99,102,241,0.1)]">
|
||||
<div className="space-y-4">
|
||||
{/* Header with name and badges */}
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white leading-snug">
|
||||
{skill.name}
|
||||
</h3>
|
||||
<div className="flex gap-2 flex-shrink-0">
|
||||
{skill.isCommunity && (
|
||||
<span className="inline-flex items-center h-6 px-2 rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 text-xs font-medium border border-yellow-200 dark:border-yellow-800">
|
||||
Community
|
||||
</span>
|
||||
)}
|
||||
{skill.version && (
|
||||
<span className="inline-flex items-center h-6 px-2 rounded-full bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400 text-xs font-medium">
|
||||
v{skill.version}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-sm text-zinc-600 dark:text-zinc-400">
|
||||
{skill.description}
|
||||
</p>
|
||||
|
||||
{/* Tags - show max 4 on card, rest visible on detail page */}
|
||||
{skill.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{skill.tags.slice(0, 4).map((tag, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="inline-flex items-center h-7 px-3 rounded-full border border-zinc-300 bg-zinc-100 text-zinc-700 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300 text-xs font-medium"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Supporting files indicator */}
|
||||
{skill.supportingFilesType === 'scripts' && (
|
||||
<div className="text-xs text-zinc-500 dark:text-zinc-500">
|
||||
⚙️ Runs scripts
|
||||
</div>
|
||||
)}
|
||||
{skill.supportingFilesType === 'templates' && (
|
||||
<div className="text-xs text-zinc-500 dark:text-zinc-500">
|
||||
📄 Includes templates
|
||||
</div>
|
||||
)}
|
||||
{skill.supportingFilesType === 'multi-file' && (
|
||||
<div className="text-xs text-zinc-500 dark:text-zinc-500">
|
||||
📁 Multi-file skill
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer with actions */}
|
||||
<div className="flex flex-col gap-3 pt-6 mt-2 border-t border-zinc-100 dark:border-zinc-800">
|
||||
{/* Install command display */}
|
||||
<div
|
||||
onClick={handleCopyInstall}
|
||||
className="flex items-center gap-2 -mx-2 px-2 py-1 rounded cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors group"
|
||||
>
|
||||
<code className="flex-1 text-xs font-mono text-zinc-600 dark:text-zinc-400 truncate">
|
||||
<span className="text-zinc-400 dark:text-zinc-500">$</span> {generateInstallCommand(skill.repoUrl, skill.id)}
|
||||
</code>
|
||||
<span className="flex-shrink-0 text-zinc-400 dark:text-zinc-500 group-hover:text-zinc-600 dark:group-hover:text-zinc-300 transition-colors">
|
||||
{copied ? (
|
||||
<Check className="h-4 w-4 text-green-600 dark:text-green-400" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* View Details and Author */}
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm font-medium text-purple-600 dark:text-purple-400">
|
||||
View Details →
|
||||
</span>
|
||||
|
||||
{/* Author */}
|
||||
{skill.author && (
|
||||
<span className="text-sm text-zinc-500 dark:text-zinc-400">
|
||||
by {skill.author}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export type { Skill };
|
||||
Reference in New Issue
Block a user