Awesome/awesome-copilot
1
0
Fork 0
mirror of https://github.com/github/awesome-copilot.git synced 2026-07-14 01:51:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

More website tweaks (#977)

Browse Source 
* Some layout tweaks

* SSR resource listing pages

Render resource listing pages in Astro for first paint and hydrate client filtering/search behavior on top.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Fixing font path

* removing feature plugin reference as we don't track that anymore

* button alignment

* rendering markdown

* Improve skills modal file browsing

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Improving the layout of the search/filter section

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Aaron Powell
2026-03-12 11:48:54 +11:00
committed by GitHub
parent 494d6ac783
commit e65c8359b1
32 changed files with 2808 additions and 1245 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/scripts/pages/instructions.ts
+42 -49
View File
@@ -3,12 +3,18 @@
*/
import { createChoices, getChoicesValues, type Choices } from '../choices';
import { FuzzySearch, type SearchItem } from '../search';
import { fetchData, debounce, escapeHtml, getGitHubUrl, getInstallDropdownHtml, setupDropdownCloseHandlers, getActionButtonsHtml, setupActionHandlers, getLastUpdatedHtml } from '../utils';
import { fetchData, debounce, setupDropdownCloseHandlers, setupActionHandlers } from '../utils';
import { setupModal, openFileModal } from '../modal';
import {
renderInstructionsHtml,
sortInstructions,
type InstructionSortOption,
type RenderableInstruction,
} from './instructions-render';
interface Instruction extends SearchItem {
interface Instruction extends SearchItem, RenderableInstruction {
path: string;
applyTo?: string;
applyTo?: string | string[];
extensions?: string[];
lastUpdated?: string | null;
}
@@ -20,24 +26,16 @@ interface InstructionsData {
};
}
type SortOption = 'title' | 'lastUpdated';
const resourceType = 'instruction';
let allItems: Instruction[] = [];
let search = new FuzzySearch<Instruction>();
let extensionSelect: Choices;
let currentFilters = { extensions: [] as string[] };
let currentSort: SortOption = 'title';
let currentSort: InstructionSortOption = 'title';
let resourceListHandlersReady = false;
function sortItems(items: Instruction[]): Instruction[] {
return [...items].sort((a, b) => {
if (currentSort === 'lastUpdated') {
const dateA = a.lastUpdated ? new Date(a.lastUpdated).getTime() : 0;
const dateB = b.lastUpdated ? new Date(b.lastUpdated).getTime() : 0;
return dateB - dateA;
}
return a.title.localeCompare(b.title);
});
return sortInstructions(items, currentSort);
}
function applyFiltersAndRender(): void {
@@ -70,48 +68,39 @@ function renderItems(items: Instruction[], query = ''): void {
const list = document.getElementById('resource-list');
if (!list) return;
if (items.length === 0) {
list.innerHTML = '<div class="empty-state"><h3>No instructions found</h3><p>Try a different search term or adjust filters</p></div>';
return;
}
list.innerHTML = items.map(item => `
<div class="resource-item" data-path="${escapeHtml(item.path)}">
<div class="resource-info">
<div class="resource-title">${query ? search.highlight(item.title, query) : escapeHtml(item.title)}</div>
<div class="resource-description">${escapeHtml(item.description || 'No description')}</div>
<div class="resource-meta">
${item.applyTo ? `<span class="resource-tag">applies to: ${escapeHtml(item.applyTo)}</span>` : ''}
${item.extensions?.slice(0, 4).map(e => `<span class="resource-tag tag-extension">${escapeHtml(e)}</span>`).join('') || ''}
${item.extensions && item.extensions.length > 4 ? `<span class="resource-tag">+${item.extensions.length - 4} more</span>` : ''}
${getLastUpdatedHtml(item.lastUpdated)}
</div>
</div>
<div class="resource-actions">
${getInstallDropdownHtml('instructions', item.path, true)}
${getActionButtonsHtml(item.path, true)}
<a href="${getGitHubUrl(item.path)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()" title="View on GitHub">
GitHub
</a>
</div>
</div>
`).join('');
// Add click handlers
list.querySelectorAll('.resource-item').forEach(el => {
el.addEventListener('click', () => {
const path = (el as HTMLElement).dataset.path;
if (path) openFileModal(path, resourceType);
});
list.innerHTML = renderInstructionsHtml(items, {
query,
highlightTitle: (title, highlightQuery) => search.highlight(title, highlightQuery),
});
}
function setupResourceListHandlers(list: HTMLElement | null): void {
if (!list || resourceListHandlersReady) return;
list.addEventListener('click', (event) => {
const target = event.target as HTMLElement;
if (target.closest('.resource-actions')) {
return;
}
const item = target.closest('.resource-item') as HTMLElement | null;
const path = item?.dataset.path;
if (path) {
openFileModal(path, resourceType);
}
});
resourceListHandlersReady = true;
}
export async function initInstructionsPage(): Promise<void> {
const list = document.getElementById('resource-list');
const searchInput = document.getElementById('search-input') as HTMLInputElement;
const clearFiltersBtn = document.getElementById('clear-filters');
const sortSelect = document.getElementById('sort-select') as HTMLSelectElement;
setupResourceListHandlers(list as HTMLElement | null);
const data = await fetchData<InstructionsData>('instructions.json');
if (!data || !data.items) {
if (list) list.innerHTML = '<div class="empty-state"><h3>Failed to load data</h3></div>';
@@ -129,11 +118,15 @@ export async function initInstructionsPage(): Promise<void> {
});
sortSelect?.addEventListener('change', () => {
currentSort = sortSelect.value as SortOption;
currentSort = sortSelect.value as InstructionSortOption;
applyFiltersAndRender();
});
applyFiltersAndRender();
const countEl = document.getElementById('results-count');
if (countEl) {
countEl.textContent = `${allItems.length} of ${allItems.length} instructions`;
}
searchInput?.addEventListener('input', debounce(() => applyFiltersAndRender(), 200));
clearFiltersBtn?.addEventListener('click', () => {