-
-
-
-
- Awesome Copilot
-
-
- (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(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('.install-btn-toggle');
- const menu = container.querySelector('.install-dropdown-menu');
- const menuItems = container.querySelectorAll('.install-dropdown-menu a');
-
- toggle?.addEventListener('click', (e) => {
+ const toggle = container.querySelector(
+ ".install-btn-toggle"
+ );
+ const menuItems = container.querySelectorAll(
+ ".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 {
- 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 {
+ 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 = ' {
// 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 = '('collections.json');
+ collectionsCache = await fetchData("collections.json");
}
if (!collectionsCache) {
- modalContent.innerHTML = '
- 
-
-
-
-
+
+
+
+ {title} - Awesome GitHub Copilot
+
+
+
+
+
+ Skip to main content
+
+
-
+
-
+
-
+
+
+
+ Awesome Copilot
+
+
+
+
+
+
+
Loading collection...
';
+ modalContent.innerHTML =
+ 'Loading collection...
';
// Load collections data if not cached
if (!collectionsCache) {
- collectionsCache = await fetchDataFailed to load collection data.
';
+ modalContent.innerHTML =
+ 'Failed to load collection data.
';
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 = 'Collection not found.
';
+ modalContent.innerHTML =
+ 'Collection not found.
';
return;
}
@@ -386,33 +436,57 @@ async function openCollectionModal(
// Render collection view
modalContent.innerHTML = `
- {
- // Load samples data
- samplesData = await fetchData('samples.json');
-
- if (!samplesData || samplesData.cookbooks.length === 0) {
+ try {
+ // Load samples data
+ samplesData = await fetchData("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 = `
();
- 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 = '';
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();
+ 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 => `
-
${escapeHtml(collection.description || '')}
- ${collection.tags && collection.tags.length > 0 ? `
+ ${escapeHtml(
+ collection.description || ""
+ )}
+ ${
+ collection.tags && collection.tags.length > 0
+ ? `
- ` : ''}
+ `
+ : ""
+ }
${collection.items.length} items in this collection
- ${collection.items.map(item => `
-
`;
// 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;
diff --git a/website/src/scripts/pages/samples.ts b/website/src/scripts/pages/samples.ts
index 1ab73a7b..8a896284 100644
--- a/website/src/scripts/pages/samples.ts
+++ b/website/src/scripts/pages/samples.ts
@@ -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
-
+ ${collection.items
+ .map(
+ (item) => `
+
+
- `).join('')}
+ `
+ )
+ .join("")}
-
${escapeHtml(item.kind)}
${escapeHtml(item.path.split('/').pop() || item.path)}
- ${item.usage ? `${escapeHtml(item.usage)}
` : ''}
+ ${escapeHtml(
+ item.path.split("/").pop() || item.path
+ )}
+ ${
+ item.usage
+ ? `${escapeHtml(
+ item.usage
+ )}
`
+ : ""
+ }
@@ -97,10 +105,10 @@ function showEmptyState(): void {
`;
}
-
+
// 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