Awesome/awesome-copilot
1
0
Fork 0
mirror of https://github.com/github/awesome-copilot.git synced 2026-03-12 12:15:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'staged' into learning-hub

Browse Source
This commit is contained in:
Aaron Powell
2026-02-26 11:19:49 +11:00
parent 57634b6231 85a538b92b
commit 3f84820ce0
654 changed files with 34958 additions and 7329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
website/src/env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="astro/client" />

60
website/src/layouts/BaseLayout.astro
View File

@@ -9,10 +9,12 @@ interface Props {
const {
title,
description = "Community-driven collection of custom agents, prompts, and instructions for GitHub Copilot",
description = "Community-driven collection of custom agents, instructions, and skills for GitHub Copilot",
activeNav = "",
} = Astro.props;
const base = import.meta.env.BASE_URL;
const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
const socialImageUrl = new URL(`${base}images/social-image.png`, Astro.site);
// Get git commit SHA and build date at build time
let commitSha = "unknown";
@@ -35,8 +37,28 @@ try {
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title} - Awesome GitHub Copilot</title>
<title>{title} | Awesome GitHub Copilot</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonicalUrl} />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content={canonicalUrl.toString()} />
<meta property="og:title" content={`${title} | Awesome GitHub Copilot`} />
<meta property="og:description" content={description} />
<meta property="og:image" content={socialImageUrl.toString()} />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="2400" />
<meta property="og:image:height" content="1260" />
<meta property="og:site_name" content="Awesome GitHub Copilot" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={`${title} | Awesome GitHub Copilot`} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={socialImageUrl.toString()} />
<meta name="twitter:image:alt" content={`${title} | Awesome GitHub Copilot`} />
<link rel="stylesheet" href={`${base}styles/global.css`} />
<link
rel="icon"
@@ -50,22 +72,6 @@ try {
<div class="container">
<div class="header-content">
<a href={base} class="logo">
<img
src={`${base}images/Copilot_Icon_White.svg`}
alt=""
class="logo-icon logo-icon-dark"
width="32"
height="32"
aria-hidden="true"
/>
<img
src={`${base}images/Copilot_Icon_Black.svg`}
alt=""
class="logo-icon logo-icon-light"
width="32"
height="32"
aria-hidden="true"
/>
<span class="logo-text">Awesome Copilot</span>
</a>
<nav class="main-nav" aria-label="Main navigation">
@@ -73,10 +79,6 @@ try {
href={`${base}agents/`}
class:list={[{ active: activeNav === "agents" }]}>Agents</a
>
<a
href={`${base}prompts/`}
class:list={[{ active: activeNav === "prompts" }]}>Prompts</a
>
<a
href={`${base}instructions/`}
class:list={[{ active: activeNav === "instructions" }]}
@@ -87,9 +89,17 @@ try {
class:list={[{ active: activeNav === "skills" }]}>Skills</a
>
<a
href={`${base}collections/`}
class:list={[{ active: activeNav === "collections" }]}
>Collections</a
href={`${base}hooks/`}
class:list={[{ active: activeNav === "hooks" }]}>Hooks</a
>
<a
href={`${base}workflows/`}
class:list={[{ active: activeNav === "workflows" }]}>Workflows</a
>
<a
href={`${base}plugins/`}
class:list={[{ active: activeNav === "plugins" }]}
>Plugins</a
>
<a
href={`${base}tools/`}

54
website/src/pages/hooks.astro Normal file
View File

@@ -0,0 +1,54 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
import Modal from '../components/Modal.astro';
---
<BaseLayout title="Hooks" description="Automated workflows triggered by Copilot coding agent events" activeNav="hooks">
<main id="main-content">
<div class="page-header">
<div class="container">
<h1>🪝 Hooks</h1>
<p>Automated workflows triggered by Copilot coding agent events</p>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="search-bar">
<label for="search-input" class="sr-only">Search hooks</label>
<input type="text" id="search-input" placeholder="Search hooks..." autocomplete="off">
</div>
<div class="filters-bar" id="filters-bar">
<div class="filter-group">
<label for="filter-hook">Hook Event:</label>
<select id="filter-hook" multiple aria-label="Filter by hook event"></select>
</div>
<div class="filter-group">
<label for="filter-tag">Tag:</label>
<select id="filter-tag" multiple aria-label="Filter by tag"></select>
</div>
<div class="filter-group">
<label for="sort-select">Sort:</label>
<select id="sort-select" aria-label="Sort by">
<option value="title">Name (A-Z)</option>
<option value="lastUpdated">Recently Updated</option>
</select>
</div>
<button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
</div>
<div class="results-count" id="results-count" aria-live="polite"></div>
<div class="resource-list" id="resource-list" role="list">
<div class="loading" aria-live="polite">Loading hooks...</div>
</div>
</div>
</div>
</main>
<Modal />
<script>
import '../scripts/pages/hooks';
</script>
</BaseLayout>

44
website/src/pages/index.astro
View File

@@ -11,7 +11,7 @@ const base = import.meta.env.BASE_URL;
<section class="hero" aria-labelledby="hero-heading">
<div class="container">
<h1 id="hero-heading">Awesome GitHub Copilot</h1>
<p class="hero-subtitle">Community-contributed instructions, prompts, agents, and skills to enhance your GitHub Copilot experience</p>
<p class="hero-subtitle">Community-contributed agents, instructions, and skills to enhance your GitHub Copilot experience</p>
<div class="hero-search">
<label for="global-search" class="sr-only">Search all resources</label>
<input type="text" id="global-search" placeholder="Search all resources..." autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="search-results">
@@ -33,14 +33,6 @@ const base = import.meta.env.BASE_URL;
</div>
<div class="card-count" data-count="agents" aria-label="Agent count">-</div>
</a>
<a href={`${base}prompts/`} class="card card-with-count" id="card-prompts">
<div class="card-icon" aria-hidden="true">🎯</div>
<div class="card-content">
<h3>Prompts</h3>
<p>Ready-to-use prompt templates for development tasks</p>
</div>
<div class="card-count" data-count="prompts" aria-label="Prompt count">-</div>
</a>
<a href={`${base}instructions/`} class="card card-with-count" id="card-instructions">
<div class="card-icon" aria-hidden="true">📋</div>
<div class="card-content">
@@ -57,13 +49,29 @@ const base = import.meta.env.BASE_URL;
</div>
<div class="card-count" data-count="skills" aria-label="Skill count">-</div>
</a>
<a href={`${base}collections/`} class="card card-with-count" id="card-collections">
<div class="card-icon" aria-hidden="true">📦</div>
<a href={`${base}hooks/`} class="card card-with-count" id="card-hooks">
<div class="card-icon" aria-hidden="true">🪝</div>
<div class="card-content">
<h3>Collections</h3>
<p>Curated collections organized by themes</p>
<h3>Hooks</h3>
<p>Automated workflows triggered by agent events</p>
</div>
<div class="card-count" data-count="collections" aria-label="Collection count">-</div>
<div class="card-count" data-count="hooks" aria-label="Hook count">-</div>
</a>
<a href={`${base}workflows/`} class="card card-with-count" id="card-workflows">
<div class="card-icon" aria-hidden="true">⚡</div>
<div class="card-content">
<h3>Workflows</h3>
<p>AI-powered automations for GitHub Actions</p>
</div>
<div class="card-count" data-count="workflows" aria-label="Workflow count">-</div>
</a>
<a href={`${base}plugins/`} class="card card-with-count" id="card-plugins">
<div class="card-icon" aria-hidden="true">🔌</div>
<div class="card-content">
<h3>Plugins</h3>
<p>Curated plugins organized by themes</p>
</div>
<div class="card-count" data-count="plugins" aria-label="Plugin count">-</div>
</a>
<a href={`${base}tools/`} class="card card-with-count" id="card-tools">
<div class="card-icon" aria-hidden="true">🔧</div>
@@ -84,11 +92,11 @@ const base = import.meta.env.BASE_URL;
</div>
</section>
<!-- Featured Collections -->
<!-- Featured Plugins -->
<section class="featured" aria-labelledby="featured-heading">
<div class="container">
<h2 id="featured-heading">Featured Collections</h2>
<div id="featured-collections" class="cards-grid" aria-live="polite">
<h2 id="featured-heading">Featured Plugins</h2>
<div id="featured-plugins" class="cards-grid" aria-live="polite">
<!-- Populated by JS -->
</div>
</div>
@@ -102,7 +110,7 @@ const base = import.meta.env.BASE_URL;
<div class="step">
<div class="step-number" aria-hidden="true">1</div>
<h3>Browse</h3>
<p>Explore agents, prompts, instructions, and skills</p>
<p>Explore agents, instructions, skills, and plugins</p>
</div>
<div class="step">
<div class="step-number" aria-hidden="true">2</div>

16
website/src/pages/llms.txt.ts
View File

@@ -1,6 +1,5 @@
import type { APIRoute } from "astro";
import agentsData from "../../public/data/agents.json";
import promptsData from "../../public/data/prompts.json";
import instructionsData from "../../public/data/instructions.json";
import skillsData from "../../public/data/skills.json";
@@ -9,7 +8,6 @@ const GITHUB_RAW_BASE = "https://raw.githubusercontent.com/github/awesome-copilo
export const GET: APIRoute = () => {
const agents = agentsData.items;
const prompts = promptsData.items;
const instructions = instructionsData.items;
const skills = skillsData.items;
@@ -22,7 +20,7 @@ export const GET: APIRoute = () => {
// Summary blockquote (optional but recommended)
content +=
"> A community-driven collection of custom agents, prompts, instructions, and skills to enhance GitHub Copilot experiences across various domains, languages, and use cases.\n\n";
"> A community-driven collection of custom agents, instructions, and skills to enhance GitHub Copilot experiences across various domains, languages, and use cases.\n\n";
// Add overview section
content += "## Overview\n\n";
@@ -30,8 +28,6 @@ export const GET: APIRoute = () => {
"This repository provides resources to customize and enhance GitHub Copilot:\n\n";
content +=
"- **Agents**: Specialized GitHub Copilot agents that integrate with MCP servers\n";
content +=
"- **Prompts**: Task-specific prompts for code generation and problem-solving\n";
content +=
"- **Instructions**: Coding standards and best practices applied to specific file patterns\n";
content +=
@@ -47,16 +43,6 @@ export const GET: APIRoute = () => {
}
content += "\n";
// Process Prompts
content += "## Prompts\n\n";
for (const prompt of prompts) {
const description = (prompt.description || "No description available")
.replace(/\s+/g, " ")
.trim();
content += `- [${prompt.title}](${url(prompt.path)}): ${description}\n`;
}
content += "\n";
// Process Instructions
content += "## Instructions\n\n";
for (const instruction of instructions) {

18
website/src/pages/collections.astro → website/src/pages/plugins.astro
View File

@@ -3,22 +3,22 @@ import BaseLayout from '../layouts/BaseLayout.astro';
import Modal from '../components/Modal.astro';
---
<BaseLayout title="Collections" description="Curated collections of prompts, instructions, and agents for specific workflows" activeNav="collections">
<BaseLayout title="Plugins" description="Curated plugins of agents, hooks, and skills for specific workflows" activeNav="plugins">
<main id="main-content">
<div class="page-header">
<div class="container">
<h1>📦 Collections</h1>
<p>Curated collections of prompts, instructions, and agents for specific workflows</p>
<h1>🔌 Plugins</h1>
<p>Curated plugins of agents, hooks, and skills for specific workflows</p>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="search-bar">
<label for="search-input" class="sr-only">Search collections</label>
<input type="text" id="search-input" placeholder="Search collections..." autocomplete="off">
<label for="search-input" class="sr-only">Search plugins</label>
<input type="text" id="search-input" placeholder="Search plugins..." autocomplete="off">
</div>
<div class="filters-bar" id="filters-bar">
<div class="filter-group">
<label for="filter-tag">Tag:</label>
@@ -32,10 +32,10 @@ import Modal from '../components/Modal.astro';
</div>
<button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
</div>
<div class="results-count" id="results-count" aria-live="polite"></div>
<div class="resource-list" id="resource-list" role="list">
<div class="loading" aria-live="polite">Loading collections...</div>
<div class="loading" aria-live="polite">Loading plugins...</div>
</div>
</div>
</div>
@@ -44,6 +44,6 @@ import Modal from '../components/Modal.astro';
<Modal />
<script>
import '../scripts/pages/collections';
import '../scripts/pages/plugins';
</script>
</BaseLayout>

18
website/src/pages/prompts.astro → website/src/pages/workflows.astro
View File

@@ -3,26 +3,26 @@ import BaseLayout from '../layouts/BaseLayout.astro';
import Modal from '../components/Modal.astro';
---
<BaseLayout title="Prompts" description="Ready-to-use prompt templates for development tasks with GitHub Copilot" activeNav="prompts">
<BaseLayout title="Workflows" description="AI-powered repository automations that run coding agents in GitHub Actions" activeNav="workflows">
<main id="main-content">
<div class="page-header">
<div class="container">
<h1>🎯 Prompts</h1>
<p>Ready-to-use prompt templates for development tasks with GitHub Copilot</p>
<h1>⚡ Agentic Workflows</h1>
<p>AI-powered repository automations that run coding agents in GitHub Actions</p>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="search-bar">
<label for="search-input" class="sr-only">Search prompts</label>
<input type="text" id="search-input" placeholder="Search prompts..." autocomplete="off">
<label for="search-input" class="sr-only">Search workflows</label>
<input type="text" id="search-input" placeholder="Search workflows..." autocomplete="off">
</div>
<div class="filters-bar" id="filters-bar">
<div class="filter-group">
<label for="filter-tool">Tool:</label>
<select id="filter-tool" multiple aria-label="Filter by tool"></select>
<label for="filter-trigger">Trigger:</label>
<select id="filter-trigger" multiple aria-label="Filter by trigger"></select>
</div>
<div class="filter-group">
<label for="sort-select">Sort:</label>
@@ -36,7 +36,7 @@ import Modal from '../components/Modal.astro';
<div class="results-count" id="results-count" aria-live="polite"></div>
<div class="resource-list" id="resource-list" role="list">
<div class="loading" aria-live="polite">Loading prompts...</div>
<div class="loading" aria-live="polite">Loading workflows...</div>
</div>
</div>
</div>
@@ -45,6 +45,6 @@ import Modal from '../components/Modal.astro';
<Modal />
<script>
import '../scripts/pages/prompts';
import '../scripts/pages/workflows';
</script>
</BaseLayout>

172
website/src/scripts/modal.ts
View File

@@ -20,28 +20,83 @@ let currentFilePath: string | null = null;
let currentFileContent: string | null = null;
let currentFileType: string | null = null;
let triggerElement: HTMLElement | null = null;
let originalDocumentTitle: string | null = null;
// Collection data cache
interface CollectionItem {
// Resource data cache for title lookups
interface ResourceItem {
title: string;
path: string;
}
interface ResourceData {
items: ResourceItem[];
}
const resourceDataCache: Record<string, ResourceData | null> = {};
const RESOURCE_TYPE_TO_JSON: Record<string, string> = {
agent: "agents.json",
instruction: "instructions.json",
skill: "skills.json",
hook: "hooks.json",
workflow: "workflows.json",
plugin: "plugins.json",
};
/**
* Look up the display title for a resource from its JSON data file
*/
async function resolveResourceTitle(
filePath: string,
type: string
): Promise<string> {
const fallback = filePath.split("/").pop() || filePath;
const jsonFile = RESOURCE_TYPE_TO_JSON[type];
if (!jsonFile) return fallback;
if (!(jsonFile in resourceDataCache)) {
resourceDataCache[jsonFile] = await fetchData<ResourceData>(jsonFile);
}
const data = resourceDataCache[jsonFile];
if (!data) return fallback;
// Try exact path match first
const item = data.items.find((i) => i.path === filePath);
if (item) return item.title;
// For skills/hooks, the modal receives the file path (e.g. skills/foo/SKILL.md)
// but JSON stores the folder path (e.g. skills/foo)
const parentPath = filePath.substring(0, filePath.lastIndexOf("/"));
if (parentPath) {
const parentItem = data.items.find((i) => i.path === parentPath);
if (parentItem) return parentItem.title;
}
return fallback;
}
// Plugin data cache
interface PluginItem {
path: string;
kind: string;
usage?: string | null;
}
interface Collection {
interface Plugin {
id: string;
name: string;
description?: string;
path: string;
items: CollectionItem[];
items: PluginItem[];
tags?: string[];
}
interface CollectionsData {
items: Collection[];
interface PluginsData {
items: Plugin[];
}
let collectionsCache: CollectionsData | null = null;
let pluginsCache: PluginsData | null = null;
/**
* Get all focusable elements within a container
@@ -287,7 +342,7 @@ export function setupInstallDropdown(containerId: string): void {
/**
* Open file viewer modal
* @param filePath - Path to the file
* @param type - Resource type (agent, prompt, instruction, etc.)
* @param type - Resource type (agent, instruction, etc.)
* @param updateUrl - Whether to update the URL hash (default: true)
* @param trigger - The element that triggered the modal (for focus return)
*/
@@ -299,7 +354,7 @@ export async function openFileModal(
): Promise<void> {
const modal = document.getElementById("file-modal");
const title = document.getElementById("modal-title");
const modalContent = document.getElementById("modal-content");
let modalContent = document.getElementById("modal-content");
const contentEl = modalContent?.querySelector("code");
const installDropdown = document.getElementById("install-dropdown");
const installBtnMain = document.getElementById(
@@ -329,17 +384,32 @@ export async function openFileModal(
}
// Show modal with loading state
title.textContent = filePath.split("/").pop() || filePath;
const fallbackName = filePath.split("/").pop() || filePath;
title.textContent = fallbackName;
modal.classList.remove("hidden");
// Update document title to reflect the open file
if (!originalDocumentTitle) {
originalDocumentTitle = document.title;
}
document.title = `${fallbackName} | Awesome GitHub Copilot`;
// Resolve the proper title from JSON data asynchronously
resolveResourceTitle(filePath, type).then((resolvedTitle) => {
if (currentFilePath === filePath) {
title.textContent = resolvedTitle;
document.title = `${resolvedTitle} | Awesome GitHub Copilot`;
}
});
// Set focus to close button for accessibility
setTimeout(() => {
closeBtn?.focus();
}, 0);
// Handle collections differently - show as item list
if (type === "collection") {
await openCollectionModal(
// Handle plugins differently - show as item list
if (type === "plugin") {
await openPluginModal(
filePath,
title,
modalContent,
@@ -359,9 +429,16 @@ export async function openFileModal(
if (copyBtn) copyBtn.style.display = "inline-flex";
if (downloadBtn) downloadBtn.style.display = "inline-flex";
// Restore pre/code structure if it was replaced by collection view
if (!modalContent.querySelector("pre")) {
modalContent.innerHTML = '<pre id="modal-content"><code></code></pre>';
// Restore pre/code structure if it was replaced by plugin view
if (modalContent.tagName !== 'PRE') {
const modalBody = modalContent.parentElement;
if (modalBody) {
const pre = document.createElement("pre");
pre.id = "modal-content";
pre.innerHTML = "<code></code>";
modalBody.replaceChild(pre, modalContent);
modalContent = pre;
}
}
const codeEl = modalContent.querySelector("code");
@@ -392,9 +469,9 @@ export async function openFileModal(
}
/**
* Open collection modal with item list
* Open plugin modal with item list
*/
async function openCollectionModal(
async function openPluginModal(
filePath: string,
title: HTMLElement,
modalContent: HTMLElement,
@@ -402,48 +479,57 @@ async function openCollectionModal(
copyBtn: HTMLElement | null,
downloadBtn: HTMLElement | null
): Promise<void> {
// Hide install dropdown and copy/download for collections
// Hide install dropdown and copy/download for plugins
if (installDropdown) installDropdown.style.display = "none";
if (copyBtn) copyBtn.style.display = "none";
if (downloadBtn) downloadBtn.style.display = "none";
// Show loading
modalContent.innerHTML =
'<div class="collection-loading">Loading collection...</div>';
// Load collections data if not cached
if (!collectionsCache) {
collectionsCache = await fetchData<CollectionsData>("collections.json");
// Replace <pre> with a <div> so plugin content isn't styled as preformatted text
const modalBody = modalContent.parentElement;
if (modalBody) {
const div = document.createElement("div");
div.id = "modal-content";
div.innerHTML = '<div class="collection-loading">Loading plugin...</div>';
modalBody.replaceChild(div, modalContent);
modalContent = div;
} else {
modalContent.innerHTML = '<div class="collection-loading">Loading plugin...</div>';
}
if (!collectionsCache) {
// Load plugins data if not cached
if (!pluginsCache) {
pluginsCache = await fetchData<PluginsData>("plugins.json");
}
if (!pluginsCache) {
modalContent.innerHTML =
'<div class="collection-error">Failed to load collection data.</div>';
'<div class="collection-error">Failed to load plugin data.</div>';
return;
}
// Find the collection
const collection = collectionsCache.items.find((c) => c.path === filePath);
if (!collection) {
// Find the plugin
const plugin = pluginsCache.items.find((c) => c.path === filePath);
if (!plugin) {
modalContent.innerHTML =
'<div class="collection-error">Collection not found.</div>';
'<div class="collection-error">Plugin not found.</div>';
return;
}
// Update title
title.textContent = collection.name;
title.textContent = plugin.name;
document.title = `${plugin.name} | Awesome GitHub Copilot`;
// Render collection view
// Render plugin view
modalContent.innerHTML = `
<div class="collection-view">
<div class="collection-description">${escapeHtml(
collection.description || ""
plugin.description || ""
)}</div>
${
collection.tags && collection.tags.length > 0
plugin.tags && plugin.tags.length > 0
? `
<div class="collection-tags">
${collection.tags
${plugin.tags
.map((t) => `<span class="resource-tag">${escapeHtml(t)}</span>`)
.join("")}
</div>
@@ -451,10 +537,10 @@ async function openCollectionModal(
: ""
}
<div class="collection-items-header">
<strong>${collection.items.length} items in this collection</strong>
<strong>${plugin.items.length} items in this plugin</strong>
</div>
<div class="collection-items-list">
${collection.items
${plugin.items
.map(
(item) => `
<div class="collection-item" data-path="${escapeHtml(
@@ -484,7 +570,7 @@ async function openCollectionModal(
</div>
`;
// Add click handlers to collection items
// Add click handlers to plugin items
modalContent.querySelectorAll(".collection-item").forEach((el) => {
el.addEventListener("click", () => {
const path = (el as HTMLElement).dataset.path;
@@ -516,6 +602,12 @@ export function closeModal(updateUrl = true): void {
updateHash(null);
}
// Restore original document title
if (originalDocumentTitle) {
document.title = originalDocumentTitle;
originalDocumentTitle = null;
}
// Return focus to trigger element
if (
triggerElement &&

2
website/src/scripts/pages/agents.ts
View File

@@ -2,7 +2,7 @@
* Agents page functionality
*/
import { createChoices, getChoicesValues, type Choices } from '../choices';
import { FuzzySearch, SearchItem } from '../search';
import { FuzzySearch, type SearchItem } from '../search';
import { fetchData, debounce, escapeHtml, getGitHubUrl, getInstallDropdownHtml, setupDropdownCloseHandlers, getActionButtonsHtml, setupActionHandlers, getLastUpdatedHtml } from '../utils';
import { setupModal, openFileModal } from '../modal';

348
website/src/scripts/pages/hooks.ts Normal file
View File

@@ -0,0 +1,348 @@
/**
* Hooks page functionality
*/
import { createChoices, getChoicesValues, type Choices } from "../choices";
import { FuzzySearch, type SearchItem } from "../search";
import {
fetchData,
debounce,
escapeHtml,
getGitHubUrl,
getRawGitHubUrl,
showToast,
getLastUpdatedHtml,
} from "../utils";
import { setupModal, openFileModal } from "../modal";
import JSZip from "../jszip";
interface Hook extends SearchItem {
id: string;
path: string;
readmeFile: string;
hooks: string[];
tags: string[];
assets: string[];
lastUpdated?: string | null;
}
interface HooksData {
items: Hook[];
filters: {
hooks: string[];
tags: string[];
};
}
type SortOption = "title" | "lastUpdated";
const resourceType = "hook";
let allItems: Hook[] = [];
let search = new FuzzySearch<Hook>();
let hookSelect: Choices;
let tagSelect: Choices;
let currentFilters = {
hooks: [] as string[],
tags: [] as string[],
};
let currentSort: SortOption = "title";
function sortItems(items: Hook[]): Hook[] {
return [...items].sort((a, b) => {
if (currentSort === "lastUpdated") {
const dateA = a.lastUpdated ? new Date(a.lastUpdated).getTime() : 0;
const dateB = b.lastUpdated ? new Date(b.lastUpdated).getTime() : 0;
return dateB - dateA;
}
return a.title.localeCompare(b.title);
});
}
function applyFiltersAndRender(): void {
const searchInput = document.getElementById(
"search-input"
) as HTMLInputElement;
const countEl = document.getElementById("results-count");
const query = searchInput?.value || "";
let results = query ? search.search(query) : [...allItems];
if (currentFilters.hooks.length > 0) {
results = results.filter((item) =>
item.hooks.some((h) => currentFilters.hooks.includes(h))
);
}
if (currentFilters.tags.length > 0) {
results = results.filter((item) =>
item.tags.some((t) => currentFilters.tags.includes(t))
);
}
results = sortItems(results);
renderItems(results, query);
const activeFilters: string[] = [];
if (currentFilters.hooks.length > 0)
activeFilters.push(
`${currentFilters.hooks.length} hook event${
currentFilters.hooks.length > 1 ? "s" : ""
}`
);
if (currentFilters.tags.length > 0)
activeFilters.push(
`${currentFilters.tags.length} tag${
currentFilters.tags.length > 1 ? "s" : ""
}`
);
let countText = `${results.length} of ${allItems.length} hooks`;
if (activeFilters.length > 0) {
countText += ` (filtered by ${activeFilters.join(", ")})`;
}
if (countEl) countEl.textContent = countText;
}
function renderItems(items: Hook[], query = ""): void {
const list = document.getElementById("resource-list");
if (!list) return;
if (items.length === 0) {
list.innerHTML =
'<div class="empty-state"><h3>No hooks found</h3><p>Try a different search term or adjust filters</p></div>';
return;
}
list.innerHTML = items
.map(
(item) => `
<div class="resource-item" data-path="${escapeHtml(
item.readmeFile
)}" data-hook-id="${escapeHtml(item.id)}">
<div class="resource-info">
<div class="resource-title">${
query ? search.highlight(item.title, query) : escapeHtml(item.title)
}</div>
<div class="resource-description">${escapeHtml(
item.description || "No description"
)}</div>
<div class="resource-meta">
${item.hooks
.map(
(h) =>
`<span class="resource-tag tag-hook">${escapeHtml(h)}</span>`
)
.join("")}
${item.tags
.map(
(t) =>
`<span class="resource-tag tag-tag">${escapeHtml(t)}</span>`
)
.join("")}
${
item.assets.length > 0
? `<span class="resource-tag tag-assets">${
item.assets.length
} asset${item.assets.length === 1 ? "" : "s"}</span>`
: ""
}
${getLastUpdatedHtml(item.lastUpdated)}
</div>
</div>
<div class="resource-actions">
<button class="btn btn-primary download-hook-btn" data-hook-id="${escapeHtml(
item.id
)}" title="Download as ZIP">
<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
<path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z"/>
<path d="M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06l1.97 1.969Z"/>
</svg>
Download
</button>
<a href="${getGitHubUrl(
item.path
)}" class="btn btn-secondary" target="_blank" onclick="event.stopPropagation()" title="View on GitHub">GitHub</a>
</div>
</div>
`
)
.join("");
// Add click handlers for opening modal
list.querySelectorAll(".resource-item").forEach((el) => {
el.addEventListener("click", (e) => {
if ((e.target as HTMLElement).closest(".resource-actions")) return;
const path = (el as HTMLElement).dataset.path;
if (path) openFileModal(path, resourceType);
});
});
// Add download handlers
list.querySelectorAll(".download-hook-btn").forEach((btn) => {
btn.addEventListener("click", (e) => {
e.stopPropagation();
const hookId = (btn as HTMLElement).dataset.hookId;
if (hookId) downloadHook(hookId, btn as HTMLButtonElement);
});
});
}
async function downloadHook(
hookId: string,
btn: HTMLButtonElement
): Promise<void> {
const hook = allItems.find((item) => item.id === hookId);
if (!hook) {
showToast("Hook not found.", "error");
return;
}
// Build file list: README.md + all assets
const files = [
{ name: "README.md", path: hook.readmeFile },
...hook.assets.map((a) => ({
name: a,
path: `${hook.path}/${a}`,
})),
];
if (files.length === 0) {
showToast("No files found for this hook.", "error");
return;
}
const originalContent = btn.innerHTML;
btn.disabled = true;
btn.innerHTML =
'<svg class="spinner" viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M8 0a8 8 0 1 0 8 8h-1.5A6.5 6.5 0 1 1 8 1.5V0z"/></svg> Preparing...';
try {
const zip = new JSZip();
const folder = zip.folder(hook.id);
const fetchPromises = files.map(async (file) => {
const url = getRawGitHubUrl(file.path);
try {
const response = await fetch(url);
if (!response.ok) return null;
const content = await response.text();
return { name: file.name, content };
} catch {
return null;
}
});
const results = await Promise.all(fetchPromises);
let addedFiles = 0;
for (const result of results) {
if (result && folder) {
folder.file(result.name, result.content);
addedFiles++;
}
}
if (addedFiles === 0) throw new Error("Failed to fetch any files");
const blob = await zip.generateAsync({ type: "blob" });
const downloadUrl = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = downloadUrl;
link.download = `${hook.id}.zip`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(downloadUrl);
btn.innerHTML =
'<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z"/></svg> Downloaded!';
setTimeout(() => {
btn.disabled = false;
btn.innerHTML = originalContent;
}, 2000);
} catch (error) {
const message =
error instanceof Error ? error.message : "Download failed.";
showToast(message, "error");
btn.innerHTML =
'<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 0 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z"/></svg> Failed';
setTimeout(() => {
btn.disabled = false;
btn.innerHTML = originalContent;
}, 2000);
}
}
export async function initHooksPage(): Promise<void> {
const list = document.getElementById("resource-list");
const searchInput = document.getElementById(
"search-input"
) as HTMLInputElement;
const clearFiltersBtn = document.getElementById("clear-filters");
const sortSelect = document.getElementById(
"sort-select"
) as HTMLSelectElement;
const data = await fetchData<HooksData>("hooks.json");
if (!data || !data.items) {
if (list)
list.innerHTML =
'<div class="empty-state"><h3>Failed to load data</h3></div>';
return;
}
allItems = data.items;
search.setItems(allItems);
// Setup hook event filter
hookSelect = createChoices("#filter-hook", {
placeholderValue: "All Events",
});
hookSelect.setChoices(
data.filters.hooks.map((h) => ({ value: h, label: h })),
"value",
"label",
true
);
document.getElementById("filter-hook")?.addEventListener("change", () => {
currentFilters.hooks = getChoicesValues(hookSelect);
applyFiltersAndRender();
});
// Setup tag filter
tagSelect = createChoices("#filter-tag", {
placeholderValue: "All Tags",
});
tagSelect.setChoices(
data.filters.tags.map((t) => ({ value: t, label: t })),
"value",
"label",
true
);
document.getElementById("filter-tag")?.addEventListener("change", () => {
currentFilters.tags = getChoicesValues(tagSelect);
applyFiltersAndRender();
});
sortSelect?.addEventListener("change", () => {
currentSort = sortSelect.value as SortOption;
applyFiltersAndRender();
});
applyFiltersAndRender();
searchInput?.addEventListener(
"input",
debounce(() => applyFiltersAndRender(), 200)
);
clearFiltersBtn?.addEventListener("click", () => {
currentFilters = { hooks: [], tags: [] };
currentSort = "title";
hookSelect.removeActiveItems();
tagSelect.removeActiveItems();
if (searchInput) searchInput.value = "";
if (sortSelect) sortSelect.value = "title";
applyFiltersAndRender();
});
setupModal();
}
// Auto-initialize when DOM is ready
document.addEventListener("DOMContentLoaded", initHooksPage);

27
website/src/scripts/pages/index.ts
View File

@@ -8,15 +8,16 @@ import { setupModal, openFileModal } from '../modal';
interface Manifest {
counts: {
agents: number;
prompts: number;
instructions: number;
skills: number;
collections: number;
hooks: number;
workflows: number;
plugins: number;
tools: number;
};
}
interface Collection {
interface Plugin {
id: string;
name: string;
description?: string;
@@ -26,8 +27,8 @@ interface Collection {
itemCount: number;
}
interface CollectionsData {
items: Collection[];
interface PluginsData {
items: Plugin[];
}
export async function initHomepage(): Promise<void> {
@@ -35,7 +36,7 @@ export async function initHomepage(): Promise<void> {
const manifest = await fetchData<Manifest>('manifest.json');
if (manifest && manifest.counts) {
// Populate counts in cards
const countKeys = ['agents', 'prompts', 'instructions', 'skills', 'collections', 'tools'] as const;
const countKeys = ['agents', 'instructions', 'skills', 'hooks', 'workflows', 'plugins', 'tools'] as const;
countKeys.forEach(key => {
const countEl = document.querySelector(`.card-count[data-count="${key}"]`);
if (countEl && manifest.counts[key] !== undefined) {
@@ -96,11 +97,11 @@ export async function initHomepage(): Promise<void> {
}
}
// Load featured collections
const collectionsData = await fetchData<CollectionsData>('collections.json');
if (collectionsData && collectionsData.items) {
const featured = collectionsData.items.filter(c => c.featured).slice(0, 6);
const featuredEl = document.getElementById('featured-collections');
// Load featured plugins
const pluginsData = await fetchData<PluginsData>('plugins.json');
if (pluginsData && pluginsData.items) {
const featured = pluginsData.items.filter(c => c.featured).slice(0, 6);
const featuredEl = document.getElementById('featured-plugins');
if (featuredEl) {
if (featured.length > 0) {
featuredEl.innerHTML = featured.map(c => `
@@ -118,11 +119,11 @@ export async function initHomepage(): Promise<void> {
featuredEl.querySelectorAll('.card').forEach(el => {
el.addEventListener('click', () => {
const path = (el as HTMLElement).dataset.path;
if (path) openFileModal(path, 'collection');
if (path) openFileModal(path, 'plugin');
});
});
} else {
featuredEl.innerHTML = '<p style="text-align: center; color: var(--color-text-muted);">No featured collections yet</p>';
featuredEl.innerHTML = '<p style="text-align: center; color: var(--color-text-muted);">No featured plugins yet</p>';
}
}
}

2
website/src/scripts/pages/instructions.ts
View File

@@ -2,7 +2,7 @@
* Instructions page functionality
*/
import { createChoices, getChoicesValues, type Choices } from '../choices';
import { FuzzySearch, SearchItem } from '../search';
import { FuzzySearch, type SearchItem } from '../search';
import { fetchData, debounce, escapeHtml, getGitHubUrl, getInstallDropdownHtml, setupDropdownCloseHandlers, getActionButtonsHtml, setupActionHandlers, getLastUpdatedHtml } from '../utils';
import { setupModal, openFileModal } from '../modal';

30
website/src/scripts/pages/collections.ts → website/src/scripts/pages/plugins.ts
View File

@@ -1,12 +1,12 @@
/**
* Collections page functionality
* Plugins page functionality
*/
import { createChoices, getChoicesValues, type Choices } from '../choices';
import { FuzzySearch, SearchItem } from '../search';
import { FuzzySearch, type SearchItem } from '../search';
import { fetchData, debounce, escapeHtml, getGitHubUrl } from '../utils';
import { setupModal, openFileModal } from '../modal';
interface Collection extends SearchItem {
interface Plugin extends SearchItem {
id: string;
name: string;
path: string;
@@ -15,16 +15,16 @@ interface Collection extends SearchItem {
itemCount: number;
}
interface CollectionsData {
items: Collection[];
interface PluginsData {
items: Plugin[];
filters: {
tags: string[];
};
}
const resourceType = 'collection';
let allItems: Collection[] = [];
let search = new FuzzySearch<Collection>();
const resourceType = 'plugin';
let allItems: Plugin[] = [];
let search = new FuzzySearch<Plugin>();
let tagSelect: Choices;
let currentFilters = {
tags: [] as string[],
@@ -49,19 +49,19 @@ function applyFiltersAndRender(): void {
const activeFilters: string[] = [];
if (currentFilters.tags.length > 0) activeFilters.push(`${currentFilters.tags.length} tag${currentFilters.tags.length > 1 ? 's' : ''}`);
if (currentFilters.featured) activeFilters.push('featured');
let countText = `${results.length} of ${allItems.length} collections`;
let countText = `${results.length} of ${allItems.length} plugins`;
if (activeFilters.length > 0) {
countText += ` (filtered by ${activeFilters.join(', ')})`;
}
if (countEl) countEl.textContent = countText;
}
function renderItems(items: Collection[], query = ''): void {
function renderItems(items: Plugin[], query = ''): void {
const list = document.getElementById('resource-list');
if (!list) return;
if (items.length === 0) {
list.innerHTML = '<div class="empty-state"><h3>No collections found</h3><p>Try a different search term or adjust filters</p></div>';
list.innerHTML = '<div class="empty-state"><h3>No plugins found</h3><p>Try a different search term or adjust filters</p></div>';
return;
}
@@ -91,13 +91,13 @@ function renderItems(items: Collection[], query = ''): void {
});
}
export async function initCollectionsPage(): Promise<void> {
export async function initPluginsPage(): Promise<void> {
const list = document.getElementById('resource-list');
const searchInput = document.getElementById('search-input') as HTMLInputElement;
const featuredCheckbox = document.getElementById('filter-featured') as HTMLInputElement;
const clearFiltersBtn = document.getElementById('clear-filters');
const data = await fetchData<CollectionsData>('collections.json');
const data = await fetchData<PluginsData>('plugins.json');
if (!data || !data.items) {
if (list) list.innerHTML = '<div class="empty-state"><h3>Failed to load data</h3></div>';
return;
@@ -105,7 +105,7 @@ export async function initCollectionsPage(): Promise<void> {
allItems = data.items;
// Map collection items to search items
// Map plugin items to search items
const searchItems = allItems.map(item => ({
...item,
title: item.name,
@@ -140,4 +140,4 @@ export async function initCollectionsPage(): Promise<void> {
}
// Auto-initialize when DOM is ready
document.addEventListener('DOMContentLoaded', initCollectionsPage);
document.addEventListener('DOMContentLoaded', initPluginsPage);

149
website/src/scripts/pages/prompts.ts
View File

@@ -1,149 +0,0 @@
/**
* Prompts page functionality
*/
import { createChoices, getChoicesValues, type Choices } from '../choices';
import { FuzzySearch, SearchItem } from '../search';
import { fetchData, debounce, escapeHtml, getGitHubUrl, getInstallDropdownHtml, setupDropdownCloseHandlers, getActionButtonsHtml, setupActionHandlers, getLastUpdatedHtml } from '../utils';
import { setupModal, openFileModal } from '../modal';
interface Prompt extends SearchItem {
path: string;
tools?: string[];
lastUpdated?: string | null;
}
interface PromptsData {
items: Prompt[];
filters: {
tools: string[];
};
}
type SortOption = 'title' | 'lastUpdated';
const resourceType = 'prompt';
let allItems: Prompt[] = [];
let search = new FuzzySearch<Prompt>();
let toolSelect: Choices;
let currentFilters = { tools: [] as string[] };
let currentSort: SortOption = 'title';
function sortItems(items: Prompt[]): Prompt[] {
return [...items].sort((a, b) => {
if (currentSort === 'lastUpdated') {
const dateA = a.lastUpdated ? new Date(a.lastUpdated).getTime() : 0;
const dateB = b.lastUpdated ? new Date(b.lastUpdated).getTime() : 0;
return dateB - dateA;
}
return a.title.localeCompare(b.title);
});
}
function applyFiltersAndRender(): void {
const searchInput = document.getElementById('search-input') as HTMLInputElement;
const countEl = document.getElementById('results-count');
const query = searchInput?.value || '';
let results = query ? search.search(query) : [...allItems];
if (currentFilters.tools.length > 0) {
results = results.filter(item =>
item.tools?.some(tool => currentFilters.tools.includes(tool))
);
}
results = sortItems(results);
renderItems(results, query);
let countText = `${results.length} of ${allItems.length} prompts`;
if (currentFilters.tools.length > 0) {
countText += ` (filtered by ${currentFilters.tools.length} tool${currentFilters.tools.length > 1 ? 's' : ''})`;
}
if (countEl) countEl.textContent = countText;
}
function renderItems(items: Prompt[], query = ''): void {
const list = document.getElementById('resource-list');
if (!list) return;
if (items.length === 0) {
list.innerHTML = '<div class="empty-state"><h3>No prompts found</h3><p>Try a different search term or adjust filters</p></div>';
return;
}
list.innerHTML = items.map(item => `
<div class="resource-item" data-path="${escapeHtml(item.path)}">
<div class="resource-info">
<div class="resource-title">${query ? search.highlight(item.title, query) : escapeHtml(item.title)}</div>
<div class="resource-description">${escapeHtml(item.description || 'No description')}</div>
<div class="resource-meta">
${item.tools?.slice(0, 4).map(t => `<span class="resource-tag">${escapeHtml(t)}</span>`).join('') || ''}
${item.tools && item.tools.length > 4 ? `<span class="resource-tag">+${item.tools.length - 4} more</span>` : ''}
${getLastUpdatedHtml(item.lastUpdated)}
</div>
</div>
<div class="resource-actions">
${getInstallDropdownHtml(resourceType, item.path, true)}
${getActionButtonsHtml(item.path, true)}
<a href="${getGitHubUrl(item.path)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()" title="View on GitHub">
GitHub
</a>
</div>
</div>
`).join('');
// Add click handlers
list.querySelectorAll('.resource-item').forEach(el => {
el.addEventListener('click', () => {
const path = (el as HTMLElement).dataset.path;
if (path) openFileModal(path, resourceType);
});
});
}
export async function initPromptsPage(): Promise<void> {
const list = document.getElementById('resource-list');
const searchInput = document.getElementById('search-input') as HTMLInputElement;
const clearFiltersBtn = document.getElementById('clear-filters');
const sortSelect = document.getElementById('sort-select') as HTMLSelectElement;
const data = await fetchData<PromptsData>('prompts.json');
if (!data || !data.items) {
if (list) list.innerHTML = '<div class="empty-state"><h3>Failed to load data</h3></div>';
return;
}
allItems = data.items;
search.setItems(allItems);
toolSelect = createChoices('#filter-tool', { placeholderValue: 'All Tools' });
toolSelect.setChoices(data.filters.tools.map(t => ({ value: t, label: t })), 'value', 'label', true);
document.getElementById('filter-tool')?.addEventListener('change', () => {
currentFilters.tools = getChoicesValues(toolSelect);
applyFiltersAndRender();
});
sortSelect?.addEventListener('change', () => {
currentSort = sortSelect.value as SortOption;
applyFiltersAndRender();
});
applyFiltersAndRender();
searchInput?.addEventListener('input', debounce(() => applyFiltersAndRender(), 200));
clearFiltersBtn?.addEventListener('click', () => {
currentFilters = { tools: [] };
currentSort = 'title';
toolSelect.removeActiveItems();
if (searchInput) searchInput.value = '';
if (sortSelect) sortSelect.value = 'title';
applyFiltersAndRender();
});
setupModal();
setupDropdownCloseHandlers();
setupActionHandlers();
}
// Auto-initialize when DOM is ready
document.addEventListener('DOMContentLoaded', initPromptsPage);

2
website/src/scripts/pages/samples.ts
View File

@@ -5,6 +5,7 @@
import { FuzzySearch, type SearchableItem } from "../search";
import { fetchData, escapeHtml } from "../utils";
import { createChoices, getChoicesValues, type Choices } from "../choices";
import { setupModal } from "../modal";
// Types
interface Language {
@@ -82,6 +83,7 @@ export async function initSamplesPage(): Promise<void> {
search = new FuzzySearch(allRecipes);
// Setup UI
setupModal();
setupFilters();
setupSearch();
renderCookbooks();

2
website/src/scripts/pages/skills.ts
View File

@@ -2,7 +2,7 @@
* Skills page functionality
*/
import { createChoices, getChoicesValues, type Choices } from "../choices";
import { FuzzySearch, SearchItem } from "../search";
import { FuzzySearch, type SearchItem } from "../search";
import {
fetchData,
debounce,

198
website/src/scripts/pages/workflows.ts Normal file
View File

@@ -0,0 +1,198 @@
/**
* Workflows page functionality
*/
import { createChoices, getChoicesValues, type Choices } from "../choices";
import { FuzzySearch, type SearchItem } from "../search";
import {
fetchData,
debounce,
escapeHtml,
getGitHubUrl,
getActionButtonsHtml,
setupActionHandlers,
getLastUpdatedHtml,
} from "../utils";
import { setupModal, openFileModal } from "../modal";
interface Workflow extends SearchItem {
id: string;
path: string;
triggers: string[];
lastUpdated?: string | null;
}
interface WorkflowsData {
items: Workflow[];
filters: {
triggers: string[];
};
}
type SortOption = "title" | "lastUpdated";
const resourceType = "workflow";
let allItems: Workflow[] = [];
let search = new FuzzySearch<Workflow>();
let triggerSelect: Choices;
let currentFilters = {
triggers: [] as string[],
};
let currentSort: SortOption = "title";
function sortItems(items: Workflow[]): Workflow[] {
return [...items].sort((a, b) => {
if (currentSort === "lastUpdated") {
const dateA = a.lastUpdated ? new Date(a.lastUpdated).getTime() : 0;
const dateB = b.lastUpdated ? new Date(b.lastUpdated).getTime() : 0;
return dateB - dateA;
}
return a.title.localeCompare(b.title);
});
}
function applyFiltersAndRender(): void {
const searchInput = document.getElementById(
"search-input"
) as HTMLInputElement;
const countEl = document.getElementById("results-count");
const query = searchInput?.value || "";
let results = query ? search.search(query) : [...allItems];
if (currentFilters.triggers.length > 0) {
results = results.filter((item) =>
item.triggers.some((t) => currentFilters.triggers.includes(t))
);
}
results = sortItems(results);
renderItems(results, query);
const activeFilters: string[] = [];
if (currentFilters.triggers.length > 0)
activeFilters.push(
`${currentFilters.triggers.length} trigger${
currentFilters.triggers.length > 1 ? "s" : ""
}`
);
let countText = `${results.length} of ${allItems.length} workflows`;
if (activeFilters.length > 0) {
countText += ` (filtered by ${activeFilters.join(", ")})`;
}
if (countEl) countEl.textContent = countText;
}
function renderItems(items: Workflow[], query = ""): void {
const list = document.getElementById("resource-list");
if (!list) return;
if (items.length === 0) {
list.innerHTML =
'<div class="empty-state"><h3>No workflows found</h3><p>Try a different search term or adjust filters</p></div>';
return;
}
list.innerHTML = items
.map(
(item) => `
<div class="resource-item" data-path="${escapeHtml(item.path)}">
<div class="resource-info">
<div class="resource-title">${
query ? search.highlight(item.title, query) : escapeHtml(item.title)
}</div>
<div class="resource-description">${escapeHtml(
item.description || "No description"
)}</div>
<div class="resource-meta">
${item.triggers
.map(
(t) =>
`<span class="resource-tag tag-trigger">${escapeHtml(t)}</span>`
)
.join("")}
${getLastUpdatedHtml(item.lastUpdated)}
</div>
</div>
<div class="resource-actions">
${getActionButtonsHtml(item.path)}
<a href="${getGitHubUrl(
item.path
)}" class="btn btn-secondary" target="_blank" onclick="event.stopPropagation()" title="View on GitHub">GitHub</a>
</div>
</div>
`
)
.join("");
// Add click handlers for opening modal
list.querySelectorAll(".resource-item").forEach((el) => {
el.addEventListener("click", (e) => {
if ((e.target as HTMLElement).closest(".resource-actions")) return;
const path = (el as HTMLElement).dataset.path;
if (path) openFileModal(path, resourceType);
});
});
}
export async function initWorkflowsPage(): Promise<void> {
const list = document.getElementById("resource-list");
const searchInput = document.getElementById(
"search-input"
) as HTMLInputElement;
const clearFiltersBtn = document.getElementById("clear-filters");
const sortSelect = document.getElementById(
"sort-select"
) as HTMLSelectElement;
const data = await fetchData<WorkflowsData>("workflows.json");
if (!data || !data.items) {
if (list)
list.innerHTML =
'<div class="empty-state"><h3>Failed to load data</h3></div>';
return;
}
allItems = data.items;
search.setItems(allItems);
// Setup trigger filter
triggerSelect = createChoices("#filter-trigger", {
placeholderValue: "All Triggers",
});
triggerSelect.setChoices(
data.filters.triggers.map((t) => ({ value: t, label: t })),
"value",
"label",
true
);
document.getElementById("filter-trigger")?.addEventListener("change", () => {
currentFilters.triggers = getChoicesValues(triggerSelect);
applyFiltersAndRender();
});
sortSelect?.addEventListener("change", () => {
currentSort = sortSelect.value as SortOption;
applyFiltersAndRender();
});
applyFiltersAndRender();
searchInput?.addEventListener(
"input",
debounce(() => applyFiltersAndRender(), 200)
);
clearFiltersBtn?.addEventListener("click", () => {
currentFilters = { triggers: [] };
currentSort = "title";
triggerSelect.removeActiveItems();
if (searchInput) searchInput.value = "";
if (sortSelect) sortSelect.value = "title";
applyFiltersAndRender();
});
setupModal();
setupActionHandlers();
}
// Auto-initialize when DOM is ready
document.addEventListener("DOMContentLoaded", initWorkflowsPage);

34
website/src/scripts/utils.ts
View File

@@ -15,9 +15,9 @@ const VSCODE_INSTALL_CONFIG: Record<
baseUrl: "https://aka.ms/awesome-copilot/install/instructions",
scheme: "chat-instructions",
},
prompt: {
baseUrl: "https://aka.ms/awesome-copilot/install/prompt",
scheme: "chat-prompt",
instruction: {
baseUrl: "https://aka.ms/awesome-copilot/install/instructions",
scheme: "chat-instructions",
},
agent: {
baseUrl: "https://aka.ms/awesome-copilot/install/agent",
@@ -93,7 +93,7 @@ export async function copyToClipboard(text: string): Promise<boolean> {
/**
* Generate VS Code install URL
* @param type - Resource type (agent, prompt, instructions)
* @param type - Resource type (agent, instructions)
* @param filePath - Path to the file
* @param insiders - Whether to use VS Code Insiders
*/
@@ -227,11 +227,17 @@ export function truncate(text: string | undefined, maxLength: number): string {
*/
export function getResourceType(filePath: string): string {
if (filePath.endsWith(".agent.md")) return "agent";
if (filePath.endsWith(".prompt.md")) return "prompt";
if (filePath.endsWith(".instructions.md")) return "instruction";
if (filePath.includes("/skills/") && filePath.endsWith("SKILL.md"))
if (/(^|\/)skills\//.test(filePath) && filePath.endsWith("SKILL.md"))
return "skill";
if (filePath.endsWith(".collection.yml")) return "collection";
if (/(^|\/)hooks\//.test(filePath) && filePath.endsWith("README.md"))
return "hook";
if (/(^|\/)workflows\//.test(filePath) && filePath.endsWith(".md"))
return "workflow";
// Check for plugin directories (e.g., plugins/<id>, plugins/<id>/)
if (/(^|\/)plugins\/[^/]+\/?$/.test(filePath)) return "plugin";
// Check for plugin.json files (e.g., plugins/<id>/.github/plugin/plugin.json)
if (filePath.endsWith("/.github/plugin/plugin.json")) return "plugin";
return "unknown";
}
@@ -241,10 +247,11 @@ export function getResourceType(filePath: string): string {
export function formatResourceType(type: string): string {
const labels: Record<string, string> = {
agent: "🤖 Agent",
prompt: "🎯 Prompt",
instruction: "📋 Instruction",
skill: "⚡ Skill",
collection: "📦 Collection",
hook: "🪝 Hook",
workflow: "⚡ Workflow",
plugin: "🔌 Plugin",
};
return labels[type] || type;
}
@@ -255,10 +262,11 @@ export function formatResourceType(type: string): string {
export function getResourceIcon(type: string): string {
const icons: Record<string, string> = {
agent: "🤖",
prompt: "🎯",
instruction: "📋",
skill: "⚡",
collection: "📦",
hook: "🪝",
workflow: "⚡",
plugin: "🔌",
};
return icons[type] || "📄";
}
@@ -499,5 +507,7 @@ export function getLastUpdatedHtml(isoDate: string | null | undefined): string {
return `<span class="last-updated">Updated: Unknown</span>`;
}
return `<span class="last-updated" title="${escapeHtml(fullDate)}">Updated ${relativeTime}</span>`;
return `<span class="last-updated" title="${escapeHtml(
fullDate
)}">Updated ${relativeTime}</span>`;
}