From c8d342cc629e2946e1265efdff9b5673099f61af Mon Sep 17 00:00:00 2001 From: Aaron Powell Date: Thu, 29 Jan 2026 13:48:42 +1100 Subject: [PATCH] Add tools catalog with YAML schema and website page - Create website/data/tools.yml with 6 tools: - Awesome Copilot MCP Server - Awesome GitHub Copilot Browser (VS Code extension) - APM - Agent Package Manager (CLI) - Workspace Architect (npm CLI) - Prompt Registry (VS Code extension) - GitHub Node for Visual Studio - Add .schemas/tools.schema.json for YAML validation - Update eng/generate-website-data.mjs to generate tools.json - Add parseYamlFile() to eng/yaml-parser.mjs - Refactor tools.astro to use external TypeScript module - Create website/src/scripts/pages/tools.ts with: - FuzzySearch integration for search - Category filtering - Copy configuration functionality --- .schemas/tools.schema.json | 151 +++++++++++++++++ eng/generate-website-data.mjs | 71 +++++++- eng/yaml-parser.mjs | 17 ++ website/data/tools.yml | 205 ++++++++++++++++++++++ website/public/data/manifest.json | 3 +- website/public/data/tools.json | 223 ++++++++++++++++++++++++ website/src/pages/tools.astro | 263 +++++++++++++++++++++++----- website/src/scripts/pages/tools.ts | 264 +++++++++++++++++++++++++++++ 8 files changed, 1156 insertions(+), 41 deletions(-) create mode 100644 .schemas/tools.schema.json create mode 100644 website/data/tools.yml create mode 100644 website/public/data/tools.json create mode 100644 website/src/scripts/pages/tools.ts diff --git a/.schemas/tools.schema.json b/.schemas/tools.schema.json new file mode 100644 index 00000000..4de6fc09 --- /dev/null +++ b/.schemas/tools.schema.json @@ -0,0 +1,151 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "title": "Tools Catalog", + "description": "Schema for the awesome-copilot tools catalog (website/data/tools.yml)", + "type": "object", + "required": ["tools"], + "additionalProperties": false, + "properties": { + "tools": { + "type": "array", + "description": "List of tools in the catalog", + "minItems": 1, + "items": { + "type": "object", + "required": ["id", "name", "description", "category"], + "additionalProperties": false, + "properties": { + "id": { + "type": "string", + "description": "Unique identifier for the tool", + "pattern": "^[a-z0-9-]+$", + "minLength": 1, + "maxLength": 50 + }, + "name": { + "type": "string", + "description": "Display name for the tool", + "minLength": 1, + "maxLength": 100 + }, + "description": { + "type": "string", + "description": "Description of what this tool does", + "minLength": 1, + "maxLength": 1000 + }, + "category": { + "type": "string", + "description": "Category for grouping tools", + "minLength": 1, + "maxLength": 50, + "examples": ["MCP Servers", "VS Code Extensions", "CLI Tools", "Visual Studio Extensions"] + }, + "featured": { + "type": "boolean", + "description": "Whether this tool is featured (shown first)", + "default": false + }, + "requirements": { + "type": "array", + "description": "List of requirements to use this tool", + "items": { + "type": "string", + "minLength": 1, + "maxLength": 200 + }, + "maxItems": 10 + }, + "features": { + "type": "array", + "description": "List of key features", + "items": { + "type": "string", + "minLength": 1, + "maxLength": 200 + }, + "maxItems": 20 + }, + "links": { + "type": "object", + "description": "Links related to this tool", + "additionalProperties": false, + "properties": { + "blog": { + "type": "string", + "description": "Link to a blog post about the tool", + "format": "uri" + }, + "documentation": { + "type": "string", + "description": "Link to documentation", + "format": "uri" + }, + "github": { + "type": "string", + "description": "Link to GitHub repository", + "format": "uri" + }, + "marketplace": { + "type": "string", + "description": "Link to VS Code or Visual Studio Marketplace", + "format": "uri" + }, + "npm": { + "type": "string", + "description": "Link to npm package", + "format": "uri" + }, + "pypi": { + "type": "string", + "description": "Link to PyPI package", + "format": "uri" + }, + "vscode": { + "type": "string", + "description": "VS Code install link (vscode: URI or aka.ms link)" + }, + "vscode-insiders": { + "type": "string", + "description": "VS Code Insiders install link" + }, + "visual-studio": { + "type": "string", + "description": "Visual Studio install link" + } + } + }, + "configuration": { + "type": "object", + "description": "Configuration snippet for the tool", + "required": ["type", "content"], + "additionalProperties": false, + "properties": { + "type": { + "type": "string", + "description": "Type of configuration (for syntax highlighting)", + "enum": ["json", "yaml", "bash", "toml", "ini"] + }, + "content": { + "type": "string", + "description": "The configuration content" + } + } + }, + "tags": { + "type": "array", + "description": "Tags for filtering and discovery", + "items": { + "type": "string", + "pattern": "^[a-z0-9-]+$", + "minLength": 1, + "maxLength": 30 + }, + "uniqueItems": true, + "maxItems": 15 + } + } + } + } + } +} diff --git a/eng/generate-website-data.mjs b/eng/generate-website-data.mjs index 3fb63c38..ed7d09b1 100644 --- a/eng/generate-website-data.mjs +++ b/eng/generate-website-data.mjs @@ -22,12 +22,14 @@ import { parseFrontmatter, parseCollectionYaml, parseSkillMetadata, + parseYamlFile, } from "./yaml-parser.mjs"; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); const WEBSITE_DATA_DIR = path.join(ROOT_FOLDER, "website", "public", "data"); +const WEBSITE_SOURCE_DATA_DIR = path.join(ROOT_FOLDER, "website", "data"); /** * Ensure the output directory exists @@ -435,6 +437,63 @@ function generateCollectionsData() { }; } +/** + * Generate tools metadata from website/data/tools.yml + */ +function generateToolsData() { + const toolsFile = path.join(WEBSITE_SOURCE_DATA_DIR, "tools.yml"); + + if (!fs.existsSync(toolsFile)) { + console.warn("No tools.yml file found at", toolsFile); + return { items: [], filters: { categories: [], tags: [] } }; + } + + const data = parseYamlFile(toolsFile); + + if (!data || !data.tools) { + return { items: [], filters: { categories: [], tags: [] } }; + } + + const allCategories = new Set(); + const allTags = new Set(); + + const tools = data.tools.map((tool) => { + const category = tool.category || "Other"; + allCategories.add(category); + + const tags = tool.tags || []; + tags.forEach((t) => allTags.add(t)); + + return { + id: tool.id, + name: tool.name, + description: tool.description || "", + category: category, + featured: tool.featured || false, + requirements: tool.requirements || [], + features: tool.features || [], + links: tool.links || {}, + configuration: tool.configuration || null, + tags: tags, + }; + }); + + // Sort with featured first, then alphabetically + const sortedTools = tools.sort((a, b) => { + if (a.featured && !b.featured) return -1; + if (!a.featured && b.featured) return 1; + return a.name.localeCompare(b.name); + }); + + return { + items: sortedTools, + filters: { + categories: Array.from(allCategories).sort(), + tags: Array.from(allTags).sort(), + }, + }; +} + /** * Generate a combined index for search */ @@ -529,6 +588,10 @@ async function main() { const collections = collectionsData.items; console.log(`✓ Generated ${collections.length} collections (${collectionsData.filters.tags.length} tags)`); + const toolsData = generateToolsData(); + const tools = toolsData.items; + console.log(`✓ Generated ${tools.length} tools (${toolsData.filters.categories.length} categories)`); + const searchIndex = generateSearchIndex(agents, prompts, instructions, skills, collections); console.log(`✓ Generated search index with ${searchIndex.length} items`); @@ -558,6 +621,11 @@ async function main() { JSON.stringify(collectionsData, null, 2) ); + fs.writeFileSync( + path.join(WEBSITE_DATA_DIR, "tools.json"), + JSON.stringify(toolsData, null, 2) + ); + fs.writeFileSync( path.join(WEBSITE_DATA_DIR, "search-index.json"), JSON.stringify(searchIndex, null, 2) @@ -572,6 +640,7 @@ async function main() { instructions: instructions.length, skills: skills.length, collections: collections.length, + tools: tools.length, total: searchIndex.length, }, }; @@ -581,7 +650,7 @@ async function main() { JSON.stringify(manifest, null, 2) ); - console.log(`\n✓ All data written to website/data/`); + console.log(`\n✓ All data written to website/public/data/`); } main().catch((err) => { diff --git a/eng/yaml-parser.mjs b/eng/yaml-parser.mjs index 671fbc81..822a8067 100644 --- a/eng/yaml-parser.mjs +++ b/eng/yaml-parser.mjs @@ -195,6 +195,22 @@ function parseSkillMetadata(skillPath) { ); } +/** + * Parse a generic YAML file (used for tools.yml and other config files) + * @param {string} filePath - Path to the YAML file + * @returns {object|null} Parsed YAML object or null on error + */ +function parseYamlFile(filePath) { + return safeFileOperation( + () => { + const content = fs.readFileSync(filePath, "utf8"); + return yaml.load(content, { schema: yaml.JSON_SCHEMA }); + }, + filePath, + null + ); +} + export { parseCollectionYaml, parseFrontmatter, @@ -202,5 +218,6 @@ export { extractMcpServers, extractMcpServerConfigs, parseSkillMetadata, + parseYamlFile, safeFileOperation, }; diff --git a/website/data/tools.yml b/website/data/tools.yml new file mode 100644 index 00000000..f7c8148f --- /dev/null +++ b/website/data/tools.yml @@ -0,0 +1,205 @@ +# yaml-language-server: $schema=../../.schemas/tools.schema.json +# Tools data for the Awesome GitHub Copilot website +# Each tool entry provides information for the tools page + +tools: + - id: mcp-server + name: Awesome Copilot MCP Server + description: >- + A Model Context Protocol (MCP) Server that provides prompts for searching and installing + prompts, instructions, agents, and skills directly from this repository. Makes it easy + to discover and add customizations to your editor. + category: MCP Servers + featured: true + requirements: + - Docker installed and running + links: + blog: https://developer.microsoft.com/blog/announcing-awesome-copilot-mcp-server + vscode: https://aka.ms/awesome-copilot/mcp/vscode + vscode-insiders: https://aka.ms/awesome-copilot/mcp/vscode-insiders + visual-studio: https://aka.ms/awesome-copilot/mcp/vs + configuration: + type: json + content: | + { + "servers": { + "awesome-copilot": { + "type": "stdio", + "command": "docker", + "args": [ + "run", + "-i", + "--rm", + "ghcr.io/microsoft/mcp-dotnet-samples/awesome-copilot:latest" + ] + } + } + } + tags: + - mcp + - docker + - search + - install + + - id: vscode-extension + name: Awesome GitHub Copilot Browser + description: >- + A VS Code extension that allows you to browse, preview, and download GitHub Copilot + customizations from the awesome-copilot repository. Features a tree view for exploring + agents, prompts, instructions, and skills with smart caching for better performance. + category: VS Code Extensions + featured: true + requirements: + - VS Code version 1.103.0 or higher + - Internet connection to fetch repository data + - A workspace folder open in VS Code (for downloads) + links: + github: https://github.com/timheuer/vscode-awesome-copilot + vscode: vscode:extension/TimHeuer.awesome-copilot + vscode-insiders: vscode-insiders:extension/TimHeuer.awesome-copilot + marketplace: https://marketplace.visualstudio.com/items?itemName=TimHeuer.awesome-copilot + features: + - "🔍 Browse: Explore chat modes, instructions, prompts, agents, and skills in a tree view" + - "📖 Preview: View file content before downloading" + - "⬇️ Download: Save files to appropriate .github/ folders in your workspace" + - "🔃 Refresh: Update repository data with manual refresh" + - "💾 Caching: Smart caching for better performance" + tags: + - vscode + - extension + - browse + - preview + - download + + - id: workspace-architect + name: Workspace Architect + description: >- + A comprehensive library of specialized AI personas and chat modes for GitHub Copilot. + Includes architectural planning, tech stack guidance, and advanced cognitive reasoning + models. Install via npm and use the CLI to download personas and prompts. + category: CLI Tools + featured: false + requirements: + - Node.js 20 or higher + - npm + links: + github: https://github.com/archubbuck/workspace-architect + npm: https://www.npmjs.com/package/workspace-architect + features: + - "📦 CLI tool: List and download personas, prompts, and chat modes" + - "🎭 Rich persona library: Architecture, React, Azure, and more" + - "🧠 Cognitive modes: Advanced reasoning and planning personas" + - "⚡ Easy install: npm install -g workspace-architect" + configuration: + type: bash + content: | + # Install globally + npm install -g workspace-architect + + # List available items + workspace-architect list + + # Download a specific item + workspace-architect download instructions:basic-setup + tags: + - cli + - npm + - personas + - chat-modes + - prompts + + - id: apm + name: APM - Agent Package Manager + description: >- + npm for AI coding agents. The package manager for AGENTS.md, Agent Skills, and MCP servers. + One package installs to every AI agent (Copilot, Cursor, Claude, Codex, Gemini) in their + native format. + category: CLI Tools + featured: true + requirements: + - Python 3.8 or higher (for pip install) + - Or use the shell installer + links: + github: https://github.com/danielmeppiel/apm + pypi: https://pypi.org/project/apm-cli/ + features: + - "📦 Universal packages: One install works for Copilot, Cursor, Claude, and more" + - "🔧 Skills & Instructions: Install guardrails and capabilities" + - "🔌 MCP Server management: Configure and manage MCP servers" + - "🏗️ Create packages: Share your standards and workflows" + - "🌐 Multi-source: GitHub, GitHub Enterprise, Azure DevOps" + configuration: + type: bash + content: | + # Install via shell script + curl -sSL https://raw.githubusercontent.com/danielmeppiel/apm/main/install.sh | sh + + # Or install via pip + pip install apm-cli + + # Install a skill + apm install danielmeppiel/form-builder + + # Compile for your AI tools + apm compile + tags: + - cli + - python + - package-manager + - skills + - agents + - mcp + + - id: prompt-registry + name: Prompt Registry + description: >- + A visual marketplace for discovering, installing, and managing GitHub Copilot prompt + libraries from multiple sources. Browse bundles in a tile-based interface with search, + filters, and one-click install. Supports GitHub, local directories, and APM repositories. + category: VS Code Extensions + featured: false + requirements: + - VS Code + links: + github: https://github.com/AmadeusITGroup/prompt-registry + vscode: vscode:extension/AmadeusITGroup.prompt-registry + vscode-insiders: vscode-insiders:extension/AmadeusITGroup.prompt-registry + marketplace: https://marketplace.visualstudio.com/items?itemName=AmadeusITGroup.prompt-registry + features: + - "🎨 Visual Marketplace: Browse bundles with search, filters, and one-click install" + - "🔌 Multi-Source: Connect to GitHub, local directories, APM, or Awesome Copilot" + - "📦 Version Management: Track versions and enable automatic updates" + - "👥 Profiles & Hubs: Organize bundles by project/team" + - "🌍 Cross-Platform: Works on macOS, Linux, and Windows" + tags: + - vscode + - extension + - marketplace + - prompts + - bundles + + - id: github-node-vs + name: GitHub Node for Visual Studio + description: >- + Adds GitHub and MCP Servers nodes to Solution Explorer in Visual Studio. Quickly access + and manage GitHub-specific files like workflows, Copilot instructions, and agents, plus + MCP server configurations - all without leaving Visual Studio. + category: Visual Studio Extensions + featured: false + requirements: + - Visual Studio 2022 or higher + links: + github: https://github.com/madskristensen/GitHubNode + marketplace: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.GitHubNode + features: + - "📁 GitHub Node: Easy access to .github folder contents in Solution Explorer" + - "➕ Quick Create: Add Copilot instructions, agents, prompts, skills, and workflows" + - "🔌 MCP Servers Node: Centralized access to MCP configurations" + - "🔄 Git Status Icons: See file status directly in the tree view" + - "🌐 Open on GitHub: Quick link to view files on GitHub.com" + tags: + - visual-studio + - extension + - solution-explorer + - github + - mcp diff --git a/website/public/data/manifest.json b/website/public/data/manifest.json index 9ec570e4..f49f5d28 100644 --- a/website/public/data/manifest.json +++ b/website/public/data/manifest.json @@ -1,11 +1,12 @@ { - "generated": "2026-01-28T23:49:25.944Z", + "generated": "2026-01-29T02:32:57.492Z", "counts": { "agents": 140, "prompts": 134, "instructions": 163, "skills": 28, "collections": 39, + "tools": 6, "total": 504 } } \ No newline at end of file diff --git a/website/public/data/tools.json b/website/public/data/tools.json new file mode 100644 index 00000000..66656416 --- /dev/null +++ b/website/public/data/tools.json @@ -0,0 +1,223 @@ +{ + "items": [ + { + "id": "apm", + "name": "APM - Agent Package Manager", + "description": "npm for AI coding agents. The package manager for AGENTS.md, Agent Skills, and MCP servers. One package installs to every AI agent (Copilot, Cursor, Claude, Codex, Gemini) in their native format.", + "category": "CLI Tools", + "featured": true, + "requirements": [ + "Python 3.8 or higher (for pip install)", + "Or use the shell installer" + ], + "features": [ + "📦 Universal packages: One install works for Copilot, Cursor, Claude, and more", + "🔧 Skills & Instructions: Install guardrails and capabilities", + "🔌 MCP Server management: Configure and manage MCP servers", + "🏗️ Create packages: Share your standards and workflows", + "🌐 Multi-source: GitHub, GitHub Enterprise, Azure DevOps" + ], + "links": { + "github": "https://github.com/danielmeppiel/apm", + "pypi": "https://pypi.org/project/apm-cli/" + }, + "configuration": { + "type": "bash", + "content": "# Install via shell script\ncurl -sSL https://raw.githubusercontent.com/danielmeppiel/apm/main/install.sh | sh\n\n# Or install via pip\npip install apm-cli\n\n# Install a skill\napm install danielmeppiel/form-builder\n\n# Compile for your AI tools\napm compile\n" + }, + "tags": [ + "cli", + "python", + "package-manager", + "skills", + "agents", + "mcp" + ] + }, + { + "id": "mcp-server", + "name": "Awesome Copilot MCP Server", + "description": "A Model Context Protocol (MCP) Server that provides prompts for searching and installing prompts, instructions, agents, and skills directly from this repository. Makes it easy to discover and add customizations to your editor.", + "category": "MCP Servers", + "featured": true, + "requirements": [ + "Docker installed and running" + ], + "features": [], + "links": { + "blog": "https://developer.microsoft.com/blog/announcing-awesome-copilot-mcp-server", + "vscode": "https://aka.ms/awesome-copilot/mcp/vscode", + "vscode-insiders": "https://aka.ms/awesome-copilot/mcp/vscode-insiders", + "visual-studio": "https://aka.ms/awesome-copilot/mcp/vs" + }, + "configuration": { + "type": "json", + "content": "{\n \"servers\": {\n \"awesome-copilot\": {\n \"type\": \"stdio\",\n \"command\": \"docker\",\n \"args\": [\n \"run\",\n \"-i\",\n \"--rm\",\n \"ghcr.io/microsoft/mcp-dotnet-samples/awesome-copilot:latest\"\n ]\n }\n }\n}\n" + }, + "tags": [ + "mcp", + "docker", + "search", + "install" + ] + }, + { + "id": "vscode-extension", + "name": "Awesome GitHub Copilot Browser", + "description": "A VS Code extension that allows you to browse, preview, and download GitHub Copilot customizations from the awesome-copilot repository. Features a tree view for exploring agents, prompts, instructions, and skills with smart caching for better performance.", + "category": "VS Code Extensions", + "featured": true, + "requirements": [ + "VS Code version 1.103.0 or higher", + "Internet connection to fetch repository data", + "A workspace folder open in VS Code (for downloads)" + ], + "features": [ + "🔍 Browse: Explore chat modes, instructions, prompts, agents, and skills in a tree view", + "📖 Preview: View file content before downloading", + "⬇️ Download: Save files to appropriate .github/ folders in your workspace", + "🔃 Refresh: Update repository data with manual refresh", + "💾 Caching: Smart caching for better performance" + ], + "links": { + "github": "https://github.com/timheuer/vscode-awesome-copilot", + "vscode": "vscode:extension/TimHeuer.awesome-copilot", + "vscode-insiders": "vscode-insiders:extension/TimHeuer.awesome-copilot", + "marketplace": "https://marketplace.visualstudio.com/items?itemName=TimHeuer.awesome-copilot" + }, + "configuration": null, + "tags": [ + "vscode", + "extension", + "browse", + "preview", + "download" + ] + }, + { + "id": "github-node-vs", + "name": "GitHub Node for Visual Studio", + "description": "Adds GitHub and MCP Servers nodes to Solution Explorer in Visual Studio. Quickly access and manage GitHub-specific files like workflows, Copilot instructions, and agents, plus MCP server configurations - all without leaving Visual Studio.", + "category": "Visual Studio Extensions", + "featured": false, + "requirements": [ + "Visual Studio 2022 or higher" + ], + "features": [ + "📁 GitHub Node: Easy access to .github folder contents in Solution Explorer", + "➕ Quick Create: Add Copilot instructions, agents, prompts, skills, and workflows", + "🔌 MCP Servers Node: Centralized access to MCP configurations", + "🔄 Git Status Icons: See file status directly in the tree view", + "🌐 Open on GitHub: Quick link to view files on GitHub.com" + ], + "links": { + "github": "https://github.com/madskristensen/GitHubNode", + "marketplace": "https://marketplace.visualstudio.com/items?itemName=MadsKristensen.GitHubNode" + }, + "configuration": null, + "tags": [ + "visual-studio", + "extension", + "solution-explorer", + "github", + "mcp" + ] + }, + { + "id": "prompt-registry", + "name": "Prompt Registry", + "description": "A visual marketplace for discovering, installing, and managing GitHub Copilot prompt libraries from multiple sources. Browse bundles in a tile-based interface with search, filters, and one-click install. Supports GitHub, local directories, and APM repositories.", + "category": "VS Code Extensions", + "featured": false, + "requirements": [ + "VS Code" + ], + "features": [ + "🎨 Visual Marketplace: Browse bundles with search, filters, and one-click install", + "🔌 Multi-Source: Connect to GitHub, local directories, APM, or Awesome Copilot", + "📦 Version Management: Track versions and enable automatic updates", + "👥 Profiles & Hubs: Organize bundles by project/team", + "🌍 Cross-Platform: Works on macOS, Linux, and Windows" + ], + "links": { + "github": "https://github.com/AmadeusITGroup/prompt-registry", + "vscode": "vscode:extension/AmadeusITGroup.prompt-registry", + "vscode-insiders": "vscode-insiders:extension/AmadeusITGroup.prompt-registry", + "marketplace": "https://marketplace.visualstudio.com/items?itemName=AmadeusITGroup.prompt-registry" + }, + "configuration": null, + "tags": [ + "vscode", + "extension", + "marketplace", + "prompts", + "bundles" + ] + }, + { + "id": "workspace-architect", + "name": "Workspace Architect", + "description": "A comprehensive library of specialized AI personas and chat modes for GitHub Copilot. Includes architectural planning, tech stack guidance, and advanced cognitive reasoning models. Install via npm and use the CLI to download personas and prompts.", + "category": "CLI Tools", + "featured": false, + "requirements": [ + "Node.js 20 or higher", + "npm" + ], + "features": [ + "📦 CLI tool: List and download personas, prompts, and chat modes", + "🎭 Rich persona library: Architecture, React, Azure, and more", + "🧠 Cognitive modes: Advanced reasoning and planning personas", + "⚡ Easy install: npm install -g workspace-architect" + ], + "links": { + "github": "https://github.com/archubbuck/workspace-architect", + "npm": "https://www.npmjs.com/package/workspace-architect" + }, + "configuration": { + "type": "bash", + "content": "# Install globally\nnpm install -g workspace-architect\n\n# List available items\nworkspace-architect list\n\n# Download a specific item\nworkspace-architect download instructions:basic-setup\n" + }, + "tags": [ + "cli", + "npm", + "personas", + "chat-modes", + "prompts" + ] + } + ], + "filters": { + "categories": [ + "CLI Tools", + "MCP Servers", + "VS Code Extensions", + "Visual Studio Extensions" + ], + "tags": [ + "agents", + "browse", + "bundles", + "chat-modes", + "cli", + "docker", + "download", + "extension", + "github", + "install", + "marketplace", + "mcp", + "npm", + "package-manager", + "personas", + "preview", + "prompts", + "python", + "search", + "skills", + "solution-explorer", + "visual-studio", + "vscode" + ] + } +} \ No newline at end of file diff --git a/website/src/pages/tools.astro b/website/src/pages/tools.astro index 90f3d486..1d2a2fb9 100644 --- a/website/src/pages/tools.astro +++ b/website/src/pages/tools.astro @@ -1,10 +1,12 @@ --- -import BaseLayout from '../layouts/BaseLayout.astro'; - -const base = import.meta.env.BASE_URL; +import BaseLayout from "../layouts/BaseLayout.astro"; --- - +
@@ -15,50 +17,115 @@ const base = import.meta.env.BASE_URL;
-
-
-

🖥️ Awesome Copilot MCP Server

- Official +
+
+
-

A Model Context Protocol (MCP) server that provides prompts for searching and installing resources directly from this repository.

- -

Features

-
    -
  • Search across all agents, prompts, instructions, skills, and collections
    • -
  • Install resources directly to your project
    • -
  • Browse featured and curated collections
    • -
- -

Requirements

-
    -
  • Docker (required to run the server)
    • -
- -

Installation

-

See the README for installation instructions.

- -
- - View Documentation - +
+ +
+
+
+

More Tools Coming Soon

-

We're working on additional tools to enhance your GitHub Copilot experience. Check back soon!

+

+ We're working on additional tools to enhance your GitHub Copilot + experience. Check back soon! +

- + + diff --git a/website/src/scripts/pages/tools.ts b/website/src/scripts/pages/tools.ts new file mode 100644 index 00000000..4b34ead9 --- /dev/null +++ b/website/src/scripts/pages/tools.ts @@ -0,0 +1,264 @@ +/** + * Tools page functionality + */ +import { FuzzySearch, type SearchableItem } from '../search'; +import { fetchData, debounce, escapeHtml } from '../utils'; + +export interface Tool extends SearchableItem { + id: string; + name: string; + title: string; + description: string; + category: string; + featured: boolean; + requirements: string[]; + features: string[]; + links: { + blog?: string; + vscode?: string; + 'vscode-insiders'?: string; + 'visual-studio'?: string; + github?: string; + documentation?: string; + marketplace?: string; + npm?: string; + pypi?: string; + }; + configuration?: { + type: string; + content: string; + }; + tags: string[]; +} + +interface ToolsData { + items: Tool[]; + filters: { + categories: string[]; + tags: string[]; + }; +} + +let allItems: Tool[] = []; +let search: FuzzySearch; +let currentFilters = { + categories: [] as string[], + query: '', +}; + +function applyFiltersAndRender(): void { + const searchInput = document.getElementById('search-input') as HTMLInputElement; + const countEl = document.getElementById('results-count'); + const query = searchInput?.value || ''; + currentFilters.query = query; + + let results = query ? search.search(query) : [...allItems]; + + if (currentFilters.categories.length > 0) { + results = results.filter(item => + currentFilters.categories.includes(item.category) + ); + } + + renderTools(results, query); + + let countText = `${results.length} of ${allItems.length} tools`; + if (currentFilters.categories.length > 0) { + countText += ` (filtered by ${currentFilters.categories.length} categories)`; + } + if (countEl) countEl.textContent = countText; +} + +function renderTools(tools: Tool[], query = ''): void { + const container = document.getElementById('tools-list'); + if (!container) return; + + if (tools.length === 0) { + container.innerHTML = ` +
+

No tools found

+

Try a different search term or adjust filters

+
+ `; + return; + } + + container.innerHTML = tools.map(tool => { + const badges: string[] = []; + if (tool.featured) { + badges.push('Featured'); + } + badges.push(`${escapeHtml(tool.category)}`); + + const features = tool.features && tool.features.length > 0 + ? `
+

Features

+
    ${tool.features.map(f => `
  • ${escapeHtml(f)}
    • `).join('')}
+
` + : ''; + + const requirements = tool.requirements && tool.requirements.length > 0 + ? `
+

Requirements

+
    ${tool.requirements.map(r => `
  • ${escapeHtml(r)}
    • `).join('')}
+
` + : ''; + + const tags = tool.tags && tool.tags.length > 0 + ? `
+ ${tool.tags.map(t => `${escapeHtml(t)}`).join('')} +
` + : ''; + + const config = tool.configuration + ? `
+

Configuration

+
+ 
${escapeHtml(tool.configuration.content)}
+
+ +
` + : ''; + + const actions: string[] = []; + if (tool.links.blog) { + actions.push(`📖 Blog`); + } + if (tool.links.marketplace) { + actions.push(`🏪 Marketplace`); + } + if (tool.links.npm) { + actions.push(`📦 npm`); + } + if (tool.links.pypi) { + actions.push(`🐍 PyPI`); + } + if (tool.links.documentation) { + actions.push(`📚 Docs`); + } + if (tool.links.github) { + actions.push(`GitHub`); + } + if (tool.links.vscode) { + actions.push(`Install in VS Code`); + } + if (tool.links['vscode-insiders']) { + actions.push(`VS Code Insiders`); + } + if (tool.links['visual-studio']) { + actions.push(`Visual Studio`); + } + + const actionsHtml = actions.length > 0 + ? `
${actions.join('')}
` + : ''; + + const titleHtml = query ? search.highlight(tool.name, query) : escapeHtml(tool.name); + + return ` +
+
+

${titleHtml}

+
+ ${badges.join('')} +
+
+

${escapeHtml(tool.description)}

+ ${features} + ${requirements} + ${config} + ${tags} + ${actionsHtml} +
+ `; + }).join(''); + + setupCopyConfigHandlers(); +} + +function setupCopyConfigHandlers(): void { + document.querySelectorAll('.copy-config-btn').forEach(btn => { + btn.addEventListener('click', async (e) => { + e.stopPropagation(); + const button = e.currentTarget as HTMLButtonElement; + const config = decodeURIComponent(button.dataset.config || ''); + try { + await navigator.clipboard.writeText(config); + button.classList.add('copied'); + const originalHtml = button.innerHTML; + button.innerHTML = ` + + + + Copied! + `; + setTimeout(() => { + button.classList.remove('copied'); + button.innerHTML = originalHtml; + }, 2000); + } catch (err) { + console.error('Failed to copy:', err); + } + }); + }); +} + +export async function initToolsPage(): Promise { + const container = document.getElementById('tools-list'); + const searchInput = document.getElementById('search-input') as HTMLInputElement; + const categoryFilter = document.getElementById('filter-category') as HTMLSelectElement; + const clearFiltersBtn = document.getElementById('clear-filters'); + const countEl = document.getElementById('results-count'); + + if (container) { + container.innerHTML = '
Loading tools...
'; + } + + const data = await fetchData('tools.json'); + if (!data || !data.items) { + if (container) container.innerHTML = '

Failed to load tools

'; + return; + } + + // Map items to include title for FuzzySearch + allItems = data.items.map(item => ({ + ...item, + title: item.name, // FuzzySearch uses title + })); + + search = new FuzzySearch(); + search.setItems(allItems); + + // Populate category filter + if (categoryFilter && data.filters.categories) { + categoryFilter.innerHTML = '' + + data.filters.categories.map(c => ``).join(''); + + categoryFilter.addEventListener('change', () => { + currentFilters.categories = categoryFilter.value ? [categoryFilter.value] : []; + applyFiltersAndRender(); + }); + } + + // Search input handler + searchInput?.addEventListener('input', debounce(() => applyFiltersAndRender(), 200)); + + // Clear filters + clearFiltersBtn?.addEventListener('click', () => { + currentFilters = { categories: [], query: '' }; + if (categoryFilter) categoryFilter.value = ''; + if (searchInput) searchInput.value = ''; + applyFiltersAndRender(); + }); + + applyFiltersAndRender(); +} + +// Auto-initialize when DOM is ready +document.addEventListener('DOMContentLoaded', initToolsPage);