Awesome/awesome-copilot
1
0
Fork 0
mirror of https://github.com/github/awesome-copilot.git synced 2026-02-21 19:05:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add tools catalog with YAML schema and website page

Browse Source 
- 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
This commit is contained in:
Aaron Powell
2026-01-29 13:48:42 +11:00
parent 36a26b01e1
commit c8d342cc62
8 changed files with 1156 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

263
website/src/pages/tools.astro
View File

@@ -1,10 +1,12 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
const base = import.meta.env.BASE_URL;
import BaseLayout from "../layouts/BaseLayout.astro";
---
<BaseLayout title="Tools" description="MCP servers and developer tools for GitHub Copilot" activeNav="tools">
<BaseLayout
title="Tools"
description="MCP servers and developer tools for GitHub Copilot"
activeNav="tools"
>
<main>
<div class="page-header">
<div class="container">
@@ -15,50 +17,115 @@ const base = import.meta.env.BASE_URL;
<div class="page-content">
<div class="container">
<div class="tool-card">
<div class="tool-header">
<h2>🖥️ Awesome Copilot MCP Server</h2>
<span class="badge">Official</span>
<div class="search-section">
<div class="search-bar">
<input
type="text"
id="search-input"
placeholder="Search tools..."
class="search-input"
/>
</div>
<p>A Model Context Protocol (MCP) server that provides prompts for searching and installing resources directly from this repository.</p>
<h3>Features</h3>
<ul>
<li>Search across all agents, prompts, instructions, skills, and collections</li>
<li>Install resources directly to your project</li>
<li>Browse featured and curated collections</li>
</ul>
<h3>Requirements</h3>
<ul>
<li>Docker (required to run the server)</li>
</ul>
<h3>Installation</h3>
<p>See the <a href="https://github.com/github/awesome-copilot#mcp-server" target="_blank" rel="noopener">README</a> for installation instructions.</p>
<div class="tool-actions">
<a href="https://github.com/github/awesome-copilot#mcp-server" class="btn btn-primary" target="_blank" rel="noopener">
View Documentation
</a>
<div class="filters">
<select id="filter-category" class="filter-select">
<option value="">All Categories</option>
</select>
<button id="clear-filters" class="btn btn-secondary btn-small"
>Clear</button
>
</div>
<div id="results-count" class="results-count"></div>
</div>
<div id="tools-list"></div>
<div class="coming-soon">
<h2>More Tools Coming Soon</h2>
<p>We're working on additional tools to enhance your GitHub Copilot experience. Check back soon!</p>
<p>
We're working on additional tools to enhance your GitHub Copilot
experience. Check back soon!
</p>
</div>
</div>
</div>
</main>
<style>
<style is:global>
.search-section {
margin-bottom: 24px;
}
.search-bar {
margin-bottom: 16px;
}
.search-input {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background-color: var(--color-card-bg);
color: var(--color-text-primary);
font-size: 16px;
}
.search-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(133, 52, 243, 0.1);
}
.filters {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.filter-select {
padding: 8px 12px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background-color: var(--color-card-bg);
color: var(--color-text-primary);
font-size: 14px;
min-width: 180px;
}
.results-count {
margin-top: 12px;
font-size: 14px;
color: var(--color-text-muted);
}
.loading {
text-align: center;
padding: 48px;
color: var(--color-text-muted);
}
.empty-state {
text-align: center;
padding: 48px;
background-color: var(--color-bg-secondary);
border-radius: var(--border-radius-lg);
}
.empty-state h3 {
color: var(--color-text-muted);
margin-bottom: 8px;
}
.empty-state p {
color: var(--color-text-muted);
}
.tool-card {
background-color: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
padding: 32px;
margin-bottom: 32px;
margin-bottom: 24px;
}
.tool-header {
@@ -66,6 +133,7 @@ const base = import.meta.env.BASE_URL;
align-items: center;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.tool-header h2 {
@@ -74,34 +142,111 @@ const base = import.meta.env.BASE_URL;
color: var(--color-text-emphasis);
}
.badge {
background-color: var(--color-accent);
color: white;
padding: 4px 8px;
.tool-badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.tool-badge {
padding: 4px 12px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.tool-card h3 {
.tool-badge.featured {
background-color: var(--color-primary);
color: white;
}
.tool-badge.category {
background-color: var(--color-purple-light);
color: var(--color-purple-dark);
}
.tool-description {
color: var(--color-text-secondary);
font-size: 16px;
line-height: 1.6;
margin-bottom: 24px;
}
.tool-section {
margin-top: 24px;
}
.tool-section h3 {
margin-bottom: 12px;
font-size: 16px;
font-weight: 600;
color: var(--color-text-emphasis);
}
.tool-card ul {
.tool-section ul {
margin: 0;
padding-left: 24px;
color: var(--color-text-muted);
}
.tool-card li {
.tool-section li {
margin-bottom: 8px;
}
.tool-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 20px;
}
.tool-tag {
background-color: var(--color-bg-secondary);
color: var(--color-text-muted);
padding: 4px 12px;
border-radius: 16px;
font-size: 12px;
border: 1px solid var(--color-border);
}
.tool-config {
margin-top: 24px;
}
.tool-config h3 {
margin-bottom: 12px;
font-size: 16px;
font-weight: 600;
color: var(--color-text-emphasis);
}
.tool-config-wrapper {
position: relative;
}
.tool-config pre {
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: 16px;
overflow-x: auto;
margin: 0;
}
.tool-config code {
font-family: var(--font-mono);
font-size: 13px;
color: var(--color-text-primary);
white-space: pre;
}
.tool-actions {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--color-border);
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.coming-soon {
@@ -120,5 +265,45 @@ const base = import.meta.env.BASE_URL;
.coming-soon p {
color: var(--color-text-muted);
}
.copy-config-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-size: 13px;
background-color: var(--color-bg-primary);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
color: var(--color-text-secondary);
cursor: pointer;
margin-top: 12px;
transition: all 0.2s;
}
.copy-config-btn:hover {
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
border-color: var(--color-text-muted);
}
.copy-config-btn.copied {
background-color: var(--color-success);
color: white;
border-color: var(--color-success);
}
/* Search highlight */
.search-highlight {
background-color: var(--color-warning);
color: var(--color-text-emphasis);
padding: 0 2px;
border-radius: 2px;
}
</style>
<script>
import { initToolsPage } from "../scripts/pages/tools";
initToolsPage();
</script>
</BaseLayout>