mirror of
https://github.com/github/awesome-copilot.git
synced 2026-02-20 02:15:12 +00:00
Refactor code for consistency and readability
- Standardized string quotes to double quotes across multiple files. - Improved formatting and indentation for better readability. - Added a function to format multiline text in tools rendering. - Enhanced dropdown and action button handlers for better event management. - Updated the theme application logic to initialize on page load. - Refactored utility functions for consistency and clarity. - Improved error handling and user feedback in download and share functionalities.
This commit is contained in:
Aaron Powell
@@ -3,8 +3,8 @@ import { defineConfig } from "astro/config";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: "https://github.github.io",
|
||||
base: "/",
|
||||
site: "https://github.github.io/awesome-copilot",
|
||||
base: "/awesome-copilot/",
|
||||
output: "static",
|
||||
integrations: [sitemap()],
|
||||
build: {
|
||||
|
||||
@@ -24,6 +24,12 @@
|
||||
--color-text: #e4e4ec;
|
||||
--color-text-muted: #9090a8;
|
||||
--color-text-emphasis: #ffffff;
|
||||
--color-text-primary: var(--color-text);
|
||||
--color-text-secondary: var(--color-text-muted);
|
||||
--color-bg-primary: var(--color-bg);
|
||||
--color-primary: var(--color-accent);
|
||||
--color-purple-light: #C898FD;
|
||||
--color-purple-dark: #43179E;
|
||||
--color-link: #B870FF;
|
||||
--color-link-hover: #C898FD;
|
||||
--color-accent: #8534F3;
|
||||
@@ -46,12 +52,14 @@
|
||||
--border-radius-lg: 16px;
|
||||
--border-radius-xl: 24px;
|
||||
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
|
||||
--shadow-md: 0 12px 24px -10px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.5);
|
||||
--shadow-glow: 0 0 40px -10px rgba(133, 52, 243, 0.5);
|
||||
--transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--container-width: 1200px;
|
||||
--header-height: 72px;
|
||||
--font-mono: 'Monaspace Argon NF', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
}
|
||||
|
||||
/* Light theme */
|
||||
@@ -735,6 +743,17 @@ a:hover {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--color-bg-tertiary);
|
||||
border-color: var(--color-link);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
padding: 8px;
|
||||
background: transparent;
|
||||
@@ -1360,6 +1379,7 @@ a:hover {
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
|
||||
@@ -5,80 +5,161 @@ interface Props {
|
||||
activeNav?: string;
|
||||
}
|
||||
|
||||
const { title, description = 'Community-driven collection of custom agents, prompts, and instructions for GitHub Copilot', activeNav = '' } = Astro.props;
|
||||
const {
|
||||
title,
|
||||
description = "Community-driven collection of custom agents, prompts, and instructions for GitHub Copilot",
|
||||
activeNav = "",
|
||||
} = Astro.props;
|
||||
const base = import.meta.env.BASE_URL;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{title} - Awesome GitHub Copilot</title>
|
||||
<meta name="description" content={description}>
|
||||
<link rel="stylesheet" href={`${base}styles/global.css`}>
|
||||
<link rel="icon" href={`${base}images/Copilot_Icon_Black.svg`} type="image/svg+xml">
|
||||
<script>
|
||||
// Theme toggle - inline for immediate effect (prevent flash)
|
||||
(function() {
|
||||
const theme = localStorage.getItem('theme') ||
|
||||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body data-base-path={base}>
|
||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
<header class="site-header">
|
||||
<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">
|
||||
<a 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' }]}>Instructions</a>
|
||||
<a href={`${base}skills/`} class:list={[{ active: activeNav === 'skills' }]}>Skills</a>
|
||||
<a href={`${base}collections/`} class:list={[{ active: activeNav === 'collections' }]}>Collections</a>
|
||||
<a href={`${base}tools/`} class:list={[{ active: activeNav === 'tools' }]}>Tools</a>
|
||||
<a href={`${base}samples/`} class:list={[{ active: activeNav === 'samples' }]}>Samples</a>
|
||||
</nav>
|
||||
<div class="header-actions">
|
||||
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
|
||||
<svg class="icon-sun" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||||
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0zm0 13a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 13zM2.343 2.343a.75.75 0 0 1 1.061 0l1.06 1.061a.75.75 0 0 1-1.06 1.06l-1.06-1.06a.75.75 0 0 1 0-1.06zm9.193 9.193a.75.75 0 0 1 1.06 0l1.061 1.06a.75.75 0 0 1-1.06 1.061l-1.061-1.06a.75.75 0 0 1 0-1.061zM0 8a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8zm13 0a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5A.75.75 0 0 1 13 8zM2.343 13.657a.75.75 0 0 1 0-1.061l1.06-1.06a.75.75 0 0 1 1.061 1.06l-1.06 1.06a.75.75 0 0 1-1.061 0zm9.193-9.193a.75.75 0 0 1 0-1.06l1.061-1.061a.75.75 0 0 1 1.06 1.06l-1.06 1.061a.75.75 0 0 1-1.061 0z"/>
|
||||
</svg>
|
||||
<svg class="icon-moon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||||
<path d="M9.598 1.591a.75.75 0 0 1 .785-.175 7 7 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786zm1.616 1.945a7 7 0 0 1-7.678 7.678 5.5 5.5 0 1 0 7.678-7.678z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<a href="https://github.com/github/awesome-copilot" class="github-link" target="_blank" rel="noopener" aria-label="View on GitHub">
|
||||
<svg viewBox="0 0 16 16" width="24" height="24" fill="currentColor" aria-hidden="true">
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
|
||||
</svg>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{title} - Awesome GitHub Copilot</title>
|
||||
<meta name="description" content={description} />
|
||||
<link rel="stylesheet" href={`${base}styles/global.css`} />
|
||||
<link
|
||||
rel="icon"
|
||||
href={`${base}images/Copilot_Icon_Black.svg`}
|
||||
type="image/svg+xml"
|
||||
/>
|
||||
</head>
|
||||
<body data-base-path={base}>
|
||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
<header class="site-header">
|
||||
<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">
|
||||
<a
|
||||
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" }]}
|
||||
>Instructions</a
|
||||
>
|
||||
<a
|
||||
href={`${base}skills/`}
|
||||
class:list={[{ active: activeNav === "skills" }]}>Skills</a
|
||||
>
|
||||
<a
|
||||
href={`${base}collections/`}
|
||||
class:list={[{ active: activeNav === "collections" }]}
|
||||
>Collections</a
|
||||
>
|
||||
<a
|
||||
href={`${base}tools/`}
|
||||
class:list={[{ active: activeNav === "tools" }]}>Tools</a
|
||||
>
|
||||
<a
|
||||
href={`${base}samples/`}
|
||||
class:list={[{ active: activeNav === "samples" }]}>Samples</a
|
||||
>
|
||||
</nav>
|
||||
<div class="header-actions">
|
||||
<button
|
||||
id="theme-toggle"
|
||||
class="theme-toggle"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
<svg
|
||||
class="icon-sun"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0zm0 13a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 13zM2.343 2.343a.75.75 0 0 1 1.061 0l1.06 1.061a.75.75 0 0 1-1.06 1.06l-1.06-1.06a.75.75 0 0 1 0-1.06zm9.193 9.193a.75.75 0 0 1 1.06 0l1.061 1.06a.75.75 0 0 1-1.06 1.061l-1.061-1.06a.75.75 0 0 1 0-1.061zM0 8a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8zm13 0a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5A.75.75 0 0 1 13 8zM2.343 13.657a.75.75 0 0 1 0-1.061l1.06-1.06a.75.75 0 0 1 1.061 1.06l-1.06 1.06a.75.75 0 0 1-1.061 0zm9.193-9.193a.75.75 0 0 1 0-1.06l1.061-1.061a.75.75 0 0 1 1.06 1.06l-1.06 1.061a.75.75 0 0 1-1.061 0z"
|
||||
></path>
|
||||
</svg>
|
||||
<svg
|
||||
class="icon-moon"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M9.598 1.591a.75.75 0 0 1 .785-.175 7 7 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786zm1.616 1.945a7 7 0 0 1-7.678 7.678 5.5 5.5 0 1 0 7.678-7.678z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<a
|
||||
href="https://github.com/github/awesome-copilot"
|
||||
class="github-link"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
aria-label="View on GitHub"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<slot />
|
||||
<slot />
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<p>
|
||||
<a href="https://github.com/github/awesome-copilot" target="_blank" rel="noopener">GitHub</a> ·
|
||||
<a href="https://github.com/github/awesome-copilot/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener">Contribute</a> ·
|
||||
<a href="https://github.com/github/awesome-copilot/blob/main/LICENSE" target="_blank" rel="noopener">MIT License</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<p>
|
||||
<a
|
||||
href="https://github.com/github/awesome-copilot"
|
||||
target="_blank"
|
||||
rel="noopener">GitHub</a
|
||||
> ·
|
||||
<a
|
||||
href="https://github.com/github/awesome-copilot/blob/main/CONTRIBUTING.md"
|
||||
target="_blank"
|
||||
rel="noopener">Contribute</a
|
||||
> ·
|
||||
<a
|
||||
href="https://github.com/github/awesome-copilot/blob/main/LICENSE"
|
||||
target="_blank"
|
||||
rel="noopener">MIT License</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
import '../scripts/theme';
|
||||
</script>
|
||||
</body>
|
||||
<script>
|
||||
import "../scripts/theme";
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -2,7 +2,18 @@
|
||||
* Modal functionality for file viewing
|
||||
*/
|
||||
|
||||
import { fetchFileContent, fetchData, getVSCodeInstallUrl, copyToClipboard, showToast, downloadFile, shareFile, getResourceType, escapeHtml, getResourceIcon } from './utils';
|
||||
import {
|
||||
fetchFileContent,
|
||||
fetchData,
|
||||
getVSCodeInstallUrl,
|
||||
copyToClipboard,
|
||||
showToast,
|
||||
downloadFile,
|
||||
shareFile,
|
||||
getResourceType,
|
||||
escapeHtml,
|
||||
getResourceIcon,
|
||||
} from "./utils";
|
||||
|
||||
// Modal state
|
||||
let currentFilePath: string | null = null;
|
||||
@@ -37,29 +48,30 @@ let collectionsCache: CollectionsData | null = null;
|
||||
*/
|
||||
function getFocusableElements(container: HTMLElement): HTMLElement[] {
|
||||
const focusableSelectors = [
|
||||
'button:not([disabled])',
|
||||
'a[href]',
|
||||
'input:not([disabled])',
|
||||
'select:not([disabled])',
|
||||
'textarea:not([disabled])',
|
||||
'[tabindex]:not([tabindex="-1"])'
|
||||
].join(', ');
|
||||
|
||||
return Array.from(container.querySelectorAll<HTMLElement>(focusableSelectors))
|
||||
.filter(el => el.offsetParent !== null); // Filter out hidden elements
|
||||
"button:not([disabled])",
|
||||
"a[href]",
|
||||
"input:not([disabled])",
|
||||
"select:not([disabled])",
|
||||
"textarea:not([disabled])",
|
||||
'[tabindex]:not([tabindex="-1"])',
|
||||
].join(", ");
|
||||
|
||||
return Array.from(
|
||||
container.querySelectorAll<HTMLElement>(focusableSelectors)
|
||||
).filter((el) => el.offsetParent !== null); // Filter out hidden elements
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle keyboard navigation within modal (focus trap)
|
||||
*/
|
||||
function handleModalKeydown(e: KeyboardEvent, modal: HTMLElement): void {
|
||||
if (e.key === 'Tab') {
|
||||
if (e.key === "Tab") {
|
||||
const focusableElements = getFocusableElements(modal);
|
||||
if (focusableElements.length === 0) return;
|
||||
|
||||
|
||||
const firstElement = focusableElements[0];
|
||||
const lastElement = focusableElements[focusableElements.length - 1];
|
||||
|
||||
|
||||
if (e.shiftKey) {
|
||||
// Shift+Tab: if on first element, wrap to last
|
||||
if (document.activeElement === firstElement) {
|
||||
@@ -80,23 +92,23 @@ function handleModalKeydown(e: KeyboardEvent, modal: HTMLElement): void {
|
||||
* Setup modal functionality
|
||||
*/
|
||||
export function setupModal(): void {
|
||||
const modal = document.getElementById('file-modal');
|
||||
const closeBtn = document.getElementById('close-modal');
|
||||
const copyBtn = document.getElementById('copy-btn');
|
||||
const downloadBtn = document.getElementById('download-btn');
|
||||
const shareBtn = document.getElementById('share-btn');
|
||||
const modal = document.getElementById("file-modal");
|
||||
const closeBtn = document.getElementById("close-modal");
|
||||
const copyBtn = document.getElementById("copy-btn");
|
||||
const downloadBtn = document.getElementById("download-btn");
|
||||
const shareBtn = document.getElementById("share-btn");
|
||||
|
||||
if (!modal) return;
|
||||
|
||||
closeBtn?.addEventListener('click', closeModal);
|
||||
|
||||
modal.addEventListener('click', (e) => {
|
||||
closeBtn?.addEventListener("click", closeModal);
|
||||
|
||||
modal.addEventListener("click", (e) => {
|
||||
if (e.target === modal) closeModal();
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (!modal.classList.contains('hidden')) {
|
||||
if (e.key === 'Escape') {
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (!modal.classList.contains("hidden")) {
|
||||
if (e.key === "Escape") {
|
||||
closeModal();
|
||||
} else {
|
||||
handleModalKeydown(e, modal);
|
||||
@@ -104,32 +116,41 @@ export function setupModal(): void {
|
||||
}
|
||||
});
|
||||
|
||||
copyBtn?.addEventListener('click', async () => {
|
||||
copyBtn?.addEventListener("click", async () => {
|
||||
if (currentFileContent) {
|
||||
const success = await copyToClipboard(currentFileContent);
|
||||
showToast(success ? 'Copied to clipboard!' : 'Failed to copy', success ? 'success' : 'error');
|
||||
showToast(
|
||||
success ? "Copied to clipboard!" : "Failed to copy",
|
||||
success ? "success" : "error"
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
downloadBtn?.addEventListener('click', async () => {
|
||||
downloadBtn?.addEventListener("click", async () => {
|
||||
if (currentFilePath) {
|
||||
const success = await downloadFile(currentFilePath);
|
||||
showToast(success ? 'Download started!' : 'Download failed', success ? 'success' : 'error');
|
||||
showToast(
|
||||
success ? "Download started!" : "Download failed",
|
||||
success ? "success" : "error"
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
shareBtn?.addEventListener('click', async () => {
|
||||
shareBtn?.addEventListener("click", async () => {
|
||||
if (currentFilePath) {
|
||||
const success = await shareFile(currentFilePath);
|
||||
showToast(success ? 'Link copied to clipboard!' : 'Failed to copy link', success ? 'success' : 'error');
|
||||
showToast(
|
||||
success ? "Link copied to clipboard!" : "Failed to copy link",
|
||||
success ? "success" : "error"
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// Setup install dropdown toggle
|
||||
setupInstallDropdown('install-dropdown');
|
||||
setupInstallDropdown("install-dropdown");
|
||||
|
||||
// Handle browser back/forward navigation
|
||||
window.addEventListener('hashchange', handleHashChange);
|
||||
window.addEventListener("hashchange", handleHashChange);
|
||||
|
||||
// Check for deep link on initial load
|
||||
handleHashChange();
|
||||
@@ -140,14 +161,14 @@ export function setupModal(): void {
|
||||
*/
|
||||
function handleHashChange(): void {
|
||||
const hash = window.location.hash;
|
||||
|
||||
if (hash && hash.startsWith('#file=')) {
|
||||
|
||||
if (hash && hash.startsWith("#file=")) {
|
||||
const filePath = decodeURIComponent(hash.slice(6));
|
||||
if (filePath && filePath !== currentFilePath) {
|
||||
const type = getResourceType(filePath);
|
||||
openFileModal(filePath, type, false); // Don't update hash since we're responding to it
|
||||
}
|
||||
} else if (!hash || hash === '#') {
|
||||
} else if (!hash || hash === "#") {
|
||||
// No hash or empty hash - close modal if open
|
||||
if (currentFilePath) {
|
||||
closeModal(false); // Don't update hash since we're responding to it
|
||||
@@ -162,11 +183,15 @@ function updateHash(filePath: string | null): void {
|
||||
if (filePath) {
|
||||
const newHash = `#file=${encodeURIComponent(filePath)}`;
|
||||
if (window.location.hash !== newHash) {
|
||||
history.pushState(null, '', newHash);
|
||||
history.pushState(null, "", newHash);
|
||||
}
|
||||
} else {
|
||||
if (window.location.hash) {
|
||||
history.pushState(null, '', window.location.pathname + window.location.search);
|
||||
history.pushState(
|
||||
null,
|
||||
"",
|
||||
window.location.pathname + window.location.search
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -178,16 +203,19 @@ export function setupInstallDropdown(containerId: string): void {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
const toggle = container.querySelector<HTMLButtonElement>('.install-btn-toggle');
|
||||
const menu = container.querySelector('.install-dropdown-menu');
|
||||
const menuItems = container.querySelectorAll<HTMLAnchorElement>('.install-dropdown-menu a');
|
||||
|
||||
toggle?.addEventListener('click', (e) => {
|
||||
const toggle = container.querySelector<HTMLButtonElement>(
|
||||
".install-btn-toggle"
|
||||
);
|
||||
const menuItems = container.querySelectorAll<HTMLAnchorElement>(
|
||||
".install-dropdown-menu a"
|
||||
);
|
||||
|
||||
toggle?.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const isOpen = container.classList.toggle('open');
|
||||
toggle.setAttribute('aria-expanded', String(isOpen));
|
||||
|
||||
const isOpen = container.classList.toggle("open");
|
||||
toggle.setAttribute("aria-expanded", String(isOpen));
|
||||
|
||||
// Focus first menu item when opening
|
||||
if (isOpen && menuItems.length > 0) {
|
||||
menuItems[0].focus();
|
||||
@@ -195,11 +223,11 @@ export function setupInstallDropdown(containerId: string): void {
|
||||
});
|
||||
|
||||
// Keyboard navigation for dropdown
|
||||
toggle?.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
|
||||
toggle?.addEventListener("keydown", (e) => {
|
||||
if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
container.classList.add('open');
|
||||
toggle.setAttribute('aria-expanded', 'true');
|
||||
container.classList.add("open");
|
||||
toggle.setAttribute("aria-expanded", "true");
|
||||
if (menuItems.length > 0) {
|
||||
menuItems[0].focus();
|
||||
}
|
||||
@@ -208,15 +236,15 @@ export function setupInstallDropdown(containerId: string): void {
|
||||
|
||||
// Keyboard navigation within menu
|
||||
menuItems.forEach((item, index) => {
|
||||
item.addEventListener('keydown', (e) => {
|
||||
item.addEventListener("keydown", (e) => {
|
||||
switch (e.key) {
|
||||
case 'ArrowDown':
|
||||
case "ArrowDown":
|
||||
e.preventDefault();
|
||||
if (index < menuItems.length - 1) {
|
||||
menuItems[index + 1].focus();
|
||||
}
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
case "ArrowUp":
|
||||
e.preventDefault();
|
||||
if (index > 0) {
|
||||
menuItems[index - 1].focus();
|
||||
@@ -224,34 +252,34 @@ export function setupInstallDropdown(containerId: string): void {
|
||||
toggle?.focus();
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
case "Escape":
|
||||
e.preventDefault();
|
||||
container.classList.remove('open');
|
||||
toggle?.setAttribute('aria-expanded', 'false');
|
||||
container.classList.remove("open");
|
||||
toggle?.setAttribute("aria-expanded", "false");
|
||||
toggle?.focus();
|
||||
break;
|
||||
case 'Tab':
|
||||
case "Tab":
|
||||
// Close menu on tab out
|
||||
container.classList.remove('open');
|
||||
toggle?.setAttribute('aria-expanded', 'false');
|
||||
container.classList.remove("open");
|
||||
toggle?.setAttribute("aria-expanded", "false");
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
document.addEventListener("click", (e) => {
|
||||
if (!container.contains(e.target as Node)) {
|
||||
container.classList.remove('open');
|
||||
toggle?.setAttribute('aria-expanded', 'false');
|
||||
container.classList.remove("open");
|
||||
toggle?.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
});
|
||||
|
||||
// Close dropdown when clicking a menu item
|
||||
container.querySelectorAll('.install-dropdown-menu a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
container.classList.remove('open');
|
||||
toggle?.setAttribute('aria-expanded', 'false');
|
||||
container.querySelectorAll(".install-dropdown-menu a").forEach((link) => {
|
||||
link.addEventListener("click", () => {
|
||||
container.classList.remove("open");
|
||||
toggle?.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -263,84 +291,103 @@ export function setupInstallDropdown(containerId: string): void {
|
||||
* @param updateUrl - Whether to update the URL hash (default: true)
|
||||
* @param trigger - The element that triggered the modal (for focus return)
|
||||
*/
|
||||
export async function openFileModal(filePath: string, type: string, updateUrl = true, trigger?: HTMLElement): Promise<void> {
|
||||
const modal = document.getElementById('file-modal');
|
||||
const title = document.getElementById('modal-title');
|
||||
const modalContent = document.getElementById('modal-content');
|
||||
const contentEl = modalContent?.querySelector('code');
|
||||
const installDropdown = document.getElementById('install-dropdown');
|
||||
const installBtnMain = document.getElementById('install-btn-main') as HTMLAnchorElement | null;
|
||||
const installVscode = document.getElementById('install-vscode') as HTMLAnchorElement | null;
|
||||
const installInsiders = document.getElementById('install-insiders') as HTMLAnchorElement | null;
|
||||
const copyBtn = document.getElementById('copy-btn');
|
||||
const downloadBtn = document.getElementById('download-btn');
|
||||
const closeBtn = document.getElementById('close-modal');
|
||||
export async function openFileModal(
|
||||
filePath: string,
|
||||
type: string,
|
||||
updateUrl = true,
|
||||
trigger?: HTMLElement
|
||||
): Promise<void> {
|
||||
const modal = document.getElementById("file-modal");
|
||||
const title = document.getElementById("modal-title");
|
||||
const modalContent = document.getElementById("modal-content");
|
||||
const contentEl = modalContent?.querySelector("code");
|
||||
const installDropdown = document.getElementById("install-dropdown");
|
||||
const installBtnMain = document.getElementById(
|
||||
"install-btn-main"
|
||||
) as HTMLAnchorElement | null;
|
||||
const installVscode = document.getElementById(
|
||||
"install-vscode"
|
||||
) as HTMLAnchorElement | null;
|
||||
const installInsiders = document.getElementById(
|
||||
"install-insiders"
|
||||
) as HTMLAnchorElement | null;
|
||||
const copyBtn = document.getElementById("copy-btn");
|
||||
const downloadBtn = document.getElementById("download-btn");
|
||||
const closeBtn = document.getElementById("close-modal");
|
||||
|
||||
if (!modal || !title || !modalContent) return;
|
||||
|
||||
currentFilePath = filePath;
|
||||
currentFileType = type;
|
||||
|
||||
|
||||
// Track trigger element for focus return
|
||||
triggerElement = trigger || document.activeElement as HTMLElement;
|
||||
|
||||
triggerElement = trigger || (document.activeElement as HTMLElement);
|
||||
|
||||
// Update URL for deep linking
|
||||
if (updateUrl) {
|
||||
updateHash(filePath);
|
||||
}
|
||||
|
||||
|
||||
// Show modal with loading state
|
||||
title.textContent = filePath.split('/').pop() || filePath;
|
||||
modal.classList.remove('hidden');
|
||||
|
||||
title.textContent = filePath.split("/").pop() || filePath;
|
||||
modal.classList.remove("hidden");
|
||||
|
||||
// Set focus to close button for accessibility
|
||||
setTimeout(() => {
|
||||
closeBtn?.focus();
|
||||
}, 0);
|
||||
|
||||
// Handle collections differently - show as item list
|
||||
if (type === 'collection') {
|
||||
await openCollectionModal(filePath, title, modalContent, installDropdown, copyBtn, downloadBtn);
|
||||
if (type === "collection") {
|
||||
await openCollectionModal(
|
||||
filePath,
|
||||
title,
|
||||
modalContent,
|
||||
installDropdown,
|
||||
copyBtn,
|
||||
downloadBtn
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Regular file modal
|
||||
if (contentEl) {
|
||||
contentEl.textContent = 'Loading...';
|
||||
contentEl.textContent = "Loading...";
|
||||
}
|
||||
|
||||
|
||||
// Show copy/download buttons for regular files
|
||||
if (copyBtn) copyBtn.style.display = 'inline-flex';
|
||||
if (downloadBtn) downloadBtn.style.display = 'inline-flex';
|
||||
|
||||
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')) {
|
||||
if (!modalContent.querySelector("pre")) {
|
||||
modalContent.innerHTML = '<pre id="modal-content"><code></code></pre>';
|
||||
}
|
||||
const codeEl = modalContent.querySelector('code');
|
||||
const codeEl = modalContent.querySelector("code");
|
||||
|
||||
// Setup install dropdown
|
||||
const vscodeUrl = getVSCodeInstallUrl(type, filePath, false);
|
||||
const insidersUrl = getVSCodeInstallUrl(type, filePath, true);
|
||||
|
||||
|
||||
if (vscodeUrl && installDropdown) {
|
||||
installDropdown.style.display = 'inline-flex';
|
||||
installDropdown.classList.remove('open');
|
||||
installDropdown.style.display = "inline-flex";
|
||||
installDropdown.classList.remove("open");
|
||||
if (installBtnMain) installBtnMain.href = vscodeUrl;
|
||||
if (installVscode) installVscode.href = vscodeUrl;
|
||||
if (installInsiders) installInsiders.href = insidersUrl || '#';
|
||||
if (installInsiders) installInsiders.href = insidersUrl || "#";
|
||||
} else if (installDropdown) {
|
||||
installDropdown.style.display = 'none';
|
||||
installDropdown.style.display = "none";
|
||||
}
|
||||
|
||||
// Fetch and display content
|
||||
const fileContent = await fetchFileContent(filePath);
|
||||
currentFileContent = fileContent;
|
||||
|
||||
|
||||
if (fileContent && codeEl) {
|
||||
codeEl.textContent = fileContent;
|
||||
} else if (codeEl) {
|
||||
codeEl.textContent = 'Failed to load file content. Click the button below to view on GitHub.';
|
||||
codeEl.textContent =
|
||||
"Failed to load file content. Click the button below to view on GitHub.";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -356,27 +403,30 @@ async function openCollectionModal(
|
||||
downloadBtn: HTMLElement | null
|
||||
): Promise<void> {
|
||||
// Hide install dropdown and copy/download for collections
|
||||
if (installDropdown) installDropdown.style.display = 'none';
|
||||
if (copyBtn) copyBtn.style.display = 'none';
|
||||
if (downloadBtn) downloadBtn.style.display = 'none';
|
||||
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>';
|
||||
modalContent.innerHTML =
|
||||
'<div class="collection-loading">Loading collection...</div>';
|
||||
|
||||
// Load collections data if not cached
|
||||
if (!collectionsCache) {
|
||||
collectionsCache = await fetchData<CollectionsData>('collections.json');
|
||||
collectionsCache = await fetchData<CollectionsData>("collections.json");
|
||||
}
|
||||
|
||||
if (!collectionsCache) {
|
||||
modalContent.innerHTML = '<div class="collection-error">Failed to load collection data.</div>';
|
||||
modalContent.innerHTML =
|
||||
'<div class="collection-error">Failed to load collection data.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Find the collection
|
||||
const collection = collectionsCache.items.find(c => c.path === filePath);
|
||||
const collection = collectionsCache.items.find((c) => c.path === filePath);
|
||||
if (!collection) {
|
||||
modalContent.innerHTML = '<div class="collection-error">Collection not found.</div>';
|
||||
modalContent.innerHTML =
|
||||
'<div class="collection-error">Collection not found.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -386,33 +436,57 @@ async function openCollectionModal(
|
||||
// Render collection view
|
||||
modalContent.innerHTML = `
|
||||
<div class="collection-view">
|
||||
<div class="collection-description">${escapeHtml(collection.description || '')}</div>
|
||||
${collection.tags && collection.tags.length > 0 ? `
|
||||
<div class="collection-description">${escapeHtml(
|
||||
collection.description || ""
|
||||
)}</div>
|
||||
${
|
||||
collection.tags && collection.tags.length > 0
|
||||
? `
|
||||
<div class="collection-tags">
|
||||
${collection.tags.map(t => `<span class="resource-tag">${escapeHtml(t)}</span>`).join('')}
|
||||
${collection.tags
|
||||
.map((t) => `<span class="resource-tag">${escapeHtml(t)}</span>`)
|
||||
.join("")}
|
||||
</div>
|
||||
` : ''}
|
||||
`
|
||||
: ""
|
||||
}
|
||||
<div class="collection-items-header">
|
||||
<strong>${collection.items.length} items in this collection</strong>
|
||||
</div>
|
||||
<div class="collection-items-list">
|
||||
${collection.items.map(item => `
|
||||
<div class="collection-item" data-path="${escapeHtml(item.path)}" data-type="${escapeHtml(item.kind)}">
|
||||
<span class="collection-item-icon">${getResourceIcon(item.kind)}</span>
|
||||
${collection.items
|
||||
.map(
|
||||
(item) => `
|
||||
<div class="collection-item" data-path="${escapeHtml(
|
||||
item.path
|
||||
)}" data-type="${escapeHtml(item.kind)}">
|
||||
<span class="collection-item-icon">${getResourceIcon(
|
||||
item.kind
|
||||
)}</span>
|
||||
<div class="collection-item-info">
|
||||
<div class="collection-item-name">${escapeHtml(item.path.split('/').pop() || item.path)}</div>
|
||||
${item.usage ? `<div class="collection-item-usage">${escapeHtml(item.usage)}</div>` : ''}
|
||||
<div class="collection-item-name">${escapeHtml(
|
||||
item.path.split("/").pop() || item.path
|
||||
)}</div>
|
||||
${
|
||||
item.usage
|
||||
? `<div class="collection-item-usage">${escapeHtml(
|
||||
item.usage
|
||||
)}</div>`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
<span class="collection-item-type">${escapeHtml(item.kind)}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add click handlers to collection items
|
||||
modalContent.querySelectorAll('.collection-item').forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
modalContent.querySelectorAll(".collection-item").forEach((el) => {
|
||||
el.addEventListener("click", () => {
|
||||
const path = (el as HTMLElement).dataset.path;
|
||||
const itemType = (el as HTMLElement).dataset.type;
|
||||
if (path && itemType) {
|
||||
@@ -427,26 +501,30 @@ async function openCollectionModal(
|
||||
* @param updateUrl - Whether to update the URL hash (default: true)
|
||||
*/
|
||||
export function closeModal(updateUrl = true): void {
|
||||
const modal = document.getElementById('file-modal');
|
||||
const installDropdown = document.getElementById('install-dropdown');
|
||||
|
||||
const modal = document.getElementById("file-modal");
|
||||
const installDropdown = document.getElementById("install-dropdown");
|
||||
|
||||
if (modal) {
|
||||
modal.classList.add('hidden');
|
||||
modal.classList.add("hidden");
|
||||
}
|
||||
if (installDropdown) {
|
||||
installDropdown.classList.remove('open');
|
||||
installDropdown.classList.remove("open");
|
||||
}
|
||||
|
||||
|
||||
// Update URL for deep linking
|
||||
if (updateUrl) {
|
||||
updateHash(null);
|
||||
}
|
||||
|
||||
|
||||
// Return focus to trigger element
|
||||
if (triggerElement && typeof triggerElement.focus === 'function') {
|
||||
if (
|
||||
triggerElement &&
|
||||
triggerElement.isConnected &&
|
||||
typeof triggerElement.focus === "function"
|
||||
) {
|
||||
triggerElement.focus();
|
||||
}
|
||||
|
||||
|
||||
currentFilePath = null;
|
||||
currentFileContent = null;
|
||||
currentFileType = null;
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
* Samples/Cookbook page functionality
|
||||
*/
|
||||
|
||||
import { FuzzySearch, type SearchableItem } from '../search';
|
||||
import { fetchData, escapeHtml } from '../utils';
|
||||
import { createChoices, getChoicesValues, type Choices } from '../choices';
|
||||
import { FuzzySearch, type SearchableItem } from "../search";
|
||||
import { fetchData, escapeHtml } from "../utils";
|
||||
import { createChoices, getChoicesValues, type Choices } from "../choices";
|
||||
|
||||
// Types
|
||||
interface Language {
|
||||
@@ -59,36 +59,44 @@ let tagChoices: Choices | null = null;
|
||||
* Initialize the samples page
|
||||
*/
|
||||
export async function initSamplesPage(): Promise<void> {
|
||||
// Load samples data
|
||||
samplesData = await fetchData<SamplesData>('samples.json');
|
||||
|
||||
if (!samplesData || samplesData.cookbooks.length === 0) {
|
||||
try {
|
||||
// Load samples data
|
||||
samplesData = await fetchData<SamplesData>("samples.json");
|
||||
|
||||
if (!samplesData || samplesData.cookbooks.length === 0) {
|
||||
showEmptyState();
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize search with all recipes
|
||||
const allRecipes = samplesData.cookbooks.flatMap((cookbook) =>
|
||||
cookbook.recipes.map(
|
||||
(recipe) =>
|
||||
({
|
||||
...recipe,
|
||||
title: recipe.name,
|
||||
cookbookId: cookbook.id,
|
||||
} as SearchableItem & { cookbookId: string })
|
||||
)
|
||||
);
|
||||
search = new FuzzySearch(allRecipes);
|
||||
|
||||
// Setup UI
|
||||
setupFilters();
|
||||
setupSearch();
|
||||
renderCookbooks();
|
||||
updateResultsCount();
|
||||
} catch (error) {
|
||||
console.error("Failed to initialize samples page:", error);
|
||||
showEmptyState();
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize search with all recipes
|
||||
const allRecipes = samplesData.cookbooks.flatMap(cookbook =>
|
||||
cookbook.recipes.map(recipe => ({
|
||||
...recipe,
|
||||
title: recipe.name,
|
||||
cookbookId: cookbook.id
|
||||
} as SearchableItem & { cookbookId: string }))
|
||||
);
|
||||
search = new FuzzySearch(allRecipes);
|
||||
|
||||
// Setup UI
|
||||
setupFilters();
|
||||
setupSearch();
|
||||
renderCookbooks();
|
||||
updateResultsCount();
|
||||
}
|
||||
|
||||
/**
|
||||
* Show empty state when no cookbooks are available
|
||||
*/
|
||||
function showEmptyState(): void {
|
||||
const container = document.getElementById('samples-list');
|
||||
const container = document.getElementById("samples-list");
|
||||
if (container) {
|
||||
container.innerHTML = `
|
||||
<div class="empty-state">
|
||||
@@ -97,10 +105,10 @@ function showEmptyState(): void {
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
// Hide filters
|
||||
const filtersBar = document.getElementById('filters-bar');
|
||||
if (filtersBar) filtersBar.style.display = 'none';
|
||||
const filtersBar = document.getElementById("filters-bar");
|
||||
if (filtersBar) filtersBar.style.display = "none";
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -110,12 +118,14 @@ function setupFilters(): void {
|
||||
if (!samplesData) return;
|
||||
|
||||
// Language filter
|
||||
const languageSelect = document.getElementById('filter-language') as HTMLSelectElement;
|
||||
const languageSelect = document.getElementById(
|
||||
"filter-language"
|
||||
) as HTMLSelectElement;
|
||||
if (languageSelect) {
|
||||
// Get unique languages across all cookbooks
|
||||
const languages = new Map<string, Language>();
|
||||
samplesData.cookbooks.forEach(cookbook => {
|
||||
cookbook.languages.forEach(lang => {
|
||||
samplesData.cookbooks.forEach((cookbook) => {
|
||||
cookbook.languages.forEach((lang) => {
|
||||
if (!languages.has(lang.id)) {
|
||||
languages.set(lang.id, lang);
|
||||
}
|
||||
@@ -124,13 +134,13 @@ function setupFilters(): void {
|
||||
|
||||
languageSelect.innerHTML = '<option value="">All Languages</option>';
|
||||
languages.forEach((lang, id) => {
|
||||
const option = document.createElement('option');
|
||||
const option = document.createElement("option");
|
||||
option.value = id;
|
||||
option.textContent = `${lang.icon} ${lang.name}`;
|
||||
languageSelect.appendChild(option);
|
||||
});
|
||||
|
||||
languageSelect.addEventListener('change', () => {
|
||||
languageSelect.addEventListener("change", () => {
|
||||
selectedLanguage = languageSelect.value || null;
|
||||
renderCookbooks();
|
||||
updateResultsCount();
|
||||
@@ -138,18 +148,18 @@ function setupFilters(): void {
|
||||
}
|
||||
|
||||
// Tag filter (multi-select with Choices.js)
|
||||
const tagSelect = document.getElementById('filter-tag') as HTMLSelectElement;
|
||||
const tagSelect = document.getElementById("filter-tag") as HTMLSelectElement;
|
||||
if (tagSelect && samplesData.filters.tags.length > 0) {
|
||||
// Initialize Choices.js
|
||||
tagChoices = createChoices('#filter-tag', { placeholderValue: 'All Tags' });
|
||||
tagChoices = createChoices("#filter-tag", { placeholderValue: "All Tags" });
|
||||
tagChoices.setChoices(
|
||||
samplesData.filters.tags.map(tag => ({ value: tag, label: tag })),
|
||||
'value',
|
||||
'label',
|
||||
samplesData.filters.tags.map((tag) => ({ value: tag, label: tag })),
|
||||
"value",
|
||||
"label",
|
||||
true
|
||||
);
|
||||
|
||||
tagSelect.addEventListener('change', () => {
|
||||
tagSelect.addEventListener("change", () => {
|
||||
selectedTags = getChoicesValues(tagChoices!);
|
||||
renderCookbooks();
|
||||
updateResultsCount();
|
||||
@@ -157,19 +167,21 @@ function setupFilters(): void {
|
||||
}
|
||||
|
||||
// Clear filters button
|
||||
const clearBtn = document.getElementById('clear-filters');
|
||||
clearBtn?.addEventListener('click', clearFilters);
|
||||
const clearBtn = document.getElementById("clear-filters");
|
||||
clearBtn?.addEventListener("click", clearFilters);
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup search functionality
|
||||
*/
|
||||
function setupSearch(): void {
|
||||
const searchInput = document.getElementById('search-input') as HTMLInputElement;
|
||||
const searchInput = document.getElementById(
|
||||
"search-input"
|
||||
) as HTMLInputElement;
|
||||
if (!searchInput) return;
|
||||
|
||||
let debounceTimer: number;
|
||||
searchInput.addEventListener('input', () => {
|
||||
searchInput.addEventListener("input", () => {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = window.setTimeout(() => {
|
||||
renderCookbooks();
|
||||
@@ -185,16 +197,20 @@ function clearFilters(): void {
|
||||
selectedLanguage = null;
|
||||
selectedTags = [];
|
||||
|
||||
const languageSelect = document.getElementById('filter-language') as HTMLSelectElement;
|
||||
if (languageSelect) languageSelect.value = '';
|
||||
const languageSelect = document.getElementById(
|
||||
"filter-language"
|
||||
) as HTMLSelectElement;
|
||||
if (languageSelect) languageSelect.value = "";
|
||||
|
||||
// Clear Choices.js selection
|
||||
if (tagChoices) {
|
||||
tagChoices.removeActiveItems();
|
||||
}
|
||||
|
||||
const searchInput = document.getElementById('search-input') as HTMLInputElement;
|
||||
if (searchInput) searchInput.value = '';
|
||||
const searchInput = document.getElementById(
|
||||
"search-input"
|
||||
) as HTMLInputElement;
|
||||
if (searchInput) searchInput.value = "";
|
||||
|
||||
renderCookbooks();
|
||||
updateResultsCount();
|
||||
@@ -203,44 +219,53 @@ function clearFilters(): void {
|
||||
/**
|
||||
* Get filtered recipes
|
||||
*/
|
||||
function getFilteredRecipes(): { cookbook: Cookbook; recipe: Recipe; highlighted?: string }[] {
|
||||
function getFilteredRecipes(): {
|
||||
cookbook: Cookbook;
|
||||
recipe: Recipe;
|
||||
highlighted?: string;
|
||||
}[] {
|
||||
if (!samplesData || !search) return [];
|
||||
|
||||
const searchInput = document.getElementById('search-input') as HTMLInputElement;
|
||||
const query = searchInput?.value.trim() || '';
|
||||
const searchInput = document.getElementById(
|
||||
"search-input"
|
||||
) as HTMLInputElement;
|
||||
const query = searchInput?.value.trim() || "";
|
||||
|
||||
let results: { cookbook: Cookbook; recipe: Recipe; highlighted?: string }[] = [];
|
||||
let results: { cookbook: Cookbook; recipe: Recipe; highlighted?: string }[] =
|
||||
[];
|
||||
|
||||
if (query) {
|
||||
// Use fuzzy search - returns SearchableItem[] directly
|
||||
const searchResults = search.search(query);
|
||||
results = searchResults.map(item => {
|
||||
results = searchResults.map((item) => {
|
||||
const recipe = item as SearchableItem & { cookbookId: string };
|
||||
const cookbook = samplesData!.cookbooks.find(c => c.id === recipe.cookbookId)!;
|
||||
const cookbook = samplesData!.cookbooks.find(
|
||||
(c) => c.id === recipe.cookbookId
|
||||
)!;
|
||||
return {
|
||||
cookbook,
|
||||
recipe: recipe as unknown as Recipe,
|
||||
highlighted: search!.highlight(recipe.title, query)
|
||||
highlighted: search!.highlight(recipe.title, query),
|
||||
};
|
||||
});
|
||||
} else {
|
||||
// No search query - return all recipes
|
||||
results = samplesData.cookbooks.flatMap(cookbook =>
|
||||
cookbook.recipes.map(recipe => ({ cookbook, recipe }))
|
||||
results = samplesData.cookbooks.flatMap((cookbook) =>
|
||||
cookbook.recipes.map((recipe) => ({ cookbook, recipe }))
|
||||
);
|
||||
}
|
||||
|
||||
// Apply language filter
|
||||
if (selectedLanguage) {
|
||||
results = results.filter(({ recipe }) =>
|
||||
recipe.variants[selectedLanguage!]
|
||||
results = results.filter(
|
||||
({ recipe }) => recipe.variants[selectedLanguage!]
|
||||
);
|
||||
}
|
||||
|
||||
// Apply tag filter
|
||||
if (selectedTags.length > 0) {
|
||||
results = results.filter(({ recipe }) =>
|
||||
selectedTags.some(tag => recipe.tags.includes(tag))
|
||||
selectedTags.some((tag) => recipe.tags.includes(tag))
|
||||
);
|
||||
}
|
||||
|
||||
@@ -251,7 +276,7 @@ function getFilteredRecipes(): { cookbook: Cookbook; recipe: Recipe; highlighted
|
||||
* Render cookbooks and recipes
|
||||
*/
|
||||
function renderCookbooks(): void {
|
||||
const container = document.getElementById('samples-list');
|
||||
const container = document.getElementById("samples-list");
|
||||
if (!container || !samplesData) return;
|
||||
|
||||
const filteredResults = getFilteredRecipes();
|
||||
@@ -267,7 +292,10 @@ function renderCookbooks(): void {
|
||||
}
|
||||
|
||||
// Group by cookbook
|
||||
const byCookbook = new Map<string, { cookbook: Cookbook; recipes: { recipe: Recipe; highlighted?: string }[] }>();
|
||||
const byCookbook = new Map<
|
||||
string,
|
||||
{ cookbook: Cookbook; recipes: { recipe: Recipe; highlighted?: string }[] }
|
||||
>();
|
||||
filteredResults.forEach(({ cookbook, recipe, highlighted }) => {
|
||||
if (!byCookbook.has(cookbook.id)) {
|
||||
byCookbook.set(cookbook.id, { cookbook, recipes: [] });
|
||||
@@ -275,7 +303,7 @@ function renderCookbooks(): void {
|
||||
byCookbook.get(cookbook.id)!.recipes.push({ recipe, highlighted });
|
||||
});
|
||||
|
||||
let html = '';
|
||||
let html = "";
|
||||
byCookbook.forEach(({ cookbook, recipes }) => {
|
||||
html += renderCookbookSection(cookbook, recipes);
|
||||
});
|
||||
@@ -289,18 +317,27 @@ function renderCookbooks(): void {
|
||||
/**
|
||||
* Render a cookbook section
|
||||
*/
|
||||
function renderCookbookSection(cookbook: Cookbook, recipes: { recipe: Recipe; highlighted?: string }[]): string {
|
||||
const languageTabs = cookbook.languages.map(lang => `
|
||||
<button class="lang-tab${selectedLanguage === lang.id ? ' active' : ''}"
|
||||
data-lang="${lang.id}"
|
||||
function renderCookbookSection(
|
||||
cookbook: Cookbook,
|
||||
recipes: { recipe: Recipe; highlighted?: string }[]
|
||||
): string {
|
||||
const languageTabs = cookbook.languages
|
||||
.map(
|
||||
(lang) => `
|
||||
<button class="lang-tab${selectedLanguage === lang.id ? " active" : ""}"
|
||||
data-lang="${lang.id}"
|
||||
title="${lang.name}">
|
||||
${lang.icon}
|
||||
</button>
|
||||
`).join('');
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
|
||||
const recipeCards = recipes.map(({ recipe, highlighted }) =>
|
||||
renderRecipeCard(cookbook, recipe, highlighted)
|
||||
).join('');
|
||||
const recipeCards = recipes
|
||||
.map(({ recipe, highlighted }) =>
|
||||
renderRecipeCard(cookbook, recipe, highlighted)
|
||||
)
|
||||
.join("");
|
||||
|
||||
return `
|
||||
<div class="cookbook-section" data-cookbook="${cookbook.id}">
|
||||
@@ -323,25 +360,36 @@ function renderCookbookSection(cookbook: Cookbook, recipes: { recipe: Recipe; hi
|
||||
/**
|
||||
* Render a recipe card
|
||||
*/
|
||||
function renderRecipeCard(cookbook: Cookbook, recipe: Recipe, highlightedName?: string): string {
|
||||
function renderRecipeCard(
|
||||
cookbook: Cookbook,
|
||||
recipe: Recipe,
|
||||
highlightedName?: string
|
||||
): string {
|
||||
const recipeKey = `${cookbook.id}-${recipe.id}`;
|
||||
const isExpanded = expandedRecipes.has(recipeKey);
|
||||
|
||||
|
||||
// Determine which language to show
|
||||
const displayLang = selectedLanguage || cookbook.languages[0]?.id || 'nodejs';
|
||||
const displayLang = selectedLanguage || cookbook.languages[0]?.id || "nodejs";
|
||||
const variant = recipe.variants[displayLang];
|
||||
|
||||
const tags = recipe.tags.map(tag =>
|
||||
`<span class="recipe-tag">${escapeHtml(tag)}</span>`
|
||||
).join('');
|
||||
|
||||
const tags = recipe.tags
|
||||
.map((tag) => `<span class="recipe-tag">${escapeHtml(tag)}</span>`)
|
||||
.join("");
|
||||
|
||||
const langIndicators = cookbook.languages
|
||||
.filter(lang => recipe.variants[lang.id])
|
||||
.map(lang => `<span class="lang-indicator" title="${lang.name}">${lang.icon}</span>`)
|
||||
.join('');
|
||||
.filter((lang) => recipe.variants[lang.id])
|
||||
.map(
|
||||
(lang) =>
|
||||
`<span class="lang-indicator" title="${lang.name}">${lang.icon}</span>`
|
||||
)
|
||||
.join("");
|
||||
|
||||
return `
|
||||
<div class="recipe-card${isExpanded ? ' expanded' : ''}" data-recipe="${recipeKey}" data-cookbook="${cookbook.id}" data-recipe-id="${recipe.id}">
|
||||
<div class="recipe-card${
|
||||
isExpanded ? " expanded" : ""
|
||||
}" data-recipe="${recipeKey}" data-cookbook="${
|
||||
cookbook.id
|
||||
}" data-recipe-id="${recipe.id}">
|
||||
<div class="recipe-header">
|
||||
<h3>${highlightedName || escapeHtml(recipe.name)}</h3>
|
||||
<div class="recipe-langs">${langIndicators}</div>
|
||||
@@ -349,29 +397,41 @@ function renderRecipeCard(cookbook: Cookbook, recipe: Recipe, highlightedName?:
|
||||
<p class="recipe-description">${escapeHtml(recipe.description)}</p>
|
||||
<div class="recipe-tags">${tags}</div>
|
||||
<div class="recipe-actions">
|
||||
${variant ? `
|
||||
<button class="btn btn-secondary btn-small view-recipe-btn" data-doc="${variant.doc}">
|
||||
${
|
||||
variant
|
||||
? `
|
||||
<button class="btn btn-secondary btn-small view-recipe-btn" data-doc="${
|
||||
variant.doc
|
||||
}">
|
||||
<svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true">
|
||||
<path d="M1 2.75A.75.75 0 0 1 1.75 2h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75zm0 5A.75.75 0 0 1 1.75 7h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 7.75zM1.75 12h12.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1 0-1.5z"/>
|
||||
</svg>
|
||||
View Recipe
|
||||
</button>
|
||||
${variant.example ? `
|
||||
${
|
||||
variant.example
|
||||
? `
|
||||
<button class="btn btn-secondary btn-small view-example-btn" data-example="${variant.example}">
|
||||
<svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true">
|
||||
<path d="M4.72 3.22a.75.75 0 0 1 1.06 0l3.5 3.5a.75.75 0 0 1 0 1.06l-3.5 3.5a.75.75 0 0 1-1.06-1.06L7.69 7.5 4.72 4.28a.75.75 0 0 1 0-1.06zm6.25 1.06L10.22 5l.75.75-2.25 2.25 2.25 2.25-.75.75-.75-.72L11.97 7.5z"/>
|
||||
</svg>
|
||||
View Example
|
||||
</button>
|
||||
` : ''}
|
||||
<a href="https://github.com/github/awesome-copilot/blob/main/${variant.doc}"
|
||||
`
|
||||
: ""
|
||||
}
|
||||
<a href="https://github.com/github/awesome-copilot/blob/main/${
|
||||
variant.doc
|
||||
}"
|
||||
class="btn btn-secondary btn-small" target="_blank" rel="noopener">
|
||||
<svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true">
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
` : '<span class="no-variant">Not available for selected language</span>'}
|
||||
`
|
||||
: '<span class="no-variant">Not available for selected language</span>'
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -382,35 +442,37 @@ function renderRecipeCard(cookbook: Cookbook, recipe: Recipe, highlightedName?:
|
||||
*/
|
||||
function setupRecipeListeners(): void {
|
||||
// View recipe buttons
|
||||
document.querySelectorAll('.view-recipe-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async (e) => {
|
||||
document.querySelectorAll(".view-recipe-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", async (e) => {
|
||||
e.stopPropagation();
|
||||
const docPath = (btn as HTMLElement).dataset.doc;
|
||||
if (docPath) {
|
||||
await showRecipeContent(docPath, 'recipe');
|
||||
await showRecipeContent(docPath, "recipe");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// View example buttons
|
||||
document.querySelectorAll('.view-example-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async (e) => {
|
||||
document.querySelectorAll(".view-example-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", async (e) => {
|
||||
e.stopPropagation();
|
||||
const examplePath = (btn as HTMLElement).dataset.example;
|
||||
if (examplePath) {
|
||||
await showRecipeContent(examplePath, 'example');
|
||||
await showRecipeContent(examplePath, "example");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Language tab clicks
|
||||
document.querySelectorAll('.lang-tab').forEach(tab => {
|
||||
tab.addEventListener('click', (e) => {
|
||||
document.querySelectorAll(".lang-tab").forEach((tab) => {
|
||||
tab.addEventListener("click", (e) => {
|
||||
const langId = (tab as HTMLElement).dataset.lang;
|
||||
if (langId) {
|
||||
selectedLanguage = langId;
|
||||
// Update language filter select
|
||||
const languageSelect = document.getElementById('filter-language') as HTMLSelectElement;
|
||||
const languageSelect = document.getElementById(
|
||||
"filter-language"
|
||||
) as HTMLSelectElement;
|
||||
if (languageSelect) languageSelect.value = langId;
|
||||
renderCookbooks();
|
||||
updateResultsCount();
|
||||
@@ -422,9 +484,12 @@ function setupRecipeListeners(): void {
|
||||
/**
|
||||
* Show recipe/example content in modal
|
||||
*/
|
||||
async function showRecipeContent(filePath: string, type: 'recipe' | 'example'): Promise<void> {
|
||||
async function showRecipeContent(
|
||||
filePath: string,
|
||||
type: "recipe" | "example"
|
||||
): Promise<void> {
|
||||
// Use existing modal infrastructure
|
||||
const { openFileModal } = await import('../modal');
|
||||
const { openFileModal } = await import("../modal");
|
||||
await openFileModal(filePath, type);
|
||||
}
|
||||
|
||||
@@ -432,23 +497,25 @@ async function showRecipeContent(filePath: string, type: 'recipe' | 'example'):
|
||||
* Update results count display
|
||||
*/
|
||||
function updateResultsCount(): void {
|
||||
const resultsCount = document.getElementById('results-count');
|
||||
const resultsCount = document.getElementById("results-count");
|
||||
if (!resultsCount || !samplesData) return;
|
||||
|
||||
const filtered = getFilteredRecipes();
|
||||
const total = samplesData.totalRecipes;
|
||||
|
||||
|
||||
if (filtered.length === total) {
|
||||
resultsCount.textContent = `${total} recipe${total !== 1 ? 's' : ''}`;
|
||||
resultsCount.textContent = `${total} recipe${total !== 1 ? "s" : ""}`;
|
||||
} else {
|
||||
resultsCount.textContent = `${filtered.length} of ${total} recipe${total !== 1 ? 's' : ''}`;
|
||||
resultsCount.textContent = `${filtered.length} of ${total} recipe${
|
||||
total !== 1 ? "s" : ""
|
||||
}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-initialize when DOM is ready
|
||||
if (typeof document !== 'undefined') {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => initSamplesPage());
|
||||
if (typeof document !== "undefined") {
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", () => initSamplesPage());
|
||||
} else {
|
||||
initSamplesPage();
|
||||
}
|
||||
|
||||
@@ -1,11 +1,18 @@
|
||||
/**
|
||||
* Skills page functionality
|
||||
*/
|
||||
import { createChoices, getChoicesValues, type Choices } from '../choices';
|
||||
import { FuzzySearch, SearchItem } from '../search';
|
||||
import { fetchData, debounce, escapeHtml, getGitHubUrl, getRawGitHubUrl } from '../utils';
|
||||
import { setupModal, openFileModal } from '../modal';
|
||||
import JSZip from '../jszip';
|
||||
import { createChoices, getChoicesValues, type Choices } from "../choices";
|
||||
import { FuzzySearch, SearchItem } from "../search";
|
||||
import {
|
||||
fetchData,
|
||||
debounce,
|
||||
escapeHtml,
|
||||
getGitHubUrl,
|
||||
getRawGitHubUrl,
|
||||
showToast,
|
||||
} from "../utils";
|
||||
import { setupModal, openFileModal } from "../modal";
|
||||
import JSZip from "../jszip";
|
||||
|
||||
interface SkillFile {
|
||||
name: string;
|
||||
@@ -29,86 +36,120 @@ interface SkillsData {
|
||||
};
|
||||
}
|
||||
|
||||
const resourceType = 'skill';
|
||||
const resourceType = "skill";
|
||||
let allItems: Skill[] = [];
|
||||
let search = new FuzzySearch<Skill>();
|
||||
let categorySelect: Choices;
|
||||
let currentFilters = {
|
||||
categories: [] as string[],
|
||||
hasAssets: false
|
||||
hasAssets: false,
|
||||
};
|
||||
|
||||
function applyFiltersAndRender(): void {
|
||||
const searchInput = document.getElementById('search-input') as HTMLInputElement;
|
||||
const countEl = document.getElementById('results-count');
|
||||
const query = searchInput?.value || '';
|
||||
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.categories.length > 0) {
|
||||
results = results.filter(item => currentFilters.categories.includes(item.category));
|
||||
results = results.filter((item) =>
|
||||
currentFilters.categories.includes(item.category)
|
||||
);
|
||||
}
|
||||
if (currentFilters.hasAssets) {
|
||||
results = results.filter(item => item.hasAssets);
|
||||
results = results.filter((item) => item.hasAssets);
|
||||
}
|
||||
|
||||
renderItems(results, query);
|
||||
const activeFilters: string[] = [];
|
||||
if (currentFilters.categories.length > 0) activeFilters.push(`${currentFilters.categories.length} categor${currentFilters.categories.length > 1 ? 'ies' : 'y'}`);
|
||||
if (currentFilters.hasAssets) activeFilters.push('has assets');
|
||||
if (currentFilters.categories.length > 0)
|
||||
activeFilters.push(
|
||||
`${currentFilters.categories.length} categor${
|
||||
currentFilters.categories.length > 1 ? "ies" : "y"
|
||||
}`
|
||||
);
|
||||
if (currentFilters.hasAssets) activeFilters.push("has assets");
|
||||
let countText = `${results.length} of ${allItems.length} skills`;
|
||||
if (activeFilters.length > 0) {
|
||||
countText += ` (filtered by ${activeFilters.join(', ')})`;
|
||||
countText += ` (filtered by ${activeFilters.join(", ")})`;
|
||||
}
|
||||
if (countEl) countEl.textContent = countText;
|
||||
}
|
||||
|
||||
function renderItems(items: Skill[], query = ''): void {
|
||||
const list = document.getElementById('resource-list');
|
||||
function renderItems(items: Skill[], query = ""): void {
|
||||
const list = document.getElementById("resource-list");
|
||||
if (!list) return;
|
||||
|
||||
if (items.length === 0) {
|
||||
list.innerHTML = '<div class="empty-state"><h3>No skills found</h3><p>Try a different search term or adjust filters</p></div>';
|
||||
list.innerHTML =
|
||||
'<div class="empty-state"><h3>No skills 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.skillFile)}" data-skill-id="${escapeHtml(item.id)}">
|
||||
list.innerHTML = items
|
||||
.map(
|
||||
(item) => `
|
||||
<div class="resource-item" data-path="${escapeHtml(
|
||||
item.skillFile
|
||||
)}" data-skill-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-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">
|
||||
<span class="resource-tag tag-category">${escapeHtml(item.category)}</span>
|
||||
${item.hasAssets ? `<span class="resource-tag tag-assets">${item.assetCount} asset${item.assetCount === 1 ? '' : 's'}</span>` : ''}
|
||||
<span class="resource-tag">${item.files.length} file${item.files.length === 1 ? '' : 's'}</span>
|
||||
<span class="resource-tag tag-category">${escapeHtml(
|
||||
item.category
|
||||
)}</span>
|
||||
${
|
||||
item.hasAssets
|
||||
? `<span class="resource-tag tag-assets">${
|
||||
item.assetCount
|
||||
} asset${item.assetCount === 1 ? "" : "s"}</span>`
|
||||
: ""
|
||||
}
|
||||
<span class="resource-tag">${item.files.length} file${
|
||||
item.files.length === 1 ? "" : "s"
|
||||
}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="resource-actions">
|
||||
<button class="btn btn-primary download-skill-btn" data-skill-id="${escapeHtml(item.id)}" title="Download as ZIP">
|
||||
<button class="btn btn-primary download-skill-btn" data-skill-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>
|
||||
<a href="${getGitHubUrl(
|
||||
item.path
|
||||
)}" class="btn btn-secondary" target="_blank" onclick="event.stopPropagation()" title="View on GitHub">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
|
||||
// Add click handlers for opening modal
|
||||
list.querySelectorAll('.resource-item').forEach(el => {
|
||||
el.addEventListener('click', (e) => {
|
||||
list.querySelectorAll(".resource-item").forEach((el) => {
|
||||
el.addEventListener("click", (e) => {
|
||||
// Don't trigger modal if clicking download button or github link
|
||||
if ((e.target as HTMLElement).closest('.resource-actions')) return;
|
||||
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-skill-btn').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
list.querySelectorAll(".download-skill-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const skillId = (btn as HTMLElement).dataset.skillId;
|
||||
if (skillId) downloadSkill(skillId, btn as HTMLButtonElement);
|
||||
@@ -116,16 +157,20 @@ function renderItems(items: Skill[], query = ''): void {
|
||||
});
|
||||
}
|
||||
|
||||
async function downloadSkill(skillId: string, btn: HTMLButtonElement): Promise<void> {
|
||||
const skill = allItems.find(item => item.id === skillId);
|
||||
async function downloadSkill(
|
||||
skillId: string,
|
||||
btn: HTMLButtonElement
|
||||
): Promise<void> {
|
||||
const skill = allItems.find((item) => item.id === skillId);
|
||||
if (!skill || !skill.files || skill.files.length === 0) {
|
||||
alert('No files found for this skill');
|
||||
showToast("No files found for this skill.", "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...';
|
||||
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();
|
||||
@@ -152,11 +197,11 @@ async function downloadSkill(skillId: string, btn: HTMLButtonElement): Promise<v
|
||||
}
|
||||
}
|
||||
|
||||
if (addedFiles === 0) throw new Error('Failed to fetch any files');
|
||||
if (addedFiles === 0) throw new Error("Failed to fetch any files");
|
||||
|
||||
const blob = await zip.generateAsync({ type: 'blob' });
|
||||
const blob = await zip.generateAsync({ type: "blob" });
|
||||
const downloadUrl = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
const link = document.createElement("a");
|
||||
link.href = downloadUrl;
|
||||
link.download = `${skill.id}.zip`;
|
||||
document.body.appendChild(link);
|
||||
@@ -164,49 +209,75 @@ async function downloadSkill(skillId: string, btn: HTMLButtonElement): Promise<v
|
||||
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 {
|
||||
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);
|
||||
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 initSkillsPage(): Promise<void> {
|
||||
const list = document.getElementById('resource-list');
|
||||
const searchInput = document.getElementById('search-input') as HTMLInputElement;
|
||||
const hasAssetsCheckbox = document.getElementById('filter-has-assets') as HTMLInputElement;
|
||||
const clearFiltersBtn = document.getElementById('clear-filters');
|
||||
const list = document.getElementById("resource-list");
|
||||
const searchInput = document.getElementById(
|
||||
"search-input"
|
||||
) as HTMLInputElement;
|
||||
const hasAssetsCheckbox = document.getElementById(
|
||||
"filter-has-assets"
|
||||
) as HTMLInputElement;
|
||||
const clearFiltersBtn = document.getElementById("clear-filters");
|
||||
|
||||
const data = await fetchData<SkillsData>('skills.json');
|
||||
const data = await fetchData<SkillsData>("skills.json");
|
||||
if (!data || !data.items) {
|
||||
if (list) list.innerHTML = '<div class="empty-state"><h3>Failed to load data</h3></div>';
|
||||
if (list)
|
||||
list.innerHTML =
|
||||
'<div class="empty-state"><h3>Failed to load data</h3></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
allItems = data.items;
|
||||
search.setItems(allItems);
|
||||
|
||||
categorySelect = createChoices('#filter-category', { placeholderValue: 'All Categories' });
|
||||
categorySelect.setChoices(data.filters.categories.map(c => ({ value: c, label: c })), 'value', 'label', true);
|
||||
document.getElementById('filter-category')?.addEventListener('change', () => {
|
||||
categorySelect = createChoices("#filter-category", {
|
||||
placeholderValue: "All Categories",
|
||||
});
|
||||
categorySelect.setChoices(
|
||||
data.filters.categories.map((c) => ({ value: c, label: c })),
|
||||
"value",
|
||||
"label",
|
||||
true
|
||||
);
|
||||
document.getElementById("filter-category")?.addEventListener("change", () => {
|
||||
currentFilters.categories = getChoicesValues(categorySelect);
|
||||
applyFiltersAndRender();
|
||||
});
|
||||
|
||||
applyFiltersAndRender();
|
||||
searchInput?.addEventListener('input', debounce(() => applyFiltersAndRender(), 200));
|
||||
searchInput?.addEventListener(
|
||||
"input",
|
||||
debounce(() => applyFiltersAndRender(), 200)
|
||||
);
|
||||
|
||||
hasAssetsCheckbox?.addEventListener('change', () => {
|
||||
hasAssetsCheckbox?.addEventListener("change", () => {
|
||||
currentFilters.hasAssets = hasAssetsCheckbox.checked;
|
||||
applyFiltersAndRender();
|
||||
});
|
||||
|
||||
clearFiltersBtn?.addEventListener('click', () => {
|
||||
clearFiltersBtn?.addEventListener("click", () => {
|
||||
currentFilters = { categories: [], hasAssets: false };
|
||||
categorySelect.removeActiveItems();
|
||||
if (hasAssetsCheckbox) hasAssetsCheckbox.checked = false;
|
||||
if (searchInput) searchInput.value = '';
|
||||
if (searchInput) searchInput.value = "";
|
||||
applyFiltersAndRender();
|
||||
});
|
||||
|
||||
@@ -214,4 +285,4 @@ export async function initSkillsPage(): Promise<void> {
|
||||
}
|
||||
|
||||
// Auto-initialize when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', initSkillsPage);
|
||||
document.addEventListener("DOMContentLoaded", initSkillsPage);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/**
|
||||
* Tools page functionality
|
||||
*/
|
||||
import { FuzzySearch, type SearchableItem } from '../search';
|
||||
import { fetchData, debounce, escapeHtml } from '../utils';
|
||||
import { FuzzySearch, type SearchableItem } from "../search";
|
||||
import { fetchData, debounce, escapeHtml } from "../utils";
|
||||
|
||||
export interface Tool extends SearchableItem {
|
||||
id: string;
|
||||
@@ -16,8 +16,8 @@ export interface Tool extends SearchableItem {
|
||||
links: {
|
||||
blog?: string;
|
||||
vscode?: string;
|
||||
'vscode-insiders'?: string;
|
||||
'visual-studio'?: string;
|
||||
"vscode-insiders"?: string;
|
||||
"visual-studio"?: string;
|
||||
github?: string;
|
||||
documentation?: string;
|
||||
marketplace?: string;
|
||||
@@ -43,19 +43,25 @@ let allItems: Tool[] = [];
|
||||
let search: FuzzySearch<Tool>;
|
||||
let currentFilters = {
|
||||
categories: [] as string[],
|
||||
query: '',
|
||||
query: "",
|
||||
};
|
||||
|
||||
function formatMultilineText(text: string): string {
|
||||
return escapeHtml(text).replace(/\r?\n/g, "<br>");
|
||||
}
|
||||
|
||||
function applyFiltersAndRender(): void {
|
||||
const searchInput = document.getElementById('search-input') as HTMLInputElement;
|
||||
const countEl = document.getElementById('results-count');
|
||||
const query = searchInput?.value || '';
|
||||
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 =>
|
||||
results = results.filter((item) =>
|
||||
currentFilters.categories.includes(item.category)
|
||||
);
|
||||
}
|
||||
@@ -69,8 +75,8 @@ function applyFiltersAndRender(): void {
|
||||
if (countEl) countEl.textContent = countText;
|
||||
}
|
||||
|
||||
function renderTools(tools: Tool[], query = ''): void {
|
||||
const container = document.getElementById('tools-list');
|
||||
function renderTools(tools: Tool[], query = ""): void {
|
||||
const container = document.getElementById("tools-list");
|
||||
if (!container) return;
|
||||
|
||||
if (tools.length === 0) {
|
||||
@@ -83,40 +89,54 @@ function renderTools(tools: Tool[], query = ''): void {
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = tools.map(tool => {
|
||||
const badges: string[] = [];
|
||||
if (tool.featured) {
|
||||
badges.push('<span class="tool-badge featured">Featured</span>');
|
||||
}
|
||||
badges.push(`<span class="tool-badge category">${escapeHtml(tool.category)}</span>`);
|
||||
container.innerHTML = tools
|
||||
.map((tool) => {
|
||||
const badges: string[] = [];
|
||||
if (tool.featured) {
|
||||
badges.push('<span class="tool-badge featured">Featured</span>');
|
||||
}
|
||||
badges.push(
|
||||
`<span class="tool-badge category">${escapeHtml(tool.category)}</span>`
|
||||
);
|
||||
|
||||
const features = tool.features && tool.features.length > 0
|
||||
? `<div class="tool-section">
|
||||
const features =
|
||||
tool.features && tool.features.length > 0
|
||||
? `<div class="tool-section">
|
||||
<h3>Features</h3>
|
||||
<ul>${tool.features.map(f => `<li>${escapeHtml(f)}</li>`).join('')}</ul>
|
||||
<ul>${tool.features
|
||||
.map((f) => `<li>${escapeHtml(f)}</li>`)
|
||||
.join("")}</ul>
|
||||
</div>`
|
||||
: '';
|
||||
: "";
|
||||
|
||||
const requirements = tool.requirements && tool.requirements.length > 0
|
||||
? `<div class="tool-section">
|
||||
const requirements =
|
||||
tool.requirements && tool.requirements.length > 0
|
||||
? `<div class="tool-section">
|
||||
<h3>Requirements</h3>
|
||||
<ul>${tool.requirements.map(r => `<li>${escapeHtml(r)}</li>`).join('')}</ul>
|
||||
<ul>${tool.requirements
|
||||
.map((r) => `<li>${escapeHtml(r)}</li>`)
|
||||
.join("")}</ul>
|
||||
</div>`
|
||||
: '';
|
||||
: "";
|
||||
|
||||
const tags = tool.tags && tool.tags.length > 0
|
||||
? `<div class="tool-tags">
|
||||
${tool.tags.map(t => `<span class="tool-tag">${escapeHtml(t)}</span>`).join('')}
|
||||
const tags =
|
||||
tool.tags && tool.tags.length > 0
|
||||
? `<div class="tool-tags">
|
||||
${tool.tags
|
||||
.map((t) => `<span class="tool-tag">${escapeHtml(t)}</span>`)
|
||||
.join("")}
|
||||
</div>`
|
||||
: '';
|
||||
: "";
|
||||
|
||||
const config = tool.configuration
|
||||
? `<div class="tool-config">
|
||||
const config = tool.configuration
|
||||
? `<div class="tool-config">
|
||||
<h3>Configuration</h3>
|
||||
<div class="tool-config-wrapper">
|
||||
<pre><code>${escapeHtml(tool.configuration.content)}</code></pre>
|
||||
</div>
|
||||
<button class="copy-config-btn" data-config="${encodeURIComponent(tool.configuration.content)}">
|
||||
<button class="copy-config-btn" data-config="${encodeURIComponent(
|
||||
tool.configuration.content
|
||||
)}">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"/>
|
||||
<path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"/>
|
||||
@@ -124,52 +144,74 @@ function renderTools(tools: Tool[], query = ''): void {
|
||||
Copy Configuration
|
||||
</button>
|
||||
</div>`
|
||||
: '';
|
||||
: "";
|
||||
|
||||
const actions: string[] = [];
|
||||
if (tool.links.blog) {
|
||||
actions.push(`<a href="${tool.links.blog}" class="btn btn-secondary" target="_blank" rel="noopener">📖 Blog</a>`);
|
||||
}
|
||||
if (tool.links.marketplace) {
|
||||
actions.push(`<a href="${tool.links.marketplace}" class="btn btn-secondary" target="_blank" rel="noopener">🏪 Marketplace</a>`);
|
||||
}
|
||||
if (tool.links.npm) {
|
||||
actions.push(`<a href="${tool.links.npm}" class="btn btn-secondary" target="_blank" rel="noopener">📦 npm</a>`);
|
||||
}
|
||||
if (tool.links.pypi) {
|
||||
actions.push(`<a href="${tool.links.pypi}" class="btn btn-secondary" target="_blank" rel="noopener">🐍 PyPI</a>`);
|
||||
}
|
||||
if (tool.links.documentation) {
|
||||
actions.push(`<a href="${tool.links.documentation}" class="btn btn-secondary" target="_blank" rel="noopener">📚 Docs</a>`);
|
||||
}
|
||||
if (tool.links.github) {
|
||||
actions.push(`<a href="${tool.links.github}" class="btn btn-secondary" target="_blank" rel="noopener">GitHub</a>`);
|
||||
}
|
||||
if (tool.links.vscode) {
|
||||
actions.push(`<a href="${tool.links.vscode}" class="btn btn-primary" target="_blank" rel="noopener">Install in VS Code</a>`);
|
||||
}
|
||||
if (tool.links['vscode-insiders']) {
|
||||
actions.push(`<a href="${tool.links['vscode-insiders']}" class="btn btn-outline" target="_blank" rel="noopener">VS Code Insiders</a>`);
|
||||
}
|
||||
if (tool.links['visual-studio']) {
|
||||
actions.push(`<a href="${tool.links['visual-studio']}" class="btn btn-outline" target="_blank" rel="noopener">Visual Studio</a>`);
|
||||
}
|
||||
const actions: string[] = [];
|
||||
if (tool.links.blog) {
|
||||
actions.push(
|
||||
`<a href="${tool.links.blog}" class="btn btn-secondary" target="_blank" rel="noopener">📖 Blog</a>`
|
||||
);
|
||||
}
|
||||
if (tool.links.marketplace) {
|
||||
actions.push(
|
||||
`<a href="${tool.links.marketplace}" class="btn btn-secondary" target="_blank" rel="noopener">🏪 Marketplace</a>`
|
||||
);
|
||||
}
|
||||
if (tool.links.npm) {
|
||||
actions.push(
|
||||
`<a href="${tool.links.npm}" class="btn btn-secondary" target="_blank" rel="noopener">📦 npm</a>`
|
||||
);
|
||||
}
|
||||
if (tool.links.pypi) {
|
||||
actions.push(
|
||||
`<a href="${tool.links.pypi}" class="btn btn-secondary" target="_blank" rel="noopener">🐍 PyPI</a>`
|
||||
);
|
||||
}
|
||||
if (tool.links.documentation) {
|
||||
actions.push(
|
||||
`<a href="${tool.links.documentation}" class="btn btn-secondary" target="_blank" rel="noopener">📚 Docs</a>`
|
||||
);
|
||||
}
|
||||
if (tool.links.github) {
|
||||
actions.push(
|
||||
`<a href="${tool.links.github}" class="btn btn-secondary" target="_blank" rel="noopener">GitHub</a>`
|
||||
);
|
||||
}
|
||||
if (tool.links.vscode) {
|
||||
actions.push(
|
||||
`<a href="${tool.links.vscode}" class="btn btn-primary" target="_blank" rel="noopener">Install in VS Code</a>`
|
||||
);
|
||||
}
|
||||
if (tool.links["vscode-insiders"]) {
|
||||
actions.push(
|
||||
`<a href="${tool.links["vscode-insiders"]}" class="btn btn-outline" target="_blank" rel="noopener">VS Code Insiders</a>`
|
||||
);
|
||||
}
|
||||
if (tool.links["visual-studio"]) {
|
||||
actions.push(
|
||||
`<a href="${tool.links["visual-studio"]}" class="btn btn-outline" target="_blank" rel="noopener">Visual Studio</a>`
|
||||
);
|
||||
}
|
||||
|
||||
const actionsHtml = actions.length > 0
|
||||
? `<div class="tool-actions">${actions.join('')}</div>`
|
||||
: '';
|
||||
const actionsHtml =
|
||||
actions.length > 0
|
||||
? `<div class="tool-actions">${actions.join("")}</div>`
|
||||
: "";
|
||||
|
||||
const titleHtml = query ? search.highlight(tool.name, query) : escapeHtml(tool.name);
|
||||
const titleHtml = query
|
||||
? search.highlight(tool.name, query)
|
||||
: escapeHtml(tool.name);
|
||||
const descriptionHtml = formatMultilineText(tool.description);
|
||||
|
||||
return `
|
||||
return `
|
||||
<div class="tool-card">
|
||||
<div class="tool-header">
|
||||
<h2>${titleHtml}</h2>
|
||||
<div class="tool-badges">
|
||||
${badges.join('')}
|
||||
${badges.join("")}
|
||||
</div>
|
||||
</div>
|
||||
<p class="tool-description">${escapeHtml(tool.description)}</p>
|
||||
<p class="tool-description">${descriptionHtml}</p>
|
||||
${features}
|
||||
${requirements}
|
||||
${config}
|
||||
@@ -177,20 +219,21 @@ function renderTools(tools: Tool[], query = ''): void {
|
||||
${actionsHtml}
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
})
|
||||
.join("");
|
||||
|
||||
setupCopyConfigHandlers();
|
||||
}
|
||||
|
||||
function setupCopyConfigHandlers(): void {
|
||||
document.querySelectorAll('.copy-config-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async (e) => {
|
||||
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 || '');
|
||||
const config = decodeURIComponent(button.dataset.config || "");
|
||||
try {
|
||||
await navigator.clipboard.writeText(config);
|
||||
button.classList.add('copied');
|
||||
button.classList.add("copied");
|
||||
const originalHtml = button.innerHTML;
|
||||
button.innerHTML = `
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
|
||||
@@ -199,35 +242,40 @@ function setupCopyConfigHandlers(): void {
|
||||
Copied!
|
||||
`;
|
||||
setTimeout(() => {
|
||||
button.classList.remove('copied');
|
||||
button.classList.remove("copied");
|
||||
button.innerHTML = originalHtml;
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy:', err);
|
||||
console.error("Failed to copy:", err);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export async function initToolsPage(): Promise<void> {
|
||||
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');
|
||||
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");
|
||||
|
||||
if (container) {
|
||||
container.innerHTML = '<div class="loading">Loading tools...</div>';
|
||||
}
|
||||
|
||||
const data = await fetchData<ToolsData>('tools.json');
|
||||
const data = await fetchData<ToolsData>("tools.json");
|
||||
if (!data || !data.items) {
|
||||
if (container) container.innerHTML = '<div class="empty-state"><h3>Failed to load tools</h3></div>';
|
||||
if (container)
|
||||
container.innerHTML =
|
||||
'<div class="empty-state"><h3>Failed to load tools</h3></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Map items to include title for FuzzySearch
|
||||
allItems = data.items.map(item => ({
|
||||
allItems = data.items.map((item) => ({
|
||||
...item,
|
||||
title: item.name, // FuzzySearch uses title
|
||||
}));
|
||||
@@ -237,23 +285,33 @@ export async function initToolsPage(): Promise<void> {
|
||||
|
||||
// Populate category filter
|
||||
if (categoryFilter && data.filters.categories) {
|
||||
categoryFilter.innerHTML = '<option value="">All Categories</option>' +
|
||||
data.filters.categories.map(c => `<option value="${escapeHtml(c)}">${escapeHtml(c)}</option>`).join('');
|
||||
categoryFilter.innerHTML =
|
||||
'<option value="">All Categories</option>' +
|
||||
data.filters.categories
|
||||
.map(
|
||||
(c) => `<option value="${escapeHtml(c)}">${escapeHtml(c)}</option>`
|
||||
)
|
||||
.join("");
|
||||
|
||||
categoryFilter.addEventListener('change', () => {
|
||||
currentFilters.categories = categoryFilter.value ? [categoryFilter.value] : [];
|
||||
categoryFilter.addEventListener("change", () => {
|
||||
currentFilters.categories = categoryFilter.value
|
||||
? [categoryFilter.value]
|
||||
: [];
|
||||
applyFiltersAndRender();
|
||||
});
|
||||
}
|
||||
|
||||
// Search input handler
|
||||
searchInput?.addEventListener('input', debounce(() => applyFiltersAndRender(), 200));
|
||||
searchInput?.addEventListener(
|
||||
"input",
|
||||
debounce(() => applyFiltersAndRender(), 200)
|
||||
);
|
||||
|
||||
// Clear filters
|
||||
clearFiltersBtn?.addEventListener('click', () => {
|
||||
currentFilters = { categories: [], query: '' };
|
||||
if (categoryFilter) categoryFilter.value = '';
|
||||
if (searchInput) searchInput.value = '';
|
||||
clearFiltersBtn?.addEventListener("click", () => {
|
||||
currentFilters = { categories: [], query: "" };
|
||||
if (categoryFilter) categoryFilter.value = "";
|
||||
if (searchInput) searchInput.value = "";
|
||||
applyFiltersAndRender();
|
||||
});
|
||||
|
||||
@@ -261,4 +319,4 @@ export async function initToolsPage(): Promise<void> {
|
||||
}
|
||||
|
||||
// Auto-initialize when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', initToolsPage);
|
||||
document.addEventListener("DOMContentLoaded", initToolsPage);
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
* Simple substring matching on title and description with scoring
|
||||
*/
|
||||
|
||||
import { escapeHtml, fetchData } from './utils';
|
||||
import { escapeHtml, fetchData } from "./utils";
|
||||
|
||||
export interface SearchItem {
|
||||
title: string;
|
||||
@@ -45,7 +45,7 @@ export class FuzzySearch<T extends SearchableItem = SearchItem> {
|
||||
*/
|
||||
search(query: string, options: SearchOptions = {}): T[] {
|
||||
const {
|
||||
fields = ['title', 'description', 'searchText'],
|
||||
fields = ["title", "description", "searchText"],
|
||||
limit = 50,
|
||||
minScore = 0,
|
||||
} = options;
|
||||
@@ -68,13 +68,17 @@ export class FuzzySearch<T extends SearchableItem = SearchItem> {
|
||||
// Sort by score descending
|
||||
results.sort((a, b) => b.score - a.score);
|
||||
|
||||
return results.slice(0, limit).map(r => r.item);
|
||||
return results.slice(0, limit).map((r) => r.item);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate match score for an item
|
||||
*/
|
||||
private calculateScore(item: T, queryWords: string[], fields: string[]): number {
|
||||
private calculateScore(
|
||||
item: T,
|
||||
queryWords: string[],
|
||||
fields: string[]
|
||||
): number {
|
||||
let totalScore = 0;
|
||||
|
||||
for (const word of queryWords) {
|
||||
@@ -87,23 +91,23 @@ export class FuzzySearch<T extends SearchableItem = SearchItem> {
|
||||
const normalizedValue = String(value).toLowerCase();
|
||||
|
||||
// Exact match in title gets highest score
|
||||
if (field === 'title' && normalizedValue === word) {
|
||||
if (field === "title" && normalizedValue === word) {
|
||||
wordScore = Math.max(wordScore, 100);
|
||||
}
|
||||
// Title starts with word
|
||||
else if (field === 'title' && normalizedValue.startsWith(word)) {
|
||||
else if (field === "title" && normalizedValue.startsWith(word)) {
|
||||
wordScore = Math.max(wordScore, 80);
|
||||
}
|
||||
// Title contains word
|
||||
else if (field === 'title' && normalizedValue.includes(word)) {
|
||||
else if (field === "title" && normalizedValue.includes(word)) {
|
||||
wordScore = Math.max(wordScore, 60);
|
||||
}
|
||||
// Description contains word
|
||||
else if (field === 'description' && normalizedValue.includes(word)) {
|
||||
else if (field === "description" && normalizedValue.includes(word)) {
|
||||
wordScore = Math.max(wordScore, 30);
|
||||
}
|
||||
// searchText (includes tags, tools, etc) contains word
|
||||
else if (field === 'searchText' && normalizedValue.includes(word)) {
|
||||
else if (field === "searchText" && normalizedValue.includes(word)) {
|
||||
wordScore = Math.max(wordScore, 20);
|
||||
}
|
||||
}
|
||||
@@ -112,8 +116,8 @@ export class FuzzySearch<T extends SearchableItem = SearchItem> {
|
||||
}
|
||||
|
||||
// Bonus for matching all words
|
||||
const matchesAllWords = queryWords.every(word =>
|
||||
fields.some(field => {
|
||||
const matchesAllWords = queryWords.every((word) =>
|
||||
fields.some((field) => {
|
||||
const value = (item as Record<string, unknown>)[field];
|
||||
return value && String(value).toLowerCase().includes(word);
|
||||
})
|
||||
@@ -130,7 +134,7 @@ export class FuzzySearch<T extends SearchableItem = SearchItem> {
|
||||
* Highlight matching text in a string
|
||||
*/
|
||||
highlight(text: string, query: string): string {
|
||||
if (!query || !text) return escapeHtml(text || '');
|
||||
if (!query || !text) return escapeHtml(text || "");
|
||||
|
||||
const normalizedQuery = query.toLowerCase().trim();
|
||||
const words = normalizedQuery.split(/\s+/);
|
||||
@@ -138,8 +142,27 @@ export class FuzzySearch<T extends SearchableItem = SearchItem> {
|
||||
|
||||
for (const word of words) {
|
||||
if (word.length < 2) continue;
|
||||
const regex = new RegExp(`(${word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
||||
result = result.replace(regex, '<mark>$1</mark>');
|
||||
const regex = new RegExp(
|
||||
`(${word.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
|
||||
"gi"
|
||||
);
|
||||
const parts = result.split(/(<[^>]+>)/g);
|
||||
let inMark = false;
|
||||
result = parts
|
||||
.map((part) => {
|
||||
if (part.startsWith("<")) {
|
||||
if (part.toLowerCase() === "<mark>") inMark = true;
|
||||
if (part.toLowerCase() === "</mark>") inMark = false;
|
||||
return part;
|
||||
}
|
||||
|
||||
if (inMark) {
|
||||
return part;
|
||||
}
|
||||
|
||||
return part.replace(regex, "<mark>$1</mark>");
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
return result;
|
||||
@@ -153,7 +176,7 @@ export const globalSearch = new FuzzySearch<SearchItem>();
|
||||
* Initialize global search with search index
|
||||
*/
|
||||
export async function initGlobalSearch(): Promise<FuzzySearch<SearchItem>> {
|
||||
const searchIndex = await fetchData<SearchItem[]>('search-index.json');
|
||||
const searchIndex = await fetchData<SearchItem[]>("search-index.json");
|
||||
if (searchIndex) {
|
||||
globalSearch.setItems(searchIndex);
|
||||
}
|
||||
|
||||
@@ -27,6 +27,9 @@ function applyTheme(theme: 'light' | 'dark'): void {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
}
|
||||
|
||||
const initialTheme = getThemePreference();
|
||||
applyTheme(initialTheme);
|
||||
|
||||
/**
|
||||
* Toggle between light and dark theme
|
||||
*/
|
||||
|
||||
@@ -2,22 +2,26 @@
|
||||
* Utility functions for the Awesome Copilot website
|
||||
*/
|
||||
|
||||
const REPO_BASE_URL = 'https://raw.githubusercontent.com/github/awesome-copilot/main';
|
||||
const REPO_GITHUB_URL = 'https://github.com/github/awesome-copilot/blob/main';
|
||||
const REPO_BASE_URL =
|
||||
"https://raw.githubusercontent.com/github/awesome-copilot/main";
|
||||
const REPO_GITHUB_URL = "https://github.com/github/awesome-copilot/blob/main";
|
||||
|
||||
// VS Code install URL configurations
|
||||
const VSCODE_INSTALL_CONFIG: Record<string, { baseUrl: string; scheme: string }> = {
|
||||
instructions: {
|
||||
baseUrl: 'https://aka.ms/awesome-copilot/install/instructions',
|
||||
scheme: 'chat-instructions'
|
||||
const VSCODE_INSTALL_CONFIG: Record<
|
||||
string,
|
||||
{ baseUrl: string; scheme: string }
|
||||
> = {
|
||||
instructions: {
|
||||
baseUrl: "https://aka.ms/awesome-copilot/install/instructions",
|
||||
scheme: "chat-instructions",
|
||||
},
|
||||
prompt: {
|
||||
baseUrl: 'https://aka.ms/awesome-copilot/install/prompt',
|
||||
scheme: 'chat-prompt'
|
||||
prompt: {
|
||||
baseUrl: "https://aka.ms/awesome-copilot/install/prompt",
|
||||
scheme: "chat-prompt",
|
||||
},
|
||||
agent: {
|
||||
baseUrl: 'https://aka.ms/awesome-copilot/install/agent',
|
||||
scheme: 'chat-agent'
|
||||
agent: {
|
||||
baseUrl: "https://aka.ms/awesome-copilot/install/agent",
|
||||
scheme: "chat-agent",
|
||||
},
|
||||
};
|
||||
|
||||
@@ -27,16 +31,18 @@ const VSCODE_INSTALL_CONFIG: Record<string, { baseUrl: string; scheme: string }>
|
||||
export function getBasePath(): string {
|
||||
// In Astro, import.meta.env.BASE_URL is available at build time
|
||||
// At runtime, we use a data attribute on the body
|
||||
if (typeof document !== 'undefined') {
|
||||
return document.body.dataset.basePath || '/';
|
||||
if (typeof document !== "undefined") {
|
||||
return document.body.dataset.basePath || "/";
|
||||
}
|
||||
return '/';
|
||||
return "/";
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch JSON data from the data directory
|
||||
*/
|
||||
export async function fetchData<T = unknown>(filename: string): Promise<T | null> {
|
||||
export async function fetchData<T = unknown>(
|
||||
filename: string
|
||||
): Promise<T | null> {
|
||||
try {
|
||||
const basePath = getBasePath();
|
||||
const response = await fetch(`${basePath}data/${filename}`);
|
||||
@@ -51,7 +57,9 @@ export async function fetchData<T = unknown>(filename: string): Promise<T | null
|
||||
/**
|
||||
* Fetch raw file content from GitHub
|
||||
*/
|
||||
export async function fetchFileContent(filePath: string): Promise<string | null> {
|
||||
export async function fetchFileContent(
|
||||
filePath: string
|
||||
): Promise<string | null> {
|
||||
try {
|
||||
const response = await fetch(`${REPO_BASE_URL}/${filePath}`);
|
||||
if (!response.ok) throw new Error(`Failed to fetch ${filePath}`);
|
||||
@@ -70,14 +78,14 @@ export async function copyToClipboard(text: string): Promise<boolean> {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return true;
|
||||
} catch {
|
||||
// Fallback for older browsers
|
||||
const textarea = document.createElement('textarea');
|
||||
// Deprecated fallback for older browsers that lack the async clipboard API.
|
||||
const textarea = document.createElement("textarea");
|
||||
textarea.value = text;
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.style.opacity = '0';
|
||||
textarea.style.position = "fixed";
|
||||
textarea.style.opacity = "0";
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
const success = document.execCommand('copy');
|
||||
const success = document.execCommand("copy");
|
||||
document.body.removeChild(textarea);
|
||||
return success;
|
||||
}
|
||||
@@ -89,14 +97,20 @@ export async function copyToClipboard(text: string): Promise<boolean> {
|
||||
* @param filePath - Path to the file
|
||||
* @param insiders - Whether to use VS Code Insiders
|
||||
*/
|
||||
export function getVSCodeInstallUrl(type: string, filePath: string, insiders = false): string | null {
|
||||
export function getVSCodeInstallUrl(
|
||||
type: string,
|
||||
filePath: string,
|
||||
insiders = false
|
||||
): string | null {
|
||||
const config = VSCODE_INSTALL_CONFIG[type];
|
||||
if (!config) return null;
|
||||
|
||||
|
||||
const rawUrl = `${REPO_BASE_URL}/${filePath}`;
|
||||
const vscodeScheme = insiders ? 'vscode-insiders' : 'vscode';
|
||||
const innerUrl = `${vscodeScheme}:${config.scheme}/install?url=${encodeURIComponent(rawUrl)}`;
|
||||
|
||||
const vscodeScheme = insiders ? "vscode-insiders" : "vscode";
|
||||
const innerUrl = `${vscodeScheme}:${
|
||||
config.scheme
|
||||
}/install?url=${encodeURIComponent(rawUrl)}`;
|
||||
|
||||
return `${config.baseUrl}?url=${encodeURIComponent(innerUrl)}`;
|
||||
}
|
||||
|
||||
@@ -120,25 +134,25 @@ export function getRawGitHubUrl(filePath: string): string {
|
||||
export async function downloadFile(filePath: string): Promise<boolean> {
|
||||
try {
|
||||
const response = await fetch(`${REPO_BASE_URL}/${filePath}`);
|
||||
if (!response.ok) throw new Error('Failed to fetch file');
|
||||
|
||||
if (!response.ok) throw new Error("Failed to fetch file");
|
||||
|
||||
const content = await response.text();
|
||||
const filename = filePath.split('/').pop() || 'file.md';
|
||||
|
||||
const blob = new Blob([content], { type: 'text/markdown' });
|
||||
const filename = filePath.split("/").pop() || "file.md";
|
||||
|
||||
const blob = new Blob([content], { type: "text/markdown" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const a = document.createElement('a');
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Download failed:', error);
|
||||
console.error("Download failed:", error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -147,22 +161,27 @@ export async function downloadFile(filePath: string): Promise<boolean> {
|
||||
* Share/copy link to clipboard (deep link to current page with file hash)
|
||||
*/
|
||||
export async function shareFile(filePath: string): Promise<boolean> {
|
||||
const deepLinkUrl = `${window.location.origin}${window.location.pathname}#file=${encodeURIComponent(filePath)}`;
|
||||
const deepLinkUrl = `${window.location.origin}${
|
||||
window.location.pathname
|
||||
}#file=${encodeURIComponent(filePath)}`;
|
||||
return copyToClipboard(deepLinkUrl);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show a toast notification
|
||||
*/
|
||||
export function showToast(message: string, type: 'success' | 'error' = 'success'): void {
|
||||
const existing = document.querySelector('.toast');
|
||||
export function showToast(
|
||||
message: string,
|
||||
type: "success" | "error" = "success"
|
||||
): void {
|
||||
const existing = document.querySelector(".toast");
|
||||
if (existing) existing.remove();
|
||||
|
||||
const toast = document.createElement('div');
|
||||
|
||||
const toast = document.createElement("div");
|
||||
toast.className = `toast ${type}`;
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
toast.remove();
|
||||
}, 3000);
|
||||
@@ -190,7 +209,7 @@ export function debounce<T extends (...args: unknown[]) => void>(
|
||||
* Escape HTML to prevent XSS
|
||||
*/
|
||||
export function escapeHtml(text: string): string {
|
||||
const div = document.createElement('div');
|
||||
const div = document.createElement("div");
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
@@ -199,20 +218,21 @@ export function escapeHtml(text: string): string {
|
||||
* Truncate text with ellipsis
|
||||
*/
|
||||
export function truncate(text: string | undefined, maxLength: number): string {
|
||||
if (!text || text.length <= maxLength) return text || '';
|
||||
return text.slice(0, maxLength).trim() + '...';
|
||||
if (!text || text.length <= maxLength) return text || "";
|
||||
return text.slice(0, maxLength).trim() + "...";
|
||||
}
|
||||
|
||||
/**
|
||||
* Get resource type from file path
|
||||
*/
|
||||
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')) return 'skill';
|
||||
if (filePath.endsWith('.collection.yml')) return 'collection';
|
||||
return 'unknown';
|
||||
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"))
|
||||
return "skill";
|
||||
if (filePath.endsWith(".collection.yml")) return "collection";
|
||||
return "unknown";
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -220,11 +240,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',
|
||||
agent: "🤖 Agent",
|
||||
prompt: "🎯 Prompt",
|
||||
instruction: "📋 Instruction",
|
||||
skill: "⚡ Skill",
|
||||
collection: "📦 Collection",
|
||||
};
|
||||
return labels[type] || type;
|
||||
}
|
||||
@@ -234,42 +254,50 @@ export function formatResourceType(type: string): string {
|
||||
*/
|
||||
export function getResourceIcon(type: string): string {
|
||||
const icons: Record<string, string> = {
|
||||
agent: '🤖',
|
||||
prompt: '🎯',
|
||||
instruction: '📋',
|
||||
skill: '⚡',
|
||||
collection: '📦',
|
||||
agent: "🤖",
|
||||
prompt: "🎯",
|
||||
instruction: "📋",
|
||||
skill: "⚡",
|
||||
collection: "📦",
|
||||
};
|
||||
return icons[type] || '📄';
|
||||
return icons[type] || "📄";
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate HTML for install dropdown button
|
||||
*/
|
||||
export function getInstallDropdownHtml(type: string, filePath: string, small = false): string {
|
||||
export function getInstallDropdownHtml(
|
||||
type: string,
|
||||
filePath: string,
|
||||
small = false
|
||||
): string {
|
||||
const vscodeUrl = getVSCodeInstallUrl(type, filePath, false);
|
||||
const insidersUrl = getVSCodeInstallUrl(type, filePath, true);
|
||||
|
||||
if (!vscodeUrl) return '';
|
||||
|
||||
const sizeClass = small ? 'install-dropdown-small' : '';
|
||||
const uniqueId = `install-${filePath.replace(/[^a-zA-Z0-9]/g, '-')}`;
|
||||
|
||||
|
||||
if (!vscodeUrl) return "";
|
||||
|
||||
const sizeClass = small ? "install-dropdown-small" : "";
|
||||
const uniqueId = `install-${filePath.replace(/[^a-zA-Z0-9]/g, "-")}`;
|
||||
|
||||
return `
|
||||
<div class="install-dropdown ${sizeClass}" id="${uniqueId}" onclick="event.stopPropagation()">
|
||||
<a href="${vscodeUrl}" class="btn btn-primary ${small ? 'btn-small' : ''} install-btn-main" target="_blank" rel="noopener">
|
||||
<div class="install-dropdown ${sizeClass}" id="${uniqueId}" data-install-scope="list">
|
||||
<a href="${vscodeUrl}" class="btn btn-primary ${
|
||||
small ? "btn-small" : ""
|
||||
} install-btn-main" target="_blank" rel="noopener">
|
||||
Install
|
||||
</a>
|
||||
<button type="button" class="btn btn-primary ${small ? 'btn-small' : ''} install-btn-toggle" aria-label="Install options" onclick="event.preventDefault(); this.parentElement.classList.toggle('open');">
|
||||
<button type="button" class="btn btn-primary ${
|
||||
small ? "btn-small" : ""
|
||||
} install-btn-toggle" aria-label="Install options" aria-expanded="false">
|
||||
<svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
|
||||
<path d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="install-dropdown-menu">
|
||||
<a href="${vscodeUrl}" target="_blank" rel="noopener" onclick="this.closest('.install-dropdown').classList.remove('open')">
|
||||
<a href="${vscodeUrl}" target="_blank" rel="noopener">
|
||||
VS Code
|
||||
</a>
|
||||
<a href="${insidersUrl}" target="_blank" rel="noopener" onclick="this.closest('.install-dropdown').classList.remove('open')">
|
||||
<a href="${insidersUrl}" target="_blank" rel="noopener">
|
||||
VS Code Insiders
|
||||
</a>
|
||||
</div>
|
||||
@@ -281,33 +309,77 @@ export function getInstallDropdownHtml(type: string, filePath: string, small = f
|
||||
* Setup dropdown close handlers for dynamically created dropdowns
|
||||
*/
|
||||
export function setupDropdownCloseHandlers(): void {
|
||||
document.addEventListener('click', (e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
// Close all open dropdowns if clicking outside
|
||||
if (!target.closest('.install-dropdown')) {
|
||||
document.querySelectorAll('.install-dropdown.open').forEach(dropdown => {
|
||||
dropdown.classList.remove('open');
|
||||
});
|
||||
}
|
||||
});
|
||||
if (dropdownHandlersReady) return;
|
||||
dropdownHandlersReady = true;
|
||||
|
||||
document.addEventListener(
|
||||
"click",
|
||||
(e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
const dropdown = target.closest(
|
||||
'.install-dropdown[data-install-scope="list"]'
|
||||
);
|
||||
const toggle = target.closest(
|
||||
".install-btn-toggle"
|
||||
) as HTMLButtonElement | null;
|
||||
const menuLink = target.closest(
|
||||
".install-dropdown-menu a"
|
||||
) as HTMLAnchorElement | null;
|
||||
|
||||
if (dropdown) {
|
||||
e.stopPropagation();
|
||||
|
||||
if (toggle) {
|
||||
e.preventDefault();
|
||||
const isOpen = dropdown.classList.toggle("open");
|
||||
toggle.setAttribute("aria-expanded", String(isOpen));
|
||||
return;
|
||||
}
|
||||
|
||||
if (menuLink) {
|
||||
dropdown.classList.remove("open");
|
||||
const toggleBtn = dropdown.querySelector<HTMLButtonElement>(
|
||||
".install-btn-toggle"
|
||||
);
|
||||
toggleBtn?.setAttribute("aria-expanded", "false");
|
||||
return;
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
document
|
||||
.querySelectorAll('.install-dropdown[data-install-scope="list"].open')
|
||||
.forEach((openDropdown) => {
|
||||
openDropdown.classList.remove("open");
|
||||
const toggleBtn = openDropdown.querySelector<HTMLButtonElement>(
|
||||
".install-btn-toggle"
|
||||
);
|
||||
toggleBtn?.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
},
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate HTML for action buttons (download, share) in list view
|
||||
*/
|
||||
export function getActionButtonsHtml(filePath: string, small = false): string {
|
||||
const btnClass = small ? 'btn-small' : '';
|
||||
const btnClass = small ? "btn-small" : "";
|
||||
const iconSize = small ? 14 : 16;
|
||||
// Escape backslashes first, then single quotes to prevent breaking out of the JavaScript string literal in the onclick attribute
|
||||
const escapedPath = filePath.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
|
||||
|
||||
|
||||
return `
|
||||
<button class="btn btn-secondary ${btnClass} action-download" data-path="${escapeHtml(filePath)}" onclick="event.stopPropagation(); window.__downloadFile && window.__downloadFile('${escapedPath}')" title="Download file">
|
||||
<button class="btn btn-secondary ${btnClass} action-download" data-path="${escapeHtml(
|
||||
filePath
|
||||
)}" title="Download file">
|
||||
<svg viewBox="0 0 16 16" width="${iconSize}" height="${iconSize}" fill="currentColor">
|
||||
<path d="M7.47 10.78a.75.75 0 0 0 1.06 0l3.75-3.75a.75.75 0 0 0-1.06-1.06L8.75 8.44V1.75a.75.75 0 0 0-1.5 0v6.69L4.78 5.97a.75.75 0 0 0-1.06 1.06l3.75 3.75ZM3.75 13a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="btn btn-secondary ${btnClass} action-share" data-path="${escapeHtml(filePath)}" onclick="event.stopPropagation(); window.__shareFile && window.__shareFile('${escapedPath}')" title="Copy link">
|
||||
<button class="btn btn-secondary ${btnClass} action-share" data-path="${escapeHtml(
|
||||
filePath
|
||||
)}" title="Copy link">
|
||||
<svg viewBox="0 0 16 16" width="${iconSize}" height="${iconSize}" fill="currentColor">
|
||||
<path d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-.025 5.45a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 1 1-2.83-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25z"/>
|
||||
</svg>
|
||||
@@ -319,14 +391,41 @@ export function getActionButtonsHtml(filePath: string, small = false): string {
|
||||
* Setup global action handlers for download and share buttons
|
||||
*/
|
||||
export function setupActionHandlers(): void {
|
||||
// Expose functions globally for inline onclick handlers
|
||||
(window as Window & { __downloadFile?: (path: string) => void; __shareFile?: (path: string) => void }).__downloadFile = async (path: string) => {
|
||||
const success = await downloadFile(path);
|
||||
showToast(success ? 'Download started!' : 'Download failed', success ? 'success' : 'error');
|
||||
};
|
||||
|
||||
(window as Window & { __downloadFile?: (path: string) => void; __shareFile?: (path: string) => void }).__shareFile = async (path: string) => {
|
||||
const success = await shareFile(path);
|
||||
showToast(success ? 'Link copied!' : 'Failed to copy link', success ? 'success' : 'error');
|
||||
};
|
||||
if (actionHandlersReady) return;
|
||||
actionHandlersReady = true;
|
||||
|
||||
document.addEventListener(
|
||||
"click",
|
||||
async (e) => {
|
||||
const target = (e.target as HTMLElement).closest(
|
||||
".action-download, .action-share"
|
||||
) as HTMLElement | null;
|
||||
if (!target) return;
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const path = target.dataset.path;
|
||||
if (!path) return;
|
||||
|
||||
if (target.classList.contains("action-download")) {
|
||||
const success = await downloadFile(path);
|
||||
showToast(
|
||||
success ? "Download started!" : "Download failed",
|
||||
success ? "success" : "error"
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const success = await shareFile(path);
|
||||
showToast(
|
||||
success ? "Link copied!" : "Failed to copy link",
|
||||
success ? "success" : "error"
|
||||
);
|
||||
},
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
let dropdownHandlersReady = false;
|
||||
let actionHandlersReady = false;
|
||||
|
||||
Reference in New Issue
Block a user